mediasfu-angular 2.2.1 → 2.2.2

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

@@ -1,4 +1,4 @@
-import { OnChanges, SimpleChanges } from '@angular/core';
+import { OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface AlertComponentOptions {
     visible: boolean;
@@ -7,40 +7,94 @@ export interface AlertComponentOptions {
     duration?: number;
     onHide?: () => void;
     textColor?: string;
+    alertStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type AlertComponentType = (options: AlertComponentOptions) => HTMLElement;
 /**
- * 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.
+ * AlertComponent - Toast-style notification component for success and error messages
  *
- * @selector app-alert-component
- * @standalone true
- * @imports CommonModule
+ * @component
+ * @description
+ * Displays toast-style alert messages with automatic dismiss timer and manual close option.
+ * Supports three levels of customization:
+ * 1. **Basic Usage**: Use default alert styles with custom message and type
+ * 2. **Style Customization**: Override alert appearance with alertStyle prop
+ * 3. **Full Override**: Provide a custom template via customTemplate for complete control
  *
- * @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.
+ * Key Features:
+ * - Auto-dismiss with configurable duration
+ * - Success/danger type indicators
+ * - Manual dismiss capability
+ * - Customizable text color and styling
+ * - Full template override support
  *
- * @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.
+ * @example
+ * Basic Usage:
+ * ```html
+ * <app-alert-component
+ *   [visible]="showAlert"
+ *   [message]="'Operation completed successfully!'"
+ *   [type]="'success'"
+ *   [duration]="5000"
+ *   [onHide]="handleAlertClose">
+ * </app-alert-component>
+ * ```
  *
  * @example
+ * Style Customization:
  * ```html
  * <app-alert-component
- *  [visible]="showAlert"
- * [message]="alertMessage"
- * [type]="alertType"
- * [duration]="5000"
- * [textColor]="alertTextColor"
- * [onHide]="onAlertHide">
+ *   [visible]="showError"
+ *   [message]="'An error occurred'"
+ *   [type]="'danger'"
+ *   [textColor]="'white'"
+ *   [alertStyle]="{
+ *     backgroundColor: '#dc3545',
+ *     border: '2px solid #c82333',
+ *     borderRadius: '8px',
+ *     padding: '15px 20px'
+ *   }"
+ *   [onHide]="handleErrorClose">
  * </app-alert-component>
  * ```
- **/
+ *
+ * @example
+ * Custom Template Override:
+ * ```html
+ * <app-alert-component
+ *   [visible]="showAlert"
+ *   [message]="alertMessage"
+ *   [type]="alertType"
+ *   [customTemplate]="customAlertTemplate"
+ *   [onHide]="handleAlertClose">
+ * </app-alert-component>
+ *
+ * <ng-template #customAlertTemplate let-visible="visible" let-message="message" let-type="type">
+ *   <div class="custom-alert" [class.success]="type === 'success'" [class.danger]="type === 'danger'">
+ *     <i [class]="type === 'success' ? 'fa fa-check-circle' : 'fa fa-exclamation-triangle'"></i>
+ *     <span>{{ message }}</span>
+ *     <button (click)="handleAlertClose()">×</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @selector app-alert-component
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @input visible - Whether the alert is currently visible. Default: `false`
+ * @input message - The message text to display in the alert. Default: `''`
+ * @input type - Alert type ('success' or 'danger') affecting color scheme. Default: `'success'`
+ * @input duration - Auto-dismiss duration in milliseconds. Default: `4000`
+ * @input textColor - Color of the message text. Default: `'black'`
+ * @input onHide - Callback function invoked when alert is dismissed (auto or manual). Default: `undefined`
+ * @input alertStyle - Custom CSS styles to apply to the alert container. Default: `undefined`
+ * @input customTemplate - Custom TemplateRef to completely replace default alert template. Default: `undefined`
+ *
+ * @method ngOnChanges - Handles input changes and triggers auto-dismiss timer when visible
+ * @method handlePress - Manually dismisses the alert by invoking onHide callback
+ */
 export declare class AlertComponent implements OnChanges {
     visible: boolean;
     message: string;
@@ -48,9 +102,11 @@ export declare class AlertComponent implements OnChanges {
     duration: number;
     textColor: string;
     onHide: () => void;
+    alertStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
     alertType: 'success' | 'danger';
     ngOnChanges(changes: SimpleChanges): void;
     handlePress(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "app-alert-component", never, { "visible": { "alias": "visible"; "required": false; }; "message": { "alias": "message"; "required": false; }; "type": { "alias": "type"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "onHide": { "alias": "onHide"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "app-alert-component", never, { "visible": { "alias": "visible"; "required": false; }; "message": { "alias": "message"; "required": false; }; "type": { "alias": "type"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "onHide": { "alias": "onHide"; "required": false; }; "alertStyle": { "alias": "alertStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -1,31 +1,100 @@
-import { Injector, OnChanges, SimpleChanges } from '@angular/core';
+import { Injector, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface AudioGridOptions {
     componentsToRender: {
         component: any;
         inputs?: any;
     }[];
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type AudioGridType = (options: AudioGridOptions) => HTMLElement;
 /**
- * AudioGrid component renders a dynamic grid of components with individually provided inputs.
+ * @component AudioGrid
+ *
+ * A dynamic grid component specifically designed for rendering audio-only participants with customizable
+ * layout and styling. Supports full template customization for complete control over participant presentation.
+ *
+ * @description
+ * AudioGrid provides three levels of customization to display audio-only participants:
+ *
+ * 1. **Basic Usage**: Use the default vertical stacked layout for audio participants
+ * 2. **Style Customization**: Apply custom styles via `containerStyle` to modify grid appearance
+ * 3. **Full Template Override**: Provide a custom `ng-template` via `customTemplate` for complete control
+ *
+ * **Key Features:**
+ * - Dynamic rendering of audio-only participant components
+ * - Efficient injector caching for performance optimization
+ * - Automatic cache clearing on component changes to prevent memory leaks
+ * - Customizable container styling
+ * - Full template override support for custom layouts
  *
  * @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
+ * Basic Usage:
+ * ```html
+ * <app-audio-grid
+ *   [componentsToRender]="[
+ *     { component: AudioCard, inputs: { name: 'John Doe', audioLevel: 0.8 } },
+ *     { component: AudioCard, inputs: { name: 'Jane Smith', audioLevel: 0.5 } }
+ *   ]">
+ * </app-audio-grid>
+ * ```
  *
  * @example
+ * Style Customization:
  * ```html
- * <app-audio-grid [componentsToRender]="[{ component: AudioCard, inputs: { name: 'Participant 1' } }]"></app-audio-grid>
+ * <app-audio-grid
+ *   [componentsToRender]="audioParticipants"
+ *   [containerStyle]="{
+ *     display: 'flex',
+ *     flexWrap: 'wrap',
+ *     gap: '12px',
+ *     padding: '20px',
+ *     backgroundColor: '#f5f5f5',
+ *     borderRadius: '8px'
+ *   }">
+ * </app-audio-grid>
  * ```
+ *
+ * @example
+ * Custom Template Override:
+ * ```typescript
+ * // In your component
+ * @Component({
+ *   template: `
+ *     <app-audio-grid
+ *       [componentsToRender]="audioParticipants"
+ *       [customTemplate]="customAudioLayout">
+ *     </app-audio-grid>
+ *
+ *     <ng-template #customAudioLayout let-gridData>
+ *       <div class="custom-audio-grid">
+ *         <h3>Audio Participants ({{ gridData.componentsToRender.length }})</h3>
+ *         <div class="audio-list">
+ *           <div *ngFor="let item of gridData.componentsToRender; let i = index"
+ *                class="audio-item"
+ *                [class.active]="i === activeIndex">
+ *             <span class="index">{{ i + 1 }}</span>
+ *             <ng-container *ngComponentOutlet="item.component; injector: createInjector(item.inputs)"></ng-container>
+ *           </div>
+ *         </div>
+ *       </div>
+ *     </ng-template>
+ *   `
+ * })
+ * ```
+ *
+ * @input componentsToRender - Array of components with optional inputs to render in the grid
+ * @input containerStyle - Custom CSS styles for the grid container
+ * @input customTemplate - Custom ng-template for complete grid layout override
+ *
+ * @method ngOnChanges - Clears the injector cache on changes to componentsToRender
+ * @method createInjector - Creates and caches an injector with specific inputs for each component
+ * @method clearInjectorCache - Clears the cache to avoid memory leaks and ensure updated injectors
  **/
 export declare class AudioGrid implements OnChanges {
     private injector;
@@ -33,11 +102,14 @@ export declare class AudioGrid implements OnChanges {
         component: any;
         inputs?: any;
     }[];
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
     private injectorCache;
     constructor(injector: Injector);
+    get computedContainerStyle(): any;
     ngOnChanges(changes: SimpleChanges): void;
     createInjector(inputs: any): Injector;
     private clearInjectorCache;
     static ɵfac: i0.ɵɵFactoryDeclaration<AudioGrid, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AudioGrid, "app-audio-grid", never, { "componentsToRender": { "alias": "componentsToRender"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AudioGrid, "app-audio-grid", never, { "componentsToRender": { "alias": "componentsToRender"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -1,4 +1,4 @@
-import { OnInit, OnChanges, SimpleChanges, Injector } from '@angular/core';
+import { OnInit, OnChanges, SimpleChanges, Injector, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface FlexibleGridOptions {
     customWidth: number;
@@ -10,42 +10,111 @@ export interface FlexibleGridOptions {
         inputs?: any;
     }[];
     backgroundColor?: string;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type FlexibleGridType = (options: FlexibleGridOptions) => HTMLElement;
 /**
- * FlexibleGrid is a dynamic, customizable grid component that renders a specified number of rows and columns,
- * with each grid item containing a provided component.
+ * @component FlexibleGrid
+ *
+ * A dynamic, highly customizable grid component that renders a specified number of rows and columns,
+ * with each grid item containing a provided component. Supports full template customization and style overrides.
+ *
+ * @description
+ * FlexibleGrid offers three levels of customization to fit your application's needs:
+ *
+ * 1. **Basic Usage**: Use the default grid layout with configurable rows, columns, and components
+ * 2. **Style Customization**: Apply custom styles via `containerStyle` to modify grid appearance
+ * 3. **Full Template Override**: Provide a custom `ng-template` via `customTemplate` for complete control
+ *
+ * **Key Features:**
+ * - Dynamic grid generation based on rows and columns
+ * - Flexible component rendering with input injection
+ * - Automatic grid recalculation on property changes
+ * - Customizable grid item dimensions and background colors
+ * - Full template override support for custom layouts
  *
  * @selector app-flexible-grid
  * @standalone true
  * @imports CommonModule
  *
- * @inputs
- * - `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()`: 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.
- *
  * @example
+ * Basic Usage:
  * ```html
  * <app-flexible-grid
- *   [customWidth]="100"
- *   [customHeight]="100"
+ *   [customWidth]="200"
+ *   [customHeight]="150"
  *   [rows]="2"
  *   [columns]="3"
- *   [componentsToRender]="[{ component: MyComponent, inputs: { prop: 'value' } }]"
- *   backgroundColor="lightgrey"
- * ></app-flexible-grid>
+ *   [componentsToRender]="videoComponents"
+ *   backgroundColor="#f0f0f0">
+ * </app-flexible-grid>
  * ```
+ *
+ * @example
+ * Style Customization:
+ * ```html
+ * <app-flexible-grid
+ *   [customWidth]="250"
+ *   [customHeight]="200"
+ *   [rows]="3"
+ *   [columns]="4"
+ *   [componentsToRender]="participantComponents"
+ *   [containerStyle]="{
+ *     padding: '20px',
+ *     borderRadius: '12px',
+ *     boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
+ *   }"
+ *   backgroundColor="white">
+ * </app-flexible-grid>
+ * ```
+ *
+ * @example
+ * Custom Template Override:
+ * ```typescript
+ * // In your component
+ * @Component({
+ *   template: `
+ *     <app-flexible-grid
+ *       [customWidth]="300"
+ *       [customHeight]="200"
+ *       [rows]="2"
+ *       [columns]="2"
+ *       [componentsToRender]="components"
+ *       [customTemplate]="customGridTemplate">
+ *     </app-flexible-grid>
+ *
+ *     <ng-template #customGridTemplate let-gridData>
+ *       <div class="my-custom-grid">
+ *         <h3>Custom Grid Layout</h3>
+ *         <div class="grid-container"
+ *              [style.grid-template-columns]="'repeat(' + gridData.columns + ', 1fr)'">
+ *           <div *ngFor="let row of gridData.grid" class="grid-row">
+ *             <div *ngFor="let component of row" class="grid-item">
+ *               <ng-container *ngComponentOutlet="component.component"></ng-container>
+ *             </div>
+ *           </div>
+ *         </div>
+ *       </div>
+ *     </ng-template>
+ *   `
+ * })
+ * ```
+ *
+ * @input customWidth - Width for each grid item in pixels. Default: 0
+ * @input customHeight - Height for each grid item in pixels. Default: 0
+ * @input rows - Number of rows in the grid. Default: 0
+ * @input columns - Number of columns in the grid. Default: 0
+ * @input componentsToRender - Array of components to render in the grid, each with optional inputs
+ * @input backgroundColor - Background color for each grid item. Default: 'transparent'
+ * @input containerStyle - Custom CSS styles for the grid container
+ * @input customTemplate - Custom ng-template for complete grid layout override
+ *
+ * @method ngOnInit - Initializes and generates the grid on component load
+ * @method ngOnChanges - Regenerates the grid if columns, componentsToRender, or rows change
+ * @method generateGrid - Builds the grid based on the row, column, and component configurations
+ * @method getGridItemStyle - Returns a style object for each grid item
+ * @method createInjector - Creates a cached injector for each component to support dynamic inputs
  **/
 export declare class FlexibleGrid implements OnInit, OnChanges {
     private injector;
@@ -58,22 +127,16 @@ export declare class FlexibleGrid implements OnInit, OnChanges {
         inputs?: any;
     }[];
     backgroundColor: string;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
     grid: any[][];
     private injectorCache;
     constructor(injector: Injector);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     generateGrid(): void;
-    getGridItemStyle(): {
-        flex: number;
-        width: string;
-        height: string;
-        backgroundColor: string;
-        margin: string;
-        padding: number;
-        borderRadius: string;
-    };
+    getGridItemStyle(): any;
     createInjector(inputs: any): Injector;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlexibleGrid, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FlexibleGrid, "app-flexible-grid", never, { "customWidth": { "alias": "customWidth"; "required": false; }; "customHeight": { "alias": "customHeight"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "componentsToRender": { "alias": "componentsToRender"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexibleGrid, "app-flexible-grid", never, { "customWidth": { "alias": "customWidth"; "required": false; }; "customHeight": { "alias": "customHeight"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "componentsToRender": { "alias": "componentsToRender"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -1,8 +1,14 @@
+import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface LoadingModalOptions {
     isVisible: boolean;
     backgroundColor?: string;
     displayColor?: string;
+    overlayStyle?: Partial<CSSStyleDeclaration>;
+    contentStyle?: Partial<CSSStyleDeclaration>;
+    spinnerStyle?: Partial<CSSStyleDeclaration>;
+    textStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type LoadingModalType = (options: LoadingModalOptions) => HTMLElement;
 /**
@@ -42,31 +48,15 @@ export declare class LoadingModal {
     isVisible: boolean;
     backgroundColor?: string;
     displayColor?: string;
-    get modalContainerStyle(): {
-        position: string;
-        top: string;
-        left: string;
-        width: string;
-        height: string;
-        backgroundColor: string | undefined;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        zIndex: string;
-    };
-    get modalContentStyle(): {
-        backgroundColor: string | undefined;
-        borderRadius: string;
-        padding: string;
-        maxWidth: string;
-        textAlign: string;
-    };
-    get spinnerContainerStyle(): {
-        marginBottom: string;
-    };
-    get loadingTextStyle(): {
-        color: string | undefined;
-    };
+    overlayStyle?: Partial<CSSStyleDeclaration>;
+    contentStyle?: Partial<CSSStyleDeclaration>;
+    spinnerStyle?: Partial<CSSStyleDeclaration>;
+    textStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
+    get modalContainerStyle(): any;
+    get modalContentStyle(): any;
+    get spinnerContainerStyle(): any;
+    get loadingTextStyle(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingModal, "app-loading-modal", never, { "isVisible": { "alias": "isVisible"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "displayColor": { "alias": "displayColor"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingModal, "app-loading-modal", never, { "isVisible": { "alias": "isVisible"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "displayColor": { "alias": "displayColor"; "required": false; }; "overlayStyle": { "alias": "overlayStyle"; "required": false; }; "contentStyle": { "alias": "contentStyle"; "required": false; }; "spinnerStyle": { "alias": "spinnerStyle"; "required": false; }; "textStyle": { "alias": "textStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -1,4 +1,4 @@
-import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface MainAspectComponentOptions {
     backgroundColor?: string;
@@ -9,6 +9,8 @@ export interface MainAspectComponentOptions {
     updateIsWideScreen: (isWideScreen: boolean) => void;
     updateIsMediumScreen: (isMediumScreen: boolean) => void;
     updateIsSmallScreen: (isSmallScreen: boolean) => void;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type MainAspectComponentType = (options: MainAspectComponentOptions) => HTMLElement;
 /**
@@ -68,6 +70,8 @@ export declare class MainAspectComponent implements OnInit, OnDestroy, OnChanges
     updateIsWideScreen: (isWideScreen: boolean) => void;
     updateIsMediumScreen: (isMediumScreen: boolean) => void;
     updateIsSmallScreen: (isSmallScreen: boolean) => void;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
     aspectStyles: {
         [key: string]: any;
     };
@@ -76,5 +80,5 @@ export declare class MainAspectComponent implements OnInit, OnDestroy, OnChanges
     ngOnDestroy(): void;
     private updateAspectStyles;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainAspectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainAspectComponent, "app-main-aspect-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "showControls": { "alias": "showControls"; "required": false; }; "containerWidthFraction": { "alias": "containerWidthFraction"; "required": false; }; "containerHeightFraction": { "alias": "containerHeightFraction"; "required": false; }; "defaultFraction": { "alias": "defaultFraction"; "required": false; }; "updateIsWideScreen": { "alias": "updateIsWideScreen"; "required": false; }; "updateIsMediumScreen": { "alias": "updateIsMediumScreen"; "required": false; }; "updateIsSmallScreen": { "alias": "updateIsSmallScreen"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainAspectComponent, "app-main-aspect-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "showControls": { "alias": "showControls"; "required": false; }; "containerWidthFraction": { "alias": "containerWidthFraction"; "required": false; }; "containerHeightFraction": { "alias": "containerHeightFraction"; "required": false; }; "defaultFraction": { "alias": "defaultFraction"; "required": false; }; "updateIsWideScreen": { "alias": "updateIsWideScreen"; "required": false; }; "updateIsMediumScreen": { "alias": "updateIsMediumScreen"; "required": false; }; "updateIsSmallScreen": { "alias": "updateIsSmallScreen"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,4 +1,4 @@
-import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface MainContainerComponentOptions {
     backgroundColor?: string;
@@ -9,6 +9,8 @@ export interface MainContainerComponentOptions {
     marginTop?: number;
     marginBottom?: number;
     padding?: number;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type MainContainerComponentType = (options: MainContainerComponentOptions) => HTMLElement;
 /**
@@ -63,6 +65,8 @@ export declare class MainContainerComponent implements OnInit, OnDestroy, OnChan
     marginTop: number;
     marginBottom: number;
     padding: number;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
     containerStyles: {
         [key: string]: any;
     };
@@ -71,5 +75,5 @@ export declare class MainContainerComponent implements OnInit, OnDestroy, OnChan
     ngOnDestroy(): void;
     updateContainerStyles: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainContainerComponent, "app-main-container-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "containerWidthFraction": { "alias": "containerWidthFraction"; "required": false; }; "containerHeightFraction": { "alias": "containerHeightFraction"; "required": false; }; "marginLeft": { "alias": "marginLeft"; "required": false; }; "marginRight": { "alias": "marginRight"; "required": false; }; "marginTop": { "alias": "marginTop"; "required": false; }; "marginBottom": { "alias": "marginBottom"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainContainerComponent, "app-main-container-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "containerWidthFraction": { "alias": "containerWidthFraction"; "required": false; }; "containerHeightFraction": { "alias": "containerHeightFraction"; "required": false; }; "marginLeft": { "alias": "marginLeft"; "required": false; }; "marginRight": { "alias": "marginRight"; "required": false; }; "marginTop": { "alias": "marginTop"; "required": false; }; "marginBottom": { "alias": "marginBottom"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface MainGridComponentOptions {
     backgroundColor?: string;
@@ -8,6 +9,8 @@ export interface MainGridComponentOptions {
     timeBackgroundColor?: string;
     showTimer?: boolean;
     meetingProgressTime?: string;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
 }
 export type MainGridComponentType = (options: MainGridComponentOptions) => HTMLElement;
 /**
@@ -64,18 +67,9 @@ export declare class MainGridComponent {
     timeBackgroundColor: string;
     showTimer: boolean;
     meetingProgressTime: string;
-    get maingridContainerStyle(): {
-        display: string;
-        backgroundColor: string;
-        height: string;
-        width: string;
-        flexDirection: string;
-        justifyContent: string;
-        alignItems: string;
-        borderStyle: string;
-        borderColor: string;
-        borderWidth: string;
-    };
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: TemplateRef<any>;
+    get maingridContainerStyle(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainGridComponent, "app-main-grid-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "mainSize": { "alias": "mainSize"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "showAspect": { "alias": "showAspect"; "required": false; }; "timeBackgroundColor": { "alias": "timeBackgroundColor"; "required": false; }; "showTimer": { "alias": "showTimer"; "required": false; }; "meetingProgressTime": { "alias": "meetingProgressTime"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainGridComponent, "app-main-grid-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "mainSize": { "alias": "mainSize"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "showAspect": { "alias": "showAspect"; "required": false; }; "timeBackgroundColor": { "alias": "timeBackgroundColor"; "required": false; }; "showTimer": { "alias": "showTimer"; "required": false; }; "meetingProgressTime": { "alias": "meetingProgressTime"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, ["*"], true, never>;
 }