@grasco/profile-picture 0.2.6 → 0.2.7
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 +144 -63
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +2 -0
- package/dist/angular.d.ts +2 -0
- package/dist/angular.js +144 -63
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +130 -49
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +130 -49
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +129 -48
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +2 -0
- package/dist/react.d.ts +2 -0
- package/dist/react.js +129 -48
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +2 -0
- package/dist/standalone.standalone.js +161 -80
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/svelte.cjs +144 -63
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +2 -0
- package/dist/svelte.d.ts +2 -0
- package/dist/svelte.js +144 -63
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +144 -63
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +2 -0
- package/dist/vue.d.ts +2 -0
- package/dist/vue.js +144 -63
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var je=require('react'),lit=require('lit'),decorators_js=require('lit/decorators.js'),styleMap_js=require('lit/directives/style-map.js');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var je__default=/*#__PURE__*/_interopDefault(je);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",H=false,xe=false;function ve(){if(H||typeof document>"u")return;if(document.getElementById(se)){H=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){H=true;return}xe||(xe=true,Ke());}function Ke(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Xe());}function Xe(){if(H||typeof document>"u")return;if(document.getElementById(se)){H=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),H=true;}function Ze(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href));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 V={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ye={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},we={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},I={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var W={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},T={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function R(...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=[["oklch(70% 0.18 30)","oklch(65% 0.20 350)","oklch(60% 0.22 280)"],["oklch(72% 0.16 15)","oklch(68% 0.19 45)","oklch(62% 0.15 280)"],["oklch(70% 0.15 310)","oklch(65% 0.18 280)","oklch(75% 0.12 340)"],["oklch(70% 0.14 220)","oklch(65% 0.18 200)","oklch(60% 0.20 280)"],["oklch(75% 0.16 70)","oklch(68% 0.20 40)","oklch(65% 0.14 320)"],["oklch(68% 0.18 280)","oklch(72% 0.15 310)","oklch(65% 0.20 340)"],["oklch(70% 0.15 175)","oklch(65% 0.18 200)","oklch(60% 0.20 260)"],["oklch(72% 0.14 350)","oklch(68% 0.16 310)","oklch(75% 0.10 220)"],["oklch(72% 0.18 85)","oklch(65% 0.20 55)","oklch(60% 0.16 310)"],["oklch(70% 0.14 155)","oklch(68% 0.16 130)","oklch(72% 0.12 80)"],["oklch(65% 0.20 340)","oklch(70% 0.16 310)","oklch(62% 0.18 270)"],["oklch(75% 0.18 90)","oklch(68% 0.16 60)","oklch(62% 0.14 310)"]],Qe="oklch(95% 0.02 264)";function Me(r,o){let e=Z(r),t=Ce[e%Ce.length],n=Z(r+"orb1"),i=Z(r+"orb2"),d=15+e%41,l=60+(e>>3)%21,p=35+n%31,c=65+(n>>3)%21,u=70+i%21,m=10+(i>>3)%31,w=Qe,D=o<50?Math.max(o*.008,1):Math.max(o*.015,4),h=o<50?Math.max(o*.004,1.2):Math.max(o*.008,1.5),b=o<50?Math.max(o*.004,.5):Math.max(o*.008,2),y;return o<30?y=1.1:o<50?y=Math.max(h*1.2,1.3):y=h,{"--pp-cloud-bg":w,"--pp-cloud-c1":t[0],"--pp-cloud-c2":t[1],"--pp-cloud-c3":t[2],"--pp-cloud-blur":`${D}px`,"--pp-cloud-contrast":`${y}`,"--pp-cloud-shadow":`${b}px`,"--pp-cloud-p1":`${d}% ${l}%`,"--pp-cloud-p2":`${p}% ${c}%`,"--pp-cloud-p3":`${u}% ${m}%`}}function De(r){return typeof r=="number"?r:V[r]??V[T.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 ze(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}/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:we[r]}}var _e={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -36,6 +36,15 @@
|
|
|
36
36
|
0% { transform: scale(0.8); opacity: 0; }
|
|
37
37
|
50% { transform: scale(1.05); }
|
|
38
38
|
100% { transform: scale(1); opacity: 1; }
|
|
39
|
+
}`,cloudRotate:`
|
|
40
|
+
@property --pp-cloud-angle {
|
|
41
|
+
syntax: "<angle>";
|
|
42
|
+
inherits: false;
|
|
43
|
+
initial-value: 0deg;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes pp-cloud-rotate {
|
|
47
|
+
to { --pp-cloud-angle: 360deg; }
|
|
39
48
|
}`},et=Object.values(_e).join(`
|
|
40
49
|
`),tt=`
|
|
41
50
|
/* Profile Picture Component Styles */
|
|
@@ -117,6 +126,77 @@
|
|
|
117
126
|
color: rgba(156, 163, 175, 0.8);
|
|
118
127
|
}
|
|
119
128
|
|
|
129
|
+
/* Cloudy orb background (animated conic gradients with blur + contrast) */
|
|
130
|
+
.pp-cloudy-bg {
|
|
131
|
+
display: grid;
|
|
132
|
+
grid-template-areas: "stack";
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
border-radius: inherit;
|
|
135
|
+
position: absolute;
|
|
136
|
+
inset: 0;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.pp-cloudy-bg::before,
|
|
140
|
+
.pp-cloudy-bg::after {
|
|
141
|
+
content: "";
|
|
142
|
+
display: block;
|
|
143
|
+
grid-area: stack;
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 100%;
|
|
146
|
+
border-radius: inherit;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.pp-cloudy-bg::before {
|
|
150
|
+
background:
|
|
151
|
+
conic-gradient(
|
|
152
|
+
from calc(var(--pp-cloud-angle) * 2) at var(--pp-cloud-p1),
|
|
153
|
+
var(--pp-cloud-c3),
|
|
154
|
+
transparent 20% 80%,
|
|
155
|
+
var(--pp-cloud-c3)
|
|
156
|
+
),
|
|
157
|
+
conic-gradient(
|
|
158
|
+
from calc(var(--pp-cloud-angle) * 2) at var(--pp-cloud-p2),
|
|
159
|
+
var(--pp-cloud-c2),
|
|
160
|
+
transparent 30% 60%,
|
|
161
|
+
var(--pp-cloud-c2)
|
|
162
|
+
),
|
|
163
|
+
conic-gradient(
|
|
164
|
+
from calc(var(--pp-cloud-angle) * -3) at var(--pp-cloud-p3),
|
|
165
|
+
var(--pp-cloud-c1),
|
|
166
|
+
transparent 40% 60%,
|
|
167
|
+
var(--pp-cloud-c1)
|
|
168
|
+
),
|
|
169
|
+
conic-gradient(
|
|
170
|
+
from calc(var(--pp-cloud-angle) * 2) at 15% 5%,
|
|
171
|
+
var(--pp-cloud-c2),
|
|
172
|
+
transparent 10% 90%,
|
|
173
|
+
var(--pp-cloud-c2)
|
|
174
|
+
),
|
|
175
|
+
conic-gradient(
|
|
176
|
+
from calc(var(--pp-cloud-angle) * 1) at 20% 80%,
|
|
177
|
+
var(--pp-cloud-c1),
|
|
178
|
+
transparent 10% 90%,
|
|
179
|
+
var(--pp-cloud-c1)
|
|
180
|
+
),
|
|
181
|
+
conic-gradient(
|
|
182
|
+
from calc(var(--pp-cloud-angle) * -2) at 85% 10%,
|
|
183
|
+
var(--pp-cloud-c3),
|
|
184
|
+
transparent 20% 80%,
|
|
185
|
+
var(--pp-cloud-c3)
|
|
186
|
+
);
|
|
187
|
+
box-shadow: inset var(--pp-cloud-bg) 0 0 var(--pp-cloud-shadow)
|
|
188
|
+
calc(var(--pp-cloud-shadow) * 0.2);
|
|
189
|
+
filter: blur(var(--pp-cloud-blur)) contrast(var(--pp-cloud-contrast));
|
|
190
|
+
animation: pp-cloud-rotate 20s linear infinite;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.pp-cloudy-bg::after {
|
|
194
|
+
backdrop-filter: blur(calc(var(--pp-cloud-blur) * 1.5));
|
|
195
|
+
mix-blend-mode: overlay;
|
|
196
|
+
background: var(--pp-cloud-bg);
|
|
197
|
+
opacity: 0.15;
|
|
198
|
+
}
|
|
199
|
+
|
|
120
200
|
/* Shimmer placeholder */
|
|
121
201
|
.pp-shimmer {
|
|
122
202
|
position: absolute;
|
|
@@ -236,13 +316,14 @@
|
|
|
236
316
|
.pp-badge,
|
|
237
317
|
.pp-ring-animated,
|
|
238
318
|
.pp-presence-animated,
|
|
239
|
-
.pp-glow
|
|
319
|
+
.pp-glow,
|
|
320
|
+
.pp-cloudy-bg::before {
|
|
240
321
|
animation: none !important;
|
|
241
322
|
transition: none !important;
|
|
242
323
|
}
|
|
243
324
|
}
|
|
244
|
-
`,
|
|
245
|
-
${tt}`,
|
|
325
|
+
`,Ge=`${et}
|
|
326
|
+
${tt}`,Oe=`
|
|
246
327
|
@keyframes np-shimmer {
|
|
247
328
|
0% { background-position: -200% 0; }
|
|
248
329
|
100% { background-position: 200% 0; }
|
|
@@ -252,7 +333,7 @@ ${tt}`,Ne=`
|
|
|
252
333
|
background-size: 200% 100%;
|
|
253
334
|
animation: np-shimmer 1.5s infinite;
|
|
254
335
|
}
|
|
255
|
-
`;function Fe(r,o=.3){if(
|
|
336
|
+
`;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 rt=`
|
|
256
337
|
@keyframes ppg-tooltip-in {
|
|
257
338
|
from {
|
|
258
339
|
opacity: 0;
|
|
@@ -303,7 +384,7 @@ ${tt}`,Ne=`
|
|
|
303
384
|
opacity: 1;
|
|
304
385
|
}
|
|
305
386
|
}
|
|
306
|
-
`,
|
|
387
|
+
`,ot=`
|
|
307
388
|
/* Profile Picture Group Container */
|
|
308
389
|
.ppg-container {
|
|
309
390
|
--ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -748,28 +829,28 @@ ${tt}`,Ne=`
|
|
|
748
829
|
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
749
830
|
}
|
|
750
831
|
}
|
|
751
|
-
`,
|
|
752
|
-
${
|
|
753
|
-
${this.placeholder==="shimmer"?lit.html`<style>${
|
|
832
|
+
`,Ne=`${rt}
|
|
833
|
+
${ot}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=I.size;this.variant=I.variant;this.shadow=I.shadow;this.border=false;this.borderWidth=I.borderWidth;this.borderColor=I.borderColor;this.rotation=0;this.zoom=I.zoom;this.loading=I.loading;this.placeholder=I.placeholder;this.placeholderColor=I.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;});}resolveObjectProp(e){if(e){if(typeof e=="string")try{return JSON.parse(e)}catch{return}return e}}get pixelSize(){let e=this.size;return typeof e=="number"?e:V[e]??V[I.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){if(super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage()),!this.isLoaded&&!this.hasError){let t=this.querySelector("img.pp-image");t?.complete&&t.naturalWidth>0&&(this.isLoaded=true);}}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.previousSrc=this.src,this.cdnImageUrl||(this.isLoaded=false,this.hasError=false));let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");if(t||n&&this.extCustomerId){this.previousExtCustomerId=this.extCustomerId;let i=this.cdnImageUrl;this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage(),this.cdnImageUrl!==i&&(this.isLoaded=false,this.hasError=false);}}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.resolveObjectProp(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.resolveObjectProp(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=this.resolveObjectProp(this.glow),d={};if(i){let c=i.color??this.borderColor??"#6366f1";d={"--pp-glow-color":c,boxShadow:Fe(c,i.intensity??.3)};}let l=this.resolveObjectProp(this.interactive),p=l?.hoverable||l?.pressable;return {classes:R("pp-container",Ue(this.variant),t?.className,p&&"pp-interactive",i?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:W[this.variant],...t?.style,...n,...d,cursor:l?.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 lit.nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return lit.html`
|
|
834
|
+
${this.placeholder==="shimmer"?lit.html`<style>${Oe}</style>`:lit.nothing}
|
|
754
835
|
<div
|
|
755
|
-
class=${
|
|
836
|
+
class=${R("np:absolute np:inset-0",e)}
|
|
756
837
|
style=${styleMap_js.styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
757
838
|
</div>
|
|
758
|
-
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=
|
|
839
|
+
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){if(e)return lit.html`<div class="pp-fallback np:absolute np:inset-0"></div>`;let n=Me(this.gradientSeed,this.pixelSize);return lit.html`
|
|
759
840
|
<div
|
|
760
|
-
class="pp-
|
|
761
|
-
style=${styleMap_js.styleMap(
|
|
841
|
+
class="pp-cloudy-bg"
|
|
842
|
+
style=${styleMap_js.styleMap(n)}>
|
|
762
843
|
</div>
|
|
763
844
|
`}if(this.fallback)return lit.html`
|
|
764
845
|
<span
|
|
765
846
|
class="pp-fallback"
|
|
766
|
-
style=${styleMap_js.styleMap({fontSize:`${
|
|
847
|
+
style=${styleMap_js.styleMap({fontSize:`${pe(this.pixelSize)}px`})}>
|
|
767
848
|
${this.fallback}
|
|
768
849
|
</span>
|
|
769
850
|
`;if(this.alt){let n=_(this.alt);return lit.html`
|
|
770
851
|
<div
|
|
771
852
|
class="pp-fallback np:absolute np:inset-0"
|
|
772
|
-
style=${styleMap_js.styleMap({background:e?"transparent":n,fontSize:`${
|
|
853
|
+
style=${styleMap_js.styleMap({background:e?"transparent":n,fontSize:`${pe(this.pixelSize)}px`})}>
|
|
773
854
|
${Q(this.alt)}
|
|
774
855
|
</div>
|
|
775
856
|
`}let t=this.pixelSize*.5;return lit.html`
|
|
@@ -780,7 +861,7 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
780
861
|
viewBox="0 0 24 24">
|
|
781
862
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
|
782
863
|
</svg>
|
|
783
|
-
`}renderImage(){let e=!!(this.extCustomerId&&
|
|
864
|
+
`}renderImage(){let e=!!(this.extCustomerId&&a.cdnBaseUrl),t;if(this.cdnImageUrl?t=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(t=this.src),this.hasError||!t)return this.renderFallback();let n=this.zoom&&this.zoom!==1?styleMap_js.styleMap({transform:`scale(${this.zoom})`}):lit.nothing;return lit.html`
|
|
784
865
|
<img
|
|
785
866
|
src=${t}
|
|
786
867
|
alt=${this.alt}
|
|
@@ -788,26 +869,26 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
788
869
|
decoding="async"
|
|
789
870
|
@load=${this.handleLoad}
|
|
790
871
|
@error=${this.handleError}
|
|
791
|
-
class=${
|
|
872
|
+
class=${R("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
792
873
|
style=${n}
|
|
793
874
|
draggable="false" />
|
|
794
|
-
`}renderRing(){let e=this.resolveObjectProp(this.ring);if(!e?.show)return lit.nothing;let t=e.width??3,n=e.gap??3,i=t+n,l
|
|
875
|
+
`}renderRing(){let e=this.resolveObjectProp(this.ring);if(!e?.show)return lit.nothing;let t=e.width??3,n=e.gap??3,i=t+n,d,l=e.progress!==void 0;if(l){let p=e.progress??0,c=e.color??"#30D158",u=e.emptyColor??"#8E8E93";d=Pe(p,c,u);}else e.gradient&&e.gradient.length>0?d=Ee(e.gradient):d=e.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return lit.html`
|
|
795
876
|
<div
|
|
796
|
-
class=${
|
|
797
|
-
style=${styleMap_js.styleMap({inset:`-${i}px`,padding:`${t}px`,background:
|
|
877
|
+
class=${R("pp-ring",e.animate&&!l&&"pp-ring-animated",l&&"pp-ring-progress")}
|
|
878
|
+
style=${styleMap_js.styleMap({inset:`-${i}px`,padding:`${t}px`,background:d,borderRadius:W[this.variant]})}>
|
|
798
879
|
</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(){let e=this.resolveObjectProp(this.presence);if(!e)return lit.nothing;let t=e.thickness??2,n
|
|
880
|
+
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){let e=this.resolveObjectProp(this.presence);if(!e)return lit.nothing;let t=e.thickness??2,n=$e(this.pixelSize,t),i=ye[e.status],l=this.getCornerOffset()-n/2;return lit.html`
|
|
800
881
|
<div
|
|
801
|
-
class=${
|
|
802
|
-
style=${styleMap_js.styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${
|
|
882
|
+
class=${R("pp-presence",e.animate&&"pp-presence-animated")}
|
|
883
|
+
style=${styleMap_js.styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${l}px`,right:`${l}px`,color:i})}
|
|
803
884
|
title=${e.status}>
|
|
804
885
|
</div>
|
|
805
|
-
`}renderBadge(){let e=this.resolveObjectProp(this.badge);if(!e)return lit.nothing;let t=e.position??"bottom-right",n=e.content!==void 0,i=e.icon!==void 0,
|
|
886
|
+
`}renderBadge(){let e=this.resolveObjectProp(this.badge);if(!e)return lit.nothing;let t=e.position??"bottom-right",n=e.content!==void 0,i=e.icon!==void 0,d=n||i,l=e.scale??1,{size:p,fontSize:c}=Se(this.pixelSize,d),u=Math.round(p*l),m=Math.round(c*l),w=e.bgColor??"#22c55e",D=e.color??"#ffffff",h=e.borderRadius??"9999px",b=n&&e.content!==void 0?Ie(e.content,e.max):null,y=i?e.icon:null,A=m*.9,v=`${this.getCornerOffset()-u/2}px`,L={"top-left":{top:v,left:v},"top-center":{top:v,left:"50%",transform:"translateX(-50%)"},"top-right":{top:v,right:v},"bottom-left":{bottom:v,left:v},"bottom-center":{bottom:v,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:v,right:v}},B=b?.length===1&&!i,z=d&&!B;return lit.html`
|
|
806
887
|
<div
|
|
807
|
-
class=${
|
|
808
|
-
style=${styleMap_js.styleMap({width:
|
|
809
|
-
${
|
|
810
|
-
${
|
|
888
|
+
class=${R("pp-badge",e.pulse&&"pp-badge-pulse",e.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
|
|
889
|
+
style=${styleMap_js.styleMap({width:z?"auto":`${u}px`,minWidth:z?`${u}px`:"",height:`${u}px`,padding:z?"0 6px":"0",fontSize:`${m}px`,backgroundColor:w,color:D,borderRadius:h,"--pp-badge-glow-color":w,gap:i&&n?"4px":"0",...L[t]})}>
|
|
890
|
+
${y?lit.html`<span class="pp-badge-icon" style=${styleMap_js.styleMap({fontSize:`${A}px`})}>${y}</span>`:lit.nothing}
|
|
891
|
+
${b??lit.nothing}
|
|
811
892
|
</div>
|
|
812
893
|
`}render(){let e=this.getContainerStyles(),t=this.resolveObjectProp(this.interactive),n=t?.focusable||t?.pressable?0:void 0;return lit.html`
|
|
813
894
|
<div
|
|
@@ -825,8 +906,8 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
825
906
|
|
|
826
907
|
<!-- Inner container for image clipping -->
|
|
827
908
|
<div
|
|
828
|
-
class=${
|
|
829
|
-
style=${styleMap_js.styleMap({borderRadius:
|
|
909
|
+
class=${R("pp-inner",e.innerClasses)}
|
|
910
|
+
style=${styleMap_js.styleMap({borderRadius:W[this.variant],...e.innerStyles})}>
|
|
830
911
|
<!-- Placeholder -->
|
|
831
912
|
${this.renderPlaceholder()}
|
|
832
913
|
|
|
@@ -840,7 +921,7 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
840
921
|
<!-- Presence Indicator -->
|
|
841
922
|
${this.renderPresence()}
|
|
842
923
|
</div>
|
|
843
|
-
`}};
|
|
924
|
+
`}};s([decorators_js.property({type:String})],a.prototype,"src"),s([decorators_js.property({type:String})],a.prototype,"alt"),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([decorators_js.property({type:String})],a.prototype,"size"),s([decorators_js.property({type:String})],a.prototype,"variant"),s([decorators_js.property({type:String})],a.prototype,"shadow"),s([decorators_js.property({type:Boolean})],a.prototype,"border"),s([decorators_js.property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([decorators_js.property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([decorators_js.property({type:Number})],a.prototype,"rotation"),s([decorators_js.property({type:Number})],a.prototype,"zoom"),s([decorators_js.property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([decorators_js.property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([decorators_js.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([decorators_js.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([decorators_js.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([decorators_js.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([decorators_js.property({type:String})],a.prototype,"loading"),s([decorators_js.property({type:String})],a.prototype,"placeholder"),s([decorators_js.property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([decorators_js.property({type:String})],a.prototype,"fallback"),s([decorators_js.property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([decorators_js.property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),s([decorators_js.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([decorators_js.state()],a.prototype,"isLoaded"),s([decorators_js.state()],a.prototype,"hasError"),s([decorators_js.state()],a.prototype,"cdnImageUrl"),s([decorators_js.state()],a.prototype,"cdnLoadFailed");var J=a;customElements.get("profile-picture")||customElements.define("profile-picture",J);var fe=false;function at(){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 x=class extends lit.LitElement{constructor(){super(...arguments);this.max=T.max;this.direction=T.direction;this.overlap=T.overlap;this.size=T.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=T.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 at(),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??T.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??T.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,c)=>{let u=c??p,m=t[p];return m!=null&&m!==""?String(m):t.getAttribute(u)??void 0},d=i("borderWidth","border-width"),l=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:l,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 c=t.getAttribute("glow");if(c)try{return JSON.parse(c)}catch{}})(),ring:(()=>{let p=t.ring;if(p&&typeof p=="object")return p;let c=t.getAttribute("ring");if(c)try{return JSON.parse(c)}catch{}})(),badge:(()=>{let p=t.badge;if(p&&typeof p=="object")return p;let c=t.getAttribute("badge");if(c)try{return JSON.parse(c)}catch{}})(),interactive:(()=>{let p=t.interactive;if(p&&typeof p=="object")return p;let c=t.getAttribute("interactive");if(c)try{return JSON.parse(c)}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&&(lit.render(lit.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),l=window.innerWidth,p=window.innerHeight;if(l<480){let S=lit.html`
|
|
844
925
|
<div
|
|
845
926
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
846
927
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -861,10 +942,10 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
861
942
|
class="ppg-dropdown-list"
|
|
862
943
|
style=${styleMap_js.styleMap({maxHeight:"calc(70vh - 60px)"})}
|
|
863
944
|
>
|
|
864
|
-
${e.map(
|
|
945
|
+
${e.map(v=>this.renderDropdownItem(v))}
|
|
865
946
|
</div>
|
|
866
947
|
</div>
|
|
867
|
-
`;lit.render(
|
|
948
|
+
`;lit.render(S,this.portalContainer);return}let u=p-t.bottom-n,m=t.top-n,w=l-t.left,D=t.right,h=this.dropdownPosition;h==="bottom"&&u<d&&m>u?h="top":h==="top"&&m<d&&u>m&&(h="bottom");let b;w>=i?b=t.left:D>=i?b=t.right-i:b=(l-i)/2,b=Math.max(8,Math.min(b,l-i-8));let y=h==="bottom"?t.bottom+n:void 0,A=h==="top"?p-t.top+n:void 0,O=lit.html`
|
|
868
949
|
<div
|
|
869
950
|
class="ppg-backdrop"
|
|
870
951
|
style="pointer-events: auto;"
|
|
@@ -873,7 +954,7 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
873
954
|
></div>
|
|
874
955
|
<div
|
|
875
956
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
876
|
-
style=${styleMap_js.styleMap({position:"fixed",pointerEvents:"auto",top:
|
|
957
|
+
style=${styleMap_js.styleMap({position:"fixed",pointerEvents:"auto",top:y!==void 0?`${y}px`:"auto",bottom:A!==void 0?`${A}px`:"auto",left:`${b}px`,width:`${i}px`})}
|
|
877
958
|
data-position=${h}
|
|
878
959
|
role="menu"
|
|
879
960
|
aria-label="Hidden users"
|
|
@@ -885,22 +966,22 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
885
966
|
class="ppg-dropdown-list"
|
|
886
967
|
style=${styleMap_js.styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
887
968
|
>
|
|
888
|
-
${e.map(
|
|
969
|
+
${e.map(S=>this.renderDropdownItem(S))}
|
|
889
970
|
</div>
|
|
890
971
|
</div>
|
|
891
|
-
`;lit.render(
|
|
972
|
+
`;lit.render(O,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=ze(t,n,this.direction),l=e.variant??"circle",p=e.shadow??"none",c=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return lit.html`
|
|
892
973
|
<div
|
|
893
974
|
class="ppg-avatar-wrapper"
|
|
894
|
-
style=${styleMap_js.styleMap({left:`${i}px`,zIndex:String(
|
|
975
|
+
style=${styleMap_js.styleMap({left:`${i}px`,zIndex:String(d),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
895
976
|
tabindex="0"
|
|
896
977
|
role="button"
|
|
897
978
|
aria-label=${e.name}
|
|
898
979
|
@click=${()=>this.handleAvatarClick(e)}
|
|
899
|
-
@mouseenter=${
|
|
980
|
+
@mouseenter=${u=>this.handleAvatarHover(e,u)}
|
|
900
981
|
@mouseleave=${this.handleAvatarLeave}
|
|
901
|
-
@keydown=${
|
|
982
|
+
@keydown=${u=>this.handleKeyDown(u,()=>this.handleAvatarClick(e))}
|
|
902
983
|
>
|
|
903
|
-
${this.renderProfilePicture(e,
|
|
984
|
+
${this.renderProfilePicture(e,l,p,c)}
|
|
904
985
|
</div>
|
|
905
986
|
`}renderProfilePicture(e,t,n,i){return lit.html`
|
|
906
987
|
<profile-picture
|
|
@@ -939,7 +1020,7 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
939
1020
|
aria-haspopup="true"
|
|
940
1021
|
@click=${()=>this.handleCounterClick(n)}
|
|
941
1022
|
>
|
|
942
|
-
${
|
|
1023
|
+
${Re(e)}
|
|
943
1024
|
</button>
|
|
944
1025
|
`}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return lit.html`
|
|
945
1026
|
<button
|
|
@@ -963,10 +1044,10 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
963
1044
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
964
1045
|
</svg>
|
|
965
1046
|
</button>
|
|
966
|
-
`}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),
|
|
1047
|
+
`}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),d=t.left-i.left+t.width/2,l=t.top-i.top,p=t.bottom-i.top,c=this.tooltipPosition==="top";return lit.html`
|
|
967
1048
|
<div
|
|
968
1049
|
class="ppg-tooltip"
|
|
969
|
-
style=${styleMap_js.styleMap({top:c?"auto":`${
|
|
1050
|
+
style=${styleMap_js.styleMap({top:c?"auto":`${p+n}px`,bottom:c?`${i.height-l+n}px`:"auto",left:`${d}px`})}
|
|
970
1051
|
data-position=${this.tooltipPosition}
|
|
971
1052
|
role="tooltip"
|
|
972
1053
|
>
|
|
@@ -1007,10 +1088,10 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
1007
1088
|
`:lit.nothing}
|
|
1008
1089
|
</div>
|
|
1009
1090
|
</div>
|
|
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}=
|
|
1091
|
+
`}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),l=e;n&&l++,this.showAddButton&&l++;let p=Te(l,this.pixelSize,this.overlap,this.spacing),c=n?ee(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,u=ee(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return lit.html`
|
|
1011
1092
|
<div
|
|
1012
|
-
class=${
|
|
1013
|
-
style=${styleMap_js.styleMap({width:`${
|
|
1093
|
+
class=${R("ppg-container",this.animated&&"ppg-animated")}
|
|
1094
|
+
style=${styleMap_js.styleMap({width:`${p}px`,height:`${this.pixelSize}px`})}
|
|
1014
1095
|
role="group"
|
|
1015
1096
|
aria-label="User avatars"
|
|
1016
1097
|
>
|
|
@@ -1021,13 +1102,13 @@ ${nt}`;var p=class p extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
1021
1102
|
${i.map((m,w)=>this.renderAvatar(m,w,e))}
|
|
1022
1103
|
|
|
1023
1104
|
<!-- Counter -->
|
|
1024
|
-
${n?this.renderCounter(t,c,
|
|
1105
|
+
${n?this.renderCounter(t,c,d):lit.nothing}
|
|
1025
1106
|
|
|
1026
1107
|
<!-- Add button -->
|
|
1027
|
-
${this.showAddButton?this.renderAddButton(
|
|
1108
|
+
${this.showAddButton?this.renderAddButton(u):lit.nothing}
|
|
1028
1109
|
|
|
1029
1110
|
<!-- Tooltip -->
|
|
1030
1111
|
${this.renderTooltip()}
|
|
1031
1112
|
</div>
|
|
1032
|
-
`}};
|
|
1113
|
+
`}};s([decorators_js.property({type:Number})],x.prototype,"max"),s([decorators_js.property({type:String})],x.prototype,"direction"),s([decorators_js.property({type:Number})],x.prototype,"overlap"),s([decorators_js.property({type:String})],x.prototype,"size"),s([decorators_js.property({type:Number})],x.prototype,"spacing"),s([decorators_js.property({type:Object})],x.prototype,"tooltip"),s([decorators_js.property({type:Object})],x.prototype,"dropdown"),s([decorators_js.property({type:Boolean,attribute:"show-add-button"})],x.prototype,"showAddButton"),s([decorators_js.property({type:String,attribute:"add-button-label"})],x.prototype,"addButtonLabel"),s([decorators_js.property({type:Boolean})],x.prototype,"animated"),s([decorators_js.property({type:Number,attribute:"rotation-amount"})],x.prototype,"rotationAmount"),s([decorators_js.state()],x.prototype,"users"),s([decorators_js.state()],x.prototype,"dropdownOpen"),s([decorators_js.state()],x.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",x);function dt(){let[r,o]=je.useState(false);return je.useEffect(()=>{o(true);},[]),r}var he=je__default.default.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:d,showAddButton:l,addButtonLabel:p,animated:c,rotationAmount:u,onAvatarClick:m,onAvatarHover:w,onCounterClick:D,onDropdownItemClick:h,onAddClick:b,className:y,style:A,children:O},S)=>{let v=dt(),L=je.useRef(null),B=je.useCallback(f=>{m?.(f.detail.user);},[m]),z=je.useCallback(f=>{w?.(f.detail.user);},[w]),F=je.useCallback(f=>{let G=f;D?.(G.detail.hiddenUsers,G.detail.open);},[D]),N=je.useCallback(f=>{h?.(f.detail.user);},[h]),j=je.useCallback(()=>{b?.();},[b]);return je.useEffect(()=>{let f=L.current;if(f)return f.addEventListener("avatar-click",B),f.addEventListener("avatar-hover",z),f.addEventListener("counter-click",F),f.addEventListener("dropdown-item-click",N),f.addEventListener("add-click",j),()=>{f.removeEventListener("avatar-click",B),f.removeEventListener("avatar-hover",z),f.removeEventListener("counter-click",F),f.removeEventListener("dropdown-item-click",N),f.removeEventListener("add-click",j);}},[B,z,F,N,j]),je.useEffect(()=>{typeof S=="function"?S(L.current):S&&(S.current=L.current);},[S]),v?je__default.default.createElement("profile-picture-group",{ref:L,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":l||void 0,"add-button-label":p,animated:c,"rotation-amount":u,class:y,style:A},O):null});he.displayName="ProfilePictureGroup";function gt(){let[r,o]=je.useState(false);return je.useEffect(()=>{o(true);},[]),r}function ft(r){J.setCdnBaseUrl(r);}function mt(){return J.getCdnBaseUrl()}function He({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:d,border:l,borderWidth:p,borderColor:c,rotation:u,zoom:m,bgColor:w,bgGradient:D,glow:h,ring:b,presence:y,badge:A,loading:O,placeholder:S,placeholderColor:v,fallback:L,fallbackMode:B,interactive:z,onLoad:F,onError:N,onCdnError:j,onClick:f,className:G,style:Ve,ref:q}){let We=gt(),X=je.useRef(null),oe=je.useCallback(()=>{F?.();},[F]),ne=je.useCallback(()=>{N?.();},[N]),ie=je.useCallback(C=>{j?.(C.detail);},[j]),ae=je.useCallback(C=>{f?.(C.detail);},[f]);return je.useEffect(()=>{let C=X.current;if(C)return C.addEventListener("load",oe),C.addEventListener("error",ne),C.addEventListener("cdn-error",ie),C.addEventListener("profile-picture-click",ae),()=>{C.removeEventListener("load",oe),C.removeEventListener("error",ne),C.removeEventListener("cdn-error",ie),C.removeEventListener("profile-picture-click",ae);}},[oe,ne,ie,ae]),je.useEffect(()=>{typeof q=="function"?q(X.current):q&&(q.current=X.current);},[q]),We?je__default.default.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:l||void 0,"border-width":p,"border-color":c,rotation:u,zoom:m,"bg-color":w,"bg-gradient":D,glow:h?JSON.stringify(h):void 0,ring:b?JSON.stringify(b):void 0,presence:y?JSON.stringify(y):void 0,badge:A?JSON.stringify(A):void 0,loading:O,placeholder:S,"placeholder-color":v,fallback:L,"fallback-mode":B,interactive:z?JSON.stringify(z):void 0,class:G,style:Ve}):null}He.displayName="ProfilePicture";ve();exports.ProfilePicture=He;exports.ProfilePictureGroup=he;exports.constructCdnUrl=ce;exports.getCdnBaseUrl=mt;exports.getCdnSizeLabel=le;exports.setCdnBaseUrl=ft;//# sourceMappingURL=index.cjs.map
|
|
1033
1114
|
//# sourceMappingURL=index.cjs.map
|