@grasco/profile-picture 0.2.2 → 0.2.4
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 +48 -37
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +22 -0
- package/dist/angular.d.ts +22 -0
- package/dist/angular.js +48 -37
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +35 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.js +35 -24
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +43 -32
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +22 -0
- package/dist/react.d.ts +22 -0
- package/dist/react.js +43 -32
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +24 -0
- package/dist/standalone.standalone.js +101 -90
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/svelte.cjs +48 -37
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +22 -0
- package/dist/svelte.d.ts +22 -0
- package/dist/svelte.js +48 -37
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +48 -37
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +22 -0
- package/dist/vue.d.ts +22 -0
- package/dist/vue.js +48 -37
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/react.d.cts
CHANGED
|
@@ -176,6 +176,28 @@ interface GroupUserData {
|
|
|
176
176
|
bgColor?: string;
|
|
177
177
|
/** Background gradient */
|
|
178
178
|
bgGradient?: string;
|
|
179
|
+
/** CDN image mode */
|
|
180
|
+
imageMode?: ImageMode;
|
|
181
|
+
/** Zoom level */
|
|
182
|
+
zoom?: number;
|
|
183
|
+
/** Loading strategy */
|
|
184
|
+
loading?: LoadingStrategy;
|
|
185
|
+
/** Placeholder type */
|
|
186
|
+
placeholder?: PlaceholderType;
|
|
187
|
+
/** Placeholder color */
|
|
188
|
+
placeholderColor?: string;
|
|
189
|
+
/** Custom fallback text */
|
|
190
|
+
fallback?: string;
|
|
191
|
+
/** Fallback mode */
|
|
192
|
+
fallbackMode?: FallbackMode;
|
|
193
|
+
/** Glow config */
|
|
194
|
+
glow?: GlowConfig;
|
|
195
|
+
/** Ring config */
|
|
196
|
+
ring?: RingConfig;
|
|
197
|
+
/** Badge config */
|
|
198
|
+
badge?: BadgeConfig;
|
|
199
|
+
/** Interactive config */
|
|
200
|
+
interactive?: InteractionConfig;
|
|
179
201
|
}
|
|
180
202
|
/** Dropdown configuration for overflow users */
|
|
181
203
|
interface DropdownConfig {
|
package/dist/react.d.ts
CHANGED
|
@@ -176,6 +176,28 @@ interface GroupUserData {
|
|
|
176
176
|
bgColor?: string;
|
|
177
177
|
/** Background gradient */
|
|
178
178
|
bgGradient?: string;
|
|
179
|
+
/** CDN image mode */
|
|
180
|
+
imageMode?: ImageMode;
|
|
181
|
+
/** Zoom level */
|
|
182
|
+
zoom?: number;
|
|
183
|
+
/** Loading strategy */
|
|
184
|
+
loading?: LoadingStrategy;
|
|
185
|
+
/** Placeholder type */
|
|
186
|
+
placeholder?: PlaceholderType;
|
|
187
|
+
/** Placeholder color */
|
|
188
|
+
placeholderColor?: string;
|
|
189
|
+
/** Custom fallback text */
|
|
190
|
+
fallback?: string;
|
|
191
|
+
/** Fallback mode */
|
|
192
|
+
fallbackMode?: FallbackMode;
|
|
193
|
+
/** Glow config */
|
|
194
|
+
glow?: GlowConfig;
|
|
195
|
+
/** Ring config */
|
|
196
|
+
ring?: RingConfig;
|
|
197
|
+
/** Badge config */
|
|
198
|
+
badge?: BadgeConfig;
|
|
199
|
+
/** Interactive config */
|
|
200
|
+
interactive?: InteractionConfig;
|
|
179
201
|
}
|
|
180
202
|
/** Dropdown configuration for overflow users */
|
|
181
203
|
interface DropdownConfig {
|
package/dist/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import Ne,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var
|
|
1
|
+
import Ne,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Je=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,p;i>=0;i--)(p=r[i])&&(n=(p(o,e,n))||n);return n&&Je(o,e,n),n};var se="grasco-profile-picture-styles",F=false,me=false;function he(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){F=true;return}me||(me=true,Ye());}function Ye(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Ke());}function Ke(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}let r=Xe();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),F=true;}function Xe(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=import.meta.url;if(o)return `${o.substring(0,o.lastIndexOf("/")+1)}styles.css`}catch{}let r=document.currentScript;if(r?.src){let o=new URL(r.src);return `${o.href.substring(0,o.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var N={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},be={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},xe={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},$={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},D={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function M(...r){return r.filter(Boolean).join(" ")}function we(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function Q(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function de(r){return Math.round(r*.38)}function ye(r,o){let e;if(o){let n=Math.round(r*.31);e=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);e=Math.min(14,Math.max(8,n));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function Ce(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function ke(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function Se(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let n=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${n}deg ${i}deg`}).join(", ")})`}function Z(r){let o=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);o=(o<<5)-o+t,o&=o;}return Math.abs(o)}function $e(r,o,e){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${e} ${n}deg 360deg)`}function _(r){let o=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=Z(r)%o.length;return o[e]}var ve=[["#f4a261","#e76f51","#d4a5a5"],["#f2a9b0","#e07a5f","#d4c4a8"],["#c9b1d0","#e8a0bf","#f0d1ce"],["#89c2d9","#a3c4bc","#d5c6e0"],["#f7c59f","#f2a07b","#efcfe3"],["#b5a7d5","#d4a5c9","#f0c3d7"],["#7ec8c8","#6a9fb5","#c2b5d6"],["#f0b3ba","#d4a5c9","#c9d1d9"],["#e8b960","#d4956a","#c9a5b8"],["#a7c4a0","#c9d4a5","#e0c9b1"],["#c4819b","#d9a5b8","#b5aed4"],["#f0c27f","#e0a87c","#d4b5c9"]];function Ie(r){let o=Z(r),e=ve[o%ve.length],t=Z(r+"pos1"),n=Z(r+"pos2"),i=20+o%61,p=20+(o>>4)%61,c=20+t%61,d=20+(t>>4)%61,l=20+n%61,f=20+(n>>4)%61;return [`radial-gradient(circle at ${i}% ${p}%, ${e[0]} 0%, transparent 70%)`,`radial-gradient(circle at ${c}% ${d}%, ${e[1]} 0%, transparent 70%)`,`radial-gradient(circle at ${l}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function Ee(r){return typeof r=="number"?r:N[r]??N[D.size]}function pe(r,o,e){let t=e?o-1:o;if(r<=t)return {visible:r,hidden:0,showCounter:false};let n=t-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function ee(r,o,e,t,n){let i=n??o*(1-e);return r*i}function ze(r,o,e){return e==="ltr"?o-r:r+1}function De(r,o,e,t){if(r===0)return 0;if(r===1)return o;let n=t??o*(1-e);return o+n*(r-1)}function Me(r){return r>99?"+99":`+${r}`}function Re(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function Te(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function Ae(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Pe(r,o){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:o,borderStyle:"solid"}}}function Ue(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function Le(r){return {boxShadow:xe[r]}}var Ze={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -242,7 +242,7 @@ import Ne,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,
|
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
244
|
`,Be=`${Qe}
|
|
245
|
-
${_e}`,
|
|
245
|
+
${_e}`,Ge=`
|
|
246
246
|
@keyframes np-shimmer {
|
|
247
247
|
0% { background-position: -200% 0; }
|
|
248
248
|
100% { background-position: 200% 0; }
|
|
@@ -252,7 +252,7 @@ ${_e}`,Oe=`
|
|
|
252
252
|
background-size: 200% 100%;
|
|
253
253
|
animation: np-shimmer 1.5s infinite;
|
|
254
254
|
}
|
|
255
|
-
`;function
|
|
255
|
+
`;function Oe(r,o=.3){if(we(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),n=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${n}, ${o})`}return `0 0 20px 0 ${r}`}var et=`
|
|
256
256
|
@keyframes ppg-tooltip-in {
|
|
257
257
|
from {
|
|
258
258
|
opacity: 0;
|
|
@@ -749,10 +749,10 @@ ${_e}`,Oe=`
|
|
|
749
749
|
}
|
|
750
750
|
}
|
|
751
751
|
`,Fe=`${et}
|
|
752
|
-
${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=$.size;this.variant=$.variant;this.shadow=$.shadow;this.border=false;this.borderWidth=$.borderWidth;this.borderColor=$.borderColor;this.rotation=0;this.zoom=$.zoom;this.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Be,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.interactive?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.interactive?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&a.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=
|
|
753
|
-
${this.placeholder==="shimmer"?html`<style>${
|
|
752
|
+
${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=$.size;this.variant=$.variant;this.shadow=$.shadow;this.border=false;this.borderWidth=$.borderWidth;this.borderColor=$.borderColor;this.rotation=0;this.zoom=$.zoom;this.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Be,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.interactive?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.interactive?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&a.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=Re(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=Te(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Ue(this.bgColor,this.bgGradient),t=this.border?Pe(this.borderWidth,this.borderColor):null,n=Le(this.shadow),i={};if(this.glow){let c=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":c,boxShadow:Oe(c,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:M("pp-container",Ae(this.variant),t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:H[this.variant],...t?.style,...n,...i,cursor:this.interactive?.cursor??(p?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0},innerStyles:e.style??{},innerClasses:e.className}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
|
|
753
|
+
${this.placeholder==="shimmer"?html`<style>${Ge}</style>`:nothing}
|
|
754
754
|
<div
|
|
755
|
-
class=${
|
|
755
|
+
class=${M("np:absolute np:inset-0",e)}
|
|
756
756
|
style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
757
757
|
</div>
|
|
758
758
|
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=Ie(this.gradientSeed);return html`
|
|
@@ -763,13 +763,13 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
763
763
|
`}if(this.fallback)return html`
|
|
764
764
|
<span
|
|
765
765
|
class="pp-fallback"
|
|
766
|
-
style=${styleMap({fontSize:`${
|
|
766
|
+
style=${styleMap({fontSize:`${de(this.pixelSize)}px`})}>
|
|
767
767
|
${this.fallback}
|
|
768
768
|
</span>
|
|
769
769
|
`;if(this.alt){let n=_(this.alt);return html`
|
|
770
770
|
<div
|
|
771
771
|
class="pp-fallback np:absolute np:inset-0"
|
|
772
|
-
style=${styleMap({background:e?"transparent":n,fontSize:`${
|
|
772
|
+
style=${styleMap({background:e?"transparent":n,fontSize:`${de(this.pixelSize)}px`})}>
|
|
773
773
|
${Q(this.alt)}
|
|
774
774
|
</div>
|
|
775
775
|
`}let t=this.pixelSize*.5;return html`
|
|
@@ -788,25 +788,25 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
788
788
|
decoding="async"
|
|
789
789
|
@load=${this.handleLoad}
|
|
790
790
|
@error=${this.handleError}
|
|
791
|
-
class=${
|
|
791
|
+
class=${M("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
792
792
|
style=${n}
|
|
793
793
|
draggable="false" />
|
|
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
|
|
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 c=this.ring.progress??0,d=this.ring.color??"#30D158",l=this.ring.emptyColor??"#8E8E93";i=$e(c,d,l);}else this.ring.gradient&&this.ring.gradient.length>0?i=Se(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
|
|
795
795
|
<div
|
|
796
|
-
class=${
|
|
796
|
+
class=${M("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
|
|
797
797
|
style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:H[this.variant]})}>
|
|
798
798
|
</div>
|
|
799
799
|
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,t=Ce(this.pixelSize,e),n=be[this.presence.status],p=this.getCornerOffset()-t/2;return html`
|
|
800
800
|
<div
|
|
801
|
-
class=${
|
|
801
|
+
class=${M("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
802
802
|
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
|
|
803
803
|
title=${this.presence.status}>
|
|
804
804
|
</div>
|
|
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:
|
|
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:c}=ye(this.pixelSize,i),d=this.badge.bgColor??"#22c55e",l=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",h=t&&this.badge.content!==void 0?ke(this.badge.content,this.badge.max):null,k=n?this.badge.icon:null,A=c*.9,m=`${this.getCornerOffset()-p/2}px`,T={"top-left":{top:m,left:m},"top-center":{top:m,left:"50%",transform:"translateX(-50%)"},"top-right":{top:m,right:m},"bottom-left":{bottom:m,left:m},"bottom-center":{bottom:m,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:m,right:m}};return html`
|
|
806
806
|
<div
|
|
807
|
-
class=${
|
|
808
|
-
style=${styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${
|
|
809
|
-
${
|
|
807
|
+
class=${M("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:`${c}px`,backgroundColor:d,color:l,borderRadius:f,"--pp-badge-glow-color":d,gap:n&&t?"4px":"0",...T[e]})}>
|
|
809
|
+
${k?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${A}px`})}>${k}</span>`:nothing}
|
|
810
810
|
${h??nothing}
|
|
811
811
|
</div>
|
|
812
812
|
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
|
|
@@ -825,7 +825,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
825
825
|
|
|
826
826
|
<!-- Inner container for image clipping -->
|
|
827
827
|
<div
|
|
828
|
-
class=${
|
|
828
|
+
class=${M("pp-inner",e.innerClasses)}
|
|
829
829
|
style=${styleMap({borderRadius:H[this.variant],...e.innerStyles})}>
|
|
830
830
|
<!-- Placeholder -->
|
|
831
831
|
${this.renderPlaceholder()}
|
|
@@ -840,7 +840,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
840
840
|
<!-- Presence Indicator -->
|
|
841
841
|
${this.renderPresence()}
|
|
842
842
|
</div>
|
|
843
|
-
`}};s([property({type:String})],a.prototype,"src"),s([property({type:String})],a.prototype,"alt"),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([property({type:String})],a.prototype,"size"),s([property({type:String})],a.prototype,"variant"),s([property({type:String})],a.prototype,"shadow"),s([property({type:Boolean})],a.prototype,"border"),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([property({type:Number})],a.prototype,"rotation"),s([property({type:Number})],a.prototype,"zoom"),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"ring"),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"presence"),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"glow"),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"badge"),s([property({type:String})],a.prototype,"loading"),s([property({type:String})],a.prototype,"placeholder"),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([property({type:String})],a.prototype,"fallback"),s([property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"interactive"),s([state()],a.prototype,"isLoaded"),s([state()],a.prototype,"hasError"),s([state()],a.prototype,"cdnImageUrl"),s([state()],a.prototype,"cdnLoadFailed");var j=a;customElements.get("profile-picture")||customElements.define("profile-picture",j);var ue=false;function ot(){if(ue||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(ue)return;let o=document.createElement("style");o.textContent=Fe,document.head.appendChild(o),ue=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=D.max;this.direction=D.direction;this.overlap=D.overlap;this.size=D.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=D.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return ot(),this}get pixelSize(){return Ee(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??D.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??D.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,n)=>{let i=(
|
|
843
|
+
`}};s([property({type:String})],a.prototype,"src"),s([property({type:String})],a.prototype,"alt"),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([property({type:String})],a.prototype,"size"),s([property({type:String})],a.prototype,"variant"),s([property({type:String})],a.prototype,"shadow"),s([property({type:Boolean})],a.prototype,"border"),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([property({type:Number})],a.prototype,"rotation"),s([property({type:Number})],a.prototype,"zoom"),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"ring"),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"presence"),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"glow"),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"badge"),s([property({type:String})],a.prototype,"loading"),s([property({type:String})],a.prototype,"placeholder"),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([property({type:String})],a.prototype,"fallback"),s([property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"interactive"),s([state()],a.prototype,"isLoaded"),s([state()],a.prototype,"hasError"),s([state()],a.prototype,"cdnImageUrl"),s([state()],a.prototype,"cdnLoadFailed");var j=a;customElements.get("profile-picture")||customElements.define("profile-picture",j);var ue=false;function ot(){if(ue||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(ue)return;let o=document.createElement("style");o.textContent=Fe,document.head.appendChild(o),ue=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=D.max;this.direction=D.direction;this.overlap=D.overlap;this.size=D.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=D.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return ot(),this}get pixelSize(){return Ee(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??D.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??D.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient","image-mode","zoom","loading","placeholder","placeholder-color","fallback","fallback-mode","glow","ring","badge","interactive"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,n)=>{let i=(d,l)=>{let f=l??d,h=t[d];return h!=null&&h!==""?String(h):t.getAttribute(f)??void 0},p=i("borderWidth","border-width"),c=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:c,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient"),imageMode:i("imageMode","image-mode"),zoom:(()=>{let d=i("zoom");return d?Number(d):void 0})(),loading:i("loading"),placeholder:i("placeholder"),placeholderColor:i("placeholderColor","placeholder-color"),fallback:i("fallback"),fallbackMode:i("fallbackMode","fallback-mode"),glow:(()=>{let d=t.glow;if(d&&typeof d=="object")return d;let l=t.getAttribute("glow");if(l)try{return JSON.parse(l)}catch{}})(),ring:(()=>{let d=t.ring;if(d&&typeof d=="object")return d;let l=t.getAttribute("ring");if(l)try{return JSON.parse(l)}catch{}})(),badge:(()=>{let d=t.badge;if(d&&typeof d=="object")return d;let l=t.getAttribute("badge");if(l)try{return JSON.parse(l)}catch{}})(),interactive:(()=>{let d=t.interactive;if(d&&typeof d=="object")return d;let l=t.getAttribute("interactive");if(l)try{return JSON.parse(l)}catch{}})()}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(render(nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),n=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),c=window.innerWidth,d=window.innerHeight;if(c<480){let S=html`
|
|
844
844
|
<div
|
|
845
845
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
846
846
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -864,7 +864,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
864
864
|
${e.map(W=>this.renderDropdownItem(W))}
|
|
865
865
|
</div>
|
|
866
866
|
</div>
|
|
867
|
-
`;render(
|
|
867
|
+
`;render(S,this.portalContainer);return}let f=d-t.bottom-n,h=t.top-n,k=c-t.left,A=t.right,x=this.dropdownPosition;x==="bottom"&&f<p&&h>f?x="top":x==="top"&&h<p&&f>h&&(x="bottom");let v;k>=i?v=t.left:A>=i?v=t.right-i:v=(c-i)/2,v=Math.max(8,Math.min(v,c-i-8));let m=x==="bottom"?t.bottom+n:void 0,T=x==="top"?d-t.top+n:void 0,V=html`
|
|
868
868
|
<div
|
|
869
869
|
class="ppg-backdrop"
|
|
870
870
|
style="pointer-events: auto;"
|
|
@@ -873,7 +873,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
873
873
|
></div>
|
|
874
874
|
<div
|
|
875
875
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
876
|
-
style=${styleMap({position:"fixed",pointerEvents:"auto",top:m!==void 0?`${m}px`:"auto",bottom:
|
|
876
|
+
style=${styleMap({position:"fixed",pointerEvents:"auto",top:m!==void 0?`${m}px`:"auto",bottom:T!==void 0?`${T}px`:"auto",left:`${v}px`,width:`${i}px`})}
|
|
877
877
|
data-position=${x}
|
|
878
878
|
role="menu"
|
|
879
879
|
aria-label="Hidden users"
|
|
@@ -885,10 +885,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
885
885
|
class="ppg-dropdown-list"
|
|
886
886
|
style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
887
887
|
>
|
|
888
|
-
${e.map(
|
|
888
|
+
${e.map(S=>this.renderDropdownItem(S))}
|
|
889
889
|
</div>
|
|
890
890
|
</div>
|
|
891
|
-
`;render(V,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,n){let i=ee(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=ze(t,n,this.direction),
|
|
891
|
+
`;render(V,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,n){let i=ee(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=ze(t,n,this.direction),c=e.variant??"circle",d=e.shadow??"none",l=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
|
|
892
892
|
<div
|
|
893
893
|
class="ppg-avatar-wrapper"
|
|
894
894
|
style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
@@ -900,7 +900,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
900
900
|
@mouseleave=${this.handleAvatarLeave}
|
|
901
901
|
@keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(e))}
|
|
902
902
|
>
|
|
903
|
-
${this.renderProfilePicture(e,d,
|
|
903
|
+
${this.renderProfilePicture(e,c,d,l)}
|
|
904
904
|
</div>
|
|
905
905
|
`}renderProfilePicture(e,t,n,i){return html`
|
|
906
906
|
<profile-picture
|
|
@@ -916,6 +916,17 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
916
916
|
.borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
|
|
917
917
|
.bgColor=${e.bgGradient?void 0:e.bgColor||void 0}
|
|
918
918
|
.bgGradient=${e.bgGradient??void 0}
|
|
919
|
+
.imageMode=${e.imageMode??"original"}
|
|
920
|
+
.zoom=${e.zoom??void 0}
|
|
921
|
+
.loading=${e.loading??void 0}
|
|
922
|
+
.placeholder=${e.placeholder??void 0}
|
|
923
|
+
.placeholderColor=${e.placeholderColor??void 0}
|
|
924
|
+
.fallback=${e.fallback??void 0}
|
|
925
|
+
.fallbackMode=${e.fallbackMode??void 0}
|
|
926
|
+
.glow=${e.glow??void 0}
|
|
927
|
+
.ring=${e.ring??void 0}
|
|
928
|
+
.badge=${e.badge??void 0}
|
|
929
|
+
.interactive=${e.interactive??void 0}
|
|
919
930
|
data-user-id=${e.id??""}
|
|
920
931
|
data-status=${e.status??""}
|
|
921
932
|
></profile-picture>
|
|
@@ -928,7 +939,7 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
928
939
|
aria-haspopup="true"
|
|
929
940
|
@click=${()=>this.handleCounterClick(n)}
|
|
930
941
|
>
|
|
931
|
-
${
|
|
942
|
+
${Me(e)}
|
|
932
943
|
</button>
|
|
933
944
|
`}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
|
|
934
945
|
<button
|
|
@@ -952,10 +963,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
952
963
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
953
964
|
</svg>
|
|
954
965
|
</button>
|
|
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,
|
|
966
|
+
`}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,c=t.top-i.top,d=t.bottom-i.top,l=this.tooltipPosition==="top";return html`
|
|
956
967
|
<div
|
|
957
968
|
class="ppg-tooltip"
|
|
958
|
-
style=${styleMap({top:
|
|
969
|
+
style=${styleMap({top:l?"auto":`${d+n}px`,bottom:l?`${i.height-c+n}px`:"auto",left:`${p}px`})}
|
|
959
970
|
data-position=${this.tooltipPosition}
|
|
960
971
|
role="tooltip"
|
|
961
972
|
>
|
|
@@ -996,10 +1007,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
996
1007
|
`:nothing}
|
|
997
1008
|
</div>
|
|
998
1009
|
</div>
|
|
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}=
|
|
1010
|
+
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:n}=pe(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=pe(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),c=e;n&&c++,this.showAddButton&&c++;let d=De(c,this.pixelSize,this.overlap,this.spacing),l=n?ee(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=ee(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
|
|
1000
1011
|
<div
|
|
1001
|
-
class=${
|
|
1002
|
-
style=${styleMap({width:`${
|
|
1012
|
+
class=${M("ppg-container",this.animated&&"ppg-animated")}
|
|
1013
|
+
style=${styleMap({width:`${d}px`,height:`${this.pixelSize}px`})}
|
|
1003
1014
|
role="group"
|
|
1004
1015
|
aria-label="User avatars"
|
|
1005
1016
|
>
|
|
@@ -1007,10 +1018,10 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1007
1018
|
<slot style="display: none;"></slot>
|
|
1008
1019
|
|
|
1009
1020
|
<!-- Visible avatars -->
|
|
1010
|
-
${i.map((h,
|
|
1021
|
+
${i.map((h,k)=>this.renderAvatar(h,k,e))}
|
|
1011
1022
|
|
|
1012
1023
|
<!-- Counter -->
|
|
1013
|
-
${n?this.renderCounter(t,
|
|
1024
|
+
${n?this.renderCounter(t,l,p):nothing}
|
|
1014
1025
|
|
|
1015
1026
|
<!-- Add button -->
|
|
1016
1027
|
${this.showAddButton?this.renderAddButton(f):nothing}
|
|
@@ -1018,5 +1029,5 @@ ${tt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1018
1029
|
<!-- Tooltip -->
|
|
1019
1030
|
${this.renderTooltip()}
|
|
1020
1031
|
</div>
|
|
1021
|
-
`}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);function st(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var He=Ne.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:p,showAddButton:
|
|
1032
|
+
`}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);function st(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var He=Ne.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:p,showAddButton:c,addButtonLabel:d,animated:l,rotationAmount:f,onAvatarClick:h,onAvatarHover:k,onCounterClick:A,onDropdownItemClick:x,onAddClick:v,className:m,style:T,children:V},S)=>{let W=st(),U=useRef(null),J=useCallback(g=>{h?.(g.detail.user);},[h]),L=useCallback(g=>{k?.(g.detail.user);},[k]),B=useCallback(g=>{let P=g;A?.(P.detail.hiddenUsers,P.detail.open);},[A]),G=useCallback(g=>{x?.(g.detail.user);},[x]),O=useCallback(()=>{v?.();},[v]);return useEffect(()=>{let g=U.current;if(g)return g.addEventListener("avatar-click",J),g.addEventListener("avatar-hover",L),g.addEventListener("counter-click",B),g.addEventListener("dropdown-item-click",G),g.addEventListener("add-click",O),()=>{g.removeEventListener("avatar-click",J),g.removeEventListener("avatar-hover",L),g.removeEventListener("counter-click",B),g.removeEventListener("dropdown-item-click",G),g.removeEventListener("add-click",O);}},[J,L,B,G,O]),useEffect(()=>{typeof S=="function"?S(U.current):S&&(S.current=U.current);},[S]),W?Ne.createElement("profile-picture-group",{ref:U,max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i?JSON.stringify(i):void 0,dropdown:p?JSON.stringify(p):void 0,"show-add-button":c||void 0,"add-button-label":d,animated:l,"rotation-amount":f,class:m,style:T},V):null});He.displayName="ProfilePictureGroup";function ct(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function jt(r){j.setCdnBaseUrl(r);}function Vt(){return j.getCdnBaseUrl()}function ut({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:p,border:c,borderWidth:d,borderColor:l,rotation:f,zoom:h,bgColor:k,bgGradient:A,glow:x,ring:v,presence:m,badge:T,loading:V,placeholder:S,placeholderColor:W,fallback:U,fallbackMode:J,interactive:L,onLoad:B,onError:G,onCdnError:O,onClick:g,className:P,style:je,ref:q}){let Ve=ct(),X=useRef(null),ne=useCallback(()=>{B?.();},[B]),oe=useCallback(()=>{G?.();},[G]),ie=useCallback(w=>{O?.(w.detail);},[O]),ae=useCallback(w=>{g?.(w.detail);},[g]);return useEffect(()=>{let w=X.current;if(w)return w.addEventListener("load",ne),w.addEventListener("error",oe),w.addEventListener("cdn-error",ie),w.addEventListener("profile-picture-click",ae),()=>{w.removeEventListener("load",ne),w.removeEventListener("error",oe),w.removeEventListener("cdn-error",ie),w.removeEventListener("profile-picture-click",ae);}},[ne,oe,ie,ae]),useEffect(()=>{typeof q=="function"?q(X.current):q&&(q.current=X.current);},[q]),Ve?Ne.createElement("profile-picture",{ref:X,src:r||void 0,alt:o,"ext-customer-id":e,"image-mode":t,size:n,variant:i,shadow:p,border:c||void 0,"border-width":d,"border-color":l,rotation:f,zoom:h,"bg-color":k,"bg-gradient":A,glow:x?JSON.stringify(x):void 0,ring:v?JSON.stringify(v):void 0,presence:m?JSON.stringify(m):void 0,badge:T?JSON.stringify(T):void 0,loading:V,placeholder:S,"placeholder-color":W,fallback:U,"fallback-mode":J,interactive:L?JSON.stringify(L):void 0,class:P,style:je}):null}ut.displayName="ProfilePicture";he();export{ut as ProfilePicture,He as ProfilePictureGroup,Vt as getCdnBaseUrl,jt as setCdnBaseUrl};//# sourceMappingURL=react.js.map
|
|
1022
1033
|
//# sourceMappingURL=react.js.map
|