@grasco/profile-picture 0.2.0 → 0.2.1
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 +64 -56
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +9 -2
- package/dist/angular.d.ts +9 -2
- package/dist/angular.js +64 -56
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +60 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +21 -10
- package/dist/index.d.ts +21 -10
- package/dist/index.js +60 -52
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +65 -57
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +18 -3
- package/dist/react.d.ts +18 -3
- package/dist/react.js +65 -57
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +13 -2
- package/dist/standalone.standalone.js +59 -51
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/styles.css +2 -2
- package/dist/svelte.cjs +64 -56
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +8 -1
- package/dist/svelte.d.ts +8 -1
- package/dist/svelte.js +64 -56
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +64 -56
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +8 -1
- package/dist/vue.d.ts +8 -1
- package/dist/vue.js +64 -56
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/angular.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 */
|
|
@@ -121,6 +125,8 @@ interface ProfilePictureProps {
|
|
|
121
125
|
placeholderColor?: string;
|
|
122
126
|
/** Custom fallback text (overrides initials from alt) */
|
|
123
127
|
fallback?: string;
|
|
128
|
+
/** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
|
|
129
|
+
fallbackMode?: FallbackMode;
|
|
124
130
|
/** Interactive behavior configuration */
|
|
125
131
|
interactive?: InteractionConfig;
|
|
126
132
|
}
|
|
@@ -286,7 +292,8 @@ declare global {
|
|
|
286
292
|
* [attr.ring]="ringJson"
|
|
287
293
|
* [attr.badge]="badgeJson"
|
|
288
294
|
* (load)="onImageLoad()"
|
|
289
|
-
* (error)="onImageError()"
|
|
295
|
+
* (error)="onImageError()"
|
|
296
|
+
* (profile-picture-click)="onAvatarClick($event)">
|
|
290
297
|
* </profile-picture>
|
|
291
298
|
* `,
|
|
292
299
|
* standalone: true,
|
|
@@ -329,4 +336,4 @@ declare function setCdnBaseUrl(url: string): void;
|
|
|
329
336
|
*/
|
|
330
337
|
declare function getCdnBaseUrl(): string;
|
|
331
338
|
|
|
332
|
-
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 };
|
|
339
|
+
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/angular.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 */
|
|
@@ -121,6 +125,8 @@ interface ProfilePictureProps {
|
|
|
121
125
|
placeholderColor?: string;
|
|
122
126
|
/** Custom fallback text (overrides initials from alt) */
|
|
123
127
|
fallback?: string;
|
|
128
|
+
/** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
|
|
129
|
+
fallbackMode?: FallbackMode;
|
|
124
130
|
/** Interactive behavior configuration */
|
|
125
131
|
interactive?: InteractionConfig;
|
|
126
132
|
}
|
|
@@ -286,7 +292,8 @@ declare global {
|
|
|
286
292
|
* [attr.ring]="ringJson"
|
|
287
293
|
* [attr.badge]="badgeJson"
|
|
288
294
|
* (load)="onImageLoad()"
|
|
289
|
-
* (error)="onImageError()"
|
|
295
|
+
* (error)="onImageError()"
|
|
296
|
+
* (profile-picture-click)="onAvatarClick($event)">
|
|
290
297
|
* </profile-picture>
|
|
291
298
|
* `,
|
|
292
299
|
* standalone: true,
|
|
@@ -329,4 +336,4 @@ declare function setCdnBaseUrl(url: string): void;
|
|
|
329
336
|
*/
|
|
330
337
|
declare function getCdnBaseUrl(): string;
|
|
331
338
|
|
|
332
|
-
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 };
|
|
339
|
+
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/angular.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)"},y={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var A={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},v={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function C(...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[v.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,29 +748,34 @@ ${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=y.size;this.variant=y.variant;this.shadow=y.shadow;this.border=false;this.borderWidth=y.borderWidth;this.borderColor=y.borderColor;this.rotation=0;this.loading=y.loading;this.placeholder=y.placeholder;this.placeholderColor=y.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[y.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:C("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
|
-
class=${
|
|
755
|
+
class=${C("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" />
|
|
@@ -782,25 +788,25 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
782
788
|
decoding="async"
|
|
783
789
|
@load=${this.handleLoad}
|
|
784
790
|
@error=${this.handleError}
|
|
785
|
-
class=${
|
|
791
|
+
class=${C("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
786
792
|
draggable="false" />
|
|
787
|
-
`}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,t=this.ring.gap??3,
|
|
793
|
+
`}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
794
|
<div
|
|
789
|
-
class=${
|
|
790
|
-
style=${styleMap({inset:`-${
|
|
795
|
+
class=${C("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
|
|
796
|
+
style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:A[this.variant]})}>
|
|
791
797
|
</div>
|
|
792
|
-
`}getCornerOffset(){let e=this.
|
|
798
|
+
`}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
799
|
<div
|
|
794
|
-
class=${
|
|
795
|
-
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:
|
|
800
|
+
class=${C("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
801
|
+
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
|
|
796
802
|
title=${this.presence.status}>
|
|
797
803
|
</div>
|
|
798
|
-
`}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,
|
|
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}=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
805
|
<div
|
|
800
|
-
class=${
|
|
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
|
-
${
|
|
806
|
+
class=${C("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
|
|
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:u,borderRadius:f,"--pp-badge-glow-color":c,gap:n&&t?"4px":"0",...B[e]})}>
|
|
808
|
+
${E?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${G}px`})}>${E}</span>`:nothing}
|
|
809
|
+
${b??nothing}
|
|
804
810
|
</div>
|
|
805
811
|
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
|
|
806
812
|
<div
|
|
@@ -809,6 +815,8 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
809
815
|
tabindex=${t??nothing}
|
|
810
816
|
role=${this.interactive?.pressable?"button":nothing}
|
|
811
817
|
aria-label=${this.alt||nothing}
|
|
818
|
+
@click=${this.handleClick}
|
|
819
|
+
@keydown=${this.handleKeyDown}
|
|
812
820
|
data-profile-picture>
|
|
813
821
|
|
|
814
822
|
<!-- Ring Effect (behind everything) -->
|
|
@@ -816,8 +824,8 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
816
824
|
|
|
817
825
|
<!-- Inner container for image clipping -->
|
|
818
826
|
<div
|
|
819
|
-
class
|
|
820
|
-
style=${styleMap({borderRadius:A[this.variant]})}>
|
|
827
|
+
class=${C("pp-inner",e.innerClasses)}
|
|
828
|
+
style=${styleMap({borderRadius:A[this.variant],...e.innerStyles})}>
|
|
821
829
|
<!-- Placeholder -->
|
|
822
830
|
${this.renderPlaceholder()}
|
|
823
831
|
|
|
@@ -831,7 +839,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
831
839
|
<!-- Presence Indicator -->
|
|
832
840
|
${this.renderPresence()}
|
|
833
841
|
</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
|
|
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 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=v.max;this.direction=v.direction;this.overlap=v.overlap;this.size=v.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=v.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??v.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??v.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
843
|
<div
|
|
836
844
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
837
845
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -852,10 +860,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
852
860
|
class="ppg-dropdown-list"
|
|
853
861
|
style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
|
|
854
862
|
>
|
|
855
|
-
${e.map(
|
|
863
|
+
${e.map(ve=>this.renderDropdownItem(ve))}
|
|
856
864
|
</div>
|
|
857
865
|
</div>
|
|
858
|
-
`;render(
|
|
866
|
+
`;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
867
|
<div
|
|
860
868
|
class="ppg-backdrop"
|
|
861
869
|
style="pointer-events: auto;"
|
|
@@ -864,7 +872,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
864
872
|
></div>
|
|
865
873
|
<div
|
|
866
874
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
867
|
-
style=${styleMap({position:"fixed",pointerEvents:"auto",top:
|
|
875
|
+
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
876
|
data-position=${I}
|
|
869
877
|
role="menu"
|
|
870
878
|
aria-label="Hidden users"
|
|
@@ -876,10 +884,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
876
884
|
class="ppg-dropdown-list"
|
|
877
885
|
style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
878
886
|
>
|
|
879
|
-
${e.map(
|
|
887
|
+
${e.map(N=>this.renderDropdownItem(N))}
|
|
880
888
|
</div>
|
|
881
889
|
</div>
|
|
882
|
-
`;render(
|
|
890
|
+
`;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
891
|
<div
|
|
884
892
|
class="ppg-avatar-wrapper"
|
|
885
893
|
style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
@@ -887,19 +895,19 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
887
895
|
role="button"
|
|
888
896
|
aria-label=${e.name}
|
|
889
897
|
@click=${()=>this.handleAvatarClick(e)}
|
|
890
|
-
@mouseenter=${
|
|
898
|
+
@mouseenter=${f=>this.handleAvatarHover(e,f)}
|
|
891
899
|
@mouseleave=${this.handleAvatarLeave}
|
|
892
|
-
@keydown=${
|
|
900
|
+
@keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(e))}
|
|
893
901
|
>
|
|
894
|
-
${this.renderProfilePicture(e,d,
|
|
902
|
+
${this.renderProfilePicture(e,d,c,u)}
|
|
895
903
|
</div>
|
|
896
|
-
`}renderProfilePicture(e,t,
|
|
904
|
+
`}renderProfilePicture(e,t,n,i){return html`
|
|
897
905
|
<profile-picture
|
|
898
906
|
.src=${e.src||void 0}
|
|
899
907
|
.alt=${e.name}
|
|
900
908
|
.size=${this.pixelSize}
|
|
901
909
|
.variant=${t}
|
|
902
|
-
.shadow=${
|
|
910
|
+
.shadow=${n}
|
|
903
911
|
.rotation=${i}
|
|
904
912
|
.extCustomerId=${e.extCustomerId}
|
|
905
913
|
?border=${e.border}
|
|
@@ -910,16 +918,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
910
918
|
data-user-id=${e.id??""}
|
|
911
919
|
data-status=${e.status??""}
|
|
912
920
|
></profile-picture>
|
|
913
|
-
`}renderCounter(e,t,
|
|
921
|
+
`}renderCounter(e,t,n){return html`
|
|
914
922
|
<button
|
|
915
923
|
class="ppg-counter"
|
|
916
924
|
style=${styleMap({left:`${t}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
|
|
917
925
|
aria-label=${`${e} more users`}
|
|
918
926
|
aria-expanded=${this.dropdownOpen}
|
|
919
927
|
aria-haspopup="true"
|
|
920
|
-
@click=${()=>this.handleCounterClick(
|
|
928
|
+
@click=${()=>this.handleCounterClick(n)}
|
|
921
929
|
>
|
|
922
|
-
${
|
|
930
|
+
${de(e)}
|
|
923
931
|
</button>
|
|
924
932
|
`}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
|
|
925
933
|
<button
|
|
@@ -943,16 +951,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
943
951
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
944
952
|
</svg>
|
|
945
953
|
</button>
|
|
946
|
-
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,
|
|
954
|
+
`}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
955
|
<div
|
|
948
956
|
class="ppg-tooltip"
|
|
949
|
-
style=${styleMap({top:
|
|
957
|
+
style=${styleMap({top:u?"auto":`${c+n}px`,bottom:u?`${i.height-d+n}px`:"auto",left:`${p}px`})}
|
|
950
958
|
data-position=${this.tooltipPosition}
|
|
951
959
|
role="tooltip"
|
|
952
960
|
>
|
|
953
961
|
${e.name}
|
|
954
962
|
</div>
|
|
955
|
-
`}renderDropdownItem(e){let t=
|
|
963
|
+
`}renderDropdownItem(e){let t=P(e.name),n=e.src||e.extCustomerId;return html`
|
|
956
964
|
<div
|
|
957
965
|
class="ppg-dropdown-item"
|
|
958
966
|
role="menuitem"
|
|
@@ -960,7 +968,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
960
968
|
@click=${()=>this.handleDropdownItemClick(e)}
|
|
961
969
|
@keydown=${i=>this.handleKeyDown(i,()=>this.handleDropdownItemClick(e))}
|
|
962
970
|
>
|
|
963
|
-
${
|
|
971
|
+
${n?html`<profile-picture
|
|
964
972
|
class="ppg-dropdown-avatar"
|
|
965
973
|
.src=${e.src||void 0}
|
|
966
974
|
.alt=${e.name}
|
|
@@ -972,7 +980,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
972
980
|
class="ppg-dropdown-avatar-fallback"
|
|
973
981
|
style=${styleMap({background:t})}
|
|
974
982
|
>
|
|
975
|
-
${
|
|
983
|
+
${L(e.name)}
|
|
976
984
|
</div>`}
|
|
977
985
|
<div class="ppg-dropdown-info">
|
|
978
986
|
<div class="ppg-dropdown-name">${e.name}</div>
|
|
@@ -987,10 +995,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
987
995
|
`:nothing}
|
|
988
996
|
</div>
|
|
989
997
|
</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:
|
|
998
|
+
`}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
999
|
<div
|
|
992
|
-
class=${
|
|
993
|
-
style=${styleMap({width:`${
|
|
1000
|
+
class=${C("ppg-container",this.animated&&"ppg-animated")}
|
|
1001
|
+
style=${styleMap({width:`${c}px`,height:`${this.pixelSize}px`})}
|
|
994
1002
|
role="group"
|
|
995
1003
|
aria-label="User avatars"
|
|
996
1004
|
>
|
|
@@ -998,16 +1006,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
998
1006
|
<slot style="display: none;"></slot>
|
|
999
1007
|
|
|
1000
1008
|
<!-- Visible avatars -->
|
|
1001
|
-
${i.map((
|
|
1009
|
+
${i.map((b,E)=>this.renderAvatar(b,E,e))}
|
|
1002
1010
|
|
|
1003
1011
|
<!-- Counter -->
|
|
1004
|
-
${
|
|
1012
|
+
${n?this.renderCounter(t,u,p):nothing}
|
|
1005
1013
|
|
|
1006
1014
|
<!-- Add button -->
|
|
1007
|
-
${this.showAddButton?this.renderAddButton(
|
|
1015
|
+
${this.showAddButton?this.renderAddButton(f):nothing}
|
|
1008
1016
|
|
|
1009
1017
|
<!-- Tooltip -->
|
|
1010
1018
|
${this.renderTooltip()}
|
|
1011
1019
|
</div>
|
|
1012
|
-
`}};s([property({type:Number})],
|
|
1020
|
+
`}};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=angular.js.map
|
|
1013
1021
|
//# sourceMappingURL=angular.js.map
|