import{LitElement as t,html as e,css as n}from"lit";import{ifDefined as i}from"lit/directives/if-defined.js";import{skeletonStyles as o}from"./styles/skeleton.js";import{i18n as l}from"./translation.js";import"./cc-block.js";import"./cc-img.js";import"./cc-link.js";import"./cc-notice.js";import"./cc-zone.js";const r=[{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 a extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getEmptyContent(){return e`
      <div slot="content">${l("cc-addon-linked-apps.details")}</div>
      <div slot="content" class="empty-msg">${l("cc-addon-linked-apps.no-linked-applications")}</div>
    `}_getErrorContent(){return e`
      <cc-notice slot="content" intent="warning" message="${l("cc-addon-linked-apps.loading-error")}"></cc-notice>
    `}_getZoneState(t,e){return t?{type:"loading"}:{type:"loaded",...e}}render(){if("error"===this.state.type)return this._renderView(this._getErrorContent());const t="loading"===this.state.type,n="loaded"===this.state.type?this.state.linkedApplications:r;if(!(n.length>0))return this._renderView(this._getEmptyContent());const o=e`
      <div slot="content">${l("cc-addon-linked-apps.details")}</div>

      ${n.map((n=>e`
          <div slot="content" class="application">
            <div class="details">
              <cc-link image="${i(n.variantLogoUrl)}" href="${n.link}" ?skeleton="${t}">
                ${n.name}
              </cc-link>
              <cc-zone mode="small" .state="${this._getZoneState(t,n.zone)}"></cc-zone>
            </div>
          </div>
        `))}
    `;return this._renderView(o)}_renderView(t){return e`
      <cc-block>
        <div slot="header-title">${l("cc-addon-linked-apps.title")}</div>
        ${t}
      </cc-block>
    `}static get styles(){return[o,n`
        :host {
          display: block;
        }

        cc-link::part(img) {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 1.6em;
          width: 1.6em;
        }

        .details {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        .empty-msg {
          color: var(--cc-color-text-weak);
          font-style: italic;
        }

        /* SKELETON */

        .name.skeleton {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-addon-linked-apps",a);export{a as CcAddonLinkedApps};
//# sourceMappingURL=cc-addon-linked-apps.js.map
