"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[2245],{2245(e,t,i){i(1821),i(1161),i(3477);var a,n=i(1618),s=i(9609),o=i(7154),r=i(4084),c=i(7161),l=i(429),h=i(5125),p=i(291),d=i(318),m=i(9756),y=i(4470),u=i(6325),g=function(e,t,i,a){var n,s=arguments.length,o=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,a);else for(var r=e.length-1;r>=0;r--)(n=e[r])&&(o=(s<3?n(o):s>3?n(t,i,o):n(t,i))||o);return s>3&&o&&Object.defineProperty(t,i,o),o};!function(e){let t=class extends c.LitElement{constructor(){super(...arguments),this._tabIndex=0,this.alt="",this.src="",this.label="",this.title="",this.color="",this.decrypting=!1,this.role="img",this.iconName="",this.failurePresence=!1,this.type="",this.presenceAriaLabel="",this.newMomentum=!1,this.typing=!1,this.size=40,this.hasNotification=!1,this.clickable=!1,this.avatarStyle="default",this.state="rest",this.imageLoaded=!1,this.imageErrored=!1,this.presenceColor="",this.presenceIcon="",this.iconNameMap={"channel-chat":"chat-filled","channel-chat-outbound":"chat-outbound-filled","channel-social":"sms-message-filled","channel-sms-inbound":"sms-filled","channel-sms-outbound":"sms-outgoing-filled","channel-email-inbound":"email-filled","channel-email-outbound":"email-outgoing-filled","channel-call":"handset-filled","channel-call-inbound":"incoming-call-legacy-filled","channel-callback":"outgoing-call-legacy-filled","channel-callback-v2":"outgoing-call-legacy-bold","channel-headset":"headset-filled","channel-campaign":"campaign-management-bold","channel-emoji":"emoji-happy-filled","channel-webex":"webex-app-icon-color-container","channel-fb-messenger":"social-fbmessenger-color","channel-facebook":"social-facebook-color","channel-apple-chat":"apple-business-chat-color","channel-line":"social-line-color","channel-twitter-x":"social-x","channel-viber":"social-viber-color","channel-whats-app":"social-whatsapp-color","channel-we-chat":"social-wechat-color","channel-spam":"participant-unknown-bold","channel-monitoring":"monitoring-bold","channel-work-item":"custom-task-ind-regular","channel-custom-messaging":"chat-group-filled"}}get tabIndex(){return this._tabIndex}set tabIndex(e){const t=this._tabIndex;this._tabIndex=e,this.requestUpdate("tabIndex",t)}static get styles(){return[r.A,u.A]}isPresenceType(e){return n.e.includes(e)}get presenceLabel(){if(this.presenceAriaLabel)return this.presenceAriaLabel;const e=this.presenceType||(this.isPresenceType(this.type)?this.type:"");return y.mS[e]||""}get computedAriaLabel(){const e=this.label||this.title,t=this.presenceLabel;return e&&t?`${e}, ${t}`:t||e||void 0}firstUpdated(){const e=this.presenceType||(this.isPresenceType(this.type)?this.type:"");if(e){const{presenceColor:t,presenceIcon:i}=(0,n.E)(e,this.failurePresence,this.newMomentum);this.presenceColor=t,this.presenceIcon=i}}willUpdate(e){var t;null===(t=super.willUpdate)||void 0===t||t.call(this,e);const i=this.presenceType||(this.isPresenceType(this.type)?this.type:"");if(i&&(e.has("type")||e.has("presenceType")||e.has("newMomentum"))){const{presenceColor:e,presenceIcon:t}=(0,n.E)(i,this.failurePresence,this.newMomentum);this.presenceColor=e,this.presenceIcon=t}}updated(e){super.updated(e),e.has("role")&&this.style.setProperty("--avatar-cursor","button"===this.role?"pointer":"default")}get avatarClassMap(){return Object.assign(Object.assign({},this.newMomentum&&"bot"!==this.type||!this.type?{}:{[`md-avatar--${this.type}`]:!0}),{[`md-avatar--${this.size}`]:!!this.size,[`md-avatar--${this.color}`]:!!this.color,active:"active"===this.state})}get avatarLetterClassMap(){return{"md-decrypting":this.decrypting,[`md-avatar--${this.color}`]:this.color,"new-momentum":this.newMomentum,active:"active"===this.state}}get avatarStyleMap(){return{[`md-avatar--${this.color}`]:this.color}}get pretifyTitle(){if(this.title.length){const e=this.title.trim().split(" ");return 1===e.length?e[0].charAt(0):e[0].charAt(0)+e[e.length-1].charAt(0)}return this.title}get chatIconName(){return"chat-filled"}getIconName(e){return this.iconNameMap[e]||""}get chatIconSize(){return this.iconSize}get presenceSize(){return this.size<=24?10.5:this.size<=32?14:this.size<=48?13.94:this.size<=64?18.58:this.size<=72?20.9:this.size<=88?25.55:36}get iconSize(){return 24===this.size?"16":28===this.size?"18":32===this.size?"20":36===this.size?"22":40===this.size?"24":48===this.size?"28":56===this.size?"32":64===this.size?"36":72===this.size?"40":Math.round(this.size/1.7).toString()}get renderIsTyping(){return"typing"===this.type||this.typing?c.html` <md-loading></md-loading> `:c.nothing}get avatarLetter(){return this.title?c.html`
            <span class="md-avatar__letter ${(0,h.classMap)(this.avatarLetterClassMap)}">
              ${this.pretifyTitle}
              <slot></slot>
              ${this.renderIsTyping}
            </span>
          `:c.nothing}get avatarIcon(){return c.html`
        <span class="md-avatar__icon ${(0,h.classMap)(this.avatarStyleMap)}">
          <md-icon
            .name=${this.iconName}
            .iconSet=${this.newMomentum?"momentumDesign":"momentumUI"}
            .size=${this.newMomentum?this.iconSize:""}
          ></md-icon>
        </span>
      `}get avatarImage(){return c.html`
        ${(0,m.until)(this.loadImage().then(e=>(this.handleImageLoad(),c.html` ${e} `)).catch(()=>this.handleImageError()),c.html` ${this.iconName?this.avatarIcon:this.title?c.html` ${this.avatarLetter} `:c.nothing} `)}
      `}loadImage(){return e=this,t=void 0,a=function*(){return new Promise((e,t)=>{const i=document.createElement("img");i.src=this.src,i.alt=this.alt,i.onload=()=>e(i),i.onerror=e=>t(e),i.classList.add("md-avatar__img"),i.classList.toggle("md-avatar__img--hidden",!this.imageLoaded)})},new((i=void 0)||(i=Promise))(function(n,s){function o(e){try{c(a.next(e))}catch(e){s(e)}}function r(e){try{c(a.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(o,r)}c((a=a.apply(e,t||[])).next())});var e,t,i,a}handleImageLoad(){this.imageLoaded=!0}handleImageError(){this.imageErrored=!0}handleKeyDown(e){if(!this.clickable)return;const{code:t}=e;(0,o.o)(t)&&this.dispatchEvent(new CustomEvent("button-keydown",{composed:!0,bubbles:!0,detail:{srcEvent:e}}))}handleClick(e){var t;this.clickable&&(null===(t=this.clickFunction)||void 0===t||t.call(this),this.dispatchEvent(new CustomEvent("button-click",{composed:!0,bubbles:!0,detail:{srcEvent:e}})))}getBrandOrDesignIconSet(e){return new Set(["webex-app-icon-color-container","social-fbmessenger-color","social-facebook-color","apple-business-chat-color","social-line-color","social-viber-color","social-x","social-whatsapp-color","social-wechat-color"]).has(e)?"momentumBrandVisuals":"momentumDesign"}get avatarContent(){return this.src&&!this.imageErrored?this.avatarImage:this.iconName?this.avatarIcon:this.title?this.avatarLetter:c.nothing}renderPresence(){return this.newMomentum&&(this.presenceType||this.type)&&"self"!==this.type&&this.presenceIcon?c.html`
            <md-presence
              class="avatar-presence"
              name="${this.presenceIcon}"
              color="${this.presenceColor}"
              size="${this.presenceSize}"
              .failurePresence=${this.failurePresence}
              .newMomentum=${this.newMomentum}
              .avatarLinked=${!0}
              aria-hidden="true"
            >
            </md-presence>
          `:c.nothing}renderAvatarContent(){const e=this.getIconName(this.type);if("channel-custom"===this.type)return c.html`
          <span class="md-avatar__logo" data-channel-style=${this.avatarStyle} data-channel-state=${this.state}>
            <slot></slot>
          </span>
        `;if(e){const t=this.getBrandOrDesignIconSet(e);return c.html`
          <span
            class="md-avatar__logo ${this.type}"
            data-channel-style=${this.avatarStyle}
            data-channel-state=${this.state}
          >
            <md-icon
              .name=${e}
              .iconSet=${t}
              .size=${this.chatIconSize}
              color="var(--icon-color-${this.type})"
            ></md-icon>
          </span>
        `}return this.avatarContent}render(){return c.html`
        <div
          part="avatar"
          class="md-avatar 
          ${(0,h.classMap)(this.avatarClassMap)}"
          role=${this.role}
          @click=${e=>this.handleClick(e)}
          @keydown=${e=>this.handleKeyDown(e)}
          tabindex=${(0,p.ifDefined)(this.tabIndex||void 0)}
          aria-label=${(0,p.ifDefined)(this.computedAriaLabel)}
        >
          ${"self"===this.type?c.html`
                <span class="md-avatar__self" style=${(0,d.styleMap)(this.avatarStyleMap)}>
                  <md-icon .name=${this.chatIconName} .iconSet=${"momentumDesign"} .size=${this.chatIconSize}></md-icon>
                </span>
              `:this.renderAvatarContent()}
          ${this.hasNotification?c.html` <span class="md-avatar__notification-badge"></span> `:c.nothing}
          ${this.renderPresence()}
        </div>
      `}};g([(0,l.property)({type:Number,attribute:"tab-index",reflect:!0})],t.prototype,"tabIndex",null),g([(0,l.property)({type:String})],t.prototype,"alt",void 0),g([(0,l.property)({type:String})],t.prototype,"src",void 0),g([(0,l.property)({type:String})],t.prototype,"label",void 0),g([(0,l.property)({type:String})],t.prototype,"title",void 0),g([(0,l.property)({type:String})],t.prototype,"color",void 0),g([(0,l.property)({type:Boolean})],t.prototype,"decrypting",void 0),g([(0,l.property)({type:String})],t.prototype,"role",void 0),g([(0,l.property)({type:String,attribute:"icon-name"})],t.prototype,"iconName",void 0),g([(0,l.property)({type:Boolean})],t.prototype,"failurePresence",void 0),g([(0,l.property)({type:String})],t.prototype,"type",void 0),g([(0,l.property)({type:String,attribute:"presence-type"})],t.prototype,"presenceType",void 0),g([(0,l.property)({type:String,attribute:"presence-aria-label"})],t.prototype,"presenceAriaLabel",void 0),g([(0,l.property)({type:Boolean})],t.prototype,"newMomentum",void 0),g([(0,l.property)({type:Boolean})],t.prototype,"typing",void 0),g([(0,l.property)({type:Number})],t.prototype,"size",void 0),g([(0,l.property)({type:Boolean,attribute:"has-notification"})],t.prototype,"hasNotification",void 0),g([(0,l.property)({type:Boolean})],t.prototype,"clickable",void 0),g([(0,l.property)({attribute:!1})],t.prototype,"clickFunction",void 0),g([(0,l.property)({type:String,attribute:"avatar-style"})],t.prototype,"avatarStyle",void 0),g([(0,l.property)({type:String})],t.prototype,"state",void 0),g([(0,l.state)()],t.prototype,"imageLoaded",void 0),g([(0,l.state)()],t.prototype,"imageErrored",void 0),g([(0,l.state)()],t.prototype,"presenceColor",void 0),g([(0,l.state)()],t.prototype,"presenceIcon",void 0),t=g([(0,s.w)("md-avatar")],t),e.ELEMENT=t}(a||(a={}))}}]);