mediasfu-angular 1.0.1 → 1.0.2

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;

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

@@ -6,6 +6,23 @@ export interface ParticipantListOthersItemOptions {
     coHost: string;
 }
 export type ParticipantListOthersItemType = (options: ParticipantListOthersItemOptions) => HTMLElement;
+/**
+ * Component for displaying an individual participant item in the "others" participant list.
+ * Provides a display name with conditional labels for roles such as host, co-host, or self.
+ *
+ * @component
+ * @selector app-participant-list-others-item
+ * @standalone true
+ * @templateUrl ./participant-list-others-item.component.html
+ * @styleUrls ['./participant-list-others-item.component.css']
+ * @imports [CommonModule, FontAwesomeModule]
+ *
+ * @example
+ * ```html
+ * <app-participant-list-others-item [participant]="participant" [member]="currentMember" [coHost]="coHostID">
+ * </app-participant-list-others-item>
+ * ```
+ */
 export declare class ParticipantListOthersItem {
     participant: Participant;
     member: string;

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

@@ -40,6 +40,30 @@ export interface ParticipantsModalOptions {
     position?: string;
 }
 export type ParticipantsModalType = (options: ParticipantsModalOptions) => HTMLElement;
+/**
+ * Component for displaying a modal containing a list of participants with options to mute, message, or remove participants.
+ * Supports both regular participants and a subset of "other" participants.
+ *
+ * @component
+ * @selector app-participants-modal
+ * @standalone true
+ * @templateUrl ./participants-modal.component.html
+ * @styleUrls ['./participants-modal.component.css']
+ * @imports [CommonModule, FontAwesomeModule, ParticipantList, ParticipantListOthers]
+ *
+ * @example
+ * ```html
+ * <app-participants-modal
+ *   [isParticipantsModalVisible]="true"
+ *   [onParticipantsClose]="closeModalFunction"
+ *   [onParticipantsFilterChange]="filterFunction"
+ *   [participantsCounter]="5"
+ *   [parameters]="participantsModalParameters"
+ *   [position]="'topRight'"
+ *   [backgroundColor]="'#83c0e9'"
+ * ></app-participants-modal>
+ * ```
+ */
 export declare class ParticipantsModal implements OnInit, OnChanges {
     private muteParticipantsService;
     private messageParticipantsService;

package/dist/lib/components/polls-components/poll-modal/poll-modal.component.d.ts

@@ -20,6 +20,33 @@ export interface PollModalOptions {
     handleVotePoll: HandleVotePollType;
 }
 export type PollModalType = (options: PollModalOptions) => HTMLElement;
+/**
+ * Component for displaying a poll modal, allowing users to create, vote, and end polls within a session.
+ *
+ * @component
+ * @selector app-poll-modal
+ * @standalone true
+ * @templateUrl ./poll-modal.component.html
+ * @styleUrls ['./poll-modal.component.css']
+ * @imports [CommonModule, FontAwesomeModule, FormsModule]
+ *
+ * @example
+ * ```html
+ * <app-poll-modal
+ *   [isPollModalVisible]="true"
+ *   [onClose]="closeModalFunction"
+ *   [member]="currentMember"
+ *   [islevel]="'2'"
+ *   [polls]="pollList"
+ *   [poll]="selectedPoll"
+ *   [socket]="socketInstance"
+ *   [roomName]="'exampleRoom'"
+ *   [handleCreatePoll]="createPollFunction"
+ *   [handleEndPoll]="endPollFunction"
+ *   [handleVotePoll]="votePollFunction"
+ * ></app-poll-modal>
+ * ```
+ */
 export declare class PollModal implements OnInit, OnChanges {
     isPollModalVisible: boolean;
     onClose: () => void;

package/dist/lib/components/recording-components/advanced-panel-component/advanced-panel-components.component.d.ts

@@ -25,6 +25,21 @@ export interface AdvancedPanelParameters {
     eventType: EventType;
 }
 export type AdvancedPanelType = (options: AdvancedPanelParameters) => HTMLElement;
+/**
+ * Component for configuring advanced recording options in a MediaSFU session.
+ *
+ * @component
+ * @selector app-advanced-panel-component
+ * @standalone true
+ * @templateUrl ./advanced-panel-component.component.html
+ * @styleUrls ['./advanced-panel-component.component.css']
+ * @imports [CommonModule, FormsModule]
+ *
+ * @example
+ * ```html
+ * <app-advanced-panel-component [parameters]="advancedPanelOptions"></app-advanced-panel-component>
+ * ```
+ */
 export declare class AdvancedPanelComponent implements OnInit, OnChanges {
     parameters: AdvancedPanelParameters;
     selectedOrientationVideo: string;

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

@@ -74,6 +74,18 @@ export type RecordingModalType = (options: RecordingModalOptions) => HTMLElement
  * @method ngOnChanges - Lifecycle hook that is called when any data-bound property of a directive changes.
  * @method confirm - Calls the confirmRecording callback with the current parameters.
  * @method start - Calls the startRecording callback with the current parameters.
+ * @example
+ * ```html
+ * <app-recording-modal
+ *   [isRecordingModalVisible]="true"
+ *   [onClose]="closeRecordingModal"
+ *   [backgroundColor]="'#83c0e9'"
+ *   [position]="'bottomRight'"
+ *   [confirmRecording]="confirmRecording"
+ *   [startRecording]="startRecording"
+ *   [parameters]="recordingModalParams"
+ * ></app-recording-modal>
+ * ```
  */
 export declare class RecordingModal implements OnChanges {
     isRecordingModalVisible: boolean;

package/dist/lib/components/recording-components/standard-panel-component/standard-panel-component.component.d.ts

@@ -40,6 +40,11 @@ export type StandardPanelType = (options: StandardPanelParameters) => HTMLElemen
  *
  * @param {SimpleChanges} changes - The changes to the input properties.
  * @param {any} event - The event object from the change event.
+ *
+ * @example
+ * ```html
+ * <app-standard-panel-component [parameters]="standardPanelParameters"></app-standard-panel-component>
+ * ```
  */
 export declare class StandardPanelComponent implements OnInit, OnChanges {
     parameters: StandardPanelParameters;