mediasfu-angular 2.2.1 → 2.2.3

package/dist/lib/components/menu-components/share-buttons-component/share-buttons-component.component.d.ts

@@ -1,18 +1,46 @@
+import { TemplateRef } from '@angular/core';
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { EventType } from '../../../@types/types';
 import * as i0 from "@angular/core";
 export interface ShareButton {
     icon: IconDefinition;
-    action: () => void;
+    action: () => void | Promise<void>;
     show: boolean;
     color?: string;
     iconColor?: string;
+    wrapperAttributes?: {
+        [key: string]: any;
+    };
+    iconAttributes?: {
+        [key: string]: any;
+    };
+}
+export interface ShareButtonRenderContext {
+    button: ShareButton;
+    index: number;
+    shareUrl: string;
+}
+export interface ShareButtonsRenderContext {
+    buttons: ShareButton[];
+    shareUrl: string;
 }
 export interface ShareButtonsComponentOptions {
     meetingID: string;
     shareButtons?: ShareButton[];
     eventType: EventType;
     localLink?: string;
+    containerAttributes?: {
+        [key: string]: any;
+    };
+    renderContainer?: TemplateRef<ShareButtonsRenderContext>;
+    renderButtons?: TemplateRef<ShareButtonsRenderContext>;
+    renderButton?: TemplateRef<ShareButtonRenderContext>;
+    renderIcon?: TemplateRef<ShareButtonRenderContext>;
+    getShareUrl?: (options: {
+        meetingID: string;
+        eventType: EventType;
+        localLink?: string;
+    }) => string;
 }
 export type ShareButtonsComponentType = (options: ShareButtonsComponentOptions) => HTMLElement;
 /**
@@ -39,13 +67,32 @@ export type ShareButtonsComponentType = (options: ShareButtonsComponentOptions)
  */
 export declare class ShareButtonsComponent {
     meetingID: string;
+    isDarkMode?: boolean;
     shareButtons: ShareButton[];
     eventType: EventType;
     localLink?: string;
+    containerAttributes?: {
+        [key: string]: any;
+    };
+    renderContainer?: TemplateRef<ShareButtonsRenderContext>;
+    renderButtons?: TemplateRef<ShareButtonsRenderContext>;
+    renderButton?: TemplateRef<ShareButtonRenderContext>;
+    renderIcon?: TemplateRef<ShareButtonRenderContext>;
+    getShareUrlFn?: (options: {
+        meetingID: string;
+        eventType: EventType;
+        localLink?: string;
+    }) => string;
+    get resolvedIsDarkMode(): boolean;
     defaultShareButtons: ShareButton[];
     get shareName(): "chat" | "broadcast" | "meeting";
     getShareUrl(): string;
     get filteredShareButtons(): ShareButton[];
+    get shareButtonsRenderContext(): ShareButtonsRenderContext;
+    getButtonRenderContext(button: ShareButton, index: number): ShareButtonRenderContext;
+    getButtonStyle(button: ShareButton, index: number): any;
+    getIconStyle(button: ShareButton): any;
+    getButtonAriaLabel(index: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ShareButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ShareButtonsComponent, "app-share-buttons-component", never, { "meetingID": { "alias": "meetingID"; "required": false; }; "shareButtons": { "alias": "shareButtons"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShareButtonsComponent, "app-share-buttons-component", never, { "meetingID": { "alias": "meetingID"; "required": false; }; "isDarkMode": { "alias": "isDarkMode"; "required": false; }; "shareButtons": { "alias": "shareButtons"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "containerAttributes": { "alias": "containerAttributes"; "required": false; }; "renderContainer": { "alias": "renderContainer"; "required": false; }; "renderButtons": { "alias": "renderButtons"; "required": false; }; "renderButton": { "alias": "renderButton"; "required": false; }; "renderIcon": { "alias": "renderIcon"; "required": false; }; "getShareUrlFn": { "alias": "getShareUrlFn"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/message-components/messages-modal/messages-modal.component.d.ts

@@ -24,19 +24,38 @@ export interface MessagesModalOptions {
     roomName: string;
     socket: Socket;
     chatSetting: string;
+    overlayStyle?: Partial<CSSStyleDeclaration>;
+    contentStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: any;
 }
 export type MessagesModalType = (options: MessagesModalOptions) => void;
 /**
- * @component MessagesModal
- * @description A modal component for managing chat messages in MediaSFU applications, supporting both group and direct messaging, and providing a customizable user interface.
+ * MessagesModal - Full-featured chat modal with group and direct messaging
  *
+ * @component
  * @selector app-messages-modal
  * @templateUrl ./messages-modal.component.html
  * @styleUrls ./messages-modal.component.css
  * @standalone true
  * @imports [CommonModule, FontAwesomeModule, MessagePanel]
  *
+ * @description
+ * A comprehensive chat modal supporting group and direct messaging with full UI customization.
+ * Supports three levels of customization:
+ * 1. **Style Overrides**: Customize appearance with `overlayStyle` and `contentStyle`
+ * 2. **Component Integration**: Integrates with MediaSFU messaging system
+ * 3. **Complete Replacement**: Use `customTemplate` for full UI control
+ *
+ * Features:
+ * - Group chat for all participants
+ * - Direct messaging between participants
+ * - Message history and real-time updates
+ * - Read receipts and sender identification
+ * - Host/co-host message controls
+ * - Socket-based real-time messaging
+ *
  * @example
+ * **Basic Usage**
  * ```html
  * <app-messages-modal
  *   [isMessagesModalVisible]="true"
@@ -47,18 +66,57 @@ export type MessagesModalType = (options: MessagesModalOptions) => void;
  *   [eventType]="'webinar'"
  *   [member]="'JohnDoe'"
  *   [islevel]="'2'"
- *   [coHostResponsibility]="coHostRoles"
- *   [coHost]="'coHost123'"
- *   [startDirectMessage]="false"
- *   [directMessageDetails]="selectedParticipant"
- *   [updateStartDirectMessage]="updateDirectMessageStart"
- *   [updateDirectMessageDetails]="updateParticipantDetails"
- *   [showAlert]="displayAlert"
  *   [roomName]="'RoomName'"
- *   [socket]="chatSocket"
- *   [chatSetting]="'enabled'"
- * ></app-messages-modal>
+ *   [socket]="chatSocket">
+ * </app-messages-modal>
+ * ```
+ *
+ * @example
+ * **With Style Customization**
+ * ```html
+ * <app-messages-modal
+ *   [isMessagesModalVisible]="true"
+ *   [overlayStyle]="{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }"
+ *   [contentStyle]="{ borderRadius: '12px', maxHeight: '600px' }"
+ *   [onMessagesClose]="closeMessages"
+ *   [messages]="chatMessages"
+ *   [socket]="chatSocket">
+ * </app-messages-modal>
  * ```
+ *
+ * @example
+ * **Custom Template Override**
+ * ```html
+ * <app-messages-modal
+ *   [isMessagesModalVisible]="true"
+ *   [customTemplate]="customChatTemplate"
+ *   [messages]="chatMessages"
+ *   [onMessagesClose]="closeMessages">
+ * </app-messages-modal>
+ *
+ * <ng-template #customChatTemplate let-context>
+ *   <div class="my-chat-modal">
+ *     <h2>Chat ({{ context.messages.length }} messages)</h2>
+ *     <div *ngFor="let message of context.messages">
+ *       <strong>{{ message.sender }}:</strong> {{ message.message }}
+ *     </div>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @input {boolean} isMessagesModalVisible - Controls modal visibility
+ * @input {() => void} onMessagesClose - Callback when modal is closed
+ * @input {Message[]} messages - Array of chat messages
+ * @input {string} position - Modal position (default: 'bottomRight')
+ * @input {string} backgroundColor - Modal background color (default: '#f5f5f5')
+ * @input {EventType} eventType - Type of event (meeting, webinar, etc.)
+ * @input {string} member - Current user's name/ID
+ * @input {string} islevel - User's privilege level
+ * @input {Socket} socket - Socket.io connection for real-time messaging
+ * @input {string} roomName - Room identifier
+ * @input {Partial<CSSStyleDeclaration>} overlayStyle - Custom overlay styles
+ * @input {Partial<CSSStyleDeclaration>} contentStyle - Custom content styles
+ * @input {TemplateRef<any>} customTemplate - Complete template override
  */
 export declare class MessagesModal implements OnInit, OnChanges {
     private SendMessageService;
@@ -83,6 +141,9 @@ export declare class MessagesModal implements OnInit, OnChanges {
     roomName: string;
     socket: Socket;
     chatSetting: string;
+    overlayStyle?: Partial<CSSStyleDeclaration>;
+    contentStyle?: Partial<CSSStyleDeclaration>;
+    customTemplate?: any;
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
     directMessages: Array<any>;
     groupMessages: Array<any>;
@@ -99,9 +160,9 @@ export declare class MessagesModal implements OnInit, OnChanges {
     closeMessagesModal(): void;
     updateModalStyles(): void;
     getTabStyle(tab: string): {
-        backgroundColor?: string | undefined;
-        color?: string | undefined;
-        borderRadius?: string | undefined;
+        backgroundColor?: string;
+        color?: string;
+        borderRadius?: string;
         paddingRight: string;
         paddingLeft: string;
         paddingTop: string;
@@ -153,6 +214,8 @@ export declare class MessagesModal implements OnInit, OnChanges {
             color: string;
         };
     };
+    getCombinedOverlayStyle(): any;
+    getCombinedContentStyle(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessagesModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessagesModal, "app-messages-modal", never, { "isMessagesModalVisible": { "alias": "isMessagesModalVisible"; "required": false; }; "onMessagesClose": { "alias": "onMessagesClose"; "required": false; }; "onSendMessagePress": { "alias": "onSendMessagePress"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "position": { "alias": "position"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "activeTabBackgroundColor": { "alias": "activeTabBackgroundColor"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "member": { "alias": "member"; "required": false; }; "islevel": { "alias": "islevel"; "required": false; }; "coHostResponsibility": { "alias": "coHostResponsibility"; "required": false; }; "coHost": { "alias": "coHost"; "required": false; }; "startDirectMessage": { "alias": "startDirectMessage"; "required": false; }; "directMessageDetails": { "alias": "directMessageDetails"; "required": false; }; "updateStartDirectMessage": { "alias": "updateStartDirectMessage"; "required": false; }; "updateDirectMessageDetails": { "alias": "updateDirectMessageDetails"; "required": false; }; "showAlert": { "alias": "showAlert"; "required": false; }; "roomName": { "alias": "roomName"; "required": false; }; "socket": { "alias": "socket"; "required": false; }; "chatSetting": { "alias": "chatSetting"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessagesModal, "app-messages-modal", never, { "isMessagesModalVisible": { "alias": "isMessagesModalVisible"; "required": false; }; "onMessagesClose": { "alias": "onMessagesClose"; "required": false; }; "onSendMessagePress": { "alias": "onSendMessagePress"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "position": { "alias": "position"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "activeTabBackgroundColor": { "alias": "activeTabBackgroundColor"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "member": { "alias": "member"; "required": false; }; "islevel": { "alias": "islevel"; "required": false; }; "coHostResponsibility": { "alias": "coHostResponsibility"; "required": false; }; "coHost": { "alias": "coHost"; "required": false; }; "startDirectMessage": { "alias": "startDirectMessage"; "required": false; }; "directMessageDetails": { "alias": "directMessageDetails"; "required": false; }; "updateStartDirectMessage": { "alias": "updateStartDirectMessage"; "required": false; }; "updateDirectMessageDetails": { "alias": "updateDirectMessageDetails"; "required": false; }; "showAlert": { "alias": "showAlert"; "required": false; }; "roomName": { "alias": "roomName"; "required": false; }; "socket": { "alias": "socket"; "required": false; }; "chatSetting": { "alias": "chatSetting"; "required": false; }; "overlayStyle": { "alias": "overlayStyle"; "required": false; }; "contentStyle": { "alias": "contentStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>;
 }