@grasco/profile-picture 0.2.0 → 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 +62 -53
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +11 -2
- package/dist/angular.d.ts +11 -2
- package/dist/angular.js +62 -53
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +63 -54
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +24 -10
- package/dist/index.d.ts +24 -10
- package/dist/index.js +63 -54
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +68 -59
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +21 -3
- package/dist/react.d.ts +21 -3
- package/dist/react.js +68 -59
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +14 -2
- package/dist/standalone.standalone.js +61 -52
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/styles.css +2 -2
- package/dist/svelte.cjs +62 -53
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +10 -1
- package/dist/svelte.d.ts +10 -1
- package/dist/svelte.js +62 -53
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +62 -53
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +10 -1
- package/dist/vue.d.ts +10 -1
- package/dist/vue.js +62 -53
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/svelte.d.cts
CHANGED
|
@@ -10,6 +10,8 @@ type Variant = "circle" | "rounded" | "squircle" | "square";
|
|
|
10
10
|
type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
11
11
|
type LoadingStrategy = "lazy" | "eager";
|
|
12
12
|
type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
|
|
13
|
+
type FallbackMode = "initials" | "gradient";
|
|
14
|
+
type ImageMode = "transparent" | "original";
|
|
13
15
|
type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
|
|
14
16
|
interface PresenceConfig {
|
|
15
17
|
/** Current status */
|
|
@@ -87,6 +89,8 @@ interface ProfilePictureProps {
|
|
|
87
89
|
alt?: string;
|
|
88
90
|
/** External customer ID for CDN image loading */
|
|
89
91
|
extCustomerId?: string;
|
|
92
|
+
/** CDN image mode: 'transparent' for transparent background, 'original' for original background */
|
|
93
|
+
imageMode?: ImageMode;
|
|
90
94
|
/** Predefined size or custom pixel value */
|
|
91
95
|
size?: Size | number;
|
|
92
96
|
/** Shape variant */
|
|
@@ -101,6 +105,8 @@ interface ProfilePictureProps {
|
|
|
101
105
|
borderColor?: string;
|
|
102
106
|
/** Rotation angle in degrees */
|
|
103
107
|
rotation?: number;
|
|
108
|
+
/** Zoom level for the image (default: 1.4). Values > 1 zoom in, keeping the image within the crop zone */
|
|
109
|
+
zoom?: number;
|
|
104
110
|
/** Background color (CSS color value) */
|
|
105
111
|
bgColor?: string;
|
|
106
112
|
/** Background gradient (CSS gradient value) */
|
|
@@ -121,6 +127,8 @@ interface ProfilePictureProps {
|
|
|
121
127
|
placeholderColor?: string;
|
|
122
128
|
/** Custom fallback text (overrides initials from alt) */
|
|
123
129
|
fallback?: string;
|
|
130
|
+
/** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
|
|
131
|
+
fallbackMode?: FallbackMode;
|
|
124
132
|
/** Interactive behavior configuration */
|
|
125
133
|
interactive?: InteractionConfig;
|
|
126
134
|
}
|
|
@@ -299,6 +307,7 @@ declare global {
|
|
|
299
307
|
* badge={JSON.stringify(badge)}
|
|
300
308
|
* on:load={handleLoad}
|
|
301
309
|
* on:error={handleError}
|
|
310
|
+
* on:profile-picture-click={handleClick}
|
|
302
311
|
* />
|
|
303
312
|
* ```
|
|
304
313
|
*
|
|
@@ -325,4 +334,4 @@ declare function setCdnBaseUrl(url: string): void;
|
|
|
325
334
|
*/
|
|
326
335
|
declare function getCdnBaseUrl(): string;
|
|
327
336
|
|
|
328
|
-
export { type BadgeConfig, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, getCdnBaseUrl, setCdnBaseUrl };
|
|
337
|
+
export { type BadgeConfig, type DropdownConfig, type FallbackMode, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, getCdnBaseUrl, setCdnBaseUrl };
|
package/dist/svelte.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ type Variant = "circle" | "rounded" | "squircle" | "square";
|
|
|
10
10
|
type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
11
11
|
type LoadingStrategy = "lazy" | "eager";
|
|
12
12
|
type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
|
|
13
|
+
type FallbackMode = "initials" | "gradient";
|
|
14
|
+
type ImageMode = "transparent" | "original";
|
|
13
15
|
type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
|
|
14
16
|
interface PresenceConfig {
|
|
15
17
|
/** Current status */
|
|
@@ -87,6 +89,8 @@ interface ProfilePictureProps {
|
|
|
87
89
|
alt?: string;
|
|
88
90
|
/** External customer ID for CDN image loading */
|
|
89
91
|
extCustomerId?: string;
|
|
92
|
+
/** CDN image mode: 'transparent' for transparent background, 'original' for original background */
|
|
93
|
+
imageMode?: ImageMode;
|
|
90
94
|
/** Predefined size or custom pixel value */
|
|
91
95
|
size?: Size | number;
|
|
92
96
|
/** Shape variant */
|
|
@@ -101,6 +105,8 @@ interface ProfilePictureProps {
|
|
|
101
105
|
borderColor?: string;
|
|
102
106
|
/** Rotation angle in degrees */
|
|
103
107
|
rotation?: number;
|
|
108
|
+
/** Zoom level for the image (default: 1.4). Values > 1 zoom in, keeping the image within the crop zone */
|
|
109
|
+
zoom?: number;
|
|
104
110
|
/** Background color (CSS color value) */
|
|
105
111
|
bgColor?: string;
|
|
106
112
|
/** Background gradient (CSS gradient value) */
|
|
@@ -121,6 +127,8 @@ interface ProfilePictureProps {
|
|
|
121
127
|
placeholderColor?: string;
|
|
122
128
|
/** Custom fallback text (overrides initials from alt) */
|
|
123
129
|
fallback?: string;
|
|
130
|
+
/** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
|
|
131
|
+
fallbackMode?: FallbackMode;
|
|
124
132
|
/** Interactive behavior configuration */
|
|
125
133
|
interactive?: InteractionConfig;
|
|
126
134
|
}
|
|
@@ -299,6 +307,7 @@ declare global {
|
|
|
299
307
|
* badge={JSON.stringify(badge)}
|
|
300
308
|
* on:load={handleLoad}
|
|
301
309
|
* on:error={handleError}
|
|
310
|
+
* on:profile-picture-click={handleClick}
|
|
302
311
|
* />
|
|
303
312
|
* ```
|
|
304
313
|
*
|
|
@@ -325,4 +334,4 @@ declare function setCdnBaseUrl(url: string): void;
|
|
|
325
334
|
*/
|
|
326
335
|
declare function getCdnBaseUrl(): string;
|
|
327
336
|
|
|
328
|
-
export { type BadgeConfig, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, getCdnBaseUrl, setCdnBaseUrl };
|
|
337
|
+
export { type BadgeConfig, type DropdownConfig, type FallbackMode, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, getCdnBaseUrl, setCdnBaseUrl };
|
package/dist/svelte.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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 {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Ce=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&&Ce(o,e,n),n};var j="grasco-profile-picture-styles",T=false,K=false;function J(){if(T||typeof document>"u")return;if(document.getElementById(j)){T=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){T=true;return}K||(K=true,ke());}function ke(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>$e());}function $e(){if(T||typeof document>"u")return;if(document.getElementById(j)){T=true;return}let r=Ie();if(!r)return;let o=document.createElement("link");o.id=j,o.rel="stylesheet",o.href=r,document.head.appendChild(o),T=true;}function Ie(){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 M={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},X={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},Z={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)"},w={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var A={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},S={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function k(...r){return r.filter(Boolean).join(" ")}function _(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function L(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 H(r){return Math.round(r*.38)}function ee(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 te(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function re(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function ne(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 U(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 oe(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 P(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=U(r)%o.length;return o[e]}var Q=[["#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=U(r),e=Q[o%Q.length],t=U(r+"pos1"),n=U(r+"pos2"),i=20+o%61,p=20+(o>>4)%61,d=20+t%61,c=20+(t>>4)%61,u=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 ${u}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function ae(r){return typeof r=="number"?r:M[r]??M[S.size]}function V(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 O(r,o,e,t,n){let i=n??o*(1-e);return r*i}function se(r,o,e){return e==="ltr"?o-r:r+1}function pe(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 de(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 ge(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 fe(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 he(r){return {boxShadow:Z[r]}}var ze={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -36,7 +36,7 @@ import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit
|
|
|
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
|
-
}`},
|
|
39
|
+
}`},Ee=Object.values(ze).join(`
|
|
40
40
|
`),Te=`
|
|
41
41
|
/* Profile Picture Component Styles */
|
|
42
42
|
.pp-container {
|
|
@@ -53,6 +53,7 @@ import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/* Inner container for image clipping - allows badges/rings to overflow */
|
|
56
|
+
/* Background is applied here (not on container) to prevent sub-pixel bleed-through */
|
|
56
57
|
.pp-inner {
|
|
57
58
|
position: absolute;
|
|
58
59
|
inset: 0;
|
|
@@ -240,8 +241,8 @@ import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit
|
|
|
240
241
|
transition: none !important;
|
|
241
242
|
}
|
|
242
243
|
}
|
|
243
|
-
`,
|
|
244
|
-
${Te}`,
|
|
244
|
+
`,be=`${Ee}
|
|
245
|
+
${Te}`,me=`
|
|
245
246
|
@keyframes np-shimmer {
|
|
246
247
|
0% { background-position: -200% 0; }
|
|
247
248
|
100% { background-position: 200% 0; }
|
|
@@ -251,7 +252,7 @@ ${Te}`,he=`
|
|
|
251
252
|
background-size: 200% 100%;
|
|
252
253
|
animation: np-shimmer 1.5s infinite;
|
|
253
254
|
}
|
|
254
|
-
`;function
|
|
255
|
+
`;function xe(r,o=.3){if(_(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 Me=`
|
|
255
256
|
@keyframes ppg-tooltip-in {
|
|
256
257
|
from {
|
|
257
258
|
opacity: 0;
|
|
@@ -747,34 +748,39 @@ ${Te}`,he=`
|
|
|
747
748
|
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
748
749
|
}
|
|
749
750
|
}
|
|
750
|
-
`,
|
|
751
|
-
${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=
|
|
752
|
-
${this.placeholder==="shimmer"?html`<style>${
|
|
751
|
+
`,we=`${Me}
|
|
752
|
+
${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=w.size;this.variant=w.variant;this.shadow=w.shadow;this.border=false;this.borderWidth=w.borderWidth;this.borderColor=w.borderColor;this.rotation=0;this.zoom=w.zoom;this.loading=w.loading;this.placeholder=w.placeholder;this.placeholderColor=w.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:M[e]??M[w.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=fe(this.bgColor,this.bgGradient),t=this.border?ue(this.borderWidth,this.borderColor):null,n=he(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:xe(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:k("pp-container",ge(this.variant),t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:A[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
|
+
${this.placeholder==="shimmer"?html`<style>${me}</style>`:nothing}
|
|
753
754
|
<div
|
|
754
755
|
class=${k("np:absolute np:inset-0",e)}
|
|
755
756
|
style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
756
757
|
</div>
|
|
757
|
-
`}renderFallback(){if(this.
|
|
758
|
+
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=ie(this.gradientSeed);return html`
|
|
759
|
+
<div
|
|
760
|
+
class="pp-fallback np:absolute np:inset-0"
|
|
761
|
+
style=${styleMap({background:e?"transparent":n})}>
|
|
762
|
+
</div>
|
|
763
|
+
`}if(this.fallback)return html`
|
|
758
764
|
<span
|
|
759
765
|
class="pp-fallback"
|
|
760
|
-
style=${styleMap({fontSize:`${
|
|
766
|
+
style=${styleMap({fontSize:`${H(this.pixelSize)}px`})}>
|
|
761
767
|
${this.fallback}
|
|
762
768
|
</span>
|
|
763
|
-
`;if(this.alt){let
|
|
769
|
+
`;if(this.alt){let n=P(this.alt);return html`
|
|
764
770
|
<div
|
|
765
771
|
class="pp-fallback np:absolute np:inset-0"
|
|
766
|
-
style=${styleMap({background:
|
|
767
|
-
${
|
|
772
|
+
style=${styleMap({background:e?"transparent":n,fontSize:`${H(this.pixelSize)}px`})}>
|
|
773
|
+
${L(this.alt)}
|
|
768
774
|
</div>
|
|
769
|
-
`}let
|
|
775
|
+
`}let t=this.pixelSize*.5;return html`
|
|
770
776
|
<svg
|
|
771
777
|
class="pp-fallback-icon"
|
|
772
|
-
style="width: ${
|
|
778
|
+
style="width: ${t}px; height: ${t}px;"
|
|
773
779
|
fill="currentColor"
|
|
774
780
|
viewBox="0 0 24 24">
|
|
775
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" />
|
|
776
782
|
</svg>
|
|
777
|
-
`}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`
|
|
778
784
|
<img
|
|
779
785
|
src=${t}
|
|
780
786
|
alt=${this.alt}
|
|
@@ -783,24 +789,25 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
783
789
|
@load=${this.handleLoad}
|
|
784
790
|
@error=${this.handleError}
|
|
785
791
|
class=${k("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
792
|
+
style=${n}
|
|
786
793
|
draggable="false" />
|
|
787
|
-
`}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,t=this.ring.gap??3,
|
|
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",u=this.ring.emptyColor??"#8E8E93";i=oe(d,c,u);}else this.ring.gradient&&this.ring.gradient.length>0?i=ne(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
|
|
788
795
|
<div
|
|
789
796
|
class=${k("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
|
|
790
|
-
style=${styleMap({inset:`-${
|
|
797
|
+
style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:A[this.variant]})}>
|
|
791
798
|
</div>
|
|
792
|
-
`}getCornerOffset(){let e=this.
|
|
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=te(this.pixelSize,e),n=X[this.presence.status],p=this.getCornerOffset()-t/2;return html`
|
|
793
800
|
<div
|
|
794
801
|
class=${k("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
795
|
-
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:
|
|
802
|
+
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
|
|
796
803
|
title=${this.presence.status}>
|
|
797
804
|
</div>
|
|
798
|
-
`}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,
|
|
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}=ee(this.pixelSize,i),c=this.badge.bgColor??"#22c55e",u=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",b=t&&this.badge.content!==void 0?re(this.badge.content,this.badge.max):null,E=n?this.badge.icon:null,G=d*.9,h=`${this.getCornerOffset()-p/2}px`,B={"top-left":{top:h,left:h},"top-center":{top:h,left:"50%",transform:"translateX(-50%)"},"top-right":{top:h,right:h},"bottom-left":{bottom:h,left:h},"bottom-center":{bottom:h,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:h,right:h}};return html`
|
|
799
806
|
<div
|
|
800
|
-
class=${k("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",
|
|
801
|
-
style=${styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:
|
|
802
|
-
${
|
|
803
|
-
${
|
|
807
|
+
class=${k("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:u,borderRadius:f,"--pp-badge-glow-color":c,gap:n&&t?"4px":"0",...B[e]})}>
|
|
809
|
+
${E?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${G}px`})}>${E}</span>`:nothing}
|
|
810
|
+
${b??nothing}
|
|
804
811
|
</div>
|
|
805
812
|
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
|
|
806
813
|
<div
|
|
@@ -809,6 +816,8 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
809
816
|
tabindex=${t??nothing}
|
|
810
817
|
role=${this.interactive?.pressable?"button":nothing}
|
|
811
818
|
aria-label=${this.alt||nothing}
|
|
819
|
+
@click=${this.handleClick}
|
|
820
|
+
@keydown=${this.handleKeyDown}
|
|
812
821
|
data-profile-picture>
|
|
813
822
|
|
|
814
823
|
<!-- Ring Effect (behind everything) -->
|
|
@@ -816,8 +825,8 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
816
825
|
|
|
817
826
|
<!-- Inner container for image clipping -->
|
|
818
827
|
<div
|
|
819
|
-
class
|
|
820
|
-
style=${styleMap({borderRadius:A[this.variant]})}>
|
|
828
|
+
class=${k("pp-inner",e.innerClasses)}
|
|
829
|
+
style=${styleMap({borderRadius:A[this.variant],...e.innerStyles})}>
|
|
821
830
|
<!-- Placeholder -->
|
|
822
831
|
${this.renderPlaceholder()}
|
|
823
832
|
|
|
@@ -831,7 +840,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
831
840
|
<!-- Presence Indicator -->
|
|
832
841
|
${this.renderPresence()}
|
|
833
842
|
</div>
|
|
834
|
-
`}};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: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 D=a;customElements.get("profile-picture")||customElements.define("profile-picture",D);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 D=a;customElements.get("profile-picture")||customElements.define("profile-picture",D);var Y=false;function Be(){if(Y||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(Y)return;let o=document.createElement("style");o.textContent=we,document.head.appendChild(o),Y=true;});}var g=class extends LitElement{constructor(){super(...arguments);this.max=S.max;this.direction=S.direction;this.overlap=S.overlap;this.size=S.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=S.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 Be(),this}get pixelSize(){return ae(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??S.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??S.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,u)=>{let f=u??c,b=t[c];return b!=null&&b!==""?String(b):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 N=html`
|
|
835
844
|
<div
|
|
836
845
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
837
846
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -852,10 +861,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
852
861
|
class="ppg-dropdown-list"
|
|
853
862
|
style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
|
|
854
863
|
>
|
|
855
|
-
${e.map(
|
|
864
|
+
${e.map(ve=>this.renderDropdownItem(ve))}
|
|
856
865
|
</div>
|
|
857
866
|
</div>
|
|
858
|
-
`;render(
|
|
867
|
+
`;render(N,this.portalContainer);return}let f=c-t.bottom-n,b=t.top-n,E=d-t.left,G=t.right,I=this.dropdownPosition;I==="bottom"&&f<p&&b>f?I="top":I==="top"&&b<p&&f>b&&(I="bottom");let z;E>=i?z=t.left:G>=i?z=t.right-i:z=(d-i)/2,z=Math.max(8,Math.min(z,d-i-8));let h=I==="bottom"?t.bottom+n:void 0,B=I==="top"?c-t.top+n:void 0,ye=html`
|
|
859
868
|
<div
|
|
860
869
|
class="ppg-backdrop"
|
|
861
870
|
style="pointer-events: auto;"
|
|
@@ -864,7 +873,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
864
873
|
></div>
|
|
865
874
|
<div
|
|
866
875
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
867
|
-
style=${styleMap({position:"fixed",pointerEvents:"auto",top:
|
|
876
|
+
style=${styleMap({position:"fixed",pointerEvents:"auto",top:h!==void 0?`${h}px`:"auto",bottom:B!==void 0?`${B}px`:"auto",left:`${z}px`,width:`${i}px`})}
|
|
868
877
|
data-position=${I}
|
|
869
878
|
role="menu"
|
|
870
879
|
aria-label="Hidden users"
|
|
@@ -876,10 +885,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
876
885
|
class="ppg-dropdown-list"
|
|
877
886
|
style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
878
887
|
>
|
|
879
|
-
${e.map(
|
|
888
|
+
${e.map(N=>this.renderDropdownItem(N))}
|
|
880
889
|
</div>
|
|
881
890
|
</div>
|
|
882
|
-
`;render(
|
|
891
|
+
`;render(ye,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=O(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=se(t,n,this.direction),d=e.variant??"circle",c=e.shadow??"none",u=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
|
|
883
892
|
<div
|
|
884
893
|
class="ppg-avatar-wrapper"
|
|
885
894
|
style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
@@ -887,39 +896,39 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
887
896
|
role="button"
|
|
888
897
|
aria-label=${e.name}
|
|
889
898
|
@click=${()=>this.handleAvatarClick(e)}
|
|
890
|
-
@mouseenter=${
|
|
899
|
+
@mouseenter=${f=>this.handleAvatarHover(e,f)}
|
|
891
900
|
@mouseleave=${this.handleAvatarLeave}
|
|
892
|
-
@keydown=${
|
|
901
|
+
@keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(e))}
|
|
893
902
|
>
|
|
894
|
-
${this.renderProfilePicture(e,d,
|
|
903
|
+
${this.renderProfilePicture(e,d,c,u)}
|
|
895
904
|
</div>
|
|
896
|
-
`}renderProfilePicture(e,t,
|
|
905
|
+
`}renderProfilePicture(e,t,n,i){return html`
|
|
897
906
|
<profile-picture
|
|
898
907
|
.src=${e.src||void 0}
|
|
899
908
|
.alt=${e.name}
|
|
900
909
|
.size=${this.pixelSize}
|
|
901
910
|
.variant=${t}
|
|
902
|
-
.shadow=${
|
|
911
|
+
.shadow=${n}
|
|
903
912
|
.rotation=${i}
|
|
904
913
|
.extCustomerId=${e.extCustomerId}
|
|
905
914
|
?border=${e.border}
|
|
906
915
|
.borderWidth=${e.border?e.borderWidth??2:2}
|
|
907
916
|
.borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
|
|
908
|
-
.bgColor=${e.bgGradient?void 0:e.bgColor
|
|
917
|
+
.bgColor=${e.bgGradient?void 0:e.bgColor||void 0}
|
|
909
918
|
.bgGradient=${e.bgGradient??void 0}
|
|
910
919
|
data-user-id=${e.id??""}
|
|
911
920
|
data-status=${e.status??""}
|
|
912
921
|
></profile-picture>
|
|
913
|
-
`}renderCounter(e,t,
|
|
922
|
+
`}renderCounter(e,t,n){return html`
|
|
914
923
|
<button
|
|
915
924
|
class="ppg-counter"
|
|
916
925
|
style=${styleMap({left:`${t}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
|
|
917
926
|
aria-label=${`${e} more users`}
|
|
918
927
|
aria-expanded=${this.dropdownOpen}
|
|
919
928
|
aria-haspopup="true"
|
|
920
|
-
@click=${()=>this.handleCounterClick(
|
|
929
|
+
@click=${()=>this.handleCounterClick(n)}
|
|
921
930
|
>
|
|
922
|
-
${
|
|
931
|
+
${de(e)}
|
|
923
932
|
</button>
|
|
924
933
|
`}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
|
|
925
934
|
<button
|
|
@@ -943,16 +952,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
943
952
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
944
953
|
</svg>
|
|
945
954
|
</button>
|
|
946
|
-
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,
|
|
955
|
+
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),p=t.left-i.left+t.width/2,d=t.top-i.top,c=t.bottom-i.top,u=this.tooltipPosition==="top";return html`
|
|
947
956
|
<div
|
|
948
957
|
class="ppg-tooltip"
|
|
949
|
-
style=${styleMap({top:
|
|
958
|
+
style=${styleMap({top:u?"auto":`${c+n}px`,bottom:u?`${i.height-d+n}px`:"auto",left:`${p}px`})}
|
|
950
959
|
data-position=${this.tooltipPosition}
|
|
951
960
|
role="tooltip"
|
|
952
961
|
>
|
|
953
962
|
${e.name}
|
|
954
963
|
</div>
|
|
955
|
-
`}renderDropdownItem(e){let t=
|
|
964
|
+
`}renderDropdownItem(e){let t=P(e.name),n=e.src||e.extCustomerId;return html`
|
|
956
965
|
<div
|
|
957
966
|
class="ppg-dropdown-item"
|
|
958
967
|
role="menuitem"
|
|
@@ -960,7 +969,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
960
969
|
@click=${()=>this.handleDropdownItemClick(e)}
|
|
961
970
|
@keydown=${i=>this.handleKeyDown(i,()=>this.handleDropdownItemClick(e))}
|
|
962
971
|
>
|
|
963
|
-
${
|
|
972
|
+
${n?html`<profile-picture
|
|
964
973
|
class="ppg-dropdown-avatar"
|
|
965
974
|
.src=${e.src||void 0}
|
|
966
975
|
.alt=${e.name}
|
|
@@ -972,7 +981,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
972
981
|
class="ppg-dropdown-avatar-fallback"
|
|
973
982
|
style=${styleMap({background:t})}
|
|
974
983
|
>
|
|
975
|
-
${
|
|
984
|
+
${L(e.name)}
|
|
976
985
|
</div>`}
|
|
977
986
|
<div class="ppg-dropdown-info">
|
|
978
987
|
<div class="ppg-dropdown-name">${e.name}</div>
|
|
@@ -987,10 +996,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
987
996
|
`:nothing}
|
|
988
997
|
</div>
|
|
989
998
|
</div>
|
|
990
|
-
`}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:
|
|
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}=V(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=V(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=pe(d,this.pixelSize,this.overlap,this.spacing),u=n?O(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=O(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
|
|
991
1000
|
<div
|
|
992
1001
|
class=${k("ppg-container",this.animated&&"ppg-animated")}
|
|
993
|
-
style=${styleMap({width:`${
|
|
1002
|
+
style=${styleMap({width:`${c}px`,height:`${this.pixelSize}px`})}
|
|
994
1003
|
role="group"
|
|
995
1004
|
aria-label="User avatars"
|
|
996
1005
|
>
|
|
@@ -998,16 +1007,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
998
1007
|
<slot style="display: none;"></slot>
|
|
999
1008
|
|
|
1000
1009
|
<!-- Visible avatars -->
|
|
1001
|
-
${i.map((
|
|
1010
|
+
${i.map((b,E)=>this.renderAvatar(b,E,e))}
|
|
1002
1011
|
|
|
1003
1012
|
<!-- Counter -->
|
|
1004
|
-
${
|
|
1013
|
+
${n?this.renderCounter(t,u,p):nothing}
|
|
1005
1014
|
|
|
1006
1015
|
<!-- Add button -->
|
|
1007
|
-
${this.showAddButton?this.renderAddButton(
|
|
1016
|
+
${this.showAddButton?this.renderAddButton(f):nothing}
|
|
1008
1017
|
|
|
1009
1018
|
<!-- Tooltip -->
|
|
1010
1019
|
${this.renderTooltip()}
|
|
1011
1020
|
</div>
|
|
1012
|
-
`}};s([property({type:Number})],
|
|
1021
|
+
`}};s([property({type:Number})],g.prototype,"max"),s([property({type:String})],g.prototype,"direction"),s([property({type:Number})],g.prototype,"overlap"),s([property({type:String})],g.prototype,"size"),s([property({type:Number})],g.prototype,"spacing"),s([property({type:Object})],g.prototype,"tooltip"),s([property({type:Object})],g.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],g.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],g.prototype,"addButtonLabel"),s([property({type:Boolean})],g.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],g.prototype,"rotationAmount"),s([state()],g.prototype,"users"),s([state()],g.prototype,"dropdownOpen"),s([state()],g.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",g);function pt(r){D.setCdnBaseUrl(r);}function dt(){return D.getCdnBaseUrl()}J();export{dt as getCdnBaseUrl,pt as setCdnBaseUrl};//# sourceMappingURL=svelte.js.map
|
|
1013
1022
|
//# sourceMappingURL=svelte.js.map
|