mediasfu-angular 1.0.1 → 2.0.0

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;

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

@@ -1,5 +1,28 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import * as i0 from "@angular/core";
+/**
+ * MessageWidget displays an icon with an optional badge counter, useful for unread message notifications.
+ *
+ * @selector app-message-widget
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule
+ *
+ * @inputs
+ * - `icon` (IconDefinition): FontAwesome icon to represent the message feature.
+ * - `iconColor` (string): Color of the icon. Default is 'black'.
+ * - `badgeValue` (number): Numeric value displayed in the badge, e.g., unread message count.
+ * - `showBadge` (boolean): Controls the visibility of the badge. Default is false.
+ *
+ * @example
+ * ```html
+ * <app-message-widget
+ *   [icon]="faEnvelope"
+ *   iconColor="blue"
+ *   [badgeValue]="3"
+ *   [showBadge]="true"
+ * ></app-message-widget>
+ * ```
+ **/
 export declare class MessageWidget {
     icon: IconDefinition;
     iconColor: string;

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

@@ -1,4 +1,19 @@
 import * as i0 from "@angular/core";
+/**
+ * RecordTimerWidget displays the current recording progress time.
+ *
+ * @selector app-record-timer-widget
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @inputs
+ * - `recordingProgressTime` (string): The time to display as recording progress.
+ *
+ * @example
+ * ```html
+ * <app-record-timer-widget [recordingProgressTime]="'00:05:23'"></app-record-timer-widget>
+ * ```
+ **/
 export declare class RecordTimerWidget {
     recordingProgressTime: string;
     constructor(recordingProgressTime: string);

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

@@ -1,4 +1,31 @@
 import * as i0 from "@angular/core";
+/**
+ * ScreenShareWidget - Component representing a screen share button with an optional disabled state.
+ *
+ * This component displays a screen share icon (desktop icon) and an overlay ban icon if disabled.
+ * The disabled state can be controlled either by an injected dependency or an @Input property.
+ *
+ * @component
+ * @name ScreenShareWidget
+ * @example
+ * ```html
+ * <app-screen-share-button [disabled]="isDisabled"></app-screen-share-button>
+ * ```
+ *
+ * @param {boolean} disabled - Optional input to toggle the disabled state of the button.
+ *
+ * @property {boolean} computedDisabled - Internal state to determine if the button is disabled, controlled by either injected value or @Input property.
+ * @property {faDesktop} faDesktop - FontAwesome desktop icon for screen sharing.
+ * @property {faBan} faBan - FontAwesome ban icon indicating a disabled state.
+ *
+ * @example
+ * <app-screen-share-button [disabled]="true"></app-screen-share-button>
+ *
+ * @constructor
+ * @param {boolean} [injectedDisabled] - Optional injected disabled value.
+ *
+ * @method ngOnChanges - Updates the computedDisabled property based on changes to the @Input disabled.
+ */
 export declare class ScreenShareWidget {
     private injectedDisabled;
     disabled: boolean;

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

@@ -13,31 +13,40 @@ export interface FlexibleGridOptions {
 }
 export type FlexibleGridType = (options: FlexibleGridOptions) => HTMLElement;
 /**
- * @component FlexibleGrid
- *
- * A flexible grid component that dynamically renders a grid of components based on the provided inputs.
+ * FlexibleGrid is a dynamic, customizable grid component that renders a specified number of rows and columns,
+ * with each grid item containing a provided component.
  *
  * @selector app-flexible-grid
+ * @standalone true
+ * @imports CommonModule
  *
  * @inputs
- * - `customWidth` (number): The custom width for each grid item in pixels. Default is 0.
- * - `customHeight` (number): The custom height for each grid item in pixels. Default is 0.
- * - `rows` (number): The number of rows in the grid. Default is 0.
- * - `columns` (number): The number of columns in the grid. Default is 0.
- * - `componentsToRender` ({ component: any, inputs?: any }[]): An array of components to render in the grid, each with optional inputs.
- * - `backgroundColor` (string): The background color for each grid item. Default is 'transparent'.
+ * - `customWidth` (number): The width for each grid item in pixels. Default is 0.
+ * - `customHeight` (number): The height for each grid item in pixels. Default is 0.
+ * - `rows` (number): Number of rows in the grid. Default is 0.
+ * - `columns` (number): Number of columns in the grid. Default is 0.
+ * - `componentsToRender` ({ component: any, inputs?: any }[]): Array of components to render in the grid, each with optional inputs.
+ * - `backgroundColor` (string): Background color for each grid item. Default is 'transparent'.
  *
  * @methods
- * - `ngOnInit()`: Lifecycle hook that is called after the component is initialized. It generates the grid.
- * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook that is called when any data-bound property of the component changes. It regenerates the grid if `columns`, `componentsToRender`, or `rows` change.
- * - `generateGrid()`: Generates the grid based on the number of rows and columns, and the components to render.
- * - `getGridItemStyle()`: Returns the style object for each grid item, including custom width, height, background color, margin, padding, and border radius.
- * - `createInjector(inputs: any)`: Creates and caches an injector for the given inputs to be used with `ngComponentOutlet`.
+ * - `ngOnInit()`: Initializes and generates the grid on component load.
+ * - `ngOnChanges(changes: SimpleChanges)`: Regenerates the grid if `columns`, `componentsToRender`, or `rows` change.
+ * - `generateGrid()`: Builds the grid based on the row, column, and component configurations.
+ * - `getGridItemStyle()`: Returns a style object for each grid item, including custom width, height, and background color.
+ * - `createInjector(inputs: any)`: Creates a cached injector for each component to support dynamic component inputs.
  *
- * @dependencies
- * - `CommonModule`: Angular's common module is imported for common directives.
- * - `Injector`: Angular's dependency injection system is used to create injectors for dynamic components.
- */
+ * @example
+ * ```html
+ * <app-flexible-grid
+ *   [customWidth]="100"
+ *   [customHeight]="100"
+ *   [rows]="2"
+ *   [columns]="3"
+ *   [componentsToRender]="[{ component: MyComponent, inputs: { prop: 'value' } }]"
+ *   backgroundColor="lightgrey"
+ * ></app-flexible-grid>
+ * ```
+ **/
 export declare class FlexibleGrid implements OnInit, OnChanges {
     private injector;
     customWidth: number;

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

@@ -15,58 +15,43 @@ export interface FlexibleVideoOptions {
 }
 export type FlexibleVideoType = (options: FlexibleVideoOptions) => HTMLElement;
 /**
- * Component for displaying a flexible video grid.
+ * FlexibleVideo component displays a customizable video grid, supporting dynamic layout and optional screenboard overlay.
  *
- * @component
  * @selector app-flexible-video
  * @standalone true
  * @imports CommonModule
  *
- * @template
- * <div>
- *   <!-- Dynamic styles and layout for video grid -->
- *   <div *ngFor="let rowComponents of grid; let rowIndex = index">
- *     <div *ngFor="let component of rowComponents; let colIndex = index">
- *       <ng-container *ngComponentOutlet="component.component; injector: createInjector(component.inputs)"></ng-container>
- *     </div>
- *   </div>
- *   <div *ngIf="Screenboard && Screenboard.component">
- *     <ng-container *ngComponentOutlet="Screenboard.component; injector: createInjector(Screenboard.inputs)"></ng-container>
- *   </div>
- * </div>
+ * @inputs
+ * - `customWidth` (number): The custom width for each video grid item in pixels. Default is 0.
+ * - `customHeight` (number): The custom height for each video grid item in pixels. Default is 0.
+ * - `rows` (number): Number of rows in the video grid. Default is 0.
+ * - `columns` (number): Number of columns in the video grid. Default is 0.
+ * - `componentsToRender` (CustomMediaComponent[]): Array of components to render in the grid.
+ * - `showAspect` (boolean): Flag to control aspect ratio display. Default is false.
+ * - `backgroundColor` (string): Background color for the video grid. Default is 'transparent'.
+ * - `Screenboard` (CustomMediaComponent): Optional screenboard component to overlay on the grid.
+ * - `annotateScreenStream` (boolean): Flag to annotate the screen stream. Default is false.
+ * - `localStreamScreen` (MediaStream): Local screen stream for video.
  *
- * @class FlexibleVideo
- * @implements OnInit, OnChanges
+ * @methods
+ * - `ngOnInit()`: Initializes and generates the grid on component load if `showAspect` is true.
+ * - `ngOnChanges(changes: SimpleChanges)`: Updates grid layout and dimensions if properties change.
+ * - `generateGrid()`: Generates grid structure based on rows, columns, and `componentsToRender`.
+ * - `createInjector(inputs: any)`: Creates and caches an injector for component inputs.
  *
- * @property {number} customWidth - Custom width for the video grid.
- * @property {number} customHeight - Custom height for the video grid.
- * @property {number} rows - Number of rows in the video grid.
- * @property {number} columns - Number of columns in the video grid.
- * @property {Array<{ component: ComponentType<any>, inputs: any }>} componentsToRender - Components to render in the grid.
- * @property {boolean} showAspect - Flag to show or hide the aspect ratio.
- * @property {string} [backgroundColor='transparent'] - Background color for the video grid.
- * @property {{ component: ComponentType<any>, inputs: any }} [Screenboard] - Screenboard component to overlay on the grid.
- * @property {boolean} [annotateScreenStream=false] - Flag to annotate the screen stream.
- * @property {MediaStream} [localStreamScreen] - Local media stream for the screen.
- *
- * @property {number} key - Key for tracking changes.
- * @property {number} cardWidth - Width of each card in the grid.
- * @property {number} cardHeight - Height of each card in the grid.
- * @property {number} cardTop - Top position of each card in the grid.
- * @property {number} cardLeft - Left position of each card in the grid.
- * @property {number} canvasLeft - Left position of the canvas.
- * @property {any[][]} grid - Grid structure for the components.
- *
- * @constructor
- * @param {Injector} injector - Angular injector for dependency injection.
- *
- * @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 generateGrid - Generates the grid structure based on rows and columns.
- * @method createInjector - Creates an injector for the given inputs.
- * @param {any} inputs - Inputs for the component.
- * @returns {Injector} - The created injector.
- */
+ * @example
+ * ```html
+ * <app-flexible-video
+ *   [customWidth]="300"
+ *   [customHeight]="200"
+ *   [rows]="2"
+ *   [columns]="3"
+ *   [componentsToRender]="[{ component: VideoComponent, inputs: { stream: videoStream } }]"
+ *   showAspect="true"
+ *   [Screenboard]="{ component: ScreenOverlayComponent, inputs: { overlayData: data } }"
+ * ></app-flexible-video>
+ * ```
+ **/
 export declare class FlexibleVideo implements OnInit, OnChanges {
     private injector;
     customWidth: number;

package/dist/lib/components/display-components/loading-modal/loading-modal.component.d.ts

@@ -6,28 +6,15 @@ export interface LoadingModalOptions {
 }
 export type LoadingModalType = (options: LoadingModalOptions) => HTMLElement;
 /**
- * Component representing a loading modal.
+ * LoadingModal displays a loading spinner and a customizable "Loading..." text as an overlay.
  *
  * @selector app-loading-modal
  * @standalone true
  * @imports CommonModule
  *
- * @description
- * This component displays a loading modal with a spinner and a loading text.
- * It is designed to be displayed as an overlay with customizable background and text colors.
- *
- * @example
- * <app-loading-modal [isVisible]="true" [backgroundColor]="'rgba(0, 0, 0, 0.5)'" [displayColor]="'white'"></app-loading-modal>
- *
- * @styles
- * - .spinner: Styles for the loading spinner.
- * - @keyframes spin: Keyframes for the spinner animation.
- * - .modal-content: Styles for the modal content container.
- * - .loading-text: Styles for the loading text.
- *
  * @inputs
- * - `isVisible` (boolean): Determines if the modal is visible. Default is `false`.
- * - `backgroundColor` (string): Background color of the modal. Default is `'rgba(0, 0, 0, 0.5)'`.
+ * - `isVisible` (boolean): Controls the visibility of the modal overlay. Default is `false`.
+ * - `backgroundColor` (string): Background color of the modal overlay. Default is `'rgba(0, 0, 0, 0.5)'`.
  * - `displayColor` (string): Color of the loading text. Default is `'white'`.
  *
  * @properties
@@ -35,7 +22,22 @@ export type LoadingModalType = (options: LoadingModalOptions) => HTMLElement;
  * - `modalContentStyle` (object): Computed styles for the modal content.
  * - `spinnerContainerStyle` (object): Computed styles for the spinner container.
  * - `loadingTextStyle` (object): Computed styles for the loading text.
- */
+ *
+ * @example
+ * ```html
+ * <app-loading-modal
+ *   [isVisible]="true"
+ *   [backgroundColor]="'rgba(0, 0, 0, 0.5)'"
+ *   [displayColor]="'white'">
+ * </app-loading-modal>
+ * ```
+ *
+ * @styles
+ * - `.spinner`: Styles for the loading spinner.
+ * - `@keyframes spin`: Keyframes for the spinner rotation animation.
+ * - `.modal-content`: Styles for the modal content container.
+ * - `.loading-text`: Styles for the loading text.
+ **/
 export declare class LoadingModal {
     isVisible: boolean;
     backgroundColor?: string;

package/dist/lib/components/display-components/main-aspect-component/main-aspect-component.component.d.ts

@@ -12,13 +12,12 @@ export interface MainAspectComponentOptions {
 }
 export type MainAspectComponentType = (options: MainAspectComponentOptions) => HTMLElement;
 /**
- * MainAspectComponent is a standalone Angular component that adjusts its aspect ratio
- * based on the window size and other input properties. It listens to window resize
- * and orientation change events to dynamically update its styles.
+ * MainAspectComponent dynamically adjusts its aspect ratio based on window size, providing an adaptable container for content.
+ * It listens for window resize and orientation changes to update its layout, making it suitable for responsive applications.
  *
  * @selector app-main-aspect-component
  * @standalone true
- * @imports [CommonModule]
+ * @imports CommonModule
  *
  * @template
  * ```html
@@ -28,29 +27,38 @@ export type MainAspectComponentType = (options: MainAspectComponentOptions) => H
  * ```
  *
  * @styles
- * ```css
- * .aspect-container {
- *   overflow: hidden;
- * }
- * ```
+ * - `.aspect-container`: Styles for overflow handling.
  *
- * @class MainAspectComponent
- * @implements OnInit, OnDestroy, OnChanges
+ * @inputs
+ * - `backgroundColor` (string): The background color of the aspect container.
+ * - `showControls` (boolean): Toggles control display, adjusting the container height. Default is true.
+ * - `containerWidthFraction` (number): Fraction of window width for container width. Default is 1.
+ * - `containerHeightFraction` (number): Fraction of window height for container height. Default is 1.
+ * - `defaultFraction` (number): Height adjustment factor when controls are shown. Default is 0.94.
+ * - `updateIsWideScreen` (function): Callback to set wide screen status.
+ * - `updateIsMediumScreen` (function): Callback to set medium screen status.
+ * - `updateIsSmallScreen` (function): Callback to set small screen status.
  *
- * @property {string} backgroundColor - The background color of the aspect container.
- * @property {boolean} showControls - Flag to show or hide controls.
- * @property {number} containerWidthFraction - Fraction of the window width for the container.
- * @property {number} containerHeightFraction - Fraction of the window height for the container.
- * @property {number} defaultFraction - Default fraction to adjust the height when controls are shown.
- * @property {(isWideScreen: boolean) => void} updateIsWideScreen - Callback to update wide screen status.
- * @property {(isMediumScreen: boolean) => void} updateIsMediumScreen - Callback to update medium screen status.
- * @property {(isSmallScreen: boolean) => void} updateIsSmallScreen - Callback to update small screen status.
+ * @methods
+ * - `ngOnInit()`: Initializes component and sets up resize and orientation listeners.
+ * - `ngOnChanges(changes: SimpleChanges)`: Updates layout when relevant inputs change.
+ * - `ngOnDestroy()`: Removes event listeners to prevent memory leaks.
+ * - `updateAspectStyles()`: Calculates and applies styles based on current window dimensions and component inputs.
  *
- * @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 private updateAspectStyles - Updates the aspect styles based on the window size and input properties.
- */
+ * @example
+ * ```html
+ * <app-main-aspect-component
+ *   [backgroundColor]="'lightblue'"
+ *   [showControls]="true"
+ *   [containerWidthFraction]="0.9"
+ *   [containerHeightFraction]="0.8"
+ *   [defaultFraction]="0.95"
+ *   [updateIsWideScreen]="onWideScreenUpdate"
+ *   [updateIsMediumScreen]="onMediumScreenUpdate"
+ *   [updateIsSmallScreen]="onSmallScreenUpdate"
+ * ></app-main-aspect-component>
+ * ```
+ **/
 export declare class MainAspectComponent implements OnInit, OnDestroy, OnChanges {
     backgroundColor: string;
     showControls: boolean;

package/dist/lib/components/display-components/main-container-component/main-container-component.component.d.ts

@@ -12,8 +12,8 @@ export interface MainContainerComponentOptions {
 }
 export type MainContainerComponentType = (options: MainContainerComponentOptions) => HTMLElement;
 /**
- * MainContainerComponent is a standalone Angular component that dynamically adjusts its styles
- * based on the provided input properties and window size changes.
+ * MainContainerComponent dynamically adjusts its styles based on input properties and window size,
+ * providing a responsive container for content.
  *
  * @selector app-main-container-component
  * @standalone true
@@ -26,22 +26,34 @@ export type MainContainerComponentType = (options: MainContainerComponentOptions
  * </div>
  * ```
  *
- * @class MainContainerComponent
- * @implements OnInit, OnDestroy, OnChanges
+ * @inputs
+ * - `backgroundColor` (string): Background color of the container.
+ * - `containerWidthFraction` (number): Fraction of the window width the container should occupy. Default is 1.
+ * - `containerHeightFraction` (number): Fraction of the window height the container should occupy. Default is 1.
+ * - `marginLeft` (number): Left margin of the container in pixels.
+ * - `marginRight` (number): Right margin of the container in pixels.
+ * - `marginTop` (number): Top margin of the container in pixels.
+ * - `marginBottom` (number): Bottom margin of the container in pixels.
+ * - `padding` (number): Padding inside the container in pixels.
  *
- * @property {string} backgroundColor - The background color of the container.
- * @property {number} containerWidthFraction - The fraction of the window width the container should occupy.
- * @property {number} containerHeightFraction - The fraction of the window height the container should occupy.
- * @property {number} marginLeft - The left margin of the container in pixels.
- * @property {number} marginRight - The right margin of the container in pixels.
- * @property {number} marginTop - The top margin of the container in pixels.
- * @property {number} marginBottom - The bottom margin of the container in pixels.
+ * @methods
+ * - `ngOnInit()`: Initializes the component, sets up event listeners for resize and orientation changes, and updates container styles.
+ * - `ngOnChanges(changes: SimpleChanges)`: Updates container styles when input properties change.
+ * - `ngOnDestroy()`: Removes event listeners to avoid memory leaks.
+ * - `updateContainerStyles()`: Computes and applies styles to the container based on current window size and input properties.
  *
- * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized. Sets up event listeners for window resize and orientation change.
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes. Updates the container styles accordingly.
- * @method ngOnDestroy - Lifecycle hook that is called just before the component is destroyed. Removes event listeners for window resize and orientation change.
- * @method updateContainerStyles - Updates the container styles based on the current input properties and window size.
- */
+ * @example
+ * ```html
+ * <app-main-container-component
+ *   [backgroundColor]="'lightgrey'"
+ *   [containerWidthFraction]="0.8"
+ *   [containerHeightFraction]="0.9"
+ *   [marginLeft]="10"
+ *   [marginTop]="15"
+ *   [padding]="5"
+ * ></app-main-container-component>
+ * ```
+ **/
 export declare class MainContainerComponent implements OnInit, OnDestroy, OnChanges {
     backgroundColor: string;
     containerWidthFraction: number;

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

@@ -11,14 +11,14 @@ export interface MainGridComponentOptions {
 }
 export type MainGridComponentType = (options: MainGridComponentOptions) => HTMLElement;
 /**
- * MainGridComponent is a standalone Angular component that displays a grid container
- * with optional meeting progress timer and customizable styles.
+ * MainGridComponent displays a customizable grid container with an optional meeting progress timer.
  *
  * @selector app-main-grid-component
  * @standalone true
  * @imports CommonModule, MeetingProgressTimer
  *
  * @template
+ * ```html
  * <div [ngStyle]="maingridContainerStyle">
  *   <app-meeting-progress-timer
  *     *ngIf="showTimer"
@@ -27,20 +27,34 @@ export type MainGridComponentType = (options: MainGridComponentOptions) => HTMLE
  *   ></app-meeting-progress-timer>
  *   <ng-content></ng-content>
  * </div>
+ * ```
  *
- * @Inputs
- * @property {string} backgroundColor - The background color of the grid container.
- * @property {number} mainSize - The main size of the grid container.
- * @property {number} height - The height of the grid container in pixels.
- * @property {number} width - The width of the grid container in pixels.
- * @property {boolean} showAspect - Determines if the grid container should be displayed as flex.
- * @property {string} timeBackgroundColor - The background color of the meeting progress timer.
- * @property {boolean} showTimer - Determines if the meeting progress timer should be displayed.
- * @property {string} meetingProgressTime - The progress time to be displayed in the meeting progress timer.
+ * @inputs
+ * - `backgroundColor` (string): Background color of the grid container. Default is an empty string.
+ * - `mainSize` (number): Main size of the grid container, used for layout adjustments.
+ * - `height` (number): Height of the grid container in pixels.
+ * - `width` (number): Width of the grid container in pixels.
+ * - `showAspect` (boolean): If true, displays the grid container in flex layout. Default is true.
+ * - `timeBackgroundColor` (string): Background color of the meeting progress timer. Default is 'green'.
+ * - `showTimer` (boolean): If true, displays the meeting progress timer. Default is true.
+ * - `meetingProgressTime` (string): Time displayed in the meeting progress timer.
  *
- * @getter maingridContainerStyle - Returns the style object for the grid container.
- * @returns {Object} The style object for the grid container.
- */
+ * @getter
+ * - `maingridContainerStyle`: Returns a style object for the grid container, including display, color, dimensions, and border styling.
+ *
+ * @example
+ * ```html
+ * <app-main-grid-component
+ *   [backgroundColor]="'lightgrey'"
+ *   [height]="500"
+ *   [width]="500"
+ *   [showAspect]="true"
+ *   [timeBackgroundColor]="'blue'"
+ *   [showTimer]="true"
+ *   [meetingProgressTime]="'10:45'"
+ * ></app-main-grid-component>
+ * ```
+ **/
 export declare class MainGridComponent {
     backgroundColor: string;
     mainSize: number;

package/dist/lib/components/display-components/main-screen-component/main-screen-component.component.d.ts

@@ -12,36 +12,57 @@ export interface MainScreenComponentOptions {
 }
 export type MainScreenComponentType = (options: MainScreenComponentOptions) => HTMLElement;
 /**
- * MainScreenComponent is responsible for displaying a main screen with dynamic dimensions
- * and layout based on the input properties and screen size.
+ * MainScreenComponent dynamically displays a main screen area with responsive dimensions, adjustable layout, and stacking options based on the screen size and input properties.
  *
  * @selector app-main-screen-component
  * @standalone true
  * @imports CommonModule
  *
- * @property {number} mainSize - The size of the main component as a percentage.
- * @property {boolean} doStack - Determines if the components should be stacked.
- * @property {number} containerWidthFraction - Fraction of the container width.
- * @property {number} containerHeightFraction - Fraction of the container height.
- * @property {number} defaultFraction - Default fraction for height calculation.
- * @property {boolean} showControls - Flag to show or hide controls.
- * @property {(sizes: ComponentSizes) => void} updateComponentSizes - Callback to update component sizes.
+ * @template
+ * ```html
+ * <div [ngStyle]="containerStyle">
+ *   <ng-content></ng-content>
+ * </div>
+ * ```
  *
- * @ContentChildren('child') children - Query list of child elements.
+ * @inputs
+ * - `mainSize` (number): Percentage size of the main component. Default is 40.
+ * - `doStack` (boolean): Determines if components should be stacked. Default is true.
+ * - `containerWidthFraction` (number): Fraction of the container width to use. Default is 1.
+ * - `containerHeightFraction` (number): Fraction of the container height to use. Default is 1.
+ * - `defaultFraction` (number): Default height fraction for the container when controls are shown. Default is 0.94.
+ * - `showControls` (boolean): If true, shows control elements, affecting container height. Default is true.
+ * - `updateComponentSizes` (function): Callback for updating component sizes.
  *
- * @property {number} parentWidth - The width of the parent container.
- * @property {number} parentHeight - The height of the parent container.
- * @property {boolean} isWideScreen - Flag to determine if the screen is wide.
+ * @ContentChildren('child') children - Query list of child elements within the component.
  *
- * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.
- * @method ngOnDestroy - Lifecycle hook that is called when the component is destroyed.
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes.
- * @method ngAfterViewInit - Lifecycle hook that is called after the component's view has been fully initialized.
- * @method computeDimensions - Computes the dimensions of the main and other components based on the input properties.
- * @method updateDimensions - Updates the dimensions of the parent container and child components.
- * @method get containerStyle - Returns the style object for the container.
- * @method applyChildStyles - Applies the computed styles to the child components.
- */
+ * @properties
+ * - `containerStyle`: Returns a style object for the container based on dimensions and layout options.
+ *
+ * @methods
+ * - `ngOnInit()`: Initializes the component and sets up event listeners for window resize and orientation changes.
+ * - `ngOnChanges(changes: SimpleChanges)`: Updates dimensions and layout if any relevant inputs change.
+ * - `ngOnDestroy()`: Removes event listeners to prevent memory leaks.
+ * - `ngAfterViewInit()`: Applies computed styles to child elements after view initialization.
+ * - `computeDimensions()`: Calculates the dimensions for main and secondary components based on current layout settings.
+ * - `updateDimensions()`: Updates component dimensions based on window size and input properties.
+ * - `applyChildStyles()`: Applies computed styles to child components.
+ *
+ * @example
+ * ```html
+ * <app-main-screen-component
+ *   [mainSize]="60"
+ *   [doStack]="false"
+ *   [containerWidthFraction]="0.8"
+ *   [containerHeightFraction]="0.9"
+ *   [defaultFraction]="0.9"
+ *   [showControls]="true"
+ *   [updateComponentSizes]="onUpdateSizes"
+ * >
+ *   <div #child>Child Component</div>
+ * </app-main-screen-component>
+ * ```
+ **/
 export declare class MainScreenComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private renderer;
     mainSize: number;