import{LitElement as t,html as e,css as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{fakeString as o}from"./lib/fake-strings.js";import{skeletonStyles as a}from"./styles/skeleton.js";import{i18n as l}from"./translation.js";import"./cc-img.js";import"./cc-link.js";const n={date:"Tue, 22 Mar 2022 08:39:00 +0000",description:o(128),title:o(45),link:null,banner:null};class c extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){const t="loading"===this.state.type,i="loaded"===this.state.type?this.state:n;return e`
      <cc-img class="image" src=${s(i.banner)}></cc-img>
      ${t?e`
            <div class="title">
              <span class="skeleton">${i.title}</span>
            </div>
          `:""}
      ${"loaded"===this.state.type?e`
            <div class="title"><cc-link href="${i.link}" disable-external-link-icon>${i.title}</cc-link></div>
          `:""}
      <div>
        <span class=${r({skeleton:t})}>${i.description}</span>
      </div>
      <div class="date">
        <span class=${r({skeleton:t})}>${l("cc-article-card.date",{date:i.date})}</span>
      </div>
    `}static get styles(){return[a,i`
        :host {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          display: grid;
          gap: 1em;
          grid-template-columns: 1fr;
          grid-template-rows: min-content min-content 1fr min-content;
          overflow: hidden;
          padding: 1em;
        }

        .image {
          border-bottom: 1px solid var(--cc-color-border-neutral, #aaa);
          display: block;
          height: 8em;
          justify-self: stretch;
          margin: -1em -1em 0;
        }

        .title {
          font-size: 1.2em;
          font-weight: bold;
        }

        .title a {
          color: inherit;
          text-decoration: none;
        }

        .title a:hover {
          text-decoration: underline;
        }

        .title a:visited {
          color: inherit;
        }

        .date {
          font-size: 0.85em;
          font-style: italic;
        }

        .skeleton {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-article-card",c);export{c as CcArticleCard};
//# sourceMappingURL=cc-article-card.js.map
