import{LitElement as e,html as r,css as t}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{iconRemixVerifiedBadgeFill as s,iconRemixPhoneFill as i}from"./assets/cc-remix.icons.js";import"./cc-badge.js";import"./cc-img.js";import"./cc-notice.js";import{skeletonStyles as c}from"./styles/skeleton.js";import{linkStyles as n}from"./templates/cc-link/cc-link.js";import{i18n as o}from"./translation.js";class l 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("")}render(){return"error"===this.state.type?r`<cc-notice intent=warning message=${o("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:t=null,cleverEnterprise:c=!1,emergencyNumber:n=null,skeleton:l=!1}){return r`<div class=wrapper><div class=header-body><p class=identity>${this._renderAvatar(l,t,e)} <span class="${a({skeleton:l})} name">${e}</span></p><div class=enterprise><p class=enterprise-row>${c?r`<cc-icon .icon=${s}></cc-icon><span lang=en>Clever Cloud Enterprise</span>`:""}</p>${null!=n?r`<p class=enterprise-row><cc-icon .icon=${i}>${n}</cc-icon><span>${o("cc-header-orga.hotline")} <a class=cc-link href=tel:${n}>${n}</a></span></p>`:""}</div></div><slot name=footer></slot></div>`}_renderAvatar(e,t,a){return e?r`<cc-img class=logo skeleton></cc-img>`:null==t?r`<span class=initials aria-hidden=true><span>${this._getInitials(a)}</span></span>`:r`<cc-img class=logo src=${t}></cc-img>`}static get styles(){return[n,c,t`:host{display:block}p{margin:0}cc-notice{width:100%}.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}.header-body{align-items:center;display:flex;flex-wrap:wrap;gap:1em;justify-content:space-between;padding:1em}.identity{align-items:center;display:flex;gap:1em}.initials,.logo{border-radius:var(--cc-border-radius-default,.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:.85em}.name{font-size:1.3em;font-weight:700}.enterprise{display:flex;flex-direction:column;gap:.5em}.enterprise-row{align-items:center;display:flex;gap:.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:.5em 1em}.skeleton{background-color:#bbb}`]}}window.customElements.define("cc-header-orga",l);export{l as CcHeaderOrga};
//# sourceMappingURL=cc-header-orga.js.map
