mediasfu-angular 1.0.1 → 2.0.0

package/dist/lib/components/display-components/meeting-progress-timer/meeting-progress-timer.component.d.ts

@@ -11,8 +11,8 @@ export interface MeetingProgressTimerOptions {
 }
 export type MeetingProgressTimerType = (options: MeetingProgressTimerOptions) => HTMLElement;
 /**
- * Component to display a meeting progress timer.
- *s
+ * MeetingProgressTimer displays a customizable timer badge to track meeting progress time.
+ *
  * @selector app-meeting-progress-timer
  * @standalone true
  * @imports CommonModule
@@ -27,38 +27,33 @@ export type MeetingProgressTimerType = (options: MeetingProgressTimerOptions) =>
  * ```
  *
  * @styles
- * ```css
- * .badge-container {
- *   padding: 5px;
- *   position: relative;
- *   z-index: 1000;
- * }
- * .progress-timer {
- *   background-color: green;
- *   padding: 5px;
- *   border-radius: 5px;
- *   color: white;
- * }
- * .progress-timer-text {
- *   color: black;
- * }
- * ```
+ * - `.badge-container`: General container style with positioning.
+ * - `.progress-timer`: Timer badge with default padding, background, and border-radius.
+ * - `.progress-timer-text`: Text styling within the timer badge.
  *
- * @class MeetingProgressTimer
- * @implements OnInit, OnChanges
+ * @inputs
+ * - `meetingProgressTime` (string): Time to be displayed in the timer.
+ * - `initialBackgroundColor` (string): Background color of the timer badge. Default is 'green'.
+ * - `position` ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'): Position of the timer on the screen. Default is 'topLeft'.
+ * - `textStyle` (object): Custom styles for the timer text.
+ * - `showTimer` (boolean): If true, displays the timer. Default is true.
  *
- * @property {string} meetingProgressTime - The time to be displayed in the timer.
- * @property {string} [initialBackgroundColor='green'] - The initial background color of the timer.
- * @property {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} [position='topLeft'] - The position of the timer on the screen.
- * @property {{ [key: string]: string | number }} [textStyle={}] - The style to be applied to the timer text.
- * @property {boolean} [showTimer=true] - Flag to show or hide the timer.
+ * @property `positions` (object): Preset styles for timer positioning options.
  *
- * @property {{ [key: string]: { position: string, top?: string, bottom?: string, left?: string, right?: string } }} positions - The possible positions for the timer.
+ * @methods
+ * - `ngOnChanges(changes: SimpleChanges)`: Handles changes to input properties and updates styles accordingly.
  *
- * @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 of a directive changes.
- * @param {SimpleChanges} changes - The changed properties.
- */
+ * @example
+ * ```html
+ * <app-meeting-progress-timer
+ *   [meetingProgressTime]="'10:30'"
+ *   [initialBackgroundColor]="'blue'"
+ *   [position]="'bottomRight'"
+ *   [textStyle]="{ color: 'white', fontWeight: 'bold' }"
+ *   [showTimer]="true"
+ * ></app-meeting-progress-timer>
+ * ```
+ **/
 export declare class MeetingProgressTimer implements OnChanges {
     meetingProgressTime: string;
     initialBackgroundColor: string;

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

@@ -15,76 +15,69 @@ export interface MiniAudioOptions {
 }
 export type MiniAudioType = (options: MiniAudioOptions) => HTMLElement;
 /**
- * MiniAudio component is a standalone Angular component that displays a mini audio player with waveform animations.
- * It supports various customizations including visibility, styles, text, and image properties.
- * The component can be dragged around the screen.
+ * MiniAudio component is a draggable, customizable mini audio player with optional waveform animations.
  *
  * @selector app-mini-audio
  * @standalone true
  * @imports CommonModule
  *
  * @template
- * The template includes a modal container with a card that displays an optional background image, name text, and waveform animations.
+ * ```html
+ * <div *ngIf="visible" class="modal-container" [ngStyle]="{ transform: 'translate(' + position.x + 'px, ' + position.y + 'px)' }" (mousedown)="handleMouseDown($event)">
+ *   <div class="card" [ngStyle]="customStyle">
+ *     <ng-container *ngIf="imageSource">
+ *       <img [src]="imageSource" [ngStyle]="getImageStyle()" alt="Background" class="background-image" />
+ *     </ng-container>
+ *     <div class="name-text" [ngStyle]="combineStyles({ color: textColor }, nameTextStyling)">
+ *       {{ name }}
+ *     </div>
+ *     <div [ngStyle]="getOverlayPosition(overlayPosition)" class="overlay-web">
+ *       <div class="waveform-web">
+ *         <div *ngFor="let animation of waveformAnimations; let i = index"
+ *              [ngStyle]="{ height: animation == 0 ? '1px' : '30px', width: '10px', backgroundColor: barColor }"
+ *              class="bar">
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
  *
  * @styles
- * The styles define the appearance of the modal container, card, background image, name text, overlay, waveform, and bars.
- *
- * @class MiniAudio
- * @implements OnInit, OnDestroy
- *
- * @property {boolean} visible - Determines if the component is visible.
- * @property {any} customStyle - Custom styles for the component.
- * @property {string} name - The name text displayed in the component.
- * @property {boolean} showWaveform - Flag to show or hide the waveform animations.
- * @property {string} overlayPosition - Position of the overlay.
- * @property {string} barColor - Color of the waveform bars.
- * @property {string} textColor - Color of the name text.
- * @property {any} nameTextStyling - Additional styles for the name text.
- * @property {string} imageSource - Source URL for the background image.
- * @property {boolean} roundedImage - Flag to apply rounded corners to the background image.
- * @property {any} imageStyle - Custom styles for the background image.
- *
- * @constructor
- * The constructor allows optional dependency injection for all input properties.
- *
- * @method ngOnInit
- * Initializes the component and starts waveform animations if enabled.
- *
- * @method ngOnDestroy
- * Cleans up intervals to prevent memory leaks.
- *
- * @method animateWaveform
- * Starts the waveform animations by setting intervals for each bar.
- *
- * @method animateBar
- * Animates a single bar in the waveform.
- *
- * @method resetWaveform
- * Resets the waveform animations to their initial state.
- *
- * @method clearIntervals
- * Clears all animation intervals.
- *
- * @method getAnimationDuration
- * Returns the animation duration for a given bar index.
- *
- * @method getImageStyle
- * Returns the combined styles for the background image, including optional rounded corners.
- *
- * @method combineStyles
- * Combines base styles with additional styles.
- *
- * @method handleMouseDown
- * Handles the mousedown event to start dragging the component.
- *
- * @method handleMouseMove
- * Handles the mousemove event to update the component's position while dragging.
- *
- * @method handleMouseUp
- * Handles the mouseup event to stop dragging the component.
- *
- * @method getOverlayPosition
- * Returns the position styles for the overlay.
+ * - `.modal-container`: Positioning and drag area.
+ * - `.card`: The main container styling.
+ * - `.background-image`: Styling for an optional background image.
+ * - `.name-text`: Styling for name text with customizable color.
+ * - `.overlay-web` and `.waveform-web`: Contains and styles the waveform animation bars.
+ *
+ * @inputs
+ * - `visible` (boolean): Show/hide the component.
+ * - `customStyle` (object): Custom styles for the component.
+ * - `name` (string): Text to display as the name.
+ * - `showWaveform` (boolean): Show/hide waveform animations.
+ * - `overlayPosition` (string): Position of the overlay.
+ * - `barColor` (string): Color of waveform bars.
+ * - `textColor` (string): Color of name text.
+ * - `nameTextStyling` (object): Additional styles for the name text.
+ * - `imageSource` (string): URL of the background image.
+ * - `roundedImage` (boolean): If true, applies rounded corners to the image.
+ * - `imageStyle` (object): Custom styles for the image.
+ *
+ * @property `waveformAnimations` (array): Tracks animation states for each waveform bar.
+ * @property `position` (object): Tracks x and y positioning for dragging.
+ *
+ * @methods
+ * - `ngOnInit()`: Starts waveform animations if `showWaveform` is true.
+ * - `ngOnDestroy()`: Clears waveform animation intervals.
+ * - `animateWaveform()`: Sets intervals for each bar's animation.
+ * - `handleMouseDown(event: MouseEvent)`: Starts dragging on mousedown.
+ * - `handleMouseMove(event: MouseEvent)`: Updates position during drag.
+ * - `handleMouseUp()`: Ends dragging on mouseup.
+ *
+ * @example
+ * ```html
+ * <app-mini-audio [visible]="true" [name]="'Audio Player'" [barColor]="'blue'" [imageSource]="'/path/to/image.png'"></app-mini-audio>
+ * ```
  */
 export declare class MiniAudio implements OnInit, OnDestroy {
     visible: boolean;

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

@@ -9,7 +9,7 @@ export interface MiniCardOptions {
 }
 export type MiniCardType = (options: MiniCardOptions) => HTMLElement;
 /**
- * MiniCard component displays a card with either an image or initials.
+ * MiniCard component displays a customizable card with an image or initials.
  *
  * @component
  * @selector app-mini-card
@@ -17,6 +17,7 @@ export type MiniCardType = (options: MiniCardOptions) => HTMLElement;
  * @imports CommonModule
  *
  * @template
+ * ```html
  * <div class="mini-card" [ngStyle]="getMergedCardStyles()">
  *   <div *ngIf="imageSource; else noImage" class="image-container">
  *     <img [src]="imageSource" alt="Profile" [ngStyle]="getMergedImageStyles()" />
@@ -25,35 +26,30 @@ export type MiniCardType = (options: MiniCardOptions) => HTMLElement;
  *     <div class="initials" [ngStyle]="getInitialsStyle()">{{ initials }}</div>
  *   </ng-template>
  * </div>
+ * ```
  *
  * @styleUrls ['./mini-card.component.css']
  *
- * @property {string} initials - The initials to display if no image is provided.
- * @property {number} fontSize - The font size for the initials text. Default is 14.
- * @property {Partial<CSSStyleDeclaration>} customStyle - Custom styles for the card.
- * @property {string} imageSource - The source URL for the image.
- * @property {boolean} roundedImage - Whether the image should be rounded. Default is false.
- * @property {Partial<CSSStyleDeclaration>} imageStyle - Custom styles for the image.
+ * @inputs
+ * - `initials` (string): Initials to display if no image is provided.
+ * - `fontSize` (number): Font size for initials text, default is 14.
+ * - `customStyle` (CSSStyleDeclaration): Custom styles for the card.
+ * - `imageSource` (string): Source URL for the image.
+ * - `roundedImage` (boolean): Whether the image should be rounded, default is false.
+ * - `imageStyle` (CSSStyleDeclaration): Custom styles for the image.
  *
  * @constructor
- * @param {string} [injectedInitials] - Injected initials.
- * @param {number} [injectedFontSize] - Injected font size.
- * @param {Partial<CSSStyleDeclaration>} [injectedCustomStyle] - Injected custom styles.
- * @param {string} [injectedImageSource] - Injected image source.
- * @param {boolean} [injectedRoundedImage] - Injected rounded image flag.
- * @param {Partial<CSSStyleDeclaration>} [injectedImageStyle] - Injected image styles.
+ * - Optionally accepts injected values for each input property.
  *
- * @method getMergedCardStyles
- * @description Merges the default card styles with custom styles.
- * @returns {CSSStyleDeclaration} The merged card styles.
+ * @methods
+ * - `getMergedCardStyles()`: Returns merged styles for the card.
+ * - `getMergedImageStyles()`: Returns merged styles for the image.
+ * - `getInitialsStyle()`: Returns styles for the initials text.
  *
- * @method getMergedImageStyles
- * @description Merges the default image styles with custom styles.
- * @returns {CSSStyleDeclaration} The merged image styles.
- *
- * @method getInitialsStyle
- * @description Returns the styles for the initials text.
- * @returns {CSSStyleDeclaration} The initials text styles.
+ * @example
+ * ```html
+ * <app-mini-card initials="AB" fontSize="20" [roundedImage]="true" imageSource="/path/to/image.jpg"></app-mini-card>
+ * ```
  */
 export declare class MiniCard {
     initials: string;

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

@@ -13,61 +13,61 @@ export interface MiniCardAudioOptions {
 }
 export type MiniCardAudioType = (options: MiniCardAudioOptions) => HTMLElement;
 /**
- * MiniCardAudio component displays an audio card with optional waveform animation.
+ * MiniCardAudio component displays an audio card with optional waveform animation and overlay.
  *
- * @component
  * @selector app-mini-card-audio
  * @standalone true
  * @imports CommonModule
  *
  * @template
- * The template includes:
- * - A card container with customizable styles.
- * - An optional background image.
- * - An overlay with the name and waveform animation.
+ * - Displays:
+ *   - A customizable card with optional image and name.
+ *   - Overlay with waveform animation and text.
  *
  * @styles
- * The styles include:
- * - Card dimensions and background color.
- * - Overlay positioning and grid layout.
- * - Name column styling.
- * - Waveform bar styling.
- * - Background image positioning and optional rounded corners.
+ * - Customizable card, overlay, and waveform styles.
  *
  * @inputs
- * @param {any} customStyle - Custom styles for the card.
- * @param {string} name - The name to display on the card.
- * @param {boolean} showWaveform - Flag to show or hide the waveform animation.
- * @param {string} overlayPosition - Position of the overlay on the card.
- * @param {string} barColor - Color of the waveform bars.
- * @param {string} textColor - Color of the name text.
- * @param {string} imageSource - Source URL for the background image.
- * @param {boolean} roundedImage - Flag to apply rounded corners to the background image.
- * @param {any} imageStyle - Custom styles for the background image.
+ * - `customStyle` (Partial<CSSStyleDeclaration>): Custom CSS styles for the card.
+ * - `name` (string): Name displayed on the card.
+ * - `showWaveform` (boolean): Controls visibility of waveform animation.
+ * - `overlayPosition` (string): Position for the overlay on the card.
+ * - `barColor` (string): Color of waveform bars.
+ * - `textColor` (string): Color of the name text.
+ * - `imageSource` (string): URL for the background image.
+ * - `roundedImage` (boolean): Rounds image corners if true.
+ * - `imageStyle` (Partial<CSSStyleDeclaration>): Custom styles for the background image.
  *
- * @class
+ * @class MiniCardAudio
  * @implements OnInit, OnDestroy
  *
  * @constructor
- * @param {Partial<CSSStyleDeclaration>} injectedCustomStyle - Injected custom styles for the card.
- * @param {string} injectedName - Injected name to display on the card.
- * @param {boolean} injectedShowWaveform - Injected flag to show or hide the waveform animation.
- * @param {string} injectedOverlayPosition - Injected position of the overlay on the card.
- * @param {string} injectedBarColor - Injected color of the waveform bars.
- * @param {string} injectedTextColor - Injected color of the name text.
- * @param {string} injectedImageSource - Injected source URL for the background image.
- * @param {boolean} injectedRoundedImage - Injected flag to apply rounded corners to the background image.
- * @param {Partial<CSSStyleDeclaration>} injectedImageStyle - Injected custom styles for the background image.
+ * - Optional injected values for all input properties.
  *
  * @methods
- * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.
- * @method ngOnDestroy - Lifecycle hook that is called just before the component is destroyed.
- * @method animateWaveform - Starts the waveform animation.
- * @method resetWaveform - Resets the waveform animation.
- * @method clearIntervals - Clears all animation intervals.
- * @method getAnimationDuration - Returns the animation duration for a given index.
- * @method getImageStyle - Returns the styles for the background image.
- * @method getOverlayPosition - Returns the styles for the overlay position.
+ * - `ngOnInit`: Initializes the component, starts waveform animation if `showWaveform` is true.
+ * - `ngOnDestroy`: Cleans up intervals.
+ * - `animateWaveform`: Starts animation of the waveform bars.
+ * - `resetWaveform`: Resets waveform to initial state.
+ * - `clearIntervals`: Clears all active intervals.
+ * - `getAnimationDuration`: Returns duration for animation at a given index.
+ * - `getImageStyle`: Combines custom image styles with rounded corners if enabled.
+ * - `getOverlayPosition`: Uses utility to determine the overlay's position.
+ *
+ * @example
+ * ```html
+ * <app-mini-card-audio
+ *   [customStyle]="{ backgroundColor: 'blue' }"
+ *   name="Audio Name"
+ *   [showWaveform]="true"
+ *   overlayPosition="bottomRight"
+ *   barColor="red"
+ *   textColor="white"
+ *   imageSource="/path/to/image.jpg"
+ *   [roundedImage]="true"
+ *   [imageStyle]="{ border: '2px solid black' }"
+ * ></app-mini-card-audio>
+ * ```
  */
 export declare class MiniCardAudio implements OnInit, OnDestroy {
     customStyle: any;

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

@@ -10,27 +10,42 @@ export interface OtherGridComponentOptions {
 }
 export type OtherGridComponentType = (options: OtherGridComponentOptions) => HTMLElement;
 /**
- * Component representing a customizable grid with an optional timer.
+ * OtherGridComponent represents a customizable grid container with optional meeting progress timer.
  *
  * @selector app-other-grid-component
  * @standalone true
  * @imports CommonModule, MeetingProgressTimer
  *
  * @template
- * <div [ngStyle]="{...}">
- *   <app-meeting-progress-timer *ngIf="showTimer" [meetingProgressTime]="meetingProgressTime" [initialBackgroundColor]="timeBackgroundColor" [showTimer]="showTimer"></app-meeting-progress-timer>
- *   <ng-content></ng-content>
- * </div>
+ * - The template consists of:
+ *   - A grid container styled with specified dimensions, background color, and border.
+ *   - An optional `MeetingProgressTimer` component displayed within the grid if `showTimer` is true.
  *
- * @class OtherGridComponent
+ * @styles
+ * - Default border, padding, and display styles for the grid container.
+ *
+ * @inputs
+ * - `backgroundColor` (string): Background color of the grid container. Default is `'transparent'`.
+ * - `width` (number): Width of the grid in pixels. Default is `0`.
+ * - `height` (number): Height of the grid in pixels. Default is `0`.
+ * - `showAspect` (boolean): Controls visibility of the grid container. Default is `true`.
+ * - `timeBackgroundColor` (string): Background color of the timer. Default is `'green'`.
+ * - `showTimer` (boolean): Determines if the timer should be displayed. Default is `false`.
+ * - `meetingProgressTime` (string): Time to display in the timer. Default is `'00:00:00'`.
  *
- * @property {string} backgroundColor - The background color of the grid. Default is 'transparent'.
- * @property {number} width - The width of the grid in pixels. Default is 0.
- * @property {number} height - The height of the grid in pixels. Default is 0.
- * @property {boolean} showAspect - Flag to show or hide the grid. Default is true.
- * @property {string} timeBackgroundColor - The background color of the timer. Default is 'green'.
- * @property {boolean} showTimer - Flag to show or hide the timer. Default is false.
- * @property {string} meetingProgressTime - The meeting progress time to be displayed in the timer. Default is '00:00:00'.
+ * @class OtherGridComponent
+ * @example
+ * ```html
+ * <app-other-grid-component
+ *   [backgroundColor]="'lightgray'"
+ *   [width]="300"
+ *   [height]="200"
+ *   [showAspect]="true"
+ *   [timeBackgroundColor]="'blue'"
+ *   [showTimer]="true"
+ *   [meetingProgressTime]="'00:05:32'"
+ * ></app-other-grid-component>
+ * ```
  */
 export declare class OtherGridComponent {
     backgroundColor: string;

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

@@ -35,18 +35,17 @@ export interface PaginationOptions {
 }
 export type PaginationType = (options: PaginationOptions) => HTMLElement;
 /**
- * Pagination component for displaying and handling pagination controls.
+ * Pagination component for managing and displaying page navigation controls with various layouts and customizations.
  *
- * @component
  * @selector app-pagination
  * @standalone true
  * @imports [CommonModule, FontAwesomeModule]
  *
  * @description
- * This component renders pagination controls with customizable styles and behavior.
- * It supports horizontal and vertical layouts, different positions, and dynamic data.
+ * This component renders pagination controls, allowing users to navigate through pages. The controls support horizontal and vertical layouts, customizable styles, and dynamic page content handling, with special support for breakout room navigation.
  *
  * @example
+ * ```html
  * <app-pagination
  *   [totalPages]="10"
  *   [currentUserPage]="1"
@@ -59,27 +58,34 @@ export type PaginationType = (options: PaginationOptions) => HTMLElement;
  *   [showAspect]="true"
  *   [parameters]="paginationParameters">
  * </app-pagination>
+ * ```
  *
- * @input {number} totalPages - Total number of pages.
- * @input {number} currentUserPage - Current active page.
- * @input {Function} handlePageChange - Function to handle page change.
- * @input {'left' | 'middle' | 'right' | string} position - Position of the pagination controls.
- * @input {'top' | 'middle' | 'bottom' | string} location - Location of the pagination controls.
- * @input {'horizontal' | 'vertical' | string} direction - Direction of the pagination controls.
- * @input {any} buttonsContainerStyle - Custom styles for the buttons container.
- * @input {any} activePageStyle - Custom styles for the active page button.
- * @input {any} inactivePageStyle - Custom styles for the inactive page buttons.
- * @input {string} backgroundColor - Background color of the pagination controls.
- * @input {number} paginationHeight - Height of the pagination controls.
- * @input {boolean} showAspect - Flag to show or hide the pagination controls.
- * @input {PaginationParameters} parameters - Additional parameters for pagination.
+ * @input {number} totalPages - Total number of pages available for navigation.
+ * @input {number} currentUserPage - Current active page number.
+ * @input {Function} handlePageChange - Callback function to handle page changes.
+ * @input {'left' | 'middle' | 'right' | string} position - Horizontal position of the pagination controls (default is 'middle').
+ * @input {'top' | 'middle' | 'bottom' | string} location - Vertical position of the pagination controls (default is 'middle').
+ * @input {'horizontal' | 'vertical' | string} direction - Layout direction of the pagination controls (default is 'horizontal').
+ * @input {any} buttonsContainerStyle - Custom CSS styles for the buttons container.
+ * @input {any} activePageStyle - CSS styles for the active page button.
+ * @input {any} inactivePageStyle - CSS styles for inactive page buttons.
+ * @input {string} backgroundColor - Background color for the pagination controls.
+ * @input {number} paginationHeight - Height of the pagination controls in pixels.
+ * @input {boolean} showAspect - Flag to display or hide the pagination controls.
+ * @input {PaginationParameters} parameters - Additional configuration parameters for managing breakout rooms and related state.
  *
- * @method ngOnInit - Initializes the component and sets up initial data.
- * @method ngOnChanges - Handles changes to input properties and updates data accordingly.
- * @method handleClick - Handles click events on pagination buttons and performs necessary actions.
- * @method getPageStyle - Returns the style for a given page button based on its state.
- * @method isBreakoutRoom - Determines if a given item represents a breakout room.
- * @method getDisplayItem - Returns the display text for a given item.
+ * @property {number[]} data - Array representing pages to be displayed in pagination controls.
+ * @property {ComponentSizes} componentSizes - Stores calculated sizes for pagination controls.
+ *
+ * @method ngOnInit - Lifecycle hook that initializes the component and sets up page data.
+ * @method ngOnChanges - Handles input property changes to update page data when needed.
+ * @method handleClick - Asynchronously handles page button clicks and manages breakout room navigation logic.
+ * @method getPageStyle - Returns specific styles for a page button based on its active or inactive state.
+ * @method isBreakoutRoom - Checks if a page represents a breakout room.
+ * @method getDisplayItem - Returns the display label for a page, accounting for breakout room naming conventions.
+ *
+ * @dependencies
+ * This component requires an external pagination parameters configuration (`PaginationParameters`) and access to the `GeneratePageContent` service for managing dynamic content loading.
  */
 export declare class Pagination implements OnInit, OnChanges {
     private generatePageContentService;

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

@@ -9,38 +9,32 @@ export interface SubAspectComponentOptions {
 }
 export type SubAspectComponentType = (options: SubAspectComponentOptions) => HTMLElement;
 /**
- * @fileoverview SubAspectComponent is an Angular component that displays a sub-aspect of a media element.
- * It adjusts its size and visibility based on input properties and window events.
+ * SubAspectComponent is an Angular component that displays a sub-aspect of a media element with customizable dimensions and background color.
+ * The component adapts its size and visibility based on the provided properties and listens for window resize and orientation change events.
  *
- * @component
  * @selector app-sub-aspect-component
  * @standalone true
  * @imports CommonModule
  *
- * @template
- * <div *ngIf="showControls" [ngStyle]="{ position: 'absolute', bottom: '0', margin: '0', backgroundColor: backgroundColor, height: aspectStyles.height + 'px', width: aspectStyles.width + 'px' }">
- *   <ng-content></ng-content>
- * </div>
+ * @example
+ * ```html
+ * <app-sub-aspect-component [backgroundColor]="'blue'" [showControls]="true" [containerWidthFraction]="0.8"></app-sub-aspect-component>
+ * ```
  *
- * @styles []
+ * @input {string} backgroundColor - The background color of the component. Default is 'transparent'.
+ * @input {boolean} showControls - Determines if controls are shown within the component. Default is true.
+ * @input {number} containerWidthFraction - Fraction of the window width for the component width. Default is 1.
+ * @input {number} containerHeightFraction - Fraction of the window height for the component height. Default is 1.
+ * @input {number} defaultFractionSub - The default fraction for the sub-aspect height. Default is 0.0.
  *
- * @class SubAspectComponent
- * @implements OnInit, OnDestroy, OnChanges
+ * @property {object} aspectStyles - Contains calculated styles for the component's height and width.
+ * @property {number} aspectStyles.height - Calculated height of the component.
+ * @property {number} aspectStyles.width - Calculated width of the component.
  *
- * @property {string} backgroundColor - The background color of the component. Default is 'transparent'.
- * @property {boolean} showControls - Determines whether the controls are shown. Default is true.
- * @property {number} containerWidthFraction - The fraction of the container's width. Default is 1.
- * @property {number} containerHeightFraction - The fraction of the container's height. Default is 1.
- * @property {number} defaultFractionSub - The default fraction for the sub-aspect. Default is 0.0.
- * @property {object} aspectStyles - The styles for the aspect, including height and width.
- * @property {number} aspectStyles.height - The height of the aspect.
- * @property {number} aspectStyles.width - The width of the aspect.
- * @property {number} subAspectFraction - The fraction of the sub-aspect.
- *
- * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized. Adds event listeners for window resize and orientation change.
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes. Updates aspect styles if relevant properties change.
- * @method ngOnDestroy - Lifecycle hook that is called just before the component is destroyed. Removes event listeners for window resize and orientation change.
- * @method updateAspectStyles - Updates the aspect styles based on the current window size and input properties.
+ * @method ngOnInit - Initializes the component and adds event listeners for responsive adjustments.
+ * @method ngOnChanges - Updates the aspect styles when any of the input properties change.
+ * @method ngOnDestroy - Removes event listeners when the component is destroyed.
+ * @method updateAspectStyles - Calculates and applies updated styles based on the window size and input properties.
  */
 export declare class SubAspectComponent implements OnInit, OnDestroy, OnChanges {
     backgroundColor: string;