import{LitElement as e,html as t,css as a}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{fakeString as d}from"./lib/fake-strings.js";import{skeletonStyles as o}from"./styles/skeleton.js";import{i18n as r}from"./translation.js";import"./cc-img.js";import"./cc-input-text.js";import"./cc-notice.js";import"./cc-zone.js";const l={id:null,realId:null,name:d(20),provider:{name:null,logoUrl:null},plan:{name:d(10)},creationDate:(new Date).toString()},n=d(5);class c extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading",hasVersion:!0}}render(){const e="loaded"===this.state.type?this.state:l,a="loading"===this.state.type,d=r("cc-header-addon.creation-date.short",{date:e.creationDate}),o="loaded"===this.state.type?r("cc-header-addon.creation-date.full",{date:e.creationDate}):null,c="loaded"===this.state.type&&this.state.hasVersion?this.state.version:n,p="loaded"===this.state.type?{type:"loaded",...this.state.zone}:{type:"loading"};return"error"===this.state.type?t`<cc-notice intent=warning message=${r("cc-header-addon.error")}></cc-notice>`:t`<div class=wrapper><div class=main><cc-img class=logo src=${s(e.provider.logoUrl)} a11y-name=${e.provider.name} title=${s(e.provider.name)} skeleton></cc-img><div class=details><div class=name><span class=${i({skeleton:a})}>${e.name}</span></div><div class=addon-id-inputs><cc-input-text label=${r("cc-header-addon.id-label")} hidden-label readonly=readonly clipboard value=${s(e.id)} ?skeleton=${a}></cc-input-text><cc-input-text .label=${r("cc-header-addon.id-label-alternative")} hidden-label readonly=readonly clipboard value=${s(e.realId)} ?skeleton=${a}></cc-input-text></div></div><div class=description><div class=description-item><div class=description-label>${r("cc-header-addon.plan")}</div><div class=${i({skeleton:a})}>${e.plan.name}</div></div>${this.state.hasVersion?t`<div class=description-item><div class=description-label>${r("cc-header-addon.version")}</div><div class=${i({skeleton:a})}>${c}</div></div>`:""}<div class=description-item><div class=description-label>${r("cc-header-addon.creation-date")}</div><div class=${i({skeleton:a})} title=${s(o)}>${d}</div></div></div></div><div class=messages><cc-zone .state=${p} mode=small-infra></cc-zone></div></div>`}static get styles(){return[o,a`:host{--cc-gap:1em;display:block}.wrapper{background-color:var(--cc-color-bg-default,#fff);border:1px solid var(--cc-color-border-neutral,#aaa);border-radius:var(--cc-border-radius-default,.25em);overflow:hidden}.main{display:flex;flex-wrap:wrap;gap:1em;padding:1em}.logo{border-radius:var(--cc-border-radius-default,.25em);height:3.25em;width:3.25em}.details{flex:1 1 11em}.description-label,.name{margin-bottom:.35em}.name{font-size:1.1em;font-weight:700}.addon-id-inputs{display:flex;flex-wrap:wrap;gap:1em}.description{align-self:center;display:flex;flex-wrap:wrap;gap:1em}.description-item{flex:1 1 auto}.description-label{font-weight:700}.messages{align-items:center;background-color:var(--cc-color-bg-neutral);box-shadow:inset 0 6px 6px -6px rgb(0 0 0 / 40%);box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:.9em;gap:.57em;justify-content:end;padding:.7em 1.1em}cc-zone{font-style:normal;white-space:nowrap}[title]{cursor:help}cc-input-text{--cc-input-font-family:var(--cc-ff-monospace, monospace)}.skeleton{background-color:#bbb}`]}}window.customElements.define("cc-header-addon",c);export{c as CcHeaderAddon};
//# sourceMappingURL=cc-header-addon.js.map
