import{LitElement as e,html as r,css as t}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{dispatchCustomEvent as o}from"./lib/events.js";import{isStringEmpty as i,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";class c extends e{static get properties(){return{orderSummary:{type:Object,attribute:"order-summary"}}}constructor(){super(),this.orderSummary=null}_onCreateClick(){o(this,"create")}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,a="waiting"===e;return r`${this._renderSummaryHeader()} ${this._renderSummaryBody()}<div class=footer><cc-button class=btn-submit type=submit primary ?waiting=${a} ?disabled=${t&&!a} @cc-button:click=${this._onCreateClick}>${s("cc-order-summary.create")}</cc-button></div>`}_renderSummaryHeader(){const{name:e,tags:t,logo:a}=this.orderSummary;return r`<div class=header>${i(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>`:""} ${i(a?.url)||i(a?.alt)?"":r`<div class=header--logo><cc-img class=logo src=${a.url} a11y-name=${a.alt}></cc-img></div>`}</div>`}_renderSummaryBody(){const{configuration:e,skeleton:t}=this.orderSummary;return r`<dl class=body>${e?.map((e=>{const{label:o,value:i}=e;return r`<div class=body--item><dt class=body--label><span class=${a({skeleton:t})}>${o}</span></dt><dd class="${a({skeleton:t})} body--value"><span>${i}</span></dd></div>`}))}</dl>`}static get styles(){return[l,t`:host{display:block}dl{margin-block:0}dd{margin-inline-start:0}.title{color:var(--cc-color-text-weak,#404040);font-weight:var(--cc-order-summary-font-weight,600);margin-block-end:.5em;padding-inline:.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,.25em);display:flex;flex-direction:column;padding:1.5em;row-gap:2em}.header{display:grid;gap:.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:.25em;grid-column:1/2;grid-row:2/3}.header--logo{grid-column:2/3;grid-row:1/3}.body{display:flex;flex-direction:column}.body--item{align-items:baseline;column-gap:.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)}.details-container{display:flex;flex-direction:column;padding-inline:.5em;row-gap:.5em}::slotted([slot=detail]){color:var(--cc-color-text-weak,#404040);font-size:var(--cc-order-summary-detail-font-size,.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}.logo{border:1px solid var(--cc-color-border-neutral-weak,#e7e7e7);border-radius:var(--cc-border-radius-default,.25em);height:3em;overflow:hidden;width:3em}.btn-submit{display:block;margin-block-start:.5em}.skeleton{background-color:var(--cc-color-bg-neutral-active,#d9d9d9);padding-inline:.25em}`]}}window.customElements.define("cc-order-summary-beta",c);export{c as CcOrderSummary};
//# sourceMappingURL=cc-order-summary.js.map
