mediasfu-angular 1.0.0 → 1.0.2

package/dist/lib/components/mediasfu-components/mediasfu-generic.component.d.ts

@@ -130,17 +130,6 @@ import { ProcessConsumerTransportsAudio } from '../../consumers/process-consumer
 import { Device, Producer, ProducerOptions, RtpCapabilities, Transport } from 'mediasoup-client/lib/types';
 import { SelfieSegmentation } from '@mediapipe/selfie_segmentation';
 import * as i0 from "@angular/core";
-/**
- * Options for configuring the MediasfuGeneric component.
- *
- * @typedef {Object} MediasfuGenericOptions
- * @property {(options: PreJoinPageOptions | WelcomePageOptions) => HTMLElement} [PrejoinPage] - A function that returns an HTMLElement for the pre-join page.
- * @property {{ apiUserName: string; apiKey: string }} [credentials] - Credentials for API access, including username and API key.
- * @property {boolean} [useLocalUIMode] - Flag to determine if the local UI mode should be used.
- * @property {SeedData} [seedData] - Data used for seeding the component.
- * @property {boolean} [useSeed] - Flag to determine if seed data should be used.
- * @property {string} [imgSrc] - Source URL for an image to be used in the component.
- */
 export type MediasfuGenericOptions = {
     PrejoinPage?: (options: PreJoinPageOptions | WelcomePageOptions) => HTMLElement;
     credentials?: {
@@ -152,6 +141,53 @@ export type MediasfuGenericOptions = {
     useSeed?: boolean;
     imgSrc?: string;
 };
+/**
+ * MediasfuGeneric component provides a customizable interface with a full suite of modal windows and flexible layout options for interactive media applications.
+ *
+ * @component
+ * @selector app-mediasfu-generic
+ * @standalone true
+ * @imports [RouterOutlet, CommonModule, BreakoutRoomsModal, BackgroundModal, CoHostModal, AlertComponent, AudioGrid, ControlButtonsAltComponent, ControlButtonsComponentTouch, ControlButtonsComponent, FlexibleGrid, FlexibleVideo, LoadingModal, Pagination, SubAspectComponent, DisplaySettingsModal, EventSettingsModal, ConfirmExitModal, MediaSettingsModal, MenuModal, MessagesModal, ConfirmHereModal, ShareEventModal, WelcomePage, ParticipantsModal, PollModal, RecordingModal, RequestsModal, MainAspectComponent, MainContainerComponent, MainGridComponent, MainScreenComponent, OtherGridComponent, Screenboard, ScreenboardModal, Whiteboard, ConfigureWhiteboardModal, WaitingRoomModal, MenuWidget, MessageWidget, MenuRecordWidget, RecordTimerWidget, MenuParticipantsWidget, ScreenShareWidget]
+ *
+ * @template
+ * The template structure:
+ * - Conditional rendering of a PrejoinPage or WelcomePage for introductory or pre-session screens.
+ * - Main content area with nested components for grid layouts, flexible video, and audio grids.
+ * - Modals for user interactions, including participant management, event settings, breakout rooms, whiteboarding, and media settings.
+ *
+ * @input {any} PrejoinPage - Component for the prejoin page, defaults to `WelcomePage`.
+ * @input {{ apiUserName: string; apiKey: string }} credentials - API credentials for secure access.
+ * @input {boolean} useLocalUIMode - Flag to toggle local UI settings.
+ * @input {SeedData} seedData - Seed data for initializing the component with specific configurations.
+ * @input {boolean} useSeed - Enable/disable use of seed data.
+ * @input {string} imgSrc - URL for branding images or logos.
+ *
+ * @property {string} title - The title of the component, defaults to "MediaSFU-Generic".
+ *
+ * @styles
+ * Component-specific styles, including full-screen settings and customizable colors for backgrounds.
+ *
+ * @providers [CookieService] - Provides cookies service for session handling.
+ *
+ * @constructor
+ * @class MediasfuGeneric
+ * @implements OnInit, OnDestroy
+ *
+ * @method ngOnInit - Initializes the component and its configurations.
+ * @method ngOnDestroy - Performs cleanup, removing event listeners and intervals as needed.
+ *
+ * @example
+ * ```html
+ * <app-mediasfu-generic
+ *   [PrejoinPage]="CustomPrejoinComponent"
+ *   [credentials]="{ apiUserName: 'username', apiKey: 'apikey' }"
+ *   [useLocalUIMode]="true"
+ *   [seedData]="seedDataObject"
+ *   [useSeed]="true"
+ *   imgSrc="https://example.com/logo.png">
+ * </app-mediasfu-generic>
+ * ```
+ */
 export declare class MediasfuGeneric implements OnInit, OnDestroy {
     private cdr;
     private injector;

package/dist/lib/components/mediasfu-components/mediasfu-webinar.component.d.ts

@@ -129,17 +129,6 @@ import { ProcessConsumerTransportsAudio } from '../../consumers/process-consumer
 import { Device, Producer, ProducerOptions, RtpCapabilities, Transport } from 'mediasoup-client/lib/types';
 import { SelfieSegmentation } from '@mediapipe/selfie_segmentation';
 import * as i0 from "@angular/core";
-/**
- * Options for configuring the MediasfuWebinar component.
- *
- * @typedef {Object} MediasfuWebinarOptions
- * @property {(options: PreJoinPageOptions | WelcomePageOptions) => HTMLElement} [PrejoinPage] - A function that returns an HTMLElement for the pre-join page.
- * @property {{ apiUserName: string; apiKey: string }} [credentials] - Credentials for API access, including username and API key.
- * @property {boolean} [useLocalUIMode] - Flag to determine if the local UI mode should be used.
- * @property {SeedData} [seedData] - Data used for seeding the component.
- * @property {boolean} [useSeed] - Flag to determine if seed data should be used.
- * @property {string} [imgSrc] - Source URL for an image to be used in the component.
- */
 export type MediasfuWebinarOptions = {
     PrejoinPage?: (options: PreJoinPageOptions | WelcomePageOptions) => HTMLElement;
     credentials?: {
@@ -151,6 +140,51 @@ export type MediasfuWebinarOptions = {
     useSeed?: boolean;
     imgSrc?: string;
 };
+/**
+ * Component for managing webinars in the MediaSFU environment.
+ *
+ * @selector app-mediasfu-webinar
+ * @standalone true
+ * @imports [RouterOutlet, CommonModule, BreakoutRoomsModal, BackgroundModal, CoHostModal, AlertComponent, AudioGrid, ControlButtonsAltComponent, ControlButtonsComponent, FlexibleGrid, FlexibleVideo, LoadingModal, Pagination, SubAspectComponent, DisplaySettingsModal, EventSettingsModal, ConfirmExitModal, MediaSettingsModal, MenuModal, MessagesModal, ConfirmHereModal, ShareEventModal, WelcomePage, ParticipantsModal, PollModal, RecordingModal, RequestsModal, MainAspectComponent, MainContainerComponent, MainGridComponent, MainScreenComponent, OtherGridComponent, Screenboard, ScreenboardModal, Whiteboard, ConfigureWhiteboardModal, WaitingRoomModal, MenuWidget, MessageWidget, MenuRecordWidget, RecordTimerWidget, MenuParticipantsWidget, ScreenShareWidget]
+ *
+ * @template
+ * This component's template includes:
+ * - A conditional PrejoinPage displayed before main content for user preparation.
+ * - The main screen layout with flexible configurations for video, control buttons, and layout grids.
+ * - Modals for participant, settings, polling, and media interactions.
+ *
+ * @input {any} PrejoinPage - Prejoin component that defaults to `WelcomePage`.
+ * @input {{ apiUserName: string; apiKey: string }} credentials - API credentials.
+ * @input {boolean} useLocalUIMode - Determines whether to enable local UI settings.
+ * @input {SeedData} seedData - Optional seed data for initializing component states.
+ * @input {boolean} useSeed - Whether to utilize the provided seed data.
+ * @input {string} imgSrc - Image source for branding or customization.
+ *
+ * @property {string} title - Title of the component, defaulting to "MediaSFU-Webinar".
+ *
+ * @styles
+ * Component-specific styles with full-screen properties and customizable modal colors.
+ *
+ * @providers [CookieService] - Utilized for session or user state management within the component.
+ *
+ * @class MediasfuWebinar
+ * @implements OnInit, OnDestroy
+ *
+ * @method ngOnInit - Initializes session settings, user interfaces, and modals as necessary.
+ * @method ngOnDestroy - Cleans up event listeners and intervals to prevent memory leaks.
+ *
+ * @example
+ * ```html
+ * <app-mediasfu-webinar
+ *   [PrejoinPage]="CustomPrejoinPage"
+ *   [credentials]="{ apiUserName: 'username', apiKey: 'apikey' }"
+ *   [useLocalUIMode]="true"
+ *   [seedData]="initialData"
+ *   [useSeed]="true"
+ *   imgSrc="https://example.com/logo.png">
+ * </app-mediasfu-webinar>
+ * ```
+ */
 export declare class MediasfuWebinar implements OnInit, OnDestroy {
     private cdr;
     private injector;

package/dist/lib/components/menu-components/custom-buttons/custom-buttons.component.d.ts

@@ -21,58 +21,56 @@ export interface CustomButtonsOptions {
     buttons: CustomButton[];
 }
 export type CustomButtonsType = (options: CustomButtonsOptions) => HTMLElement;
+/**
+ * CustomButtons component renders a list of customizable buttons.
+ *
+ * @selector app-custom-buttons
+ * @standalone true
+ * @imports [CommonModule, FormsModule, FontAwesomeModule]
+ *
+ * @input {CustomButton[]} buttons - Array of button configurations.
+ * Each button configuration includes properties such as:
+ * - **action**: Function executed on button click.
+ * - **show**: Boolean or function determining button visibility.
+ * - **backgroundColor**: Background color of the button.
+ * - **disabled**: Boolean to disable button if set to true.
+ * - **icon**: Optional FontAwesome icon displayed on the button.
+ * - **iconStyle**: Style applied to the icon.
+ * - **text**: Text displayed on the button.
+ * - **textStyle**: Style applied to the text.
+ * - **customComponent**: A custom Angular component or HTML element rendered within the button.
+ * - **injector**: Injector used for providing dependencies to the custom component.
+ *
+ * @example
+ * ```html
+ * <app-custom-buttons [buttons]="buttonsArray"></app-custom-buttons>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * const buttonsArray: CustomButton[] = [
+ *   {
+ *     action: () => console.log('Button 1 clicked'),
+ *     show: true,
+ *     backgroundColor: 'blue',
+ *     disabled: false,
+ *     icon: faCoffee,
+ *     iconStyle: { color: 'white' },
+ *     text: 'Button 1',
+ *     textStyle: { color: 'white' },
+ *     customComponent: <CustomComponent />,
+ *     injector: Injector.create({
+ *       providers: [{ provide: 'customProp', useValue: 'customValue' }]
+ *     }),
+ *   },
+ * ];
+ * ```
+ *
+ * @class CustomButtons
+ * @method mergeStyles - Merges default styles with user-provided custom styles.
+ * @method isCustomComponentConfig - Type guard to check if an object is of type CustomComponent.
+ */
 export declare class CustomButtons {
-    /**
-     * CustomButtons component renders a list of customizable buttons.
-     *
-     * @component
-     * @param {CustomButtonsOptions} props - The properties for the CustomButtons component.
-     * @param {Array} props.buttons - An array of button configurations.
-     * @param {Object} props.buttons[].action - The function to be called when the button is clicked.
-     * @param {boolean} props.buttons[].show - Determines if the button should be displayed.
-     * @param {string} props.buttons[].backgroundColor - The background color of the button.
-     * @param {boolean} props.buttons[].disabled - Determines if the button should be disabled.
-     * @param {Object} [props.buttons[].icon] - The icon to be displayed on the button.
-     * @param {Object} [props.buttons[].iconStyle] - The style to be applied to the icon.
-     * @param {string} [props.buttons[].text] - The text to be displayed on the button.
-     * @param {Object} [props.buttons[].textStyle] - The style to be applied to the text.
-     * @param {React.ReactNode} [props.buttons[].customComponent] - A custom component to be rendered inside the button.
-     * @param {Injector} [props.buttons[].injector] - The injector to be used for the custom component.
-     * @returns {HTMLElement} The CustomButtons component.
-     * @example
-     * ```html
-     * <app-custom-buttons [buttons]="buttons"></app-custom-buttons>
-     * ```
-     * @example
-     * ```typescript
-     * const buttons = [
-     *  {
-     *   action: () => console.log('Button 1 clicked'),
-     *  show: true,
-     * backgroundColor: 'blue',
-     * disabled: false,
-     * icon: faCoffee,
-     * iconStyle: { color: 'white' },
-     * text: 'Button 1',
-     * textStyle: { color: 'white' },
-     * customComponent: <CustomComponent />,
-     * injector: Injector.create({ providers: [{ provide: 'customProp', useValue: 'customValue' }] }),
-     * },
-     * {
-     *  action: () => console.log('Button 2 clicked'),
-     * show: true,
-     * backgroundColor: 'red',
-     * disabled: false,
-     * icon: faCoffee,
-     * iconStyle: { color: 'white' },
-     * text: 'Button 2',
-     * textStyle: { color: 'white' },
-     * customComponent: <CustomComponent />,
-     * injector: Injector.create({ providers: [{ provide: 'customProp', useValue: 'customValue' }] }),
-     * },
-     * ];
-     * ```
-     */
     buttons: CustomButton[];
     faSpinner: IconDefinition;
     mergeStyles(defaultStyle: any, customStyle: any): any;

package/dist/lib/components/menu-components/meeting-id-component/meeting-id-component.component.d.ts

@@ -7,9 +7,14 @@ export type MeetingIdComponentType = (options: MeetingIdComponentOptions) => HTM
  * Component representing a meeting ID.
  *
  * @selector app-meeting-id-component
+ * @standalone true
  * @templateUrl ./meeting-id-component.component.html
  * @styleUrls ./meeting-id-component.component.css
- * @standalone true
+ *
+ * @example
+ * ```html
+ * <app-meeting-id-component [meetingID]="'123-456-789'"></app-meeting-id-component>
+ * ```
  */
 export declare class MeetingIdComponent {
     meetingID: string;

package/dist/lib/components/menu-components/meeting-passcode-component/meeting-passcode-component.component.d.ts

@@ -10,6 +10,11 @@ export type MeetingPasscodeComponentType = (options: MeetingPasscodeComponentOpt
  * @standalone true
  * @templateUrl ./meeting-passcode-component.component.html
  * @styleUrls ./meeting-passcode-component.component.css
+ *
+ * @example
+ * ```html
+ * <app-meeting-passcode-component [meetingPasscode]="'ABC123'"></app-meeting-passcode-component>
+ * ```
  */
 export declare class MeetingPasscodeComponent {
     meetingPasscode: string;

package/dist/lib/components/menu-components/menu-modal/menu-modal.component.d.ts

@@ -15,40 +15,33 @@ export interface MenuModalOptions {
 }
 export type MenuModalType = (options: MenuModalOptions) => HTMLElement;
 /**
- * @component MenuModal
- *
- * @description
- * The MenuModal component is a standalone Angular component that displays a modal dialog.
- * It includes various customizable properties and imports necessary modules and components.
+ * Component for displaying a customizable menu modal with various options.
  *
  * @selector app-menu-modal
+ * @standalone true
  * @templateUrl ./menu-modal.component.html
  * @styleUrls ./menu-modal.component.css
  *
- * @inputs
- * @input {string} backgroundColor - The background color of the modal content. Default is '#83c0e9'.
- * @input {boolean} isVisible - Determines whether the modal is visible.
- * @input {CustomButton[]} customButtons - An array of custom buttons to be displayed in the modal.
- * @input {boolean} shareButtons - Determines whether share buttons are displayed. Default is true.
- * @input {string} position - The position of the modal on the screen. Default is 'bottomRight'.
- * @input {string} roomName - The name of the room.
- * @input {string} adminPasscode - The admin passcode for the room.
- * @input {string} islevel - The level of the user.
- * @input {() => void} onClose - A function to be called when the modal is closed.
- *
- * @methods
- * @method modalContainerStyle - Returns the style object for the modal container.
- * @method modalContentStyle - Returns the style object for the modal content.
- * @method handleClose - Calls the onClose function to handle closing the modal.
+ * @example
+ * ```html
+ * <app-menu-modal
+ *   [isVisible]="true"
+ *   backgroundColor="#83c0e9"
+ *   roomName="Room 123"
+ *   adminPasscode="AdminPass"
+ *   [customButtons]="customButtons"
+ *   [shareButtons]="true"
+ *   position="bottomRight"
+ *   (onClose)="closeMenu()"
+ * ></app-menu-modal>
+ * ```
  *
- * @dependencies
- * - CommonModule
- * - FontAwesomeModule
- * - FormsModule
- * - CustomButtons
- * - MeetingIdComponent
- * - MeetingPasscodeComponent
- * - ShareButtonsComponent
+ * ```typescript
+ * const customButtons = [
+ *   { action: () => console.log('Clicked'), show: true, text: 'Button' },
+ * ];
+ * closeMenu() { console.log('Menu closed'); }
+ * ```
  */
 export declare class MenuModal {
     backgroundColor: string;

package/dist/lib/components/menu-components/share-buttons-component/share-buttons-component.component.d.ts

@@ -16,23 +16,25 @@ export interface ShareButtonsComponentOptions {
 export type ShareButtonsComponentType = (options: ShareButtonsComponentOptions) => HTMLElement;
 /**
  * @component ShareButtonsComponent
- * @description This component provides a set of share buttons for different social media platforms and email.
- * It allows users to share a meeting link via various channels.
- *
  * @selector app-share-buttons-component
- * @templateUrl ./share-buttons-component.component.html
- * @styleUrls ./share-buttons-component.component.css
  * @standalone true
- * @imports [CommonModule, FontAwesomeModule]
- *
- * @input {string} meetingID - The ID of the meeting to be shared.
- * @input {ShareButton[]} shareButtons - An array of custom share buttons.
- * @input {string} eventType - The type of event (e.g., 'chat', 'broadcast', 'webinar').
+ * @description Displays a set of share buttons for sharing a meeting link on social media and email.
  *
- * @property {ShareButton[]} defaultShareButtons - The default set of share buttons.
+ * @example
+ * ```html
+ * <app-share-buttons-component
+ *   [meetingID]="'12345'"
+ *   [eventType]="'broadcast'"
+ *   [shareButtons]="customShareButtons"
+ * ></app-share-buttons-component>
+ * ```
  *
- * @getter {string} shareName - Determines the share name based on the event type.
- * @getter {ShareButton[]} filteredShareButtons - Returns the filtered share buttons based on visibility.
+ * ```typescript
+ * const customShareButtons = [
+ *   { icon: faEnvelope, action: () => console.log('Email'), show: true },
+ *   { icon: faFacebook, action: () => console.log('Facebook'), show: true },
+ * ];
+ * ```
  */
 export declare class ShareButtonsComponent {
     meetingID: string;

package/dist/lib/components/message-components/message-panel/message-panel.component.d.ts

@@ -73,6 +73,30 @@ export type MessagePanelType = (options: MessagePanelOptions) => HTMLElement;
  * @method handleTextInputChange - Handles changes in the text input field.
  * @method openReplyInput - Opens the reply input for a specific sender.
  * @method handleSendButton - Handles the send button click event.
+ *
+ * @example
+ * ```html
+ * <app-message-panel
+ *   [messages]="chatMessages"
+ *   [messagesLength]="chatMessages.length"
+ *   [type]="'group'"
+ *   [username]="'JohnDoe'"
+ *   [onSendMessagePress]="sendMessage"
+ *   [focusedInput]="true"
+ *   [eventType]="'webinar'"
+ *   [member]="'JohnDoe'"
+ *   [islevel]="'2'"
+ *   [startDirectMessage]="false"
+ *   [updateStartDirectMessage]="updateDirectMessageStart"
+ *   [directMessageDetails]="selectedParticipant"
+ *   [updateDirectMessageDetails]="updateParticipantDetails"
+ *   [coHostResponsibility]="coHostRoles"
+ *   [coHost]="'coHost123'"
+ *   [roomName]="'RoomName'"
+ *   [socket]="chatSocket"
+ *   [chatSetting]="'enabled'"
+ * ></app-message-panel>
+ * ```
  */
 export declare class MessagePanel implements OnInit, OnChanges {
     messages: Array<any>;

package/dist/lib/components/message-components/messages-modal/messages-modal.component.d.ts

@@ -26,6 +26,40 @@ export interface MessagesModalOptions {
     chatSetting: string;
 }
 export type MessagesModalType = (options: MessagesModalOptions) => void;
+/**
+ * @component MessagesModal
+ * @description A modal component for managing chat messages in MediaSFU applications, supporting both group and direct messaging, and providing a customizable user interface.
+ *
+ * @selector app-messages-modal
+ * @templateUrl ./messages-modal.component.html
+ * @styleUrls ./messages-modal.component.css
+ * @standalone true
+ * @imports [CommonModule, FontAwesomeModule, MessagePanel]
+ *
+ * @example
+ * ```html
+ * <app-messages-modal
+ *   [isMessagesModalVisible]="true"
+ *   [onMessagesClose]="closeMessages"
+ *   [messages]="chatMessages"
+ *   [position]="'bottomRight'"
+ *   [backgroundColor]="'#f5f5f5'"
+ *   [eventType]="'webinar'"
+ *   [member]="'JohnDoe'"
+ *   [islevel]="'2'"
+ *   [coHostResponsibility]="coHostRoles"
+ *   [coHost]="'coHost123'"
+ *   [startDirectMessage]="false"
+ *   [directMessageDetails]="selectedParticipant"
+ *   [updateStartDirectMessage]="updateDirectMessageStart"
+ *   [updateDirectMessageDetails]="updateParticipantDetails"
+ *   [showAlert]="displayAlert"
+ *   [roomName]="'RoomName'"
+ *   [socket]="chatSocket"
+ *   [chatSetting]="'enabled'"
+ * ></app-messages-modal>
+ * ```
+ */
 export declare class MessagesModal implements OnInit, OnChanges {
     private SendMessageService;
     constructor(SendMessageService: SendMessage);

package/dist/lib/components/misc-components/confirm-here-modal/confirm-here-modal.component.d.ts

@@ -14,7 +14,8 @@ export interface ConfirmHereModalOptions {
 }
 export type ConfirmHereModalType = (options: ConfirmHereModalOptions) => void;
 /**
- * Component representing a confirmation modal with a countdown timer.
+ * @component ConfirmHereModal
+ * @description Displays a confirmation modal with a countdown timer, allowing users to confirm their presence or be automatically disconnected after the timer expires.
  *
  * @selector app-confirm-here-modal
  * @templateUrl ./confirm-here-modal.component.html
@@ -22,38 +23,20 @@ export type ConfirmHereModalType = (options: ConfirmHereModalOptions) => void;
  * @standalone true
  * @imports [CommonModule, FontAwesomeModule]
  *
- * @styles
- * - .spinner: Styles for the loading spinner.
- * - @keyframes spin: Keyframes for spinner animation.
- * - .modal-content: Styles for the modal content container.
- * - .loading-text: Styles for the loading text.
- *
- * @class ConfirmHereModal
- * @implements OnInit, OnDestroy
- *
- * @property {boolean} isConfirmHereModalVisible - Determines if the modal is visible.
- * @property {string} position - Position of the modal.
- * @property {string} backgroundColor - Background color of the modal.
- * @property {string} displayColor - Display color of the modal.
- * @property {Function} onConfirmHereClose - Callback function to execute when the modal is closed.
- * @property {number} [countdownDuration=120] - Duration of the countdown in seconds.
- * @property {Socket} socket - Socket instance for communication.
- * @property {string} roomName - Name of the room for socket communication.
- * @property {string} member - Member identifier for socket communication.
- * @property {IconDefinition} faSpinner - FontAwesome spinner icon.
- * @property {number} counter - Countdown counter.
- * @property {any} countdownInterval - Interval ID for the countdown timer.
- *
- * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes.
- * @method ngOnDestroy - Lifecycle hook that is called just before the component is destroyed.
- * @method startCountdown - Starts the countdown timer.
- * @method clearCountdown - Clears the countdown timer.
- * @method handleConfirmHere - Handles the confirmation action and closes the modal.
- *
- * @getter spinnerContainerStyle - Returns the style object for the spinner container.
- * @getter modalContainerStyle - Returns the style object for the modal container.
- * @getter modalContentStyle - Returns the style object for the modal content.
+ * @example
+ * ```html
+ * <app-confirm-here-modal
+ *   [isConfirmHereModalVisible]="true"
+ *   [position]="'center'"
+ *   [backgroundColor]="'#83c0e9'"
+ *   [displayColor]="'#000000'"
+ *   [onConfirmHereClose]="closeConfirmModal"
+ *   [countdownDuration]="120"
+ *   [socket]="socketInstance"
+ *   [roomName]="'exampleRoom'"
+ *   [member]="'exampleMember'"
+ * ></app-confirm-here-modal>
+ * ```
  */
 export declare class ConfirmHereModal implements OnInit, OnDestroy {
     isConfirmHereModalVisible: boolean;

package/dist/lib/components/misc-components/pre-join-page/pre-join-page.component.d.ts

@@ -113,6 +113,14 @@ export type PreJoinPageType = (options: PreJoinPageOptions) => void;
  * @param {string} params.apiUserName - API username.
  * @param {string} params.apiKey - API key.
  * @returns {Promise<{ data: CreateJoinRoomResponse | CreateJoinRoomError | null; success: boolean }>} Response from the API.
+ *
+ * @example
+ * ```html
+ * <app-pre-join-page
+ *   [parameters]="preJoinPageParameters"
+ *   [credentials]="{ apiUserName: 'username', apiKey: 'apiKey' }"
+ * ></app-pre-join-page>
+ * ```
  */
 export declare class PreJoinPage {
     private fb;

package/dist/lib/components/misc-components/share-event-modal/share-event-modal.component.d.ts

@@ -36,6 +36,20 @@ export type ShareEventModalType = (options: ShareEventModalOptions) => void;
  *
  * @getter modalContainerStyle - Returns the style object for the modal container.
  * @getter modalContentStyle - Returns the style object for the modal content.
+ * @example
+ * ```html
+ * <app-share-event-modal
+ *   [backgroundColor]="'rgba(255, 255, 255, 0.25)'"
+ *   [isShareEventModalVisible]="isModalVisible"
+ *   [onShareEventClose]="handleModalClose"
+ *   [roomName]="roomName"
+ *   [adminPasscode]="adminPasscode"
+ *   [islevel]="userLevel"
+ *   [position]="'topRight'"
+ *   [shareButtons]="true"
+ *   [eventType]="eventType"
+ * ></app-share-event-modal>
+ * ```
  */
 export declare class ShareEventModal {
     backgroundColor: string;

package/dist/lib/components/misc-components/welcome-page/welcome-page.component.d.ts

@@ -22,6 +22,21 @@ export interface WelcomePageOptions {
     parameters: WelcomePageParameters;
 }
 export type WelcomePageType = (options: WelcomePageOptions) => HTMLElement;
+/**
+ * @component WelcomePage
+ * @description Component for handling room creation and joining on MediaSFU with QR scanning and form submission.
+ *
+ * @selector app-welcome-page
+ * @standalone true
+ * @templateUrl ./welcome-page.component.html
+ * @styleUrls ['./welcome-page.component.css']
+ * @imports [ZXingScannerModule, CommonModule, FontAwesomeModule, ReactiveFormsModule]
+ *
+ * @example
+ * ```html
+ * <app-welcome-page [parameters]="welcomeParameters"></app-welcome-page>
+ * ```
+ */
 export declare class WelcomePage implements OnInit {
     private fb;
     private cookieService;

package/dist/lib/components/participants-components/participant-list/participant-list.component.d.ts

@@ -19,6 +19,25 @@ export interface ParticipantListOptions {
     updateStartDirectMessage: (start: boolean) => void;
     updateParticipants: (participants: Participant[]) => void;
 }
+/**
+ * @component ParticipantList
+ * @description Displays a list of participants and provides actions like muting, messaging, and removing participants.
+ *
+ * @selector app-participant-list
+ * @standalone true
+ * @templateUrl ./participant-list.component.html
+ * @styleUrls ['./participant-list.component.css']
+ * @imports [CommonModule, ParticipantListItem]
+ *
+ * @example
+ * ```html
+ * <app-participant-list [participants]="participants" [isBroadcast]="isBroadcast"
+ *                       [onMuteParticipants]="muteParticipantsHandler"
+ *                       [onMessageParticipants]="messageParticipantsHandler"
+ *                       [onRemoveParticipants]="removeParticipantsHandler">
+ * </app-participant-list>
+ * ```
+ */
 export declare class ParticipantList {
     participants: Participant[];
     isBroadcast: boolean;

package/dist/lib/components/participants-components/participant-list-item/participant-list-item.component.d.ts

@@ -21,6 +21,25 @@ export interface ParticipantListItemOptions {
     updateParticipants: (participants: Participant[]) => void;
 }
 export type ParticipantListItemType = (options: ParticipantListItemOptions) => HTMLElement;
+/**
+ * Component representing an individual participant item in the participant list.
+ * Provides controls for muting, messaging, and removing a participant.
+ *
+ * @component
+ * @selector app-participant-list-item
+ * @standalone true
+ * @templateUrl ./participant-list-item.component.html
+ * @styleUrls ['./participant-list-item.component.css']
+ * @imports [CommonModule, FontAwesomeModule]
+ *
+ * @example
+ * ```html
+ * <app-participant-list-item [participant]="participant" [isBroadcast]="isBroadcast"
+ *                            [onMuteParticipants]="muteHandler" [onMessageParticipants]="messageHandler"
+ *                            [onRemoveParticipants]="removeHandler" [socket]="socket" [member]="member">
+ * </app-participant-list-item>
+ * ```
+ */
 export declare class ParticipantListItem {
     participant: Participant;
     isBroadcast: boolean;

package/dist/lib/components/participants-components/participant-list-others/participant-list-others.component.d.ts

@@ -6,6 +6,23 @@ export interface ParticipantListOthersOptions {
     member: string;
 }
 export type ParticipantListOthersType = (options: ParticipantListOthersOptions) => HTMLElement;
+/**
+ * Component for displaying a list of other participants.
+ * It renders individual participant items within the list.
+ *
+ * @component
+ * @selector app-participant-list-others
+ * @standalone true
+ * @templateUrl ./participant-list-others.component.html
+ * @styleUrls ['./participant-list-others.component.css']
+ * @imports [CommonModule, ParticipantListOthersItem]
+ *
+ * @example
+ * ```html
+ * <app-participant-list-others [participants]="participantsList" [coHost]="coHostID" [member]="memberID">
+ * </app-participant-list-others>
+ * ```
+ */
 export declare class ParticipantListOthers {
     participants: Participant[];
     coHost: string;