@grasco/profile-picture 0.2.1 → 0.2.2
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 +13 -12
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +2 -0
- package/dist/angular.d.ts +2 -0
- package/dist/angular.js +13 -12
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +30 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +30 -29
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +26 -25
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +4 -1
- package/dist/react.d.ts +4 -1
- package/dist/react.js +26 -25
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +1 -0
- package/dist/standalone.standalone.js +18 -17
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/svelte.cjs +13 -12
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +2 -0
- package/dist/svelte.d.ts +2 -0
- package/dist/svelte.js +13 -12
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +13 -12
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +2 -0
- package/dist/vue.d.ts +2 -0
- package/dist/vue.js +13 -12
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/react.d.cts
CHANGED
|
@@ -106,6 +106,8 @@ interface ProfilePictureProps$1 {
|
|
|
106
106
|
borderColor?: string;
|
|
107
107
|
/** Rotation angle in degrees */
|
|
108
108
|
rotation?: number;
|
|
109
|
+
/** Zoom level for the image (default: 1.4). Values > 1 zoom in, keeping the image within the crop zone */
|
|
110
|
+
zoom?: number;
|
|
109
111
|
/** Background color (CSS color value) */
|
|
110
112
|
bgColor?: string;
|
|
111
113
|
/** Background gradient (CSS gradient value) */
|
|
@@ -385,7 +387,7 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
|
|
|
385
387
|
* Type-safe wrapper around the profile-picture web component.
|
|
386
388
|
* Uses ref as a prop (React 19+ pattern).
|
|
387
389
|
*/
|
|
388
|
-
declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, className, style, ref, }: ProfilePictureProps & {
|
|
390
|
+
declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, zoom, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, className, style, ref, }: ProfilePictureProps & {
|
|
389
391
|
ref?: React.Ref<HTMLElement>;
|
|
390
392
|
}): React.ReactElement<{
|
|
391
393
|
ref: React.RefObject<HTMLElement>;
|
|
@@ -400,6 +402,7 @@ declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, vari
|
|
|
400
402
|
"border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
|
|
401
403
|
"border-color": string | undefined;
|
|
402
404
|
rotation: number | undefined;
|
|
405
|
+
zoom: number | undefined;
|
|
403
406
|
"bg-color": string | undefined;
|
|
404
407
|
"bg-gradient": string | undefined;
|
|
405
408
|
glow: string | undefined;
|
package/dist/react.d.ts
CHANGED
|
@@ -106,6 +106,8 @@ interface ProfilePictureProps$1 {
|
|
|
106
106
|
borderColor?: string;
|
|
107
107
|
/** Rotation angle in degrees */
|
|
108
108
|
rotation?: number;
|
|
109
|
+
/** Zoom level for the image (default: 1.4). Values > 1 zoom in, keeping the image within the crop zone */
|
|
110
|
+
zoom?: number;
|
|
109
111
|
/** Background color (CSS color value) */
|
|
110
112
|
bgColor?: string;
|
|
111
113
|
/** Background gradient (CSS gradient value) */
|
|
@@ -385,7 +387,7 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
|
|
|
385
387
|
* Type-safe wrapper around the profile-picture web component.
|
|
386
388
|
* Uses ref as a prop (React 19+ pattern).
|
|
387
389
|
*/
|
|
388
|
-
declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, className, style, ref, }: ProfilePictureProps & {
|
|
390
|
+
declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, zoom, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, className, style, ref, }: ProfilePictureProps & {
|
|
389
391
|
ref?: React.Ref<HTMLElement>;
|
|
390
392
|
}): React.ReactElement<{
|
|
391
393
|
ref: React.RefObject<HTMLElement>;
|
|
@@ -400,6 +402,7 @@ declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, vari
|
|
|
400
402
|
"border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
|
|
401
403
|
"border-color": string | undefined;
|
|
402
404
|
rotation: number | undefined;
|
|
405
|
+
zoom: number | undefined;
|
|
403
406
|
"bg-color": string | undefined;
|
|
404
407
|
"bg-gradient": string | undefined;
|
|
405
408
|
glow: string | undefined;
|
package/dist/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import Ne,{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
|
|
1
|
+
import Ne,{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 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&&qe(o,e,n),n};var se="grasco-profile-picture-styles",F=false,me=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}me||(me=true,Ye());}function Ye(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Ke());}function Ke(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}let r=Xe();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),F=true;}function Xe(){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},be={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},xe={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"},D={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function T(...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 pe(r){return Math.round(r*.38)}function we(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 Ce(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 ke(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 $e(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 ve=[["#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 Ie(r){let o=Z(r),e=ve[o%ve.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 Ee(r){return typeof r=="number"?r:N[r]??N[D.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 ze(r,o,e){return e==="ltr"?o-r:r+1}function De(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 Te(r){return r>99?"+99":`+${r}`}function Me(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,p=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function Pe(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ae(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 Ue(r){return {boxShadow:xe[r]}}var Ze={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
|
+
}`},Qe=Object.values(Ze).join(`
|
|
40
|
+
`),_e=`
|
|
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
|
-
`,Be=`${
|
|
245
|
-
${
|
|
244
|
+
`,Be=`${Qe}
|
|
245
|
+
${_e}`,Oe=`
|
|
246
246
|
@keyframes np-shimmer {
|
|
247
247
|
0% { background-position: -200% 0; }
|
|
248
248
|
100% { background-position: 200% 0; }
|
|
@@ -252,7 +252,7 @@ ${Qe}`,Oe=`
|
|
|
252
252
|
background-size: 200% 100%;
|
|
253
253
|
animation: np-shimmer 1.5s infinite;
|
|
254
254
|
}
|
|
255
|
-
`;function Ge(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
|
|
255
|
+
`;function Ge(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 et=`
|
|
256
256
|
@keyframes ppg-tooltip-in {
|
|
257
257
|
from {
|
|
258
258
|
opacity: 0;
|
|
@@ -303,7 +303,7 @@ ${Qe}`,Oe=`
|
|
|
303
303
|
opacity: 1;
|
|
304
304
|
}
|
|
305
305
|
}
|
|
306
|
-
`,
|
|
306
|
+
`,tt=`
|
|
307
307
|
/* Profile Picture Group Container */
|
|
308
308
|
.ppg-container {
|
|
309
309
|
--ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -748,11 +748,11 @@ ${Qe}`,Oe=`
|
|
|
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=`${et}
|
|
752
|
+
${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=$.size;this.variant=$.variant;this.shadow=$.shadow;this.border=false;this.borderWidth=$.borderWidth;this.borderColor=$.borderColor;this.rotation=0;this.zoom=$.zoom;this.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.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){a.cdnBaseUrl=e,a.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 a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Be,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.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.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.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&&a.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&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=Me(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=Re(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Le(this.bgColor,this.bgGradient),t=this.border?Ae(this.borderWidth,this.borderColor):null,n=Ue(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Ge(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:T("pp-container",Pe(this.variant),t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:H[this.variant],...t?.style,...n,...i,cursor:this.interactive?.cursor??(p?"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>${Oe}</style>`:nothing}
|
|
754
754
|
<div
|
|
755
|
-
class=${
|
|
755
|
+
class=${T("np:absolute np:inset-0",e)}
|
|
756
756
|
style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
757
757
|
</div>
|
|
758
758
|
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=Ie(this.gradientSeed);return html`
|
|
@@ -780,7 +780,7 @@ ${et}`;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&&a.cdnBaseUrl),t;
|
|
783
|
+
`}renderImage(){let e=!!(this.extCustomerId&&a.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,22 +788,23 @@ ${et}`;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=${T("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
792
|
+
style=${n}
|
|
792
793
|
draggable="false" />
|
|
793
794
|
`}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,t=this.ring.gap??3,n=e+t,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,c=this.ring.color??"#30D158",g=this.ring.emptyColor??"#8E8E93";i=$e(d,c,g);}else this.ring.gradient&&this.ring.gradient.length>0?i=ke(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
|
|
794
795
|
<div
|
|
795
|
-
class=${
|
|
796
|
-
style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:
|
|
796
|
+
class=${T("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
|
|
797
|
+
style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:H[this.variant]})}>
|
|
797
798
|
</div>
|
|
798
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(){if(!this.presence)return nothing;let e=this.presence.thickness??2,t=Ce(this.pixelSize,e),n=be[this.presence.status],p=this.getCornerOffset()-t/2;return html`
|
|
799
800
|
<div
|
|
800
|
-
class=${
|
|
801
|
+
class=${T("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
801
802
|
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
|
|
802
803
|
title=${this.presence.status}>
|
|
803
804
|
</div>
|
|
804
805
|
`}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}=we(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?Se(this.badge.content,this.badge.max):null,S=n?this.badge.icon:null,P=d*.9,m=`${this.getCornerOffset()-p/2}px`,R={"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`
|
|
805
806
|
<div
|
|
806
|
-
class=${
|
|
807
|
+
class=${T("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
|
|
807
808
|
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",...R[e]})}>
|
|
808
809
|
${S?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${P}px`})}>${S}</span>`:nothing}
|
|
809
810
|
${h??nothing}
|
|
@@ -824,8 +825,8 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
824
825
|
|
|
825
826
|
<!-- Inner container for image clipping -->
|
|
826
827
|
<div
|
|
827
|
-
class=${
|
|
828
|
-
style=${styleMap({borderRadius:
|
|
828
|
+
class=${T("pp-inner",e.innerClasses)}
|
|
829
|
+
style=${styleMap({borderRadius:H[this.variant],...e.innerStyles})}>
|
|
829
830
|
<!-- Placeholder -->
|
|
830
831
|
${this.renderPlaceholder()}
|
|
831
832
|
|
|
@@ -839,7 +840,7 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
839
840
|
<!-- Presence Indicator -->
|
|
840
841
|
${this.renderPresence()}
|
|
841
842
|
</div>
|
|
842
|
-
`}};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: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
|
|
843
|
+
`}};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 ue=false;function ot(){if(ue||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(ue)return;let o=document.createElement("style");o.textContent=Fe,document.head.appendChild(o),ue=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=D.max;this.direction=D.direction;this.overlap=D.overlap;this.size=D.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=D.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 ot(),this}get pixelSize(){return Ee(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??D.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??D.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`
|
|
843
844
|
<div
|
|
844
845
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
845
846
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -860,10 +861,10 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
860
861
|
class="ppg-dropdown-list"
|
|
861
862
|
style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
|
|
862
863
|
>
|
|
863
|
-
${e.map(
|
|
864
|
+
${e.map(W=>this.renderDropdownItem(W))}
|
|
864
865
|
</div>
|
|
865
866
|
</div>
|
|
866
|
-
`;render(k,this.portalContainer);return}let f=c-t.bottom-n,h=t.top-n,S=d-t.left,P=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:P>=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,R=x==="top"?c-t.top+n:void 0,
|
|
867
|
+
`;render(k,this.portalContainer);return}let f=c-t.bottom-n,h=t.top-n,S=d-t.left,P=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:P>=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,R=x==="top"?c-t.top+n:void 0,V=html`
|
|
867
868
|
<div
|
|
868
869
|
class="ppg-backdrop"
|
|
869
870
|
style="pointer-events: auto;"
|
|
@@ -887,7 +888,7 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
887
888
|
${e.map(k=>this.renderDropdownItem(k))}
|
|
888
889
|
</div>
|
|
889
890
|
</div>
|
|
890
|
-
`;render(
|
|
891
|
+
`;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=ze(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`
|
|
891
892
|
<div
|
|
892
893
|
class="ppg-avatar-wrapper"
|
|
893
894
|
style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
@@ -913,7 +914,7 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
913
914
|
?border=${e.border}
|
|
914
915
|
.borderWidth=${e.border?e.borderWidth??2:2}
|
|
915
916
|
.borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
|
|
916
|
-
.bgColor=${e.bgGradient?void 0:e.bgColor
|
|
917
|
+
.bgColor=${e.bgGradient?void 0:e.bgColor||void 0}
|
|
917
918
|
.bgGradient=${e.bgGradient??void 0}
|
|
918
919
|
data-user-id=${e.id??""}
|
|
919
920
|
data-status=${e.status??""}
|
|
@@ -997,7 +998,7 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
997
998
|
</div>
|
|
998
999
|
`}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=De(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`
|
|
999
1000
|
<div
|
|
1000
|
-
class=${
|
|
1001
|
+
class=${T("ppg-container",this.animated&&"ppg-animated")}
|
|
1001
1002
|
style=${styleMap({width:`${c}px`,height:`${this.pixelSize}px`})}
|
|
1002
1003
|
role="group"
|
|
1003
1004
|
aria-label="User avatars"
|
|
@@ -1017,5 +1018,5 @@ ${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1017
1018
|
<!-- Tooltip -->
|
|
1018
1019
|
${this.renderTooltip()}
|
|
1019
1020
|
</div>
|
|
1020
|
-
`}};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
|
|
1021
|
+
`}};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 st(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var He=Ne.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:P,onDropdownItemClick:x,onAddClick:v,className:m,style:R,children:V},k)=>{let W=st(),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;P?.(A.detail.hiddenUsers,A.detail.open);},[P]),O=useCallback(u=>{x?.(u.detail.user);},[x]),G=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",O),u.addEventListener("add-click",G),()=>{u.removeEventListener("avatar-click",q),u.removeEventListener("avatar-hover",U),u.removeEventListener("counter-click",B),u.removeEventListener("dropdown-item-click",O),u.removeEventListener("add-click",G);}},[q,U,B,O,G]),useEffect(()=>{typeof k=="function"?k(L.current):k&&(k.current=L.current);},[k]),W?Ne.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:R},V):null});He.displayName="ProfilePictureGroup";function ct(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function jt(r){j.setCdnBaseUrl(r);}function Vt(){return j.getCdnBaseUrl()}function ut({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:P,glow:x,ring:v,presence:m,badge:R,loading:V,placeholder:k,placeholderColor:W,fallback:L,fallbackMode:q,interactive:U,onLoad:B,onError:O,onCdnError:G,onClick:u,className:A,style:je,ref:J}){let Ve=ct(),X=useRef(null),ne=useCallback(()=>{B?.();},[B]),oe=useCallback(()=>{O?.();},[O]),ie=useCallback(y=>{G?.(y.detail);},[G]),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]),Ve?Ne.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":P,glow:x?JSON.stringify(x):void 0,ring:v?JSON.stringify(v):void 0,presence:m?JSON.stringify(m):void 0,badge:R?JSON.stringify(R):void 0,loading:V,placeholder:k,"placeholder-color":W,fallback:L,"fallback-mode":q,interactive:U?JSON.stringify(U):void 0,class:A,style:je}):null}ut.displayName="ProfilePicture";he();export{ut as ProfilePicture,He as ProfilePictureGroup,Vt as getCdnBaseUrl,jt as setCdnBaseUrl};//# sourceMappingURL=react.js.map
|
|
1021
1022
|
//# sourceMappingURL=react.js.map
|