import{LitElement as t,html as e,css as i}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{unsafeHTML as o}from"lit/directives/unsafe-html.js";import{iconRemixFileTextLine as s}from"./assets/cc-remix.icons.js";import{skeletonStyles as r}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-block.js";import"./cc-html-frame.js";import"./cc-icon.js";import"./cc-link.js";import"./cc-notice.js";const a={emissionDate:"2020-01-01",number:"????????????",amount:10};class l extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}render(){const t=this.state.number,i=null==t,r=i?a.number:t,l=i||"loading"===this.state.type,m="loaded"!==this.state.type||i?a:this.state,d=`${n("cc-invoice.title")} ${r}`;return e`
      <cc-block .icon=${s} class=${c({"has-errors":"error"===this.state.type})}>
        <div slot="header-title">
          ${i?e` ${n("cc-invoice.title")} <span class="skeleton">${r}</span> `:d}
        </div>

        ${"error"===this.state.type?e` <cc-notice slot="content" intent="warning" message="${n("cc-invoice.error")}"></cc-notice> `:""}
        ${"error"!==this.state.type?e`
              <div slot="header-right">
                <cc-link href="${m.downloadUrl}" ?skeleton="${l}"
                  >${n("cc-invoice.download-pdf")}</cc-link
                >
              </div>
              <div slot="content">
                <div class="info">
                  <em class=${c({skeleton:l})}>
                    ${n("cc-invoice.info",{date:m.emissionDate,amount:m.amount,currency:m.currency})}
                  </em>
                </div>
                <cc-html-frame class="frame" ?loading="${l}" iframe-title="${d}">
                  ${null!=m.invoiceHtml?o(`<template>${m.invoiceHtml}</template>`):""}
                </cc-html-frame>
              </div>
            `:""}
      </cc-block>
    `}static get styles(){return[r,i`
        :host {
          display: block;
        }

        [slot='button'] {
          align-self: start;
          margin-left: 1em;
        }

        cc-block {
          --cc-icon-color: var(--cc-color-text-primary);
        }

        .has-errors {
          --cc-skeleton-state: paused;
        }

        .skeleton {
          background-color: #bbb;
        }

        .info {
          display: flex;
          justify-content: center;
          margin-bottom: 1em;
        }

        .frame {
          /* height and max-width are roughly set to have a standard letter / A4 paper ratio */
          box-shadow: 0 0 0.5em rgb(0 0 0 / 40%);
          height: 31cm;
          margin-inline: auto;
          max-width: 22cm;
          width: 100%;
        }
      `]}}window.customElements.define("cc-invoice",l);export{l as CcInvoice};
//# sourceMappingURL=cc-invoice.js.map
