import{LitElement as t,html as e,css as r}from"lit";import{i18n as c}from"./translation.js";import"./cc-article-card.js";import"./cc-notice.js";class i extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){return"error"===this.state.type?e` <cc-notice intent="warning" message="${c("cc-article-list.error")}"></cc-notice> `:e`
      <div class="article-container">
        ${"loading"===this.state.type?e` ${new Array(9).fill(e` <cc-article-card></cc-article-card> `)} `:""}
        ${"loaded"===this.state.type?e`
              ${this.state.articles.map((t=>e` <cc-article-card .state=${{type:"loaded",...t}}></cc-article-card> `))}
            `:""}
      </div>
    `}static get styles(){return[r`
        :host {
          display: block;
        }

        .article-container {
          display: grid;
          gap: 1em;
          grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
        }
      `]}}window.customElements.define("cc-article-list",i);export{i as CcArticleList};
//# sourceMappingURL=cc-article-list.js.map
