@grasco/profile-picture 0.2.2 → 0.2.3

package/dist/index.d.cts

@@ -176,6 +176,8 @@ interface GroupUserData {
     bgColor?: string;
     /** Background gradient */
     bgGradient?: string;
+    /** CDN image mode */
+    imageMode?: ImageMode;
 }
 /** Dropdown configuration for overflow users */
 interface DropdownConfig {

package/dist/index.d.ts

@@ -176,6 +176,8 @@ interface GroupUserData {
     bgColor?: string;
     /** Background gradient */
     bgGradient?: string;
+    /** CDN image mode */
+    imageMode?: ImageMode;
 }
 /** Dropdown configuration for overflow users */
 interface DropdownConfig {

package/dist/index.js

@@ -1,4 +1,4 @@
-import He,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Je=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,p;i>=0;i--)(p=r[i])&&(n=(p(o,e,n))||n);return n&&Je(o,e,n),n};var se="grasco-profile-picture-styles",F=false,xe=false;function ve(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){F=true;return}xe||(xe=true,Ke());}function Ke(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Xe());}function Xe(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}let r=Ze();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),F=true;}function Ze(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=import.meta.url;if(o)return `${o.substring(0,o.lastIndexOf("/")+1)}styles.css`}catch{}let r=document.currentScript;if(r?.src){let o=new URL(r.src);return `${o.href.substring(0,o.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var N={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ye={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},we={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},$={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},z={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function D(...r){return r.filter(Boolean).join(" ")}function Se(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function Q(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function pe(r){return Math.round(r*.38)}function ke(r,o){let e;if(o){let n=Math.round(r*.31);e=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);e=Math.min(14,Math.max(8,n));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function $e(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function Ie(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function Ee(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let n=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${n}deg ${i}deg`}).join(", ")})`}function Z(r){let o=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);o=(o<<5)-o+t,o&=o;}return Math.abs(o)}function Pe(r,o,e){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${e} ${n}deg 360deg)`}function _(r){let o=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=Z(r)%o.length;return o[e]}var Ce=[["#f4a261","#e76f51","#d4a5a5"],["#f2a9b0","#e07a5f","#d4c4a8"],["#c9b1d0","#e8a0bf","#f0d1ce"],["#89c2d9","#a3c4bc","#d5c6e0"],["#f7c59f","#f2a07b","#efcfe3"],["#b5a7d5","#d4a5c9","#f0c3d7"],["#7ec8c8","#6a9fb5","#c2b5d6"],["#f0b3ba","#d4a5c9","#c9d1d9"],["#e8b960","#d4956a","#c9a5b8"],["#a7c4a0","#c9d4a5","#e0c9b1"],["#c4819b","#d9a5b8","#b5aed4"],["#f0c27f","#e0a87c","#d4b5c9"]];function ze(r){let o=Z(r),e=Ce[o%Ce.length],t=Z(r+"pos1"),n=Z(r+"pos2"),i=20+o%61,p=20+(o>>4)%61,d=20+t%61,c=20+(t>>4)%61,g=20+n%61,f=20+(n>>4)%61;return [`radial-gradient(circle at ${i}% ${p}%, ${e[0]} 0%, transparent 70%)`,`radial-gradient(circle at ${d}% ${c}%, ${e[1]} 0%, transparent 70%)`,`radial-gradient(circle at ${g}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function De(r){return typeof r=="number"?r:N[r]??N[z.size]}function de(r,o,e){let t=e?o-1:o;if(r<=t)return {visible:r,hidden:0,showCounter:false};let n=t-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function ee(r,o,e,t,n){let i=n??o*(1-e);return r*i}function Te(r,o,e){return e==="ltr"?o-r:r+1}function Me(r,o,e,t){if(r===0)return 0;if(r===1)return o;let n=t??o*(1-e);return o+n*(r-1)}function Re(r){return r>99?"+99":`+${r}`}function le(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function ce(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function Ae(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Le(r,o){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:o,borderStyle:"solid"}}}function Ue(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function Be(r){return {boxShadow:we[r]}}var Qe={shimmer:`
+import He,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Je=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,p;i>=0;i--)(p=r[i])&&(n=(p(o,e,n))||n);return n&&Je(o,e,n),n};var se="grasco-profile-picture-styles",F=false,xe=false;function ve(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){F=true;return}xe||(xe=true,Ke());}function Ke(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Xe());}function Xe(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}let r=Ze();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),F=true;}function Ze(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=import.meta.url;if(o)return `${o.substring(0,o.lastIndexOf("/")+1)}styles.css`}catch{}let r=document.currentScript;if(r?.src){let o=new URL(r.src);return `${o.href.substring(0,o.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var N={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ye={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},we={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},$={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},z={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function D(...r){return r.filter(Boolean).join(" ")}function Se(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function Q(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function pe(r){return Math.round(r*.38)}function ke(r,o){let e;if(o){let n=Math.round(r*.31);e=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);e=Math.min(14,Math.max(8,n));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function $e(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function Ie(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function Ee(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let n=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${n}deg ${i}deg`}).join(", ")})`}function Z(r){let o=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);o=(o<<5)-o+t,o&=o;}return Math.abs(o)}function Pe(r,o,e){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${e} ${n}deg 360deg)`}function _(r){let o=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=Z(r)%o.length;return o[e]}var Ce=[["#f4a261","#e76f51","#d4a5a5"],["#f2a9b0","#e07a5f","#d4c4a8"],["#c9b1d0","#e8a0bf","#f0d1ce"],["#89c2d9","#a3c4bc","#d5c6e0"],["#f7c59f","#f2a07b","#efcfe3"],["#b5a7d5","#d4a5c9","#f0c3d7"],["#7ec8c8","#6a9fb5","#c2b5d6"],["#f0b3ba","#d4a5c9","#c9d1d9"],["#e8b960","#d4956a","#c9a5b8"],["#a7c4a0","#c9d4a5","#e0c9b1"],["#c4819b","#d9a5b8","#b5aed4"],["#f0c27f","#e0a87c","#d4b5c9"]];function ze(r){let o=Z(r),e=Ce[o%Ce.length],t=Z(r+"pos1"),n=Z(r+"pos2"),i=20+o%61,p=20+(o>>4)%61,d=20+t%61,c=20+(t>>4)%61,g=20+n%61,f=20+(n>>4)%61;return [`radial-gradient(circle at ${i}% ${p}%, ${e[0]} 0%, transparent 70%)`,`radial-gradient(circle at ${d}% ${c}%, ${e[1]} 0%, transparent 70%)`,`radial-gradient(circle at ${g}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function De(r){return typeof r=="number"?r:N[r]??N[z.size]}function de(r,o,e){let t=e?o-1:o;if(r<=t)return {visible:r,hidden:0,showCounter:false};let n=t-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function ee(r,o,e,t,n){let i=n??o*(1-e);return r*i}function Me(r,o,e){return e==="ltr"?o-r:r+1}function Te(r,o,e,t){if(r===0)return 0;if(r===1)return o;let n=t??o*(1-e);return o+n*(r-1)}function Re(r){return r>99?"+99":`+${r}`}function le(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function ce(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function Ae(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Le(r,o){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:o,borderStyle:"solid"}}}function Ue(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function Be(r){return {boxShadow:we[r]}}var Qe={shimmer:`
 @keyframes pp-shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -802,10 +802,10 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
         title=${this.presence.status}>
       </div>
-    `}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,n=this.badge.icon!==void 0,i=t||n,{size:p,fontSize:d}=ke(this.pixelSize,i),c=this.badge.bgColor??"#22c55e",g=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",h=t&&this.badge.content!==void 0?Ie(this.badge.content,this.badge.max):null,S=n?this.badge.icon:null,R=d*.9,m=`${this.getCornerOffset()-p/2}px`,M={"top-left":{top:m,left:m},"top-center":{top:m,left:"50%",transform:"translateX(-50%)"},"top-right":{top:m,right:m},"bottom-left":{bottom:m,left:m},"bottom-center":{bottom:m,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:m,right:m}};return html`
+    `}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,n=this.badge.icon!==void 0,i=t||n,{size:p,fontSize:d}=ke(this.pixelSize,i),c=this.badge.bgColor??"#22c55e",g=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",h=t&&this.badge.content!==void 0?Ie(this.badge.content,this.badge.max):null,S=n?this.badge.icon:null,R=d*.9,m=`${this.getCornerOffset()-p/2}px`,T={"top-left":{top:m,left:m},"top-center":{top:m,left:"50%",transform:"translateX(-50%)"},"top-right":{top:m,right:m},"bottom-left":{bottom:m,left:m},"bottom-center":{bottom:m,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:m,right:m}};return html`
       <div
         class=${D("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
-        style=${styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:c,color:g,borderRadius:f,"--pp-badge-glow-color":c,gap:n&&t?"4px":"0",...M[e]})}>
+        style=${styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:c,color:g,borderRadius:f,"--pp-badge-glow-color":c,gap:n&&t?"4px":"0",...T[e]})}>
         ${S?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${R}px`})}>${S}</span>`:nothing}
         ${h??nothing}
       </div>
