import{store as t}from"../../core/haxcms-site-store.js";import{autorun as e,toJS as i}from"../../../../../mobx/dist/mobx.esm.js";import"../query/site-query.js";import{LitElement as s,css as a,html as r}from"../../../../../lit/index.js";class SiteRecentContentBlock extends s{constructor(){super(),this.limit=10,this.startIndex=0,this.sort={"metadata.created":"ASC"},this.conditions={},this.title="Recent content",this.__disposer=e((()=>{this.activeId=i(t.activeId)}))}updated(t){super.updated&&super.updated(t),t.has("activeId")&&this._activeIdChanged(this.activeId)}static get tag(){return"site-recent-content-block"}static get styles(){return[a`
        :host {
          display: block;
          background-color: #fff;
          box-shadow: 0 1px 2px #dcdcdc;
          padding: 10px;
          margin-top: 10px;
          --site-recent-content-block-header-color: #363533;
          --site-recent-content-block-item-link-color: #363533;
        }
        .header h3 {
          font-size: 26px;
          margin: 0 0 10px;
          color: var(--site-recent-content-block-header-color);
        }
        .item-wrap {
          display: flex;
          align-items: center;
          border-bottom: solid 1px #dcdcdc;
          padding-bottom: 8px;
          padding-top: 8px;
        }
        .item-heading a {
          text-decoration: none;
          text-transform: none;
          color: var(--site-recent-content-block-item-link-color);
          font-size: 16px;
        }
        .active {
          border-left: solid;
          border-left-width: 4px;
          border-left-color: var(--site-recent-content-block-active-color);
          background-color: whitesmoke;
          padding-left: 5px;
        }
        .image-wrapper {
          display: flex;
          margin-right: 10px;
        }
        .image-wrapper img.image {
          height: 50px;
          width: 50px;
        }
      `]}__resultChanged(t){t.detail&&t.detail.value&&(this.__items=[...t.detail.value])}render(){return r`
      <aside>
        <div class="header">
          <h3>${title}</h3>
        </div>
        <site-query
          @result-changed="${this.__resultChanged}"
          sort="${sort}"
          conditions="${conditions}"
          limit="${limit}"
          start-index="${startIndex}"
        >
        </site-query>
        ${this.__items.map((t=>r`
            <div class="item-wrap" data-id="${t.id}">
              <div class="image-wrapper">
                <img
                  class="image"
                  loading="lazy"
                  src="${t.metadata.fields.image}"
                />
              </div>
              <div class="item-heading">
                <a .href="${t.slug}">${t.title}</a>
              </div>
            </div>
          `))}
      </aside>
    `}static get properties(){return{limit:{type:Number},startIndex:{type:Number,attribute:"start-index"},__items:{type:Array},sort:{type:Object},conditions:{type:Object},title:{type:String},activeId:{type:String,attribute:"active-id"}}}_activeIdChanged(e){if(e){let i=null;if(this.shadowRoot.querySelector('[data-id="'+e+'"]'))i=this.shadowRoot.querySelector('[data-id="'+e+'"]');else{let s=t.manifest.items.find((t=>t.id==e));for(;null===i&&s&&null!=s.parent;)s=t.manifest.items.find((t=>t.id==s.parent)),s&&this.shadowRoot.querySelector('[data-id="'+s.id+'"]')&&(i=this.shadowRoot.querySelector('[data-id="'+s.id+'"]'))}this._prevEl&&this._prevEl.classList.remove("active"),i&&(i.classList.add("active"),this._prevEl=i)}}disconnectedCallback(){this.__disposer&&this.__disposer(),super.disconnectedCallback()}}customElements.define(SiteRecentContentBlock.tag,SiteRecentContentBlock);export{SiteRecentContentBlock};