npm - @pecb-ui/components - Versions diffs - 1.1.9 → 1.1.10 - Mend

@pecb-ui/components 1.1.9 → 1.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/pecb-ui-components.mjs +281 -141
package/fesm2022/pecb-ui-components.mjs.map +1 -1
package/index.d.ts +72 -43
package/package.json +1 -1

package/fesm2022/pecb-ui-components.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, output, HostBinding, Component, ChangeDetectionStrategy, model, computed, signal, HostListener, ContentChild, effect, forwardRef, ViewChild, viewChild, Directive, untracked, ElementRef, ApplicationRef, EnvironmentInjector, createComponent, contentChildren, ViewEncapsulation, PLATFORM_ID, Inject, ViewChildren, Renderer2, NgZone } from '@angular/core';
+import { Injectable, inject, input, output, HostBinding, Component, ChangeDetectionStrategy, model, computed, signal, HostListener, ContentChild, effect, forwardRef, ViewChild, ViewContainerRef, viewChild, ViewEncapsulation, Directive, untracked, ElementRef, ApplicationRef, EnvironmentInjector, createComponent, contentChildren, PLATFORM_ID, Inject, ViewChildren, Renderer2, NgZone } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgOptimizedImage, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -8,7 +8,9 @@ import * as i2 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { Subject, BehaviorSubject } from 'rxjs';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription, Subject, BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 /**
@@ -5591,41 +5593,32 @@ class RightModalComponent {
         this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
         this.closed = output();
         this.opened = output();
-        this.modalPanel = viewChild('modalPanel', ...(ngDevMode ? [{ debugName: "modalPanel" }] : []));
-        this.cleanupFocusTrap = null;
-        this.cleanupBodyScroll = null;
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+        // The panel + projected slots live in this template so they can be attached
+        // to a CDK overlay (rendered in the global overlay container on <body>),
+        // which escapes any `transform`/`filter` containing-block trap on ancestors.
+        this.modalTemplate = viewChild('modalTemplate', ...(ngDevMode ? [{ debugName: "modalTemplate" }] : []));
+        this.overlayRef = null;
+        this.portal = null;
+        this.subscriptions = new Subscription();
         this.previousActiveElement = null;
-        this.currentlyOpen = false;
-        // Drive the open/close side-effects (focus trap, body-scroll lock, focus
-        // restoration) reactively from the isOpen model so the modal behaves
-        // correctly on every toggle — not just the initial mount.
+        // Open/close the overlay reactively from the isOpen model. The template
+        // signal is read so the effect re-runs once the @ViewChild resolves (e.g.
+        // when a consumer renders the modal already open).
         effect(() => {
             const open = this.isOpen();
-            const panel = this.modalPanel();
-            if (open) {
-                if (!this.currentlyOpen) {
-                    this.currentlyOpen = true;
-                    this.onOpen();
-                }
-                if (panel && !this.cleanupFocusTrap) {
-                    this.setupFocusTrap(panel.nativeElement);
-                }
+            const template = this.modalTemplate();
+            if (open && template) {
+                this.openOverlay(template);
             }
-            else if (this.currentlyOpen) {
-                this.currentlyOpen = false;
-                this.cleanup();
-                this.closed.emit();
+            else if (!open) {
+                this.closeOverlay();
             }
         });
     }
     ngOnDestroy() {
-        this.cleanup();
-    }
-    get modalClasses() {
-        return [
-            'pecb-right-modal',
-            this.isOpen() ? 'pecb-right-modal--open' : ''
-        ].filter(Boolean);
+        this.destroyOverlay();
     }
     get panelClasses() {
         return [
@@ -5633,49 +5626,71 @@ class RightModalComponent {
             `pecb-right-modal__panel--${this.size()}`
         ];
     }
-    onBackdropClick(event) {
-        if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
-            this.close();
-        }
-    }
-    onKeydown(event) {
-        if (this.closeOnEscape() && event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-        }
-    }
     close() {
-        // The effect handles cleanup and the `closed` emit when isOpen flips to false.
+        // The effect tears down the overlay and emits `closed` when isOpen flips.
         this.isOpen.set(false);
     }
-    onOpen() {
+    openOverlay(template) {
+        if (this.overlayRef) {
+            return; // already open
+        }
         this.previousActiveElement = document.activeElement;
-        this.cleanupBodyScroll = disableBodyScroll();
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'pecb-right-modal__backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            // Full-height drawer pinned to the right edge of the viewport.
+            positionStrategy: this.overlay.position().global().top('0').right('0')
+        });
+        this.portal = new TemplatePortal(template, this.viewContainerRef);
+        this.overlayRef.attach(this.portal);
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.overlayRef.backdropClick().subscribe(() => {
+            if (this.closeOnBackdropClick()) {
+                this.close();
+            }
+        }));
+        this.subscriptions.add(this.overlayRef.keydownEvents().subscribe((event) => {
+            if (this.closeOnEscape() && event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        }));
+        // Focus the dialog panel itself (tabindex="-1") rather than the close
+        // button, so opening the modal doesn't render a focus ring on the × icon.
+        // cdkTrapFocus on the panel keeps Tab navigation contained within it.
+        const panel = this.overlayRef.overlayElement.querySelector('.pecb-right-modal__panel');
+        panel?.focus();
         this.opened.emit();
     }
-    setupFocusTrap(panel) {
-        this.cleanupFocusTrap = trapFocus(panel);
-    }
-    cleanup() {
-        if (this.cleanupFocusTrap) {
-            this.cleanupFocusTrap();
-            this.cleanupFocusTrap = null;
-        }
-        if (this.cleanupBodyScroll) {
-            this.cleanupBodyScroll();
-            this.cleanupBodyScroll = null;
+    closeOverlay() {
+        if (!this.overlayRef) {
+            return;
         }
+        this.destroyOverlay();
         if (this.previousActiveElement instanceof HTMLElement) {
             this.previousActiveElement.focus();
         }
+        this.closed.emit();
+    }
+    destroyOverlay() {
+        this.subscriptions.unsubscribe();
+        if (this.portal?.isAttached) {
+            this.portal.detach();
+        }
+        this.portal = null;
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: RightModalComponent, isStandalone: true, selector: "pecb-right-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  *ngIf=\"isOpen()\"\n  [id]=\"id()\"\n  [class]=\"modalClasses.join(' ')\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n  (click)=\"onBackdropClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div\n    #modalPanel\n    [class]=\"panelClasses.join(' ')\"\n    tabindex=\"-1\"\n  >\n    <button\n      *ngIf=\"showCloseButton()\"\n      type=\"button\"\n      class=\"pecb-right-modal__close-btn\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"close()\"\n    >\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <ng-content select=\"[pecbRightModalHeader]\"></ng-content>\n    <ng-content select=\"[pecbRightModalContent]\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"[pecbRightModalFooter]\"></ng-content>\n  </div>\n</div>\n", styles: [".pecb-right-modal{position:fixed;inset:0;z-index:1050;display:flex;justify-content:flex-end;background-color:#00000080;animation:fadeIn .15s ease-in-out forwards}.pecb-right-modal--open .pecb-right-modal__panel{animation:slideInRight .25s ease-in-out forwards}.pecb-right-modal__panel{position:relative;display:inline-flex;min-width:516.23px;max-width:90vw;height:100%;padding:24px;flex-direction:column;align-items:flex-start;gap:16px;border-radius:24px 0 0 24px;background:#fff;box-shadow:0 5px 16px -4px #10182826;overflow:hidden}.pecb-right-modal__panel--sm{min-width:400px}.pecb-right-modal__panel--md{min-width:516.23px}.pecb-right-modal__panel--lg{min-width:700px}.pecb-right-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;position:absolute;top:24px;right:24px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#616161;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-right-modal__close-btn:focus{outline:none}.pecb-right-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-right-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-right-modal__close-btn svg{width:20px;height:20px}.pecb-right-modal__header{position:sticky;top:0;z-index:10;width:100%;padding-right:32px;background:#fff}.pecb-right-modal__content{flex:1;min-height:0;width:100%;overflow-y:auto}.pecb-right-modal__content::-webkit-scrollbar{width:8px;height:8px}.pecb-right-modal__content::-webkit-scrollbar-track{background:#ececec}.pecb-right-modal__content::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-right-modal__content::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-right-modal__footer{position:sticky;bottom:0;width:100%;margin-top:auto;background:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media (prefers-reduced-motion: reduce){.pecb-right-modal,.pecb-right-modal__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: RightModalComponent, isStandalone: true, selector: "pecb-right-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\n  <div\n    [id]=\"id()\"\n    [class]=\"panelClasses.join(' ')\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n  >\n    <button\n      *ngIf=\"showCloseButton()\"\n      type=\"button\"\n      class=\"pecb-right-modal__close-btn\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"close()\"\n    >\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <ng-content select=\"[pecbRightModalHeader]\"></ng-content>\n    <ng-content select=\"[pecbRightModalContent]\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"[pecbRightModalFooter]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".pecb-right-modal__backdrop{background-color:#00000080}.pecb-right-modal__panel{position:relative;display:flex;width:516.23px;max-width:100vw;height:100vh;padding:24px;animation:slideInRight .25s ease-in-out forwards;flex-direction:column;align-items:stretch;gap:16px;border-radius:24px 0 0 24px;background:#fff;box-shadow:0 5px 16px -4px #10182826;overflow:hidden}.pecb-right-modal__panel:focus{outline:none}.pecb-right-modal__panel--sm{width:400px}.pecb-right-modal__panel--md{width:516.23px}.pecb-right-modal__panel--lg{width:700px}.pecb-right-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;position:absolute;top:24px;right:24px;z-index:20;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#616161;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-right-modal__close-btn:focus{outline:none}.pecb-right-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-right-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-right-modal__close-btn svg{width:20px;height:20px}.pecb-right-modal__header{position:sticky;top:0;z-index:10;width:100%;padding-right:32px;background:#fff}.pecb-right-modal__content{flex:1;min-height:0;min-width:0;width:100%;display:flex;flex-direction:column;align-items:stretch;overflow:auto}.pecb-right-modal__content::-webkit-scrollbar{width:8px;height:8px}.pecb-right-modal__content::-webkit-scrollbar-track{background:#ececec}.pecb-right-modal__content::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-right-modal__content::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-right-modal__footer{position:sticky;bottom:0;width:100%;margin-top:auto;background:#fff}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media (prefers-reduced-motion: reduce){.pecb-right-modal__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pecb-right-modal', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"isOpen()\"\n  [id]=\"id()\"\n  [class]=\"modalClasses.join(' ')\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n  (click)=\"onBackdropClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div\n    #modalPanel\n    [class]=\"panelClasses.join(' ')\"\n    tabindex=\"-1\"\n  >\n    <button\n      *ngIf=\"showCloseButton()\"\n      type=\"button\"\n      class=\"pecb-right-modal__close-btn\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"close()\"\n    >\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <ng-content select=\"[pecbRightModalHeader]\"></ng-content>\n    <ng-content select=\"[pecbRightModalContent]\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"[pecbRightModalFooter]\"></ng-content>\n  </div>\n</div>\n", styles: [".pecb-right-modal{position:fixed;inset:0;z-index:1050;display:flex;justify-content:flex-end;background-color:#00000080;animation:fadeIn .15s ease-in-out forwards}.pecb-right-modal--open .pecb-right-modal__panel{animation:slideInRight .25s ease-in-out forwards}.pecb-right-modal__panel{position:relative;display:inline-flex;min-width:516.23px;max-width:90vw;height:100%;padding:24px;flex-direction:column;align-items:flex-start;gap:16px;border-radius:24px 0 0 24px;background:#fff;box-shadow:0 5px 16px -4px #10182826;overflow:hidden}.pecb-right-modal__panel--sm{min-width:400px}.pecb-right-modal__panel--md{min-width:516.23px}.pecb-right-modal__panel--lg{min-width:700px}.pecb-right-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;position:absolute;top:24px;right:24px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#616161;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-right-modal__close-btn:focus{outline:none}.pecb-right-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-right-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-right-modal__close-btn svg{width:20px;height:20px}.pecb-right-modal__header{position:sticky;top:0;z-index:10;width:100%;padding-right:32px;background:#fff}.pecb-right-modal__content{flex:1;min-height:0;width:100%;overflow-y:auto}.pecb-right-modal__content::-webkit-scrollbar{width:8px;height:8px}.pecb-right-modal__content::-webkit-scrollbar-track{background:#ececec}.pecb-right-modal__content::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-right-modal__content::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-right-modal__footer{position:sticky;bottom:0;width:100%;margin-top:auto;background:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media (prefers-reduced-motion: reduce){.pecb-right-modal,.pecb-right-modal__panel{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], modalPanel: [{ type: i0.ViewChild, args: ['modalPanel', { isSignal: true }] }] } });
+            args: [{ selector: 'pecb-right-modal', imports: [CommonModule, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #modalTemplate>\n  <div\n    [id]=\"id()\"\n    [class]=\"panelClasses.join(' ')\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n  >\n    <button\n      *ngIf=\"showCloseButton()\"\n      type=\"button\"\n      class=\"pecb-right-modal__close-btn\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"close()\"\n    >\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <ng-content select=\"[pecbRightModalHeader]\"></ng-content>\n    <ng-content select=\"[pecbRightModalContent]\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"[pecbRightModalFooter]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".pecb-right-modal__backdrop{background-color:#00000080}.pecb-right-modal__panel{position:relative;display:flex;width:516.23px;max-width:100vw;height:100vh;padding:24px;animation:slideInRight .25s ease-in-out forwards;flex-direction:column;align-items:stretch;gap:16px;border-radius:24px 0 0 24px;background:#fff;box-shadow:0 5px 16px -4px #10182826;overflow:hidden}.pecb-right-modal__panel:focus{outline:none}.pecb-right-modal__panel--sm{width:400px}.pecb-right-modal__panel--md{width:516.23px}.pecb-right-modal__panel--lg{width:700px}.pecb-right-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;position:absolute;top:24px;right:24px;z-index:20;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#616161;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-right-modal__close-btn:focus{outline:none}.pecb-right-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-right-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-right-modal__close-btn svg{width:20px;height:20px}.pecb-right-modal__header{position:sticky;top:0;z-index:10;width:100%;padding-right:32px;background:#fff}.pecb-right-modal__content{flex:1;min-height:0;min-width:0;width:100%;display:flex;flex-direction:column;align-items:stretch;overflow:auto}.pecb-right-modal__content::-webkit-scrollbar{width:8px;height:8px}.pecb-right-modal__content::-webkit-scrollbar-track{background:#ececec}.pecb-right-modal__content::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-right-modal__content::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-right-modal__footer{position:sticky;bottom:0;width:100%;margin-top:auto;background:#fff}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media (prefers-reduced-motion: reduce){.pecb-right-modal__panel{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], modalTemplate: [{ type: i0.ViewChild, args: ['modalTemplate', { isSignal: true }] }] } });
 class RightModalHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: RightModalHeaderDirective, isStandalone: true, selector: "[pecbRightModalHeader]", host: { classAttribute: "pecb-right-modal__header" }, ngImport: i0 }); }
@@ -5845,31 +5860,29 @@ class ConfirmationComponent {
         this.confirmed = output();
         this.cancelled = output();
         this.closed = output();
-        this.cleanupFocusTrap = null;
-        this.cleanupBodyScroll = null;
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+        // The dialog panel lives in this template so it can be attached to a CDK
+        // overlay (rendered in the global overlay container on <body>), which escapes
+        // any `transform`/`filter` containing-block trap on an ancestor.
+        this.dialogTemplate = viewChild('dialogTemplate', ...(ngDevMode ? [{ debugName: "dialogTemplate" }] : []));
+        this.overlayRef = null;
+        this.portal = null;
+        this.subscriptions = new Subscription();
         this.previousActiveElement = null;
         effect(() => {
-            if (this.isOpen()) {
-                this.onOpen();
+            const open = this.isOpen();
+            const template = this.dialogTemplate();
+            if (open && template) {
+                this.openOverlay(template);
             }
-            else {
-                this.cleanup();
+            else if (!open) {
+                this.destroyOverlay();
             }
         });
     }
-    ngAfterViewInit() {
-        if (this.isOpen()) {
-            this.setupFocusTrap();
-        }
-    }
     ngOnDestroy() {
-        this.cleanup();
-    }
-    get dialogClasses() {
-        return [
-            'pecb-confirmation',
-            this.isOpen() ? 'pecb-confirmation--open' : ''
-        ].filter(Boolean);
+        this.destroyOverlay();
     }
     get iconContainerClass() {
         return `pecb-confirmation__icon pecb-confirmation__icon--${this.iconType()}`;
@@ -5880,17 +5893,6 @@ class ConfirmationComponent {
     get messageId() {
         return `${this.id()}-message`;
     }
-    onBackdropClick(event) {
-        if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
-            this.close();
-        }
-    }
-    onKeydown(event) {
-        if (this.closeOnEscape() && event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-        }
-    }
     onConfirm() {
         this.confirmed.emit();
         this.close();
@@ -5903,39 +5905,58 @@ class ConfirmationComponent {
         this.isOpen.set(false);
         this.closed.emit();
     }
-    onOpen() {
-        this.previousActiveElement = document.activeElement;
-        this.cleanupBodyScroll = disableBodyScroll();
-        this.setupFocusTrap();
-    }
-    setupFocusTrap() {
-        if (this.dialogPanel?.nativeElement && !this.cleanupFocusTrap) {
-            this.cleanupFocusTrap = trapFocus(this.dialogPanel.nativeElement);
-        }
-    }
-    cleanup() {
-        if (this.cleanupFocusTrap) {
-            this.cleanupFocusTrap();
-            this.cleanupFocusTrap = null;
+    openOverlay(template) {
+        if (this.overlayRef) {
+            return; // already open
         }
-        if (this.cleanupBodyScroll) {
-            this.cleanupBodyScroll();
-            this.cleanupBodyScroll = null;
+        this.previousActiveElement = document.activeElement;
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'pecb-confirmation__backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            // Centered dialog.
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
+        });
+        this.portal = new TemplatePortal(template, this.viewContainerRef);
+        this.overlayRef.attach(this.portal);
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.overlayRef.backdropClick().subscribe(() => {
+            if (this.closeOnBackdropClick()) {
+                this.close();
+            }
+        }));
+        this.subscriptions.add(this.overlayRef.keydownEvents().subscribe((event) => {
+            if (this.closeOnEscape() && event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        }));
+        // Focus the dialog panel itself (tabindex="-1"); cdkTrapFocus keeps Tab
+        // navigation contained within the dialog.
+        const panel = this.overlayRef.overlayElement.querySelector('.pecb-confirmation__panel');
+        panel?.focus();
+    }
+    destroyOverlay() {
+        this.subscriptions.unsubscribe();
+        if (this.portal?.isAttached) {
+            this.portal.detach();
         }
-        if (this.previousActiveElement instanceof HTMLElement) {
-            this.previousActiveElement.focus();
+        this.portal = null;
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+            if (this.previousActiveElement instanceof HTMLElement) {
+                this.previousActiveElement.focus();
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ConfirmationComponent, isStandalone: true, selector: "pecb-confirmation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", confirmed: "confirmed", cancelled: "cancelled", closed: "closed" }, viewQueries: [{ propertyName: "dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true }], ngImport: i0, template: "@if (isOpen()) {\n  <div\n    [id]=\"id()\"\n    [class]=\"dialogClasses.join(' ')\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"titleId\"\n    [attr.aria-describedby]=\"message() ? messageId : ariaDescribedBy() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <div\n      #dialogPanel\n      class=\"pecb-confirmation__panel\"\n      tabindex=\"-1\"\n    >\n     \n      @if (showCloseButton()) {\n        <div class=\"pecb-confirmation__header\">\n          <button\n            type=\"button\"\n            class=\"pecb-confirmation__close-btn\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n            (click)=\"close()\"\n          >\n            <svg\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 10 10\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M9 1L1 9M1 1L9 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n        </div>\n      }\n\n    \n      <div [class]=\"iconContainerClass\" aria-hidden=\"true\">\n        @switch (iconType()) {\n          @case ('success') {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F4EA\"/>\n              <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n              <path d=\"M31.9991 9.84625C19.7635 9.84625 9.84521 19.7645 9.84521 32.0001C9.84521 44.2357 19.7635 54.1539 31.9991 54.1539C44.2347 54.1539 54.1529 44.2357 54.1529 32.0001C54.1426 19.7645 44.2244 9.84625 31.9991 9.84625ZM43.8227 26.3458L31.8137 41.3725C31.2781 42.0316 30.4954 42.4436 29.6508 42.4951C29.5993 42.4951 29.5375 42.4951 29.486 42.4951C28.693 42.4951 27.9308 42.1861 27.3747 41.6197L20.3917 34.6367C19.2279 33.4729 19.2279 31.5778 20.3917 30.414C21.5555 29.2502 23.4506 29.2502 24.6144 30.414L29.2285 35.0281L39.1571 22.6174C40.187 21.33 42.0615 21.1137 43.3592 22.1539C44.6466 23.1736 44.8526 25.0584 43.8227 26.3458Z\" fill=\"#57BC57\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FFF4E5\"/>\n              <circle cx=\"32.5303\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n              <path d=\"M32.0012 9.84668C44.2362 9.84668 54.1543 19.765 54.1545 32C54.1545 44.2352 44.2364 54.1543 32.0012 54.1543C19.766 54.1543 9.8479 44.2352 9.8479 32C9.84815 19.765 19.7662 9.84668 32.0012 9.84668ZM32.0823 40.2266C30.0029 40.2266 28.3108 41.9187 28.3108 43.998C28.5007 48.9935 35.6636 48.9922 35.8528 43.998C35.8528 41.9188 34.1615 40.2266 32.0823 40.2266ZM35.7727 18.9727C33.9014 16.6513 30.1067 16.6501 28.2346 18.9727C27.2974 20.0886 26.9044 21.5514 27.1555 22.9863C27.9048 27.2673 28.9622 33.3099 29.4368 36.0234C29.9687 38.8793 34.0404 38.8785 34.5715 36.0234L36.8528 22.9863C37.1039 21.5514 36.7101 20.0887 35.7727 18.9727Z\" fill=\"#FF9C4A\"/>\n            </svg>\n          }\n          @case ('error') {\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FDECEA\"/>\n              <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n              <path d=\"M47.6652 16.3349C56.3168 24.9865 56.3168 39.0136 47.6652 47.6652C39.0136 56.3168 24.9865 56.3168 16.3349 47.6652C7.68329 39.0136 7.68329 24.9865 16.3349 16.3349C24.9865 7.68329 39.0136 7.68329 47.6652 16.3349ZM40.2677 22.862C39.3666 21.9609 37.9053 21.9609 37.0042 22.862L31.4561 28.4101C31.2759 28.5903 30.9836 28.5903 30.8034 28.4101L25.2553 22.862C24.3542 21.9609 22.8929 21.9609 21.9918 22.862C21.0906 23.7632 21.0906 25.2245 21.9918 26.1256L27.5398 31.6737C27.7201 31.8539 27.7201 32.1462 27.5398 32.3264L21.9918 37.8745C21.0906 38.7756 21.0906 40.2369 21.9918 41.138C22.8929 42.0392 24.3542 42.0392 25.2553 41.138L30.8034 35.59C30.9836 35.4097 31.2759 35.4097 31.4561 35.59L37.0042 41.138C37.9053 42.0392 39.3666 42.0392 40.2677 41.138C41.1689 40.2369 41.1689 38.7756 40.2677 37.8745L34.7197 32.3264C34.5394 32.1462 34.5394 31.8539 34.7197 31.6737L40.2677 26.1256C41.1689 25.2245 41.1689 23.7632 40.2677 22.862Z\" fill=\"#FF606F\"/>\n            </svg>\n          }\n          @case ('info') {\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F0FA\"/>\n              <circle cx=\"32.5283\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n              <path d=\"M31.9995 9.84668C44.2348 9.84668 54.1534 19.7653 54.1534 32.0005C54.1534 44.2358 44.2348 54.1544 31.9995 54.1544C19.7643 54.1544 9.8457 44.2358 9.8457 32.0005C9.8457 19.7653 19.7643 9.84668 31.9995 9.84668ZM28.3072 26.0943C26.8347 26.0945 25.8457 27.0832 25.8457 28.5558C25.8459 30.0282 26.8349 31.0171 28.3072 31.0174H31.758L28.3072 42.5835C28.0603 43.8088 28.3077 45.2811 29.0488 46.2698C29.7903 47.4952 31.0265 47.9896 32.252 47.9897H36.187C37.67 47.9896 38.6486 47.0112 38.6486 45.5282C38.6484 44.0558 37.6595 43.0668 36.187 43.0666H33.2303L36.681 31.5005C36.9281 30.2751 36.6808 28.8028 35.9395 27.8142C35.1979 26.5886 33.9619 26.0943 32.7363 26.0943H28.3072ZM33.4779 16.0005C31.4387 16.0006 29.7904 17.6488 29.7904 19.688C29.7906 21.7271 31.4388 23.3743 33.4779 23.3743C35.5171 23.3743 37.1652 21.7271 37.1654 19.688C37.1654 17.6488 35.5172 16.0005 33.4779 16.0005Z\" fill=\"#5EACFF\"/>\n            </svg>\n          }\n        }\n      </div>\n\n    \n      <div class=\"pecb-confirmation__content\">\n        <h2 [id]=\"titleId\" class=\"pecb-confirmation__title\">{{ title() }}</h2>\n\n        @if (message()) {\n          <p [id]=\"messageId\" class=\"pecb-confirmation__message\">{{ message() }}</p>\n        }\n      </div>\n\n      \n      <div class=\"pecb-confirmation__actions\">\n        <button\n          type=\"button\"\n          class=\"pecb-confirmation__btn pecb-confirmation__btn--confirm\"\n          (click)=\"onConfirm()\"\n        >\n          {{ confirmText() }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"pecb-confirmation__btn pecb-confirmation__btn--cancel\"\n          (click)=\"onCancel()\"\n        >\n          {{ cancelText() }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".pecb-confirmation{position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;background-color:#00000080;animation:fadeIn .15s ease-in-out forwards}.pecb-confirmation__panel{display:flex;width:616px;max-width:calc(100vw - 32px);padding:22px 20px 30px;flex-direction:column;align-items:center;gap:27px;background:#fff;border-radius:12px;box-shadow:0 10px 10px #0000000d;animation:scaleIn .25s ease-in-out forwards;outline:none}.pecb-confirmation__header{display:flex;justify-content:flex-end;align-items:center;width:100%;height:20px}.pecb-confirmation__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#616161;border-radius:6px;outline:none;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__close-btn:focus{outline:none}.pecb-confirmation__close-btn:hover{color:#313131;background-color:#ececec}.pecb-confirmation__close-btn svg{width:10px;height:10px}.pecb-confirmation__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;flex-shrink:0}.pecb-confirmation__icon--success{background-color:transparent}.pecb-confirmation__icon--warning{background-color:#fff4e5}.pecb-confirmation__icon--error{background-color:#fdecea}.pecb-confirmation__icon--info{background-color:#e6f0fa}.pecb-confirmation__content{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 17px;width:100%}.pecb-confirmation__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;text-align:center}.pecb-confirmation__message{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;color:#616161;text-align:center}.pecb-confirmation__actions{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.pecb-confirmation__btn{border:none;background:none;font:inherit;color:inherit;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:10px 40px;border-radius:6px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;cursor:pointer;white-space:nowrap;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__btn:focus{outline:none}.pecb-confirmation__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-confirmation__btn--confirm{background-color:#212427;color:#fff;border:1px solid #212427}.pecb-confirmation__btn--confirm:hover{background-color:#616161;border-color:#616161}.pecb-confirmation__btn--confirm:active{background-color:#000;border-color:#000}.pecb-confirmation__btn--cancel{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-confirmation__btn--cancel:hover{background-color:#ececec;border-color:#616161}.pecb-confirmation__btn--cancel:active{background-color:#c2c2c2;border-color:#616161}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.pecb-confirmation,.pecb-confirmation__panel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ConfirmationComponent, isStandalone: true, selector: "pecb-confirmation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", confirmed: "confirmed", cancelled: "cancelled", closed: "closed" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #dialogTemplate>\n  <div\n    #dialogPanel\n    [id]=\"id()\"\n    class=\"pecb-confirmation__panel\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"titleId\"\n    [attr.aria-describedby]=\"message() ? messageId : ariaDescribedBy() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n  >\n    @if (showCloseButton()) {\n      <div class=\"pecb-confirmation__header\">\n        <button\n          type=\"button\"\n          class=\"pecb-confirmation__close-btn\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"close()\"\n        >\n          <svg\n            width=\"10\"\n            height=\"10\"\n            viewBox=\"0 0 10 10\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M9 1L1 9M1 1L9 9\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      </div>\n    }\n\n    <div [class]=\"iconContainerClass\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F4EA\"/>\n            <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n            <path d=\"M31.9991 9.84625C19.7635 9.84625 9.84521 19.7645 9.84521 32.0001C9.84521 44.2357 19.7635 54.1539 31.9991 54.1539C44.2347 54.1539 54.1529 44.2357 54.1529 32.0001C54.1426 19.7645 44.2244 9.84625 31.9991 9.84625ZM43.8227 26.3458L31.8137 41.3725C31.2781 42.0316 30.4954 42.4436 29.6508 42.4951C29.5993 42.4951 29.5375 42.4951 29.486 42.4951C28.693 42.4951 27.9308 42.1861 27.3747 41.6197L20.3917 34.6367C19.2279 33.4729 19.2279 31.5778 20.3917 30.414C21.5555 29.2502 23.4506 29.2502 24.6144 30.414L29.2285 35.0281L39.1571 22.6174C40.187 21.33 42.0615 21.1137 43.3592 22.1539C44.6466 23.1736 44.8526 25.0584 43.8227 26.3458Z\" fill=\"#57BC57\"/>\n          </svg>\n        }\n        @case ('warning') {\n          <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FFF4E5\"/>\n            <circle cx=\"32.5303\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n            <path d=\"M32.0012 9.84668C44.2362 9.84668 54.1543 19.765 54.1545 32C54.1545 44.2352 44.2364 54.1543 32.0012 54.1543C19.766 54.1543 9.8479 44.2352 9.8479 32C9.84815 19.765 19.7662 9.84668 32.0012 9.84668ZM32.0823 40.2266C30.0029 40.2266 28.3108 41.9187 28.3108 43.998C28.5007 48.9935 35.6636 48.9922 35.8528 43.998C35.8528 41.9188 34.1615 40.2266 32.0823 40.2266ZM35.7727 18.9727C33.9014 16.6513 30.1067 16.6501 28.2346 18.9727C27.2974 20.0886 26.9044 21.5514 27.1555 22.9863C27.9048 27.2673 28.9622 33.3099 29.4368 36.0234C29.9687 38.8793 34.0404 38.8785 34.5715 36.0234L36.8528 22.9863C37.1039 21.5514 36.7101 20.0887 35.7727 18.9727Z\" fill=\"#FF9C4A\"/>\n          </svg>\n        }\n        @case ('error') {\n          <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FDECEA\"/>\n            <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n            <path d=\"M47.6652 16.3349C56.3168 24.9865 56.3168 39.0136 47.6652 47.6652C39.0136 56.3168 24.9865 56.3168 16.3349 47.6652C7.68329 39.0136 7.68329 24.9865 16.3349 16.3349C24.9865 7.68329 39.0136 7.68329 47.6652 16.3349ZM40.2677 22.862C39.3666 21.9609 37.9053 21.9609 37.0042 22.862L31.4561 28.4101C31.2759 28.5903 30.9836 28.5903 30.8034 28.4101L25.2553 22.862C24.3542 21.9609 22.8929 21.9609 21.9918 22.862C21.0906 23.7632 21.0906 25.2245 21.9918 26.1256L27.5398 31.6737C27.7201 31.8539 27.7201 32.1462 27.5398 32.3264L21.9918 37.8745C21.0906 38.7756 21.0906 40.2369 21.9918 41.138C22.8929 42.0392 24.3542 42.0392 25.2553 41.138L30.8034 35.59C30.9836 35.4097 31.2759 35.4097 31.4561 35.59L37.0042 41.138C37.9053 42.0392 39.3666 42.0392 40.2677 41.138C41.1689 40.2369 41.1689 38.7756 40.2677 37.8745L34.7197 32.3264C34.5394 32.1462 34.5394 31.8539 34.7197 31.6737L40.2677 26.1256C41.1689 25.2245 41.1689 23.7632 40.2677 22.862Z\" fill=\"#FF606F\"/>\n          </svg>\n        }\n        @case ('info') {\n          <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F0FA\"/>\n            <circle cx=\"32.5283\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n            <path d=\"M31.9995 9.84668C44.2348 9.84668 54.1534 19.7653 54.1534 32.0005C54.1534 44.2358 44.2348 54.1544 31.9995 54.1544C19.7643 54.1544 9.8457 44.2358 9.8457 32.0005C9.8457 19.7653 19.7643 9.84668 31.9995 9.84668ZM28.3072 26.0943C26.8347 26.0945 25.8457 27.0832 25.8457 28.5558C25.8459 30.0282 26.8349 31.0171 28.3072 31.0174H31.758L28.3072 42.5835C28.0603 43.8088 28.3077 45.2811 29.0488 46.2698C29.7903 47.4952 31.0265 47.9896 32.252 47.9897H36.187C37.67 47.9896 38.6486 47.0112 38.6486 45.5282C38.6484 44.0558 37.6595 43.0668 36.187 43.0666H33.2303L36.681 31.5005C36.9281 30.2751 36.6808 28.8028 35.9395 27.8142C35.1979 26.5886 33.9619 26.0943 32.7363 26.0943H28.3072ZM33.4779 16.0005C31.4387 16.0006 29.7904 17.6488 29.7904 19.688C29.7906 21.7271 31.4388 23.3743 33.4779 23.3743C35.5171 23.3743 37.1652 21.7271 37.1654 19.688C37.1654 17.6488 35.5172 16.0005 33.4779 16.0005Z\" fill=\"#5EACFF\"/>\n          </svg>\n        }\n      }\n    </div>\n\n    <div class=\"pecb-confirmation__content\">\n      <h2 [id]=\"titleId\" class=\"pecb-confirmation__title\">{{ title() }}</h2>\n\n      @if (message()) {\n        <p [id]=\"messageId\" class=\"pecb-confirmation__message\">{{ message() }}</p>\n      }\n    </div>\n\n    <div class=\"pecb-confirmation__actions\">\n      <button\n        type=\"button\"\n        class=\"pecb-confirmation__btn pecb-confirmation__btn--confirm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText() }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"pecb-confirmation__btn pecb-confirmation__btn--cancel\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText() }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".pecb-confirmation__backdrop{background-color:#00000080}.pecb-confirmation__panel{display:flex;width:616px;max-width:calc(100vw - 32px);padding:22px 20px 30px;flex-direction:column;align-items:center;gap:27px;background:#fff;border-radius:12px;box-shadow:0 10px 10px #0000000d;animation:scaleIn .25s ease-in-out forwards;outline:none}.pecb-confirmation__header{display:flex;justify-content:flex-end;align-items:center;width:100%;height:20px}.pecb-confirmation__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#616161;border-radius:6px;outline:none;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__close-btn:focus{outline:none}.pecb-confirmation__close-btn:hover{color:#313131;background-color:#ececec}.pecb-confirmation__close-btn svg{width:10px;height:10px}.pecb-confirmation__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;flex-shrink:0}.pecb-confirmation__icon--success{background-color:transparent}.pecb-confirmation__icon--warning{background-color:#fff4e5}.pecb-confirmation__icon--error{background-color:#fdecea}.pecb-confirmation__icon--info{background-color:#e6f0fa}.pecb-confirmation__content{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 17px;width:100%}.pecb-confirmation__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;text-align:center}.pecb-confirmation__message{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;color:#616161;text-align:center}.pecb-confirmation__actions{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.pecb-confirmation__btn{border:none;background:none;font:inherit;color:inherit;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:10px 40px;border-radius:6px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;cursor:pointer;white-space:nowrap;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__btn:focus{outline:none}.pecb-confirmation__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-confirmation__btn--confirm{background-color:#212427;color:#fff;border:1px solid #212427}.pecb-confirmation__btn--confirm:hover{background-color:#616161;border-color:#616161}.pecb-confirmation__btn--confirm:active{background-color:#000;border-color:#000}.pecb-confirmation__btn--cancel{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-confirmation__btn--cancel:hover{background-color:#ececec;border-color:#616161}.pecb-confirmation__btn--cancel:active{background-color:#c2c2c2;border-color:#616161}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.pecb-confirmation__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pecb-confirmation', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n  <div\n    [id]=\"id()\"\n    [class]=\"dialogClasses.join(' ')\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"titleId\"\n    [attr.aria-describedby]=\"message() ? messageId : ariaDescribedBy() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <div\n      #dialogPanel\n      class=\"pecb-confirmation__panel\"\n      tabindex=\"-1\"\n    >\n     \n      @if (showCloseButton()) {\n        <div class=\"pecb-confirmation__header\">\n          <button\n            type=\"button\"\n            class=\"pecb-confirmation__close-btn\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n            (click)=\"close()\"\n          >\n            <svg\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 10 10\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M9 1L1 9M1 1L9 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n        </div>\n      }\n\n    \n      <div [class]=\"iconContainerClass\" aria-hidden=\"true\">\n        @switch (iconType()) {\n          @case ('success') {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F4EA\"/>\n              <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n              <path d=\"M31.9991 9.84625C19.7635 9.84625 9.84521 19.7645 9.84521 32.0001C9.84521 44.2357 19.7635 54.1539 31.9991 54.1539C44.2347 54.1539 54.1529 44.2357 54.1529 32.0001C54.1426 19.7645 44.2244 9.84625 31.9991 9.84625ZM43.8227 26.3458L31.8137 41.3725C31.2781 42.0316 30.4954 42.4436 29.6508 42.4951C29.5993 42.4951 29.5375 42.4951 29.486 42.4951C28.693 42.4951 27.9308 42.1861 27.3747 41.6197L20.3917 34.6367C19.2279 33.4729 19.2279 31.5778 20.3917 30.414C21.5555 29.2502 23.4506 29.2502 24.6144 30.414L29.2285 35.0281L39.1571 22.6174C40.187 21.33 42.0615 21.1137 43.3592 22.1539C44.6466 23.1736 44.8526 25.0584 43.8227 26.3458Z\" fill=\"#57BC57\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FFF4E5\"/>\n              <circle cx=\"32.5303\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n              <path d=\"M32.0012 9.84668C44.2362 9.84668 54.1543 19.765 54.1545 32C54.1545 44.2352 44.2364 54.1543 32.0012 54.1543C19.766 54.1543 9.8479 44.2352 9.8479 32C9.84815 19.765 19.7662 9.84668 32.0012 9.84668ZM32.0823 40.2266C30.0029 40.2266 28.3108 41.9187 28.3108 43.998C28.5007 48.9935 35.6636 48.9922 35.8528 43.998C35.8528 41.9188 34.1615 40.2266 32.0823 40.2266ZM35.7727 18.9727C33.9014 16.6513 30.1067 16.6501 28.2346 18.9727C27.2974 20.0886 26.9044 21.5514 27.1555 22.9863C27.9048 27.2673 28.9622 33.3099 29.4368 36.0234C29.9687 38.8793 34.0404 38.8785 34.5715 36.0234L36.8528 22.9863C37.1039 21.5514 36.7101 20.0887 35.7727 18.9727Z\" fill=\"#FF9C4A\"/>\n            </svg>\n          }\n          @case ('error') {\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FDECEA\"/>\n              <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n              <path d=\"M47.6652 16.3349C56.3168 24.9865 56.3168 39.0136 47.6652 47.6652C39.0136 56.3168 24.9865 56.3168 16.3349 47.6652C7.68329 39.0136 7.68329 24.9865 16.3349 16.3349C24.9865 7.68329 39.0136 7.68329 47.6652 16.3349ZM40.2677 22.862C39.3666 21.9609 37.9053 21.9609 37.0042 22.862L31.4561 28.4101C31.2759 28.5903 30.9836 28.5903 30.8034 28.4101L25.2553 22.862C24.3542 21.9609 22.8929 21.9609 21.9918 22.862C21.0906 23.7632 21.0906 25.2245 21.9918 26.1256L27.5398 31.6737C27.7201 31.8539 27.7201 32.1462 27.5398 32.3264L21.9918 37.8745C21.0906 38.7756 21.0906 40.2369 21.9918 41.138C22.8929 42.0392 24.3542 42.0392 25.2553 41.138L30.8034 35.59C30.9836 35.4097 31.2759 35.4097 31.4561 35.59L37.0042 41.138C37.9053 42.0392 39.3666 42.0392 40.2677 41.138C41.1689 40.2369 41.1689 38.7756 40.2677 37.8745L34.7197 32.3264C34.5394 32.1462 34.5394 31.8539 34.7197 31.6737L40.2677 26.1256C41.1689 25.2245 41.1689 23.7632 40.2677 22.862Z\" fill=\"#FF606F\"/>\n            </svg>\n          }\n          @case ('info') {\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F0FA\"/>\n              <circle cx=\"32.5283\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n              <path d=\"M31.9995 9.84668C44.2348 9.84668 54.1534 19.7653 54.1534 32.0005C54.1534 44.2358 44.2348 54.1544 31.9995 54.1544C19.7643 54.1544 9.8457 44.2358 9.8457 32.0005C9.8457 19.7653 19.7643 9.84668 31.9995 9.84668ZM28.3072 26.0943C26.8347 26.0945 25.8457 27.0832 25.8457 28.5558C25.8459 30.0282 26.8349 31.0171 28.3072 31.0174H31.758L28.3072 42.5835C28.0603 43.8088 28.3077 45.2811 29.0488 46.2698C29.7903 47.4952 31.0265 47.9896 32.252 47.9897H36.187C37.67 47.9896 38.6486 47.0112 38.6486 45.5282C38.6484 44.0558 37.6595 43.0668 36.187 43.0666H33.2303L36.681 31.5005C36.9281 30.2751 36.6808 28.8028 35.9395 27.8142C35.1979 26.5886 33.9619 26.0943 32.7363 26.0943H28.3072ZM33.4779 16.0005C31.4387 16.0006 29.7904 17.6488 29.7904 19.688C29.7906 21.7271 31.4388 23.3743 33.4779 23.3743C35.5171 23.3743 37.1652 21.7271 37.1654 19.688C37.1654 17.6488 35.5172 16.0005 33.4779 16.0005Z\" fill=\"#5EACFF\"/>\n            </svg>\n          }\n        }\n      </div>\n\n    \n      <div class=\"pecb-confirmation__content\">\n        <h2 [id]=\"titleId\" class=\"pecb-confirmation__title\">{{ title() }}</h2>\n\n        @if (message()) {\n          <p [id]=\"messageId\" class=\"pecb-confirmation__message\">{{ message() }}</p>\n        }\n      </div>\n\n      \n      <div class=\"pecb-confirmation__actions\">\n        <button\n          type=\"button\"\n          class=\"pecb-confirmation__btn pecb-confirmation__btn--confirm\"\n          (click)=\"onConfirm()\"\n        >\n          {{ confirmText() }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"pecb-confirmation__btn pecb-confirmation__btn--cancel\"\n          (click)=\"onCancel()\"\n        >\n          {{ cancelText() }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".pecb-confirmation{position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;background-color:#00000080;animation:fadeIn .15s ease-in-out forwards}.pecb-confirmation__panel{display:flex;width:616px;max-width:calc(100vw - 32px);padding:22px 20px 30px;flex-direction:column;align-items:center;gap:27px;background:#fff;border-radius:12px;box-shadow:0 10px 10px #0000000d;animation:scaleIn .25s ease-in-out forwards;outline:none}.pecb-confirmation__header{display:flex;justify-content:flex-end;align-items:center;width:100%;height:20px}.pecb-confirmation__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#616161;border-radius:6px;outline:none;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__close-btn:focus{outline:none}.pecb-confirmation__close-btn:hover{color:#313131;background-color:#ececec}.pecb-confirmation__close-btn svg{width:10px;height:10px}.pecb-confirmation__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;flex-shrink:0}.pecb-confirmation__icon--success{background-color:transparent}.pecb-confirmation__icon--warning{background-color:#fff4e5}.pecb-confirmation__icon--error{background-color:#fdecea}.pecb-confirmation__icon--info{background-color:#e6f0fa}.pecb-confirmation__content{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 17px;width:100%}.pecb-confirmation__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;text-align:center}.pecb-confirmation__message{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;color:#616161;text-align:center}.pecb-confirmation__actions{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.pecb-confirmation__btn{border:none;background:none;font:inherit;color:inherit;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:10px 40px;border-radius:6px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;cursor:pointer;white-space:nowrap;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__btn:focus{outline:none}.pecb-confirmation__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-confirmation__btn--confirm{background-color:#212427;color:#fff;border:1px solid #212427}.pecb-confirmation__btn--confirm:hover{background-color:#616161;border-color:#616161}.pecb-confirmation__btn--confirm:active{background-color:#000;border-color:#000}.pecb-confirmation__btn--cancel{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-confirmation__btn--cancel:hover{background-color:#ececec;border-color:#616161}.pecb-confirmation__btn--cancel:active{background-color:#c2c2c2;border-color:#616161}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.pecb-confirmation,.pecb-confirmation__panel{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], closed: [{ type: i0.Output, args: ["closed"] }], dialogPanel: [{
-                type: ViewChild,
-                args: ['dialogPanel']
-            }] } });
+            args: [{ selector: 'pecb-confirmation', imports: [CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #dialogTemplate>\n  <div\n    #dialogPanel\n    [id]=\"id()\"\n    class=\"pecb-confirmation__panel\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"titleId\"\n    [attr.aria-describedby]=\"message() ? messageId : ariaDescribedBy() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n  >\n    @if (showCloseButton()) {\n      <div class=\"pecb-confirmation__header\">\n        <button\n          type=\"button\"\n          class=\"pecb-confirmation__close-btn\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"close()\"\n        >\n          <svg\n            width=\"10\"\n            height=\"10\"\n            viewBox=\"0 0 10 10\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M9 1L1 9M1 1L9 9\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      </div>\n    }\n\n    <div [class]=\"iconContainerClass\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F4EA\"/>\n            <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n            <path d=\"M31.9991 9.84625C19.7635 9.84625 9.84521 19.7645 9.84521 32.0001C9.84521 44.2357 19.7635 54.1539 31.9991 54.1539C44.2347 54.1539 54.1529 44.2357 54.1529 32.0001C54.1426 19.7645 44.2244 9.84625 31.9991 9.84625ZM43.8227 26.3458L31.8137 41.3725C31.2781 42.0316 30.4954 42.4436 29.6508 42.4951C29.5993 42.4951 29.5375 42.4951 29.486 42.4951C28.693 42.4951 27.9308 42.1861 27.3747 41.6197L20.3917 34.6367C19.2279 33.4729 19.2279 31.5778 20.3917 30.414C21.5555 29.2502 23.4506 29.2502 24.6144 30.414L29.2285 35.0281L39.1571 22.6174C40.187 21.33 42.0615 21.1137 43.3592 22.1539C44.6466 23.1736 44.8526 25.0584 43.8227 26.3458Z\" fill=\"#57BC57\"/>\n          </svg>\n        }\n        @case ('warning') {\n          <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FFF4E5\"/>\n            <circle cx=\"32.5303\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n            <path d=\"M32.0012 9.84668C44.2362 9.84668 54.1543 19.765 54.1545 32C54.1545 44.2352 44.2364 54.1543 32.0012 54.1543C19.766 54.1543 9.8479 44.2352 9.8479 32C9.84815 19.765 19.7662 9.84668 32.0012 9.84668ZM32.0823 40.2266C30.0029 40.2266 28.3108 41.9187 28.3108 43.998C28.5007 48.9935 35.6636 48.9922 35.8528 43.998C35.8528 41.9188 34.1615 40.2266 32.0823 40.2266ZM35.7727 18.9727C33.9014 16.6513 30.1067 16.6501 28.2346 18.9727C27.2974 20.0886 26.9044 21.5514 27.1555 22.9863C27.9048 27.2673 28.9622 33.3099 29.4368 36.0234C29.9687 38.8793 34.0404 38.8785 34.5715 36.0234L36.8528 22.9863C37.1039 21.5514 36.7101 20.0887 35.7727 18.9727Z\" fill=\"#FF9C4A\"/>\n          </svg>\n        }\n        @case ('error') {\n          <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#FDECEA\"/>\n            <circle cx=\"31.8243\" cy=\"31.8243\" r=\"18.2857\" fill=\"white\"/>\n            <path d=\"M47.6652 16.3349C56.3168 24.9865 56.3168 39.0136 47.6652 47.6652C39.0136 56.3168 24.9865 56.3168 16.3349 47.6652C7.68329 39.0136 7.68329 24.9865 16.3349 16.3349C24.9865 7.68329 39.0136 7.68329 47.6652 16.3349ZM40.2677 22.862C39.3666 21.9609 37.9053 21.9609 37.0042 22.862L31.4561 28.4101C31.2759 28.5903 30.9836 28.5903 30.8034 28.4101L25.2553 22.862C24.3542 21.9609 22.8929 21.9609 21.9918 22.862C21.0906 23.7632 21.0906 25.2245 21.9918 26.1256L27.5398 31.6737C27.7201 31.8539 27.7201 32.1462 27.5398 32.3264L21.9918 37.8745C21.0906 38.7756 21.0906 40.2369 21.9918 41.138C22.8929 42.0392 24.3542 42.0392 25.2553 41.138L30.8034 35.59C30.9836 35.4097 31.2759 35.4097 31.4561 35.59L37.0042 41.138C37.9053 42.0392 39.3666 42.0392 40.2677 41.138C41.1689 40.2369 41.1689 38.7756 40.2677 37.8745L34.7197 32.3264C34.5394 32.1462 34.5394 31.8539 34.7197 31.6737L40.2677 26.1256C41.1689 25.2245 41.1689 23.7632 40.2677 22.862Z\" fill=\"#FF606F\"/>\n          </svg>\n        }\n        @case ('info') {\n          <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 12C0 5.37258 5.37258 0 12 0H52C58.6274 0 64 5.37258 64 12V52C64 58.6274 58.6274 64 52 64H12C5.37258 64 0 58.6274 0 52V12Z\" fill=\"#E6F0FA\"/>\n            <circle cx=\"32.5283\" cy=\"32.5281\" r=\"18.989\" fill=\"white\"/>\n            <path d=\"M31.9995 9.84668C44.2348 9.84668 54.1534 19.7653 54.1534 32.0005C54.1534 44.2358 44.2348 54.1544 31.9995 54.1544C19.7643 54.1544 9.8457 44.2358 9.8457 32.0005C9.8457 19.7653 19.7643 9.84668 31.9995 9.84668ZM28.3072 26.0943C26.8347 26.0945 25.8457 27.0832 25.8457 28.5558C25.8459 30.0282 26.8349 31.0171 28.3072 31.0174H31.758L28.3072 42.5835C28.0603 43.8088 28.3077 45.2811 29.0488 46.2698C29.7903 47.4952 31.0265 47.9896 32.252 47.9897H36.187C37.67 47.9896 38.6486 47.0112 38.6486 45.5282C38.6484 44.0558 37.6595 43.0668 36.187 43.0666H33.2303L36.681 31.5005C36.9281 30.2751 36.6808 28.8028 35.9395 27.8142C35.1979 26.5886 33.9619 26.0943 32.7363 26.0943H28.3072ZM33.4779 16.0005C31.4387 16.0006 29.7904 17.6488 29.7904 19.688C29.7906 21.7271 31.4388 23.3743 33.4779 23.3743C35.5171 23.3743 37.1652 21.7271 37.1654 19.688C37.1654 17.6488 35.5172 16.0005 33.4779 16.0005Z\" fill=\"#5EACFF\"/>\n          </svg>\n        }\n      }\n    </div>\n\n    <div class=\"pecb-confirmation__content\">\n      <h2 [id]=\"titleId\" class=\"pecb-confirmation__title\">{{ title() }}</h2>\n\n      @if (message()) {\n        <p [id]=\"messageId\" class=\"pecb-confirmation__message\">{{ message() }}</p>\n      }\n    </div>\n\n    <div class=\"pecb-confirmation__actions\">\n      <button\n        type=\"button\"\n        class=\"pecb-confirmation__btn pecb-confirmation__btn--confirm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText() }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"pecb-confirmation__btn pecb-confirmation__btn--cancel\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText() }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".pecb-confirmation__backdrop{background-color:#00000080}.pecb-confirmation__panel{display:flex;width:616px;max-width:calc(100vw - 32px);padding:22px 20px 30px;flex-direction:column;align-items:center;gap:27px;background:#fff;border-radius:12px;box-shadow:0 10px 10px #0000000d;animation:scaleIn .25s ease-in-out forwards;outline:none}.pecb-confirmation__header{display:flex;justify-content:flex-end;align-items:center;width:100%;height:20px}.pecb-confirmation__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#616161;border-radius:6px;outline:none;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__close-btn:focus{outline:none}.pecb-confirmation__close-btn:hover{color:#313131;background-color:#ececec}.pecb-confirmation__close-btn svg{width:10px;height:10px}.pecb-confirmation__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;flex-shrink:0}.pecb-confirmation__icon--success{background-color:transparent}.pecb-confirmation__icon--warning{background-color:#fff4e5}.pecb-confirmation__icon--error{background-color:#fdecea}.pecb-confirmation__icon--info{background-color:#e6f0fa}.pecb-confirmation__content{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 17px;width:100%}.pecb-confirmation__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;text-align:center}.pecb-confirmation__message{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;color:#616161;text-align:center}.pecb-confirmation__actions{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.pecb-confirmation__btn{border:none;background:none;font:inherit;color:inherit;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:10px 40px;border-radius:6px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;cursor:pointer;white-space:nowrap;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-confirmation__btn:focus{outline:none}.pecb-confirmation__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-confirmation__btn--confirm{background-color:#212427;color:#fff;border:1px solid #212427}.pecb-confirmation__btn--confirm:hover{background-color:#616161;border-color:#616161}.pecb-confirmation__btn--confirm:active{background-color:#000;border-color:#000}.pecb-confirmation__btn--cancel{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-confirmation__btn--cancel:hover{background-color:#ececec;border-color:#616161}.pecb-confirmation__btn--cancel:active{background-color:#c2c2c2;border-color:#616161}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.pecb-confirmation__panel{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], closed: [{ type: i0.Output, args: ["closed"] }], dialogTemplate: [{ type: i0.ViewChild, args: ['dialogTemplate', { isSignal: true }] }] } });
 class AlertComponent {
     // Duration of the leave animation; keep in sync with $transition-base (250ms)
@@ -6328,6 +6349,16 @@ class TooltipComponent {
         this.primaryCta = input(undefined, ...(ngDevMode ? [{ debugName: "primaryCta" }] : []));
         this.secondaryCta = input(undefined, ...(ngDevMode ? [{ debugName: "secondaryCta" }] : []));
         this.showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
+        /**
+         * Optional explicit width of the tooltip box (any CSS length, e.g. '330px',
+         * '20rem'). Leave undefined to size to content.
+         */
+        this.width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        /**
+         * Optional explicit height of the tooltip box (any CSS length, e.g. '120px').
+         * Leave undefined to size to content.
+         */
+        this.height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : []));
         /**
          * Whether the tooltip is visible. Manages its own state internally —
          * no consumer binding required. Supports [(visible)] for controlled mode.
@@ -6366,12 +6397,12 @@ class TooltipComponent {
         ].join(' ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: true, selector: "pecb-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, pointerPosition: { classPropertyName: "pointerPosition", publicName: "pointerPosition", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, primaryCta: { classPropertyName: "primaryCta", publicName: "primaryCta", isSignal: true, isRequired: false, transformFunction: null }, secondaryCta: { classPropertyName: "secondaryCta", publicName: "secondaryCta", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed", primaryCtaClick: "primaryCtaClick", secondaryCtaClick: "secondaryCtaClick" }, ngImport: i0, template: "@if (visible()) {\n  <div [class]=\"hostClasses\">\n\n    <!-- \u2500\u2500 Pointer TOP (above container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'top') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--top\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 12L10 0L20 12Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 12L10 1.8L18.2 12Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer LEFT (left of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'left') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--left\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M12 0L0 10L12 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M12 1.8L1.8 10L12 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Main container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"pecb-tooltip__container\">\n      <div class=\"pecb-tooltip__body\">\n\n        <div class=\"pecb-tooltip__content\">\n          <div class=\"pecb-tooltip__texts\">\n            @if (title()) {\n              <p class=\"pecb-tooltip__title\">{{ title() }}</p>\n            }\n            <p class=\"pecb-tooltip__message\">{{ message() }}</p>\n          </div>\n\n          @if (showClose()) {\n            <button\n              type=\"button\"\n              class=\"pecb-tooltip__close\"\n              [attr.aria-label]=\"closeAriaLabel()\"\n              (click)=\"close()\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path class=\"pecb-tooltip__close-icon\" d=\"M15 5L5 15M5 5L15 15\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        @if (hasButtons) {\n          <div class=\"pecb-tooltip__buttons\">\n            @if (secondaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--secondary\" (click)=\"secondaryCtaClick.emit()\">{{ secondaryCta() }}</button>\n            }\n            @if (primaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--primary\" (click)=\"primaryCtaClick.emit()\">{{ primaryCta() }}</button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Pointer RIGHT (right of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'right') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--right\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L12 10L0 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M0 1.8L10.2 10L0 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer BOTTOM (below container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'bottom') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--bottom\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L10 12L20 0Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 0L10 10.2L18.2 0Z\"/>\n        </svg>\n      </div>\n    }\n\n  </div>\n}\n", styles: [".pecb-tooltip{display:inline-flex;flex-direction:column;width:330px}.pecb-tooltip--left-top,.pecb-tooltip--left-center,.pecb-tooltip--left-bottom,.pecb-tooltip--right-top,.pecb-tooltip--right-center,.pecb-tooltip--right-bottom{flex-direction:row;align-items:stretch;width:auto}.pecb-tooltip--left-top>.pecb-tooltip__container,.pecb-tooltip--left-center>.pecb-tooltip__container,.pecb-tooltip--left-bottom>.pecb-tooltip__container,.pecb-tooltip--right-top>.pecb-tooltip__container,.pecb-tooltip--right-center>.pecb-tooltip__container,.pecb-tooltip--right-bottom>.pecb-tooltip__container{width:330px}.pecb-tooltip__pointer--top{display:flex;align-items:flex-end;padding:0 16px;position:relative;z-index:2;margin-bottom:-1px}.pecb-tooltip--top-left>.pecb-tooltip__pointer--top{justify-content:flex-start}.pecb-tooltip--top-center>.pecb-tooltip__pointer--top{justify-content:center}.pecb-tooltip--top-right>.pecb-tooltip__pointer--top{justify-content:flex-end}.pecb-tooltip__pointer--bottom{display:flex;align-items:flex-start;padding:0 16px;position:relative;z-index:2;margin-top:-1px}.pecb-tooltip--bottom-left>.pecb-tooltip__pointer--bottom{justify-content:flex-start}.pecb-tooltip--bottom-center>.pecb-tooltip__pointer--bottom{justify-content:center}.pecb-tooltip--bottom-right>.pecb-tooltip__pointer--bottom{justify-content:flex-end}.pecb-tooltip__container{display:flex;flex-direction:row;align-items:stretch;border-radius:8px;position:relative;z-index:1}.pecb-tooltip--dark .pecb-tooltip__container{background-color:#313131}.pecb-tooltip--light .pecb-tooltip__container{background-color:#fff;border:1px solid #ececec}.pecb-tooltip__pointer--left{display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;position:relative;z-index:2;margin-right:-1px}.pecb-tooltip--left-top>.pecb-tooltip__pointer--left{justify-content:flex-start;padding-top:16px}.pecb-tooltip--left-center>.pecb-tooltip__pointer--left{justify-content:center}.pecb-tooltip--left-bottom>.pecb-tooltip__pointer--left{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__pointer--right{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;position:relative;z-index:2;margin-left:-1px}.pecb-tooltip--right-top>.pecb-tooltip__pointer--right{justify-content:flex-start;padding-top:16px}.pecb-tooltip--right-center>.pecb-tooltip__pointer--right{justify-content:center}.pecb-tooltip--right-bottom>.pecb-tooltip__pointer--right{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__body{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px}.pecb-tooltip__content{display:flex;gap:8px;align-items:flex-start;width:100%}.pecb-tooltip__texts{flex:1;display:flex;flex-direction:column;gap:4px}.pecb-tooltip__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:normal;margin:0}.pecb-tooltip--dark .pecb-tooltip__title{color:#fff}.pecb-tooltip--light .pecb-tooltip__title{color:#212427}.pecb-tooltip__message{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.5;margin:0}.pecb-tooltip--dark .pecb-tooltip__message{color:#ececec}.pecb-tooltip--light .pecb-tooltip__message{color:#919191}.pecb-tooltip__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;background:none;border:none;cursor:pointer;transition:opacity .15s ease-in-out}.pecb-tooltip__close:hover{opacity:.7}.pecb-tooltip__close:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__close-icon{stroke:#ececec}.pecb-tooltip--light .pecb-tooltip__close-icon{stroke:#212427}.pecb-tooltip__buttons{display:flex;align-items:center;gap:24px}.pecb-tooltip__btn{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;transition:opacity .15s ease-in-out}.pecb-tooltip__btn:hover{opacity:.8}.pecb-tooltip__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__btn--primary{color:#a11e29}.pecb-tooltip__btn--secondary{color:#919191}.pecb-tooltip--light .pecb-tooltip__btn--secondary{color:#212427}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: true, selector: "pecb-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, pointerPosition: { classPropertyName: "pointerPosition", publicName: "pointerPosition", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, primaryCta: { classPropertyName: "primaryCta", publicName: "primaryCta", isSignal: true, isRequired: false, transformFunction: null }, secondaryCta: { classPropertyName: "secondaryCta", publicName: "secondaryCta", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed", primaryCtaClick: "primaryCtaClick", secondaryCtaClick: "secondaryCtaClick" }, ngImport: i0, template: "@if (visible()) {\n  <div [class]=\"hostClasses\">\n\n    <!-- \u2500\u2500 Pointer TOP (above container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'top') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--top\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 12L10 0L20 12Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 12L10 1.8L18.2 12Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer LEFT (left of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'left') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--left\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M12 0L0 10L12 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M12 1.8L1.8 10L12 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Main container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"pecb-tooltip__container\" [style.width]=\"width()\" [style.height]=\"height()\">\n      <div class=\"pecb-tooltip__body\">\n\n        <div class=\"pecb-tooltip__content\">\n          <div class=\"pecb-tooltip__texts\">\n            @if (title()) {\n              <p class=\"pecb-tooltip__title\">{{ title() }}</p>\n            }\n            <p class=\"pecb-tooltip__message\">{{ message() }}</p>\n          </div>\n\n          @if (showClose()) {\n            <button\n              type=\"button\"\n              class=\"pecb-tooltip__close\"\n              [attr.aria-label]=\"closeAriaLabel()\"\n              (click)=\"close()\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path class=\"pecb-tooltip__close-icon\" d=\"M15 5L5 15M5 5L15 15\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        @if (hasButtons) {\n          <div class=\"pecb-tooltip__buttons\">\n            @if (secondaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--secondary\" (click)=\"secondaryCtaClick.emit()\">{{ secondaryCta() }}</button>\n            }\n            @if (primaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--primary\" (click)=\"primaryCtaClick.emit()\">{{ primaryCta() }}</button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Pointer RIGHT (right of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'right') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--right\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L12 10L0 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M0 1.8L10.2 10L0 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer BOTTOM (below container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'bottom') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--bottom\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L10 12L20 0Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 0L10 10.2L18.2 0Z\"/>\n        </svg>\n      </div>\n    }\n\n  </div>\n}\n", styles: [".pecb-tooltip{display:inline-flex;flex-direction:column;width:auto;height:auto}.pecb-tooltip--left-top,.pecb-tooltip--left-center,.pecb-tooltip--left-bottom,.pecb-tooltip--right-top,.pecb-tooltip--right-center,.pecb-tooltip--right-bottom{flex-direction:row;align-items:stretch;width:auto}.pecb-tooltip--left-top>.pecb-tooltip__container,.pecb-tooltip--left-center>.pecb-tooltip__container,.pecb-tooltip--left-bottom>.pecb-tooltip__container,.pecb-tooltip--right-top>.pecb-tooltip__container,.pecb-tooltip--right-center>.pecb-tooltip__container,.pecb-tooltip--right-bottom>.pecb-tooltip__container{width:auto}.pecb-tooltip__pointer--top{display:flex;align-items:flex-end;padding:0 16px;position:relative;z-index:2;margin-bottom:-1px}.pecb-tooltip--top-left>.pecb-tooltip__pointer--top{justify-content:flex-start}.pecb-tooltip--top-center>.pecb-tooltip__pointer--top{justify-content:center}.pecb-tooltip--top-right>.pecb-tooltip__pointer--top{justify-content:flex-end}.pecb-tooltip__pointer--bottom{display:flex;align-items:flex-start;padding:0 16px;position:relative;z-index:2;margin-top:-1px}.pecb-tooltip--bottom-left>.pecb-tooltip__pointer--bottom{justify-content:flex-start}.pecb-tooltip--bottom-center>.pecb-tooltip__pointer--bottom{justify-content:center}.pecb-tooltip--bottom-right>.pecb-tooltip__pointer--bottom{justify-content:flex-end}.pecb-tooltip__container{display:flex;flex-direction:row;align-items:stretch;border-radius:8px;position:relative;z-index:1}.pecb-tooltip--dark .pecb-tooltip__container{background-color:#313131}.pecb-tooltip--light .pecb-tooltip__container{background-color:#fff;border:1px solid #ececec}.pecb-tooltip__pointer--left{display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;position:relative;z-index:2;margin-right:-1px}.pecb-tooltip--left-top>.pecb-tooltip__pointer--left{justify-content:flex-start;padding-top:16px}.pecb-tooltip--left-center>.pecb-tooltip__pointer--left{justify-content:center}.pecb-tooltip--left-bottom>.pecb-tooltip__pointer--left{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__pointer--right{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;position:relative;z-index:2;margin-left:-1px}.pecb-tooltip--right-top>.pecb-tooltip__pointer--right{justify-content:flex-start;padding-top:16px}.pecb-tooltip--right-center>.pecb-tooltip__pointer--right{justify-content:center}.pecb-tooltip--right-bottom>.pecb-tooltip__pointer--right{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__body{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px}.pecb-tooltip__content{display:flex;gap:8px;align-items:flex-start;width:100%}.pecb-tooltip__texts{flex:1;display:flex;flex-direction:column;gap:4px}.pecb-tooltip__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:normal;margin:0}.pecb-tooltip--dark .pecb-tooltip__title{color:#fff}.pecb-tooltip--light .pecb-tooltip__title{color:#212427}.pecb-tooltip__message{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.5;margin:0}.pecb-tooltip--dark .pecb-tooltip__message{color:#ececec}.pecb-tooltip--light .pecb-tooltip__message{color:#919191}.pecb-tooltip__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;background:none;border:none;cursor:pointer;transition:opacity .15s ease-in-out}.pecb-tooltip__close:hover{opacity:.7}.pecb-tooltip__close:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__close-icon{stroke:#ececec}.pecb-tooltip--light .pecb-tooltip__close-icon{stroke:#212427}.pecb-tooltip__buttons{display:flex;align-items:center;gap:24px}.pecb-tooltip__btn{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;transition:opacity .15s ease-in-out}.pecb-tooltip__btn:hover{opacity:.8}.pecb-tooltip__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__btn--primary{color:#a11e29}.pecb-tooltip__btn--secondary{color:#919191}.pecb-tooltip--light .pecb-tooltip__btn--secondary{color:#212427}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pecb-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div [class]=\"hostClasses\">\n\n    <!-- \u2500\u2500 Pointer TOP (above container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'top') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--top\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 12L10 0L20 12Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 12L10 1.8L18.2 12Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer LEFT (left of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'left') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--left\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M12 0L0 10L12 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M12 1.8L1.8 10L12 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Main container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"pecb-tooltip__container\">\n      <div class=\"pecb-tooltip__body\">\n\n        <div class=\"pecb-tooltip__content\">\n          <div class=\"pecb-tooltip__texts\">\n            @if (title()) {\n              <p class=\"pecb-tooltip__title\">{{ title() }}</p>\n            }\n            <p class=\"pecb-tooltip__message\">{{ message() }}</p>\n          </div>\n\n          @if (showClose()) {\n            <button\n              type=\"button\"\n              class=\"pecb-tooltip__close\"\n              [attr.aria-label]=\"closeAriaLabel()\"\n              (click)=\"close()\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path class=\"pecb-tooltip__close-icon\" d=\"M15 5L5 15M5 5L15 15\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        @if (hasButtons) {\n          <div class=\"pecb-tooltip__buttons\">\n            @if (secondaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--secondary\" (click)=\"secondaryCtaClick.emit()\">{{ secondaryCta() }}</button>\n            }\n            @if (primaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--primary\" (click)=\"primaryCtaClick.emit()\">{{ primaryCta() }}</button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Pointer RIGHT (right of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'right') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--right\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L12 10L0 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M0 1.8L10.2 10L0 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer BOTTOM (below container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'bottom') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--bottom\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L10 12L20 0Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 0L10 10.2L18.2 0Z\"/>\n        </svg>\n      </div>\n    }\n\n  </div>\n}\n", styles: [".pecb-tooltip{display:inline-flex;flex-direction:column;width:330px}.pecb-tooltip--left-top,.pecb-tooltip--left-center,.pecb-tooltip--left-bottom,.pecb-tooltip--right-top,.pecb-tooltip--right-center,.pecb-tooltip--right-bottom{flex-direction:row;align-items:stretch;width:auto}.pecb-tooltip--left-top>.pecb-tooltip__container,.pecb-tooltip--left-center>.pecb-tooltip__container,.pecb-tooltip--left-bottom>.pecb-tooltip__container,.pecb-tooltip--right-top>.pecb-tooltip__container,.pecb-tooltip--right-center>.pecb-tooltip__container,.pecb-tooltip--right-bottom>.pecb-tooltip__container{width:330px}.pecb-tooltip__pointer--top{display:flex;align-items:flex-end;padding:0 16px;position:relative;z-index:2;margin-bottom:-1px}.pecb-tooltip--top-left>.pecb-tooltip__pointer--top{justify-content:flex-start}.pecb-tooltip--top-center>.pecb-tooltip__pointer--top{justify-content:center}.pecb-tooltip--top-right>.pecb-tooltip__pointer--top{justify-content:flex-end}.pecb-tooltip__pointer--bottom{display:flex;align-items:flex-start;padding:0 16px;position:relative;z-index:2;margin-top:-1px}.pecb-tooltip--bottom-left>.pecb-tooltip__pointer--bottom{justify-content:flex-start}.pecb-tooltip--bottom-center>.pecb-tooltip__pointer--bottom{justify-content:center}.pecb-tooltip--bottom-right>.pecb-tooltip__pointer--bottom{justify-content:flex-end}.pecb-tooltip__container{display:flex;flex-direction:row;align-items:stretch;border-radius:8px;position:relative;z-index:1}.pecb-tooltip--dark .pecb-tooltip__container{background-color:#313131}.pecb-tooltip--light .pecb-tooltip__container{background-color:#fff;border:1px solid #ececec}.pecb-tooltip__pointer--left{display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;position:relative;z-index:2;margin-right:-1px}.pecb-tooltip--left-top>.pecb-tooltip__pointer--left{justify-content:flex-start;padding-top:16px}.pecb-tooltip--left-center>.pecb-tooltip__pointer--left{justify-content:center}.pecb-tooltip--left-bottom>.pecb-tooltip__pointer--left{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__pointer--right{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;position:relative;z-index:2;margin-left:-1px}.pecb-tooltip--right-top>.pecb-tooltip__pointer--right{justify-content:flex-start;padding-top:16px}.pecb-tooltip--right-center>.pecb-tooltip__pointer--right{justify-content:center}.pecb-tooltip--right-bottom>.pecb-tooltip__pointer--right{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__body{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px}.pecb-tooltip__content{display:flex;gap:8px;align-items:flex-start;width:100%}.pecb-tooltip__texts{flex:1;display:flex;flex-direction:column;gap:4px}.pecb-tooltip__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:normal;margin:0}.pecb-tooltip--dark .pecb-tooltip__title{color:#fff}.pecb-tooltip--light .pecb-tooltip__title{color:#212427}.pecb-tooltip__message{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.5;margin:0}.pecb-tooltip--dark .pecb-tooltip__message{color:#ececec}.pecb-tooltip--light .pecb-tooltip__message{color:#919191}.pecb-tooltip__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;background:none;border:none;cursor:pointer;transition:opacity .15s ease-in-out}.pecb-tooltip__close:hover{opacity:.7}.pecb-tooltip__close:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__close-icon{stroke:#ececec}.pecb-tooltip--light .pecb-tooltip__close-icon{stroke:#212427}.pecb-tooltip__buttons{display:flex;align-items:center;gap:24px}.pecb-tooltip__btn{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;transition:opacity .15s ease-in-out}.pecb-tooltip__btn:hover{opacity:.8}.pecb-tooltip__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__btn--primary{color:#a11e29}.pecb-tooltip__btn--secondary{color:#919191}.pecb-tooltip--light .pecb-tooltip__btn--secondary{color:#212427}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], pointerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointerPosition", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], primaryCta: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryCta", required: false }] }], secondaryCta: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryCta", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], primaryCtaClick: [{ type: i0.Output, args: ["primaryCtaClick"] }], secondaryCtaClick: [{ type: i0.Output, args: ["secondaryCtaClick"] }] } });
+            args: [{ selector: 'pecb-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div [class]=\"hostClasses\">\n\n    <!-- \u2500\u2500 Pointer TOP (above container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'top') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--top\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 12L10 0L20 12Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 12L10 1.8L18.2 12Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer LEFT (left of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'left') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--left\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M12 0L0 10L12 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M12 1.8L1.8 10L12 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Main container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"pecb-tooltip__container\" [style.width]=\"width()\" [style.height]=\"height()\">\n      <div class=\"pecb-tooltip__body\">\n\n        <div class=\"pecb-tooltip__content\">\n          <div class=\"pecb-tooltip__texts\">\n            @if (title()) {\n              <p class=\"pecb-tooltip__title\">{{ title() }}</p>\n            }\n            <p class=\"pecb-tooltip__message\">{{ message() }}</p>\n          </div>\n\n          @if (showClose()) {\n            <button\n              type=\"button\"\n              class=\"pecb-tooltip__close\"\n              [attr.aria-label]=\"closeAriaLabel()\"\n              (click)=\"close()\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path class=\"pecb-tooltip__close-icon\" d=\"M15 5L5 15M5 5L15 15\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          }\n        </div>\n\n        @if (hasButtons) {\n          <div class=\"pecb-tooltip__buttons\">\n            @if (secondaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--secondary\" (click)=\"secondaryCtaClick.emit()\">{{ secondaryCta() }}</button>\n            }\n            @if (primaryCta()) {\n              <button type=\"button\" class=\"pecb-tooltip__btn pecb-tooltip__btn--primary\" (click)=\"primaryCtaClick.emit()\">{{ primaryCta() }}</button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Pointer RIGHT (right of container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'right') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--right\">\n        <svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L12 10L0 20Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M0 1.8L10.2 10L0 18.2Z\"/>\n        </svg>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Pointer BOTTOM (below container) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (pointerSide === 'bottom') {\n      <div class=\"pecb-tooltip__pointer pecb-tooltip__pointer--bottom\">\n        <svg width=\"20\" height=\"12\" viewBox=\"0 0 20 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path [attr.fill]=\"ptrBorderFill\" d=\"M0 0L10 12L20 0Z\"/>\n          <path [attr.fill]=\"ptrBodyFill\"   d=\"M1.8 0L10 10.2L18.2 0Z\"/>\n        </svg>\n      </div>\n    }\n\n  </div>\n}\n", styles: [".pecb-tooltip{display:inline-flex;flex-direction:column;width:auto;height:auto}.pecb-tooltip--left-top,.pecb-tooltip--left-center,.pecb-tooltip--left-bottom,.pecb-tooltip--right-top,.pecb-tooltip--right-center,.pecb-tooltip--right-bottom{flex-direction:row;align-items:stretch;width:auto}.pecb-tooltip--left-top>.pecb-tooltip__container,.pecb-tooltip--left-center>.pecb-tooltip__container,.pecb-tooltip--left-bottom>.pecb-tooltip__container,.pecb-tooltip--right-top>.pecb-tooltip__container,.pecb-tooltip--right-center>.pecb-tooltip__container,.pecb-tooltip--right-bottom>.pecb-tooltip__container{width:auto}.pecb-tooltip__pointer--top{display:flex;align-items:flex-end;padding:0 16px;position:relative;z-index:2;margin-bottom:-1px}.pecb-tooltip--top-left>.pecb-tooltip__pointer--top{justify-content:flex-start}.pecb-tooltip--top-center>.pecb-tooltip__pointer--top{justify-content:center}.pecb-tooltip--top-right>.pecb-tooltip__pointer--top{justify-content:flex-end}.pecb-tooltip__pointer--bottom{display:flex;align-items:flex-start;padding:0 16px;position:relative;z-index:2;margin-top:-1px}.pecb-tooltip--bottom-left>.pecb-tooltip__pointer--bottom{justify-content:flex-start}.pecb-tooltip--bottom-center>.pecb-tooltip__pointer--bottom{justify-content:center}.pecb-tooltip--bottom-right>.pecb-tooltip__pointer--bottom{justify-content:flex-end}.pecb-tooltip__container{display:flex;flex-direction:row;align-items:stretch;border-radius:8px;position:relative;z-index:1}.pecb-tooltip--dark .pecb-tooltip__container{background-color:#313131}.pecb-tooltip--light .pecb-tooltip__container{background-color:#fff;border:1px solid #ececec}.pecb-tooltip__pointer--left{display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;position:relative;z-index:2;margin-right:-1px}.pecb-tooltip--left-top>.pecb-tooltip__pointer--left{justify-content:flex-start;padding-top:16px}.pecb-tooltip--left-center>.pecb-tooltip__pointer--left{justify-content:center}.pecb-tooltip--left-bottom>.pecb-tooltip__pointer--left{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__pointer--right{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;position:relative;z-index:2;margin-left:-1px}.pecb-tooltip--right-top>.pecb-tooltip__pointer--right{justify-content:flex-start;padding-top:16px}.pecb-tooltip--right-center>.pecb-tooltip__pointer--right{justify-content:center}.pecb-tooltip--right-bottom>.pecb-tooltip__pointer--right{justify-content:flex-end;padding-bottom:16px}.pecb-tooltip__body{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px}.pecb-tooltip__content{display:flex;gap:8px;align-items:flex-start;width:100%}.pecb-tooltip__texts{flex:1;display:flex;flex-direction:column;gap:4px}.pecb-tooltip__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:normal;margin:0}.pecb-tooltip--dark .pecb-tooltip__title{color:#fff}.pecb-tooltip--light .pecb-tooltip__title{color:#212427}.pecb-tooltip__message{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.5;margin:0}.pecb-tooltip--dark .pecb-tooltip__message{color:#ececec}.pecb-tooltip--light .pecb-tooltip__message{color:#919191}.pecb-tooltip__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;background:none;border:none;cursor:pointer;transition:opacity .15s ease-in-out}.pecb-tooltip__close:hover{opacity:.7}.pecb-tooltip__close:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__close-icon{stroke:#ececec}.pecb-tooltip--light .pecb-tooltip__close-icon{stroke:#212427}.pecb-tooltip__buttons{display:flex;align-items:center;gap:24px}.pecb-tooltip__btn{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:normal;transition:opacity .15s ease-in-out}.pecb-tooltip__btn:hover{opacity:.8}.pecb-tooltip__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:2px}.pecb-tooltip__btn--primary{color:#a11e29}.pecb-tooltip__btn--secondary{color:#919191}.pecb-tooltip--light .pecb-tooltip__btn--secondary{color:#212427}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], pointerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointerPosition", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], primaryCta: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryCta", required: false }] }], secondaryCta: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryCta", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], primaryCtaClick: [{ type: i0.Output, args: ["primaryCtaClick"] }], secondaryCtaClick: [{ type: i0.Output, args: ["secondaryCtaClick"] }] } });
 const GAP = 2; // px gap between tooltip pointer tip and the host element
 class TooltipDirective {
@@ -10625,11 +10656,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], socialStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "socialStyle", required: false }] }], flagShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagShape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], defaultAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAriaLabel", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }] } });
 /**
- * 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
@@ -10637,14 +10668,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *
  * @Component({...})
  * export class MyComponent {
- *   constructor(private notificationService: NotificationService) {}
- *
- *   showSuccess(): void {
- *     this.notificationService.success('Operation completed successfully!');
- *   }
+ *   private notify = inject(NotificationService);
  *
- *   showError(): void {
- *     this.notificationService.error('An error occurred', 'Error Title');
+ *   save(): void {
+ *     this.notify.success('Saved!');
+ *     this.notify.error('Something went wrong', 'Error');
  *   }
  * }
  * ```
@@ -10653,6 +10681,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  */
 class NotificationService {
     constructor() {
+        this.overlay = inject(Overlay);
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        // Legacy reactive streams — kept for backward compatibility. Rendering is now
+        // handled directly by this service, so subscribing to these is no longer
+        // required to display notifications.
         this.notificationSubject = new Subject();
         this.dismissSubject = new Subject();
         this.clearSubject = new Subject();
@@ -10660,22 +10694,22 @@ class NotificationService {
         this.defaultDuration = 5000;
         /** Default position for notifications */
         this.defaultPosition = 'top-right';
-    }
-    /**
-     * Observable stream of notifications
-     */
+        /** Time to keep a toast mounted after dismiss so its leave animation can play. */
+        this.leaveAnimationMs = 300;
+        /** One shared overlay (a vertical stack) per on-screen position. */
+        this.stacks = new Map();
+        /** All live toasts, keyed by their id. */
+        this.toasts = new Map();
+    }
+    /** @deprecated Notifications now render automatically; no need to subscribe. */
     get notifications$() {
         return this.notificationSubject.asObservable();
     }
-    /**
-     * Observable stream of dismissed notification IDs
-     */
+    /** @deprecated Notifications now render automatically; no need to subscribe. */
     get dismiss$() {
         return this.dismissSubject.asObservable();
     }
-    /**
-     * Observable stream for clear all events
-     */
+    /** @deprecated Notifications now render automatically; no need to subscribe. */
     get clear$() {
         return this.clearSubject.asObservable();
     }
@@ -10722,18 +10756,58 @@ class NotificationService {
      */
     show(config) {
         const id = config.id || this.generateId();
-        const notification = {
+        const position = config.position ?? this.defaultPosition;
+        const duration = config.duration ?? this.defaultDuration;
+        const dismissible = config.dismissible ?? true;
+        // Legacy stream for any pre-existing subscribers.
+        this.notificationSubject.next({
             id,
             message: config.message,
             title: config.title,
             type: config.type,
-            duration: config.duration ?? this.defaultDuration,
-            dismissible: config.dismissible ?? true,
-            position: config.position ?? this.defaultPosition,
+            duration,
+            dismissible,
+            position,
             customClass: config.customClass,
             timestamp: new Date()
-        };
-        this.notificationSubject.next(notification);
+        });
+        const overlayRef = this.getStack(position);
+        // Build the alert imperatively and drop it into the stack's pane.
+        const componentRef = createComponent(AlertComponent, {
+            environmentInjector: this.environmentInjector
+        });
+        componentRef.setInput('type', config.type);
+        componentRef.setInput('variant', config.variant ?? 'banner');
+        componentRef.setInput('title', config.title ?? '');
+        componentRef.setInput('message', config.message);
+        componentRef.setInput('dismissible', dismissible);
+        componentRef.setInput('primaryAction', config.primaryAction);
+        componentRef.setInput('secondaryAction', config.secondaryAction);
+        const host = componentRef.location.nativeElement;
+        host.style.pointerEvents = 'auto';
+        if (config.customClass) {
+            host.classList.add(config.customClass);
+        }
+        this.appRef.attachView(componentRef.hostView);
+        overlayRef.overlayElement.appendChild(host);
+        // User clicked the × — start the removal (leave animation + unmount).
+        componentRef.instance.dismissed.subscribe(() => this.remove(id));
+        // Action buttons: run the callback, then dismiss unless it returns false.
+        componentRef.instance.primaryActionClick.subscribe(() => {
+            if (config.onPrimaryAction?.() !== false) {
+                this.remove(id);
+            }
+        });
+        componentRef.instance.secondaryActionClick.subscribe(() => {
+            if (config.onSecondaryAction?.() !== false) {
+                this.remove(id);
+            }
+        });
+        const toast = { componentRef, position };
+        this.toasts.set(id, toast);
+        if (duration > 0) {
+            toast.removeTimer = setTimeout(() => this.remove(id), duration);
+        }
         return id;
     }
     /**
@@ -10742,12 +10816,78 @@ class NotificationService {
      */
     dismiss(id) {
         this.dismissSubject.next(id);
+        this.remove(id);
     }
     /**
      * Clear all notifications
      */
     clearAll() {
         this.clearSubject.next();
+        for (const id of [...this.toasts.keys()]) {
+            this.remove(id);
+        }
+    }
+    /** Get (or lazily create) the overlay stack for a screen position. */
+    getStack(position) {
+        let overlayRef = this.stacks.get(position);
+        if (overlayRef) {
+            return overlayRef;
+        }
+        const [vertical, horizontal] = position.split('-');
+        overlayRef = this.overlay.create({
+            // Toasts must never block the page underneath.
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.noop()
+        });
+        // We position the stack manually rather than via a CDK position strategy:
+        // the strategy's apply() only runs once a portal is attached, but we append
+        // toast elements straight into the pane (so several can share one stack).
+        // The `cdk-global-overlay-wrapper` class (normally added by the global
+        // strategy) makes the host a full-viewport flexbox; aligning it then places
+        // the pane in the chosen corner.
+        const wrapper = overlayRef.hostElement;
+        wrapper.classList.add('cdk-global-overlay-wrapper');
+        wrapper.style.justifyContent =
+            horizontal === 'center' ? 'center' : horizontal === 'right' ? 'flex-end' : 'flex-start';
+        wrapper.style.alignItems = vertical === 'top' ? 'flex-start' : 'flex-end';
+        // Lay the toasts out as a vertical, non-blocking column. Bottom positions
+        // grow upward so the newest toast sits nearest the edge.
+        const pane = overlayRef.overlayElement;
+        pane.style.position = 'static'; // let the flex wrapper place it
+        pane.style.margin = '16px';
+        pane.style.display = 'flex';
+        pane.style.flexDirection = vertical === 'top' ? 'column' : 'column-reverse';
+        pane.style.gap = '12px';
+        pane.style.width = '380px';
+        pane.style.maxWidth = 'calc(100vw - 32px)';
+        pane.style.pointerEvents = 'none';
+        this.stacks.set(position, overlayRef);
+        return overlayRef;
+    }
+    /** Play the leave animation, then unmount the toast and tidy up its stack. */
+    remove(id) {
+        const toast = this.toasts.get(id);
+        if (!toast) {
+            return;
+        }
+        this.toasts.delete(id);
+        clearTimeout(toast.removeTimer);
+        // Triggers the alert's leave animation (see AlertComponent.visible/leaving).
+        toast.componentRef.instance.visible.set(false);
+        setTimeout(() => {
+            this.appRef.detachView(toast.componentRef.hostView);
+            toast.componentRef.destroy();
+            this.disposeStackIfEmpty(toast.position);
+        }, this.leaveAnimationMs);
+    }
+    /** Dispose a position's overlay once it holds no more toasts. */
+    disposeStackIfEmpty(position) {
+        const stillUsed = [...this.toasts.values()].some((t) => t.position === position);
+        if (stillUsed) {
+            return;
+        }
+        this.stacks.get(position)?.dispose();
+        this.stacks.delete(position);
     }
     /**
      * Generate a unique notification ID