@@ -840,7 +840,7 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         <!-- Presence Indicator -->
         ${this.renderPresence()}
       </div>
-    `}};s([property({type:String})],a.prototype,"src"),s([property({type:String})],a.prototype,"alt"),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([property({type:String})],a.prototype,"size"),s([property({type:String})],a.prototype,"variant"),s([property({type:String})],a.prototype,"shadow"),s([property({type:Boolean})],a.prototype,"border"),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([property({type:Number})],a.prototype,"rotation"),s([property({type:Number})],a.prototype,"zoom"),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"ring"),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"presence"),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"glow"),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"badge"),s([property({type:String})],a.prototype,"loading"),s([property({type:String})],a.prototype,"placeholder"),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([property({type:String})],a.prototype,"fallback"),s([property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"interactive"),s([state()],a.prototype,"isLoaded"),s([state()],a.prototype,"hasError"),s([state()],a.prototype,"cdnImageUrl"),s([state()],a.prototype,"cdnLoadFailed");var j=a;customElements.get("profile-picture")||customElements.define("profile-picture",j);var fe=false;function it(){if(fe||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(fe)return;let o=document.createElement("style");o.textContent=Ne,document.head.appendChild(o),fe=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=z.max;this.direction=z.direction;this.overlap=z.overlap;this.size=z.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=z.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return it(),this}get pixelSize(){return De(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??z.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??z.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,n)=>{let i=(c,g)=>{let f=g??c,h=t[c];return h!=null&&h!==""?String(h):t.getAttribute(f)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${n+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:n,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient")}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(render(nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),n=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),d=window.innerWidth,c=window.innerHeight;if(d<480){let k=html`
+    `}};s([property({type:String})],a.prototype,"src"),s([property({type:String})],a.prototype,"alt"),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([property({type:String})],a.prototype,"size"),s([property({type:String})],a.prototype,"variant"),s([property({type:String})],a.prototype,"shadow"),s([property({type:Boolean})],a.prototype,"border"),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([property({type:Number})],a.prototype,"rotation"),s([property({type:Number})],a.prototype,"zoom"),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"ring"),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"presence"),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"glow"),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"badge"),s([property({type:String})],a.prototype,"loading"),s([property({type:String})],a.prototype,"placeholder"),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([property({type:String})],a.prototype,"fallback"),s([property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"interactive"),s([state()],a.prototype,"isLoaded"),s([state()],a.prototype,"hasError"),s([state()],a.prototype,"cdnImageUrl"),s([state()],a.prototype,"cdnLoadFailed");var j=a;customElements.get("profile-picture")||customElements.define("profile-picture",j);var fe=false;function it(){if(fe||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(fe)return;let o=document.createElement("style");o.textContent=Ne,document.head.appendChild(o),fe=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=z.max;this.direction=z.direction;this.overlap=z.overlap;this.size=z.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=z.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return it(),this}get pixelSize(){return De(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??z.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??z.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient","image-mode"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,n)=>{let i=(c,g)=>{let f=g??c,h=t[c];return h!=null&&h!==""?String(h):t.getAttribute(f)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${n+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:n,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient"),imageMode:i("imageMode","image-mode")}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(render(nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),n=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),d=window.innerWidth,c=window.innerHeight;if(d<480){let k=html`
         <div
           class="ppg-backdrop ppg-backdrop-visible"
           style="pointer-events: auto; background: rgba(0,0,0,0.5);"
