import{html as e,css as i}from"../../../lit/index.js";import{SimpleColors as t}from"../../simple-colors/simple-colors.js";import"../../haxcms-elements/lib/ui-components/query/site-query.js";import"./simple-blog-overview.js";class SimpleBlogListing extends t{static get styles(){return[super.styles,i`
        :host {
          display: block;
        }
        .listing {
          width: 100%;
          max-width: 640px;
          margin: 0 auto;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        @media only screen and (max-width: 800px) {
          .listing {
            padding: 0 32px;
          }
        }
        simple-blog-overview:not(:defined) {
          display: none;
        }
        simple-blog-overview {
          width: 100%;
          border: 1px solid #f2f2f0;
        }
      `]}static get tag(){return"simple-blog-listing"}constructor(){super(),this.__items=[]}render(){return e`
      <site-query
        @result-changed="${this.__itemsChanged}"
        sort='{"metadata.created": "DESC"}'
      ></site-query>
      <div class="listing">
        ${this.__items.map((i=>e`
            <simple-blog-overview
              item-id="${i.id}"
              title="${i.title}"
              description="${i.description}"
              link="${i.slug}"
              changed="${i.metadata.created}"
            ></simple-blog-overview>
          `))}
      </div>
    `}__itemsChanged(e){this.__items=[...e.detail.value]}static get properties(){return{...super.properties,__items:{type:Array}}}}customElements.define(SimpleBlogListing.tag,SimpleBlogListing);export{SimpleBlogListing};