import{LitElement as t,html as i,css as o}from"../../../lit/index.js";export class ActivityBox extends t{static get styles(){return[o`
        :host {
          display: block;
        }
        .container {
          background: #54539c;
          background: -moz-linear-gradient(-45deg, #54539c 0%, #379ad2 99%);
          background: -webkit-linear-gradient(-45deg, #54539c 0%, #379ad2 99%);
          background: linear-gradient(135deg, #54539c 0%, #379ad2 99%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54539c', endColorstr='#379ad2',GradientType=1 );
          padding: var(--activity-box-container-padding, 7px);
          padding-top: var(--activity-box-container-padding-top, 14px);
          margin-bottom: var(--activity-box-container-margin-bottom, 20px);
          position: relative;
          min-height: 60px;
        }
        simple-icon {
          --simple-icon-height: 80px;
          --simple-icon-width: 80px;
          --simple-icon-color: white;
          float: left;
          position: absolute;
          top: 0px;
          left: var(--activity-box-icon-left, 0px);
        }
        .tag {
          padding: var(--activity-box-content-padding, 0px 0px 0px 85px);
        }
        .tag > span {
          background-color: #fff;
          color: var(--elmsln-system-color-dark);
          padding: 3px 10px;
          line-height: 10px;
          font-weight: var(--activity-box-tag-font-weight, bold);
          font-size: var(--activity-box-tag-font-size, 16px);
        }
        .tag > span > simple-icon {
          display: inline;
          left: 0px !important;
          --simple-icon-height: 23px;
          --simple-icon-width: 23px;
          --simple-icon-color: var(--elmsln-system-color-dark);
          display: inline;
          position: inherit;
          float: none;
          line-height: 17px;
        }
        .pullout {
          padding-left: 48px;
          color: white;
          margin-top: 0;
          font-family: var(--activity-box-content-font-family, inherit);
          font-weight: 400;
          margin-bottom: 10px;
          font-size: 126%;
          line-height: 28px;
          padding: var(--activity-box-content-padding, 0px 0px 0px 85px);
          margin-bottom: 13px !important;
          max-width: 100%;
        }
        :host([icon="null"]) .pullout,
        :host([icon="null"]) .tag,
        :host([icon=""]) .pullout,
        :host([icon=""]) .tag {
          padding-left: 10px;
        }
      `]}static get tag(){return"activity-box"}haxHooks(){return{activeElementChanged:"haxactiveElementChanged"}}haxactiveElementChanged(t,i){let o=this.shadowRoot.querySelector(".tag-content");return i?o.setAttribute("contenteditable",!0):(o.removeAttribute("contenteditable"),this.tag=o.innerText),!1}static get haxProperties(){return new URL("./activity-box.haxProperties.json",import.meta.url).href}static get properties(){return{icon:{type:String,reflect:!0},tag:{type:String,reflect:!0},nocolourize:{type:Boolean,reflect:!1}}}constructor(){super(),this.icon="",this.tag=""}render(){return i`
      <div class="container">
        ${this.icon?i`
              <simple-icon
                icon="${this.icon}"
                ?no-colorize=${this.nocolourize}
              ></simple-icon>
            `:i``}
        <div class="tag" ?hidden=${!this.tag}>
          <span class="tag-content"
            ><simple-icon icon="check-circle"></simple-icon>${this.tag}</span
          >
        </div>
        <div class="pullout"><slot></slot></div>
      </div>
    `}}customElements.define(ActivityBox.tag,ActivityBox);