@popgrids/embed 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,989 @@
+import * as lit_html from 'lit-html';
+import { PopElement } from '@popgrids/ui';
+import { CSSResultGroup, LitElement } from 'lit';
+import { Client } from 'openapi-fetch';
+
+/**
+ * @summary Auth join button that displays "Join the Conversation" with the Popgrids logo.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @event pop-click - Emitted when the button is clicked.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopAuthJoin extends PopElement {
+    static styles: CSSResultGroup;
+    handleClick(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-auth-join": PopAuthJoin;
+    }
+}
+
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+interface paths {
+    "/api/v1/accounts": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * list accounts
+         * @description List all accounts
+         */
+        get: {
+            parameters: {
+                query?: {
+                    /** @description Filter accounts by name */
+                    by_name?: string;
+                    /**
+                     * @description Page number
+                     * @default 1
+                     */
+                    page?: number;
+                    /**
+                     * @description Number of accounts per page
+                     * @default 10
+                     */
+                    limit?: number;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/grids/{grid_id}/comments/{id}/replies": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description grid_id */
+                grid_id: string;
+                /** @description id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        /** replies comment */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    /** @description grid_id */
+                    grid_id: string;
+                    /** @description id */
+                    id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/grids/{grid_id}/comments": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description grid_id */
+                grid_id: string;
+            };
+            cookie?: never;
+        };
+        /** list comments */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    /** @description grid_id */
+                    grid_id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/grids/{grid_id}/comments/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description grid_id */
+                grid_id: string;
+                /** @description id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        /** show comment */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    /** @description grid_id */
+                    grid_id: string;
+                    /** @description id */
+                    id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/grids/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        /**
+         * show grid
+         * @description Show a grid by ID
+         */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    /** @description id */
+                    id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/session": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /**
+         * update session
+         * @description Update a session
+         */
+        put: {
+            parameters: {
+                query?: {
+                    /** @description email */
+                    email?: string;
+                    /** @description code */
+                    code?: string;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        /**
+         * create session
+         * @description Create a session
+         */
+        post: {
+            parameters: {
+                query?: {
+                    /** @description email */
+                    email?: string;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        /**
+         * delete session
+         * @description Delete a session
+         */
+        delete: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        options?: never;
+        head?: never;
+        /**
+         * update session
+         * @description Update a session
+         */
+        patch: {
+            parameters: {
+                query?: {
+                    /** @description email */
+                    email?: string;
+                    /** @description code */
+                    code?: string;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        trace?: never;
+    };
+    "/api/v1/users/me": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * me user
+         * @description Get the current user
+         */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description successful */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+}
+interface components {
+    schemas: {
+        avatar: {
+            url?: string;
+        };
+        grid: {
+            /** Format: uuid */
+            id?: string;
+            /** Format: uuid */
+            accountId?: string | null;
+            publicId?: string | null;
+            preview?: string | null;
+            layout?: string | null;
+            align?: string | null;
+            island?: string | null;
+            position?: string | null;
+            icon?: string | null;
+            appearance?: string | null;
+            /** @default 0 */
+            commentsCount: number;
+            /** Format: date-time */
+            lastCommentAt?: string | null;
+            /** Format: date-time */
+            createdAt?: string;
+            /** Format: date-time */
+            updatedAt?: string;
+            customAddIcon?: string | null;
+        };
+        comment: {
+            /** Format: uuid */
+            id?: string;
+            /** Format: uuid */
+            gridId?: string;
+            /** Format: uuid */
+            accountId?: string;
+            account?: components["schemas"]["account"];
+            /** Format: uuid */
+            parentCommentId?: string | null;
+            content?: string;
+            /** @default 0 */
+            repliesCount: number;
+            /** Format: date-time */
+            lastReplyAt?: string | null;
+            /** @default [] */
+            replies: components["schemas"]["comment"][];
+            /** Format: date-time */
+            createdAt?: string;
+            /** Format: date-time */
+            updatedAt?: string;
+        };
+        account: {
+            /** Format: uuid */
+            id?: string;
+            /** Format: uuid */
+            userId?: string;
+            name?: string;
+            url?: string;
+            avatar?: components["schemas"]["avatar"];
+            /** Format: date-time */
+            createdAt?: string;
+            /** Format: date-time */
+            updatedAt?: string;
+        };
+    };
+    responses: never;
+    parameters: never;
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
+}
+
+type Account = components["schemas"]["account"];
+type Comment = components["schemas"]["comment"];
+type Grid = components["schemas"]["grid"];
+
+/**
+ * Interface for the sign-in response data
+ */
+interface SignInResponse {
+    msg: string;
+    message: string;
+    email: string;
+    expires: string;
+}
+interface AuthState {
+    currentAccount: Account | null;
+    error: Error | null;
+    isAuthenticated: boolean;
+    isVerifying: boolean;
+    signIn: (credentials: {
+        email: string;
+    }) => Promise<SignInResponse>;
+    signOut: () => void;
+    token: string | null;
+    verificationExpiresAt: string | null;
+    verifyCode: (code: string, email: string) => Promise<void>;
+}
+
+/**
+ * @summary Authentication panel component that handles user authentication flows.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @description
+ * The auth panel provides a complete authentication experience with multiple states:
+ * - Collapsed state showing a join button
+ * - Sign-in form for email submission
+ * - Code verification form for completing authentication
+ * - Authenticated state display
+ *
+ * The panel automatically handles height transitions between states and
+ * closes when clicking outside or pressing the Escape key.
+ *
+ * @event pop-success - Emitted when authentication is successful.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopAuthPanel extends PopElement {
+    static styles: CSSResultGroup;
+    authContext?: AuthState;
+    _authPanel: HTMLElement;
+    _authPanelContent: HTMLElement;
+    private _email;
+    private _open;
+    handleJoinClick(): void;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private _resizeObserver;
+    private setupResizeObserver;
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private handleKeyDown;
+    private handleDocumentMouseDown;
+    private handleSignInSuccess;
+    private handleCodeVerificationSuccess;
+    private renderAuthenticated;
+    private renderJoinButton;
+    private renderSignInForm;
+    private renderVerifyCodeForm;
+    private renderUnauthenticated;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-auth-panel": PopAuthPanel;
+    }
+}
+
+interface ApiState {
+    baseUrl: string;
+    client: Client<paths> | null;
+}
+
+/**
+ * @summary A component for managing authentication state and providing authentication methods.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopAuthProvider extends PopElement {
+    static styles: CSSResultGroup;
+    apiState?: ApiState;
+    private error;
+    private isAuthenticated;
+    private currentAccount;
+    private isVerifying;
+    private token;
+    private verificationExpiresAt;
+    contextData: AuthState;
+    connectedCallback(): void;
+    private fetchCurrentAccount;
+    private signIn;
+    private verifyCode;
+    private signOut;
+    private updateContextData;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-auth-provider": PopAuthProvider;
+    }
+}
+
+/**
+ * @summary A sign-in component that provides email and social authentication options.
+ * @description
+ * The PopAuthSignIn component provides a comprehensive authentication interface with:
+ * - Email-based authentication with validation
+ * - Social login options (Google and Apple)
+ * - Loading states and error handling
+ * - Responsive design with Popgrids branding
+ *
+ * @status stable
+ * @since 0.0.1
+ *
+ * @dependency pop-logo - For displaying the Popgrids logo
+ * @dependency pop-form-input-simple - For the email input field
+ * @dependency pop-button-link - For the footer link
+ *
+ * @event pop-success - Emitted when authentication is successful. Detail contains {email: string, expires: string}
+ * @event pop-error - Emitted when authentication fails. Detail contains {error: string, success: false}
+ * @event pop-invalid - Emitted when form validation fails
+ *
+ * @csspart base - The component's base wrapper
+ *
+ * @cssproperty --auth-sign-in-width - Controls the width of the sign-in form
+ * @cssproperty --auth-sign-in-padding - Controls the padding of the sign-in form
+ */
+declare class PopAuthSignIn extends PopElement {
+    static styles: CSSResultGroup;
+    authContext?: AuthState;
+    private email;
+    private emailError;
+    private isSubmitting;
+    private isValid;
+    private validateEmail;
+    private handleBlur;
+    private handleEmailChange;
+    private handleInvalid;
+    private handleSubmit;
+    private onSuccess;
+    private onFailure;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-auth-sign-in": PopAuthSignIn;
+    }
+}
+
+/**
+ * @summary Code verification component for authentication.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @event pop-success - Emitted when code verification is successful.
+ *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopAuthVerifyCode extends PopElement {
+    static styles: CSSResultGroup;
+    authContext?: AuthState;
+    email: string;
+    private code;
+    private isSubmitting;
+    private error;
+    private _showingHelp;
+    private _showingToast;
+    private _toastMessage;
+    private hiddenInput;
+    private codeInputs;
+    private getCodeInput;
+    private closeToast;
+    private handleContactSupport;
+    private handleResendCode;
+    private handleInput;
+    private handleKeyDown;
+    private handleFocus;
+    private showToast;
+    private toggleHelp;
+    private handleSubmit;
+    private handlePaste;
+    private updateCodeValue;
+    private submitForm;
+    private onSuccess;
+    private onFailure;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-auth-verify-code": PopAuthVerifyCode;
+    }
+}
+
+/**
+ * @summary Provides the ability to add comments to a grid.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopCommentBar extends PopElement {
+    static styles: CSSResultGroup;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-comment-bar": PopCommentBar;
+    }
+}
+
+interface GridState {
+    comments: Comment[];
+    fetchGrid: (id: string) => void;
+    fetchReplies: (commentId: string) => void;
+    grid: Grid | null;
+    loading: boolean;
+    selectedCommentId: string | null;
+    selectComment: (commentId: string | null) => void;
+}
+
+/**
+ * @summary A comment input component that allows users to input comments with mentions.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @event {string} pop-content-change - Emitted when the content changes.
+ * @event {Error} pop-error - Emitted when an error occurs.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopCommentInput extends PopElement {
+    static styles: CSSResultGroup;
+    apiState?: ApiState;
+    gridContext?: GridState;
+    variant: "text" | "search";
+    _editor: HTMLElement;
+    private _content;
+    private _error;
+    private editor?;
+    private createMentionSuggestion;
+    firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    private initializeEditor;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-comment-input": PopCommentInput;
+    }
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @dependency pop-example
+ *
+ * @event pop-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+declare class PopCommentThread extends PopElement {
+    static styles: CSSResultGroup;
+    gridContext?: GridState;
+    id: string;
+    get comment(): {
+        id?: string;
+        gridId?: string;
+        accountId?: string;
+        account?: components["schemas"]["account"];
+        parentCommentId?: string | null;
+        content?: string;
+        repliesCount: number;
+        lastReplyAt?: string | null;
+        replies: components["schemas"]["comment"][];
+        createdAt?: string;
+        updatedAt?: string;
+    } | undefined;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-comment-thread": PopCommentThread;
+    }
+}
+
+/**
+ * @summary A component for displaying a comment.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @event {{ id: string, selected: boolean }} pop-click - Emitted when the comment is clicked.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+declare class PopComment extends PopElement {
+    static styles: CSSResultGroup;
+    gridContext?: GridState;
+    id: string;
+    private _randomColor;
+    private _expanded;
+    _text: HTMLElement;
+    private handleClick;
+    get comment(): {
+        id?: string;
+        gridId?: string;
+        accountId?: string;
+        account?: components["schemas"]["account"];
+        parentCommentId?: string | null;
+        content?: string;
+        repliesCount: number;
+        lastReplyAt?: string | null;
+        replies: components["schemas"]["comment"][];
+        createdAt?: string;
+        updatedAt?: string;
+    } | null;
+    get commentAvatarSize(): "sm" | "xs";
+    get selected(): boolean;
+    findCommentOrReply(comments: Comment[], id: string): {
+        id?: string;
+        gridId?: string;
+        accountId?: string;
+        account?: components["schemas"]["account"];
+        parentCommentId?: string | null;
+        content?: string;
+        repliesCount: number;
+        lastReplyAt?: string | null;
+        replies: components["schemas"]["comment"][];
+        createdAt?: string;
+        updatedAt?: string;
+    } | null;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-comment": PopComment;
+    }
+}
+
+/**
+ * @summary A component for displaying a feed of comments.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopFeed extends PopElement {
+    static styles: CSSResultGroup;
+    authContext?: AuthState;
+    gridContext?: GridState;
+    open: boolean;
+    size: "sm" | "md";
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-feed": PopFeed;
+    }
+}
+
+/**
+ * @summary A data provider for the grid component.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @slot - The default slot.
+ */
+declare class PopGridProvider extends PopElement {
+    static styles: CSSResultGroup;
+    apiState?: ApiState;
+    /** Grid ID */
+    id: string;
+    grid: Grid | null;
+    comments: Comment[];
+    loading: boolean;
+    contextData: GridState;
+    private initializeContextData;
+    private updateState;
+    connectedCallback(): void;
+    fetchGrid(id: string): Promise<void>;
+    fetchComments(gridId: string): Promise<void>;
+    fetchReplies(commentId: string): Promise<void>;
+    selectComment(commentId: string | null): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-grid-provider": PopGridProvider;
+    }
+}
+
+/**
+ * @summary A Grid displays a discussion thread.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+declare class PopGrid extends PopElement {
+    static styles: CSSResultGroup;
+    apiUrl: string;
+    gridId: string;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-grid": PopGrid;
+    }
+}
+
+/**
+ * @summary The base widget for a pop grid.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @dependency pop-widget
+ *
+ * @slot - The default slot.
+ */
+declare class PopGridView extends PopElement {
+    static styles: CSSResultGroup;
+    gridContext?: GridState;
+    private _open;
+    _previews: HTMLElement;
+    _feed: HTMLElement;
+    private cleanup;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private handleKeyDown;
+    private handleDocumentMouseDown;
+    private handlePopClick;
+    private reposition;
+    private start;
+    private stop;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    get previewComments(): {
+        id?: string;
+        gridId?: string;
+        accountId?: string;
+        account?: components["schemas"]["account"];
+        parentCommentId?: string | null;
+        content?: string;
+        repliesCount: number;
+        lastReplyAt?: string | null;
+        replies: components["schemas"]["comment"][];
+        createdAt?: string;
+        updatedAt?: string;
+    }[] | undefined;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-widget": PopGridView;
+    }
+}
+
+/**
+ * @summary A provider for the API context.
+ * @status experimental
+ * @since 0.0.1
+ *
+ * @slot - The default slot.
+ */
+declare class PopApiProvider extends LitElement {
+    apiUrl: string;
+    apiState: ApiState;
+    connectedCallback(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pop-api-provider": PopApiProvider;
+    }
+}
+
+export { PopApiProvider, PopAuthJoin, PopAuthPanel, PopAuthProvider, PopAuthSignIn, PopAuthVerifyCode, PopComment, PopCommentBar, PopCommentInput, PopCommentThread, PopFeed, PopGrid, PopGridProvider, PopGridView as PopWidget };