mediasfu-angular 1.0.0 → 1.0.2

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

@@ -63,6 +63,42 @@ export interface BackgroundModalOptions {
     onClose: () => void;
 }
 export type BackgroundModalType = (options: BackgroundModalOptions) => HTMLElement;
+/**
+ * BackgroundModal - Component to manage background selection and manipulation in media streams.
+ *
+ * This component allows users to choose, apply, and manipulate virtual backgrounds for media streams, leveraging MediaPipe’s Selfie Segmentation and MediaSoup functionalities.
+ *
+ * @component
+ * @name BackgroundModal
+ * @example
+ * ```typescript
+ * <app-background-modal
+ *   [isVisible]="isModalVisible"
+ *   [parameters]="modalParameters"
+ *   position="topLeft"
+ *   backgroundColor="#f5f5f5"
+ *   (onClose)="handleModalClose()"
+ * ></app-background-modal>
+ * ```
+ *
+ * @param {boolean} isVisible - Visibility state of the modal.
+ * @param {BackgroundModalParameters} parameters - Parameters including settings and methods for media and background management.
+ * @param {string} position - The position of the modal, e.g., 'topLeft'.
+ * @param {string} backgroundColor - Background color of the modal.
+ * @param {Function} onClose - Callback function when the modal is closed.
+ *
+ * @property {faTimes} faTimes - Icon used for closing the modal.
+ * @property {string} customImage - Custom image URL for background.
+ * @property {string} selectedImage - Selected image URL for background.
+ * @property {MediaStream | null} segmentVideo - Media stream for video segmentation.
+ * @property {SelfieSegmentation | null} selfieSegmentation - SelfieSegmentation instance.
+ * @property {boolean} pauseSegmentation - Pause state for segmentation.
+ * @property {MediaStream | null} processedStream - Processed media stream with applied background.
+ * @property {boolean} keepBackground - State to keep or reset background.
+ *
+ * @method
+ * ngOnInit - Initializes the modal component by updating properties based on parameters.
+ */
 export declare class BackgroundModal implements OnChanges, OnInit {
     isVisible: boolean;
     parameters: BackgroundModalParameters;

package/dist/lib/components/breakout-components/breakout-rooms-modal.component.d.ts

@@ -35,6 +35,56 @@ export interface BreakoutRoomsModalOptions {
     backgroundColor?: string;
     onBreakoutRoomsClose: () => void;
 }
+/**
+ * BreakoutRoomsModal component manages the creation, modification, and assignment of breakout rooms.
+ *
+ * @selector app-breakout-rooms-modal
+ * @inputs
+ * - `isVisible` (boolean): Controls the visibility of the breakout rooms modal. Default is false.
+ * - `parameters` (BreakoutRoomsModalParameters): Parameters for managing breakout room settings and behavior.
+ * - `position` (string): Position of the modal on the screen. Default is 'topRight'.
+ * - `backgroundColor` (string): Background color of the modal. Default is '#83c0e9'.
+ * - `onBreakoutRoomsClose` (function): Callback function triggered when the modal is closed.
+ *
+ * @methods
+ * - `ngOnInit()`: Lifecycle hook to initialize modal width and breakout rooms.
+ * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook called when any data-bound input properties change.
+ * - `calculateModalWidth()`: Dynamically calculates and sets modal width based on screen width.
+ * - `modalContainerStyle()`: Returns style object for modal container.
+ * - `modalContentStyle()`: Returns style object for modal content.
+ * - `initializeBreakoutRooms()`: Initializes the breakout rooms based on the current participants and parameters.
+ * - `handleRandomAssign()`: Randomly assigns participants to breakout rooms.
+ * - `handleManualAssign()`: Initializes manual room assignment by setting empty breakout rooms.
+ * - `handleAddRoom()`: Adds a new breakout room.
+ * - `handleSaveRooms()`: Validates and saves breakout room configurations.
+ * - `validateRooms()`: Validates room configurations and participants' uniqueness and quantity.
+ * - `checkCanStartBreakout()`: Checks conditions to enable the start of breakout rooms.
+ * - `handleStartBreakout()`: Starts the breakout session if conditions are met.
+ * - `handleStopBreakout()`: Stops the breakout session and reverts to the initial meeting display type.
+ * - `handleEditRoom(roomIndex: number)`: Opens the modal to edit the specified breakout room.
+ * - `handleDeleteRoom(roomIndex: number)`: Deletes a breakout room and updates participants' room assignments.
+ * - `handleAddParticipant(event)`: Adds a participant to a specified breakout room.
+ * - `handleRemoveParticipant(event)`: Removes a participant from a specified breakout room.
+ *
+ * @dependencies
+ * - `CommonModule`: Angular's common directives.
+ * - `FormsModule`: Angular's forms module for form handling.
+ * - `FontAwesomeModule`: Font Awesome icons for UI elements.
+ * - `RoomListComponent`: Component for listing rooms.
+ * - `EditRoomModalComponent`: Component for editing room participants.
+ *
+ * @example
+ * ```html
+ * <app-breakout-rooms-modal
+ *  [isVisible]="isBreakoutRoomsModalVisible"
+ * [parameters]="breakoutRoomsParams"
+ * [position]="modalPosition"
+ * [backgroundColor]="modalBgColor"
+ * [onBreakoutRoomsClose]="onCloseBreakoutRooms">
+ * </app-breakout-rooms-modal>
+ * ```
+ *
+ **/
 export declare class BreakoutRoomsModal implements OnChanges, OnInit {
     isVisible: boolean;
     parameters: BreakoutRoomsModalParameters;

package/dist/lib/components/breakout-components/edit-room-modal/edit-room-modal.component.d.ts

@@ -1,6 +1,54 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { BreakoutParticipant, Participant } from '../../../@types/types';
 import * as i0 from "@angular/core";
+/**
+ * EditRoomModalComponent allows managing participants within a breakout room for an event.
+ *
+ * @selector app-edit-room-modal
+ * @inputs
+ * - `editRoomModalVisible` (boolean): Controls the visibility of the edit room modal. Default is false.
+ * - `currentRoom` (BreakoutParticipant[]): List of participants currently assigned to the room.
+ * - `participantsRef` (Participant[]): Reference list of all participants.
+ * - `currentRoomIndex` (number): Index of the room being edited.
+ * - `position` (string): Position of the modal on the screen. Default is 'center'.
+ * - `backgroundColor` (string): Background color of the modal. Default is '#fff'.
+ *
+ * @outputs
+ * - `setEditRoomModalVisible` (EventEmitter<boolean>): Emits a boolean to toggle the visibility of the modal.
+ * - `addParticipant` (EventEmitter<{ roomIndex: number; participant: Participant | BreakoutParticipant; }>): Emits data for adding a participant to the room.
+ * - `removeParticipant` (EventEmitter<{ roomIndex: number; participant: Participant | BreakoutParticipant; }>): Emits data for removing a participant from the room.
+ *
+ * @methods
+ * - `ngOnInit()`: Lifecycle hook to initialize modal width and attach resize event listener.
+ * - `ngOnDestroy()`: Lifecycle hook to remove the resize event listener.
+ * - `calculateModalWidth()`: Dynamically calculates and sets modal width based on screen width.
+ * - `modalContainerStyle()`: Returns style object for modal container.
+ * - `modalContentStyle()`: Returns style object for modal content.
+ * - `handleAddParticipant(roomIndex: number, participant: BreakoutParticipant)`: Emits event to add participant to specified room.
+ * - `handleRemoveParticipant(roomIndex: number, participant: BreakoutParticipant)`: Emits event to remove participant from specified room.
+ * - `closeModal()`: Closes the modal by emitting a visibility change.
+ * - `unassignedParticipants()`: Filters and returns a list of unassigned participants.
+ *
+ * @dependencies
+ * - `CommonModule`: Provides Angular's common directives.
+ * - `FontAwesomeModule`: Allows usage of Font Awesome icons.
+ *
+ * @example
+ * ```html
+ * <app-edit-room-modal
+ *  [editRoomModalVisible]="editRoomModalVisible"
+ * [currentRoom]="currentRoom"
+ * [participantsRef]="participantsRef"
+ * [currentRoomIndex]="currentRoomIndex"
+ * [position]="position"
+ * [backgroundColor]="backgroundColor"
+ * (setEditRoomModalVisible)="setEditRoomModalVisible($event)"
+ * (addParticipant)="addParticipant($event)"
+ * (removeParticipant)="removeParticipant($event)">
+ * </app-edit-room-modal>
+ * ```
+ *
+ **/
 export declare class EditRoomModalComponent implements OnInit {
     editRoomModalVisible: boolean;
     currentRoom: BreakoutParticipant[];

package/dist/lib/components/co-host-components/co-host-modal/co-host-modal.component.d.ts

@@ -20,6 +20,68 @@ export interface CoHostModalOptions {
     onModifyEventSettings?: (settings: ModifyCoHostSettingsOptions) => void;
 }
 export type CoHostModalType = (options: CoHostModalOptions) => HTMLElement;
+/**
+ * CoHostModal component allows managing co-host settings for an event.
+ *
+ * @selector app-co-host-modal
+ * @inputs
+ * - `isCoHostModalVisible` (boolean): A boolean value that determines whether the modal is visible. Default is false.
+ * - `currentCohost` (string): The current co-host for the event. Default is 'No coHost'.
+ * - `participants` (Participant[]): An array of participants in the event.
+ * - `coHostResponsibility` (CoHostResponsibility[]): An array of co-host responsibilities.
+ * - `position` (string): The position of the modal. Default is 'topRight'.
+ * - `backgroundColor` (string): The background color of the modal. Default is '#83c0e9'.
+ * - `roomName` (string): The name of the room.
+ * - `showAlert` (ShowAlert): A function to show alerts.
+ *
+ * @outputs
+ * - `updateCoHostResponsibility` (coHostResponsibility: CoHostResponsibility[]): A function to update co-host responsibilities.
+ * - `updateCoHost` (coHost: string): A function to update the co-host.
+ * - `updateIsCoHostModalVisible` (isCoHostModalVisible: boolean): A function to update the visibility of the modal.
+ * - `socket` (Socket): The socket object.
+ *
+ * @methods
+ * - `ngOnInit()`: Lifecycle hook that is called after the component is initialized. It sets the default value for `onModifyCoHost` if not provided.
+ * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook that is called when any data-bound property of the component changes. It initializes the responsibilities and calculates the modal width.
+ * - `initializeResponsibilities()`: Initializes the responsibilities.
+ * - `get filteredParticipants()`: Returns the filtered participants.
+ * - `handleToggleSwitch(key: string)`: Handles the toggle switch for the given key.
+ * - `handleSave()`: Handles the save action.
+ * - `handleClose()`: Handles the close action.
+ * - `calculateModalWidth()`: Calculates the modal width.
+ * - `modalContainerStyle()`: Returns the modal container style.
+ * - `modalContentStyle()`: Returns the modal content style.
+ *
+ * @dependencies
+ * - `CommonModule`: Angular's common module is imported for common directives.
+ * - `FontAwesomeModule`: Angular's font awesome module is imported for icons.
+ * - `FormsModule`: Angular's forms module is imported for form-related directives.
+ * - `ModifyCoHostSettings`: The ModifyCoHostSettings service is used to modify co-host settings.
+ *
+ * @styles
+ * - `.container`: The container style.
+ *
+ * @example
+ * ```html
+ * <app-co-host-modal
+ *  [isCoHostModalVisible]="isCoHostModalVisible"
+ * [currentCohost]="currentCohost"
+ * [participants]="participants"
+ * [coHostResponsibility]="coHostResponsibility"
+ * [position]="position"
+ * [backgroundColor]="backgroundColor"
+ * [roomName]="roomName"
+ * [showAlert]="showAlert"
+ * [updateCoHostResponsibility]="updateCoHostResponsibility"
+ * [updateCoHost]="updateCoHost"
+ * [updateIsCoHostModalVisible]="updateIsCoHostModalVisible"
+ * [socket]="socket"
+ * [onCoHostClose]="onCoHostClose"
+ * [onModifyCoHost]="onModifyCoHost">
+ * </app-co-host-modal>
+ * ```
+ *
+ **/
 export declare class CoHostModal implements OnChanges, OnInit {
     private modifyCoHostSettingsService;
     isCoHostModalVisible: boolean;

package/dist/lib/components/display-components/alert-component/alert.component.component.d.ts

@@ -10,31 +10,37 @@ export interface AlertComponentOptions {
 }
 export type AlertComponentType = (options: AlertComponentOptions) => HTMLElement;
 /**
- * AlertComponent is a standalone Angular component that displays an alert message.
- * It supports different types of alerts such as 'success' and 'danger', and can be configured
- * to automatically hide after a specified duration.
+ * AlertComponent displays an alert message of type 'success' or 'danger' with customizable options.
+ * It can automatically hide after a set duration and includes a manual dismiss option.
  *
  * @selector app-alert-component
  * @standalone true
  * @imports CommonModule
- * @templateUrl ./alert.component.html
- * @styleUrls ./alert.component.css
  *
- * @class AlertComponent
- * @implements OnChanges
+ * @inputs
+ * - `visible` (boolean): Determines if the alert is visible. Default is false.
+ * - `message` (string): The message displayed in the alert.
+ * - `type` ('success' | 'danger'): Type of alert, either 'success' or 'danger'. Default is 'success'.
+ * - `duration` (number): Duration in milliseconds for the alert to remain visible before hiding. Default is 4000 ms.
+ * - `textColor` (string): Optional color for alert text. Default is 'black'.
+ * - `onHide` (function): Optional callback invoked when the alert is hidden.
  *
- * @property {boolean} visible - Determines if the alert is visible.
- * @property {string} message - The message to be displayed in the alert.
- * @property {'success' | 'danger'} type - The type of alert, either 'success' or 'danger'.
- * @property {number} duration - The duration (in milliseconds) for which the alert is visible before hiding.
- * @property {string} textColor - The color of the text in the alert.
- * @property {() => void} onHide - A callback function that is called when the alert is hidden.
+ * @methods
+ * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook invoked on input changes; initiates auto-hide based on duration if `visible` is true.
+ * - `handlePress()`: Manually hides the alert by invoking the `onHide` callback.
  *
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property of a directive changes.
- * @param {SimpleChanges} changes - An object of changes to the data-bound properties.
- *
- * @method handlePress - Manually hides the alert by calling the onHide callback.
- */
+ * @example
+ * ```html
+ * <app-alert-component
+ *  [visible]="showAlert"
+ * [message]="alertMessage"
+ * [type]="alertType"
+ * [duration]="5000"
+ * [textColor]="alertTextColor"
+ * [onHide]="onAlertHide">
+ * </app-alert-component>
+ * ```
+ **/
 export declare class AlertComponent implements OnChanges {
     visible: boolean;
     message: string;

package/dist/lib/components/display-components/audio-card/audio-card.component.d.ts

@@ -37,6 +37,65 @@ export interface AudioCardOptions {
     parameters: AudioCardParameters;
 }
 export type AudioCardType = (options: AudioCardOptions) => HTMLElement;
+/**
+ * AudioCard component renders an audio card for participants with customizable options and media controls.
+ * It shows audio waveform animations, video/audio toggle buttons, and additional info based on injected or passed properties.
+ *
+ * @selector app-audio-card
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule, MiniCard
+ *
+ * @inputs
+ * - `controlUserMedia` (function): Optional function to control media actions for a participant.
+ * - `customStyle` (Partial<CSSStyleDeclaration>): Custom CSS styles for the audio card.
+ * - `name` (string): Name of the participant.
+ * - `barColor` (string): Color for the audio bar. Default is 'red'.
+ * - `textColor` (string): Text color. Default is 'white'.
+ * - `imageSource` (string): Image source URL for participant.
+ * - `roundedImage` (boolean): Toggle for rounded image style.
+ * - `imageStyle` (Partial<CSSStyleDeclaration>): Custom styles for the image.
+ * - `showControls` (boolean): Toggle for displaying media controls. Default is true.
+ * - `showInfo` (boolean): Toggle for displaying info section. Default is true.
+ * - `videoInfoComponent` (HTMLElement | CustomComponent): Custom component for participant info.
+ * - `videoControlsComponent` (HTMLElement | CustomComponent): Custom component for video controls.
+ * - `controlsPosition` (ControlsPosition): Position for controls on the card. Default is 'topLeft'.
+ * - `infoPosition` (InfoPosition): Position for the info section. Default is 'topRight'.
+ * - `participant` (Participant | null): Participant object reference.
+ * - `backgroundColor` (string): Background color for the card.
+ * - `audioDecibels` (AudioDecibels): Optional audio decibel levels for the participant.
+ * - `parameters` (AudioCardParameters): Required object with configuration parameters.
+ *
+ * @methods
+ * - `ngOnInit()`: Initializes the component, sets default media control behavior, and activates audio waveform animations.
+ * - `ngOnDestroy()`: Clears the animation interval.
+ * - `animateBar(index: number)`: Animates the audio bar at a specified index.
+ * - `animateWaveform()`: Triggers animations across the waveform bars.
+ * - `resetWaveform()`: Resets waveform animations to default.
+ * - `getAnimationDuration(index: number)`: Retrieves the animation duration for a bar by index.
+ * - `toggleAudio()`: Toggles audio for the participant if media control function is defined.
+ * - `toggleVideo()`: Toggles video for the participant if media control function is defined.
+ * - `renderControls()`: Returns `showControls` to render or hide media controls.
+ * - `combineStyles(baseStyle: any, additionalStyles: any)`: Combines base and additional styles for inline styling.
+ * - `getOverlayPosition(position: string)`: Retrieves calculated overlay position for elements.
+ * - `isCustomComponent(comp: HTMLElement | CustomComponent)`: Type guard for identifying custom components.
+ * - `isFunctionComponent(comp: HTMLElement | CustomComponent)`: Type guard for identifying function components.
+ *
+ * @example
+ * ```html
+ * <app-audio-card
+ *  [controlUserMedia]="controlMediaFunction"
+ * [name]="participantName"
+ * [barColor]="'blue'"
+ * [textColor]="'black'"
+ * [imageSource]="participantImageURL"
+ * [roundedImage]="true"
+ * [showControls]="true"
+ * [participant]="participant"
+ * [parameters]="audioCardParameters">
+ * </app-audio-card>
+ * ```
+ *
+ **/
 export declare class AudioCard implements OnInit, OnDestroy {
     private ngZone;
     private controlMediaService;

package/dist/lib/components/display-components/audio-grid/audio-grid.component.d.ts

@@ -7,6 +7,26 @@ export interface AudioGridOptions {
     }[];
 }
 export type AudioGridType = (options: AudioGridOptions) => HTMLElement;
+/**
+ * AudioGrid component renders a dynamic grid of components with individually provided inputs.
+ *
+ * @selector app-audio-grid
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @inputs
+ * - `componentsToRender` ({ component: any; inputs?: any }[]): Array of components with optional inputs to render in the grid.
+ *
+ * @methods
+ * - `ngOnChanges(changes: SimpleChanges)`: Clears the injector cache on changes to `componentsToRender`.
+ * - `createInjector(inputs: any)`: Creates and caches an injector with specific inputs for each component.
+ * - `clearInjectorCache()`: Clears the cache to avoid memory leaks and ensure updated injectors.
+ *
+ * @example
+ * ```html
+ * <app-audio-grid [componentsToRender]="[{ component: AudioCard, inputs: { name: 'Participant 1' } }]"></app-audio-grid>
+ * ```
+ **/
 export declare class AudioGrid implements OnChanges {
     private injector;
     componentsToRender: {

package/dist/lib/components/display-components/card-video-display/card-video-display.component.d.ts

@@ -10,6 +10,41 @@ export interface CardVideoDisplayOptions {
     doMirror?: boolean;
 }
 export type CardVideoDisplayType = (options: CardVideoDisplayOptions) => HTMLElement;
+/**
+ * CardVideoDisplay component displays a video stream with options for full display, mirroring, and background color customization.
+ *
+ * @selector app-card-video-display
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @inputs
+ * - `remoteProducerId` (string): Identifier for the remote producer.
+ * - `eventType` (EventType): Type of event, such as 'webinar'. Default is 'webinar'.
+ * - `forceFullDisplay` (boolean): Forces full video display if true. Default is false.
+ * - `videoStream` (MediaStream | null): The media stream to display in the video element.
+ * - `backgroundColor` (string): Background color for the video container. Default is 'transparent'.
+ * - `doMirror` (boolean): Mirrors the video if true. Default is false.
+ *
+ * @methods
+ * - `ngOnInit()`: Initializes the video stream and sets the container style on component load.
+ * - `ngOnChanges(changes: SimpleChanges)`: Updates the video stream or container style when inputs change.
+ * - `updateVideoStream()`: Assigns the video stream to the video element if it differs from the current stream.
+ * - `setVideoContainerStyle()`: Sets the style of the video container based on the provided background color.
+ * - `getBaseVideoContainerStyle()`: Returns base styles for the video container.
+ * - `getVideoStyle()`: Returns styles for the video element, including optional mirroring and sizing.
+ *
+ * @example
+ * ```html
+ * <app-card-video-display
+ *  [remoteProducerId]="producerId"
+ * [eventType]="'conference'"
+ * [forceFullDisplay]="true"
+ * [videoStream]="stream"
+ * [backgroundColor]="'black'"
+ * [doMirror]="true">
+ * </app-card-video-display>
+ * ```
+ **/
 export declare class CardVideoDisplay implements OnInit, OnChanges {
     remoteProducerId: string;
     eventType: EventType;

package/dist/lib/components/display-components/control-buttons-alt-component/control-buttons-alt-component.component.d.ts

@@ -33,6 +33,44 @@ export interface ControlButtonsAltComponentOptions {
     showAspect?: boolean;
 }
 export type ControlButtonsAltComponentType = (options: ControlButtonsAltComponentOptions) => HTMLElement;
+/**
+ * ControlButtonsAltComponent provides configurable button controls with custom icons, colors, and positioning options.
+ *
+ * @selector app-control-buttons-alt-component
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule
+ *
+ * @inputs
+ * - `buttons` (AltButton[]): Array of button configurations with options for icon, color, state, and actions.
+ * - `position` ('left' | 'right' | 'middle'): Horizontal alignment of buttons. Default is 'left'.
+ * - `location` ('top' | 'bottom' | 'center'): Vertical alignment of buttons. Default is 'top'.
+ * - `direction` ('horizontal' | 'vertical'): Layout direction for buttons. Default is 'horizontal'.
+ * - `buttonsContainerStyle` (Partial<CSSStyleDeclaration>): Custom styles for the container of buttons.
+ * - `showAspect` (boolean): Controls the visibility of the button container. Default is false.
+ *
+ * @methods
+ * - `getAlignmentStyle()`: Returns alignment styles based on `position`, `location`, and `direction`.
+ * - `getContainerStyle()`: Combines container styles, alignment styles, and visibility settings.
+ * - `getButtonStyle(button: AltButton)`: Applies style to each button based on its properties.
+ * - `getTextStyle(button: AltButton)`: Sets text styles for button labels.
+ * - `isCustomComponent(comp)`: Type guard to identify custom component objects.
+ * - `isFunctionComponent(comp)`: Type guard to identify function components.
+ *
+ * @example
+ * ```html
+ * <app-control-buttons-alt-component
+ *  [buttons]="[
+ *    { name: 'Pause', icon: faPause, onPress: pauseAction, activeColor: 'blue' },
+ *    { name: 'Play', icon: faPlay, onPress: playAction, color: 'green' }
+ *  ]"
+ * [position]="'middle'"
+ * [location]="'bottom'"
+ * [direction]="'vertical'"
+ * [buttonsContainerStyle]="{ backgroundColor: '#333' }"
+ * [showAspect]="true">
+ * </app-control-buttons-alt-component>
+ * ```
+ **/
 export declare class ControlButtonsAltComponent {
     buttons: AltButton[];
     position: 'left' | 'right' | 'middle';

package/dist/lib/components/display-components/control-buttons-component-touch/control-buttons-component-touch.component.d.ts

@@ -33,57 +33,41 @@ export interface ControlButtonsComponentTouchOptions {
 }
 export type ControlButtonsComponentTouchType = (options: ControlButtonsComponentTouchOptions) => HTMLElement;
 /**
- * ControlButtonsComponentTouch is an Angular component that displays a set of control buttons.
- * The buttons can be customized with various styles, icons, and actions.
+ * ControlButtonsComponentTouch provides customizable touch controls with various icons, colors, and alignment options.
  *
- * @component
  * @selector app-control-buttons-component-touch
  * @standalone true
- * @imports [CommonModule, FontAwesomeModule]
+ * @imports CommonModule, FontAwesomeModule
  *
- * @template
- * The template includes a container div that holds the buttons. Each button can display an icon,
- * a custom component, or a name. The styles and visibility of the buttons are controlled by the
- * component's inputs.
+ * @inputs
+ * - `buttons` (ButtonTouch[]): Array of button configurations with properties for icon, color, action, and visibility.
+ * - `position` ('left' | 'right' | 'middle'): Horizontal alignment of the buttons container. Default is 'left'.
+ * - `location` ('top' | 'bottom' | 'center'): Vertical alignment of the buttons container. Default is 'top'.
+ * - `direction` ('horizontal' | 'vertical'): Layout direction of buttons. Default is 'horizontal'.
+ * - `buttonsContainerStyle` (Partial<CSSStyleDeclaration>): Custom styles for the buttons container.
+ * - `showAspect` (boolean): Controls the visibility of the buttons container. Default is false.
  *
- * @styles
- * The host element is styled to be a flex container centered both horizontally and vertically.
- *
- * @class ControlButtonsComponentTouch
- *
- * @property {any[]} buttons - An array of button configurations. Each button can have properties like
- * `show`, `backgroundColor`, `onPress`, `icon`, `alternateIcon`, `active`, `activeColor`, `inActiveColor`,
- * `customComponent`, and `name`.
- *
- * @property {string} position - The horizontal alignment of the buttons container. Can be 'left', 'right', or 'middle'.
- * Default is 'left'.
- *
- * @property {string} location - The vertical alignment of the buttons container. Can be 'top', 'bottom', or 'center'.
- * Default is 'top'.
- *
- * @property {string} direction - The direction of the buttons layout. Can be 'horizontal' or 'vertical'.
- * Default is 'horizontal'.
- *
- * @property {any} buttonsContainerStyle - Additional styles for the buttons container.
- *
- * @property {boolean} showAspect - A flag to control the visibility of the buttons container.
- *
- * @method getAlignmentStyle
- * Returns the alignment styles based on the `position`, `location`, and `direction` inputs.
- *
- * @method mergeStyles
- * Merges multiple style objects into one.
+ * @methods
+ * - `getAlignmentStyle()`: Returns alignment styles based on `position`, `location`, and `direction` inputs.
+ * - `mergeStyles(...styles: any[])`: Merges multiple style objects into one for flexible styling.
+ * - `isCustomComponent(comp)`: Type guard for identifying custom component objects.
+ * - `isFunctionComponent(comp)`: Type guard for identifying function components.
  *
  * @example
+ * ```html
  * <app-control-buttons-component-touch
- *   [buttons]="buttonsArray"
+ *   [buttons]="[
+ *     { name: 'Mute', icon: faMicrophoneSlash, onPress: muteAction, activeColor: 'red' },
+ *     { name: 'Unmute', icon: faMicrophone, onPress: unmuteAction, activeColor: 'green' }
+ *   ]"
  *   position="right"
  *   location="bottom"
  *   direction="vertical"
- *   [buttonsContainerStyle]="customStyles"
- *   [showAspect]="true">
- * </app-control-buttons-component-touch>
- */
+ *   [buttonsContainerStyle]="{ backgroundColor: '#333' }"
+ *   [showAspect]="true"
+ * ></app-control-buttons-component-touch>
+ * ```
+ **/
 export declare class ControlButtonsComponentTouch {
     buttons: ButtonTouch[];
     position: string;

package/dist/lib/components/display-components/control-widgets/menu-participants-widget.component.d.ts

@@ -1,5 +1,26 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import * as i0 from "@angular/core";
+/**
+ * MenuParticipantsWidget displays an icon and a counter for participants in a compact, customizable widget.
+ *
+ * @selector app-menu-participants-widget
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule
+ *
+ * @inputs
+ * - `icon` (IconDefinition): The FontAwesome icon to display.
+ * - `iconColor` (string): The color of the icon. Default is 'black'.
+ * - `participantsCounter` (number): The number of participants displayed next to the icon.
+ *
+ * @example
+ * ```html
+ * <app-menu-participants-widget
+ *   [icon]="faUsers"
+ *   iconColor="blue"
+ *   [participantsCounter]="10"
+ * ></app-menu-participants-widget>
+ * ```
+ **/
 export declare class MenuParticipantsWidget {
     icon: IconDefinition;
     iconColor: string;

package/dist/lib/components/display-components/control-widgets/menu-record-widget.component.d.ts

@@ -8,6 +8,28 @@ interface RecordButton {
     inActiveColor?: string;
     text?: string;
 }
+/**
+ * MenuRecordWidget is a configurable widget that displays a set of record control buttons, with customizable icon, color, and actions.
+ *
+ * @selector app-menu-record-widget
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule, ControlButtonsAltComponent
+ *
+ * @inputs
+ * - `buttons` (RecordButton[]): Array of record button configurations, each with properties for icon, active state, colors, and actions.
+ * - `direction` ('horizontal' | 'vertical'): Layout direction for the buttons. Default is 'horizontal'.
+ *
+ * @example
+ * ```html
+ * <app-menu-record-widget
+ *   [buttons]="[
+ *     { icon: faCircle, text: 'Record', onPress: startRecording, activeColor: 'red' },
+ *     { icon: faStop, text: 'Stop', onPress: stopRecording, inActiveColor: 'gray' }
+ *   ]"
+ *   direction="horizontal"
+ * ></app-menu-record-widget>
+ * ```
+ **/
 export declare class MenuRecordWidget {
     buttons: RecordButton[];
     direction: 'horizontal' | 'vertical';

package/dist/lib/components/display-components/control-widgets/menu-widget.component.d.ts

@@ -1,5 +1,28 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import * as i0 from "@angular/core";
+/**
+ * MenuWidget displays an icon with an optional badge counter, used for notifications or alerts.
+ *
+ * @selector app-menu-widget
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule
+ *
+ * @inputs
+ * - `icon` (IconDefinition): FontAwesome icon to display.
+ * - `iconColor` (string): Color of the icon. Default is 'black'.
+ * - `badgeValue` (number): The numeric value displayed within the badge.
+ * - `showBadge` (boolean): Controls the visibility of the badge. Default is false.
+ *
+ * @example
+ * ```html
+ * <app-menu-widget
+ *   [icon]="faBell"
+ *   iconColor="blue"
+ *   [badgeValue]="5"
+ *   [showBadge]="true"
+ * ></app-menu-widget>
+ * ```
+ **/
 export declare class MenuWidget {
     icon: IconDefinition;
     iconColor: string;