import{LitElement as t,html as r,css as e}from"lit";import{isStringEmpty as i}from"./lib/utils.js";import{i18n as o}from"./translation.js";import"./cc-badge.js";import"./cc-button.js";import"./cc-img.js";class n extends t{static get properties(){return{description:{type:String},iconUrl:{type:String,attribute:"icon-url"},name:{type:String},productStatus:{type:String,attribute:"product-status"},url:{type:String}}}constructor(){super(),this.description=null,this.iconUrl=null,this.name=null,this.productStatus=null,this.url=null}render(){return r`
      <div class="wrapper">
        ${null!=this.iconUrl?r` <cc-img src="${this.iconUrl}"></cc-img> `:""}
        <a class="name" href="${this.url}" title="${o("cc-product-card.select",{name:this.name})}">
          ${this.name}
        </a>
        ${i(this.productStatus)?"":r` <cc-badge class="product-status">${this.productStatus}</cc-badge> `}
        <p class="description">${this.description}</p>
      </div>
    `}static get styles(){return[e`
        :host {
          display: block;
        }

        /* region RESET */

        p {
          margin: 0;
        }

        ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        /* endregion */

        /* region wrapper */

        .wrapper {
          background-color: var(--cc-color-bg-default, #fff);
          border: 2px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          display: grid;
          gap: 0.75em;
          grid-template-areas:
            'icon name status'
            'description description description';
          grid-template-columns: min-content auto 1fr;
          grid-template-rows: min-content auto;
          height: 100%;
          padding: 1em;
          position: relative;
        }

        .wrapper:hover {
          border-color: var(--cc-color-border-neutral-focused, #777);
          cursor: pointer;
        }

        .wrapper:focus-within {
          border: 2px solid var(--cc-color-border-neutral-focused, #777);
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .wrapper--no-status {
          grid-template-areas:
            'icon name'
            'description description';
          grid-template-columns: min-content 1fr;
          grid-template-rows: min-content auto;
        }

        /* endregion */

        /* region grid-items */

        cc-img {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 2em;
          width: 2em;
        }

        .name {
          color: var(--cc-color-text-strongest, #000);
          font-size: 1.75em;
          text-decoration: none;
        }

        .name::after {
          content: '';
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }

        .name:focus {
          outline: none;
        }

        .product-status {
          align-self: center;
          font-size: 0.85em;
          grid-area: status;
          width: min-content;
        }

        .description {
          color: var(--cc-color-text-weak, #333);
          font-size: 0.8em;
          grid-area: description;
          line-height: 1.5em;
        }

        /*  endregion */
      `]}}window.customElements.define("cc-product-card",n);export{n as CcProductCard};
//# sourceMappingURL=cc-product-card.js.map
