import{LitElement as e,html as t,css as n}from"lit";import{ifDefined as i}from"lit/directives/if-defined.js";import{skeletonStyles as l}from"./styles/skeleton.js";import{ccLink as a,linkStyles as r}from"./templates/cc-link/cc-link.js";import{i18n as o}from"./translation.js";import"./cc-block.js";import"./cc-img.js";import"./cc-notice.js";import"./cc-zone.js";const s=[{name:"??????????????????",link:null,variantName:null,variantLogoUrl:null,zone:null},{name:"???????????????????????",link:null,variantName:null,variantLogoUrl:null,zone:null},{name:"????????????????????",link:null,variantName:null,variantLogoUrl:null,zone:null}];class c extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getEmptyContent(){return t`<div>${o("cc-addon-linked-apps.details")}</div><div class=cc-block_empty-msg>${o("cc-addon-linked-apps.no-linked-applications")}</div>`}_getErrorContent(){return t`<cc-notice intent=warning message=${o("cc-addon-linked-apps.loading-error")}></cc-notice>`}_getZoneState(e,t){return e?{type:"loading"}:{type:"loaded",...t}}render(){if("error"===this.state.type)return this._renderView(this._getErrorContent());const e="loading"===this.state.type,n="loaded"===this.state.type?this.state.linkedApplications:s;if(!(n.length>0))return this._renderView(this._getEmptyContent());const l=t`<div>${o("cc-addon-linked-apps.details")}</div>${n.map((n=>t`<div class=application><cc-img class=logo ?skeleton=${e} src=${i(n.variantLogoUrl)} title=${i(n.variantName)}></cc-img><div class=details><span class=name>${a(n.link,n.name,e)}</span><cc-zone mode=small .state=${this._getZoneState(e,n.zone)}></cc-zone></div></div>`))}`;return this._renderView(l)}_renderView(e){return t`<cc-block><div slot=title>${o("cc-addon-linked-apps.title")}</div>${e}</cc-block>`}static get styles(){return[r,l,n`:host{display:block}.application{align-items:flex-start;display:flex;line-height:1.6em}.logo{border-radius:var(--cc-border-radius-default,.25em);flex:0 0 auto;height:1.6em;width:1.6em}.details{align-items:center;display:flex;flex-wrap:wrap;gap:.5em;margin-left:.5em}.name.skeleton{background-color:#bbb}[title]{cursor:help}`]}}window.customElements.define("cc-addon-linked-apps",c);export{c as CcAddonLinkedApps};
//# sourceMappingURL=cc-addon-linked-apps.js.map
