@popgrids/embed 0.0.1

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.js ADDED
@@ -0,0 +1,1071 @@
1
+ var _t=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Tt=Object.getPrototypeOf;var Mt=Reflect.get;var i=(s,a,t,e)=>{for(var r=e>1?void 0:e?Et(a,t):a,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(e?o(a,t,r):o(r))||r);return e&&r&&_t(a,t,r),r};var l=(s,a,t)=>Mt(Tt(s),t,a);import{PopElement as Ht}from"@popgrids/ui";import{html as $t}from"lit";import{customElement as Bt}from"lit/decorators.js";import{classMap as zt}from"lit/directives/class-map.js";import{css as qt,unsafeCSS as Lt}from"lit";var F="./swirling-ovals-ZDTHSA3L.gif";var Z=qt`
2
+ :host {
3
+ display: flex;
4
+ width: 100%;
5
+ }
6
+
7
+ .auth-join {
8
+ background-image: url("${Lt(F)}"), none;
9
+ background-color: lightgray;
10
+ background-position: 79% center;
11
+ background-size:
12
+ 8.215% 59.149%,
13
+ auto;
14
+ background-repeat: no-repeat, repeat;
15
+ background-color: var(--color-surface-bg-default, #fff);
16
+ border: none;
17
+ display: flex;
18
+ align-items: flex-start;
19
+ flex-direction: column;
20
+ gap: var(--spacing-sm, 6px);
21
+ justify-content: flex-end;
22
+ padding: var(--spacing-xl, 16px) var(--spacing-md, 8px);
23
+ width: 100%;
24
+ }
25
+
26
+ .auth-join__actions {
27
+ color: var(--color-text-text-default, #000);
28
+ font-feature-settings:
29
+ "liga" off,
30
+ "clig" off;
31
+ display: flex;
32
+ padding: 0px var(--spacing-md, 8px);
33
+ justify-content: space-between;
34
+ align-items: center;
35
+ align-self: stretch;
36
+ font-size: var(--text-widget-base);
37
+ line-height: var(--text-widget-base--line-height);
38
+ letter-spacing: var(--text-widget-base--letter-spacing);
39
+ font-weight: 600;
40
+ }
41
+
42
+ .auth-join__logo {
43
+ display: flex;
44
+ width: 75px;
45
+ height: 12px;
46
+ padding: 0px var(--spacing-none, 0px);
47
+ flex-direction: column;
48
+ justify-content: center;
49
+ align-items: center;
50
+ color: var(--color-text-text-default, #000);
51
+ }
52
+ `;var j=class extends Ht{handleClick(){this.emit("pop-click")}render(){return $t` <button
53
+ class=${zt({"auth-join":!0})}
54
+ part="base"
55
+ type="button"
56
+ @click=${this.handleClick}
57
+ >
58
+ <div class="auth-join__actions">
59
+ Join the Conversation
60
+ <svg
61
+ class="auth-join__logo"
62
+ width="75"
63
+ height="12"
64
+ viewBox="0 0 75 12"
65
+ fill="none"
66
+ xmlns="http://www.w3.org/2000/svg"
67
+ >
68
+ <path
69
+ d="M4.58333 0.265686C1.0463 0.265686 0 2.5714 0 5.47711C0 6.55283 0.115741 7.6114 0.25 8.67426C0.300926 9.08997 0.282407 9.54854 0.365741 9.96426C0.583333 11.0571 1.69444 11.5628 2.77315 11.5628C4.25 11.5628 5.23148 10.7014 5.23148 9.3214C5.23148 8.52426 4.94907 8.0014 4.13426 7.69283C4.08333 7.67569 4.03241 7.66283 4.03241 7.59854C4.03241 7.4914 4.21759 7.41426 4.33333 7.41426C4.73148 7.41426 5.36111 7.78283 5.91204 7.78283C8.06944 7.78283 9.26389 5.86283 9.26389 4.06283C9.26389 1.44854 7.18518 0.265686 4.58333 0.265686ZM4.56481 5.91854C4.43056 5.91854 4.31481 5.8114 4.31481 5.68711C4.31481 5.51997 4.56481 5.39569 4.64815 5.25854C4.8287 4.94997 4.87963 4.42711 4.87963 4.07569C4.87963 3.65997 4.76389 2.89283 4.48148 2.58426C4.39815 2.49426 4.28241 2.44711 4.28241 2.32283C4.28241 2.19854 4.41667 2.0914 4.5463 2.0914C5.11111 2.0914 5.39352 3.62997 5.39352 4.02854C5.39352 4.45711 5.24537 5.91854 4.56481 5.91854Z"
70
+ fill="currentColor"
71
+ />
72
+ <path
73
+ d="M14.9259 0.527108C11.4074 0.527108 9.2963 2.83282 9.2963 5.99568C9.2963 9.15854 11.4028 11.4643 14.9259 11.4643C18.4491 11.4643 20.537 9.12854 20.537 5.99568C20.537 2.86282 18.412 0.527108 14.9259 0.527108ZM15.0787 9.89997C15.0232 9.96425 14.912 10.0843 14.7778 10.0843C14.6435 10.0843 14.5139 9.97711 14.5139 9.85282C14.5139 9.80568 14.9445 9.20568 15.0139 9.02139C15.2778 8.29711 15.3287 7.51282 15.3287 6.74568C15.3287 5.71711 15.1296 4.39282 14.4491 3.54854C14.3148 3.39425 13.9028 3.10282 13.9028 2.93568C13.9028 2.81139 14.0185 2.70425 14.1528 2.70425C14.2685 2.70425 14.3843 2.79854 14.4676 2.85854C15.5278 3.67282 15.8472 5.53282 15.8472 6.74568C15.8472 7.69711 15.8056 9.08568 15.0833 9.89568L15.0787 9.89997Z"
74
+ fill="currentColor"
75
+ />
76
+ <path
77
+ d="M25.375 0.265686C21.838 0.265686 20.7917 2.5714 20.7917 5.47711C20.7917 6.55283 20.9074 7.6114 21.0417 8.67426C21.0926 9.08997 21.0741 9.54854 21.1574 9.96426C21.375 11.0571 22.4861 11.5628 23.5648 11.5628C25.0417 11.5628 26.0231 10.7014 26.0231 9.3214C26.0231 8.52426 25.7407 8.0014 24.9259 7.69283C24.875 7.67569 24.8241 7.66283 24.8241 7.59854C24.8241 7.4914 25.0092 7.41426 25.125 7.41426C25.5231 7.41426 26.1528 7.78283 26.7037 7.78283C28.8611 7.78283 30.0555 5.86283 30.0555 4.06283C30.0555 1.44854 27.9815 0.265686 25.375 0.265686ZM25.3611 5.91854C25.2268 5.91854 25.1111 5.8114 25.1111 5.68711C25.1111 5.51997 25.3611 5.39569 25.4444 5.25854C25.625 4.94997 25.6759 4.42711 25.6759 4.07569C25.6759 3.65997 25.5602 2.89283 25.2778 2.58426C25.1944 2.49426 25.0787 2.44711 25.0787 2.32283C25.0787 2.19854 25.213 2.0914 25.3426 2.0914C25.9074 2.0914 26.1898 3.62997 26.1898 4.02854C26.1898 4.45711 26.0417 5.91854 25.3611 5.91854Z"
78
+ fill="currentColor"
79
+ />
80
+ <path
81
+ d="M37.3843 4.81284C36.1898 4.81284 34.5278 5.31855 34.5278 6.64284C34.5278 7.39713 35.125 8.5157 36.0741 8.5157C36.6713 8.5157 37.0556 8.08713 37.2546 8.08713C37.3056 8.08713 37.3519 8.11713 37.3519 8.16427C37.3519 8.60998 36.4213 8.81141 36.0556 8.81141C34.7778 8.81141 34.0972 7.7957 34.0972 6.71998C34.0972 5.39998 35.4398 4.38427 36.8009 4.38427C37.1991 4.38427 37.6158 4.49141 38.0139 4.49141C39.1945 4.49141 40.0371 3.50998 40.0371 2.46427C40.0371 0.728554 37.8148 0.329982 36.3333 0.329982C32.3982 0.329982 30.1065 2.6957 30.1065 6.29141C30.1065 9.61284 31.9676 11.73 35.6528 11.73C38.0417 11.73 40.6482 10.7786 40.6482 8.19427C40.6482 6.42855 39.4028 4.81284 37.3796 4.81284H37.3843Z"
82
+ fill="currentColor"
83
+ />
84
+ <path
85
+ d="M48.3611 7.42711C48.0602 7.42711 47.8148 7.53426 47.5648 7.53426C47.5139 7.53426 47.5 7.48711 47.5 7.45712C47.5 7.34997 47.5509 7.30283 47.6342 7.27283C47.9167 7.18283 48.2176 7.11854 48.4954 6.99426C49.7592 6.4414 50.5046 5.45569 50.5046 4.15283C50.5046 1.79997 48.3287 0.372829 45.9398 0.372829C45.0741 0.372829 44.2315 0.604257 43.5 0.972829C41.5092 1.9714 41.125 3.40283 41.0092 5.35283C40.9583 6.11997 40.9583 6.8914 40.9583 7.65854V9.51854C40.9583 10.6843 41.787 11.6228 43.0972 11.6228C44.0416 11.6228 44.8889 10.9928 45.1065 10.1614C45.2222 9.66854 45.1574 9.08569 45.1574 8.60997C45.1574 8.56283 45.1759 8.54997 45.2222 8.54997C45.2685 8.54997 45.3241 8.57997 45.3565 8.59711C45.9398 9.90426 46.7361 11.5628 48.5417 11.5628C49.787 11.5628 50.8148 10.7485 50.8148 9.56569C50.8148 8.38283 49.6204 7.4314 48.3565 7.4314L48.3611 7.42711ZM45.6574 5.91854C45.5231 5.91854 45.4074 5.8114 45.4074 5.68711C45.4074 5.51997 45.6574 5.39569 45.7407 5.25854C45.9213 4.94997 45.9722 4.42711 45.9722 4.07569C45.9722 3.65997 45.8565 2.89283 45.5741 2.58426C45.4907 2.49426 45.3935 2.44711 45.3935 2.32283C45.3935 2.19854 45.5092 2.0914 45.6435 2.0914C46.2083 2.0914 46.4907 3.62997 46.4907 4.02854C46.4907 4.45711 46.3565 5.91854 45.662 5.91854H45.6574Z"
86
+ fill="currentColor"
87
+ />
88
+ <path
89
+ d="M54.8056 0.865677C54.4074 0.621391 53.8426 0.497105 53.3611 0.497105C52.3148 0.497105 51.4167 1.26425 51.3009 2.21996C51.2685 2.49853 51.2824 2.75996 51.2824 3.05139V5.66139L51.2315 8.41282V9.77996C51.2315 10.8557 52.2269 11.7 53.375 11.7C54.2222 11.7 55.1528 11.2071 55.4676 10.47C55.6482 10.0542 55.6667 9.47139 55.6667 9.02568V7.82568L55.6852 5.42996V3.03425C55.6852 2.14282 55.6667 1.43568 54.8056 0.865677Z"
90
+ fill="currentColor"
91
+ />
92
+ <path
93
+ d="M58.9445 0.402828C57.25 0.402828 56.4028 1.13997 56.4028 2.7214V3.3514L56.4213 4.59426V5.22426C56.4213 5.69997 56.4213 6.14568 56.4028 6.6214C56.3704 7.1914 56.287 7.75711 56.287 8.34426C56.287 10.4957 57.4815 11.5414 59.7917 11.5414C63.3426 11.5414 65.75 10.1271 65.75 6.60854C65.75 2.36568 63.5417 0.398542 58.9445 0.398542V0.402828ZM60.537 8.9014C60.4028 8.9014 60.287 8.79426 60.287 8.66997C60.287 8.62283 60.3056 8.59283 60.338 8.54568C60.7685 7.88568 60.8843 6.96426 60.8843 6.20997C60.8843 5.50283 60.8009 4.45711 60.3194 3.90426C60.2361 3.77997 60.0695 3.68997 60.0695 3.53569C60.0695 3.4114 60.1852 3.30426 60.3194 3.30426C60.5694 3.30426 60.9167 3.88711 61.0185 4.08854C61.3333 4.76569 61.3843 5.50283 61.3843 6.22283C61.3843 6.66854 61.1343 8.89711 60.537 8.89711V8.9014Z"
94
+ fill="currentColor"
95
+ />
96
+ <path
97
+ d="M73.5046 5.85855C72.5417 5.78141 71.162 5.47284 70.4167 4.88998C70.3194 4.81284 70.1528 4.7057 70.1528 4.56855C70.1528 4.52141 70.1713 4.44427 70.2361 4.44427C70.4167 4.44427 71.5787 5.3057 72.5787 5.3057C73.8426 5.3057 75 4.39713 75 3.20141C75 1.23427 72.1806 0.437125 70.4676 0.437125C67.9259 0.437125 66.037 1.95855 66.037 4.37141C66.037 4.89427 66.1204 5.61427 66.537 6.01713C66.7361 6.21855 67.0694 6.21855 67.3333 6.21855C68.3287 6.21855 69.5926 6.50998 70.1204 7.35427C70.1713 7.43141 70.2176 7.5557 70.2176 7.6457C70.2176 7.6757 70.2176 7.72284 70.1852 7.7057C70.088 7.6757 70.0046 7.59855 69.9352 7.53855C69.3519 7.0157 68.5555 6.49284 67.713 6.49284C66.4491 6.49284 66.0046 7.6157 66.0046 8.59713C66.0046 10.5771 67.9306 11.67 69.8889 11.67C72.213 11.67 75 10.2557 75 7.84284C75 6.95141 74.5833 5.95284 73.5046 5.86284V5.85855Z"
98
+ fill="currentColor"
99
+ />
100
+ </svg>
101
+ </div>
102
+ </button>`}};j.styles=[l(j,j,"styles"),Z],j=i([Bt("pop-auth-join")],j);var It=j;import{consume as Kt}from"@lit/context";import{PopElement as Nt}from"@popgrids/ui";import{html as $}from"lit";import{customElement as Qt,query as G,state as P}from"lit/decorators.js";import{classMap as Jt}from"lit/directives/class-map.js";import{ifDefined as Ft}from"lit/directives/if-defined.js";import{createContext as Rt}from"@lit/context";var D=Rt(Symbol("pop-auth-context"));import{css as Ut}from"lit";var Y=Ut`
103
+ :host {
104
+ display: flex;
105
+ width: 100%;
106
+ }
107
+
108
+ .auth-panel {
109
+ display: flex;
110
+ border-top: 1px solid var(--color-surface-alpha-singular-alpha-input-bar, rgba(0, 0, 32, 0.04));
111
+ flex-direction: column;
112
+ height: 50px;
113
+ position: absolute;
114
+ bottom: 0;
115
+ left: 0;
116
+ right: 0;
117
+ transition: height 150ms ease-in-out;
118
+ width: 100%;
119
+ overflow: hidden;
120
+ background-color: var(--color-surface-bg-default, #fff);
121
+ backdrop-filter: blur(var(--blur-2xl));
122
+ }
123
+
124
+ .auth-panel--is-open {
125
+ /* Dynamic height will be set via JS */
126
+ /* The max-height provides a constraint */
127
+ max-height: 340px;
128
+ transition: height var(--duration-quick) var(--ease-quick);
129
+ }
130
+
131
+ .auth-panel__content {
132
+ position: relative;
133
+ top: 0;
134
+ left: 0;
135
+ right: 0;
136
+
137
+ display: flex;
138
+ flex-direction: column;
139
+ width: 100%;
140
+ }
141
+ `;var u=class extends Nt{constructor(){super(...arguments);this._email="";this._open=!1;this._resizeObserver=null;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._authPanel)&&(this._open=!1)}}handleJoinClick(){this._open=!0}async connectedCallback(){super.connectedCallback(),await this.updateComplete,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown),this.setupResizeObserver()}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this._resizeObserver?.disconnect(),super.disconnectedCallback()}setupResizeObserver(){this._resizeObserver=new ResizeObserver(t=>{requestAnimationFrame(()=>{for(let e of t)if(e.target===this._authPanelContent){let r=this._authPanelContent.offsetHeight;this._open?this._authPanel.style.height=`${r}px`:this._authPanel.style.height="50px"}})}),this._authPanelContent&&this._resizeObserver.observe(this._authPanelContent)}updated(t){super.updated(t),(t.has("_open")||t.has("authContext"))&&(t.has("_open")&&!this._open?this._authPanel.style.height="50px":this._open&&this._authPanelContent&&requestAnimationFrame(()=>{let e=this._authPanelContent.offsetHeight;this._authPanel.style.height=`${e}px`}),!this._resizeObserver&&this._authPanelContent&&this.setupResizeObserver())}handleSignInSuccess(t){t.detail?.email&&(this._email=t.detail.email)}handleCodeVerificationSuccess(){this._open=!1}renderAuthenticated(){return $`Authenticated`}renderJoinButton(){return $`<pop-auth-join @pop-click=${this.handleJoinClick}></pop-auth-join>`}renderSignInForm(){return $`<pop-auth-sign-in @pop-success=${this.handleSignInSuccess}></pop-auth-sign-in>`}renderVerifyCodeForm(){return $`
142
+ <pop-auth-verify-code
143
+ email=${Ft(this._email)}
144
+ @pop-success=${this.handleCodeVerificationSuccess}
145
+ ></pop-auth-verify-code>
146
+ `}renderUnauthenticated(){return this._open?this.authContext?.isVerifying?this.renderVerifyCodeForm():this.renderSignInForm():this.renderJoinButton()}render(){return $`
147
+ <div
148
+ class=${Jt({"auth-panel":!0,"auth-panel--is-open":this._open})}
149
+ >
150
+ <div class="auth-panel__content">
151
+ ${this.authContext?.isAuthenticated?this.renderAuthenticated():this.renderUnauthenticated()}
152
+ </div>
153
+ </div>
154
+ `}};u.styles=[l(u,u,"styles"),Y],i([Kt({context:D,subscribe:!0})],u.prototype,"authContext",2),i([G(".auth-panel")],u.prototype,"_authPanel",2),i([G(".auth-panel__content")],u.prototype,"_authPanelContent",2),i([P()],u.prototype,"_email",2),i([P()],u.prototype,"_open",2),u=i([Qt("pop-auth-panel")],u);var Zt=u;import{consume as Pt,provide as Wt}from"@lit/context";import{PopElement as Xt}from"@popgrids/ui";import{html as Ot}from"lit";import{customElement as te,property as ee,state as q}from"lit/decorators.js";import{createContext as Yt}from"@lit/context";var E=Yt(Symbol("pop-api-context"));import{css as Gt}from"lit";var W=Gt`
155
+ :host {
156
+ display: block;
157
+ }
158
+ `;var U="popgrids_token",f=class extends Xt{constructor(){super(...arguments);this.error=null;this.isAuthenticated=!1;this.currentAccount=null;this.isVerifying=!1;this.token=null;this.verificationExpiresAt=null;this.contextData={currentAccount:null,error:null,isAuthenticated:!1,isVerifying:!1,signIn:this.signIn.bind(this),signOut:this.signOut.bind(this),token:null,verificationExpiresAt:null,verifyCode:this.verifyCode.bind(this)}}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(U);t&&(this.token=t,this.fetchCurrentAccount())}async fetchCurrentAccount(){if(!(!this.token||!this.apiState?.client)){console.log("fetchCurrentAccount",this.token);try{let{data:t,error:e}=await this.apiState.client.GET("/api/v1/users/me",{headers:{Authorization:`Bearer ${this.token}`,"Content-Type":"application/json",Accept:"application/json"}});e&&this.signOut(),t?(this.currentAccount=t,this.isAuthenticated=!0,this.updateContextData()):this.signOut()}catch(t){console.error("Failed to fetch current account:",t),this.signOut()}}}async signIn(t){if(!this.apiState?.client)throw new Error("API client not available");try{let{data:e,error:r}=await this.apiState.client.POST("/api/v1/session",{params:{query:{email:t.email}}});if(r&&(this.error=r,this.updateContextData()),e)return this.isVerifying=!0,this.verificationExpiresAt=e.expires,this.updateContextData(),e;throw new Error("Authentication failed")}catch(e){throw console.error("Sign in failed:",e),e}}async verifyCode(t,e){if(this.apiState?.client)try{let{data:r,error:n}=await this.apiState.client.PUT("/api/v1/session",{params:{query:{code:t,email:e}}});if(n&&(this.error=n,this.updateContextData()),r)this.token=`${r.token}`,localStorage.setItem(U,this.token),this.isVerifying=!1,this.verificationExpiresAt=null,await this.fetchCurrentAccount();else throw new Error("Verification failed")}catch(r){throw console.error("Verification failed:",r),r}}signOut(){this.token=null,this.currentAccount=null,this.isAuthenticated=!1,this.isVerifying=!1,this.verificationExpiresAt=null,localStorage.removeItem(U),this.updateContextData()}updateContextData(){this.contextData={...this.contextData,error:this.error,isAuthenticated:this.isAuthenticated,isVerifying:this.isVerifying,currentAccount:this.currentAccount,token:this.token,verificationExpiresAt:this.verificationExpiresAt}}render(){return Ot`<slot part="base"></slot>`}};f.styles=[W],i([Pt({context:E})],f.prototype,"apiState",2),i([q()],f.prototype,"error",2),i([q()],f.prototype,"isAuthenticated",2),i([q()],f.prototype,"currentAccount",2),i([q()],f.prototype,"isVerifying",2),i([q()],f.prototype,"token",2),i([q()],f.prototype,"verificationExpiresAt",2),i([Wt({context:D}),ee({attribute:!1})],f.prototype,"contextData",2),f=i([te("pop-auth-provider")],f);var ie=f;import{consume as se}from"@lit/context";import{PopElement as oe}from"@popgrids/ui";import{html as le}from"lit";import{customElement as de,state as B}from"lit/decorators.js";import{classMap as pe}from"lit/directives/class-map.js";var X="./apple-IX52EWYN.png";var O="./google-Q3MFTU5A.png";import{css as ne}from"lit";var tt=ne`
159
+ :host {
160
+ display: block;
161
+ }
162
+
163
+ .auth-sign-in {
164
+ display: flex;
165
+ padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
166
+ flex-direction: column;
167
+ justify-content: center;
168
+ align-items: center;
169
+ gap: var(--spacing-xl, 16px);
170
+ }
171
+
172
+ .auth-sign-in__footer {
173
+ display: flex;
174
+ flex-direction: column;
175
+ gap: var(--spacing-xl, 16px);
176
+ font-size: var(--text-widget-base);
177
+ line-height: var(--text-widget-base--line-height);
178
+ letter-spacing: var(--text-widget-base--letter-spacing);
179
+ font-weight: 500;
180
+ }
181
+
182
+ .auth-sign-in__form {
183
+ display: flex;
184
+ flex-direction: column;
185
+ gap: var(--spacing-xl, 16px);
186
+ justify-content: center;
187
+ align-items: center;
188
+ width: 100%;
189
+ }
190
+
191
+ .auth-sign-in__apple-icon,
192
+ .auth-sign-in__google-icon {
193
+ border: none;
194
+ background-color: transparent;
195
+ display: flex;
196
+ width: 32px;
197
+ height: 32px;
198
+ justify-content: center;
199
+ align-items: center;
200
+ transition: transform 300ms ease-out;
201
+ }
202
+
203
+ .auth-sign-in__apple-icon:hover,
204
+ .auth-sign-in__google-icon:hover {
205
+ transform: scale(1.125);
206
+ }
207
+
208
+ .auth-sign-in__social-login {
209
+ display: flex;
210
+ padding: 0px var(--spacing-2xl, 20px);
211
+ justify-content: center;
212
+ align-items: center;
213
+ gap: var(--spacing-4xl, 32px);
214
+ align-self: stretch;
215
+ }
216
+
217
+ .auth-sign-in__title {
218
+ font-size: var(--text-widget-base);
219
+ line-height: var(--text-widget-base--line-height);
220
+ letter-spacing: var(--text-widget-base--letter-spacing);
221
+ font-weight: 600;
222
+ }
223
+
224
+ .auth-sign-in__submit-button {
225
+ width: 100%;
226
+ height: 40px;
227
+ color: var(--color-text-text-default);
228
+ }
229
+
230
+ .auth-sign-in__email-input {
231
+ width: 100%;
232
+ height: 40px;
233
+ color: var(--color-text-text-default);
234
+ }
235
+ `;var ce=O,me=X,h=class extends oe{constructor(){super(...arguments);this.email="";this.emailError="";this.isSubmitting=!1;this.isValid=!1}validateEmail(t){return t?!0:(this.emailError="Please enter an email address",this.isValid=!1,!1)}handleBlur(){this.email&&this.validateEmail(this.email)}handleEmailChange(t){this.email=t.target.value,this.email?this.validateEmail(this.email):(this.emailError="",this.isValid=!1)}handleInvalid(t){let{valid:e,validationMessage:r,validity:n}=t.detail;e||(console.log("Validation failed:",r),n.typeMismatch&&console.log("Invalid email format"),n.patternMismatch&&console.log("Pattern mismatch")),this.isValid=e}async handleSubmit(t){if(t.preventDefault(),!(!this.validateEmail(this.email)||this.isSubmitting)){if(!this.authContext?.signIn)throw new Error("Authentication context not available");this.isSubmitting=!0;try{let e=await this.authContext.signIn({email:this.email});this.onSuccess(e)}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(t){this.emit("pop-success",{email:t.email,expires:t.expires})}onFailure(){console.log("failure"),this.emit("pop-error",{error:"Creating a session failed",success:!1})}render(){return le`<div
236
+ class=${pe({"auth-sign-in":!0})}
237
+ part="base"
238
+ >
239
+ <form class="auth-sign-in__form" @submit=${this.handleSubmit}>
240
+ <pop-logo variant="logo" theme="white" style="width: 100px; height: 16px;"></pop-logo>
241
+ <h2 class="auth-sign-in__title">Small communities, big connections 👋</h2>
242
+ <pop-form-input-simple
243
+ aria-invalid=${this.emailError?"true":"false"}
244
+ aria-describedby="email-error"
245
+ autocomplete="off"
246
+ errorMessage=${this.emailError}
247
+ name="email"
248
+ type="email"
249
+ placeholder="Email"
250
+ pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+.[a-zA-Z]{2,}"
251
+ .value=${this.email}
252
+ .disabled=${this.isSubmitting}
253
+ ?required=${!0}
254
+ ?error=${!!this.emailError}
255
+ @input=${this.handleEmailChange}
256
+ @blur=${this.handleBlur}
257
+ @pop-invalid=${this.handleInvalid}
258
+ ></pop-form-input-simple>
259
+ <pop-button
260
+ class="auth-sign-in__submit-button"
261
+ theme="brand"
262
+ variant="primary"
263
+ current
264
+ ?disabled=${this.isSubmitting||!this.isValid}
265
+ >
266
+ ${this.isSubmitting?"Submitting...":"Continue"}
267
+ </pop-button>
268
+ </form>
269
+ <div class="auth-sign-in__social-login">
270
+ <button class="auth-sign-in__google-icon" type="button">
271
+ <img src=${ce} alt="Google" />
272
+ </button>
273
+ <button class="auth-sign-in__apple-icon" type="button">
274
+ <img src=${me} alt="Apple" />
275
+ </button>
276
+ </div>
277
+ <div class="auth-sign-in__footer">
278
+ <pop-button-link ?primary=${!0} size="sm">What's Popgrids?</pop-button-link>
279
+ </div>
280
+ </div>`}};h.styles=[l(h,h,"styles"),tt],i([se({context:D,subscribe:!0})],h.prototype,"authContext",2),i([B()],h.prototype,"email",2),i([B()],h.prototype,"emailError",2),i([B()],h.prototype,"isSubmitting",2),i([B()],h.prototype,"isValid",2),h=i([de("pop-auth-sign-in")],h);var ue=h;import{consume as he}from"@lit/context";import{PopElement as ge}from"@popgrids/ui";import{html as z}from"lit";import{customElement as xe,property as ve,query as ye,queryAll as be,state as L}from"lit/decorators.js";import{classMap as Ce}from"lit/directives/class-map.js";import{when as it}from"lit/directives/when.js";import{css as fe}from"lit";var et=fe`
281
+ :host {
282
+ display: block;
283
+ }
284
+
285
+ .auth-verify-code {
286
+ display: flex;
287
+ padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
288
+ flex-direction: column;
289
+ justify-content: center;
290
+ align-items: center;
291
+ gap: var(--spacing-xl, 16px);
292
+ position: relative;
293
+ }
294
+
295
+ .auth-verify-code__toast {
296
+ position: absolute;
297
+ }
298
+
299
+ .auth-verify-code__body {
300
+ display: flex;
301
+ flex-direction: column;
302
+ align-items: center;
303
+ gap: var(--spacing-md, 8px);
304
+ align-self: stretch;
305
+ font-size: var(--text-xs);
306
+ line-height: var(--text-xs--line-height);
307
+ text-align: center;
308
+ }
309
+
310
+ .auth-verify-code__help .auth-verify-code__body {
311
+ text-align: left;
312
+ }
313
+
314
+ .auth-verify-code__body strong {
315
+ font-weight: 600;
316
+ }
317
+
318
+ .auth-verify-code__footer {
319
+ display: flex;
320
+ color: var(--color-text-text-default);
321
+ justify-content: center;
322
+ align-items: flex-start;
323
+ gap: var(--spacing-2xl, 20px);
324
+ }
325
+
326
+ .auth-verify-code__form {
327
+ display: flex;
328
+ flex-direction: column;
329
+ align-items: center;
330
+ gap: var(--spacing-xl, 16px);
331
+ }
332
+
333
+ .auth-verify-code__help {
334
+ display: flex;
335
+ flex-direction: column;
336
+ align-items: center;
337
+ gap: var(--spacing-xl, 16px);
338
+ }
339
+
340
+ .auth-verify-code__title {
341
+ font-size: var(--text-widget-base);
342
+ line-height: var(--text-widget-base--line-height);
343
+ letter-spacing: var(--text-widget-base--letter-spacing);
344
+ font-weight: 600;
345
+ }
346
+
347
+ .auth-verify-code__code-input-fields {
348
+ display: flex;
349
+ justify-content: center;
350
+ align-items: flex-start;
351
+ gap: var(--spacing-xl, 16px);
352
+ margin-bottom: var(--spacing-xs, 4px);
353
+ }
354
+
355
+ .auth-verify-code__code-input-group {
356
+ display: flex;
357
+ align-items: center;
358
+ gap: var(--spacing-sm, 6px);
359
+ }
360
+ `;var p=class extends ge{constructor(){super(...arguments);this.email="";this.code="";this.isSubmitting=!1;this.error="";this._showingHelp=!1;this._showingToast=!1;this._toastMessage=""}getCodeInput(t){return this.codeInputs[t]}closeToast(){this._showingToast=!1}handleContactSupport(){console.log("handleContactSupport")}async handleResendCode(){console.log("handleResendCode");try{let t=await this.authContext?.signIn({email:this.email});this._showingHelp=!1}catch(t){console.error(t)}finally{this.isSubmitting=!1}}handleInput(t){let e=t.target,r=/^\d$/.test(e.value);if(r||e.value===""){if(r){let n=Array.from(this.codeInputs).indexOf(t.currentTarget);n<this.codeInputs.length-1&&this.getCodeInput(n+1)?.focus()}this.updateCodeValue()}else e.value=""}handleKeyDown(t){let e=t.target,r=Array.from(this.codeInputs).indexOf(t.currentTarget);if(t.key==="Backspace"&&e.value===""&&r>0){let n=this.getCodeInput(r-1);n?.focus(),n?.select()}if(t.key==="ArrowLeft"&&r>0){let n=this.getCodeInput(r-1);n?.focus(),n?.select()}if(t.key==="ArrowRight"&&r<this.codeInputs.length-1){let n=this.getCodeInput(r+1);n?.focus(),n?.select()}}handleFocus(t){t.target.select()}showToast(t){this._showingToast=!0,this._toastMessage=t}toggleHelp(){this._showingHelp=!this._showingHelp,console.log("handleNeedHelpClick")}handleSubmit(t){t.preventDefault(),this.submitForm()}handlePaste(t){t.preventDefault();let e=t.clipboardData;if(!e)return;e.getData("text").replace(/\D/g,"").substring(0,this.codeInputs.length).split("").forEach((_,d)=>{if(d<this.codeInputs.length){let c=this.getCodeInput(d);c&&(c.value=_)}});let o=Array.from(this.codeInputs).findIndex(_=>!_.value),M=o!==-1?o:this.codeInputs.length-1;this.getCodeInput(M)?.focus(),this.updateCodeValue()}updateCodeValue(){let t=Array.from(this.codeInputs).map(r=>r.value);this.code=t.join(""),this.hiddenInput&&(this.hiddenInput.value=this.code),t.length===6&&t.every(r=>/^\d$/.test(r))&&setTimeout(()=>this.submitForm(),0)}async submitForm(){if(!(!this.authContext?.verifyCode||this.isSubmitting||!this.email||this.code.length!==6)){this.isSubmitting=!0,this.error="";try{await this.authContext.verifyCode(this.code,this.email),this.onSuccess()}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(){this.emit("pop-success")}onFailure(){this.showToast("Verification failed. Please try again."),Array.from(this.codeInputs).forEach(t=>{t.value=""}),this.codeInputs.length&&this.getCodeInput(0)?.focus(),this.code=""}render(){return z`<div
361
+ class=${Ce({"auth-verify-code":!0})}
362
+ part="base"
363
+ >
364
+ ${it(this._showingToast,()=>z`<pop-toast class="auth-verify-code__toast" theme="transparent" @pop-close=${this.closeToast}
365
+ >${this._toastMessage}</pop-toast
366
+ >`)}
367
+ ${it(!this._showingHelp,()=>z`
368
+ <form class="auth-verify-code__form" @submit=${this.handleSubmit}>
369
+ <input type="hidden" name="code" value=${this.code} />
370
+ <h2 class="auth-verify-code__title">Enter Verification Code</h2>
371
+ <div class="auth-verify-code__code-input-fields">
372
+ <div class="auth-verify-code__code-input-group">
373
+ <pop-code-input-field
374
+ name="code_1"
375
+ autofocus
376
+ .disabled=${this.isSubmitting}
377
+ @input=${this.handleInput}
378
+ @keydown=${this.handleKeyDown}
379
+ @focus=${this.handleFocus}
380
+ @paste=${this.handlePaste}
381
+ ></pop-code-input-field>
382
+ <pop-code-input-field
383
+ name="code_2"
384
+ .disabled=${this.isSubmitting}
385
+ @input=${this.handleInput}
386
+ @keydown=${this.handleKeyDown}
387
+ @focus=${this.handleFocus}
388
+ @paste=${this.handlePaste}
389
+ ></pop-code-input-field>
390
+ <pop-code-input-field
391
+ name="code_3"
392
+ .disabled=${this.isSubmitting}
393
+ @input=${this.handleInput}
394
+ @keydown=${this.handleKeyDown}
395
+ @focus=${this.handleFocus}
396
+ @paste=${this.handlePaste}
397
+ ></pop-code-input-field>
398
+ </div>
399
+ <div class="auth-verify-code__code-input-group">
400
+ <pop-code-input-field
401
+ name="code_4"
402
+ .disabled=${this.isSubmitting}
403
+ @input=${this.handleInput}
404
+ @keydown=${this.handleKeyDown}
405
+ @focus=${this.handleFocus}
406
+ @paste=${this.handlePaste}
407
+ ></pop-code-input-field>
408
+ <pop-code-input-field
409
+ name="code_5"
410
+ .disabled=${this.isSubmitting}
411
+ @input=${this.handleInput}
412
+ @keydown=${this.handleKeyDown}
413
+ @focus=${this.handleFocus}
414
+ @paste=${this.handlePaste}
415
+ ></pop-code-input-field>
416
+ <pop-code-input-field
417
+ name="code_6"
418
+ .disabled=${this.isSubmitting}
419
+ @input=${this.handleInput}
420
+ @keydown=${this.handleKeyDown}
421
+ @focus=${this.handleFocus}
422
+ @paste=${this.handlePaste}
423
+ ></pop-code-input-field>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="auth-verify-code__body">
428
+ <p>A verification code has been sent to your email. Enter code to continue.</p>
429
+ <p>
430
+ Code expires in
431
+ <pop-timestamp-countdown>${this.authContext?.verificationExpiresAt}</pop-timestamp-countdown>.
432
+ </p>
433
+ </div>
434
+
435
+ <div class="auth-verify-code__footer">
436
+ <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.toggleHelp}>
437
+ No verification code?
438
+ </pop-button-link>
439
+ </div>
440
+ </form>
441
+ `,()=>z`
442
+ <div class="auth-verify-code__help">
443
+ <h2 class="auth-verify-code__title">Steps to Take</h2>
444
+ <div class="auth-verify-code__body">
445
+ <ul>
446
+ <li><strong>Check spam/junk</strong> – it might be there.</li>
447
+ <li><strong>Verify email</strong> – check your email for typos.</li>
448
+ <li><strong>Wait a moment</strong> – emails take a few mins.</li>
449
+ <li><strong>Whitelist us</strong> – it may be blocked.</li>
450
+ </ul>
451
+ </div>
452
+ <div class="auth-verify-code__footer">
453
+ <pop-button-link size="sm" theme="default" @click=${this.handleContactSupport}>
454
+ Contact Support
455
+ </pop-button-link>
456
+ <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.handleResendCode}>
457
+ Resend Code
458
+ </pop-button-link>
459
+ </div>
460
+ </div>
461
+ `)}
462
+ </div>`}};p.styles=[l(p,p,"styles"),et],i([he({context:D,subscribe:!0})],p.prototype,"authContext",2),i([ve({type:String})],p.prototype,"email",2),i([L()],p.prototype,"code",2),i([L()],p.prototype,"isSubmitting",2),i([L()],p.prototype,"error",2),i([L()],p.prototype,"_showingHelp",2),i([L()],p.prototype,"_showingToast",2),i([L()],p.prototype,"_toastMessage",2),i([ye('input[name="code"]')],p.prototype,"hiddenInput",2),i([be("pop-code-input-field")],p.prototype,"codeInputs",2),p=i([xe("pop-auth-verify-code")],p);var we=p;import{PopElement as ke}from"@popgrids/ui";import{html as je}from"lit";import{customElement as De}from"lit/decorators.js";import{classMap as Ae}from"lit/directives/class-map.js";import{css as Se}from"lit";var rt=Se`
463
+ :host {
464
+ display: block;
465
+ }
466
+
467
+ .comment-bar {
468
+ align-items: flex-start;
469
+ background: var(--color-border-singular-border-island);
470
+ border-top: 1px solid var(--color-surface-alpha-alpha-input-bar);
471
+ padding: var(--spacing-sm, 6px) var(--spacing-sm, 6px) var(--spacing-md, 8px) var(--spacing-sm, 6px);
472
+ position: relative;
473
+ transition: all var(--duration-quick) var(--ease-quick);
474
+ }
475
+
476
+ .comment-bar__actions {
477
+ position: relative;
478
+ display: grid;
479
+ grid-template-columns: auto 1fr 0px;
480
+ gap: 6px;
481
+ align-items: start;
482
+ transition: all var(--duration-quick) var(--ease-quick);
483
+ }
484
+ .comment-bar--has-content {
485
+ grid-template-columns: auto 1fr 32px;
486
+ }
487
+
488
+ .comment-bar__avatars {
489
+ display: flex;
490
+ align-items: center;
491
+ padding-top: 2px;
492
+ }
493
+
494
+ .comment-bar__avatars > *:not(:last-child) {
495
+ margin-right: -4px;
496
+ }
497
+
498
+ .comment-bar__avatars > pop-comment-avatar {
499
+ transition: transform var(--duration-pop-hover) var(--ease-pop-hover);
500
+ }
501
+ .comment-bar__avatars > pop-comment-avatar:hover {
502
+ transform: scale(1.1875);
503
+ }
504
+
505
+ .comment-bar__send-icon {
506
+ position: absolute;
507
+ right: 0;
508
+ bottom: 0.5px;
509
+ transition: opacity var(--duration-150) var(--ease-linear);
510
+ opacity: 0;
511
+ }
512
+ .comment-bar--has-content .comment-bar__send-icon {
513
+ opacity: 1;
514
+ }
515
+ `;var A=class extends ke{render(){return je`
516
+ <div
517
+ class=${Ae({"comment-bar":!0})}
518
+ part="base"
519
+ >
520
+ <div class="comment-bar__actions">
521
+ <div>
522
+ <div class="comment-bar__avatars">
523
+ <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
524
+ <img src="https://i.pravatar.cc/90" alt="User avatar" />
525
+ </pop-comment-avatar>
526
+ <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
527
+ <img src="https://i.pravatar.cc/100" alt="User avatar" />
528
+ </pop-comment-avatar>
529
+ </div>
530
+ </div>
531
+ <pop-comment-input></pop-comment-input>
532
+ <pop-comment-icon class="comment-bar__send-icon" theme="neutral" variant="send" size="sm"></pop-comment-icon>
533
+ </div>
534
+ </div>
535
+ `}};A.styles=[l(A,A,"styles"),rt],A=i([De("pop-comment-bar")],A);var _e=A;import{computePosition as Me,flip as Ve,offset as qe,shift as Le}from"@floating-ui/dom";import{consume as nt}from"@lit/context";import{PopElement as He}from"@popgrids/ui";import{Editor as $e,mergeAttributes as Be}from"@tiptap/core";import ze from"@tiptap/extension-document";import{Mention as Ie}from"@tiptap/extension-mention";import Re from"@tiptap/extension-paragraph";import Ue from"@tiptap/extension-placeholder";import Ke from"@tiptap/extension-text";import Ne from"@tiptap/extension-typography";import{html as st}from"lit";import{customElement as Qe,property as Je,query as Fe,state as ot}from"lit/decorators.js";import{classMap as Ze}from"lit/directives/class-map.js";import{createContext as Ee}from"@lit/context";var C=Ee(Symbol("pop-grid-context"));import{css as Te}from"lit";var at=Te`
536
+ :host {
537
+ display: flex;
538
+ position: relative;
539
+ }
540
+
541
+ .comment-input {
542
+ display: flex;
543
+ align-items: flex-end;
544
+ justify-content: center;
545
+ max-height: 280px;
546
+ width: 100%;
547
+ padding-top: 4px;
548
+ padding-right: 8px;
549
+ padding-bottom: 4px;
550
+ padding-left: 12px;
551
+ background-color: var(--color-surface-alpha-singular-alpha-input-bar);
552
+ transition: all var(--duration-quick) var(--ease-quick);
553
+ border-radius: 18px;
554
+ min-height: 36px;
555
+ flex: 1 0 0;
556
+ }
557
+
558
+ .comment-input--has-error {
559
+ border-color: var(--color-border-conditional-border-error);
560
+ background-color: var(--color-surface-alpha-alpha-error);
561
+ }
562
+
563
+ .comment-input__input {
564
+ display: flex;
565
+ padding: 5px 0;
566
+ align-items: flex-end;
567
+ gap: 2px;
568
+ flex: 1 0 0;
569
+ font-size: var(--text-widget-base);
570
+ line-height: var(--text-widget-base--line-height);
571
+ letter-spacing: var(--text-widget-base--letter-spacing);
572
+ white-space: pre-wrap;
573
+ }
574
+
575
+ .tiptap__editor {
576
+ color: var(--color-text-text-default);
577
+ font-size: var(--text-widget-base);
578
+ line-height: var(--text-widget-base--line-height);
579
+ letter-spacing: var(--text-widget-base--letter-spacing);
580
+ max-height: 264px;
581
+ outline: none;
582
+ overflow-y: auto;
583
+ position: relative;
584
+ width: 100%;
585
+ }
586
+
587
+ .tiptap__mention {
588
+ color: var(--color-text-singular-text-link);
589
+ font-weight: var(--font-weight-medium);
590
+ }
591
+
592
+ .tiptap__mention-popup {
593
+ background: var(--color-surface-bg-default);
594
+ border-radius: var(--radius-sm);
595
+ border: 1px solid var(--color-border-border-edge-strong);
596
+ box-shadow: var(--shadow-lg);
597
+ position: absolute;
598
+ z-index: 1000;
599
+ transition: opacity 0.1s ease-in-out;
600
+ }
601
+
602
+ .tiptap__mention-popup ul {
603
+ align-items: flex-start;
604
+ display: flex;
605
+ flex-direction: column;
606
+ list-style: none;
607
+ margin: 0;
608
+ padding: var(--spacing-sm);
609
+ }
610
+
611
+ .tiptap__mention-popup li {
612
+ -webkit-box-orient: vertical;
613
+ -webkit-line-clamp: 1;
614
+ align-items: center;
615
+ align-self: stretch;
616
+ background: var(--color-surface-buttons-secondary-bg-blank-resting);
617
+ border-radius: var(--radius-sm);
618
+ color: var(--color-text-text-default);
619
+ cursor: pointer;
620
+ display: -webkit-box;
621
+ display: flex;
622
+ flex: 1 0 0;
623
+ font-size: var(--text-widget-base);
624
+ line-height: var(--text-widget-base--line-height);
625
+ letter-spacing: var(--text-widget-base--letter-spacing);
626
+ font-weight: 400;
627
+ gap: 12px;
628
+ padding: 8px;
629
+ }
630
+
631
+ .tiptap__mention-popup li:hover {
632
+ background: #f0f0f0;
633
+ }
634
+
635
+ .tiptap__mention-popup li[data-selected] {
636
+ background: var(--color-surface-buttons-secondary-bg-blank-hover);
637
+ }
638
+
639
+ .is-editor-empty:first-child::before {
640
+ color: var(--color-text-text-placeholder);
641
+ content: attr(data-placeholder);
642
+ float: left;
643
+ height: 0;
644
+ pointer-events: none;
645
+ }
646
+ `;var m=class extends He{constructor(){super(...arguments);this.variant="text";this._content="";this._error=null}createMentionSuggestion(){return{items:async({query:t})=>{if(!t||t.trim().length===0)return[];let e=this.apiState?.client;if(!e)return[];let{data:r,error:n}=await e.GET("/api/v1/accounts",{params:{query:{by_name:t}}});return n?[]:r?r.map(o=>({id:o.id,label:o.name,href:o.url})):[]},render:()=>{let t,e,r,n,o=0,M=()=>{let d=n.querySelectorAll("li");d.forEach((c,S)=>{S===o?c.setAttribute("data-selected","true"):c.removeAttribute("data-selected")}),d.length>0?(e.style.visibility="visible",e.style.opacity="1"):(e.style.visibility="hidden",e.style.opacity="0")},R=async d=>{if(!e||!d)return;let c={getBoundingClientRect(){return d}},{x:S,y:k}=await Me(c,e,{placement:"top-start",middleware:[qe(6),Ve(),Le({padding:8})]});Object.assign(e.style,{position:"absolute",left:`${S}px`,top:`${k}px`})},_=()=>{e&&(e.style.opacity="0",e.style.visibility="hidden",setTimeout(()=>{e?.remove(),e=void 0,n=void 0},150))};return{onStart:d=>{t=d.command;let c=this.shadowRoot?.querySelector(".tiptap__mention-popup");if(c&&c.remove(),e=document.createElement("div"),e.className="tiptap__mention-popup",e.style.opacity="0",e.style.transition="opacity 150ms ease-in-out",e.style.visibility="hidden",this.shadowRoot?.appendChild(e),r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,n=document.createElement("ul");for(let k of r){let V=document.createElement("li");V.textContent=k.label,V.addEventListener("click",J=>{J.preventDefault(),J.stopPropagation(),t({id:k.id,label:k.label,href:k.href}),_()}),n.appendChild(V)}e.appendChild(n),M();let S=d.clientRect?.();S&&R(S)},onUpdate:d=>{if(t=d.command,r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,n?n.innerHTML="":(n=document.createElement("ul"),e.appendChild(n));for(let S of r){let k=document.createElement("li");k.textContent=S.label,k.addEventListener("click",V=>{V.preventDefault(),V.stopPropagation(),t({id:S.id,label:S.label,href:S.href}),_()}),n.appendChild(k)}M();let c=d.clientRect?.();c&&R(c)},onKeyDown:d=>{if(d.event?.key==="Escape")return _(),!0;if(d.event?.key==="ArrowDown")return o=(o+1)%r.length,M(),!0;if(d.event?.key==="ArrowUp")return o=(o-1+r.length)%r.length,M(),!0;if(d.event?.key==="Enter"){let c=r[o];if(c)return t({id:c.id,label:c.label,href:c.href}),_(),!0}return!1},onExit:()=>{_()}}}}}async firstUpdated(){await this.updateComplete,this.initializeEditor()}disconnectedCallback(){this.editor?.destroy(),super.disconnectedCallback()}initializeEditor(){if(!this._editor)return;let t=this.createMentionSuggestion();this.editor=new $e({element:this._editor,content:this._content,editable:!0,editorProps:{attributes:{class:"tiptap__editor"}},extensions:[ze,Ie.configure({HTMLAttributes:{class:"tiptap__mention"},renderText({options:e,node:r}){return`${e.suggestion.char}${r.attrs.label??r.attrs.id}`},renderHTML({options:e,node:r}){return["a",Be({href:`${r.attrs.href}`},e.HTMLAttributes),`${e.suggestion.char}${r.attrs.label??r.attrs.id}`]},suggestion:t}).extend({addAttributes(){return{id:{default:null,parseHTML:e=>e.getAttribute("data-id"),renderHTML:e=>({"data-id":e.id})},label:{default:null,parseHTML:e=>e.getAttribute("data-label"),renderHTML:e=>({"data-label":e.label})},href:{default:null,parseHTML:e=>e.getAttribute("href"),renderHTML:e=>({href:e.href})}}}}),Re,Ue.configure({placeholder:"Try mentioning someone using @ symbol"}),Ke,Ne],onUpdate:({editor:e})=>{this._content=e.getHTML(),this.emit("pop-content-change",this._content)}})}render(){return st`<div
647
+ class=${Ze({"comment-input":!0,[`comment-input--variant-${this.variant}`]:!0,"comment-input--has-error":!!this._error})}
648
+ part="base"
649
+ >
650
+ <div class="comment-input__input"></div>
651
+ ${this._error?st`<div class="comment-input__error">${this._error.message}</div>`:""}
652
+ </div>`}};m.styles=[l(m,m,"styles"),at],i([nt({context:E,subscribe:!0})],m.prototype,"apiState",2),i([nt({context:C,subscribe:!0})],m.prototype,"gridContext",2),i([Je({type:String})],m.prototype,"variant",2),i([Fe(".comment-input__input")],m.prototype,"_editor",2),i([ot()],m.prototype,"_content",2),i([ot()],m.prototype,"_error",2),m=i([Qe("pop-comment-input")],m);var Ye=m;import{consume as Pe}from"@lit/context";import{PopElement as We}from"@popgrids/ui";import{html as K}from"lit";import{customElement as Xe,property as Oe}from"lit/decorators.js";import{classMap as ti}from"lit/directives/class-map.js";import{when as ei}from"lit/directives/when.js";import{css as Ge}from"lit";var lt=Ge`
653
+ :host {
654
+ display: block;
655
+ }
656
+
657
+ .comment-thread {
658
+ display: flex;
659
+ flex-direction: column;
660
+ align-items: stretch;
661
+ gap: 12px;
662
+ }
663
+
664
+ .comment-thread--size-sm {
665
+ }
666
+
667
+ .comment-thread--size-md {
668
+ }
669
+
670
+ .comment-thread__replies {
671
+ display: flex;
672
+ padding-left: var(--spacing-3xl, 24px);
673
+ flex-direction: column;
674
+ align-items: center;
675
+ gap: var(--spacing-lg, 12px);
676
+ }
677
+ `;var w=class extends We{get comment(){return this.gridContext?.comments.find(a=>a.id===this.id)}render(){return K`
678
+ <div
679
+ class=${ti({"comment-thread":!0})}
680
+ >
681
+ <pop-comment id=${this.id}></pop-comment>
682
+ ${ei((this.comment?.repliesCount??0)>0,()=>K`
683
+ <div class="comment-thread__replies">
684
+ ${this.comment?.replies.map(a=>K`<pop-comment id=${a.id}></pop-comment>`)}
685
+ </div>
686
+ `)}
687
+ </div>
688
+ `}};w.styles=[l(w,w,"styles"),lt],i([Pe({context:C,subscribe:!0})],w.prototype,"gridContext",2),i([Oe({type:String})],w.prototype,"id",2),w=i([Xe("pop-comment-thread")],w);var ii=w;import{consume as ai}from"@lit/context";import{PopElement as ni}from"@popgrids/ui";import{html as si}from"lit";import{customElement as oi,property as li,query as di,state as ct}from"lit/decorators.js";import{classMap as mt}from"lit/directives/class-map.js";import{styleMap as pi}from"lit/directives/style-map.js";import{sampleColor as ci}from"@popgrids/ui";function dt(s){let a=(Date.now()-s.getTime())/1e3;return a<60?`${Math.floor(a)}s`:a<3600?`${Math.floor(a/60)}m`:a<86400?`${Math.floor(a/3600)}h`:`${Math.floor(a/86400)}d`}import{ifDefined as mi}from"lit/directives/if-defined.js";import{css as ri}from"lit";var pt=ri`
689
+ :host {
690
+ display: block;
691
+ }
692
+
693
+ .comment {
694
+ display: flex;
695
+ width: 100%;
696
+ align-items: center;
697
+ background-color: transparent;
698
+
699
+ border: none;
700
+ padding: 0;
701
+ border-radius: var(--radius-md);
702
+ outline: 6px solid transparent;
703
+ transition:
704
+ background-color 0.2s ease,
705
+ outline-color 0.2s ease;
706
+ }
707
+
708
+ .comment--size-sm {
709
+ --avatar-size: 32px;
710
+ --width: 32px;
711
+
712
+ gap: 8px;
713
+ }
714
+
715
+ .comment--size-lg {
716
+ --avatar-size: 56px;
717
+ --width: 56px;
718
+
719
+ gap: 12px;
720
+ }
721
+
722
+ .comment--is-selected {
723
+ background-color: var(--color-black-alpha-900);
724
+ outline-color: var(--color-black-alpha-900);
725
+ }
726
+
727
+ @media (hover: hover) and (pointer: fine) {
728
+ .comment:hover .comment__avatar {
729
+ transform: translateX(2px);
730
+ }
731
+ }
732
+
733
+ .comment--is-selected .comment__avatar {
734
+ transform: translateX(2px);
735
+ }
736
+
737
+ .comment__avatar {
738
+ --border-size: 0;
739
+ width: var(--avatar-size);
740
+ height: var(--avatar-size);
741
+ }
742
+
743
+ .comment__user {
744
+ display: flex;
745
+ width: var(--width);
746
+ align-items: flex-start;
747
+ gap: 10px;
748
+ flex-shrink: 0;
749
+ align-self: stretch;
750
+ }
751
+
752
+ .comment__content {
753
+ display: flex;
754
+ flex-direction: column;
755
+ align-items: flex-start;
756
+ flex: 1 0 0;
757
+ align-self: stretch;
758
+ }
759
+
760
+ .comment__info {
761
+ display: flex;
762
+ align-items: flex-start;
763
+ align-self: stretch;
764
+ }
765
+
766
+ .comment__user-name {
767
+ color: var(--color-text-text-default, #000);
768
+ font-feature-settings:
769
+ "liga" off,
770
+ "clig" off;
771
+ font-family: Inter;
772
+ font-size: var(--text-widget-base, 13px);
773
+ font-style: normal;
774
+ font-weight: 500;
775
+ line-height: var(--text-widget-base--line-height, 18px);
776
+ letter-spacing: -0.08px;
777
+ }
778
+
779
+ .comment__timestamp {
780
+ color: var(--color-text-text-default-dim-light, #697586);
781
+ font-feature-settings:
782
+ "liga" off,
783
+ "clig" off;
784
+ /* Widget/Regular */
785
+ font-family: Inter;
786
+ font-size: var(--text-widget-base, 13px);
787
+ font-style: normal;
788
+ font-weight: 400;
789
+ line-height: var(--text-widget-base--line-height, 18px);
790
+ letter-spacing: -0.08px;
791
+ }
792
+
793
+ .comment__text {
794
+ /* Base styles */
795
+ align-self: stretch;
796
+ color: var(--color-text-text-default-dim);
797
+ font-feature-settings:
798
+ "liga" off,
799
+ "clig" off;
800
+ font-family: Inter;
801
+ font-size: var(--text-widget-base, 13px);
802
+ font-style: normal;
803
+ font-weight: 400;
804
+ line-height: var(--text-widget-base--line-height, 18px);
805
+ letter-spacing: -0.08px;
806
+ text-align: left;
807
+
808
+ /* Clamping when not expanded */
809
+ display: -webkit-box;
810
+ -webkit-line-clamp: 4;
811
+ -webkit-box-orient: vertical;
812
+ overflow: hidden;
813
+ }
814
+
815
+ .comment__text.expanded {
816
+ /* Remove line clamping */
817
+ -webkit-line-clamp: initial;
818
+ display: block;
819
+ }
820
+ `;var g=class extends ni{constructor(){super(...arguments);this._randomColor=ci();this._expanded=!1}handleClick(){let t=this.selected;if(t?this.gridContext?.selectComment(null):this.gridContext?.selectComment(this.id),this.emit("pop-click",{id:this.id,selected:!t}),!this._expanded&&this._text){let e=this._text.offsetHeight;this._expanded=!0,this.requestUpdate(),this.updateComplete.then(()=>{let r=this._text.scrollHeight;this._text.style.height=`${e}px`,this._text.style.overflow="hidden",this._text.offsetHeight,this._text.style.transition="height var(--duration-quick) var(--ease-quick)",this._text.style.height=`${r}px`,setTimeout(()=>{this._text.style.height="",this._text.style.overflow=""},300)})}}get comment(){return this.findCommentOrReply(this.gridContext?.comments??[],this.id)}get commentAvatarSize(){return this.gridContext?.grid?.layout==="sm"?"xs":"sm"}get selected(){return this.gridContext?.selectedCommentId===this.id}findCommentOrReply(t,e){let r=[...t];for(;r.length>0;){let n=r.pop();if(n){if(n.id===e)return n;n.replies&&n.replies.length>0&&r.push(...n.replies)}}return null}render(){return si`
821
+ <button
822
+ class=${mt({comment:!0,[`comment--size-${this.gridContext?.grid?.layout??"sm"}`]:!0,"comment--is-selected":this.selected})}
823
+ part="base"
824
+ type="button"
825
+ @click=${this.handleClick}
826
+ >
827
+ <div class="comment__user">
828
+ <pop-comment-avatar
829
+ class="comment__avatar"
830
+ size=${this.commentAvatarSize}
831
+ style="--comment-avatar-border-size: 0;"
832
+ >
833
+ <img
834
+ src=${mi(this.comment?.account?.avatar?.url)}
835
+ alt="${this.comment?.account?.name}'s avatar"
836
+ style=${pi({backgroundColor:this._randomColor})}
837
+ />
838
+ </pop-comment-avatar>
839
+ </div>
840
+ <div class="comment__content">
841
+ <div class="comment__info">
842
+ <div class="comment__user">
843
+ <div class="comment__user-name">${this.comment?.account?.name}</div>
844
+ <div class="comment__timestamp">
845
+ ${this.comment?dt(new Date(this.comment.createdAt??"")):""}
846
+ </div>
847
+ </div>
848
+ </div>
849
+ <div
850
+ class=${mt({comment__text:!0,expanded:this._expanded})}
851
+ >
852
+ ${this.comment?.content}
853
+ </div>
854
+ </div>
855
+ </button>
856
+ `}};g.styles=[l(g,g,"styles"),pt],i([ai({context:C,subscribe:!0})],g.prototype,"gridContext",2),i([li({type:String})],g.prototype,"id",2),i([ct()],g.prototype,"_randomColor",2),i([ct()],g.prototype,"_expanded",2),i([di(".comment__text")],g.prototype,"_text",2),g=i([oi("pop-comment")],g);var ui=g;import{consume as ft}from"@lit/context";import{PopElement as hi}from"@popgrids/ui";import{html as H}from"lit";import{customElement as gi,property as ht}from"lit/decorators.js";import{classMap as xi}from"lit/directives/class-map.js";import{css as fi}from"lit";var ut=fi`
857
+ :host {
858
+ display: flex;
859
+ }
860
+
861
+ .feed {
862
+ align-items: flex-start;
863
+ background: var(--color-border-singular-border-island, #fff);
864
+ border-radius: var(--border-radius-2xl, 16px);
865
+ border: 1px solid var(--color-border-singular-border-island, #fff);
866
+ box-shadow: var(--shadow-3xl);
867
+ display: grid;
868
+ grid-template-rows: 1fr 50px;
869
+ max-height: 400px;
870
+ max-width: 400px;
871
+ overflow: hidden;
872
+ position: relative;
873
+ }
874
+
875
+ .feed__footer {
876
+ position: absolute;
877
+ bottom: 0;
878
+ min-height: 50px;
879
+ width: 100%;
880
+ }
881
+
882
+ .feed__comment-bar {
883
+ }
884
+
885
+ .feed__content {
886
+ align-items: flex-start;
887
+ align-self: stretch;
888
+ display: flex;
889
+ gap: var(--spacing-md, 8px);
890
+ min-height: 80px;
891
+ max-height: 290px;
892
+ overflow: hidden auto;
893
+ padding: var(--spacing-md, 8px) 20px var(--spacing-xl, 16px) var(--spacing-md, 8px);
894
+ }
895
+
896
+ .feed__main {
897
+ align-items: stretch;
898
+ align-self: stretch;
899
+ display: flex;
900
+ flex-direction: column;
901
+ flex: 1 0 0;
902
+ gap: var(--spacing-xl, 16px);
903
+ min-height: 100%;
904
+ }
905
+
906
+ .feed--size-md .feed__main {
907
+ gap: var(--spacing-lg, 12px);
908
+ }
909
+ `;var v=class extends hi{constructor(){super(...arguments);this.open=!1;this.size="sm"}render(){return this.gridContext?this.gridContext.comments.length===0?H`<div class="feed__empty">No comments yet</div>`:H`
910
+ <div
911
+ class=${xi({feed:!0,"feed--is-open":this.open,[`feed--size-${this.gridContext.grid?.layout??"sm"}`]:!0})}
912
+ part="base"
913
+ >
914
+ <div class="feed__content">
915
+ <div class="feed__main">
916
+ ${this.gridContext.comments.map(t=>H`<pop-comment-thread id=${t.id}></pop-comment-thread> `)}
917
+ </div>
918
+ </div>
919
+ <div class="feed__footer">
920
+ ${this.authContext?.isAuthenticated?H`<pop-comment-bar class="feed__comment-bar"></pop-comment-bar>`:H` <pop-auth-panel class="feed__auth-panel"></pop-auth-panel> `}
921
+ </div>
922
+ </div>
923
+ `:H``}};v.styles=[l(v,v,"styles"),ut],i([ft({context:D,subscribe:!0})],v.prototype,"authContext",2),i([ft({context:C,subscribe:!0})],v.prototype,"gridContext",2),i([ht({type:Boolean,reflect:!0})],v.prototype,"open",2),i([ht({type:String})],v.prototype,"size",2),v=i([gi("pop-feed")],v);var vi=v;import{consume as yi,provide as bi}from"@lit/context";import{PopElement as Ci}from"@popgrids/ui";import{html as wi}from"lit";import{customElement as Si,property as gt,state as N}from"lit/decorators.js";var y=class extends Ci{constructor(){super(...arguments);this.grid=null;this.comments=[];this.loading=!1;this.contextData=this.initializeContextData()}initializeContextData(){return{grid:null,comments:[],loading:this.loading,fetchGrid:this.fetchGrid.bind(this),fetchReplies:this.fetchReplies.bind(this),selectedCommentId:null,selectComment:this.selectComment.bind(this)}}updateState(t){this.contextData={...this.contextData,...t},this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.id?this.fetchGrid(this.id):console.error("ID not provided.")}async fetchGrid(t){if(!this.apiState?.client){console.error("No API client provided.");return}this.updateState({loading:!0});let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{id}",{params:{path:{id:t}}});if(e){let n=e;this.grid=n.grid,this.updateState({grid:this.grid,loading:!1}),this.fetchComments(this.id)}if(r){console.error("Failed to fetch grid:",r),this.loading=!1,this.updateState({loading:this.loading});return}}async fetchComments(t){if(!this.apiState?.client)return;let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments",{params:{path:{grid_id:t}}});if(this.loading=!1,e){let n=e;this.comments=n.comments,this.updateState({comments:this.comments,loading:this.loading})}if(r){console.error("Failed to fetch comments:",r),this.updateState({loading:this.loading});return}}async fetchReplies(t){if(this.apiState?.client)try{let e=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments/{id}/replies",{params:{path:{grid_id:this.id,id:t}}});if(e.data){let n=e.data.replies||[];this.comments=this.comments.map(o=>o.id===t?{...o,replies:[...o.replies||[],...n]}:o),this.updateState({comments:this.comments})}}catch(e){console.error(`Failed to fetch replies for comment ${t}:`,e)}}selectComment(t){this.updateState({selectedCommentId:t})}render(){return wi`<slot></slot>`}};y.styles=[],i([yi({context:E})],y.prototype,"apiState",2),i([gt({type:String})],y.prototype,"id",2),i([N()],y.prototype,"grid",2),i([N()],y.prototype,"comments",2),i([N()],y.prototype,"loading",2),i([bi({context:C}),gt({attribute:!1})],y.prototype,"contextData",2),y=i([Si("pop-grid-provider")],y);var ki=y;import{PopElement as Di}from"@popgrids/ui";import{html as Ai}from"lit";import{customElement as _i,property as vt}from"lit/decorators.js";import{css as ji}from"lit";var xt=ji`
924
+ :host {
925
+ display: flex;
926
+ align-items: center;
927
+ }
928
+ `;var b=class extends Di{constructor(){super(...arguments);this.apiUrl="https://api.popgrids.com";this.gridId=""}render(){return Ai`
929
+ <pop-api-provider api-url=${this.apiUrl}>
930
+ <pop-grid-provider id=${this.gridId}>
931
+ <pop-auth-provider>
932
+ <pop-widget></pop-widget>
933
+ </pop-auth-provider>
934
+ </pop-grid-provider>
935
+ </pop-api-provider>
936
+ `}};b.styles=[l(b,b,"styles"),xt],i([vt({type:String,attribute:"api-url",reflect:!0})],b.prototype,"apiUrl",2),i([vt({type:String,attribute:"data-grid-id"})],b.prototype,"gridId",2),b=i([_i("pop-grid")],b);var Ei=b;customElements.get("pop-grid")||customElements.define("pop-grid",b);function yt(){let s=document.querySelectorAll("pop-grid[grid-id]:not([initialized])");for(let a of Array.from(s)){let t=a.getAttribute("grid-id");t&&(a.setAttribute("data-grid-id",t),a.setAttribute("initialized","true"))}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",yt):yt();import{autoUpdate as $i,computePosition as Bi,flip as zi,offset as Ii,platform as kt}from"@floating-ui/dom";import{consume as Ri}from"@lit/context";import{PopElement as Ui}from"@popgrids/ui";function Ti(){return typeof window<"u"}function bt(s){var a;return(s==null||(a=s.ownerDocument)==null?void 0:a.defaultView)||window}function Mi(s){return Ti()?s instanceof Element||s instanceof bt(s).Element:!1}function Ct(s){let a=Vi(),t=Mi(s)?qi(s):s;return["transform","translate","scale","rotate","perspective"].some(e=>t[e]?t[e]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!a&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!a&&(t.filter?t.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(e=>(t.willChange||"").includes(e))||["paint","layout","strict","content"].some(e=>(t.contain||"").includes(e))}function Vi(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function qi(s){return bt(s).getComputedStyle(s)}function wt(s){return Li(s)}function Q(s){return s.assignedSlot?s.assignedSlot:s.parentNode instanceof ShadowRoot?s.parentNode.host:s.parentNode}function Li(s){for(let a=s;a;a=Q(a))if(a instanceof Element&&getComputedStyle(a).display==="none")return null;for(let a=Q(s);a;a=Q(a)){if(!(a instanceof Element))continue;let t=getComputedStyle(a);if(t.display!=="contents"&&(t.position!=="static"||Ct(t)||a.tagName==="BODY"))return a}return null}import{html as I}from"lit";import{customElement as Ki,query as jt,state as Ni}from"lit/decorators.js";import{classMap as Dt}from"lit/directives/class-map.js";import{ifDefined as Qi}from"lit/directives/if-defined.js";import{css as Hi}from"lit";var St=Hi`
937
+ :host {
938
+ display: block;
939
+ }
940
+
941
+ .grid-widget {
942
+ display: flex;
943
+ height: 100%;
944
+ position: relative;
945
+ width: 100%;
946
+ }
947
+
948
+ .grid-widget--align-left {
949
+ justify-content: flex-start;
950
+ }
951
+
952
+ .grid-widget--align-center {
953
+ justify-content: center;
954
+ }
955
+
956
+ .grid-widget--align-right {
957
+ justify-content: flex-end;
958
+ }
959
+
960
+ .grid-widget__feed {
961
+ position: fixed;
962
+ top: 0;
963
+ left: 0;
964
+ z-index: 2147483647;
965
+ display: none;
966
+ opacity: 0;
967
+ transform: scale(0.94);
968
+ transition:
969
+ opacity var(--duration-quick) var(--ease-quick),
970
+ transform var(--duration-quick) var(--ease-quick),
971
+ display var(--duration-quick) allow-discrete;
972
+ }
973
+
974
+ .grid-widget__feed[data-current-placement="top-start"] {
975
+ transform-origin: left bottom;
976
+ }
977
+
978
+ .grid-widget__feed[data-current-placement="bottom-start"] {
979
+ transform-origin: left top;
980
+ }
981
+
982
+ .grid-widget__feed[data-current-placement="top-end"] {
983
+ transform-origin: right bottom;
984
+ }
985
+
986
+ .grid-widget__feed[data-current-placement="bottom-end"] {
987
+ transform-origin: right top;
988
+ }
989
+
990
+ .grid-widget__feed[data-current-placement="top"] {
991
+ transform-origin: bottom;
992
+ }
993
+
994
+ .grid-widget__feed[data-current-placement="bottom"] {
995
+ transform-origin: top;
996
+ }
997
+
998
+ .grid-widget__feed--open {
999
+ display: flex;
1000
+ opacity: 1;
1001
+ transform: scale(1);
1002
+
1003
+ @starting-style {
1004
+ display: flex;
1005
+ opacity: 0;
1006
+ transform: scale(0.94);
1007
+ }
1008
+ }
1009
+
1010
+ .grid-widget__loader {
1011
+ align-items: center;
1012
+ display: flex;
1013
+ min-height: 30px;
1014
+ }
1015
+
1016
+ .grid-widget__previews {
1017
+ display: inline-flex;
1018
+ align-items: flex-start;
1019
+ }
1020
+
1021
+ .grid-widget__previews > :not([hidden]) ~ :not([hidden]) {
1022
+ margin-left: -4px;
1023
+ }
1024
+
1025
+ .grid-widget__preview-avatar,
1026
+ .grid-widget__preview-sum {
1027
+ transition: transform var(--ease-quick) 600ms;
1028
+ }
1029
+
1030
+ @media (hover: hover) and (pointer: fine) {
1031
+ .grid-widget__preview-avatar:hover,
1032
+ .grid-widget__preview-sum:hover {
1033
+ cursor: pointer;
1034
+ transform: scale(1.1875);
1035
+ }
1036
+ }
1037
+
1038
+ .grid-widget__preview-avatar:active,
1039
+ .grid-widget__preview-sum:active {
1040
+ cursor: pointer;
1041
+ transform: scale(0.875);
1042
+ }
1043
+ `;var Ji={default:1,md:3,lg:5},x=class extends Ui{constructor(){super(...arguments);this._open=!1;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._feed)&&(this._open=!1)};this.reposition=()=>{if(!this._open||!this._previews||!this._feed||!this.gridContext?.grid)return;let t=[];t=[Ii({mainAxis:this.gridContext.grid.position==="down"?-16:-48,crossAxis:-13})],(!this.gridContext.grid.position||this.gridContext.grid.position==="smart")&&t.push(zi({fallbackPlacements:["bottom-start","top-start"],fallbackStrategy:"bestFit",padding:16}));let e=r=>kt.getOffsetParent(r,wt);Bi(this._previews,this._feed,{placement:this.gridContext.grid.position==="down"?"bottom-start":"top-start",middleware:t,strategy:"fixed",platform:{...kt,getOffsetParent:e}}).then(({x:r,y:n,placement:o})=>{this._feed.setAttribute("data-current-placement",o),Object.assign(this._feed.style,{left:`${r}px`,top:`${n}px`})})}}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.start(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.stop()}handlePopClick(){this._open||(this._open=!0)}start(){this._previews&&(this.cleanup=$i(this._previews,this._feed,()=>{this.reposition()}))}async stop(){return new Promise(t=>{this.cleanup?(this.cleanup(),this.cleanup=void 0,this.removeAttribute("data-current-placement"),this.style.removeProperty("--auto-size-available-width"),this.style.removeProperty("--auto-size-available-height"),requestAnimationFrame(()=>t())):t()})}async updated(t){super.updated(t),t.has("_open")&&(this._open?this.start():this.stop()),t.has("position")&&(this.gridContext?.grid?.position==="smart"&&this._open?this.start():this.stop()),this._open&&(await this.updateComplete,this.reposition())}get previewComments(){return this.gridContext?.comments.filter(t=>t.parentCommentId===null).sort((t,e)=>new Date(e.createdAt??"").getTime()-new Date(t.createdAt??"").getTime()).slice(0,Ji[this.gridContext.grid?.preview??"default"])}render(){return this.gridContext?.loading?I`<div class="grid-widget">
1044
+ <pop-loader class="grid-widget__loader" variant="spinner"></pop-loader>
1045
+ </div>`:this.gridContext?.grid?I`
1046
+ <div
1047
+ class=${Dt({"grid-widget":!0,[`grid-widget--align-${this.gridContext.grid.align}`]:!0,[`grid-widget--appearance-${this.gridContext.grid.appearance}`]:!0,[`grid-widget--icon-${this.gridContext.grid.icon}`]:!0,[`grid-widget--layout-${this.gridContext.grid.layout}`]:!0,[`grid-widget--position-${this.gridContext.grid.position}`]:!0,[`grid-widget--preview-${this.gridContext.grid.preview}`]:!0})}
1048
+ >
1049
+ <div class="grid-widget__previews">
1050
+ ${(this.previewComments??[]).map(t=>I`
1051
+ <pop-comment-avatar class="grid-widget__preview-avatar" size="xs" @click=${this.handlePopClick}>
1052
+ <img src=${Qi(t.account?.avatar?.url)} alt="${t.account?.name}’s avatar" />
1053
+ </pop-comment-avatar>
1054
+ `)}
1055
+ <pop-sum class="grid-widget__preview-sum">${this.gridContext.grid.commentsCount}</pop-sum>
1056
+ <pop-comment-icon
1057
+ size="sm"
1058
+ theme=${this.gridContext.grid?.customAddIcon?"brand":"neutral"}
1059
+ variant="add"
1060
+ .iconUrl=${this.gridContext.grid?.customAddIcon||void 0}
1061
+ ></pop-comment-icon>
1062
+ </div>
1063
+ <div
1064
+ class=${Dt({"grid-widget__feed":!0,"grid-widget__feed--open":this._open})}
1065
+ part="feed"
1066
+ >
1067
+ <pop-feed ?open=${this._open}></pop-feed>
1068
+ </div>
1069
+ </div>
1070
+ `:I`<p>No grid found.</p>`}};x.styles=[l(x,x,"styles"),St],i([Ri({context:C,subscribe:!0})],x.prototype,"gridContext",2),i([Ni()],x.prototype,"_open",2),i([jt(".grid-widget__previews")],x.prototype,"_previews",2),i([jt(".grid-widget__feed")],x.prototype,"_feed",2),x=i([Ki("pop-widget")],x);var Fi=x;import{provide as Yi}from"@lit/context";import{LitElement as Gi,html as Pi}from"lit";import{customElement as Wi,property as Xi,state as Oi}from"lit/decorators.js";import Zi from"openapi-fetch";var At=s=>Zi({baseUrl:s});var T=class extends Gi{constructor(){super(...arguments);this.apiState={baseUrl:"",client:null}}connectedCallback(){super.connectedCallback(),this.apiUrl?(this.apiState={...this.apiState,baseUrl:this.apiUrl,client:At(this.apiUrl)},this.requestUpdate()):console.error("API URL or ID not provided.")}render(){return Pi`<slot></slot>`}};i([Xi({type:String,attribute:"api-url"})],T.prototype,"apiUrl",2),i([Yi({context:E}),Oi()],T.prototype,"apiState",2),T=i([Wi("pop-api-provider")],T);var tr=T;export{tr as PopApiProvider,It as PopAuthJoin,Zt as PopAuthPanel,ie as PopAuthProvider,ue as PopAuthSignIn,we as PopAuthVerifyCode,ui as PopComment,_e as PopCommentBar,Ye as PopCommentInput,ii as PopCommentThread,vi as PopFeed,Ei as PopGrid,ki as PopGridProvider,Fi as PopWidget};
1071
+ //# sourceMappingURL=index.js.map