@grasco/profile-picture 0.2.4 → 0.2.5
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/angular.cjs +57 -57
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.js +57 -57
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +49 -49
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +49 -49
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +46 -46
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +46 -46
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +6 -0
- package/dist/standalone.standalone.js +62 -62
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/svelte.cjs +57 -57
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.js +57 -57
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +57 -57
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.js +57 -57
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import je,{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 qe=Object.defineProperty;var d=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,l;i>=0;i--)(l=r[i])&&(n=(l(o,e,n))||n);return n&&qe(o,e,n),n};var se="grasco-profile-picture-styles",F=false,be=false;function he(){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}be||(be=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 j={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},xe={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},ve={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)"},I={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"},M={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function P(...r){return r.filter(Boolean).join(" ")}function ye(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 de(r){return Math.round(r*.38)}function Ce(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 ke(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function Se(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function $e(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 Ie(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 we=[["#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 pe(r,o,e){let t=a=>[Number.parseInt(a.slice(1,3),16),Number.parseInt(a.slice(3,5),16),Number.parseInt(a.slice(5,7),16)],n=t(r),i=t(o),l=a=>Math.round(n[a]+(i[a]-n[a])*e).toString(16).padStart(2,"0");return `#${l(0)}${l(1)}${l(2)}`}function Ee(r){let o=Z(r),e=we[o%we.length],t="#f5f0eb",n=pe(e[0],t,.85),i=pe(e[1],t,.85),l=pe(e[2],t,.85),a=Z(r+"pos1"),s=Z(r+"pos2"),c=20+o%61,f=20+(o>>4)%61,m=20+a%61,y=20+(a>>4)%61,S=20+s%61,h=20+(s>>4)%61;return [`radial-gradient(circle at ${c}% ${f}%, ${e[0]} 0%, ${n} 70%)`,`radial-gradient(circle at ${m}% ${y}%, ${e[1]} 0%, ${i} 70%)`,`radial-gradient(circle at ${S}% ${h}%, ${e[2]} 0%, ${l} 70%)`].join(", ")}function ze(r){return typeof r=="number"?r:j[r]??j[M.size]}function le(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 De(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 Pe(r){return r>99?"+99":`+${r}`}function Te(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function Re(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,l=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${l}?hostname=${n}`}function Ae(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ue(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 Le(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:ve[r]}}var Qe={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -36,8 +36,8 @@ import Ne,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,
|
|
|
36
36
|
0% { transform: scale(0.8); opacity: 0; }
|
|
37
37
|
50% { transform: scale(1.05); }
|
|
38
38
|
100% { transform: scale(1); opacity: 1; }
|
|
39
|
-
}`},
|
|
40
|
-
`),
|
|
39
|
+
}`},_e=Object.values(Qe).join(`
|
|
40
|
+
`),et=`
|
|
41
41
|
/* Profile Picture Component Styles */
|
|
42
42
|
.pp-container {
|
|
43
43
|
--pp-transition-duration: 200ms;
|
|
@@ -241,8 +241,8 @@ import Ne,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,
|
|
|
241
241
|
transition: none !important;
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
|
-
`,
|
|
245
|
-
${
|
|
244
|
+
`,Oe=`${_e}
|
|
245
|
+
${et}`,Ge=`
|
|
246
246
|
@keyframes np-shimmer {
|
|
247
247
|
0% { background-position: -200% 0; }
|
|
248
248
|
100% { background-position: 200% 0; }
|
|
@@ -252,7 +252,7 @@ ${_e}`,Ge=`
|
|
|
252
252
|
background-size: 200% 100%;
|
|
253
253
|
animation: np-shimmer 1.5s infinite;
|
|
254
254
|
}
|
|
255
|
-
`;function
|
|
255
|
+
`;function Ne(r,o=.3){if(ye(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),n=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${n}, ${o})`}return `0 0 20px 0 ${r}`}var tt=`
|
|
256
256
|
@keyframes ppg-tooltip-in {
|
|
257
257
|
from {
|
|
258
258
|
opacity: 0;
|
|
@@ -303,7 +303,7 @@ ${_e}`,Ge=`
|
|
|
303
303
|
opacity: 1;
|
|
304
304
|
}
|
|
305
305
|
}
|
|
306
|
-
`,
|
|
306
|
+
`,rt=`
|
|
307
307
|
/* Profile Picture Group Container */
|
|
308
308
|
.ppg-container {
|
|
309
309
|
--ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -748,14 +748,14 @@ ${_e}`,Ge=`
|
|
|
748
748
|
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
749
749
|
}
|
|
750
750
|
}
|
|
751
|
-
`,Fe=`${
|
|
752
|
-
${
|
|
751
|
+
`,Fe=`${tt}
|
|
752
|
+
${rt}`;var p=class p extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=I.size;this.variant=I.variant;this.shadow=I.shadow;this.border=false;this.borderWidth=I.borderWidth;this.borderColor=I.borderColor;this.rotation=0;this.zoom=I.zoom;this.loading=I.loading;this.placeholder=I.placeholder;this.placeholderColor=I.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){p.cdnBaseUrl=e,p.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return p.cdnBaseUrl}createRenderRoot(){return p.injectStylesOnce(),this}static injectStylesOnce(){if(p.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(p.stylesInjected)return;let t=document.createElement("style");t.textContent=Oe,document.head.appendChild(t),p.stylesInjected=true;});}resolveObjectProp(e){if(e){if(typeof e=="string")try{return JSON.parse(e)}catch{return}return e}}get pixelSize(){let e=this.size;return typeof e=="number"?e:j[e]??j[I.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),p.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),p.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&p.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&p.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.resolveObjectProp(this.interactive)?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.resolveObjectProp(this.interactive)?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&p.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&p.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=Te(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=Re(p.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Le(this.bgColor,this.bgGradient),t=this.border?Ue(this.borderWidth,this.borderColor):null,n=Be(this.shadow),i=this.resolveObjectProp(this.glow),l={};if(i){let c=i.color??this.borderColor??"#6366f1";l={"--pp-glow-color":c,boxShadow:Ne(c,i.intensity??.3)};}let a=this.resolveObjectProp(this.interactive),s=a?.hoverable||a?.pressable;return {classes:P("pp-container",Ae(this.variant),t?.className,s&&"pp-interactive",i?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:H[this.variant],...t?.style,...n,...l,cursor:a?.cursor??(s?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0},innerStyles:e.style??{},innerClasses:e.className}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
|
|
753
753
|
${this.placeholder==="shimmer"?html`<style>${Ge}</style>`:nothing}
|
|
754
754
|
<div
|
|
755
|
-
class=${
|
|
755
|
+
class=${P("np:absolute np:inset-0",e)}
|
|
756
756
|
style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
757
757
|
</div>
|
|
758
|
-
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=
|
|
758
|
+
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=Ee(this.gradientSeed);return html`
|
|
759
759
|
<div
|
|
760
760
|
class="pp-fallback np:absolute np:inset-0"
|
|
761
761
|
style=${styleMap({background:e?"transparent":n})}>
|
|
@@ -780,7 +780,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
780
780
|
viewBox="0 0 24 24">
|
|
781
781
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
|
782
782
|
</svg>
|
|
783
|
-
`}renderImage(){let e=!!(this.extCustomerId&&
|
|
783
|
+
`}renderImage(){let e=!!(this.extCustomerId&&p.cdnBaseUrl),t;if(this.cdnImageUrl?t=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(t=this.src),this.hasError||!t)return this.renderFallback();let n=this.zoom&&this.zoom!==1?styleMap({transform:`scale(${this.zoom})`}):nothing;return html`
|
|
784
784
|
<img
|
|
785
785
|
src=${t}
|
|
786
786
|
alt=${this.alt}
|
|
@@ -788,33 +788,33 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
788
788
|
decoding="async"
|
|
789
789
|
@load=${this.handleLoad}
|
|
790
790
|
@error=${this.handleError}
|
|
791
|
-
class=${
|
|
791
|
+
class=${P("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
792
792
|
style=${n}
|
|
793
793
|
draggable="false" />
|
|
794
|
-
`}renderRing(){
|
|
794
|
+
`}renderRing(){let e=this.resolveObjectProp(this.ring);if(!e?.show)return nothing;let t=e.width??3,n=e.gap??3,i=t+n,l,a=e.progress!==void 0;if(a){let s=e.progress??0,c=e.color??"#30D158",f=e.emptyColor??"#8E8E93";l=Ie(s,c,f);}else e.gradient&&e.gradient.length>0?l=$e(e.gradient):l=e.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
|
|
795
795
|
<div
|
|
796
|
-
class=${
|
|
797
|
-
style=${styleMap({inset:`-${
|
|
796
|
+
class=${P("pp-ring",e.animate&&!a&&"pp-ring-animated",a&&"pp-ring-progress")}
|
|
797
|
+
style=${styleMap({inset:`-${i}px`,padding:`${t}px`,background:l,borderRadius:H[this.variant]})}>
|
|
798
798
|
</div>
|
|
799
|
-
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){
|
|
799
|
+
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){let e=this.resolveObjectProp(this.presence);if(!e)return nothing;let t=e.thickness??2,n=ke(this.pixelSize,t),i=xe[e.status],a=this.getCornerOffset()-n/2;return html`
|
|
800
800
|
<div
|
|
801
|
-
class=${
|
|
802
|
-
style=${styleMap({width:`${
|
|
803
|
-
title=${
|
|
801
|
+
class=${P("pp-presence",e.animate&&"pp-presence-animated")}
|
|
802
|
+
style=${styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${a}px`,right:`${a}px`,color:i})}
|
|
803
|
+
title=${e.status}>
|
|
804
804
|
</div>
|
|
805
|
-
`}renderBadge(){
|
|
805
|
+
`}renderBadge(){let e=this.resolveObjectProp(this.badge);if(!e)return nothing;let t=e.position??"bottom-right",n=e.content!==void 0,i=e.icon!==void 0,l=n||i,{size:a,fontSize:s}=Ce(this.pixelSize,l),c=e.bgColor??"#22c55e",f=e.color??"#ffffff",m=e.borderRadius??"9999px",y=n&&e.content!==void 0?Se(e.content,e.max):null,S=i?e.icon:null,h=s*.9,b=`${this.getCornerOffset()-a/2}px`,A={"top-left":{top:b,left:b},"top-center":{top:b,left:"50%",transform:"translateX(-50%)"},"top-right":{top:b,right:b},"bottom-left":{bottom:b,left:b},"bottom-center":{bottom:b,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:b,right:b}};return html`
|
|
806
806
|
<div
|
|
807
|
-
class=${
|
|
808
|
-
style=${styleMap({width:
|
|
809
|
-
${
|
|
810
|
-
${
|
|
807
|
+
class=${P("pp-badge",e.pulse&&"pp-badge-pulse",e.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
|
|
808
|
+
style=${styleMap({width:l?"auto":`${a}px`,minWidth:`${a}px`,height:`${a}px`,padding:l?"0 6px":"0",fontSize:`${s}px`,backgroundColor:c,color:f,borderRadius:m,"--pp-badge-glow-color":c,gap:i&&n?"4px":"0",...A[t]})}>
|
|
809
|
+
${S?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${h}px`})}>${S}</span>`:nothing}
|
|
810
|
+
${y??nothing}
|
|
811
811
|
</div>
|
|
812
|
-
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||
|
|
812
|
+
`}render(){let e=this.getContainerStyles(),t=this.resolveObjectProp(this.interactive),n=t?.focusable||t?.pressable?0:void 0;return html`
|
|
813
813
|
<div
|
|
814
814
|
class=${e.classes}
|
|
815
815
|
style=${styleMap(e.styles)}
|
|
816
|
-
tabindex=${
|
|
817
|
-
role=${
|
|
816
|
+
tabindex=${n??nothing}
|
|
817
|
+
role=${t?.pressable?"button":nothing}
|
|
818
818
|
aria-label=${this.alt||nothing}
|
|
819
819
|
@click=${this.handleClick}
|
|
820
820
|
@keydown=${this.handleKeyDown}
|
|
@@ -825,7 +825,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
825
825
|
|
|
826
826
|
<!-- Inner container for image clipping -->
|
|
827
827
|
<div
|
|
828
|
-
class=${
|
|
828
|
+
class=${P("pp-inner",e.innerClasses)}
|
|
829
829
|
style=${styleMap({borderRadius:H[this.variant],...e.innerStyles})}>
|
|
830
830
|
<!-- Placeholder -->
|
|
831
831
|
${this.renderPlaceholder()}
|
|
@@ -840,7 +840,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
840
840
|
<!-- Presence Indicator -->
|
|
841
841
|
${this.renderPresence()}
|
|
842
842
|
</div>
|
|
843
|
-
`}};
|
|
843
|
+
`}};d([property({type:String})],p.prototype,"src"),d([property({type:String})],p.prototype,"alt"),d([property({type:String,attribute:"ext-customer-id"})],p.prototype,"extCustomerId"),d([property({type:String})],p.prototype,"size"),d([property({type:String})],p.prototype,"variant"),d([property({type:String})],p.prototype,"shadow"),d([property({type:Boolean})],p.prototype,"border"),d([property({type:Number,attribute:"border-width"})],p.prototype,"borderWidth"),d([property({type:String,attribute:"border-color"})],p.prototype,"borderColor"),d([property({type:Number})],p.prototype,"rotation"),d([property({type:Number})],p.prototype,"zoom"),d([property({type:String,attribute:"bg-color"})],p.prototype,"bgColor"),d([property({type:String,attribute:"bg-gradient"})],p.prototype,"bgGradient"),d([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],p.prototype,"ring"),d([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],p.prototype,"presence"),d([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],p.prototype,"glow"),d([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],p.prototype,"badge"),d([property({type:String})],p.prototype,"loading"),d([property({type:String})],p.prototype,"placeholder"),d([property({type:String,attribute:"placeholder-color"})],p.prototype,"placeholderColor"),d([property({type:String})],p.prototype,"fallback"),d([property({type:String,attribute:"fallback-mode"})],p.prototype,"fallbackMode"),d([property({type:String,attribute:"image-mode"})],p.prototype,"imageMode"),d([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],p.prototype,"interactive"),d([state()],p.prototype,"isLoaded"),d([state()],p.prototype,"hasError"),d([state()],p.prototype,"cdnImageUrl"),d([state()],p.prototype,"cdnLoadFailed");var V=p;customElements.get("profile-picture")||customElements.define("profile-picture",V);var ge=false;function it(){if(ge||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(ge)return;let o=document.createElement("style");o.textContent=Fe,document.head.appendChild(o),ge=true;});}var x=class extends LitElement{constructor(){super(...arguments);this.max=M.max;this.direction=M.direction;this.overlap=M.overlap;this.size=M.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=M.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 ze(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??M.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??M.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","zoom","loading","placeholder","placeholder-color","fallback","fallback-mode","glow","ring","badge","interactive"]});}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=(s,c)=>{let f=c??s,m=t[s];return m!=null&&m!==""?String(m):t.getAttribute(f)??void 0},l=i("borderWidth","border-width"),a=l?Number.parseInt(String(l),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:a,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient"),imageMode:i("imageMode","image-mode"),zoom:(()=>{let s=i("zoom");return s?Number(s):void 0})(),loading:i("loading"),placeholder:i("placeholder"),placeholderColor:i("placeholderColor","placeholder-color"),fallback:i("fallback"),fallbackMode:i("fallbackMode","fallback-mode"),glow:(()=>{let s=t.glow;if(s&&typeof s=="object")return s;let c=t.getAttribute("glow");if(c)try{return JSON.parse(c)}catch{}})(),ring:(()=>{let s=t.ring;if(s&&typeof s=="object")return s;let c=t.getAttribute("ring");if(c)try{return JSON.parse(c)}catch{}})(),badge:(()=>{let s=t.badge;if(s&&typeof s=="object")return s;let c=t.getAttribute("badge");if(c)try{return JSON.parse(c)}catch{}})(),interactive:(()=>{let s=t.interactive;if(s&&typeof s=="object")return s;let c=t.getAttribute("interactive");if(c)try{return JSON.parse(c)}catch{}})()}});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,l=Math.min(this.dropdownMaxHeight+60,e.length*56+60),a=window.innerWidth,s=window.innerHeight;if(a<480){let $=html`
|
|
844
844
|
<div
|
|
845
845
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
846
846
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -864,7 +864,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
864
864
|
${e.map(W=>this.renderDropdownItem(W))}
|
|
865
865
|
</div>
|
|
866
866
|
</div>
|
|
867
|
-
`;render(
|
|
867
|
+
`;render($,this.portalContainer);return}let f=s-t.bottom-n,m=t.top-n,y=a-t.left,S=t.right,h=this.dropdownPosition;h==="bottom"&&f<l&&m>f?h="top":h==="top"&&m<l&&f>m&&(h="bottom");let v;y>=i?v=t.left:S>=i?v=t.right-i:v=(a-i)/2,v=Math.max(8,Math.min(v,a-i-8));let R=h==="bottom"?t.bottom+n:void 0,b=h==="top"?s-t.top+n:void 0,A=html`
|
|
868
868
|
<div
|
|
869
869
|
class="ppg-backdrop"
|
|
870
870
|
style="pointer-events: auto;"
|
|
@@ -873,8 +873,8 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
873
873
|
></div>
|
|
874
874
|
<div
|
|
875
875
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
876
|
-
style=${styleMap({position:"fixed",pointerEvents:"auto",top:
|
|
877
|
-
data-position=${
|
|
876
|
+
style=${styleMap({position:"fixed",pointerEvents:"auto",top:R!==void 0?`${R}px`:"auto",bottom:b!==void 0?`${b}px`:"auto",left:`${v}px`,width:`${i}px`})}
|
|
877
|
+
data-position=${h}
|
|
878
878
|
role="menu"
|
|
879
879
|
aria-label="Hidden users"
|
|
880
880
|
>
|
|
@@ -885,13 +885,13 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
885
885
|
class="ppg-dropdown-list"
|
|
886
886
|
style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
887
887
|
>
|
|
888
|
-
${e.map(
|
|
888
|
+
${e.map($=>this.renderDropdownItem($))}
|
|
889
889
|
</div>
|
|
890
890
|
</div>
|
|
891
|
-
`;render(
|
|
891
|
+
`;render(A,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),l=De(t,n,this.direction),a=e.variant??"circle",s=e.shadow??"none",c=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
|
|
892
892
|
<div
|
|
893
893
|
class="ppg-avatar-wrapper"
|
|
894
|
-
style=${styleMap({left:`${i}px`,zIndex:String(
|
|
894
|
+
style=${styleMap({left:`${i}px`,zIndex:String(l),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
895
895
|
tabindex="0"
|
|
896
896
|
role="button"
|
|
897
897
|
aria-label=${e.name}
|
|
@@ -900,7 +900,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
900
900
|
@mouseleave=${this.handleAvatarLeave}
|
|
901
901
|
@keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(e))}
|
|
902
902
|
>
|
|
903
|
-
${this.renderProfilePicture(e,
|
|
903
|
+
${this.renderProfilePicture(e,a,s,c)}
|
|
904
904
|
</div>
|
|
905
905
|
`}renderProfilePicture(e,t,n,i){return html`
|
|
906
906
|
<profile-picture
|
|
@@ -939,7 +939,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
939
939
|
aria-haspopup="true"
|
|
940
940
|
@click=${()=>this.handleCounterClick(n)}
|
|
941
941
|
>
|
|
942
|
-
${
|
|
942
|
+
${Pe(e)}
|
|
943
943
|
</button>
|
|
944
944
|
`}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
|
|
945
945
|
<button
|
|
@@ -963,10 +963,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
963
963
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
964
964
|
</svg>
|
|
965
965
|
</button>
|
|
966
|
-
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),
|
|
966
|
+
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),l=t.left-i.left+t.width/2,a=t.top-i.top,s=t.bottom-i.top,c=this.tooltipPosition==="top";return html`
|
|
967
967
|
<div
|
|
968
968
|
class="ppg-tooltip"
|
|
969
|
-
style=${styleMap({top:
|
|
969
|
+
style=${styleMap({top:c?"auto":`${s+n}px`,bottom:c?`${i.height-a+n}px`:"auto",left:`${l}px`})}
|
|
970
970
|
data-position=${this.tooltipPosition}
|
|
971
971
|
role="tooltip"
|
|
972
972
|
>
|
|
@@ -1007,10 +1007,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1007
1007
|
`:nothing}
|
|
1008
1008
|
</div>
|
|
1009
1009
|
</div>
|
|
1010
|
-
`}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}=
|
|
1010
|
+
`}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}=le(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=le(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),l=this.users.slice(e),a=e;n&&a++,this.showAddButton&&a++;let s=Me(a,this.pixelSize,this.overlap,this.spacing),c=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`
|
|
1011
1011
|
<div
|
|
1012
|
-
class=${
|
|
1013
|
-
style=${styleMap({width:`${
|
|
1012
|
+
class=${P("ppg-container",this.animated&&"ppg-animated")}
|
|
1013
|
+
style=${styleMap({width:`${s}px`,height:`${this.pixelSize}px`})}
|
|
1014
1014
|
role="group"
|
|
1015
1015
|
aria-label="User avatars"
|
|
1016
1016
|
>
|
|
@@ -1018,10 +1018,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1018
1018
|
<slot style="display: none;"></slot>
|
|
1019
1019
|
|
|
1020
1020
|
<!-- Visible avatars -->
|
|
1021
|
-
${i.map((
|
|
1021
|
+
${i.map((m,y)=>this.renderAvatar(m,y,e))}
|
|
1022
1022
|
|
|
1023
1023
|
<!-- Counter -->
|
|
1024
|
-
${n?this.renderCounter(t,l
|
|
1024
|
+
${n?this.renderCounter(t,c,l):nothing}
|
|
1025
1025
|
|
|
1026
1026
|
<!-- Add button -->
|
|
1027
1027
|
${this.showAddButton?this.renderAddButton(f):nothing}
|
|
@@ -1029,5 +1029,5 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1029
1029
|
<!-- Tooltip -->
|
|
1030
1030
|
${this.renderTooltip()}
|
|
1031
1031
|
</div>
|
|
1032
|
-
`}};
|
|
1032
|
+
`}};d([property({type:Number})],x.prototype,"max"),d([property({type:String})],x.prototype,"direction"),d([property({type:Number})],x.prototype,"overlap"),d([property({type:String})],x.prototype,"size"),d([property({type:Number})],x.prototype,"spacing"),d([property({type:Object})],x.prototype,"tooltip"),d([property({type:Object})],x.prototype,"dropdown"),d([property({type:Boolean,attribute:"show-add-button"})],x.prototype,"showAddButton"),d([property({type:String,attribute:"add-button-label"})],x.prototype,"addButtonLabel"),d([property({type:Boolean})],x.prototype,"animated"),d([property({type:Number,attribute:"rotation-amount"})],x.prototype,"rotationAmount"),d([state()],x.prototype,"users"),d([state()],x.prototype,"dropdownOpen"),d([state()],x.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",x);function pt(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var He=je.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:l,showAddButton:a,addButtonLabel:s,animated:c,rotationAmount:f,onAvatarClick:m,onAvatarHover:y,onCounterClick:S,onDropdownItemClick:h,onAddClick:v,className:R,style:b,children:A},$)=>{let W=pt(),L=useRef(null),J=useCallback(g=>{m?.(g.detail.user);},[m]),B=useCallback(g=>{y?.(g.detail.user);},[y]),O=useCallback(g=>{let U=g;S?.(U.detail.hiddenUsers,U.detail.open);},[S]),G=useCallback(g=>{h?.(g.detail.user);},[h]),N=useCallback(()=>{v?.();},[v]);return useEffect(()=>{let g=L.current;if(g)return g.addEventListener("avatar-click",J),g.addEventListener("avatar-hover",B),g.addEventListener("counter-click",O),g.addEventListener("dropdown-item-click",G),g.addEventListener("add-click",N),()=>{g.removeEventListener("avatar-click",J),g.removeEventListener("avatar-hover",B),g.removeEventListener("counter-click",O),g.removeEventListener("dropdown-item-click",G),g.removeEventListener("add-click",N);}},[J,B,O,G,N]),useEffect(()=>{typeof $=="function"?$(L.current):$&&($.current=L.current);},[$]),W?je.createElement("profile-picture-group",{ref:L,max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i?JSON.stringify(i):void 0,dropdown:l?JSON.stringify(l):void 0,"show-add-button":a||void 0,"add-button-label":s,animated:c,"rotation-amount":f,class:R,style:b},A):null});He.displayName="ProfilePictureGroup";function ut(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function Vt(r){V.setCdnBaseUrl(r);}function Wt(){return V.getCdnBaseUrl()}function gt({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:l,border:a,borderWidth:s,borderColor:c,rotation:f,zoom:m,bgColor:y,bgGradient:S,glow:h,ring:v,presence:R,badge:b,loading:A,placeholder:$,placeholderColor:W,fallback:L,fallbackMode:J,interactive:B,onLoad:O,onError:G,onCdnError:N,onClick:g,className:U,style:Ve,ref:q}){let We=ut(),X=useRef(null),ne=useCallback(()=>{O?.();},[O]),oe=useCallback(()=>{G?.();},[G]),ie=useCallback(w=>{N?.(w.detail);},[N]),ae=useCallback(w=>{g?.(w.detail);},[g]);return useEffect(()=>{let w=X.current;if(w)return w.addEventListener("load",ne),w.addEventListener("error",oe),w.addEventListener("cdn-error",ie),w.addEventListener("profile-picture-click",ae),()=>{w.removeEventListener("load",ne),w.removeEventListener("error",oe),w.removeEventListener("cdn-error",ie),w.removeEventListener("profile-picture-click",ae);}},[ne,oe,ie,ae]),useEffect(()=>{typeof q=="function"?q(X.current):q&&(q.current=X.current);},[q]),We?je.createElement("profile-picture",{ref:X,src:r||void 0,alt:o,"ext-customer-id":e,"image-mode":t,size:n,variant:i,shadow:l,border:a||void 0,"border-width":s,"border-color":c,rotation:f,zoom:m,"bg-color":y,"bg-gradient":S,glow:h?JSON.stringify(h):void 0,ring:v?JSON.stringify(v):void 0,presence:R?JSON.stringify(R):void 0,badge:b?JSON.stringify(b):void 0,loading:A,placeholder:$,"placeholder-color":W,fallback:L,"fallback-mode":J,interactive:B?JSON.stringify(B):void 0,class:U,style:Ve}):null}gt.displayName="ProfilePicture";he();export{gt as ProfilePicture,He as ProfilePictureGroup,Wt as getCdnBaseUrl,Vt as setCdnBaseUrl};//# sourceMappingURL=react.js.map
|
|
1033
1033
|
//# sourceMappingURL=react.js.map
|