@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/index.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) */
|
|
@@ -425,7 +427,7 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
|
|
|
425
427
|
* Type-safe wrapper around the profile-picture web component.
|
|
426
428
|
* Uses ref as a prop (React 19+ pattern).
|
|
427
429
|
*/
|
|
428
|
-
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 & {
|
|
430
|
+
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 & {
|
|
429
431
|
ref?: React.Ref<HTMLElement>;
|
|
430
432
|
}): React.ReactElement<{
|
|
431
433
|
ref: React.RefObject<HTMLElement>;
|
|
@@ -440,6 +442,7 @@ declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, vari
|
|
|
440
442
|
"border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
|
|
441
443
|
"border-color": string | undefined;
|
|
442
444
|
rotation: number | undefined;
|
|
445
|
+
zoom: number | undefined;
|
|
443
446
|
"bg-color": string | undefined;
|
|
444
447
|
"bg-gradient": string | undefined;
|
|
445
448
|
glow: string | undefined;
|
package/dist/index.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) */
|
|
@@ -425,7 +427,7 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
|
|
|
425
427
|
* Type-safe wrapper around the profile-picture web component.
|
|
426
428
|
* Uses ref as a prop (React 19+ pattern).
|
|
427
429
|
*/
|
|
428
|
-
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 & {
|
|
430
|
+
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 & {
|
|
429
431
|
ref?: React.Ref<HTMLElement>;
|
|
430
432
|
}): React.ReactElement<{
|
|
431
433
|
ref: React.RefObject<HTMLElement>;
|
|
@@ -440,6 +442,7 @@ declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, vari
|
|
|
440
442
|
"border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
|
|
441
443
|
"border-color": string | undefined;
|
|
442
444
|
rotation: number | undefined;
|
|
445
|
+
zoom: number | undefined;
|
|
443
446
|
"bg-color": string | undefined;
|
|
444
447
|
"bg-gradient": string | undefined;
|
|
445
448
|
glow: string | undefined;
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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
|
|
1
|
+
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:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -36,8 +36,8 @@ import He,{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 He,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,
|
|
|
241
241
|
transition: none !important;
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
|
-
`,Ge=`${
|
|
245
|
-
${
|
|
244
|
+
`,Ge=`${_e}
|
|
245
|
+
${et}`,Oe=`
|
|
246
246
|
@keyframes np-shimmer {
|
|
247
247
|
0% { background-position: -200% 0; }
|
|
248
248
|
100% { background-position: 200% 0; }
|
|
@@ -252,7 +252,7 @@ ${_e}`,Oe=`
|
|
|
252
252
|
background-size: 200% 100%;
|
|
253
253
|
animation: np-shimmer 1.5s infinite;
|
|
254
254
|
}
|
|
255
|
-
`;function Fe(r,o=.3){if(Se(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 Fe(r,o=.3){if(Se(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}`,Oe=`
|
|
|
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,11 +748,11 @@ ${_e}`,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
|
-
`,Ne=`${
|
|
752
|
-
${
|
|
751
|
+
`,Ne=`${tt}
|
|
752
|
+
${rt}`;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=Ge,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=le(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ce(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Ue(this.bgColor,this.bgGradient),t=this.border?Le(this.borderWidth,this.borderColor):null,n=Be(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Fe(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:D("pp-container",Ae(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=${D("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=ze(this.gradientSeed);return html`
|
|
@@ -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&&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,24 +788,25 @@ ${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=${D("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=Pe(d,c,g);}else this.ring.gradient&&this.ring.gradient.length>0?i=Ee(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=${D("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=$e(this.pixelSize,e),n=ye[this.presence.status],p=this.getCornerOffset()-t/2;return html`
|
|
799
800
|
<div
|
|
800
|
-
class=${
|
|
801
|
+
class=${D("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
|
-
`}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,
|
|
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}=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`
|
|
805
806
|
<div
|
|
806
|
-
class=${
|
|
807
|
-
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",...
|
|
808
|
-
${S?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${
|
|
807
|
+
class=${D("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
|
|
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",...M[e]})}>
|
|
809
|
+
${S?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${R}px`})}>${S}</span>`:nothing}
|
|
809
810
|
${h??nothing}
|
|
810
811
|
</div>
|
|
811
812
|
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
|
|
@@ -824,8 +825,8 @@ ${tt}`;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=${D("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 @@ ${tt}`;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 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`
|
|
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 @@ ${tt}`;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,
|
|
867
|
+
`;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`
|
|
867
868
|
<div
|
|
868
869
|
class="ppg-backdrop"
|
|
869
870
|
style="pointer-events: auto;"
|
|
@@ -872,7 +873,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
872
873
|
></div>
|
|
873
874
|
<div
|
|
874
875
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
875
|
-
style=${styleMap({position:"fixed",pointerEvents:"auto",top:m!==void 0?`${m}px`:"auto",bottom:
|
|
876
|
+
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`})}
|
|
876
877
|
data-position=${x}
|
|
877
878
|
role="menu"
|
|
878
879
|
aria-label="Hidden users"
|
|
@@ -887,7 +888,7 @@ ${tt}`;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=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`
|
|
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 @@ ${tt}`;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 @@ ${tt}`;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=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`
|
|
999
1000
|
<div
|
|
1000
|
-
class=${
|
|
1001
|
+
class=${D("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 @@ ${tt}`;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 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
|
|
1021
1022
|
//# sourceMappingURL=index.js.map
|