import{LitElement as e,html as r,css as t}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{isStringEmpty as a,isStringBlank as d}from"./lib/utils.js";import{skeletonStyles as l}from"./styles/skeleton.js";import{i18n as s}from"./translation.js";import"./cc-badge.js";import"./cc-button.js";import"./cc-img.js";import{CcProductCreateEvent as n}from"./components/cc-order-summary/cc-order-summary.events.js";class c extends e{static get properties(){return{orderSummary:{type:Object,attribute:"order-summary"}}}constructor(){super(),this.orderSummary=null}_onCreateClick(){this.dispatchEvent(new n)}render(){return null==this.orderSummary?"":r`
      <div class="title">${s("cc-order-summary.title")}</div>
      <div class="summary">${this._renderSummary()}</div>
      <div class="details-container">
        <slot name="detail"></slot>
      </div>
    `}_renderSummary(){const{submitStatus:e}=this.orderSummary,t="disabled"===e,i="waiting"===e;return r`
      ${this._renderSummaryHeader()} ${this._renderSummaryBody()}
      <div class="footer">
        <cc-button
          class="btn-submit"
          type="submit"
          primary
          ?waiting=${i}
          ?disabled=${t&&!i}
          @cc-click=${this._onCreateClick}
        >
          ${s("cc-order-summary.create")}
        </cc-button>
      </div>
    `}_renderSummaryHeader(){const{name:e,tags:t,logo:i}=this.orderSummary;return r`
      <div class="header">
        ${a(e)?r`<div class="header--name header--name-empty">&hellip;</div>`:r`<div class="header--name">${e}</div>`}
        ${t?.length>0?r`<div class="header--tags">${t.filter((e=>!d(e))).map((e=>r`<cc-badge intent="info" weight="dimmed">${e.trim()}</cc-badge>`))}</div>`:""}
        ${a(i?.url)||a(i?.alt)?"":r`<div class="header--logo">
              <cc-img class="logo" src="${i.url}" a11y-name="${i.alt}"></cc-img>
            </div>`}
      </div>
    `}_renderSummaryBody(){return r`<dl class="body">
      ${this.orderSummary.configuration?.map((e=>{const{label:t,value:a,a11yLive:d,skeleton:l,skeletonValueOnly:s}=e,n=d?"false":null;return r`<div class="body--item" aria-live="${o(d?"polite":null)}" aria-atomic="${o(n)}">
          <dt class="body--label">
            <span class="${i({skeleton:l})}">${t}</span>
          </dt>
          <dd class="body--value ${i({skeleton:l||s})}">
            <span>${a}</span>
          </dd>
        </div>`}))}
    </dl>`}static get styles(){return[l,t`
        :host {
          display: block;
        }

        /* region reset */
        dl {
          margin-block: 0;
        }

        dd {
          margin-inline-start: 0;
        }
        /* endregion */

        /* region blocks */
        .title {
          color: var(--cc-color-text-weak, #404040);
          font-weight: var(--cc-order-summary-font-weight, 600);
          margin-block-end: 0.5em;
          padding-inline: 0.125em;
        }

        .summary {
          background-color: var(--cc-color-bg-neutral, #f5f5f5);
          border: 1px solid var(--cc-color-border-neutral-weak, #e7e7e7);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: flex;
          flex-direction: column;
          padding: 1.5em;
          row-gap: 2em;
        }
        /* endregion */

        /* region elements > header */
        .header {
          display: grid;
          gap: 0.25em;
          grid-template-columns: 1fr min-content;
        }

        .header--name {
          font-size: 1.125em;
          font-weight: var(--cc-order-summary-font-weight, 600);
          grid-column: 1 / 2;
          grid-row: 1 / 2;
          word-break: break-word;
        }

        .header--tags {
          display: inline-flex;
          flex-wrap: wrap;
          gap: 0.25em;
          grid-column: 1 / 2;
          grid-row: 2 / 3;
        }

        .header--logo {
          grid-column: 2 / 3;
          grid-row: 1 / 3;
        }
        /* endregion */

        /* region elements > body */
        .body {
          display: flex;
          flex-direction: column;
        }

        .body--item {
          align-items: baseline;
          column-gap: 0.5em;
          display: flex;
        }

        .body--item:not(:last-child) {
          border-block-end: 1px dotted var(--cc-color-border-primary-weak, #ccd4dc);
          margin-block-end: 1em;
          padding-block-end: 1em;
        }

        .body--label {
          color: var(--cc-color-text-weak, #404040);
          flex: 1 1 auto;
        }

        .body--value {
          flex: 0 1 auto;
          font-weight: var(--cc-order-summary-font-weight, 600);
        }
        /* endregion */

        /* region elements > details */
        .details-container {
          display: flex;
          flex-direction: column;
          padding-inline: 0.5em;
          row-gap: 0.5em;
        }

        ::slotted([slot='detail']) {
          color: var(--cc-color-text-weak, #404040);
          font-size: var(--cc-order-summary-detail-font-size, 0.825em);
          line-height: 1.5;
        }

        ::slotted([slot='detail']:first-child) {
          margin-block-start: 1.5em;
        }

        ::slotted([slot='detail']:last-child) {
          margin-block-end: 1.5em;
        }
        /* endregion */

        /* region elements > misc */
        .logo {
          border: 1px solid var(--cc-color-border-neutral-weak, #e7e7e7);
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 3em;
          overflow: hidden;
          width: 3em;
        }

        .btn-submit {
          display: block;
          margin-block-start: 0.5em;
        }

        .skeleton {
          background-color: var(--cc-color-bg-neutral-active, #d9d9d9);
          padding-inline: 0.25em;
        }
        /* endregion */
      `]}}window.customElements.define("cc-order-summary-beta",c);export{c as CcOrderSummary};
//# sourceMappingURL=cc-order-summary.js.map
