@grasco/profile-picture 0.2.3 → 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 +47 -37
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +20 -0
- package/dist/angular.d.ts +20 -0
- package/dist/angular.js +47 -37
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +33 -23
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.js +33 -23
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +42 -32
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +20 -0
- package/dist/react.d.ts +20 -0
- package/dist/react.js +42 -32
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +21 -0
- package/dist/standalone.standalone.js +101 -91
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/svelte.cjs +47 -37
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +20 -0
- package/dist/svelte.d.ts +20 -0
- package/dist/svelte.js +47 -37
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +47 -37
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +20 -0
- package/dist/vue.d.ts +20 -0
- package/dist/vue.js +47 -37
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -178,6 +178,26 @@ interface GroupUserData {
|
|
|
178
178
|
bgGradient?: string;
|
|
179
179
|
/** CDN image mode */
|
|
180
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;
|
|
181
201
|
}
|
|
182
202
|
/** Dropdown configuration for overflow users */
|
|
183
203
|
interface DropdownConfig {
|
package/dist/index.d.ts
CHANGED
|
@@ -178,6 +178,26 @@ interface GroupUserData {
|
|
|
178
178
|
bgGradient?: string;
|
|
179
179
|
/** CDN image mode */
|
|
180
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;
|
|
181
201
|
}
|
|
182
202
|
/** Dropdown configuration for overflow users */
|
|
183
203
|
interface DropdownConfig {
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import He,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var
|
|
1
|
+
import He,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var qe=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,d;i>=0;i--)(d=r[i])&&(n=(d(o,e,n))||n);return n&&qe(o,e,n),n};var se="grasco-profile-picture-styles",F=false,xe=false;function ve(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){F=true;return}xe||(xe=true,Ke());}function Ke(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Xe());}function Xe(){if(F||typeof document>"u")return;if(document.getElementById(se)){F=true;return}let r=Ze();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),F=true;}function Ze(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=import.meta.url;if(o)return `${o.substring(0,o.lastIndexOf("/")+1)}styles.css`}catch{}let r=document.currentScript;if(r?.src){let o=new URL(r.src);return `${o.href.substring(0,o.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var N={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},we={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},ye={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},$={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},z={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function D(...r){return r.filter(Boolean).join(" ")}function ke(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function Q(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function pe(r){return Math.round(r*.38)}function Se(r,o){let e;if(o){let n=Math.round(r*.31);e=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);e=Math.min(14,Math.max(8,n));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function $e(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function Ie(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function Ee(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let n=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${n}deg ${i}deg`}).join(", ")})`}function Z(r){let o=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);o=(o<<5)-o+t,o&=o;}return Math.abs(o)}function Pe(r,o,e){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${e} ${n}deg 360deg)`}function _(r){let o=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=Z(r)%o.length;return o[e]}var Ce=[["#f4a261","#e76f51","#d4a5a5"],["#f2a9b0","#e07a5f","#d4c4a8"],["#c9b1d0","#e8a0bf","#f0d1ce"],["#89c2d9","#a3c4bc","#d5c6e0"],["#f7c59f","#f2a07b","#efcfe3"],["#b5a7d5","#d4a5c9","#f0c3d7"],["#7ec8c8","#6a9fb5","#c2b5d6"],["#f0b3ba","#d4a5c9","#c9d1d9"],["#e8b960","#d4956a","#c9a5b8"],["#a7c4a0","#c9d4a5","#e0c9b1"],["#c4819b","#d9a5b8","#b5aed4"],["#f0c27f","#e0a87c","#d4b5c9"]];function ze(r){let o=Z(r),e=Ce[o%Ce.length],t=Z(r+"pos1"),n=Z(r+"pos2"),i=20+o%61,d=20+(o>>4)%61,c=20+t%61,p=20+(t>>4)%61,l=20+n%61,f=20+(n>>4)%61;return [`radial-gradient(circle at ${i}% ${d}%, ${e[0]} 0%, transparent 70%)`,`radial-gradient(circle at ${c}% ${p}%, ${e[1]} 0%, transparent 70%)`,`radial-gradient(circle at ${l}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function De(r){return typeof r=="number"?r:N[r]??N[z.size]}function de(r,o,e){let t=e?o-1:o;if(r<=t)return {visible:r,hidden:0,showCounter:false};let n=t-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function ee(r,o,e,t,n){let i=n??o*(1-e);return r*i}function Me(r,o,e){return e==="ltr"?o-r:r+1}function Te(r,o,e,t){if(r===0)return 0;if(r===1)return o;let n=t??o*(1-e);return o+n*(r-1)}function Re(r){return r>99?"+99":`+${r}`}function le(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function ce(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,d=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${d}?hostname=${n}`}function Ue(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ae(r,o){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:o,borderStyle:"solid"}}}function Le(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function Be(r){return {boxShadow:ye[r]}}var Qe={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -252,7 +252,7 @@ ${et}`,Oe=`
|
|
|
252
252
|
background-size: 200% 100%;
|
|
253
253
|
animation: np-shimmer 1.5s infinite;
|
|
254
254
|
}
|
|
255
|
-
`;function Fe(r,o=.3){if(
|
|
255
|
+
`;function Fe(r,o=.3){if(ke(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),n=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${n}, ${o})`}return `0 0 20px 0 ${r}`}var tt=`
|
|
256
256
|
@keyframes ppg-tooltip-in {
|
|
257
257
|
from {
|
|
258
258
|
opacity: 0;
|
|
@@ -749,7 +749,7 @@ ${et}`,Oe=`
|
|
|
749
749
|
}
|
|
750
750
|
}
|
|
751
751
|
`,Ne=`${tt}
|
|
752
|
-
${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=$.size;this.variant=$.variant;this.shadow=$.shadow;this.border=false;this.borderWidth=$.borderWidth;this.borderColor=$.borderColor;this.rotation=0;this.zoom=$.zoom;this.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Ge,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.interactive?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.interactive?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&a.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=le(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ce(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=
|
|
752
|
+
${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=$.size;this.variant=$.variant;this.shadow=$.shadow;this.border=false;this.borderWidth=$.borderWidth;this.borderColor=$.borderColor;this.rotation=0;this.zoom=$.zoom;this.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Ge,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.interactive?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.interactive?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&a.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=le(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ce(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Le(this.bgColor,this.bgGradient),t=this.border?Ae(this.borderWidth,this.borderColor):null,n=Be(this.shadow),i={};if(this.glow){let c=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":c,boxShadow:Fe(c,this.glow.intensity??.3)};}let d=this.interactive?.hoverable||this.interactive?.pressable;return {classes:D("pp-container",Ue(this.variant),t?.className,d&&"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??(d?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0},innerStyles:e.style??{},innerClasses:e.className}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
|
|
753
753
|
${this.placeholder==="shimmer"?html`<style>${Oe}</style>`:nothing}
|
|
754
754
|
<div
|
|
755
755
|
class=${D("np:absolute np:inset-0",e)}
|
|
@@ -791,22 +791,22 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
791
791
|
class=${D("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,
|
|
794
|
+
`}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,t=this.ring.gap??3,n=e+t,i,d=this.ring.progress!==void 0;if(d){let c=this.ring.progress??0,p=this.ring.color??"#30D158",l=this.ring.emptyColor??"#8E8E93";i=Pe(c,p,l);}else this.ring.gradient&&this.ring.gradient.length>0?i=Ee(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
|
|
795
795
|
<div
|
|
796
|
-
class=${D("pp-ring",this.ring.animate&&!
|
|
796
|
+
class=${D("pp-ring",this.ring.animate&&!d&&"pp-ring-animated",d&&"pp-ring-progress")}
|
|
797
797
|
style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:H[this.variant]})}>
|
|
798
798
|
</div>
|
|
799
|
-
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,t=$e(this.pixelSize,e),n=
|
|
799
|
+
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,t=$e(this.pixelSize,e),n=we[this.presence.status],d=this.getCornerOffset()-t/2;return html`
|
|
800
800
|
<div
|
|
801
801
|
class=${D("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
802
|
-
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${
|
|
802
|
+
style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${d}px`,right:`${d}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:
|
|
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:d,fontSize:c}=Se(this.pixelSize,i),p=this.badge.bgColor??"#22c55e",l=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",h=t&&this.badge.content!==void 0?Ie(this.badge.content,this.badge.max):null,k=n?this.badge.icon:null,R=c*.9,m=`${this.getCornerOffset()-d/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
807
|
class=${D("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
|
|
808
|
-
style=${styleMap({width:i?"auto":`${
|
|
809
|
-
${
|
|
808
|
+
style=${styleMap({width:i?"auto":`${d}px`,minWidth:`${d}px`,height:`${d}px`,padding:i?"0 6px":"0",fontSize:`${c}px`,backgroundColor:p,color:l,borderRadius:f,"--pp-badge-glow-color":p,gap:n&&t?"4px":"0",...T[e]})}>
|
|
809
|
+
${k?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${R}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`
|
|
@@ -840,7 +840,7 @@ ${rt}`;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 fe=false;function it(){if(fe||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(fe)return;let o=document.createElement("style");o.textContent=Ne,document.head.appendChild(o),fe=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=z.max;this.direction=z.direction;this.overlap=z.overlap;this.size=z.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=z.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return it(),this}get pixelSize(){return De(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??z.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??z.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient","image-mode"]});}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 fe=false;function it(){if(fe||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(fe)return;let o=document.createElement("style");o.textContent=Ne,document.head.appendChild(o),fe=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=z.max;this.direction=z.direction;this.overlap=z.overlap;this.size=z.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=z.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return it(),this}get pixelSize(){return De(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??z.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??z.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient","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=(p,l)=>{let f=l??p,h=t[p];return h!=null&&h!==""?String(h):t.getAttribute(f)??void 0},d=i("borderWidth","border-width"),c=d?Number.parseInt(String(d),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 p=i("zoom");return p?Number(p):void 0})(),loading:i("loading"),placeholder:i("placeholder"),placeholderColor:i("placeholderColor","placeholder-color"),fallback:i("fallback"),fallbackMode:i("fallbackMode","fallback-mode"),glow:(()=>{let p=t.glow;if(p&&typeof p=="object")return p;let l=t.getAttribute("glow");if(l)try{return JSON.parse(l)}catch{}})(),ring:(()=>{let p=t.ring;if(p&&typeof p=="object")return p;let l=t.getAttribute("ring");if(l)try{return JSON.parse(l)}catch{}})(),badge:(()=>{let p=t.badge;if(p&&typeof p=="object")return p;let l=t.getAttribute("badge");if(l)try{return JSON.parse(l)}catch{}})(),interactive:(()=>{let p=t.interactive;if(p&&typeof p=="object")return p;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,d=Math.min(this.dropdownMaxHeight+60,e.length*56+60),c=window.innerWidth,p=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 @@ ${rt}`;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=p-t.bottom-n,h=t.top-n,k=c-t.left,R=t.right,x=this.dropdownPosition;x==="bottom"&&f<d&&h>f?x="top":x==="top"&&h<d&&f>h&&(x="bottom");let v;k>=i?v=t.left:R>=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"?p-t.top+n:void 0,V=html`
|
|
868
868
|
<div
|
|
869
869
|
class="ppg-backdrop"
|
|
870
870
|
style="pointer-events: auto;"
|
|
@@ -885,13 +885,13 @@ ${rt}`;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),
|
|
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),d=Me(t,n,this.direction),c=e.variant??"circle",p=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
|
-
style=${styleMap({left:`${i}px`,zIndex:String(
|
|
894
|
+
style=${styleMap({left:`${i}px`,zIndex:String(d),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
895
895
|
tabindex="0"
|
|
896
896
|
role="button"
|
|
897
897
|
aria-label=${e.name}
|
|
@@ -900,7 +900,7 @@ ${rt}`;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,
|
|
903
|
+
${this.renderProfilePicture(e,c,p,l)}
|
|
904
904
|
</div>
|
|
905
905
|
`}renderProfilePicture(e,t,n,i){return html`
|
|
906
906
|
<profile-picture
|
|
@@ -917,6 +917,16 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
917
917
|
.bgColor=${e.bgGradient?void 0:e.bgColor||void 0}
|
|
918
918
|
.bgGradient=${e.bgGradient??void 0}
|
|
919
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}
|
|
920
930
|
data-user-id=${e.id??""}
|
|
921
931
|
data-status=${e.status??""}
|
|
922
932
|
></profile-picture>
|
|
@@ -953,10 +963,10 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
953
963
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
954
964
|
</svg>
|
|
955
965
|
</button>
|
|
956
|
-
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),
|
|
966
|
+
`}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),d=t.left-i.left+t.width/2,c=t.top-i.top,p=t.bottom-i.top,l=this.tooltipPosition==="top";return html`
|
|
957
967
|
<div
|
|
958
968
|
class="ppg-tooltip"
|
|
959
|
-
style=${styleMap({top:
|
|
969
|
+
style=${styleMap({top:l?"auto":`${p+n}px`,bottom:l?`${i.height-c+n}px`:"auto",left:`${d}px`})}
|
|
960
970
|
data-position=${this.tooltipPosition}
|
|
961
971
|
role="tooltip"
|
|
962
972
|
>
|
|
@@ -997,10 +1007,10 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
997
1007
|
`:nothing}
|
|
998
1008
|
</div>
|
|
999
1009
|
</div>
|
|
1000
|
-
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:n}=de(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=de(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),
|
|
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}=de(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=de(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),d=this.users.slice(e),c=e;n&&c++,this.showAddButton&&c++;let p=Te(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`
|
|
1001
1011
|
<div
|
|
1002
1012
|
class=${D("ppg-container",this.animated&&"ppg-animated")}
|
|
1003
|
-
style=${styleMap({width:`${
|
|
1013
|
+
style=${styleMap({width:`${p}px`,height:`${this.pixelSize}px`})}
|
|
1004
1014
|
role="group"
|
|
1005
1015
|
aria-label="User avatars"
|
|
1006
1016
|
>
|
|
@@ -1008,10 +1018,10 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1008
1018
|
<slot style="display: none;"></slot>
|
|
1009
1019
|
|
|
1010
1020
|
<!-- Visible avatars -->
|
|
1011
|
-
${i.map((h,
|
|
1021
|
+
${i.map((h,k)=>this.renderAvatar(h,k,e))}
|
|
1012
1022
|
|
|
1013
1023
|
<!-- Counter -->
|
|
1014
|
-
${n?this.renderCounter(t,
|
|
1024
|
+
${n?this.renderCounter(t,l,d):nothing}
|
|
1015
1025
|
|
|
1016
1026
|
<!-- Add button -->
|
|
1017
1027
|
${this.showAddButton?this.renderAddButton(f):nothing}
|
|
@@ -1019,5 +1029,5 @@ ${rt}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
|
|
|
1019
1029
|
<!-- Tooltip -->
|
|
1020
1030
|
${this.renderTooltip()}
|
|
1021
1031
|
</div>
|
|
1022
|
-
`}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);function pt(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var he=He.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:
|
|
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 pt(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var he=He.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:d,showAddButton:c,addButtonLabel:p,animated:l,rotationAmount:f,onAvatarClick:h,onAvatarHover:k,onCounterClick:R,onDropdownItemClick:x,onAddClick:v,className:m,style:T,children:V},S)=>{let W=pt(),A=useRef(null),J=useCallback(g=>{h?.(g.detail.user);},[h]),L=useCallback(g=>{k?.(g.detail.user);},[k]),B=useCallback(g=>{let U=g;R?.(U.detail.hiddenUsers,U.detail.open);},[R]),G=useCallback(g=>{x?.(g.detail.user);},[x]),O=useCallback(()=>{v?.();},[v]);return useEffect(()=>{let g=A.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(A.current):S&&(S.current=A.current);},[S]),W?He.createElement("profile-picture-group",{ref:A,max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i?JSON.stringify(i):void 0,dropdown:d?JSON.stringify(d):void 0,"show-add-button":c||void 0,"add-button-label":p,animated:l,"rotation-amount":f,class:m,style:T},V):null});he.displayName="ProfilePictureGroup";function ut(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function gt(r){j.setCdnBaseUrl(r);}function ft(){return j.getCdnBaseUrl()}function je({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:d,border:c,borderWidth:p,borderColor:l,rotation:f,zoom:h,bgColor:k,bgGradient:R,glow:x,ring:v,presence:m,badge:T,loading:V,placeholder:S,placeholderColor:W,fallback:A,fallbackMode:J,interactive:L,onLoad:B,onError:G,onCdnError:O,onClick:g,className:U,style:Ve,ref:q}){let We=ut(),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]),We?He.createElement("profile-picture",{ref:X,src:r||void 0,alt:o,"ext-customer-id":e,"image-mode":t,size:n,variant:i,shadow:d,border:c||void 0,"border-width":p,"border-color":l,rotation:f,zoom:h,"bg-color":k,"bg-gradient":R,glow:x?JSON.stringify(x):void 0,ring:v?JSON.stringify(v):void 0,presence:m?JSON.stringify(m):void 0,badge:T?JSON.stringify(T):void 0,loading:V,placeholder:S,"placeholder-color":W,fallback:A,"fallback-mode":J,interactive:L?JSON.stringify(L):void 0,class:U,style:Ve}):null}je.displayName="ProfilePicture";ve();export{je as ProfilePicture,he as ProfilePictureGroup,ce as constructCdnUrl,ft as getCdnBaseUrl,le as getCdnSizeLabel,gt as setCdnBaseUrl};//# sourceMappingURL=index.js.map
|
|
1023
1033
|
//# sourceMappingURL=index.js.map
|