mediasfu-angular
Version:
mediasfu-angular - Angular 17/18/19 WebRTC SDK for video conferencing, webinars, broadcasts, live streaming, chat, recording, whiteboard, and AI agents. Prebuilt rooms and fully custom UIs.
127 lines (126 loc) • 5.24 kB
TypeScript
import { OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
export type AlertTone = 'success' | 'danger' | 'info' | 'warning';
export type AlertPosition = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center';
export interface AlertComponentOptions {
visible: boolean;
message: string;
type: AlertTone;
duration?: number;
onHide?: () => void;
textColor?: string;
position?: AlertPosition;
isDarkMode?: boolean;
alertStyle?: Partial<CSSStyleDeclaration>;
customTemplate?: TemplateRef<any>;
}
export type AlertComponentType = (options: AlertComponentOptions) => HTMLElement;
/**
* AlertComponent - Toast-style notification component for success and error messages
*
* @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
*
* Key Features:
* - Auto-dismiss with configurable duration
* - Success/danger type indicators
* - Manual dismiss capability
* - Customizable text color and styling
* - Full template override support
*
* @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]="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, OnDestroy {
visible: boolean;
message: string;
type: AlertTone;
duration: number;
textColor: string;
position: AlertPosition;
isDarkMode?: boolean;
onHide: () => void;
alertStyle?: Partial<CSSStyleDeclaration>;
customTemplate?: TemplateRef<any>;
alertType: AlertTone;
private hideTimeout?;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
handlePress(): void;
get alertLabel(): string;
get alertMeta(): string;
get alertIcon(): string;
get alertRole(): 'alert' | 'status';
get shellStyle(): Record<string, string>;
get resolvedIsDarkMode(): boolean;
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; }; "position": { "alias": "position"; "required": false; }; "isDarkMode": { "alias": "isDarkMode"; "required": false; }; "onHide": { "alias": "onHide"; "required": false; }; "alertStyle": { "alias": "alertStyle"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>;
}