@@ -864,7 +864,7 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
             ${e.map(W=>this.renderDropdownItem(W))}
           </div>
         </div>
-      `;render(k,this.portalContainer);return}let f=c-t.bottom-n,h=t.top-n,S=d-t.left,R=t.right,x=this.dropdownPosition;x==="bottom"&&f<p&&h>f?x="top":x==="top"&&h<p&&f>h&&(x="bottom");let v;S>=i?v=t.left:R>=i?v=t.right-i:v=(d-i)/2,v=Math.max(8,Math.min(v,d-i-8));let m=x==="bottom"?t.bottom+n:void 0,M=x==="top"?c-t.top+n:void 0,V=html`
+      `;render(k,this.portalContainer);return}let f=c-t.bottom-n,h=t.top-n,S=d-t.left,R=t.right,x=this.dropdownPosition;x==="bottom"&&f<p&&h>f?x="top":x==="top"&&h<p&&f>h&&(x="bottom");let v;S>=i?v=t.left:R>=i?v=t.right-i:v=(d-i)/2,v=Math.max(8,Math.min(v,d-i-8));let m=x==="bottom"?t.bottom+n:void 0,T=x==="top"?c-t.top+n:void 0,V=html`
       <div
         class="ppg-backdrop"
         style="pointer-events: auto;"
