@momentum-ui/web-components 2.18.1 → 2.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/3553.js +1 -1
- package/dist/7030.js +1 -1
- package/dist/8028.js +27 -10
- package/dist/comp/md-avatar-entry.js +36 -19
- package/dist/index-entry.js +33 -16
- package/dist/types/components/avatar/Avatar.constants.d.ts +4 -2
- package/dist/types/components/avatar/Avatar.d.ts +24 -1
- package/dist/types/components/menu-overlay/MenuOverlay.d.ts +1 -1
- package/package.json +1 -1
package/dist/8028.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[8028],{38028:(t,e,
|
|
1
|
+
"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[8028],{38028:(t,e,a)=>{a(80528),a(61200),a(69788);var n,i=a(31890),o=a(26283),r=a(26272),s=a(41488),l=a(40333),c=a(23968),h=a(97822),p=a(8229),d=a(37782),m=a(22887),y=a(3553),u=function(t,e,a,n){var i,o=arguments.length,r=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,a):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,a,n);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(r=(o<3?i(r):o>3?i(e,a,r):i(e,a))||r);return o>3&&r&&Object.defineProperty(e,a,r),r};!function(t){let e=class extends s.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.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-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-callback":"outgoing-call-legacy-filled","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-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"}}get tabIndex(){return this._tabIndex}set tabIndex(t){const e=this._tabIndex;this._tabIndex=t,this.requestUpdate("tabIndex",e)}static get styles(){return[r.A,y.A]}firstUpdated(){const{presenceColor:t,presenceIcon:e}=(0,m.E)(this.type,this.failurePresence,this.newMomentum);this.presenceColor=t,this.presenceIcon=e}updated(t){if(super.updated(t),t.has("type")||t.has("newMomentum")){const{presenceColor:t,presenceIcon:e}=(0,m.E)(this.type,this.failurePresence,this.newMomentum);this.presenceColor=t,this.presenceIcon=e}t.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})}get avatarLetterClassMap(){return{"md-decrypting":this.decrypting,[`md-avatar--${this.color}`]:this.color,"new-momentum":this.newMomentum}}get avatarStyleMap(){return{[`md-avatar--${this.color}`]:this.color}}get pretifyTitle(){if(this.title.length){const t=this.title.trim().split(" ");return 1===t.length?t[0].charAt(0):t[0].charAt(0)+t[t.length-1].charAt(0)}return this.title}get chatIconName(){return"chat-filled"}getIconName(t){return this.iconNameMap[t]||""}get chatIconSize(){return this.iconSize}get iconSize(){return(this.size/2).toString()}get renderIsTyping(){return"typing"===this.type||this.typing?s.html` <md-loading></md-loading> `:l.nothing}get avatarLetter(){return this.title?s.html`
|
|
2
2
|
<span class="md-avatar__letter ${(0,c.classMap)(this.avatarLetterClassMap)}">
|
|
3
3
|
${this.pretifyTitle}
|
|
4
4
|
<slot></slot>
|
|
5
5
|
${this.renderIsTyping}
|
|
6
6
|
</span>
|
|
7
|
-
`:
|
|
7
|
+
`:l.nothing}get avatarIcon(){return s.html`
|
|
8
8
|
<span class="md-avatar__icon ${(0,c.classMap)(this.avatarStyleMap)}">
|
|
9
9
|
<md-icon
|
|
10
10
|
.name=${this.iconName}
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
></md-icon>
|
|
14
14
|
</span>
|
|
15
15
|
`}get avatarImage(){return s.html`
|
|
16
|
-
${(0,d.until)(this.loadImage().then((t=>(this.handleImageLoad(),s.html` ${t} `))).catch((()=>this.handleImageError())),s.html` ${this.iconName?this.avatarIcon:this.title?s.html` ${this.avatarLetter} `:
|
|
17
|
-
`}loadImage(){return t=this,e=void 0,
|
|
16
|
+
${(0,d.until)(this.loadImage().then((t=>(this.handleImageLoad(),s.html` ${t} `))).catch((()=>this.handleImageError())),s.html` ${this.iconName?this.avatarIcon:this.title?s.html` ${this.avatarLetter} `:l.nothing} `)}
|
|
17
|
+
`}loadImage(){return t=this,e=void 0,n=function*(){return new Promise(((t,e)=>{const a=document.createElement("img");a.src=this.src,a.alt=this.alt,a.onload=()=>t(a),a.onerror=t=>e(t),a.classList.add("md-avatar__img"),a.classList.toggle("md-avatar__img--hidden",!this.imageLoaded)}))},new((a=void 0)||(a=Promise))((function(i,o){function r(t){try{l(n.next(t))}catch(t){o(t)}}function s(t){try{l(n.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?i(t.value):(e=t.value,e instanceof a?e:new a((function(t){t(e)}))).then(r,s)}l((n=n.apply(t,e||[])).next())}));var t,e,a,n}handleImageLoad(){this.imageLoaded=!0}handleImageError(){this.imageErrored=!0}handleKeyDown(t){if(!this.clickable)return;const{code:e}=t;(0,o.o)(e)&&this.dispatchEvent(new CustomEvent("button-keydown",{composed:!0,bubbles:!0,detail:{srcEvent:t}}))}handleClick(t){this.clickable&&(this.clickFunction&&this.clickFunction(),this.dispatchEvent(new CustomEvent("button-click",{composed:!0,bubbles:!0,detail:{srcEvent:t}})))}getBrandOrDesignIconSet(t){return new Set(["webex-app-icon-color-container","social-fbmessenger-color","apple-business-chat-color","social-line-color","social-viber-color","social-x","social-whatsapp-color","social-wechat-color"]).has(t)?"momentumBrandVisuals":"momentumDesign"}get avatarContent(){return this.src&&!this.imageErrored?this.avatarImage:this.iconName?this.avatarIcon:this.title?this.avatarLetter:l.nothing}renderPresence(){return this.newMomentum&&this.type&&"self"!==this.type&&this.presenceIcon?s.html`
|
|
18
18
|
<md-presence
|
|
19
19
|
class="avatar-presence"
|
|
20
20
|
name="${this.presenceIcon}"
|
|
@@ -22,10 +22,27 @@
|
|
|
22
22
|
size="${this.size}"
|
|
23
23
|
>
|
|
24
24
|
</md-presence>
|
|
25
|
-
`:
|
|
25
|
+
`:l.nothing}renderAvatarContent(){const t=this.getIconName(this.type);if("channel-custom"===this.type)return s.html`
|
|
26
|
+
<span class="md-avatar__logo" data-channel-style=${this.avatarStyle} data-channel-state=${this.state}>
|
|
27
|
+
<slot></slot>
|
|
28
|
+
</span>
|
|
29
|
+
`;if(t){const e=this.getBrandOrDesignIconSet(t);return s.html`
|
|
30
|
+
<span
|
|
31
|
+
class="md-avatar__logo ${this.type}"
|
|
32
|
+
data-channel-style=${this.avatarStyle}
|
|
33
|
+
data-channel-state=${this.state}
|
|
34
|
+
>
|
|
35
|
+
<md-icon
|
|
36
|
+
.name=${t}
|
|
37
|
+
.iconSet=${e}
|
|
38
|
+
.size=${this.chatIconSize}
|
|
39
|
+
color="var(--icon-color-${this.type})"
|
|
40
|
+
></md-icon>
|
|
41
|
+
</span>
|
|
42
|
+
`}return this.avatarContent}render(){return s.html`
|
|
26
43
|
<div
|
|
27
44
|
part="avatar"
|
|
28
|
-
class="md-avatar
|
|
45
|
+
class="md-avatar
|
|
29
46
|
${(0,c.classMap)(this.avatarClassMap)}"
|
|
30
47
|
role=${this.role}
|
|
31
48
|
@click=${t=>this.handleClick(t)}
|
|
@@ -34,11 +51,11 @@
|
|
|
34
51
|
aria-label=${(0,h.ifDefined)(this.label)}
|
|
35
52
|
>
|
|
36
53
|
${"self"===this.type?s.html`
|
|
37
|
-
<span class="md-avatar__self" style=${(0,
|
|
54
|
+
<span class="md-avatar__self" style=${(0,p.styleMap)(this.avatarStyleMap)}>
|
|
38
55
|
<md-icon .name=${this.chatIconName} .iconSet=${"momentumDesign"} .size=${this.chatIconSize}></md-icon>
|
|
39
56
|
</span>
|
|
40
|
-
`:this.
|
|
41
|
-
${this.hasNotification?s.html` <span class="md-avatar__notification-badge"></span> `:
|
|
57
|
+
`:this.renderAvatarContent()}
|
|
58
|
+
${this.hasNotification?s.html` <span class="md-avatar__notification-badge"></span> `:l.nothing}
|
|
42
59
|
${this.renderPresence()}
|
|
43
60
|
</div>
|
|
44
|
-
`}};u([(0,s.property)({type:Number,attribute:"tab-index",reflect:!0})],e.prototype,"tabIndex",null),u([(0,s.property)({type:String})],e.prototype,"alt",void 0),u([(0,s.property)({type:String})],e.prototype,"src",void 0),u([(0,s.property)({type:String})],e.prototype,"label",void 0),u([(0,s.property)({type:String})],e.prototype,"title",void 0),u([(0,s.property)({type:String})],e.prototype,"color",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"decrypting",void 0),u([(0,s.property)({type:String})],e.prototype,"role",void 0),u([(0,s.property)({type:String,attribute:"icon-name"})],e.prototype,"iconName",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"failurePresence",void 0),u([(0,s.property)({type:String})],e.prototype,"type",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"newMomentum",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"typing",void 0),u([(0,s.property)({type:Number})],e.prototype,"size",void 0),u([(0,s.property)({type:Boolean,attribute:"has-notification"})],e.prototype,"hasNotification",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"clickable",void 0),u([(0,s.property)({attribute:!1})],e.prototype,"clickFunction",void 0),u([(0,s.internalProperty)()],e.prototype,"imageLoaded",void 0),u([(0,s.internalProperty)()],e.prototype,"imageErrored",void 0),u([(0,s.internalProperty)()],e.prototype,"presenceColor",void 0),u([(0,s.internalProperty)()],e.prototype,"presenceIcon",void 0),e=u([(0,
|
|
61
|
+
`}};u([(0,s.property)({type:Number,attribute:"tab-index",reflect:!0})],e.prototype,"tabIndex",null),u([(0,s.property)({type:String})],e.prototype,"alt",void 0),u([(0,s.property)({type:String})],e.prototype,"src",void 0),u([(0,s.property)({type:String})],e.prototype,"label",void 0),u([(0,s.property)({type:String})],e.prototype,"title",void 0),u([(0,s.property)({type:String})],e.prototype,"color",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"decrypting",void 0),u([(0,s.property)({type:String})],e.prototype,"role",void 0),u([(0,s.property)({type:String,attribute:"icon-name"})],e.prototype,"iconName",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"failurePresence",void 0),u([(0,s.property)({type:String})],e.prototype,"type",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"newMomentum",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"typing",void 0),u([(0,s.property)({type:Number})],e.prototype,"size",void 0),u([(0,s.property)({type:Boolean,attribute:"has-notification"})],e.prototype,"hasNotification",void 0),u([(0,s.property)({type:Boolean})],e.prototype,"clickable",void 0),u([(0,s.property)({attribute:!1})],e.prototype,"clickFunction",void 0),u([(0,s.property)({type:String,attribute:"avatar-style"})],e.prototype,"avatarStyle",void 0),u([(0,s.property)({type:String})],e.prototype,"state",void 0),u([(0,s.internalProperty)()],e.prototype,"imageLoaded",void 0),u([(0,s.internalProperty)()],e.prototype,"imageErrored",void 0),u([(0,s.internalProperty)()],e.prototype,"presenceColor",void 0),u([(0,s.internalProperty)()],e.prototype,"presenceIcon",void 0),e=u([(0,i.w)("md-avatar")],e),t.ELEMENT=e}(n||(n={}))}}]);
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
!function(t
|
|
2
|
-
<span class="md-avatar__letter ${(0,
|
|
1
|
+
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("lit-element"),require("lit-html/directives/style-map"),require("lit-html"),require("lit-html/directives/class-map"),require("lit-html/directives/if-defined"),require("@momentum-ui/icons/data/momentumUiIconsNames.json"),require("@momentum-ui/utils/lib/getColorValue"),require("lit-html/directives/class-map.js"),require("lit-html/directives/until.js"));else if("function"==typeof define&&define.amd)define(["lit-element","lit-html/directives/style-map","lit-html","lit-html/directives/class-map","lit-html/directives/if-defined","@momentum-ui/icons/data/momentumUiIconsNames.json","@momentum-ui/utils/lib/getColorValue","lit-html/directives/class-map.js","lit-html/directives/until.js"],t);else{var i="object"==typeof exports?t(require("lit-element"),require("lit-html/directives/style-map"),require("lit-html"),require("lit-html/directives/class-map"),require("lit-html/directives/if-defined"),require("@momentum-ui/icons/data/momentumUiIconsNames.json"),require("@momentum-ui/utils/lib/getColorValue"),require("lit-html/directives/class-map.js"),require("lit-html/directives/until.js")):t(e["lit-element"],e["lit-html/directives/style-map"],e["lit-html"],e["lit-html/directives/class-map"],e["lit-html/directives/if-defined"],e["@momentum-ui/icons/data/momentumUiIconsNames.json"],e["@momentum-ui/utils/lib/getColorValue"],e["lit-html/directives/class-map.js"],e["lit-html/directives/until.js"]);for(var r in i)("object"==typeof exports?exports:e)[r]=i[r]}}(self,((e,t,i,r,a,o,n,s,l)=>(()=>{"use strict";var c,p={8229:e=>{e.exports=t},17518:e=>{e.exports=s},23968:e=>{e.exports=r},32022:e=>{e.exports=o},37782:e=>{e.exports=l},38028:(e,t,i)=>{i.r(t),i.d(t,{Avatar:()=>r}),i(80528),i(61200),i(69788);var r,a=i(31890),o=i(26283),n=i(26272),s=i(41488),l=i(40333),c=i(23968),p=i(97822),h=i(8229),m=i(37782),d=i(22887),u=i(3553),y=function(e,t,i,r){var a,o=arguments.length,n=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(n=(o<3?a(n):o>3?a(t,i,n):a(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n};!function(e){let t=class extends s.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.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-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-callback":"outgoing-call-legacy-filled","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-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"}}get tabIndex(){return this._tabIndex}set tabIndex(e){const t=this._tabIndex;this._tabIndex=e,this.requestUpdate("tabIndex",t)}static get styles(){return[n.A,u.A]}firstUpdated(){const{presenceColor:e,presenceIcon:t}=(0,d.E)(this.type,this.failurePresence,this.newMomentum);this.presenceColor=e,this.presenceIcon=t}updated(e){if(super.updated(e),e.has("type")||e.has("newMomentum")){const{presenceColor:e,presenceIcon:t}=(0,d.E)(this.type,this.failurePresence,this.newMomentum);this.presenceColor=e,this.presenceIcon=t}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})}get avatarLetterClassMap(){return{"md-decrypting":this.decrypting,[`md-avatar--${this.color}`]:this.color,"new-momentum":this.newMomentum}}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 iconSize(){return(this.size/2).toString()}get renderIsTyping(){return"typing"===this.type||this.typing?s.html` <md-loading></md-loading> `:l.nothing}get avatarLetter(){return this.title?s.html`
|
|
2
|
+
<span class="md-avatar__letter ${(0,c.classMap)(this.avatarLetterClassMap)}">
|
|
3
3
|
${this.pretifyTitle}
|
|
4
4
|
<slot></slot>
|
|
5
5
|
${this.renderIsTyping}
|
|
6
6
|
</span>
|
|
7
|
-
`:l.nothing}get avatarIcon(){return
|
|
8
|
-
<span class="md-avatar__icon ${(0,
|
|
7
|
+
`:l.nothing}get avatarIcon(){return s.html`
|
|
8
|
+
<span class="md-avatar__icon ${(0,c.classMap)(this.avatarStyleMap)}">
|
|
9
9
|
<md-icon
|
|
10
10
|
.name=${this.iconName}
|
|
11
11
|
.iconSet=${this.newMomentum?"momentumDesign":"momentumUI"}
|
|
12
12
|
.size=${this.newMomentum?this.iconSize:""}
|
|
13
13
|
></md-icon>
|
|
14
14
|
</span>
|
|
15
|
-
`}get avatarImage(){return
|
|
16
|
-
${(0,
|
|
17
|
-
`}loadImage(){return
|
|
15
|
+
`}get avatarImage(){return s.html`
|
|
16
|
+
${(0,m.until)(this.loadImage().then((e=>(this.handleImageLoad(),s.html` ${e} `))).catch((()=>this.handleImageError())),s.html` ${this.iconName?this.avatarIcon:this.title?s.html` ${this.avatarLetter} `:l.nothing} `)}
|
|
17
|
+
`}loadImage(){return e=this,t=void 0,r=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(a,o){function n(e){try{l(r.next(e))}catch(e){o(e)}}function s(e){try{l(r.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(n,s)}l((r=r.apply(e,t||[])).next())}));var e,t,i,r}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){this.clickable&&(this.clickFunction&&this.clickFunction(),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","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:l.nothing}renderPresence(){return this.newMomentum&&this.type&&"self"!==this.type&&this.presenceIcon?s.html`
|
|
18
18
|
<md-presence
|
|
19
19
|
class="avatar-presence"
|
|
20
20
|
name="${this.presenceIcon}"
|
|
@@ -22,23 +22,40 @@
|
|
|
22
22
|
size="${this.size}"
|
|
23
23
|
>
|
|
24
24
|
</md-presence>
|
|
25
|
-
`:l.nothing}
|
|
25
|
+
`:l.nothing}renderAvatarContent(){const e=this.getIconName(this.type);if("channel-custom"===this.type)return s.html`
|
|
26
|
+
<span class="md-avatar__logo" data-channel-style=${this.avatarStyle} data-channel-state=${this.state}>
|
|
27
|
+
<slot></slot>
|
|
28
|
+
</span>
|
|
29
|
+
`;if(e){const t=this.getBrandOrDesignIconSet(e);return s.html`
|
|
30
|
+
<span
|
|
31
|
+
class="md-avatar__logo ${this.type}"
|
|
32
|
+
data-channel-style=${this.avatarStyle}
|
|
33
|
+
data-channel-state=${this.state}
|
|
34
|
+
>
|
|
35
|
+
<md-icon
|
|
36
|
+
.name=${e}
|
|
37
|
+
.iconSet=${t}
|
|
38
|
+
.size=${this.chatIconSize}
|
|
39
|
+
color="var(--icon-color-${this.type})"
|
|
40
|
+
></md-icon>
|
|
41
|
+
</span>
|
|
42
|
+
`}return this.avatarContent}render(){return s.html`
|
|
26
43
|
<div
|
|
27
44
|
part="avatar"
|
|
28
|
-
class="md-avatar
|
|
29
|
-
${(0,
|
|
45
|
+
class="md-avatar
|
|
46
|
+
${(0,c.classMap)(this.avatarClassMap)}"
|
|
30
47
|
role=${this.role}
|
|
31
|
-
@click=${
|
|
32
|
-
@keydown=${
|
|
33
|
-
tabindex=${(0,
|
|
34
|
-
aria-label=${(0,
|
|
48
|
+
@click=${e=>this.handleClick(e)}
|
|
49
|
+
@keydown=${e=>this.handleKeyDown(e)}
|
|
50
|
+
tabindex=${(0,p.ifDefined)(this.tabIndex||void 0)}
|
|
51
|
+
aria-label=${(0,p.ifDefined)(this.label)}
|
|
35
52
|
>
|
|
36
|
-
${"self"===this.type?
|
|
37
|
-
<span class="md-avatar__self" style=${(0,
|
|
53
|
+
${"self"===this.type?s.html`
|
|
54
|
+
<span class="md-avatar__self" style=${(0,h.styleMap)(this.avatarStyleMap)}>
|
|
38
55
|
<md-icon .name=${this.chatIconName} .iconSet=${"momentumDesign"} .size=${this.chatIconSize}></md-icon>
|
|
39
56
|
</span>
|
|
40
|
-
`:this.
|
|
41
|
-
${this.hasNotification?
|
|
57
|
+
`:this.renderAvatarContent()}
|
|
58
|
+
${this.hasNotification?s.html` <span class="md-avatar__notification-badge"></span> `:l.nothing}
|
|
42
59
|
${this.renderPresence()}
|
|
43
60
|
</div>
|
|
44
|
-
`}};y([(0,
|
|
61
|
+
`}};y([(0,s.property)({type:Number,attribute:"tab-index",reflect:!0})],t.prototype,"tabIndex",null),y([(0,s.property)({type:String})],t.prototype,"alt",void 0),y([(0,s.property)({type:String})],t.prototype,"src",void 0),y([(0,s.property)({type:String})],t.prototype,"label",void 0),y([(0,s.property)({type:String})],t.prototype,"title",void 0),y([(0,s.property)({type:String})],t.prototype,"color",void 0),y([(0,s.property)({type:Boolean})],t.prototype,"decrypting",void 0),y([(0,s.property)({type:String})],t.prototype,"role",void 0),y([(0,s.property)({type:String,attribute:"icon-name"})],t.prototype,"iconName",void 0),y([(0,s.property)({type:Boolean})],t.prototype,"failurePresence",void 0),y([(0,s.property)({type:String})],t.prototype,"type",void 0),y([(0,s.property)({type:Boolean})],t.prototype,"newMomentum",void 0),y([(0,s.property)({type:Boolean})],t.prototype,"typing",void 0),y([(0,s.property)({type:Number})],t.prototype,"size",void 0),y([(0,s.property)({type:Boolean,attribute:"has-notification"})],t.prototype,"hasNotification",void 0),y([(0,s.property)({type:Boolean})],t.prototype,"clickable",void 0),y([(0,s.property)({attribute:!1})],t.prototype,"clickFunction",void 0),y([(0,s.property)({type:String,attribute:"avatar-style"})],t.prototype,"avatarStyle",void 0),y([(0,s.property)({type:String})],t.prototype,"state",void 0),y([(0,s.internalProperty)()],t.prototype,"imageLoaded",void 0),y([(0,s.internalProperty)()],t.prototype,"imageErrored",void 0),y([(0,s.internalProperty)()],t.prototype,"presenceColor",void 0),y([(0,s.internalProperty)()],t.prototype,"presenceIcon",void 0),t=y([(0,a.w)("md-avatar")],t),e.ELEMENT=t}(r||(r={}))},40333:e=>{e.exports=i},41488:t=>{t.exports=e},60554:e=>{e.exports=n},97822:e=>{e.exports=a}},h={};function m(e){var t=h[e];if(void 0!==t)return t.exports;var i=h[e]={exports:{}};return p[e](i,i.exports,m),i.exports}m.m=p,c=[],m.O=(e,t,i,r)=>{if(!t){var a=1/0;for(l=0;l<c.length;l++){for(var[t,i,r]=c[l],o=!0,n=0;n<t.length;n++)(!1&r||a>=r)&&Object.keys(m.O).every((e=>m.O[e](t[n])))?t.splice(n--,1):(o=!1,r<a&&(a=r));if(o){c.splice(l--,1);var s=i();void 0!==s&&(e=s)}}return e}r=r||0;for(var l=c.length;l>0&&c[l-1][2]>r;l--)c[l]=c[l-1];c[l]=[t,i,r]},m.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return m.d(t,{a:t}),t},m.d=(e,t)=>{for(var i in t)m.o(t,i)&&!m.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},m.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),m.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e={8028:0,8115:0};m.O.j=t=>0===e[t];var t=(t,i)=>{var r,a,[o,n,s]=i,l=0;if(o.some((t=>0!==e[t]))){for(r in n)m.o(n,r)&&(m.m[r]=n[r]);if(s)var c=s(m)}for(t&&t(i);l<o.length;l++)a=o[l],m.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return m.O(c)},i=self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[];i.forEach(t.bind(null,0)),i.push=t.bind(null,i.push.bind(i))})();var d=m.O(void 0,[7502,1890,6272,6325,6875,2176,6798,9813,1200,2576,3553,6700,528,9788],(()=>m(38028)));return m.O(d)})()));
|