mediasfu-angular 1.0.0

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

@@ -0,0 +1,88 @@
+import { Injector, Type } from '@angular/core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import * as i0 from "@angular/core";
+export interface CustomComponent {
+    component: Type<any>;
+    injector: Injector;
+}
+export interface AltButton {
+    name?: string;
+    icon?: IconDefinition;
+    alternateIcon?: IconDefinition;
+    onPress?: () => void;
+    active?: boolean | (() => boolean);
+    activeColor?: string | (() => string);
+    inActiveColor?: string | (() => string);
+    color?: string;
+    backgroundColor?: {
+        default?: string;
+    };
+    customComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    iconComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    alternateIconComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    show?: boolean | (() => boolean);
+}
+export interface ControlButtonsAltComponentOptions {
+    buttons: AltButton[];
+    position?: 'left' | 'right' | 'middle';
+    location?: 'top' | 'bottom' | 'center';
+    direction?: 'horizontal' | 'vertical';
+    buttonsContainerStyle?: Partial<CSSStyleDeclaration>;
+    alternateIconComponent?: HTMLElement | CustomComponent;
+    iconComponent?: HTMLElement | CustomComponent;
+    showAspect?: boolean;
+}
+export type ControlButtonsAltComponentType = (options: ControlButtonsAltComponentOptions) => HTMLElement;
+export declare class ControlButtonsAltComponent {
+    buttons: AltButton[];
+    position: 'left' | 'right' | 'middle';
+    location: 'top' | 'bottom' | 'center';
+    direction: 'horizontal' | 'vertical';
+    buttonsContainerStyle: any;
+    showAspect: boolean;
+    getAlignmentStyle(): any;
+    getContainerStyle(): any;
+    getButtonStyle(button: AltButton): {
+        flexDirection?: string | undefined;
+        backgroundColor: string;
+        display: string;
+        alignItems: string;
+        padding: string;
+        borderRadius: string;
+        marginLeft: string;
+        marginRight: string;
+        cursor: string;
+    };
+    getTextStyle(button: AltButton): {
+        color: string;
+        fontSize: string;
+        marginTop: string;
+    };
+    isCustomComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is CustomComponent;
+    isFunctionComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is () => HTMLElement | CustomComponent;
+    styles: {
+        container: {
+            marginTop: string;
+            marginBottom: string;
+            zIndex: number;
+        };
+        buttonContainer: {
+            display: string;
+            alignItems: string;
+            padding: string;
+            borderRadius: string;
+            marginLeft: string;
+            marginRight: string;
+            cursor: string;
+        };
+        verticalButton: {
+            flexDirection: string;
+        };
+        buttonText: {
+            fontSize: string;
+            marginTop: string;
+        };
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<ControlButtonsAltComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ControlButtonsAltComponent, "app-control-buttons-alt-component", never, { "buttons": { "alias": "buttons"; "required": false; }; "position": { "alias": "position"; "required": false; }; "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "buttonsContainerStyle": { "alias": "buttonsContainerStyle"; "required": false; }; "showAspect": { "alias": "showAspect"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,52 @@
+import { Injector, Type } from '@angular/core';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import * as i0 from "@angular/core";
+export interface CustomComponent {
+    component: Type<any>;
+    injector: Injector;
+}
+export interface Button {
+    name?: string;
+    icon?: IconDefinition;
+    alternateIcon?: IconDefinition;
+    onPress?: () => void;
+    active?: boolean | (() => boolean);
+    activeColor?: string | (() => string);
+    inActiveColor?: string | (() => string);
+    color?: string;
+    backgroundColor?: {
+        default?: string;
+    };
+    customComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    iconComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    alternateIconComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    disabled?: boolean | (() => boolean);
+    show?: boolean | (() => boolean);
+}
+export interface ControlButtonsComponentOptions {
+    buttons: Button[];
+    buttonColor?: string;
+    buttonBackgroundColor?: {
+        default?: string;
+        pressed?: string;
+    };
+    alignment?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    vertical?: boolean;
+    buttonsContainerStyle?: Partial<CSSStyleDeclaration>;
+    alternateIconComponent?: HTMLElement | CustomComponent;
+}
+export type ControlButtonsComponentType = (options: ControlButtonsComponentOptions) => HTMLElement;
+export declare class ControlButtonsComponent {
+    buttons: Button[];
+    buttonColor: string;
+    buttonBackgroundColor: any;
+    alignment: string;
+    vertical: boolean;
+    buttonsContainerStyle: any;
+    getAlignmentStyle(): any;
+    mergeStyles(...styles: any[]): any;
+    isCustomComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is CustomComponent;
+    isFunctionComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is () => HTMLElement | CustomComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ControlButtonsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ControlButtonsComponent, "app-control-buttons-component", never, { "buttons": { "alias": "buttons"; "required": false; }; "buttonColor": { "alias": "buttonColor"; "required": false; }; "buttonBackgroundColor": { "alias": "buttonBackgroundColor"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "buttonsContainerStyle": { "alias": "buttonsContainerStyle"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,100 @@
+import { Injector, Type } from '@angular/core';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import * as i0 from "@angular/core";
+export interface CustomComponent {
+    component: Type<any>;
+    injector: Injector;
+}
+export interface ButtonTouch {
+    name?: string;
+    icon?: IconDefinition;
+    alternateIcon?: any;
+    onPress?: () => void;
+    backgroundColor?: {
+        default?: string;
+    };
+    active?: boolean | (() => boolean);
+    alternateIconComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    iconComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    customComponent?: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent);
+    color?: string;
+    activeColor?: string | (() => string);
+    inActiveColor?: string | (() => string);
+    show?: boolean | (() => boolean);
+    disabled?: boolean | (() => boolean);
+}
+export interface ControlButtonsComponentTouchOptions {
+    buttons: ButtonTouch[];
+    position?: 'left' | 'right' | 'middle';
+    location?: 'top' | 'bottom' | 'center';
+    direction?: 'horizontal' | 'vertical';
+    buttonsContainerStyle?: Partial<CSSStyleDeclaration>;
+    showAspect?: boolean;
+}
+export type ControlButtonsComponentTouchType = (options: ControlButtonsComponentTouchOptions) => HTMLElement;
+/**
+ * ControlButtonsComponentTouch is an Angular component that displays a set of control buttons.
+ * The buttons can be customized with various styles, icons, and actions.
+ *
+ * @component
+ * @selector app-control-buttons-component-touch
+ * @standalone true
+ * @imports [CommonModule, FontAwesomeModule]
+ *
+ * @template
+ * The template includes a container div that holds the buttons. Each button can display an icon,
+ * a custom component, or a name. The styles and visibility of the buttons are controlled by the
+ * component's inputs.
+ *
+ * @styles
+ * The host element is styled to be a flex container centered both horizontally and vertically.
+ *
+ * @class ControlButtonsComponentTouch
+ *
+ * @property {any[]} buttons - An array of button configurations. Each button can have properties like
+ * `show`, `backgroundColor`, `onPress`, `icon`, `alternateIcon`, `active`, `activeColor`, `inActiveColor`,
+ * `customComponent`, and `name`.
+ *
+ * @property {string} position - The horizontal alignment of the buttons container. Can be 'left', 'right', or 'middle'.
+ * Default is 'left'.
+ *
+ * @property {string} location - The vertical alignment of the buttons container. Can be 'top', 'bottom', or 'center'.
+ * Default is 'top'.
+ *
+ * @property {string} direction - The direction of the buttons layout. Can be 'horizontal' or 'vertical'.
+ * Default is 'horizontal'.
+ *
+ * @property {any} buttonsContainerStyle - Additional styles for the buttons container.
+ *
+ * @property {boolean} showAspect - A flag to control the visibility of the buttons container.
+ *
+ * @method getAlignmentStyle
+ * Returns the alignment styles based on the `position`, `location`, and `direction` inputs.
+ *
+ * @method mergeStyles
+ * Merges multiple style objects into one.
+ *
+ * @example
+ * <app-control-buttons-component-touch
+ *   [buttons]="buttonsArray"
+ *   position="right"
+ *   location="bottom"
+ *   direction="vertical"
+ *   [buttonsContainerStyle]="customStyles"
+ *   [showAspect]="true">
+ * </app-control-buttons-component-touch>
+ */
+export declare class ControlButtonsComponentTouch {
+    buttons: ButtonTouch[];
+    position: string;
+    location: string;
+    direction: string;
+    buttonsContainerStyle: any;
+    showAspect: boolean;
+    getAlignmentStyle(): any;
+    mergeStyles(...styles: any[]): any;
+    isCustomComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is CustomComponent;
+    isFunctionComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is () => HTMLElement | CustomComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ControlButtonsComponentTouch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ControlButtonsComponentTouch, "app-control-buttons-component-touch", never, { "buttons": { "alias": "buttons"; "required": false; }; "position": { "alias": "position"; "required": false; }; "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "buttonsContainerStyle": { "alias": "buttonsContainerStyle"; "required": false; }; "showAspect": { "alias": "showAspect"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,10 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import * as i0 from "@angular/core";
+export declare class MenuParticipantsWidget {
+    icon: IconDefinition;
+    iconColor: string;
+    participantsCounter: number;
+    constructor(icon: IconDefinition, iconColor: string, participantsCounter: number);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuParticipantsWidget, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuParticipantsWidget, "app-menu-participants-widget", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "participantsCounter": { "alias": "participantsCounter"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,18 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import * as i0 from "@angular/core";
+interface RecordButton {
+    icon?: IconDefinition;
+    active?: boolean;
+    onPress?: () => void;
+    activeColor?: string;
+    inActiveColor?: string;
+    text?: string;
+}
+export declare class MenuRecordWidget {
+    buttons: RecordButton[];
+    direction: 'horizontal' | 'vertical';
+    constructor(buttons: RecordButton[], direction: 'horizontal' | 'vertical');
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuRecordWidget, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuRecordWidget, "app-menu-record-widget", never, {}, {}, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import * as i0 from "@angular/core";
+export declare class MenuWidget {
+    icon: IconDefinition;
+    iconColor: string;
+    badgeValue: number;
+    showBadge: boolean;
+    constructor(icon: IconDefinition, iconColor: string, badgeValue: number, showBadge: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuWidget, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuWidget, "app-menu-widget", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "badgeValue": { "alias": "badgeValue"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,11 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import * as i0 from "@angular/core";
+export declare class MessageWidget {
+    icon: IconDefinition;
+    iconColor: string;
+    badgeValue: number;
+    showBadge: boolean;
+    constructor(icon: IconDefinition, iconColor: string, badgeValue: number, showBadge: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageWidget, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageWidget, "app-message-widget", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "badgeValue": { "alias": "badgeValue"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class RecordTimerWidget {
+    recordingProgressTime: string;
+    constructor(recordingProgressTime: string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RecordTimerWidget, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RecordTimerWidget, "app-record-timer-widget", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class ScreenShareWidget {
+    private injectedDisabled;
+    disabled: boolean;
+    faDesktop: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faBan: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    computedDisabled: boolean;
+    constructor(injectedDisabled: boolean);
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScreenShareWidget, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScreenShareWidget, "app-screen-share-button", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,70 @@
+import { OnInit, OnChanges, SimpleChanges, Injector } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface FlexibleGridOptions {
+    customWidth: number;
+    customHeight: number;
+    rows: number;
+    columns: number;
+    componentsToRender: {
+        component: any;
+        inputs?: any;
+    }[];
+    backgroundColor?: string;
+}
+export type FlexibleGridType = (options: FlexibleGridOptions) => HTMLElement;
+/**
+ * @component FlexibleGrid
+ *
+ * A flexible grid component that dynamically renders a grid of components based on the provided inputs.
+ *
+ * @selector app-flexible-grid
+ *
+ * @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'.
+ *
+ * @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`.
+ *
+ * @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.
+ */
+export declare class FlexibleGrid implements OnInit, OnChanges {
+    private injector;
+    customWidth: number;
+    customHeight: number;
+    rows: number;
+    columns: number;
+    componentsToRender: {
+        component: any;
+        inputs?: any;
+    }[];
+    backgroundColor: string;
+    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;
+    };
+    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>;
+}

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

@@ -0,0 +1,97 @@
+import { OnChanges, OnInit, SimpleChanges, Injector } from '@angular/core';
+import { CustomMediaComponent } from '../../../@types/types';
+import * as i0 from "@angular/core";
+export interface FlexibleVideoOptions {
+    customWidth: number;
+    customHeight: number;
+    rows: number;
+    columns: number;
+    componentsToRender: CustomMediaComponent[];
+    showAspect?: boolean;
+    backgroundColor?: string;
+    Screenboard?: CustomMediaComponent;
+    annotateScreenStream?: boolean;
+    localStreamScreen: MediaStream | null;
+}
+export type FlexibleVideoType = (options: FlexibleVideoOptions) => HTMLElement;
+/**
+ * Component for displaying a flexible video grid.
+ *
+ * @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>
+ *
+ * @class FlexibleVideo
+ * @implements OnInit, OnChanges
+ *
+ * @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.
+ */
+export declare class FlexibleVideo implements OnInit, OnChanges {
+    private injector;
+    customWidth: number;
+    customHeight: number;
+    rows: number;
+    columns: number;
+    componentsToRender: CustomMediaComponent[];
+    showAspect: boolean;
+    backgroundColor?: string;
+    Screenboard?: CustomMediaComponent;
+    annotateScreenStream?: boolean;
+    localStreamScreen?: MediaStream;
+    key: number;
+    cardWidth: number;
+    cardHeight: number;
+    cardTop: number;
+    cardLeft: number;
+    canvasLeft: number;
+    grid: any[][];
+    private injectorCache;
+    constructor(injector: Injector);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    generateGrid(): void;
+    createInjector(inputs: any): Injector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexibleVideo, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexibleVideo, "app-flexible-video", 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; }; "showAspect": { "alias": "showAspect"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "Screenboard": { "alias": "Screenboard"; "required": false; }; "annotateScreenStream": { "alias": "annotateScreenStream"; "required": false; }; "localStreamScreen": { "alias": "localStreamScreen"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,70 @@
+import * as i0 from "@angular/core";
+export interface LoadingModalOptions {
+    isVisible: boolean;
+    backgroundColor?: string;
+    displayColor?: string;
+}
+export type LoadingModalType = (options: LoadingModalOptions) => HTMLElement;
+/**
+ * Component representing a loading modal.
+ *
+ * @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)'`.
+ * - `displayColor` (string): Color of the loading text. Default is `'white'`.
+ *
+ * @properties
+ * - `modalContainerStyle` (object): Computed styles for the modal container.
+ * - `modalContentStyle` (object): Computed styles for the modal content.
+ * - `spinnerContainerStyle` (object): Computed styles for the spinner container.
+ * - `loadingTextStyle` (object): Computed styles for the loading text.
+ */
+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;
+    };
+    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>;
+}

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

@@ -0,0 +1,72 @@
+import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MainAspectComponentOptions {
+    backgroundColor?: string;
+    showControls?: boolean;
+    containerWidthFraction?: number;
+    containerHeightFraction?: number;
+    defaultFraction?: number;
+    updateIsWideScreen: (isWideScreen: boolean) => void;
+    updateIsMediumScreen: (isMediumScreen: boolean) => void;
+    updateIsSmallScreen: (isSmallScreen: boolean) => void;
+}
+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.
+ *
+ * @selector app-main-aspect-component
+ * @standalone true
+ * @imports [CommonModule]
+ *
+ * @template
+ * ```html
+ * <div [ngStyle]="aspectStyles" [style.backgroundColor]="backgroundColor" class="aspect-container">
+ *   <ng-content></ng-content>
+ * </div>
+ * ```
+ *
+ * @styles
+ * ```css
+ * .aspect-container {
+ *   overflow: hidden;
+ * }
+ * ```
+ *
+ * @class MainAspectComponent
+ * @implements OnInit, OnDestroy, OnChanges
+ *
+ * @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.
+ *
+ * @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.
+ */
+export declare class MainAspectComponent implements OnInit, OnDestroy, OnChanges {
+    backgroundColor: string;
+    showControls: boolean;
+    containerWidthFraction: number;
+    containerHeightFraction: number;
+    defaultFraction: number;
+    updateIsWideScreen: (isWideScreen: boolean) => void;
+    updateIsMediumScreen: (isMediumScreen: boolean) => void;
+    updateIsSmallScreen: (isSmallScreen: boolean) => void;
+    aspectStyles: {
+        [key: string]: any;
+    };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    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>;
+}