@pecb-ui/components 1.1.9 → 1.1.10

package/index.d.ts

@@ -1038,21 +1038,20 @@ declare class RightModalComponent implements OnDestroy {
     ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
     closed: _angular_core.OutputEmitterRef<void>;
     opened: _angular_core.OutputEmitterRef<void>;
-    private modalPanel;
-    private cleanupFocusTrap;
-    private cleanupBodyScroll;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private modalTemplate;
+    private overlayRef;
+    private portal;
+    private subscriptions;
     private previousActiveElement;
-    private currentlyOpen;
     constructor();
     ngOnDestroy(): void;
-    get modalClasses(): string[];
     get panelClasses(): string[];
-    onBackdropClick(event: MouseEvent): void;
-    onKeydown(event: KeyboardEvent): void;
     close(): void;
-    private onOpen;
-    private setupFocusTrap;
-    private cleanup;
+    private openOverlay;
+    private closeOverlay;
+    private destroyOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
 }
@@ -1114,7 +1113,7 @@ declare class SidebarComponent {
 }
 
 type ConfirmationIconType = 'success' | 'warning' | 'error' | 'info';
-declare class ConfirmationComponent implements OnDestroy, AfterViewInit {
+declare class ConfirmationComponent implements OnDestroy {
     id: _angular_core.InputSignal<string>;
     /**
      * Whether the dialog is visible. Manages its own state internally —
@@ -1136,25 +1135,23 @@ declare class ConfirmationComponent implements OnDestroy, AfterViewInit {
     confirmed: _angular_core.OutputEmitterRef<void>;
     cancelled: _angular_core.OutputEmitterRef<void>;
     closed: _angular_core.OutputEmitterRef<void>;
-    dialogPanel: ElementRef<HTMLElement>;
-    private cleanupFocusTrap;
-    private cleanupBodyScroll;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private dialogTemplate;
+    private overlayRef;
+    private portal;
+    private subscriptions;
     private previousActiveElement;
     constructor();
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    get dialogClasses(): string[];
     get iconContainerClass(): string;
     get titleId(): string;
     get messageId(): string;
-    onBackdropClick(event: MouseEvent): void;
-    onKeydown(event: KeyboardEvent): void;
     onConfirm(): void;
     onCancel(): void;
     close(): void;
-    private onOpen;
-    private setupFocusTrap;
-    private cleanup;
+    private openOverlay;
+    private destroyOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfirmationComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmationComponent, "pecb-confirmation", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "iconType": { "alias": "iconType"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "confirmed": "confirmed"; "cancelled": "cancelled"; "closed": "closed"; }, never, never, true, never>;
 }
@@ -1399,6 +1396,16 @@ declare class TooltipComponent {
     primaryCta: _angular_core.InputSignal<string | undefined>;
     secondaryCta: _angular_core.InputSignal<string | undefined>;
     showClose: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional explicit width of the tooltip box (any CSS length, e.g. '330px',
+     * '20rem'). Leave undefined to size to content.
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional explicit height of the tooltip box (any CSS length, e.g. '120px').
+     * Leave undefined to size to content.
+     */
+    height: _angular_core.InputSignal<string | undefined>;
     /**
      * Whether the tooltip is visible. Manages its own state internally —
      * no consumer binding required. Supports [(visible)] for controlled mode.
@@ -1418,7 +1425,7 @@ declare class TooltipComponent {
     get ptrBodyFill(): string;
     get hostClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "pecb-tooltip", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "pointerPosition": { "alias": "pointerPosition"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "primaryCta": { "alias": "primaryCta"; "required": false; "isSignal": true; }; "secondaryCta": { "alias": "secondaryCta"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "closed": "closed"; "primaryCtaClick": "primaryCtaClick"; "secondaryCtaClick": "secondaryCtaClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "pecb-tooltip", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "pointerPosition": { "alias": "pointerPosition"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "primaryCta": { "alias": "primaryCta"; "required": false; "isSignal": true; }; "secondaryCta": { "alias": "secondaryCta"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "closed": "closed"; "primaryCtaClick": "primaryCtaClick"; "secondaryCtaClick": "secondaryCtaClick"; }, never, never, true, never>;
 }
 
 declare class TooltipDirective implements OnDestroy {
@@ -2413,12 +2420,28 @@ interface NotificationConfig {
     title?: string;
     /** Type of notification */
     type: NotificationType;
+    /** Visual variant of the underlying `pecb-alert`. Defaults to `'banner'`. */
+    variant?: AlertVariant;
     /** Duration in milliseconds (0 for persistent) */
     duration?: number;
     /** Whether the notification can be dismissed */
     dismissible?: boolean;
     /** Position on screen */
     position?: NotificationPosition;
+    /** Label for the primary action button. Omit for no button. */
+    primaryAction?: string;
+    /** Label for the secondary action button. Omit for no button. */
+    secondaryAction?: string;
+    /**
+     * Called when the primary action button is clicked. By default the toast is
+     * dismissed afterwards; return `false` to keep it open.
+     */
+    onPrimaryAction?: () => boolean | void;
+    /**
+     * Called when the secondary action button is clicked. By default the toast is
+     * dismissed afterwards; return `false` to keep it open.
+     */
+    onSecondaryAction?: () => boolean | void;
     /** Custom CSS class */
     customClass?: string;
     /** Unique identifier */
@@ -2427,17 +2450,17 @@ interface NotificationConfig {
 /**
  * Notification object with all properties
  */
-interface Notification extends Required<Omit<NotificationConfig, 'title' | 'customClass'>> {
+interface Notification extends Required<Omit<NotificationConfig, 'title' | 'customClass' | 'variant' | 'primaryAction' | 'secondaryAction' | 'onPrimaryAction' | 'onSecondaryAction'>> {
     title?: string;
     customClass?: string;
     timestamp: Date;
 }
 /**
- * A stateless, injectable notification service for displaying toast notifications.
+ * An injectable, Toastr-style notification service.
  *
- * This service provides a reactive way to manage notifications across the application.
- * It uses RxJS Subjects to emit notification events that can be consumed by notification
- * display components.
+ * Calling any of the helpers renders a `pecb-alert` toast in a CDK overlay
+ * stack on `<body>` — no template wiring, host component, or module setup is
+ * required. Just inject and call:
  *
  * @example
  * ```typescript
@@ -2445,14 +2468,11 @@ interface Notification extends Required<Omit<NotificationConfig, 'title' | 'cust
  *
  * @Component({...})
  * export class MyComponent {
- *   constructor(private notificationService: NotificationService) {}
+ *   private notify = inject(NotificationService);
  *
- *   showSuccess(): void {
- *     this.notificationService.success('Operation completed successfully!');
- *   }
- *
- *   showError(): void {
- *     this.notificationService.error('An error occurred', 'Error Title');
+ *   save(): void {
+ *     this.notify.success('Saved!');
+ *     this.notify.error('Something went wrong', 'Error');
  *   }
  * }
  * ```
@@ -2460,6 +2480,9 @@ interface Notification extends Required<Omit<NotificationConfig, 'title' | 'cust
  * @publicApi
  */
 declare class NotificationService {
+    private readonly overlay;
+    private readonly appRef;
+    private readonly environmentInjector;
     private readonly notificationSubject;
     private readonly dismissSubject;
     private readonly clearSubject;
@@ -2467,17 +2490,17 @@ declare class NotificationService {
     private readonly defaultDuration;
     /** Default position for notifications */
     private readonly defaultPosition;
-    /**
-     * Observable stream of notifications
-     */
+    /** Time to keep a toast mounted after dismiss so its leave animation can play. */
+    private readonly leaveAnimationMs;
+    /** One shared overlay (a vertical stack) per on-screen position. */
+    private readonly stacks;
+    /** All live toasts, keyed by their id. */
+    private readonly toasts;
+    /** @deprecated Notifications now render automatically; no need to subscribe. */
     get notifications$(): Observable<Notification>;
-    /**
-     * Observable stream of dismissed notification IDs
-     */
+    /** @deprecated Notifications now render automatically; no need to subscribe. */
     get dismiss$(): Observable<string>;
-    /**
-     * Observable stream for clear all events
-     */
+    /** @deprecated Notifications now render automatically; no need to subscribe. */
     get clear$(): Observable<void>;
     /**
      * Show a success notification
@@ -2522,6 +2545,12 @@ declare class NotificationService {
      * Clear all notifications
      */
     clearAll(): void;
+    /** Get (or lazily create) the overlay stack for a screen position. */
+    private getStack;
+    /** Play the leave animation, then unmount the toast and tidy up its stack. */
+    private remove;
+    /** Dispose a position's overlay once it holds no more toasts. */
+    private disposeStackIfEmpty;
     /**
      * Generate a unique notification ID
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pecb-ui/components",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Professional Angular UI Components Library with TypeScript and SCSS by PECB",
   "author": "PECB",
   "license": "MIT",