@grasco/profile-picture 0.1.2 → 0.1.5
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/README.md +4 -0
- package/dist/angular.cjs +1 -370
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +193 -16
- package/dist/angular.d.ts +193 -16
- package/dist/angular.js +1 -370
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +284 -175
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +134 -58
- package/dist/index.d.ts +134 -58
- package/dist/index.js +284 -175
- package/dist/index.js.map +1 -1
- package/dist/standalone.d.ts +17 -17
- package/dist/standalone.standalone.js +260 -151
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/svelte.cjs +1 -370
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +193 -16
- package/dist/svelte.d.ts +193 -16
- package/dist/svelte.js +1 -370
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +1 -370
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +193 -16
- package/dist/vue.d.ts +193 -16
- package/dist/vue.js +1 -370
- package/dist/vue.js.map +1 -1
- package/package.json +9 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var
|
|
2
|
-
Make sure to test your application with a production build as repeat registrations will throw in production.`);else throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the name "${t}" has already been used with this registry`);if(this.__reverseDefinitions.has(e))throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the constructor has already been used with this registry for the tag name ${this.__reverseDefinitions.get(e)}`);e.__localName=t,this.__definitions.set(t,{ctor:e,observedAttributes:e.observedAttributes??[]}),this.__reverseDefinitions.set(e,t),this.__pendingWhenDefineds.get(t)?.resolve(e),this.__pendingWhenDefineds.delete(t);}get(t){return this.__definitions.get(t)?.ctor}getName(t){return this.__reverseDefinitions.get(t)??null}upgrade(t){throw new Error("customElements.upgrade is not currently supported in SSR. Please file a bug if you need it.")}async whenDefined(t){let e=this.__definitions.get(t);if(e)return e.ctor;let r=this.__pendingWhenDefineds.get(t);return r||(r=Ze(),this.__pendingWhenDefineds.set(t,r)),r.promise}},
|
|
3
|
-
\f\r]`,
|
|
4
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),le=/'/g,de=/"/g,ge=/^(?:script|style|textarea|title)$/i,Ht=n=>(t,...e)=>({_$litType$:n,strings:t,values:e}),b=Ht(1),L=Symbol.for("lit-noChange"),c=Symbol.for("lit-nothing"),ce=new WeakMap,B=P.createTreeWalker(P,129);function fe(n,t){if(!Pt(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return se!==void 0?se.createHTML(t):t}var lr=(n,t)=>{let e=n.length-1,r=[],i,o=t===2?"<svg>":t===3?"<math>":"",s=et;for(let p=0;p<e;p++){let a=n[p],u,m,g=-1,S=0;for(;S<a.length&&(s.lastIndex=S,m=s.exec(a),m!==null);)S=s.lastIndex,s===et?m[1]==="!--"?s=ae:m[1]!==void 0?s=pe:m[2]!==void 0?(ge.test(m[2])&&(i=RegExp("</"+m[2],"g")),s=z):m[3]!==void 0&&(s=z):s===z?m[0]===">"?(s=i??et,g=-1):m[1]===void 0?g=-2:(g=s.lastIndex-m[2].length,u=m[1],s=m[3]===void 0?z:m[3]==='"'?de:le):s===de||s===le?s=z:s===ae||s===pe?s=et:(s=z,i=void 0);let _=s===z&&n[p+1].startsWith("/>")?" ":"";o+=s===et?a+ar:g>=0?(r.push(u),a.slice(0,g)+he+a.slice(g)+O+_):a+O+(g===-2?p:_);}return [fe(n,o+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},it=class n{constructor({strings:t,_$litType$:e},r){let i;this.parts=[];let o=0,s=0,p=t.length-1,a=this.parts,[u,m]=lr(t,e);if(this.el=n.createElement(u,r),B.currentNode=this.el.content,e===2||e===3){let g=this.el.content.firstChild;g.replaceWith(...g.childNodes);}for(;(i=B.nextNode())!==null&&a.length<p;){if(i.nodeType===1){if(i.hasAttributes())for(let g of i.getAttributeNames())if(g.endsWith(he)){let S=m[s++],_=i.getAttribute(g).split(O),M=/([.?@])?(.*)/.exec(S);a.push({type:1,index:o,name:M[2],strings:_,ctor:M[1]==="."?Ot:M[1]==="?"?Nt:M[1]==="@"?zt:j}),i.removeAttribute(g);}else g.startsWith(O)&&(a.push({type:6,index:o}),i.removeAttribute(g));if(ge.test(i.tagName)){let g=i.textContent.split(O),S=g.length-1;if(S>0){i.textContent=ft?ft.emptyScript:"";for(let _=0;_<S;_++)i.append(g[_],rt()),B.nextNode(),a.push({type:2,index:++o});i.append(g[S],rt());}}}else if(i.nodeType===8)if(i.data===ue)a.push({type:2,index:o});else {let g=-1;for(;(g=i.data.indexOf(O,g+1))!==-1;)a.push({type:7,index:o}),g+=O.length-1;}o++;}}static createElement(t,e){let r=P.createElement("template");return r.innerHTML=t,r}};function F(n,t,e=n,r){if(t===L)return t;let i=r!==void 0?e._$Co?.[r]:e._$Cl,o=nt(t)?void 0:t._$litDirective$;return i?.constructor!==o&&(i?._$AO?.(false),o===void 0?i=void 0:(i=new o(n),i._$AT(n,e,r)),r!==void 0?(e._$Co??=[])[r]=i:e._$Cl=i),i!==void 0&&(t=F(n,i._$AS(n,t.values),i,r)),t}var Dt=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,i=(t?.creationScope??P).importNode(e,true);B.currentNode=i;let o=B.nextNode(),s=0,p=0,a=r[0];for(;a!==void 0;){if(s===a.index){let u;a.type===2?u=new ot(o,o.nextSibling,this,t):a.type===1?u=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(u=new Bt(o,this,t)),this._$AV.push(u),a=r[++p];}s!==a?.index&&(o=B.nextNode(),s++);}return B.currentNode=P,i}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++;}},ot=class n{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,i){this.type=2,this._$AH=c,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=i,this._$Cv=i?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=F(this,t,e),nt(t)?t===c||t==null||t===""?(this._$AH!==c&&this._$AR(),this._$AH=c):t!==this._$AH&&t!==L&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):pr(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==c&&nt(this._$AH)?this._$AA.nextSibling.data=t:this.T(P.createTextNode(t)),this._$AH=t;}$(t){let{values:e,_$litType$:r}=t,i=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=it.createElement(fe(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===i)this._$AH.p(e);else {let o=new Dt(i,this),s=o.u(this.options);o.p(e),this.T(s),this._$AH=o;}}_$AC(t){let e=ce.get(t.strings);return e===void 0&&ce.set(t.strings,e=new it(t)),e}k(t){Pt(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,i=0;for(let o of t)i===e.length?e.push(r=new n(this.O(rt()),this.O(rt()),this,this.options)):r=e[i],r._$AI(o),i++;i<e.length&&(this._$AR(r&&r._$AB.nextSibling,i),e.length=i);}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(false,true,e);t!==this._$AB;){let r=oe(t).nextSibling;oe(t).remove(),t=r;}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t));}},j=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,i,o){this.type=1,this._$AH=c,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=c;}_$AI(t,e=this,r,i){let o=this.strings,s=false;if(o===void 0)t=F(this,t,e,0),s=!nt(t)||t!==this._$AH&&t!==L,s&&(this._$AH=t);else {let p=t,a,u;for(t=o[0],a=0;a<o.length-1;a++)u=F(this,p[r+a],e,a),u===L&&(u=this._$AH[a]),s||=!nt(u)||u!==this._$AH[a],u===c?t=c:t!==c&&(t+=(u??"")+o[a+1]),this._$AH[a]=u;}s&&!i&&this.j(t);}j(t){t===c?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}},Ot=class extends j{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===c?void 0:t;}},Nt=class extends j{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==c);}},zt=class extends j{constructor(t,e,r,i,o){super(t,e,r,i,o),this.type=5;}_$AI(t,e=this){if((t=F(this,t,e,0)??c)===L)return;let r=this._$AH,i=t===c&&r!==c||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,o=t!==c&&(r===c||i);i&&this.element.removeEventListener(this.name,this,r),o&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}},Bt=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r;}get _$AU(){return this._$AM._$AU}_$AI(t){F(this,t);}};var dr=mt.litHtmlPolyfillSupport;dr?.(it,ot),(mt.litHtmlVersions??=[]).push("3.3.2");var me=(n,t,e)=>{let r=e?.renderBefore??t,i=r._$litPart$;if(i===void 0){let o=e?.renderBefore??null;r._$litPart$=i=new ot(t.insertBefore(rt(),o),o,void 0,e??{});}return i._$AI(n),i};var Ft=globalThis,A=class extends I{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=me(e,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return L}};A._$litElement$=true,A.finalized=true,Ft.litElementHydrateSupport?.({LitElement:A});var cr=Ft.litElementPolyfillSupport;cr?.({LitElement:A});(Ft.litElementVersions??=[]).push("4.2.2");var bt=n=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(n,t);}):customElements.define(n,t);};var hr={attribute:true,type:String,converter:Q,reflect:false,hasChanged:gt},ur=(n=hr,t,e)=>{let{kind:r,metadata:i}=e,o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),r==="setter"&&((n=Object.create(n)).wrapped=true),o.set(e.name,n),r==="accessor"){let{name:s}=e;return {set(p){let a=t.get.call(this);t.set.call(this,p),this.requestUpdate(s,a,n,true,p);},init(p){return p!==void 0&&this.C(s,void 0,n,p),p}}}if(r==="setter"){let{name:s}=e;return function(p){let a=this[s];t.call(this,p),this.requestUpdate(s,a,n,true,p);}}throw Error("Unsupported decorator location: "+r)};function h(n){return (t,e)=>typeof e=="object"?ur(n,t,e):((r,i,o)=>{let s=i.hasOwnProperty(o);return i.constructor.createProperty(o,r),s?Object.getOwnPropertyDescriptor(i,o):void 0})(n,t,e)}function U(n){return h({...n,state:true,attribute:false})}var be={ATTRIBUTE:1},ye=n=>(...t)=>({_$litDirective$:n,values:t}),xt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,r){this._$Ct=t,this._$AM=e,this._$Ci=r;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var xe="important",gr=" !"+xe,y=ye(class extends xt{constructor(n){if(super(n),n.type!==be.ATTRIBUTE||n.name!=="style"||n.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(n){return Object.keys(n).reduce((t,e)=>{let r=n[e];return r==null?t:t+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(n,[t]){let{style:e}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(let r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?e.removeProperty(r):e[r]=null);for(let r in t){let i=t[r];if(i!=null){this.ft.add(r);let o=typeof i=="string"&&i.endsWith(gr);r.includes("-")||o?e.setProperty(r,o?i.slice(0,-11):i,o?xe:""):e[r]=i;}}return L}});var G={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ve={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)"},R={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};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 $(...n){return n.filter(Boolean).join(" ")}function st(n){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(n)}function Se(n){return {"top-left":"np:top-0 np:left-0","top-right":"np:top-0 np:right-0","bottom-left":"np:bottom-0 np:left-0","bottom-right":"np:bottom-0 np:right-0"}[n]}function _e(n){return {"top-left":"np:-rotate-45 np:-translate-x-1/4 np:-translate-y-1/2","top-right":"np:rotate-45 np:translate-x-1/4 np:-translate-y-1/2","bottom-left":"np:rotate-45 np:-translate-x-1/4 np:translate-y-1/2","bottom-right":"np:-rotate-45 np:translate-x-1/4 np:translate-y-1/2"}[n]}function vt(n){let e=n.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[e.length-1][0]).toUpperCase()}function jt(n){return Math.round(n*.38)}function Ee(n,t){let r=Math.max(t?18:10,Math.round(n*(t?.32:.22))),i=Math.round(r*.6);return {size:r,fontSize:i}}function $e(n,t){return Math.max(8,Math.round(n*.25))+(t-1)*2}function Ce(n,t){return typeof n=="string"?n:t&&n>t?`${t}+`:n.toString()}function Ae(n){return n.length===0?"transparent":n.length===1?n[0]:`conic-gradient(${n.map((e,r)=>{let i=r/n.length*360,o=(r+1)/n.length*360;return `${e} ${i}deg ${o}deg`}).join(", ")})`}function fr(n){let t=0;for(let e=0;e<n.length;e++){let r=n.charCodeAt(e);t=(t<<5)-t+r,t&=t;}return Math.abs(t)}function Re(n,t,e){let i=Math.max(0,Math.min(100,n))/100*360;return `conic-gradient(from 270deg, ${t} 0deg ${i}deg, ${e} ${i}deg 360deg)`}function wt(n){let t=["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=fr(n)%t.length;return t[e]}function Te(n){return typeof n=="number"?n:G[n]??G[T.size]}function ke(n,t,e){let r=e?t-1:t;if(n<=r)return {visible:n,hidden:0,showCounter:false};let i=r-1,o=n-i;return {visible:i,hidden:o,showCounter:true}}function St(n,t,e,r,i){let o=i??t*(1-e);return n*o}function Ie(n,t,e){return e==="ltr"?t-n:n+1}function Le(n,t,e,r){if(n===0)return 0;if(n===1)return t;let i=r??t*(1-e);return t+i*(n-1)}function Ue(n){return n>99?"+99":`+${n}`}function Me(n){return n<=80?"80":n<=120?"120":n<=240?"240":n<=480?"480":"960"}function De(n){if(!(n&&st(n)))return "light";let t=n.replace("#","");t.length===3&&(t=t.split("").map(s=>s+s).join(""));let e=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);return (.299*e+.587*r+.114*i)/255>.5?"light":"dark"}function Oe(n,t,e,r,i){let o=n.endsWith("/")?n.slice(0,-1):n,s=`${t}_${e}_${r}.webp`;return `${o}/api/profile-picture/cdn/${s}?hostname=${i}`}function Ne(n){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[n]}function ze(n,t){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"}[n],style:{borderColor:t,borderStyle:"solid"}}}function Be(n,t){return t?{className:"",style:{background:t}}:n?n.includes("gradient")?{className:"",style:{background:n}}:{className:"",style:{backgroundColor:n}}:{className:"",style:{backgroundColor:"#e7e7e7"}}}function Pe(n){return {boxShadow:we[n]}}var mr={shimmer:`
|
|
1
|
+
var We=Object.defineProperty;var Ve=Object.getOwnPropertyDescriptor;var d=(n,t,e,r)=>{for(var i=r>1?void 0:r?Ve(t,e):t,o=n.length-1,s;o>=0;o--)(s=n[o])&&(i=(r?s(t,e,i):s(i))||i);return r&&i&&We(t,e,i),i};var $t="grasco-profile-picture-styles",G=false,Kt=false;function Jt(){if(G||typeof document>"u")return;if(document.getElementById($t)){G=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){G=true;return}Kt||(Kt=true,qe());}function qe(){(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>Ye());}function Ye(){if(G||typeof document>"u")return;if(document.getElementById($t)){G=true;return}let n=Ke();if(!n)return;let t=document.createElement("link");t.id=$t,t.rel="stylesheet",t.href=n,document.head.appendChild(t),G=true;}function Ke(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let t=import.meta.url;if(t)return `${t.substring(0,t.lastIndexOf("/")+1)}dist/styles.css`}catch{}let n=document.currentScript;if(n?.src){let t=new URL(n.src);return `${t.href.substring(0,t.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var Xt=class{get shadowRoot(){return this.__host.__shadowRoot}constructor(t){this.ariaActiveDescendantElement=null,this.ariaAtomic="",this.ariaAutoComplete="",this.ariaBrailleLabel="",this.ariaBrailleRoleDescription="",this.ariaBusy="",this.ariaChecked="",this.ariaColCount="",this.ariaColIndex="",this.ariaColIndexText="",this.ariaColSpan="",this.ariaControlsElements=null,this.ariaCurrent="",this.ariaDescribedByElements=null,this.ariaDescription="",this.ariaDetailsElements=null,this.ariaDisabled="",this.ariaErrorMessageElements=null,this.ariaExpanded="",this.ariaFlowToElements=null,this.ariaHasPopup="",this.ariaHidden="",this.ariaInvalid="",this.ariaKeyShortcuts="",this.ariaLabel="",this.ariaLabelledByElements=null,this.ariaLevel="",this.ariaLive="",this.ariaModal="",this.ariaMultiLine="",this.ariaMultiSelectable="",this.ariaOrientation="",this.ariaOwnsElements=null,this.ariaPlaceholder="",this.ariaPosInSet="",this.ariaPressed="",this.ariaReadOnly="",this.ariaRelevant="",this.ariaRequired="",this.ariaRoleDescription="",this.ariaRowCount="",this.ariaRowIndex="",this.ariaRowIndexText="",this.ariaRowSpan="",this.ariaSelected="",this.ariaSetSize="",this.ariaSort="",this.ariaValueMax="",this.ariaValueMin="",this.ariaValueNow="",this.ariaValueText="",this.role="",this.form=null,this.labels=[],this.states=new Set,this.validationMessage="",this.validity={},this.willValidate=true,this.__host=t;}checkValidity(){return console.warn("`ElementInternals.checkValidity()` was called on the server.This method always returns true."),true}reportValidity(){return true}setFormValue(){}setValidity(){}};var T=function(n,t,e,r,i){if(typeof t=="function"?n!==t||true:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t.set(n,e),e},E=function(n,t,e,r){if(typeof t=="function"?n!==t||!r:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(n):r?r.value:t.get(n)},W,ct,ht,Z,At,Q,ut,P,tt,z,gt,Zt,Qt=n=>typeof n=="boolean"?n:n?.capture??false;var Tt=class{constructor(){this.__eventListeners=new Map,this.__captureEventListeners=new Map;}addEventListener(t,e,r){if(e==null)return;let i=Qt(r)?this.__captureEventListeners:this.__eventListeners,o=i.get(t);if(o===void 0)o=new Map,i.set(t,o);else if(o.has(e))return;let s=typeof r=="object"&&r?r:{};s.signal?.addEventListener("abort",()=>this.removeEventListener(t,e,r)),o.set(e,s??{});}removeEventListener(t,e,r){if(e==null)return;let i=Qt(r)?this.__captureEventListeners:this.__eventListeners,o=i.get(t);o!==void 0&&(o.delete(e),o.size||i.delete(t));}dispatchEvent(t){let e=[this],r=this.__eventTargetParent;if(t.composed)for(;r;)e.push(r),r=r.__eventTargetParent;else for(;r&&r!==this.__host;)e.push(r),r=r.__eventTargetParent;let i=false,o=false,s=0,p=null,a=null,h=null,m=t.stopPropagation,g=t.stopImmediatePropagation;Object.defineProperties(t,{target:{get(){return p??a},...f},srcElement:{get(){return t.target},...f},currentTarget:{get(){return h},...f},eventPhase:{get(){return s},...f},composedPath:{value:()=>e,...f},stopPropagation:{value:()=>{i=true,m.call(t);},...f},stopImmediatePropagation:{value:()=>{o=true,g.call(t);},...f}});let w=(y,A,M)=>{typeof y=="function"?y(t):typeof y?.handleEvent=="function"&&y.handleEvent(t),A.once&&M.delete(y);},S=()=>(h=null,s=0,!t.defaultPrevented),_=e.slice().reverse();p=!this.__host||!t.composed?this:null;let v=y=>{for(a=this;a.__host&&y.includes(a.__host);)a=a.__host;};for(let y of _){!p&&(!a||a===y.__host)&&v(_.slice(_.indexOf(y))),h=y,s=y===t.target?2:1;let A=y.__captureEventListeners.get(t.type);if(A){for(let[M,X]of A)if(w(M,X,A),o)return S()}if(i)return S()}let N=t.bubbles?e:[this];a=null;for(let y of N){!p&&(!a||y===a.__host)&&v(N.slice(0,N.indexOf(y)+1)),h=y,s=y===t.target?2:3;let A=y.__eventListeners.get(t.type);if(A){for(let[M,X]of A)if(w(M,X,A),o)return S()}if(i)return S()}return S()}},Rt=Tt;var f={__proto__:null};f.enumerable=true;Object.freeze(f);var kt=(z=class{constructor(t,e={}){if(W.set(this,false),ct.set(this,false),ht.set(this,false),Z.set(this,false),At.set(this,Date.now()),Q.set(this,false),ut.set(this,void 0),P.set(this,void 0),tt.set(this,void 0),this.NONE=0,this.CAPTURING_PHASE=1,this.AT_TARGET=2,this.BUBBLING_PHASE=3,arguments.length===0)throw new Error("The type argument must be specified");if(typeof e!="object"||!e)throw new Error('The "options" argument must be an object');let{bubbles:r,cancelable:i,composed:o}=e;T(this,W,!!i),T(this,ct,!!r),T(this,ht,!!o),T(this,ut,`${t}`),T(this,P,null),T(this,tt,false);}initEvent(t,e,r){throw new Error("Method not implemented.")}stopImmediatePropagation(){this.stopPropagation();}preventDefault(){T(this,Z,true);}get target(){return E(this,P,"f")}get currentTarget(){return E(this,P,"f")}get srcElement(){return E(this,P,"f")}get type(){return E(this,ut,"f")}get cancelable(){return E(this,W,"f")}get defaultPrevented(){return E(this,W,"f")&&E(this,Z,"f")}get timeStamp(){return E(this,At,"f")}composedPath(){return E(this,tt,"f")?[E(this,P,"f")]:[]}get returnValue(){return !E(this,W,"f")||!E(this,Z,"f")}get bubbles(){return E(this,ct,"f")}get composed(){return E(this,ht,"f")}get eventPhase(){return E(this,tt,"f")?z.AT_TARGET:z.NONE}get cancelBubble(){return E(this,Q,"f")}set cancelBubble(t){t&&T(this,Q,true);}stopPropagation(){T(this,Q,true);}get isTrusted(){return false}},W=new WeakMap,ct=new WeakMap,ht=new WeakMap,Z=new WeakMap,At=new WeakMap,Q=new WeakMap,ut=new WeakMap,P=new WeakMap,tt=new WeakMap,z.NONE=0,z.CAPTURING_PHASE=1,z.AT_TARGET=2,z.BUBBLING_PHASE=3,z);Object.defineProperties(kt.prototype,{initEvent:f,stopImmediatePropagation:f,preventDefault:f,target:f,currentTarget:f,srcElement:f,type:f,cancelable:f,defaultPrevented:f,timeStamp:f,composedPath:f,returnValue:f,bubbles:f,composed:f,eventPhase:f,cancelBubble:f,stopPropagation:f,isTrusted:f});var te=(Zt=class extends kt{constructor(t,e={}){super(t,e),gt.set(this,void 0),T(this,gt,e?.detail??null);}initCustomEvent(t,e,r,i){throw new Error("Method not implemented.")}get detail(){return E(this,gt,"f")}},gt=new WeakMap,Zt);Object.defineProperties(te.prototype,{detail:f});var It=kt,Mt=te;var $;($=class{constructor(){this.STYLE_RULE=1,this.CHARSET_RULE=2,this.IMPORT_RULE=3,this.MEDIA_RULE=4,this.FONT_FACE_RULE=5,this.PAGE_RULE=6,this.NAMESPACE_RULE=10,this.KEYFRAMES_RULE=7,this.KEYFRAME_RULE=8,this.SUPPORTS_RULE=12,this.COUNTER_STYLE_RULE=11,this.FONT_FEATURE_VALUES_RULE=14,this.__parentStyleSheet=null,this.cssText="";}get parentRule(){return null}get parentStyleSheet(){return this.__parentStyleSheet}get type(){return 0}},$.STYLE_RULE=1,$.CHARSET_RULE=2,$.IMPORT_RULE=3,$.MEDIA_RULE=4,$.FONT_FACE_RULE=5,$.PAGE_RULE=6,$.NAMESPACE_RULE=10,$.KEYFRAMES_RULE=7,$.KEYFRAME_RULE=8,$.SUPPORTS_RULE=12,$.COUNTER_STYLE_RULE=11,$.FONT_FEATURE_VALUES_RULE=14,$);globalThis.Event??=It;globalThis.CustomEvent??=Mt;var ee=new WeakMap,et=n=>{let t=ee.get(n);return t===void 0&&ee.set(n,t=new Map),t},Je=class extends Rt{constructor(){super(...arguments),this.__shadowRootMode=null,this.__shadowRoot=null,this.__internals=null;}get attributes(){return Array.from(et(this)).map(([t,e])=>({name:t,value:e}))}get shadowRoot(){return this.__shadowRootMode==="closed"?null:this.__shadowRoot}get localName(){return this.constructor.__localName}get tagName(){return this.localName?.toUpperCase()}setAttribute(t,e){et(this).set(t,String(e));}removeAttribute(t){et(this).delete(t);}toggleAttribute(t,e){if(this.hasAttribute(t)){if(e===void 0||!e)return this.removeAttribute(t),false}else return e===void 0||e?(this.setAttribute(t,""),true):false;return true}hasAttribute(t){return et(this).has(t)}attachShadow(t){let e={host:this};return this.__shadowRootMode=t.mode,t&&t.mode==="open"&&(this.__shadowRoot=e),e}attachInternals(){if(this.__internals!==null)throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");let t=new Xt(this);return this.__internals=t,t}getAttribute(t){return et(this).get(t)??null}};var Xe=class extends Je{},Ut=Xe;globalThis.litServerRoot??=Object.defineProperty(new Ut,"localName",{get(){return "lit-server-root"}});function Ze(){let n,t;return {promise:new Promise((r,i)=>{n=r,t=i;}),resolve:n,reject:t}}var Lt=class{constructor(){this.__definitions=new Map,this.__reverseDefinitions=new Map,this.__pendingWhenDefineds=new Map;}define(t,e){if(this.__definitions.has(t))if(process.env.NODE_ENV==="development")console.warn(`'CustomElementRegistry' already has "${t}" defined. This may have been caused by live reload or hot module replacement in which case it can be safely ignored.
|
|
2
|
+
Make sure to test your application with a production build as repeat registrations will throw in production.`);else throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the name "${t}" has already been used with this registry`);if(this.__reverseDefinitions.has(e))throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the constructor has already been used with this registry for the tag name ${this.__reverseDefinitions.get(e)}`);e.__localName=t,this.__definitions.set(t,{ctor:e,observedAttributes:e.observedAttributes??[]}),this.__reverseDefinitions.set(e,t),this.__pendingWhenDefineds.get(t)?.resolve(e),this.__pendingWhenDefineds.delete(t);}get(t){return this.__definitions.get(t)?.ctor}getName(t){return this.__reverseDefinitions.get(t)??null}upgrade(t){throw new Error("customElements.upgrade is not currently supported in SSR. Please file a bug if you need it.")}async whenDefined(t){let e=this.__definitions.get(t);if(e)return e.ctor;let r=this.__pendingWhenDefineds.get(t);return r||(r=Ze(),this.__pendingWhenDefineds.set(t,r)),r.promise}},Qe=Lt;var re=new Qe;var rt=globalThis,ft=rt.ShadowRoot&&(rt.ShadyCSS===void 0||rt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ie=Symbol(),ne=new WeakMap,mt=class{constructor(t,e,r){if(this._$cssResult$=true,r!==ie)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o,e=this.t;if(ft&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=ne.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&ne.set(e,t));}return t}toString(){return this.cssText}},oe=n=>new mt(typeof n=="string"?n:n+"",void 0,ie);var se=(n,t)=>{if(ft)n.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let r=document.createElement("style"),i=rt.litNonce;i!==void 0&&r.setAttribute("nonce",i),r.textContent=e.cssText,n.appendChild(r);}},Ot=ft||rt.CSSStyleSheet===void 0?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return oe(e)})(n):n;var{is:tr,defineProperty:er,getOwnPropertyDescriptor:rr,getOwnPropertyNames:nr,getOwnPropertySymbols:ir,getPrototypeOf:or}=Object,ot=globalThis;ot.customElements??=re;var ae=ot.trustedTypes,sr=ae?ae.emptyScript:"",ar=ot.reactiveElementPolyfillSupport,nt=(n,t)=>n,it={toAttribute(n,t){switch(t){case Boolean:n=n?sr:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n);}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n);}catch{e=null;}}return e}},bt=(n,t)=>!tr(n,t),pe={attribute:true,type:String,converter:it,reflect:false,useDefault:false,hasChanged:bt};Symbol.metadata??=Symbol("metadata"),ot.litPropertyMetadata??=new WeakMap;var L=class extends(globalThis.HTMLElement??Ut){static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=pe){if(e.state&&(e.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=true),this.elementProperties.set(t,e),!e.noAccessor){let r=Symbol(),i=this.getPropertyDescriptor(t,r,e);i!==void 0&&er(this.prototype,t,i);}}static getPropertyDescriptor(t,e,r){let{get:i,set:o}=rr(this.prototype,t)??{get(){return this[e]},set(s){this[e]=s;}};return {get:i,set(s){let p=i?.call(this);o?.call(this,s),this.requestUpdate(t,p,r);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??pe}static _$Ei(){if(this.hasOwnProperty(nt("elementProperties")))return;let t=or(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(nt("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(nt("properties"))){let e=this.properties,r=[...nr(e),...ir(e)];for(let i of r)this.createProperty(i,e[i]);}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,i]of e)this.elementProperties.set(r,i);}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let i=this._$Eu(e,r);i!==void 0&&this._$Eh.set(i,e);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let i of r)e.unshift(Ot(i));}else t!==void 0&&e.push(Ot(t));return e}static _$Eu(t,e){let r=e.attribute;return r===false?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t);}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return se(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,e,r){this._$AK(t,r);}_$ET(t,e){let r=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,r);if(i!==void 0&&r.reflect===true){let o=(r.converter?.toAttribute!==void 0?r.converter:it).toAttribute(e,r.type);this._$Em=t,o==null?this.removeAttribute(i):this.setAttribute(i,o),this._$Em=null;}}_$AK(t,e){let r=this.constructor,i=r._$Eh.get(t);if(i!==void 0&&this._$Em!==i){let o=r.getPropertyOptions(i),s=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:it;this._$Em=i;let p=s.fromAttribute(e,o.type);this[i]=p??this._$Ej?.get(i)??p,this._$Em=null;}}requestUpdate(t,e,r,i=false,o){if(t!==void 0){let s=this.constructor;if(i===false&&(o=this[t]),r??=s.getPropertyOptions(t),!((r.hasChanged??bt)(o,e)||r.useDefault&&r.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,r))))return;this.C(t,e,r);}this.isUpdatePending===false&&(this._$ES=this._$EP());}C(t,e,{useDefault:r,reflect:i,wrapped:o},s){r&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),o!==true||s!==void 0)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),i===true&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(e){Promise.reject(e);}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[i,o]of this._$Ep)this[i]=o;this._$Ep=void 0;}let r=this.constructor.elementProperties;if(r.size>0)for(let[i,o]of r){let{wrapped:s}=o,p=this[i];s!==true||this._$AL.has(i)||p===void 0||this.C(i,void 0,o,p);}}let t=false,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(e)):this._$EM();}catch(r){throw t=false,this._$EM(),r}t&&this._$AE(e);}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM();}updated(t){}firstUpdated(t){}};L.elementStyles=[],L.shadowRootOptions={mode:"open"},L[nt("elementProperties")]=new Map,L[nt("finalized")]=new Map,ar?.({ReactiveElement:L}),(ot.reactiveElementVersions??=[]).push("2.1.2");var xt=globalThis,le=n=>n,yt=xt.trustedTypes,de=yt?yt.createPolicy("lit-html",{createHTML:n=>n}):void 0,fe="$lit$",B=`lit$${Math.random().toFixed(9).slice(2)}$`,be="?"+B,pr=`<${be}>`,j=xt.document===void 0?{createTreeWalker:()=>({})}:document,at=()=>j.createComment(""),pt=n=>n===null||typeof n!="object"&&typeof n!="function",Ft=Array.isArray,lr=n=>Ft(n)||typeof n?.[Symbol.iterator]=="function",Dt=`[
|
|
3
|
+
\f\r]`,st=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ce=/-->/g,he=/>/g,H=RegExp(`>|${Dt}(?:([^\\s"'>=/]+)(${Dt}*=${Dt}*(?:[^
|
|
4
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),ue=/'/g,ge=/"/g,ye=/^(?:script|style|textarea|title)$/i,jt=n=>(t,...e)=>({_$litType$:n,strings:t,values:e}),b=jt(1),U=Symbol.for("lit-noChange"),u=Symbol.for("lit-nothing"),me=new WeakMap,F=j.createTreeWalker(j,129);function xe(n,t){if(!Ft(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return de!==void 0?de.createHTML(t):t}var dr=(n,t)=>{let e=n.length-1,r=[],i,o=t===2?"<svg>":t===3?"<math>":"",s=st;for(let p=0;p<e;p++){let a=n[p],h,m,g=-1,w=0;for(;w<a.length&&(s.lastIndex=w,m=s.exec(a),m!==null);)w=s.lastIndex,s===st?m[1]==="!--"?s=ce:m[1]!==void 0?s=he:m[2]!==void 0?(ye.test(m[2])&&(i=RegExp("</"+m[2],"g")),s=H):m[3]!==void 0&&(s=H):s===H?m[0]===">"?(s=i??st,g=-1):m[1]===void 0?g=-2:(g=s.lastIndex-m[2].length,h=m[1],s=m[3]===void 0?H:m[3]==='"'?ge:ue):s===ge||s===ue?s=H:s===ce||s===he?s=st:(s=H,i=void 0);let S=s===H&&n[p+1].startsWith("/>")?" ":"";o+=s===st?a+pr:g>=0?(r.push(h),a.slice(0,g)+fe+a.slice(g)+B+S):a+B+(g===-2?p:S);}return [xe(n,o+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},lt=class n{constructor({strings:t,_$litType$:e},r){let i;this.parts=[];let o=0,s=0,p=t.length-1,a=this.parts,[h,m]=dr(t,e);if(this.el=n.createElement(h,r),F.currentNode=this.el.content,e===2||e===3){let g=this.el.content.firstChild;g.replaceWith(...g.childNodes);}for(;(i=F.nextNode())!==null&&a.length<p;){if(i.nodeType===1){if(i.hasAttributes())for(let g of i.getAttributeNames())if(g.endsWith(fe)){let w=m[s++],S=i.getAttribute(g).split(B),_=/([.?@])?(.*)/.exec(w);a.push({type:1,index:o,name:_[2],strings:S,ctor:_[1]==="."?zt:_[1]==="?"?Bt:_[1]==="@"?Pt:q}),i.removeAttribute(g);}else g.startsWith(B)&&(a.push({type:6,index:o}),i.removeAttribute(g));if(ye.test(i.tagName)){let g=i.textContent.split(B),w=g.length-1;if(w>0){i.textContent=yt?yt.emptyScript:"";for(let S=0;S<w;S++)i.append(g[S],at()),F.nextNode(),a.push({type:2,index:++o});i.append(g[w],at());}}}else if(i.nodeType===8)if(i.data===be)a.push({type:2,index:o});else {let g=-1;for(;(g=i.data.indexOf(B,g+1))!==-1;)a.push({type:7,index:o}),g+=B.length-1;}o++;}}static createElement(t,e){let r=j.createElement("template");return r.innerHTML=t,r}};function V(n,t,e=n,r){if(t===U)return t;let i=r!==void 0?e._$Co?.[r]:e._$Cl,o=pt(t)?void 0:t._$litDirective$;return i?.constructor!==o&&(i?._$AO?.(false),o===void 0?i=void 0:(i=new o(n),i._$AT(n,e,r)),r!==void 0?(e._$Co??=[])[r]=i:e._$Cl=i),i!==void 0&&(t=V(n,i._$AS(n,t.values),i,r)),t}var Nt=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,i=(t?.creationScope??j).importNode(e,true);F.currentNode=i;let o=F.nextNode(),s=0,p=0,a=r[0];for(;a!==void 0;){if(s===a.index){let h;a.type===2?h=new dt(o,o.nextSibling,this,t):a.type===1?h=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(h=new Ht(o,this,t)),this._$AV.push(h),a=r[++p];}s!==a?.index&&(o=F.nextNode(),s++);}return F.currentNode=j,i}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++;}},dt=class n{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,i){this.type=2,this._$AH=u,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=i,this._$Cv=i?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=V(this,t,e),pt(t)?t===u||t==null||t===""?(this._$AH!==u&&this._$AR(),this._$AH=u):t!==this._$AH&&t!==U&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):lr(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==u&&pt(this._$AH)?this._$AA.nextSibling.data=t:this.T(j.createTextNode(t)),this._$AH=t;}$(t){let{values:e,_$litType$:r}=t,i=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=lt.createElement(xe(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===i)this._$AH.p(e);else {let o=new Nt(i,this),s=o.u(this.options);o.p(e),this.T(s),this._$AH=o;}}_$AC(t){let e=me.get(t.strings);return e===void 0&&me.set(t.strings,e=new lt(t)),e}k(t){Ft(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,i=0;for(let o of t)i===e.length?e.push(r=new n(this.O(at()),this.O(at()),this,this.options)):r=e[i],r._$AI(o),i++;i<e.length&&(this._$AR(r&&r._$AB.nextSibling,i),e.length=i);}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(false,true,e);t!==this._$AB;){let r=le(t).nextSibling;le(t).remove(),t=r;}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t));}},q=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,i,o){this.type=1,this._$AH=u,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=u;}_$AI(t,e=this,r,i){let o=this.strings,s=false;if(o===void 0)t=V(this,t,e,0),s=!pt(t)||t!==this._$AH&&t!==U,s&&(this._$AH=t);else {let p=t,a,h;for(t=o[0],a=0;a<o.length-1;a++)h=V(this,p[r+a],e,a),h===U&&(h=this._$AH[a]),s||=!pt(h)||h!==this._$AH[a],h===u?t=u:t!==u&&(t+=(h??"")+o[a+1]),this._$AH[a]=h;}s&&!i&&this.j(t);}j(t){t===u?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}},zt=class extends q{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===u?void 0:t;}},Bt=class extends q{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==u);}},Pt=class extends q{constructor(t,e,r,i,o){super(t,e,r,i,o),this.type=5;}_$AI(t,e=this){if((t=V(this,t,e,0)??u)===U)return;let r=this._$AH,i=t===u&&r!==u||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,o=t!==u&&(r===u||i);i&&this.element.removeEventListener(this.name,this,r),o&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}},Ht=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r;}get _$AU(){return this._$AM._$AU}_$AI(t){V(this,t);}};var cr=xt.litHtmlPolyfillSupport;cr?.(lt,dt),(xt.litHtmlVersions??=[]).push("3.3.2");var Y=(n,t,e)=>{let r=e?.renderBefore??t,i=r._$litPart$;if(i===void 0){let o=e?.renderBefore??null;r._$litPart$=i=new dt(t.insertBefore(at(),o),o,void 0,e??{});}return i._$AI(n),i};var Gt=globalThis,R=class extends L{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Y(e,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return U}};R._$litElement$=true,R.finalized=true,Gt.litElementHydrateSupport?.({LitElement:R});var hr=Gt.litElementPolyfillSupport;hr?.({LitElement:R});(Gt.litElementVersions??=[]).push("4.2.2");var vt=n=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(n,t);}):customElements.define(n,t);};var ur={attribute:true,type:String,converter:it,reflect:false,hasChanged:bt},gr=(n=ur,t,e)=>{let{kind:r,metadata:i}=e,o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),r==="setter"&&((n=Object.create(n)).wrapped=true),o.set(e.name,n),r==="accessor"){let{name:s}=e;return {set(p){let a=t.get.call(this);t.set.call(this,p),this.requestUpdate(s,a,n,true,p);},init(p){return p!==void 0&&this.C(s,void 0,n,p),p}}}if(r==="setter"){let{name:s}=e;return function(p){let a=this[s];t.call(this,p),this.requestUpdate(s,a,n,true,p);}}throw Error("Unsupported decorator location: "+r)};function c(n){return (t,e)=>typeof e=="object"?gr(n,t,e):((r,i,o)=>{let s=i.hasOwnProperty(o);return i.constructor.createProperty(o,r),s?Object.getOwnPropertyDescriptor(i,o):void 0})(n,t,e)}function O(n){return c({...n,state:true,attribute:false})}var ve={ATTRIBUTE:1},we=n=>(...t)=>({_$litDirective$:n,values:t}),St=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,r){this._$Ct=t,this._$AM=e,this._$Ci=r;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var Se="important",mr=" !"+Se,x=we(class extends St{constructor(n){if(super(n),n.type!==ve.ATTRIBUTE||n.name!=="style"||n.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(n){return Object.keys(n).reduce((t,e)=>{let r=n[e];return r==null?t:t+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(n,[t]){let{style:e}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(let r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?e.removeProperty(r):e[r]=null);for(let r in t){let i=t[r];if(i!=null){this.ft.add(r);let o=typeof i=="string"&&i.endsWith(mr);r.includes("-")||o?e.setProperty(r,o?i.slice(0,-11):i,o?Se:""):e[r]=i;}}return U}});var K={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},Ce={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},_e={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)"},k={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var J={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},I={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function D(...n){return n.filter(Boolean).join(" ")}function Wt(n){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(n)}function Ct(n){let e=n.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 Vt(n){return Math.round(n*.38)}function Ee(n,t){let e;if(t){let i=Math.round(n*.31);e=Math.min(24,Math.max(14,i));}else {let i=Math.round(n*.22);e=Math.min(14,Math.max(8,i));}let r=Math.max(9,Math.round(e*.55));return {size:e,fontSize:r}}function $e(n,t){let e=Math.min(16,Math.max(8,Math.round(n*.2)));return Math.min(18,e+(t-1)*2)}function Ae(n,t){return typeof n=="string"?n:t&&n>t?`${t}+`:n.toString()}function Te(n){return n.length===0?"transparent":n.length===1?n[0]:`conic-gradient(${n.map((e,r)=>{let i=r/n.length*360,o=(r+1)/n.length*360;return `${e} ${i}deg ${o}deg`}).join(", ")})`}function fr(n){let t=0;for(let e=0;e<n.length;e++){let r=n.charCodeAt(e);t=(t<<5)-t+r,t&=t;}return Math.abs(t)}function Re(n,t,e){let i=Math.max(0,Math.min(100,n))/100*360;return `conic-gradient(from 270deg, ${t} 0deg ${i}deg, ${e} ${i}deg 360deg)`}function _t(n){let t=["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=fr(n)%t.length;return t[e]}function ke(n){return typeof n=="number"?n:K[n]??K[I.size]}function qt(n,t,e){let r=e?t-1:t;if(n<=r)return {visible:n,hidden:0,showCounter:false};let i=r-1,o=n-i;return {visible:i,hidden:o,showCounter:true}}function Et(n,t,e,r,i){let o=i??t*(1-e);return n*o}function Ie(n,t,e){return e==="ltr"?t-n:n+1}function Me(n,t,e,r){if(n===0)return 0;if(n===1)return t;let i=r??t*(1-e);return t+i*(n-1)}function Le(n){return n>99?"+99":`+${n}`}function Ue(n){return n<=80?"80":n<=120?"120":n<=240?"240":n<=480?"480":"960"}function Oe(n){if(!(n&&Wt(n)))return "light";let t=n.replace("#","");t.length===3&&(t=t.split("").map(s=>s+s).join(""));let e=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);return (.299*e+.587*r+.114*i)/255>.5?"light":"dark"}function De(n,t,e,r,i){let o=n.endsWith("/")?n.slice(0,-1):n,s=`${t}_${e}_${r}.webp`;return `${o}/api/profile-picture/cdn/${s}?hostname=${i}`}function Ne(n){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[n]}function ze(n,t){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"}[n],style:{borderColor:t,borderStyle:"solid"}}}function Be(n,t){return t?{className:"",style:{background:t}}:n?n.includes("gradient")?{className:"",style:{background:n}}:{className:"",style:{backgroundColor:n}}:{className:"",style:{backgroundColor:"#e7e7e7"}}}function Pe(n){return {boxShadow:_e[n]}}var br={shimmer:`
|
|
5
5
|
@keyframes pp-shimmer {
|
|
6
6
|
0% { transform: translateX(-100%); }
|
|
7
7
|
100% { transform: translateX(100%); }
|
|
@@ -39,8 +39,8 @@ Make sure to test your application with a production build as repeat registratio
|
|
|
39
39
|
0% { transform: scale(0.8); opacity: 0; }
|
|
40
40
|
50% { transform: scale(1.05); }
|
|
41
41
|
100% { transform: scale(1); opacity: 1; }
|
|
42
|
-
}`},
|
|
43
|
-
`),
|
|
42
|
+
}`},yr=Object.values(br).join(`
|
|
43
|
+
`),xr=`
|
|
44
44
|
/* Profile Picture Component Styles */
|
|
45
45
|
.pp-container {
|
|
46
46
|
--pp-transition-duration: 200ms;
|
|
@@ -157,7 +157,6 @@ Make sure to test your application with a production build as repeat registratio
|
|
|
157
157
|
display: flex;
|
|
158
158
|
align-items: center;
|
|
159
159
|
justify-content: center;
|
|
160
|
-
border-radius: 9999px;
|
|
161
160
|
font-weight: 600;
|
|
162
161
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
|
|
163
162
|
line-height: 1;
|
|
@@ -186,24 +185,6 @@ Make sure to test your application with a production build as repeat registratio
|
|
|
186
185
|
box-shadow: 0 0 10px 2px var(--pp-badge-glow-color, currentColor);
|
|
187
186
|
}
|
|
188
187
|
|
|
189
|
-
/* Ribbon styles */
|
|
190
|
-
.pp-ribbon-container {
|
|
191
|
-
position: absolute;
|
|
192
|
-
z-index: 10;
|
|
193
|
-
overflow: hidden;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.pp-ribbon {
|
|
197
|
-
position: absolute;
|
|
198
|
-
width: 100%;
|
|
199
|
-
text-align: center;
|
|
200
|
-
font-weight: 600;
|
|
201
|
-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
|
|
202
|
-
text-transform: uppercase;
|
|
203
|
-
letter-spacing: 0.05em;
|
|
204
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
188
|
/* Ring effect (Instagram-style) */
|
|
208
189
|
.pp-ring {
|
|
209
190
|
position: absolute;
|
|
@@ -262,8 +243,8 @@ Make sure to test your application with a production build as repeat registratio
|
|
|
262
243
|
transition: none !important;
|
|
263
244
|
}
|
|
264
245
|
}
|
|
265
|
-
`,He=`${
|
|
266
|
-
${
|
|
246
|
+
`,He=`${yr}
|
|
247
|
+
${xr}`,Fe=`
|
|
267
248
|
@keyframes np-shimmer {
|
|
268
249
|
0% { background-position: -200% 0; }
|
|
269
250
|
100% { background-position: 200% 0; }
|
|
@@ -273,22 +254,22 @@ ${yr}`,Fe=`
|
|
|
273
254
|
background-size: 200% 100%;
|
|
274
255
|
animation: np-shimmer 1.5s infinite;
|
|
275
256
|
}
|
|
276
|
-
`;function je(n,t=.3){if(
|
|
257
|
+
`;function je(n,t=.3){if(Wt(n)){let e=Number.parseInt(n.slice(1,3),16),r=Number.parseInt(n.slice(3,5),16),i=Number.parseInt(n.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${r}, ${i}, ${t})`}return `0 0 20px 0 ${n}`}var vr=`
|
|
277
258
|
@keyframes ppg-tooltip-in {
|
|
278
259
|
from {
|
|
279
260
|
opacity: 0;
|
|
280
|
-
transform: translateY(4px) scale(0.96);
|
|
261
|
+
transform: translateX(-50%) translateY(4px) scale(0.96);
|
|
281
262
|
}
|
|
282
263
|
to {
|
|
283
264
|
opacity: 1;
|
|
284
|
-
transform: translateY(0) scale(1);
|
|
265
|
+
transform: translateX(-50%) translateY(0) scale(1);
|
|
285
266
|
}
|
|
286
267
|
}
|
|
287
268
|
|
|
288
269
|
@keyframes ppg-dropdown-in {
|
|
289
270
|
from {
|
|
290
271
|
opacity: 0;
|
|
291
|
-
transform: translateY(-
|
|
272
|
+
transform: translateY(-6px) scale(0.95);
|
|
292
273
|
}
|
|
293
274
|
to {
|
|
294
275
|
opacity: 1;
|
|
@@ -304,7 +285,27 @@ ${yr}`,Fe=`
|
|
|
304
285
|
transform: translateY(-4px) scale(1.08);
|
|
305
286
|
}
|
|
306
287
|
}
|
|
307
|
-
|
|
288
|
+
|
|
289
|
+
@keyframes ppg-modal-in {
|
|
290
|
+
from {
|
|
291
|
+
opacity: 0;
|
|
292
|
+
transform: translate(-50%, -50%) scale(0.9);
|
|
293
|
+
}
|
|
294
|
+
to {
|
|
295
|
+
opacity: 1;
|
|
296
|
+
transform: translate(-50%, -50%) scale(1);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
@keyframes ppg-backdrop-in {
|
|
301
|
+
from {
|
|
302
|
+
opacity: 0;
|
|
303
|
+
}
|
|
304
|
+
to {
|
|
305
|
+
opacity: 1;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
`,wr=`
|
|
308
309
|
/* Profile Picture Group Container */
|
|
309
310
|
.ppg-container {
|
|
310
311
|
--ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -385,7 +386,7 @@ ${yr}`,Fe=`
|
|
|
385
386
|
}
|
|
386
387
|
|
|
387
388
|
.ppg-counter:hover {
|
|
388
|
-
background: #
|
|
389
|
+
background: #ebebed;
|
|
389
390
|
transform: scale(1.05);
|
|
390
391
|
}
|
|
391
392
|
|
|
@@ -439,7 +440,7 @@ ${yr}`,Fe=`
|
|
|
439
440
|
|
|
440
441
|
/* Tooltip */
|
|
441
442
|
.ppg-tooltip {
|
|
442
|
-
position:
|
|
443
|
+
position: absolute;
|
|
443
444
|
z-index: 9999;
|
|
444
445
|
padding: 6px 12px;
|
|
445
446
|
background: var(--ppg-tooltip-bg);
|
|
@@ -451,7 +452,8 @@ ${yr}`,Fe=`
|
|
|
451
452
|
box-shadow: var(--ppg-shadow-lg);
|
|
452
453
|
pointer-events: none;
|
|
453
454
|
white-space: nowrap;
|
|
454
|
-
|
|
455
|
+
transform: translateX(-50%);
|
|
456
|
+
animation: ppg-tooltip-in 150ms ease-out forwards;
|
|
455
457
|
backdrop-filter: blur(20px);
|
|
456
458
|
-webkit-backdrop-filter: blur(20px);
|
|
457
459
|
}
|
|
@@ -480,111 +482,168 @@ ${yr}`,Fe=`
|
|
|
480
482
|
/* Dropdown */
|
|
481
483
|
.ppg-dropdown {
|
|
482
484
|
position: absolute;
|
|
483
|
-
z-index:
|
|
484
|
-
|
|
485
|
-
|
|
485
|
+
z-index: 9998;
|
|
486
|
+
right: 0;
|
|
487
|
+
min-width: 220px;
|
|
488
|
+
max-width: 300px;
|
|
486
489
|
background: var(--ppg-dropdown-bg);
|
|
487
|
-
border-radius:
|
|
488
|
-
box-shadow:
|
|
489
|
-
|
|
490
|
+
border-radius: 14px;
|
|
491
|
+
box-shadow:
|
|
492
|
+
0 4px 24px rgba(0, 0, 0, 0.12),
|
|
493
|
+
0 1px 4px rgba(0, 0, 0, 0.08),
|
|
494
|
+
0 0 0 1px var(--ppg-border);
|
|
490
495
|
overflow: hidden;
|
|
491
|
-
animation: ppg-dropdown-in 200ms
|
|
496
|
+
animation: ppg-dropdown-in 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
|
497
|
+
transform-origin: top right;
|
|
498
|
+
backdrop-filter: blur(20px);
|
|
499
|
+
-webkit-backdrop-filter: blur(20px);
|
|
492
500
|
}
|
|
493
501
|
|
|
494
502
|
.ppg-dropdown[data-position="bottom"] {
|
|
495
|
-
top: calc(100% +
|
|
503
|
+
top: calc(100% + 10px);
|
|
496
504
|
}
|
|
497
505
|
|
|
498
506
|
.ppg-dropdown[data-position="top"] {
|
|
499
|
-
bottom: calc(100% +
|
|
507
|
+
bottom: calc(100% + 10px);
|
|
508
|
+
transform-origin: bottom right;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
/* Modal style for mobile */
|
|
512
|
+
.ppg-dropdown[data-position="modal"] {
|
|
513
|
+
transform-origin: center center;
|
|
514
|
+
animation: ppg-modal-in 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
|
515
|
+
border-radius: 20px;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.ppg-backdrop-visible {
|
|
519
|
+
background: rgba(0, 0, 0, 0.4);
|
|
520
|
+
animation: ppg-backdrop-in 200ms ease-out forwards;
|
|
500
521
|
}
|
|
501
522
|
|
|
502
523
|
.ppg-dropdown-header {
|
|
503
|
-
padding:
|
|
504
|
-
font-
|
|
524
|
+
padding: 14px 16px 10px;
|
|
525
|
+
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
|
526
|
+
font-size: 11px;
|
|
505
527
|
font-weight: 600;
|
|
506
528
|
color: #86868b;
|
|
507
529
|
text-transform: uppercase;
|
|
508
|
-
letter-spacing: 0.
|
|
509
|
-
|
|
530
|
+
letter-spacing: 0.06em;
|
|
531
|
+
background: linear-gradient(to bottom, rgba(0,0,0,0.02), transparent);
|
|
510
532
|
}
|
|
511
533
|
|
|
512
534
|
.ppg-dropdown-list {
|
|
513
535
|
overflow-y: auto;
|
|
514
|
-
padding:
|
|
536
|
+
padding: 6px;
|
|
537
|
+
scrollbar-width: thin;
|
|
538
|
+
scrollbar-color: rgba(0,0,0,0.2) transparent;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.ppg-dropdown-list::-webkit-scrollbar {
|
|
542
|
+
width: 6px;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.ppg-dropdown-list::-webkit-scrollbar-track {
|
|
546
|
+
background: transparent;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.ppg-dropdown-list::-webkit-scrollbar-thumb {
|
|
550
|
+
background: rgba(0,0,0,0.15);
|
|
551
|
+
border-radius: 3px;
|
|
515
552
|
}
|
|
516
553
|
|
|
517
554
|
.ppg-dropdown-item {
|
|
518
555
|
display: flex;
|
|
519
556
|
align-items: center;
|
|
520
557
|
gap: 12px;
|
|
521
|
-
padding: 10px
|
|
558
|
+
padding: 10px 12px;
|
|
522
559
|
cursor: pointer;
|
|
523
|
-
|
|
560
|
+
border-radius: 10px;
|
|
561
|
+
transition: all 150ms ease;
|
|
562
|
+
margin: 2px 0;
|
|
524
563
|
}
|
|
525
564
|
|
|
526
565
|
.ppg-dropdown-item:hover {
|
|
527
566
|
background: var(--ppg-dropdown-hover);
|
|
567
|
+
transform: translateX(2px);
|
|
528
568
|
}
|
|
529
569
|
|
|
530
570
|
.ppg-dropdown-item:focus-visible {
|
|
531
571
|
outline: none;
|
|
532
572
|
background: var(--ppg-dropdown-hover);
|
|
573
|
+
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.ppg-dropdown-item:active {
|
|
577
|
+
transform: scale(0.98);
|
|
533
578
|
}
|
|
534
579
|
|
|
535
580
|
.ppg-dropdown-avatar {
|
|
536
581
|
flex-shrink: 0;
|
|
537
|
-
width:
|
|
538
|
-
height:
|
|
582
|
+
width: 36px;
|
|
583
|
+
height: 36px;
|
|
539
584
|
border-radius: 9999px;
|
|
540
585
|
object-fit: cover;
|
|
541
|
-
|
|
586
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
587
|
+
border: 2px solid rgba(255, 255, 255, 0.8);
|
|
542
588
|
}
|
|
543
589
|
|
|
544
590
|
.ppg-dropdown-avatar-fallback {
|
|
545
591
|
flex-shrink: 0;
|
|
546
|
-
width:
|
|
547
|
-
height:
|
|
592
|
+
width: 36px;
|
|
593
|
+
height: 36px;
|
|
548
594
|
border-radius: 9999px;
|
|
549
595
|
display: flex;
|
|
550
596
|
align-items: center;
|
|
551
597
|
justify-content: center;
|
|
598
|
+
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
|
|
552
599
|
font-size: 13px;
|
|
553
600
|
font-weight: 600;
|
|
554
601
|
color: white;
|
|
602
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
603
|
+
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
555
604
|
}
|
|
556
605
|
|
|
557
606
|
.ppg-dropdown-info {
|
|
558
607
|
flex: 1;
|
|
559
608
|
min-width: 0;
|
|
609
|
+
padding-right: 4px;
|
|
610
|
+
text-align: left;
|
|
560
611
|
}
|
|
561
612
|
|
|
562
613
|
.ppg-dropdown-name {
|
|
614
|
+
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
|
563
615
|
font-size: 14px;
|
|
564
616
|
font-weight: 500;
|
|
565
617
|
color: #1d1d1f;
|
|
566
618
|
white-space: nowrap;
|
|
567
619
|
overflow: hidden;
|
|
568
620
|
text-overflow: ellipsis;
|
|
621
|
+
line-height: 1.3;
|
|
622
|
+
text-align: left;
|
|
569
623
|
}
|
|
570
624
|
|
|
571
625
|
.ppg-dropdown-status {
|
|
572
626
|
display: flex;
|
|
573
627
|
align-items: center;
|
|
574
|
-
gap:
|
|
628
|
+
gap: 5px;
|
|
629
|
+
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
|
575
630
|
font-size: 12px;
|
|
576
631
|
color: #86868b;
|
|
577
632
|
margin-top: 2px;
|
|
633
|
+
line-height: 1.2;
|
|
578
634
|
}
|
|
579
635
|
|
|
580
636
|
.ppg-dropdown-presence {
|
|
581
|
-
width:
|
|
582
|
-
height:
|
|
637
|
+
width: 7px;
|
|
638
|
+
height: 7px;
|
|
583
639
|
border-radius: 9999px;
|
|
640
|
+
flex-shrink: 0;
|
|
641
|
+
box-shadow: 0 0 0 1.5px var(--ppg-dropdown-bg);
|
|
584
642
|
}
|
|
585
643
|
|
|
586
644
|
.ppg-dropdown-presence[data-status="online"] {
|
|
587
645
|
background: #30D158;
|
|
646
|
+
box-shadow: 0 0 0 1.5px var(--ppg-dropdown-bg), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
588
647
|
}
|
|
589
648
|
|
|
590
649
|
.ppg-dropdown-presence[data-status="away"] {
|
|
@@ -604,7 +663,7 @@ ${yr}`,Fe=`
|
|
|
604
663
|
.ppg-backdrop {
|
|
605
664
|
position: fixed;
|
|
606
665
|
inset: 0;
|
|
607
|
-
z-index:
|
|
666
|
+
z-index: 9997;
|
|
608
667
|
}
|
|
609
668
|
|
|
610
669
|
/* Reduced motion */
|
|
@@ -646,33 +705,69 @@ ${yr}`,Fe=`
|
|
|
646
705
|
box-shadow: 0 0 0 1.5px rgba(28, 28, 30, 0.95), var(--ppg-shadow-sm);
|
|
647
706
|
}
|
|
648
707
|
|
|
708
|
+
.ppg-counter:hover {
|
|
709
|
+
background: #3a3a3c;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.ppg-dropdown {
|
|
713
|
+
background: rgba(44, 44, 46, 0.95);
|
|
714
|
+
box-shadow:
|
|
715
|
+
0 4px 24px rgba(0, 0, 0, 0.4),
|
|
716
|
+
0 1px 4px rgba(0, 0, 0, 0.2),
|
|
717
|
+
0 0 0 1px rgba(255, 255, 255, 0.08);
|
|
718
|
+
}
|
|
719
|
+
|
|
649
720
|
.ppg-dropdown-name {
|
|
650
721
|
color: #ffffff;
|
|
651
722
|
}
|
|
652
723
|
|
|
653
724
|
.ppg-dropdown-header {
|
|
654
725
|
color: #98989d;
|
|
726
|
+
background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.ppg-dropdown-avatar {
|
|
730
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.ppg-dropdown-avatar-fallback {
|
|
655
734
|
border-color: rgba(255, 255, 255, 0.1);
|
|
656
735
|
}
|
|
736
|
+
|
|
737
|
+
.ppg-dropdown-list {
|
|
738
|
+
scrollbar-color: rgba(255,255,255,0.35) transparent;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.ppg-dropdown-list::-webkit-scrollbar-thumb {
|
|
742
|
+
background: rgba(255,255,255,0.35);
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.ppg-dropdown-presence {
|
|
746
|
+
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95);
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.ppg-dropdown-presence[data-status="online"] {
|
|
750
|
+
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
751
|
+
}
|
|
657
752
|
}
|
|
658
|
-
`,Ge=`${
|
|
659
|
-
${
|
|
660
|
-
${this.placeholder==="shimmer"?b`<style>${Fe}</style>`:
|
|
753
|
+
`,Ge=`${vr}
|
|
754
|
+
${wr}`;var l=class extends R{constructor(){super(...arguments);this.src="";this.alt="";this.size=k.size;this.variant=k.variant;this.shadow=k.shadow;this.border=false;this.borderWidth=k.borderWidth;this.borderColor=k.borderColor;this.rotation=0;this.loading=k.loading;this.placeholder=k.placeholder;this.placeholderColor=k.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}static setCdnBaseUrl(e){l.cdnBaseUrl=e,l.instances.forEach(r=>{r.extCustomerId&&!r.cdnImageUrl&&(r.cdnLoadFailed=false,r.retryTimeoutId&&(clearTimeout(r.retryTimeoutId),r.retryTimeoutId=void 0),r.previousExtCustomerId||(r.previousExtCustomerId=r.extCustomerId),r.loadCdnImage());});}static getCdnBaseUrl(){return l.cdnBaseUrl}createRenderRoot(){return l.injectStylesOnce(),this}static injectStylesOnce(){if(l.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:r=>setTimeout(r,1))(()=>{if(l.stylesInjected)return;let r=document.createElement("style");r.textContent=He,document.head.appendChild(r),l.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:K[e]??K[k.size]}connectedCallback(){super.connectedCallback(),l.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),l.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&l.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&l.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&&l.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&&l.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=Ue(this.pixelSize),r=Oe(this.bgColor),i=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=De(l.cdnBaseUrl,this.extCustomerId,e,r,i);}getContainerStyles(){let e=Be(this.bgColor,this.bgGradient),r=this.border?ze(this.borderWidth,this.borderColor):null,i=Pe(this.shadow),o={};if(this.glow){let p=this.glow.color??this.borderColor??"#6366f1";o={"--pp-glow-color":p,boxShadow:je(p,this.glow.intensity??.3)};}let s=this.interactive?.hoverable||this.interactive?.pressable;return {classes:D("pp-container",Ne(this.variant),e.className,r?.className,s&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:J[this.variant],...e.style,...r?.style,...i,...o,cursor:this.interactive?.cursor??(s?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return u;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return b`
|
|
755
|
+
${this.placeholder==="shimmer"?b`<style>${Fe}</style>`:u}
|
|
661
756
|
<div
|
|
662
|
-
class=${
|
|
663
|
-
style=${
|
|
757
|
+
class=${D("np:absolute np:inset-0",e)}
|
|
758
|
+
style=${x({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
664
759
|
</div>
|
|
665
760
|
`}renderFallback(){if(this.fallback)return b`
|
|
666
761
|
<span
|
|
667
762
|
class="pp-fallback"
|
|
668
|
-
style=${
|
|
763
|
+
style=${x({fontSize:`${Vt(this.pixelSize)}px`})}>
|
|
669
764
|
${this.fallback}
|
|
670
765
|
</span>
|
|
671
|
-
`;if(this.alt){let r=
|
|
766
|
+
`;if(this.alt){let r=_t(this.alt);return b`
|
|
672
767
|
<div
|
|
673
768
|
class="pp-fallback np:absolute np:inset-0"
|
|
674
|
-
style=${
|
|
675
|
-
${
|
|
769
|
+
style=${x({background:this.bgColor??r,fontSize:`${Vt(this.pixelSize)}px`})}>
|
|
770
|
+
${Ct(this.alt)}
|
|
676
771
|
</div>
|
|
677
772
|
`}let e=this.pixelSize*.5;return b`
|
|
678
773
|
<svg
|
|
@@ -690,44 +785,33 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
690
785
|
decoding="async"
|
|
691
786
|
@load=${this.handleLoad}
|
|
692
787
|
@error=${this.handleError}
|
|
693
|
-
class=${
|
|
788
|
+
class=${D("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
694
789
|
draggable="false" />
|
|
695
|
-
`}renderRing(){if(!this.ring?.show)return
|
|
790
|
+
`}renderRing(){if(!this.ring?.show)return u;let e=this.ring.width??3,r=this.ring.gap??3,i=e+r,o,s=this.ring.progress!==void 0;if(s){let p=this.ring.progress??0,a=this.ring.color??"#30D158",h=this.ring.emptyColor??"#8E8E93";o=Re(p,a,h);}else this.ring.gradient&&this.ring.gradient.length>0?o=Te(this.ring.gradient):o=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return b`
|
|
696
791
|
<div
|
|
697
|
-
class=${
|
|
698
|
-
style=${
|
|
792
|
+
class=${D("pp-ring",this.ring.animate&&!s&&"pp-ring-animated",s&&"pp-ring-progress")}
|
|
793
|
+
style=${x({inset:`-${i}px`,padding:`${e}px`,background:o,borderRadius:J[this.variant]})}>
|
|
699
794
|
</div>
|
|
700
|
-
`}renderPresence(){if(!this.presence)return
|
|
795
|
+
`}getCornerOffset(){let e=this.border?this.borderWidth:0,r=this.pixelSize*.08,o={circle:1,square:.5,rounded:.8,squircle:1.2}[this.variant];return Math.round(r*o-e*.5)}renderPresence(){if(!this.presence)return u;let e=this.presence.thickness??2,r=$e(this.pixelSize,e),i=Ce[this.presence.status],o=this.getCornerOffset();return b`
|
|
701
796
|
<div
|
|
702
|
-
class=${
|
|
703
|
-
style=${
|
|
797
|
+
class=${D("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
798
|
+
style=${x({width:`${r}px`,height:`${r}px`,backgroundColor:i,bottom:`${o}px`,right:`${o}px`,color:i})}
|
|
704
799
|
title=${this.presence.status}>
|
|
705
800
|
</div>
|
|
706
|
-
`}renderBadge(){if(!this.badge)return
|
|
707
|
-
<div
|
|
708
|
-
class=${$("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
|
|
709
|
-
style=${y({width:o?"auto":`${s}px`,minWidth:`${s}px`,height:`${s}px`,padding:o?"0 6px":"0",fontSize:`${p}px`,backgroundColor:a,color:u,"--pp-badge-glow-color":a,gap:i&&r?"4px":"0",..._[e]})}>
|
|
710
|
-
${g?b`<span class="pp-badge-icon" style=${y({fontSize:`${S}px`})}>${g}</span>`:c}
|
|
711
|
-
${m??c}
|
|
712
|
-
</div>
|
|
713
|
-
`}renderRibbon(){if(!this.ribbon)return c;let e=this.ribbon.position??"top-right",r=this.ribbon.bgColor??"#ef4444",i=this.ribbon.color??"#ffffff",o=st(r)?{backgroundColor:r}:{background:r},s={color:i},p=this.pixelSize*.9,a=this.pixelSize*.4,u=Math.max(8,this.pixelSize*.11);return b`
|
|
801
|
+
`}renderBadge(){if(!this.badge)return u;let e=this.badge.position??"bottom-right",r=this.badge.content!==void 0,i=this.badge.icon!==void 0,o=r||i,{size:s,fontSize:p}=Ee(this.pixelSize,o),a=this.badge.bgColor??"#22c55e",h=this.badge.color??"#ffffff",m=this.badge.borderRadius??"9999px",g=r&&this.badge.content!==void 0?Ae(this.badge.content,this.badge.max):null,w=i?this.badge.icon:null,S=p*.9,v=`${-this.getCornerOffset()}px`,N={"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}};return b`
|
|
714
802
|
<div
|
|
715
|
-
class=${
|
|
716
|
-
style=${
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
style=${y({fontSize:`${u}px`,padding:`${u*.3}px 0`,...o,...s})}>
|
|
720
|
-
${this.ribbon.icon?b`<span style="margin-right: 2px">${this.ribbon.icon}</span>`:c}
|
|
721
|
-
${this.ribbon.text}
|
|
722
|
-
</div>
|
|
803
|
+
class=${D("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
|
|
804
|
+
style=${x({width:o?"auto":`${s}px`,minWidth:`${s}px`,height:`${s}px`,padding:o?"0 6px":"0",fontSize:`${p}px`,backgroundColor:a,color:h,borderRadius:m,"--pp-badge-glow-color":a,gap:i&&r?"4px":"0",...N[e]})}>
|
|
805
|
+
${w?b`<span class="pp-badge-icon" style=${x({fontSize:`${S}px`})}>${w}</span>`:u}
|
|
806
|
+
${g??u}
|
|
723
807
|
</div>
|
|
724
808
|
`}render(){let e=this.getContainerStyles(),r=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return b`
|
|
725
809
|
<div
|
|
726
810
|
class=${e.classes}
|
|
727
|
-
style=${
|
|
728
|
-
tabindex=${r??
|
|
729
|
-
role=${this.interactive?.pressable?"button":
|
|
730
|
-
aria-label=${this.alt||
|
|
811
|
+
style=${x(e.styles)}
|
|
812
|
+
tabindex=${r??u}
|
|
813
|
+
role=${this.interactive?.pressable?"button":u}
|
|
814
|
+
aria-label=${this.alt||u}
|
|
731
815
|
data-profile-picture>
|
|
732
816
|
|
|
733
817
|
<!-- Ring Effect (behind everything) -->
|
|
@@ -736,7 +820,7 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
736
820
|
<!-- Inner container for image clipping -->
|
|
737
821
|
<div
|
|
738
822
|
class="pp-inner"
|
|
739
|
-
style=${
|
|
823
|
+
style=${x({borderRadius:J[this.variant]})}>
|
|
740
824
|
<!-- Placeholder -->
|
|
741
825
|
${this.renderPlaceholder()}
|
|
742
826
|
|
|
@@ -744,19 +828,64 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
744
828
|
${this.renderImage()}
|
|
745
829
|
</div>
|
|
746
830
|
|
|
747
|
-
<!-- Ribbon -->
|
|
748
|
-
${this.renderRibbon()}
|
|
749
|
-
|
|
750
831
|
<!-- Badge -->
|
|
751
832
|
${this.renderBadge()}
|
|
752
833
|
|
|
753
834
|
<!-- Presence Indicator -->
|
|
754
835
|
${this.renderPresence()}
|
|
755
836
|
</div>
|
|
756
|
-
`}};l.stylesInjected=false,l.cdnBaseUrl="",l.instances=new Set,d([
|
|
837
|
+
`}};l.stylesInjected=false,l.cdnBaseUrl="",l.instances=new Set,d([c({type:String})],l.prototype,"src",2),d([c({type:String})],l.prototype,"alt",2),d([c({type:String,attribute:"ext-customer-id"})],l.prototype,"extCustomerId",2),d([c({type:String})],l.prototype,"size",2),d([c({type:String})],l.prototype,"variant",2),d([c({type:String})],l.prototype,"shadow",2),d([c({type:Boolean})],l.prototype,"border",2),d([c({type:Number,attribute:"border-width"})],l.prototype,"borderWidth",2),d([c({type:String,attribute:"border-color"})],l.prototype,"borderColor",2),d([c({type:Number})],l.prototype,"rotation",2),d([c({type:String,attribute:"bg-color"})],l.prototype,"bgColor",2),d([c({type:String,attribute:"bg-gradient"})],l.prototype,"bgGradient",2),d([c({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],l.prototype,"ring",2),d([c({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],l.prototype,"presence",2),d([c({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],l.prototype,"glow",2),d([c({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],l.prototype,"badge",2),d([c({type:String})],l.prototype,"loading",2),d([c({type:String})],l.prototype,"placeholder",2),d([c({type:String,attribute:"placeholder-color"})],l.prototype,"placeholderColor",2),d([c({type:String})],l.prototype,"fallback",2),d([c({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],l.prototype,"interactive",2),d([O()],l.prototype,"isLoaded",2),d([O()],l.prototype,"hasError",2),d([O()],l.prototype,"cdnImageUrl",2),d([O()],l.prototype,"cdnLoadFailed",2),l=d([vt("profile-picture")],l);var Yt=false;function Sr(){if(Yt||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(Yt)return;let t=document.createElement("style");t.textContent=Ge,document.head.appendChild(t),Yt=true;});}var C=class extends R{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 Sr(),this}get pixelSize(){return ke(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(r=>r.tagName.toLowerCase()==="profile-picture"&&r.getAttribute("slot")!=="internal");this.users=e.map((r,i)=>{let o=r.getAttribute("border-width"),s=o?Number.parseInt(o,10):void 0;return {id:r.getAttribute("data-user-id")??void 0,name:r.getAttribute("alt")??`User ${i+1}`,src:r.getAttribute("src")??void 0,extCustomerId:r.getAttribute("ext-customer-id")??void 0,status:r.getAttribute("data-status")??void 0,element:r,index:i,variant:r.getAttribute("variant")??void 0,shadow:r.getAttribute("shadow")??void 0,border:r.hasAttribute("border"),borderWidth:s,borderColor:r.getAttribute("border-color")??void 0,bgColor:r.getAttribute("bg-color")??void 0,bgGradient:r.getAttribute("bg-gradient")??void 0}});for(let r of this.users)r.element&&(r.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&&(Y(u,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let r=this.counterRef.getBoundingClientRect(),i=10,o=280,s=Math.min(this.dropdownMaxHeight+60,e.length*56+60),p=window.innerWidth,a=window.innerHeight;if(p<480){let M=b`
|
|
838
|
+
<div
|
|
839
|
+
class="ppg-backdrop ppg-backdrop-visible"
|
|
840
|
+
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
841
|
+
@click=${this.handleBackdropClick}
|
|
842
|
+
aria-hidden="true"
|
|
843
|
+
></div>
|
|
844
|
+
<div
|
|
845
|
+
class="ppg-dropdown ppg-dropdown-modal"
|
|
846
|
+
style=${x({position:"fixed",pointerEvents:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"calc(100vw - 32px)",maxWidth:"320px",maxHeight:"70vh"})}
|
|
847
|
+
data-position="modal"
|
|
848
|
+
role="menu"
|
|
849
|
+
aria-label="Hidden users"
|
|
850
|
+
>
|
|
851
|
+
<div class="ppg-dropdown-header">
|
|
852
|
+
${e.length} more
|
|
853
|
+
</div>
|
|
854
|
+
<div
|
|
855
|
+
class="ppg-dropdown-list"
|
|
856
|
+
style=${x({maxHeight:"calc(70vh - 60px)"})}
|
|
857
|
+
>
|
|
858
|
+
${e.map(X=>this.renderDropdownItem(X))}
|
|
859
|
+
</div>
|
|
860
|
+
</div>
|
|
861
|
+
`;Y(M,this.portalContainer);return}let m=a-r.bottom-i,g=r.top-i,w=p-r.left,S=r.right,_=this.dropdownPosition;_==="bottom"&&m<s&&g>m?_="top":_==="top"&&g<s&&m>g&&(_="bottom");let v;w>=o?v=r.left:S>=o?v=r.right-o:v=(p-o)/2,v=Math.max(8,Math.min(v,p-o-8));let N=_==="bottom"?r.bottom+i:void 0,y=_==="top"?a-r.top+i:void 0,A=b`
|
|
862
|
+
<div
|
|
863
|
+
class="ppg-backdrop"
|
|
864
|
+
style="pointer-events: auto;"
|
|
865
|
+
@click=${this.handleBackdropClick}
|
|
866
|
+
aria-hidden="true"
|
|
867
|
+
></div>
|
|
868
|
+
<div
|
|
869
|
+
class="ppg-dropdown ppg-dropdown-portal"
|
|
870
|
+
style=${x({position:"fixed",pointerEvents:"auto",top:N!==void 0?`${N}px`:"auto",bottom:y!==void 0?`${y}px`:"auto",left:`${v}px`,width:`${o}px`})}
|
|
871
|
+
data-position=${_}
|
|
872
|
+
role="menu"
|
|
873
|
+
aria-label="Hidden users"
|
|
874
|
+
>
|
|
875
|
+
<div class="ppg-dropdown-header">
|
|
876
|
+
${e.length} more
|
|
877
|
+
</div>
|
|
878
|
+
<div
|
|
879
|
+
class="ppg-dropdown-list"
|
|
880
|
+
style=${x({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
881
|
+
>
|
|
882
|
+
${e.map(M=>this.renderDropdownItem(M))}
|
|
883
|
+
</div>
|
|
884
|
+
</div>
|
|
885
|
+
`;Y(A,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,r){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let i=r.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:i.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,r){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r());}renderAvatar(e,r,i){let o=Et(r,this.pixelSize,this.overlap,this.direction,this.spacing),s=Ie(r,i,this.direction),p=e.variant??"circle",a=e.shadow??"none",h=this.rotationAmount?r%2===0?-this.rotationAmount:this.rotationAmount:0;return b`
|
|
757
886
|
<div
|
|
758
887
|
class="ppg-avatar-wrapper"
|
|
759
|
-
style=${
|
|
888
|
+
style=${x({left:`${o}px`,zIndex:String(s),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
760
889
|
tabindex="0"
|
|
761
890
|
role="button"
|
|
762
891
|
aria-label=${e.name}
|
|
@@ -765,7 +894,7 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
765
894
|
@mouseleave=${this.handleAvatarLeave}
|
|
766
895
|
@keydown=${m=>this.handleKeyDown(m,()=>this.handleAvatarClick(e))}
|
|
767
896
|
>
|
|
768
|
-
${this.renderProfilePicture(e,p,a,
|
|
897
|
+
${this.renderProfilePicture(e,p,a,h)}
|
|
769
898
|
</div>
|
|
770
899
|
`}renderProfilePicture(e,r,i,o){return b`
|
|
771
900
|
<profile-picture
|
|
@@ -775,6 +904,7 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
775
904
|
.variant=${r}
|
|
776
905
|
.shadow=${i}
|
|
777
906
|
.rotation=${o}
|
|
907
|
+
.extCustomerId=${e.extCustomerId}
|
|
778
908
|
?border=${e.border}
|
|
779
909
|
.borderWidth=${e.border?e.borderWidth??2:2}
|
|
780
910
|
.borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
|
|
@@ -783,21 +913,21 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
783
913
|
data-user-id=${e.id??""}
|
|
784
914
|
data-status=${e.status??""}
|
|
785
915
|
></profile-picture>
|
|
786
|
-
`}renderCounter(e,r){return b`
|
|
916
|
+
`}renderCounter(e,r,i){return b`
|
|
787
917
|
<button
|
|
788
918
|
class="ppg-counter"
|
|
789
|
-
style=${
|
|
919
|
+
style=${x({left:`${r}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
|
|
790
920
|
aria-label=${`${e} more users`}
|
|
791
921
|
aria-expanded=${this.dropdownOpen}
|
|
792
922
|
aria-haspopup="true"
|
|
793
|
-
@click=${()=>this.handleCounterClick(
|
|
923
|
+
@click=${()=>this.handleCounterClick(i)}
|
|
794
924
|
>
|
|
795
|
-
${
|
|
925
|
+
${Le(e)}
|
|
796
926
|
</button>
|
|
797
927
|
`}renderAddButton(e){let r=Math.round(this.pixelSize*.4);return b`
|
|
798
928
|
<button
|
|
799
929
|
class="ppg-add-button"
|
|
800
|
-
style=${
|
|
930
|
+
style=${x({left:`${e}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
|
|
801
931
|
aria-label=${this.addButtonLabel}
|
|
802
932
|
@click=${this.handleAddClick}
|
|
803
933
|
>
|
|
@@ -816,54 +946,36 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
816
946
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
817
947
|
</svg>
|
|
818
948
|
</button>
|
|
819
|
-
`}renderTooltip(){if(!this.tooltipData)return
|
|
949
|
+
`}renderTooltip(){if(!this.tooltipData)return u;let{user:e,rect:r}=this.tooltipData,i=8,o=this.getBoundingClientRect(),s=r.left-o.left+r.width/2,p=r.top-o.top,a=r.bottom-o.top,h=this.tooltipPosition==="top";return b`
|
|
820
950
|
<div
|
|
821
951
|
class="ppg-tooltip"
|
|
822
|
-
style=${
|
|
952
|
+
style=${x({top:h?"auto":`${a+i}px`,bottom:h?`${o.height-p+i}px`:"auto",left:`${s}px`})}
|
|
823
953
|
data-position=${this.tooltipPosition}
|
|
824
954
|
role="tooltip"
|
|
825
955
|
>
|
|
826
956
|
${e.name}
|
|
827
957
|
</div>
|
|
828
|
-
`}
|
|
829
|
-
<div
|
|
830
|
-
class="ppg-backdrop"
|
|
831
|
-
@click=${this.handleBackdropClick}
|
|
832
|
-
aria-hidden="true"
|
|
833
|
-
></div>
|
|
834
|
-
<div
|
|
835
|
-
class="ppg-dropdown"
|
|
836
|
-
data-position=${this.dropdownPosition}
|
|
837
|
-
role="menu"
|
|
838
|
-
aria-label="Hidden users"
|
|
839
|
-
>
|
|
840
|
-
<div class="ppg-dropdown-header">
|
|
841
|
-
${e.length} more
|
|
842
|
-
</div>
|
|
843
|
-
<div
|
|
844
|
-
class="ppg-dropdown-list"
|
|
845
|
-
style=${y({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
846
|
-
>
|
|
847
|
-
${e.map(r=>this.renderDropdownItem(r))}
|
|
848
|
-
</div>
|
|
849
|
-
</div>
|
|
850
|
-
`:c}renderDropdownItem(e){let r=wt(e.name);return b`
|
|
958
|
+
`}renderDropdownItem(e){let r=_t(e.name),i=e.src||e.extCustomerId;return b`
|
|
851
959
|
<div
|
|
852
960
|
class="ppg-dropdown-item"
|
|
853
961
|
role="menuitem"
|
|
854
962
|
tabindex="0"
|
|
855
963
|
@click=${()=>this.handleDropdownItemClick(e)}
|
|
856
|
-
@keydown=${
|
|
964
|
+
@keydown=${o=>this.handleKeyDown(o,()=>this.handleDropdownItemClick(e))}
|
|
857
965
|
>
|
|
858
|
-
${
|
|
966
|
+
${i?b`<profile-picture
|
|
859
967
|
class="ppg-dropdown-avatar"
|
|
860
|
-
src=${e.src}
|
|
861
|
-
alt=${e.name}
|
|
862
|
-
|
|
968
|
+
.src=${e.src??""}
|
|
969
|
+
.alt=${e.name}
|
|
970
|
+
.extCustomerId=${e.extCustomerId}
|
|
971
|
+
.size=${40}
|
|
972
|
+
variant="circle"
|
|
973
|
+
shadow="none"
|
|
974
|
+
></profile-picture>`:b`<div
|
|
863
975
|
class="ppg-dropdown-avatar-fallback"
|
|
864
|
-
style=${
|
|
976
|
+
style=${x({background:r})}
|
|
865
977
|
>
|
|
866
|
-
${
|
|
978
|
+
${Ct(e.name)}
|
|
867
979
|
</div>`}
|
|
868
980
|
<div class="ppg-dropdown-info">
|
|
869
981
|
<div class="ppg-dropdown-name">${e.name}</div>
|
|
@@ -875,13 +987,13 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
875
987
|
></span>
|
|
876
988
|
${this.formatStatus(e.status)}
|
|
877
989
|
</div>
|
|
878
|
-
`:
|
|
990
|
+
`:u}
|
|
879
991
|
</div>
|
|
880
992
|
</div>
|
|
881
|
-
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}render(){let{visible:e,hidden:r,showCounter:i}=
|
|
993
|
+
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let r=this.querySelector(".ppg-counter");if(r&&(this.counterRef=r),this.dropdownOpen&&this.portalContainer){let{visible:i}=qt(this.users.length,this.max,this.showAddButton),o=this.users.slice(i);this.updatePortalContent(o);}}render(){let{visible:e,hidden:r,showCounter:i}=qt(this.users.length,this.max,this.showAddButton),o=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),s=this.users.slice(e),p=e;i&&p++,this.showAddButton&&p++;let a=Me(p,this.pixelSize,this.overlap,this.spacing),h=i?Et(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,m=Et(e+(i?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return b`
|
|
882
994
|
<div
|
|
883
|
-
class=${
|
|
884
|
-
style=${
|
|
995
|
+
class=${D("ppg-container",this.animated&&"ppg-animated")}
|
|
996
|
+
style=${x({width:`${a}px`,height:`${this.pixelSize}px`})}
|
|
885
997
|
role="group"
|
|
886
998
|
aria-label="User avatars"
|
|
887
999
|
>
|
|
@@ -889,21 +1001,18 @@ ${vr}`;var l=class extends A{constructor(){super(...arguments);this.src="";this.
|
|
|
889
1001
|
<slot style="display: none;"></slot>
|
|
890
1002
|
|
|
891
1003
|
<!-- Visible avatars -->
|
|
892
|
-
${o.map((g,
|
|
1004
|
+
${o.map((g,w)=>this.renderAvatar(g,w,e))}
|
|
893
1005
|
|
|
894
1006
|
<!-- Counter -->
|
|
895
|
-
${i?this.renderCounter(r,
|
|
1007
|
+
${i?this.renderCounter(r,h,s):u}
|
|
896
1008
|
|
|
897
1009
|
<!-- Add button -->
|
|
898
|
-
${this.showAddButton?this.renderAddButton(m):
|
|
1010
|
+
${this.showAddButton?this.renderAddButton(m):u}
|
|
899
1011
|
|
|
900
1012
|
<!-- Tooltip -->
|
|
901
1013
|
${this.renderTooltip()}
|
|
902
|
-
|
|
903
|
-
<!-- Dropdown -->
|
|
904
|
-
${i?this.renderDropdown(s):c}
|
|
905
1014
|
</div>
|
|
906
|
-
`}};d([
|
|
1015
|
+
`}};d([c({type:Number})],C.prototype,"max",2),d([c({type:String})],C.prototype,"direction",2),d([c({type:Number})],C.prototype,"overlap",2),d([c({type:String})],C.prototype,"size",2),d([c({type:Number})],C.prototype,"spacing",2),d([c({type:Object})],C.prototype,"tooltip",2),d([c({type:Object})],C.prototype,"dropdown",2),d([c({type:Boolean,attribute:"show-add-button"})],C.prototype,"showAddButton",2),d([c({type:String,attribute:"add-button-label"})],C.prototype,"addButtonLabel",2),d([c({type:Boolean})],C.prototype,"animated",2),d([c({type:Number,attribute:"rotation-amount"})],C.prototype,"rotationAmount",2),d([O()],C.prototype,"users",2),d([O()],C.prototype,"dropdownOpen",2),d([O()],C.prototype,"tooltipData",2),C=d([vt("profile-picture-group")],C);Jt();
|
|
907
1016
|
/*! Bundled license information:
|
|
908
1017
|
|
|
909
1018
|
@lit-labs/ssr-dom-shim/lib/element-internals.js:
|