import{LitElement as e,html as t,css as r}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{iconRemixVerifiedBadgeFill as i,iconRemixPhoneFill as o}from"./assets/cc-remix.icons.js";import{skeletonStyles as n}from"./styles/skeleton.js";import{i18n as a}from"./translation.js";import"./cc-badge.js";import"./cc-block.js";import"./cc-img.js";import"./cc-link.js";import"./cc-notice.js";class c extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getInitials(e){return e.trim().split(" ").slice(0,2).map((e=>e[0].toUpperCase())).join("")}_setSlotAttributeIfHasAssignedNodes(e){return t=>{const r=t.target;r.assignedNodes().length>0?r.setAttribute("slot",e):r.removeAttribute("slot"),this.requestUpdate()}}render(){return"error"===this.state.type?t` <cc-notice intent="warning" message="${a("cc-header-orga.error")}"></cc-notice> `:"loading"===this.state.type?this._renderHeader({name:"??????????????????????????",skeleton:!0}):"loaded"===this.state.type?this._renderHeader({name:this.state.name,avatar:this.state.avatar,cleverEnterprise:this.state.cleverEnterprise,emergencyNumber:this.state.emergencyNumber,skeleton:!1}):""}_renderHeader({name:e,avatar:r=null,cleverEnterprise:n=!1,emergencyNumber:c=null,skeleton:l=!1}){return t`
      <cc-block>
        <div slot="content" class="header-body">
          <p class="identity">
            ${this._renderAvatar(l,r,e)}
            <span class="name ${s({skeleton:l})}">${e}</span>
          </p>
          <div class="enterprise">
            <p class="enterprise-row">
              ${n?t`
                    <cc-icon .icon=${i}></cc-icon>
                    <span lang="en">Clever Cloud Enterprise</span>
                  `:""}
            </p>
            ${null!=c?t`
                  <p class="enterprise-row">
                    <cc-icon .icon=${o}>${c}</cc-icon>
                    <span>
                      ${a("cc-header-orga.hotline")}
                      <cc-link href="tel:${c}" disable-external-link-icon>${c}</cc-link>
                    </span>
                  </p>
                `:""}
          </div>
        </div>
        <!-- @ts-ignore -->
        <slot
          @slotchange=${this._setSlotAttributeIfHasAssignedNodes("footer-left")}
          name="footer-left"
          class="footer"
        ></slot>
        <!-- @ts-ignore -->
        <slot
          @slotchange=${this._setSlotAttributeIfHasAssignedNodes("footer-right")}
          name="footer-right"
          class="footer"
        ></slot>
      </cc-block>
    `}_renderAvatar(e,r,s){return e?t` <cc-img class="logo" skeleton></cc-img> `:null==r?t`
        <span class="initials" aria-hidden="true">
          <span>${this._getInitials(s)}</span>
        </span>
      `:t` <cc-img class="logo" src="${r}"></cc-img> `}static get styles(){return[n,r`
        :host {
          display: block;
        }

        p {
          margin: 0;
        }

        cc-notice {
          width: 100%;
        }

        .header-body {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
          justify-content: space-between;
        }

        .identity {
          align-items: center;
          display: flex;
          gap: 1em;
        }

        .logo,
        .initials {
          border-radius: var(--cc-border-radius-default, 0.25em);
          flex: 0 0 auto;
          height: 3.25em;
          width: 3.25em;
        }

        .initials {
          align-items: center;
          background-color: var(--cc-color-bg-neutral);
          display: flex;
          justify-content: center;
        }

        .initials span {
          font-size: 0.85em;
        }

        .name {
          font-size: 1.3em;
          font-weight: bold;
        }

        .enterprise {
          display: flex;
          flex-direction: column;
          gap: 0.5em;
        }

        .enterprise-row {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .enterprise-row cc-icon {
          --cc-icon-color: var(--cc-color-text-primary-highlight);

          flex: 0 0 auto;
        }

        ::slotted([slot='footer']) {
          background-color: var(--cc-color-bg-neutral);
          border-top: solid 1px var(--cc-color-border-neutral-weak);
          padding: 0.5em 1em;
        }

        /* SKELETON */

        .skeleton {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-header-orga",c);export{c as CcHeaderOrga};
//# sourceMappingURL=cc-header-orga.js.map
