@grasco/profile-picture 0.1.6 → 0.1.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/index.cjs +28 -28
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +28 -28
- package/dist/index.js.map +1 -1
- package/dist/standalone.standalone.js +20 -20
- package/dist/standalone.standalone.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var Le=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 Le__default=/*#__PURE__*/_interopDefault(Le);var Oe=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var s=(r,n,e,t)=>{for(var o=t>1?void 0:t?Ge(n,e):n,i=r.length-1,p;i>=0;i--)(p=r[i])&&(o=(t?p(n,e,o):p(o))||o);return t&&o&&Oe(n,e,o),o};var ee="grasco-profile-picture-styles",F=false,ue=false;function ge(){if(F||typeof document>"u")return;if(document.getElementById(ee)){F=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){F=true;return}ue||(ue=true,Fe());}function Fe(){(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>Ne());}function Ne(){if(F||typeof document>"u")return;if(document.getElementById(ee)){F=true;return}let r=He();if(!r)return;let n=document.createElement("link");n.id=ee,n.rel="stylesheet",n.href=r,document.head.appendChild(n),F=true;}function He(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let n=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href));if(n)return `${n.substring(0,n.lastIndexOf("/")+1)}dist/styles.css`}catch{}let r=document.currentScript;if(r?.src){let n=new URL(r.src);return `${n.href.substring(0,n.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},fe={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},me={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"};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},I={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function
|
|
1
|
+
'use strict';var Le=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 Le__default=/*#__PURE__*/_interopDefault(Le);var Oe=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var s=(r,n,e,t)=>{for(var o=t>1?void 0:t?Ge(n,e):n,i=r.length-1,p;i>=0;i--)(p=r[i])&&(o=(t?p(n,e,o):p(o))||o);return t&&o&&Oe(n,e,o),o};var ee="grasco-profile-picture-styles",F=false,ue=false;function ge(){if(F||typeof document>"u")return;if(document.getElementById(ee)){F=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){F=true;return}ue||(ue=true,Fe());}function Fe(){(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>Ne());}function Ne(){if(F||typeof document>"u")return;if(document.getElementById(ee)){F=true;return}let r=He();if(!r)return;let n=document.createElement("link");n.id=ee,n.rel="stylesheet",n.href=r,document.head.appendChild(n),F=true;}function He(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let n=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href));if(n)return `${n.substring(0,n.lastIndexOf("/")+1)}dist/styles.css`}catch{}let r=document.currentScript;if(r?.src){let n=new URL(r.src);return `${n.href.substring(0,n.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},fe={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},me={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"};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},I={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function A(...r){return r.filter(Boolean).join(" ")}function te(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function J(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 re(r){return Math.round(r*.38)}function he(r,n){let e;if(n){let o=Math.round(r*.31);e=Math.min(24,Math.max(14,o));}else {let o=Math.round(r*.22);e=Math.min(14,Math.max(8,o));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function be(r,n){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(n-1)*2)}function xe(r,n){return typeof r=="string"?r:n&&r>n?`${n}+`:r.toString()}function ve(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let o=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${o}deg ${i}deg`}).join(", ")})`}function je(r){let n=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);n=(n<<5)-n+t,n&=n;}return Math.abs(n)}function we(r,n,e){let o=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${n} 0deg ${o}deg, ${e} ${o}deg 360deg)`}function Y(r){let n=["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=je(r)%n.length;return n[e]}function ye(r){return typeof r=="number"?r:N[r]??N[I.size]}function ne(r,n,e){let t=e?n-1:n;if(r<=t)return {visible:r,hidden:0,showCounter:false};let o=t-1,i=r-o;return {visible:o,hidden:i,showCounter:true}}function K(r,n,e,t,o){let i=o??n*(1-e);return r*i}function Ce(r,n,e){return e==="ltr"?n-r:r+1}function Se(r,n,e,t){if(r===0)return 0;if(r===1)return n;let o=t??n*(1-e);return n+o*(r-1)}function ke(r){return r>99?"+99":`+${r}`}function oe(r){return r<=80?"80":r<=120?"120":r<=240?"240":r<=480?"480":"960"}function ie(r){if(!(r&&te(r)))return "light";let n=r.replace("#","");n.length===3&&(n=n.split("").map(p=>p+p).join(""));let e=Number.parseInt(n.slice(0,2),16),t=Number.parseInt(n.slice(2,4),16),o=Number.parseInt(n.slice(4,6),16);return (.299*e+.587*t+.114*o)/255>.5?"light":"dark"}function ae(r,n,e,t,o){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${n}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${o}`}function $e(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ie(r,n){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:n,borderStyle:"solid"}}}function Ee(r,n){return n?{className:"",style:{background:n}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"#e7e7e7"}}}function ze(r){return {boxShadow:me[r]}}var Pe={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
`,Te=`${Ve}
|
|
244
|
-
${We}`,
|
|
244
|
+
${We}`,De=`
|
|
245
245
|
@keyframes np-shimmer {
|
|
246
246
|
0% { background-position: -200% 0; }
|
|
247
247
|
100% { background-position: 200% 0; }
|
|
@@ -251,7 +251,7 @@ ${We}`,Ae=`
|
|
|
251
251
|
background-size: 200% 100%;
|
|
252
252
|
animation: np-shimmer 1.5s infinite;
|
|
253
253
|
}
|
|
254
|
-
`;function
|
|
254
|
+
`;function Re(r,n=.3){if(te(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),o=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${o}, ${n})`}return `0 0 20px 0 ${r}`}var qe=`
|
|
255
255
|
@keyframes ppg-tooltip-in {
|
|
256
256
|
from {
|
|
257
257
|
opacity: 0;
|
|
@@ -747,11 +747,11 @@ ${We}`,Ae=`
|
|
|
747
747
|
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
748
748
|
}
|
|
749
749
|
}
|
|
750
|
-
`,
|
|
751
|
-
${Je}`;var a=class extends lit.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.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}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=Te,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}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.cdnLoadFailed||!this.previousExtCustomerId)&&(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),(e.has("extCustomerId")||e.has("size")||e.has("bgColor"))&&this.extCustomerId!==this.previousExtCustomerId&&(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}));}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=oe(this.pixelSize),t=ie(this.bgColor),o=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ae(a.cdnBaseUrl,this.extCustomerId,e,t,o);}getContainerStyles(){let e=Ee(this.bgColor,this.bgGradient),t=this.border?Ie(this.borderWidth,this.borderColor):null,o=ze(this.shadow),i={};if(this.glow){let
|
|
752
|
-
${this.placeholder==="shimmer"?lit.html`<style>${
|
|
750
|
+
`,Ae=`${qe}
|
|
751
|
+
${Je}`;var a=class extends lit.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.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}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=Te,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:N[e]??N[$.size]}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.cdnLoadFailed||!this.previousExtCustomerId)&&(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),(e.has("extCustomerId")||e.has("size")||e.has("bgColor"))&&this.extCustomerId!==this.previousExtCustomerId&&(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}));}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=oe(this.pixelSize),t=ie(this.bgColor),o=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ae(a.cdnBaseUrl,this.extCustomerId,e,t,o);}getContainerStyles(){let e=Ee(this.bgColor,this.bgGradient),t=this.border?Ie(this.borderWidth,this.borderColor):null,o=ze(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Re(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:A("pp-container",$e(this.variant),e.className,t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:H[this.variant],...e.style,...t?.style,...o,...i,cursor:this.interactive?.cursor??(p?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0}}}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`
|
|
752
|
+
${this.placeholder==="shimmer"?lit.html`<style>${De}</style>`:lit.nothing}
|
|
753
753
|
<div
|
|
754
|
-
class=${
|
|
754
|
+
class=${A("np:absolute np:inset-0",e)}
|
|
755
755
|
style=${styleMap_js.styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
756
756
|
</div>
|
|
757
757
|
`}renderFallback(){if(this.fallback)return lit.html`
|
|
@@ -782,25 +782,25 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
782
782
|
decoding="async"
|
|
783
783
|
@load=${this.handleLoad}
|
|
784
784
|
@error=${this.handleError}
|
|
785
|
-
class=${
|
|
785
|
+
class=${A("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
786
786
|
draggable="false" />
|
|
787
|
-
`}renderRing(){if(!this.ring?.show)return lit.nothing;let e=this.ring.width??3,t=this.ring.gap??3,o=e+t,i,p=this.ring.progress!==void 0;if(p){let
|
|
787
|
+
`}renderRing(){if(!this.ring?.show)return lit.nothing;let e=this.ring.width??3,t=this.ring.gap??3,o=e+t,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,g=this.ring.color??"#30D158",m=this.ring.emptyColor??"#8E8E93";i=we(d,g,m);}else this.ring.gradient&&this.ring.gradient.length>0?i=ve(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return lit.html`
|
|
788
788
|
<div
|
|
789
|
-
class=${
|
|
789
|
+
class=${A("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
|
|
790
790
|
style=${styleMap_js.styleMap({inset:`-${o}px`,padding:`${e}px`,background:i,borderRadius:H[this.variant]})}>
|
|
791
791
|
</div>
|
|
792
792
|
`}getCornerOffset(){let e=this.border?this.borderWidth:0,t=this.pixelSize*.08,i={circle:1,square:.5,rounded:.8,squircle:1.2}[this.variant];return Math.round(t*i-e*.5)}renderPresence(){if(!this.presence)return lit.nothing;let e=this.presence.thickness??2,t=be(this.pixelSize,e),o=fe[this.presence.status],i=this.getCornerOffset();return lit.html`
|
|
793
793
|
<div
|
|
794
|
-
class=${
|
|
794
|
+
class=${A("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
795
795
|
style=${styleMap_js.styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:o,bottom:`${i}px`,right:`${i}px`,color:o})}
|
|
796
796
|
title=${this.presence.status}>
|
|
797
797
|
</div>
|
|
798
|
-
`}renderBadge(){if(!this.badge)return lit.nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,o=this.badge.icon!==void 0,i=t||o,{size:p,fontSize:
|
|
798
|
+
`}renderBadge(){if(!this.badge)return lit.nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,o=this.badge.icon!==void 0,i=t||o,{size:p,fontSize:d}=he(this.pixelSize,i),g=this.badge.bgColor??"#22c55e",m=this.badge.color??"#ffffff",h=this.badge.borderRadius??"9999px",b=t&&this.badge.content!==void 0?xe(this.badge.content,this.badge.max):null,v=o?this.badge.icon:null,T=d*.9,c=`${-this.getCornerOffset()}px`,M={"top-left":{top:c,left:c},"top-center":{top:c,left:"50%",transform:"translateX(-50%)"},"top-right":{top:c,right:c},"bottom-left":{bottom:c,left:c},"bottom-center":{bottom:c,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:c,right:c}};return lit.html`
|
|
799
799
|
<div
|
|
800
|
-
class=${
|
|
801
|
-
style=${styleMap_js.styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${
|
|
800
|
+
class=${A("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",o&&"pp-badge-with-icon")}
|
|
801
|
+
style=${styleMap_js.styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:g,color:m,borderRadius:h,"--pp-badge-glow-color":g,gap:o&&t?"4px":"0",...M[e]})}>
|
|
802
802
|
${v?lit.html`<span class="pp-badge-icon" style=${styleMap_js.styleMap({fontSize:`${T}px`})}>${v}</span>`:lit.nothing}
|
|
803
|
-
${
|
|
803
|
+
${b??lit.nothing}
|
|
804
804
|
</div>
|
|
805
805
|
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return lit.html`
|
|
806
806
|
<div
|
|
@@ -831,7 +831,7 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
831
831
|
<!-- Presence Indicator -->
|
|
832
832
|
${this.renderPresence()}
|
|
833
833
|
</div>
|
|
834
|
-
`}};a.stylesInjected=false,a.cdnBaseUrl="",a.instances=new Set,s([decorators_js.property({type:String})],a.prototype,"src",2),s([decorators_js.property({type:String})],a.prototype,"alt",2),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId",2),s([decorators_js.property({type:String})],a.prototype,"size",2),s([decorators_js.property({type:String})],a.prototype,"variant",2),s([decorators_js.property({type:String})],a.prototype,"shadow",2),s([decorators_js.property({type:Boolean})],a.prototype,"border",2),s([decorators_js.property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth",2),s([decorators_js.property({type:String,attribute:"border-color"})],a.prototype,"borderColor",2),s([decorators_js.property({type:Number})],a.prototype,"rotation",2),s([decorators_js.property({type:String,attribute:"bg-color"})],a.prototype,"bgColor",2),s([decorators_js.property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient",2),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",2),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",2),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",2),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",2),s([decorators_js.property({type:String})],a.prototype,"loading",2),s([decorators_js.property({type:String})],a.prototype,"placeholder",2),s([decorators_js.property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor",2),s([decorators_js.property({type:String})],a.prototype,"fallback",2),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",2),s([decorators_js.state()],a.prototype,"isLoaded",2),s([decorators_js.state()],a.prototype,"hasError",2),s([decorators_js.state()],a.prototype,"cdnImageUrl",2),s([decorators_js.state()],a.prototype,"cdnLoadFailed",2),a=s([decorators_js.customElement("profile-picture")],a);var de=false;function Qe(){if(de||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>{if(de)return;let n=document.createElement("style");n.textContent=
|
|
834
|
+
`}};a.stylesInjected=false,a.cdnBaseUrl="",a.instances=new Set,s([decorators_js.property({type:String})],a.prototype,"src",2),s([decorators_js.property({type:String})],a.prototype,"alt",2),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId",2),s([decorators_js.property({type:String})],a.prototype,"size",2),s([decorators_js.property({type:String})],a.prototype,"variant",2),s([decorators_js.property({type:String})],a.prototype,"shadow",2),s([decorators_js.property({type:Boolean})],a.prototype,"border",2),s([decorators_js.property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth",2),s([decorators_js.property({type:String,attribute:"border-color"})],a.prototype,"borderColor",2),s([decorators_js.property({type:Number})],a.prototype,"rotation",2),s([decorators_js.property({type:String,attribute:"bg-color"})],a.prototype,"bgColor",2),s([decorators_js.property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient",2),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",2),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",2),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",2),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",2),s([decorators_js.property({type:String})],a.prototype,"loading",2),s([decorators_js.property({type:String})],a.prototype,"placeholder",2),s([decorators_js.property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor",2),s([decorators_js.property({type:String})],a.prototype,"fallback",2),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",2),s([decorators_js.state()],a.prototype,"isLoaded",2),s([decorators_js.state()],a.prototype,"hasError",2),s([decorators_js.state()],a.prototype,"cdnImageUrl",2),s([decorators_js.state()],a.prototype,"cdnLoadFailed",2),a=s([decorators_js.customElement("profile-picture")],a);var de=false;function Qe(){if(de||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>{if(de)return;let n=document.createElement("style");n.textContent=Ae,document.head.appendChild(n),de=true;});}var f=class extends lit.LitElement{constructor(){super(...arguments);this.max=I.max;this.direction=I.direction;this.overlap=I.overlap;this.size=I.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=I.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 Qe(),this}get pixelSize(){return ye(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??I.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??I.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,o)=>{let i=(g,m)=>{let h=m??g,b=t[g];return b!=null&&b!==""?String(b):t.getAttribute(h)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${o+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:o,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient")}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(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(),o=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),d=window.innerWidth,g=window.innerHeight;if(d<480){let y=lit.html`
|
|
835
835
|
<div
|
|
836
836
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
837
837
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -852,10 +852,10 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
852
852
|
class="ppg-dropdown-list"
|
|
853
853
|
style=${styleMap_js.styleMap({maxHeight:"calc(70vh - 60px)"})}
|
|
854
854
|
>
|
|
855
|
-
${e.map(
|
|
855
|
+
${e.map(D=>this.renderDropdownItem(D))}
|
|
856
856
|
</div>
|
|
857
857
|
</div>
|
|
858
|
-
`;lit.render(y,this.portalContainer);return}let h=
|
|
858
|
+
`;lit.render(y,this.portalContainer);return}let h=g-t.bottom-o,b=t.top-o,v=d-t.left,T=t.right,x=this.dropdownPosition;x==="bottom"&&h<p&&b>h?x="top":x==="top"&&b<p&&h>b&&(x="bottom");let c;v>=i?c=t.left:T>=i?c=t.right-i:c=(d-i)/2,c=Math.max(8,Math.min(c,d-i-8));let M=x==="bottom"?t.bottom+o:void 0,U=x==="top"?g-t.top+o:void 0,j=lit.html`
|
|
859
859
|
<div
|
|
860
860
|
class="ppg-backdrop"
|
|
861
861
|
style="pointer-events: auto;"
|
|
@@ -865,7 +865,7 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
865
865
|
<div
|
|
866
866
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
867
867
|
style=${styleMap_js.styleMap({position:"fixed",pointerEvents:"auto",top:M!==void 0?`${M}px`:"auto",bottom:U!==void 0?`${U}px`:"auto",left:`${c}px`,width:`${i}px`})}
|
|
868
|
-
data-position=${
|
|
868
|
+
data-position=${x}
|
|
869
869
|
role="menu"
|
|
870
870
|
aria-label="Hidden users"
|
|
871
871
|
>
|
|
@@ -879,7 +879,7 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
879
879
|
${e.map(y=>this.renderDropdownItem(y))}
|
|
880
880
|
</div>
|
|
881
881
|
</div>
|
|
882
|
-
`;lit.render(j,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 o=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:o.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,o){let i=K(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=Ce(t,o,this.direction),
|
|
882
|
+
`;lit.render(j,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 o=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:o.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,o){let i=K(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=Ce(t,o,this.direction),d=e.variant??"circle",g=e.shadow??"none",m=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return lit.html`
|
|
883
883
|
<div
|
|
884
884
|
class="ppg-avatar-wrapper"
|
|
885
885
|
style=${styleMap_js.styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
@@ -891,7 +891,7 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
891
891
|
@mouseleave=${this.handleAvatarLeave}
|
|
892
892
|
@keydown=${h=>this.handleKeyDown(h,()=>this.handleAvatarClick(e))}
|
|
893
893
|
>
|
|
894
|
-
${this.renderProfilePicture(e,
|
|
894
|
+
${this.renderProfilePicture(e,d,g,m)}
|
|
895
895
|
</div>
|
|
896
896
|
`}renderProfilePicture(e,t,o,i){return lit.html`
|
|
897
897
|
<profile-picture
|
|
@@ -943,10 +943,10 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
943
943
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
944
944
|
</svg>
|
|
945
945
|
</button>
|
|
946
|
-
`}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:e,rect:t}=this.tooltipData,o=8,i=this.getBoundingClientRect(),p=t.left-i.left+t.width/2,
|
|
946
|
+
`}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:e,rect:t}=this.tooltipData,o=8,i=this.getBoundingClientRect(),p=t.left-i.left+t.width/2,d=t.top-i.top,g=t.bottom-i.top,m=this.tooltipPosition==="top";return lit.html`
|
|
947
947
|
<div
|
|
948
948
|
class="ppg-tooltip"
|
|
949
|
-
style=${styleMap_js.styleMap({top:m?"auto":`${
|
|
949
|
+
style=${styleMap_js.styleMap({top:m?"auto":`${g+o}px`,bottom:m?`${i.height-d+o}px`:"auto",left:`${p}px`})}
|
|
950
950
|
data-position=${this.tooltipPosition}
|
|
951
951
|
role="tooltip"
|
|
952
952
|
>
|
|
@@ -987,10 +987,10 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
987
987
|
`:lit.nothing}
|
|
988
988
|
</div>
|
|
989
989
|
</div>
|
|
990
|
-
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:o}=ne(this.users.length,this.max,this.showAddButton),i=this.users.slice(o);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:o}=ne(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),
|
|
990
|
+
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:o}=ne(this.users.length,this.max,this.showAddButton),i=this.users.slice(o);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:o}=ne(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),d=e;o&&d++,this.showAddButton&&d++;let g=Se(d,this.pixelSize,this.overlap,this.spacing),m=o?K(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,h=K(e+(o?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return lit.html`
|
|
991
991
|
<div
|
|
992
|
-
class=${
|
|
993
|
-
style=${styleMap_js.styleMap({width:`${
|
|
992
|
+
class=${A("ppg-container",this.animated&&"ppg-animated")}
|
|
993
|
+
style=${styleMap_js.styleMap({width:`${g}px`,height:`${this.pixelSize}px`})}
|
|
994
994
|
role="group"
|
|
995
995
|
aria-label="User avatars"
|
|
996
996
|
>
|
|
@@ -998,7 +998,7 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
998
998
|
<slot style="display: none;"></slot>
|
|
999
999
|
|
|
1000
1000
|
<!-- Visible avatars -->
|
|
1001
|
-
${i.map((
|
|
1001
|
+
${i.map((b,v)=>this.renderAvatar(b,v,e))}
|
|
1002
1002
|
|
|
1003
1003
|
<!-- Counter -->
|
|
1004
1004
|
${o?this.renderCounter(t,m,p):lit.nothing}
|
|
@@ -1009,5 +1009,5 @@ ${Je}`;var a=class extends lit.LitElement{constructor(){super(...arguments);this
|
|
|
1009
1009
|
<!-- Tooltip -->
|
|
1010
1010
|
${this.renderTooltip()}
|
|
1011
1011
|
</div>
|
|
1012
|
-
`}};s([decorators_js.property({type:Number})],
|
|
1012
|
+
`}};s([decorators_js.property({type:Number})],f.prototype,"max",2),s([decorators_js.property({type:String})],f.prototype,"direction",2),s([decorators_js.property({type:Number})],f.prototype,"overlap",2),s([decorators_js.property({type:String})],f.prototype,"size",2),s([decorators_js.property({type:Number})],f.prototype,"spacing",2),s([decorators_js.property({type:Object})],f.prototype,"tooltip",2),s([decorators_js.property({type:Object})],f.prototype,"dropdown",2),s([decorators_js.property({type:Boolean,attribute:"show-add-button"})],f.prototype,"showAddButton",2),s([decorators_js.property({type:String,attribute:"add-button-label"})],f.prototype,"addButtonLabel",2),s([decorators_js.property({type:Boolean})],f.prototype,"animated",2),s([decorators_js.property({type:Number,attribute:"rotation-amount"})],f.prototype,"rotationAmount",2),s([decorators_js.state()],f.prototype,"users",2),s([decorators_js.state()],f.prototype,"dropdownOpen",2),s([decorators_js.state()],f.prototype,"tooltipData",2),f=s([decorators_js.customElement("profile-picture-group")],f);var le=Le__default.default.forwardRef(({max:r,direction:n,overlap:e,size:t,spacing:o,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:g,animated:m,rotationAmount:h,onAvatarClick:b,onAvatarHover:v,onCounterClick:T,onDropdownItemClick:x,onAddClick:c,className:M,style:U,children:j},y)=>{let D=Le.useRef(null),B=Le.useCallback(l=>{b?.(l.detail.user);},[b]),O=Le.useCallback(l=>{v?.(l.detail.user);},[v]),G=Le.useCallback(l=>{let k=l;T?.(k.detail.hiddenUsers,k.detail.open);},[T]),P=Le.useCallback(l=>{x?.(l.detail.user);},[x]),V=Le.useCallback(()=>{c?.();},[c]);return Le.useEffect(()=>{let l=D.current;if(l)return l.addEventListener("avatar-click",B),l.addEventListener("avatar-hover",O),l.addEventListener("counter-click",G),l.addEventListener("dropdown-item-click",P),l.addEventListener("add-click",V),()=>{l.removeEventListener("avatar-click",B),l.removeEventListener("avatar-hover",O),l.removeEventListener("counter-click",G),l.removeEventListener("dropdown-item-click",P),l.removeEventListener("add-click",V);}},[B,O,G,P,V]),Le.useEffect(()=>{typeof y=="function"?y(D.current):y&&(y.current=D.current);},[y]),Le__default.default.createElement("profile-picture-group",{ref:D,max:r,direction:n,overlap:e,size:t,spacing:o,tooltip:i?JSON.stringify(i):void 0,dropdown:p?JSON.stringify(p):void 0,"show-add-button":d||void 0,"add-button-label":g,animated:m,"rotation-amount":h,class:M,style:U},j)});le.displayName="ProfilePictureGroup";function Be({src:r,alt:n,extCustomerId:e,size:t,variant:o,shadow:i,border:p,borderWidth:d,borderColor:g,rotation:m,bgColor:h,bgGradient:b,glow:v,ring:T,presence:x,badge:c,loading:M,placeholder:U,placeholderColor:j,fallback:y,interactive:D,onLoad:B,onError:O,onCdnError:G,className:P,style:V,ref:l}){let k=Le.useRef(null),Z=Le.useCallback(()=>{B?.();},[B]),Q=Le.useCallback(()=>{O?.();},[O]),_=Le.useCallback(R=>{G?.(R.detail);},[G]);return Le.useEffect(()=>{let R=k.current;if(R)return R.addEventListener("load",Z),R.addEventListener("error",Q),R.addEventListener("cdn-error",_),()=>{R.removeEventListener("load",Z),R.removeEventListener("error",Q),R.removeEventListener("cdn-error",_);}},[Z,Q,_]),Le.useEffect(()=>{typeof l=="function"?l(k.current):l&&(l.current=k.current);},[l]),Le__default.default.createElement("profile-picture",{ref:k,src:r||void 0,alt:n,"ext-customer-id":e,size:t,variant:o,shadow:i,border:p||void 0,"border-width":d,"border-color":g,rotation:m,"bg-color":h,"bg-gradient":b,glow:v?JSON.stringify(v):void 0,ring:T?JSON.stringify(T):void 0,presence:x?JSON.stringify(x):void 0,badge:c?JSON.stringify(c):void 0,loading:M,placeholder:U,"placeholder-color":j,fallback:y,interactive:D?JSON.stringify(D):void 0,class:P,style:V})}Be.displayName="ProfilePicture";ge();exports.ProfilePicture=Be;exports.ProfilePictureGroup=le;exports.constructCdnUrl=ae;exports.detectThemeFromColor=ie;exports.getCdnSizeLabel=oe;//# sourceMappingURL=index.cjs.map
|
|
1013
1013
|
//# sourceMappingURL=index.cjs.map
|