@@ -873,7 +873,7 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
       ></div>
       <div
         class="ppg-dropdown ppg-dropdown-portal"
-        style=${styleMap({position:"fixed",pointerEvents:"auto",top:m!==void 0?`${m}px`:"auto",bottom:M!==void 0?`${M}px`:"auto",left:`${v}px`,width:`${i}px`})}
+        style=${styleMap({position:"fixed",pointerEvents:"auto",top:m!==void 0?`${m}px`:"auto",bottom:T!==void 0?`${T}px`:"auto",left:`${v}px`,width:`${i}px`})}
         data-position=${x}
         role="menu"
         aria-label="Hidden users"
@@ -888,7 +888,7 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
           ${e.map(k=>this.renderDropdownItem(k))}
         </div>
       </div>
-    `;render(V,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,n){let i=ee(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=Te(t,n,this.direction),d=e.variant??"circle",c=e.shadow??"none",g=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
+    `;render(V,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,n){let i=ee(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=Me(t,n,this.direction),d=e.variant??"circle",c=e.shadow??"none",g=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
       <div
         class="ppg-avatar-wrapper"
         style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
@@ -916,6 +916,7 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         .borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
         .bgColor=${e.bgGradient?void 0:e.bgColor||void 0}
         .bgGradient=${e.bgGradient??void 0}
+        .imageMode=${e.imageMode??"original"}
         data-user-id=${e.id??""}
         data-status=${e.status??""}
       ></profile-picture>
@@ -996,7 +997,7 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
               `:nothing}
         </div>
       </div>
-    `}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:n}=de(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=de(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),d=e;n&&d++,this.showAddButton&&d++;let c=Me(d,this.pixelSize,this.overlap,this.spacing),g=n?ee(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=ee(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
+    `}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:n}=de(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=de(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),d=e;n&&d++,this.showAddButton&&d++;let c=Te(d,this.pixelSize,this.overlap,this.spacing),g=n?ee(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=ee(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
       <div
         class=${D("ppg-container",this.animated&&"ppg-animated")}
         style=${styleMap({width:`${c}px`,height:`${this.pixelSize}px`})}
@@ -1018,5 +1019,5 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         <!-- Tooltip -->
         ${this.renderTooltip()}
       </div>
-    `}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);function pt(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var he=He.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:c,animated:g,rotationAmount:f,onAvatarClick:h,onAvatarHover:S,onCounterClick:R,onDropdownItemClick:x,onAddClick:v,className:m,style:M,children:V},k)=>{let W=pt(),L=useRef(null),q=useCallback(u=>{h?.(u.detail.user);},[h]),U=useCallback(u=>{S?.(u.detail.user);},[S]),B=useCallback(u=>{let A=u;R?.(A.detail.hiddenUsers,A.detail.open);},[R]),G=useCallback(u=>{x?.(u.detail.user);},[x]),O=useCallback(()=>{v?.();},[v]);return useEffect(()=>{let u=L.current;if(u)return u.addEventListener("avatar-click",q),u.addEventListener("avatar-hover",U),u.addEventListener("counter-click",B),u.addEventListener("dropdown-item-click",G),u.addEventListener("add-click",O),()=>{u.removeEventListener("avatar-click",q),u.removeEventListener("avatar-hover",U),u.removeEventListener("counter-click",B),u.removeEventListener("dropdown-item-click",G),u.removeEventListener("add-click",O);}},[q,U,B,G,O]),useEffect(()=>{typeof k=="function"?k(L.current):k&&(k.current=L.current);},[k]),W?He.createElement("profile-picture-group",{ref:L,max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i?JSON.stringify(i):void 0,dropdown:p?JSON.stringify(p):void 0,"show-add-button":d||void 0,"add-button-label":c,animated:g,"rotation-amount":f,class:m,style:M},V):null});he.displayName="ProfilePictureGroup";function ut(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function gt(r){j.setCdnBaseUrl(r);}function ft(){return j.getCdnBaseUrl()}function je({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:p,border:d,borderWidth:c,borderColor:g,rotation:f,zoom:h,bgColor:S,bgGradient:R,glow:x,ring:v,presence:m,badge:M,loading:V,placeholder:k,placeholderColor:W,fallback:L,fallbackMode:q,interactive:U,onLoad:B,onError:G,onCdnError:O,onClick:u,className:A,style:Ve,ref:J}){let We=ut(),X=useRef(null),ne=useCallback(()=>{B?.();},[B]),oe=useCallback(()=>{G?.();},[G]),ie=useCallback(y=>{O?.(y.detail);},[O]),ae=useCallback(y=>{u?.(y.detail);},[u]);return useEffect(()=>{let y=X.current;if(y)return y.addEventListener("load",ne),y.addEventListener("error",oe),y.addEventListener("cdn-error",ie),y.addEventListener("profile-picture-click",ae),()=>{y.removeEventListener("load",ne),y.removeEventListener("error",oe),y.removeEventListener("cdn-error",ie),y.removeEventListener("profile-picture-click",ae);}},[ne,oe,ie,ae]),useEffect(()=>{typeof J=="function"?J(X.current):J&&(J.current=X.current);},[J]),We?He.createElement("profile-picture",{ref:X,src:r||void 0,alt:o,"ext-customer-id":e,"image-mode":t,size:n,variant:i,shadow:p,border:d||void 0,"border-width":c,"border-color":g,rotation:f,zoom:h,"bg-color":S,"bg-gradient":R,glow:x?JSON.stringify(x):void 0,ring:v?JSON.stringify(v):void 0,presence:m?JSON.stringify(m):void 0,badge:M?JSON.stringify(M):void 0,loading:V,placeholder:k,"placeholder-color":W,fallback:L,"fallback-mode":q,interactive:U?JSON.stringify(U):void 0,class:A,style:Ve}):null}je.displayName="ProfilePicture";ve();export{je as ProfilePicture,he as ProfilePictureGroup,ce as constructCdnUrl,ft as getCdnBaseUrl,le as getCdnSizeLabel,gt as setCdnBaseUrl};//# sourceMappingURL=index.js.map
+    `}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);function pt(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var he=He.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:c,animated:g,rotationAmount:f,onAvatarClick:h,onAvatarHover:S,onCounterClick:R,onDropdownItemClick:x,onAddClick:v,className:m,style:T,children:V},k)=>{let W=pt(),L=useRef(null),q=useCallback(u=>{h?.(u.detail.user);},[h]),U=useCallback(u=>{S?.(u.detail.user);},[S]),B=useCallback(u=>{let A=u;R?.(A.detail.hiddenUsers,A.detail.open);},[R]),G=useCallback(u=>{x?.(u.detail.user);},[x]),O=useCallback(()=>{v?.();},[v]);return useEffect(()=>{let u=L.current;if(u)return u.addEventListener("avatar-click",q),u.addEventListener("avatar-hover",U),u.addEventListener("counter-click",B),u.addEventListener("dropdown-item-click",G),u.addEventListener("add-click",O),()=>{u.removeEventListener("avatar-click",q),u.removeEventListener("avatar-hover",U),u.removeEventListener("counter-click",B),u.removeEventListener("dropdown-item-click",G),u.removeEventListener("add-click",O);}},[q,U,B,G,O]),useEffect(()=>{typeof k=="function"?k(L.current):k&&(k.current=L.current);},[k]),W?He.createElement("profile-picture-group",{ref:L,max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i?JSON.stringify(i):void 0,dropdown:p?JSON.stringify(p):void 0,"show-add-button":d||void 0,"add-button-label":c,animated:g,"rotation-amount":f,class:m,style:T},V):null});he.displayName="ProfilePictureGroup";function ut(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function gt(r){j.setCdnBaseUrl(r);}function ft(){return j.getCdnBaseUrl()}function je({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:p,border:d,borderWidth:c,borderColor:g,rotation:f,zoom:h,bgColor:S,bgGradient:R,glow:x,ring:v,presence:m,badge:T,loading:V,placeholder:k,placeholderColor:W,fallback:L,fallbackMode:q,interactive:U,onLoad:B,onError:G,onCdnError:O,onClick:u,className:A,style:Ve,ref:J}){let We=ut(),X=useRef(null),ne=useCallback(()=>{B?.();},[B]),oe=useCallback(()=>{G?.();},[G]),ie=useCallback(y=>{O?.(y.detail);},[O]),ae=useCallback(y=>{u?.(y.detail);},[u]);return useEffect(()=>{let y=X.current;if(y)return y.addEventListener("load",ne),y.addEventListener("error",oe),y.addEventListener("cdn-error",ie),y.addEventListener("profile-picture-click",ae),()=>{y.removeEventListener("load",ne),y.removeEventListener("error",oe),y.removeEventListener("cdn-error",ie),y.removeEventListener("profile-picture-click",ae);}},[ne,oe,ie,ae]),useEffect(()=>{typeof J=="function"?J(X.current):J&&(J.current=X.current);},[J]),We?He.createElement("profile-picture",{ref:X,src:r||void 0,alt:o,"ext-customer-id":e,"image-mode":t,size:n,variant:i,shadow:p,border:d||void 0,"border-width":c,"border-color":g,rotation:f,zoom:h,"bg-color":S,"bg-gradient":R,glow:x?JSON.stringify(x):void 0,ring:v?JSON.stringify(v):void 0,presence:m?JSON.stringify(m):void 0,badge:T?JSON.stringify(T):void 0,loading:V,placeholder:k,"placeholder-color":W,fallback:L,"fallback-mode":q,interactive:U?JSON.stringify(U):void 0,class:A,style:Ve}):null}je.displayName="ProfilePicture";ve();export{je as ProfilePicture,he as ProfilePictureGroup,ce as constructCdnUrl,ft as getCdnBaseUrl,le as getCdnSizeLabel,gt as setCdnBaseUrl};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map