ngx-opalbytes-components 1.23.0 → 1.25.0

package/README.md

@@ -253,7 +253,8 @@ src/
             ├── base-table/
             ├── base-table-paginated/
             ├── base-dialog/
-            └── base-alert/
+            ├── base-alert/
+            └── base-widget/
             
 ```
 
@@ -583,6 +584,144 @@ Para personalizar a aparência ou o comportamento dos dialogos, você pode esten
     ```
 ---
 
+### `BaseWidget` e `CaoWidgetService`
+
+Um painel lateral (drawer) para formulários e fluxos que precisam de mais espaço, aberto via `Overlay` do `@angular/cdk`. O componente fornece o backdrop, o header e a área de conteúdo com scroll; o `CaoWidgetService` é responsável por abrir o widget e integrá-lo ao histórico do navegador.
+
+**Seletor:** `<cao-base-widget>`
+
+**Classe genérica:** `CaoBaseWidgetComponent<TData>` — a forma recomendada de uso é **estender** o componente para criar widgets concretos e tipar o `widgetData`.
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `title` | `string` | `'Titulo'` | Título exibido no header do widget. |
+| `subtitle` | `string` | `''` | Subtítulo exibido abaixo do título. |
+| `widgetIcon` | `string` | `''` | Ícone do widget (disponível para classes derivadas). |
+| `widgetData` | `TData \| undefined` | `undefined` | Dados genéricos passados ao conteúdo do widget. |
+| `cancelTextButton` | `string` | `'Cancelar'` | Texto do botão de cancelamento (disponível para classes derivadas). |
+| `saveTextButton` | `string` | `'Gerar'` | Texto do botão de ação principal (disponível para classes derivadas). |
+| `displayActionButton` | `boolean` | `true` | Exibe o botão principal (disponível para classes derivadas). |
+| `displaySaveButton` | `boolean` | `true` | Exibe o botão de salvar (disponível para classes derivadas). |
+| `displayCancelButton` | `boolean` | `true` | Exibe o botão de cancelar (disponível para classes derivadas). |
+| `shouldCloseWhenCancel` | `boolean` | `true` | Define se o cancelamento deve fechar o widget (disponível para classes derivadas). |
+| `typeCancel` | `'cancel' \| 'back'` | `'cancel'` | Tipo do botão de cancelamento (disponível para classes derivadas). |
+| `saveDisabled` | `boolean` | `false` | Desabilita a ação de salvar (disponível para classes derivadas). |
+| `saveIcon` | `string` | `'arrow-right'` | Ícone do botão de salvar (disponível para classes derivadas). |
+| `saveIconPosition` | `'leading' \| 'trailing'` | `'trailing'` | Posição do ícone do botão de salvar (disponível para classes derivadas). |
+| `closeOnClickOutside` | `boolean` | `true` | Fecha o widget ao clicar no backdrop. |
+| `confirmOnClose` | `boolean` | `false` | Exige confirmação antes de fechar (disponível para classes derivadas). |
+
+> **Nota:** o template base atual renderiza o header (`title`/`subtitle` + projeção `widget-title`) e a área de conteúdo com scroll. `widgetIcon`, os textos e os controles de ação (`display*`, `saveIcon`, `saveIconPosition`, `saveDisabled`, `typeCancel`, `shouldCloseWhenCancel`, `confirmOnClose`) ficam disponíveis na classe para que componentes derivados montem sua própria barra de ações.
+
+**Eventos (Outputs)**
+
+| Evento | Tipo | Descrição |
+| --- | --- | --- |
+| `save` | `output<void>` | Emitido quando a ação de salvar é acionada. |
+| `deleted` | `output<void>` | Emitido quando a ação de exclusão é acionada. |
+| `cancelEvent` | `output<void>` | Emitido quando o usuário cancela. |
+| `closeRequest` | `output<void>` | Emitido ao final da animação de fechamento. |
+
+**Métodos**
+
+| Método | Descrição |
+| --- | --- |
+| `closeWidget()` | Inicia o fechamento com animação e emite `closeRequest` ao final. Chamadas repetidas são ignoradas. |
+| `saveWidget()` | Emite o evento `save`. |
+| `cancelWidget()` | Emite o evento `cancelEvent`. |
+| `deletedWidget()` | Emite o evento `deleted`. |
+| `onEscapeKey()` | Fecha o widget ao pressionar `ESC`. |
+| `onBackdropMouseDown(event)` / `onBackdropMouseUp(event)` | Controlam o fechamento por clique no backdrop, ignorando arrastes que começam no backdrop e terminam no painel. |
+| `forwardCloseRequest()` | Repassa o evento `closeRequest` (útil em classes derivadas). |
+
+**Projeção de conteúdo**
+
+- Slot padrão (`<ng-content />`): conteúdo do widget, renderizado dentro da área com scroll.
+- Slot nomeado `<widget-title>`: conteúdo adicional no header, ao lado do título.
+
+**Interface `ICaoWidgetOptions<TData>`**
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `inputs` | `Partial<Record<string, unknown>>` | Inputs aplicados ao componente no momento da abertura. |
+| `data` | `TData` | Atalho para o input `widgetData`. |
+| `onSave` | `() => void` | Callback executado quando o widget emite `save`. |
+| `onDelete` | `() => void` | Callback executado quando o widget emite `deleted`. |
+| `onClose` | `() => void` | Callback executado ao fechar o widget. |
+
+**`CaoWidgetService`**
+
+| Método | Descrição |
+| --- | --- |
+| `open<TComponent>(component, options?)` | Abre o componente informado em um overlay. Apenas um widget fica aberto por vez: se já houver um, ele é descartado antes de abrir o novo. |
+| `close()` | Fecha o widget aberto programaticamente. |
+
+**Comportamentos importantes**
+
+- O overlay é criado **sem backdrop próprio** e com scroll bloqueado; o backdrop visual e as animações vêm do `BaseWidget`.
+- Ao abrir, o serviço registra um estado no histórico do navegador. O botão **voltar** fecha o widget, e o fechamento pelo componente também retorna o histórico.
+- Os eventos `save`, `deleted` e `closeRequest` são conectados automaticamente aos callbacks `onSave`, `onDelete` e `onClose`.
+- O serviço depende de `window`/`history`, portanto requer ambiente de browser (atenção em SSR).
+
+**CSS Custom Properties**
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--widget-animation-duration` | `250ms` | Duração das animações de entrada e saída do widget. |
+
+**Exemplo de uso — criando um widget**
+
+```typescript
+// gerar-exames.widget.ts
+import { Component } from '@angular/core';
+import { CaoBaseWidgetComponent } from 'ngx-opalbytes-components';
+
+@Component({
+  selector: 'app-gerar-exames-widget',
+  imports: [CaoBaseWidgetComponent],
+  template: `
+    <cao-base-widget
+      title="Gerar exames"
+      subtitle="Selecione as sessões"
+      [widgetData]="widgetData()"
+      (save)="saveWidget()"
+      (closeRequest)="forwardCloseRequest()">
+      <p>Total de sessões: {{ widgetData()?.total }}</p>
+    </cao-base-widget>
+  `,
+})
+export class GerarExamesWidget extends CaoBaseWidgetComponent<{ total: number }> {}
+```
+
+**Exemplo de uso — abrindo via serviço**
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { CaoWidgetService } from 'ngx-opalbytes-components';
+import { GerarExamesWidget } from './gerar-exames.widget';
+
+@Component({ /* ... */ })
+export class MinhaPaginaComponent {
+  private readonly widgetService = inject(CaoWidgetService);
+
+  abrirWidget(): void {
+    this.widgetService.open(GerarExamesWidget, {
+      inputs: { subtitle: 'Sessões de hoje' },
+      data: { total: 42 },
+      onSave: () => console.log('salvar'),
+      onDelete: () => console.log('excluir'),
+      onClose: () => console.log('fechado'),
+    });
+  }
+}
+```
+
+> Os três símbolos (`CaoBaseWidgetComponent`, `CaoWidgetService` e `ICaoWidgetOptions`) são exportados pela API pública da biblioteca.
+
+---
+
 ### `FeatureBaseModal`
 Um componente de modal genérico que pode ser customizado.
 

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Injectable } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Injectable, output, DestroyRef } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -3443,9 +3443,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$5.Overlay }] });
 
+class CaoWidgetService {
+    overlay = inject(Overlay);
+    overlayRef = null;
+    open(component, options = {}) {
+        const substituindoWidget = !!this.overlayRef;
+        if (this.overlayRef) {
+            this.close();
+        }
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+        this.overlayRef = overlayRef;
+        const ref = overlayRef.attach(new ComponentPortal(component));
+        const instance = ref.instance;
+        for (const [key, value] of Object.entries(options.inputs ?? {})) {
+            ref.setInput(key, value);
+        }
+        if (options.data !== undefined) {
+            ref.setInput("widgetData", options.data);
+        }
+        const subscriptions = new Subscription();
+        let disposed = false;
+        if (!(substituindoWidget && history.state?.widget)) {
+            history.pushState({ widget: true }, "");
+        }
+        const onPopState = () => {
+            dispose();
+            options.onClose?.();
+        };
+        window.addEventListener("popstate", onPopState);
+        const dispose = () => {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            window.removeEventListener("popstate", onPopState);
+            subscriptions.unsubscribe();
+            overlayRef.dispose();
+            if (this.overlayRef === overlayRef) {
+                this.overlayRef = null;
+            }
+        };
+        subscriptions.add(instance.save.subscribe(() => options.onSave?.()));
+        subscriptions.add(instance.deleted.subscribe(() => options.onDelete?.()));
+        subscriptions.add(instance.closeRequest.subscribe(() => {
+            if (history.state?.widget) {
+                history.back();
+            }
+            else {
+                dispose();
+            }
+            options.onClose?.();
+        }));
+        overlayRef.detachments().subscribe(() => {
+            disposed = true;
+            window.removeEventListener("popstate", onPopState);
+            subscriptions.unsubscribe();
+            if (this.overlayRef === overlayRef) {
+                this.overlayRef = null;
+            }
+        });
+        ref.changeDetectorRef.detectChanges();
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoWidgetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoWidgetService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoWidgetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+class CaoBaseWidgetComponent {
+    static CLOSE_ANIMATION_MS = 250;
+    title = input("Titulo", ...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitle = input("", ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    widgetIcon = input("", ...(ngDevMode ? [{ debugName: "widgetIcon" }] : []));
+    cancelTextButton = input("Cancelar", ...(ngDevMode ? [{ debugName: "cancelTextButton" }] : []));
+    saveTextButton = input("Gerar", ...(ngDevMode ? [{ debugName: "saveTextButton" }] : []));
+    displayActionButton = input(true, ...(ngDevMode ? [{ debugName: "displayActionButton" }] : []));
+    displaySaveButton = input(true, ...(ngDevMode ? [{ debugName: "displaySaveButton" }] : []));
+    displayCancelButton = input(true, ...(ngDevMode ? [{ debugName: "displayCancelButton" }] : []));
+    shouldCloseWhenCancel = input(true, ...(ngDevMode ? [{ debugName: "shouldCloseWhenCancel" }] : []));
+    typeCancel = input("cancel", ...(ngDevMode ? [{ debugName: "typeCancel" }] : []));
+    saveDisabled = input(false, ...(ngDevMode ? [{ debugName: "saveDisabled" }] : []));
+    saveIcon = input("arrow-right", ...(ngDevMode ? [{ debugName: "saveIcon" }] : []));
+    saveIconPosition = input("trailing", ...(ngDevMode ? [{ debugName: "saveIconPosition" }] : []));
+    closeOnClickOutside = input(true, ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : []));
+    confirmOnClose = input(false, ...(ngDevMode ? [{ debugName: "confirmOnClose" }] : []));
+    widgetData = input(undefined, ...(ngDevMode ? [{ debugName: "widgetData" }] : []));
+    save = output();
+    deleted = output();
+    cancelEvent = output();
+    closeRequest = output();
+    closing = signal(false, ...(ngDevMode ? [{ debugName: "closing" }] : []));
+    mouseDownOnBackdrop = false;
+    closeStarted = false;
+    closeEmitted = false;
+    closeConfirmationOpen = false;
+    destroyRef = inject(DestroyRef);
+    widgetService = inject(CaoWidgetService);
+    closeWidget() {
+        if (this.closeStarted) {
+            return;
+        }
+        this.startClose();
+    }
+    saveWidget() {
+        this.save.emit();
+    }
+    cancelWidget() {
+        this.cancelEvent.emit();
+    }
+    deletedWidget() {
+        this.deleted.emit();
+    }
+    onAnimationEnd(event) {
+        if (!this.closing() || event.target !== event.currentTarget) {
+            return;
+        }
+        this.emitCloseRequest();
+    }
+    onEscapeKey() {
+        if (this.closeConfirmationOpen) {
+            this.closeConfirmationOpen = false;
+            return;
+        }
+        this.closeWidget();
+    }
+    forwardCloseRequest() {
+        this.closeRequest.emit();
+    }
+    onBackdropMouseDown(event) {
+        this.mouseDownOnBackdrop = event.target === event.currentTarget;
+    }
+    onBackdropMouseUp(event) {
+        const closeRequested = this.mouseDownOnBackdrop &&
+            event.target === event.currentTarget &&
+            this.closeOnClickOutside();
+        this.mouseDownOnBackdrop = false;
+        if (closeRequested) {
+            this.closeWidget();
+        }
+    }
+    startClose() {
+        if (this.closeStarted) {
+            return;
+        }
+        this.closeStarted = true;
+        this.closing.set(true);
+        setTimeout(() => this.emitCloseRequest(), CaoBaseWidgetComponent.CLOSE_ANIMATION_MS);
+    }
+    emitCloseRequest() {
+        if (this.closeEmitted) {
+            return;
+        }
+        this.closeEmitted = true;
+        this.closeRequest.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoBaseWidgetComponent, isStandalone: true, selector: "cao-base-widget", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, widgetIcon: { classPropertyName: "widgetIcon", publicName: "widgetIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelTextButton: { classPropertyName: "cancelTextButton", publicName: "cancelTextButton", isSignal: true, isRequired: false, transformFunction: null }, saveTextButton: { classPropertyName: "saveTextButton", publicName: "saveTextButton", isSignal: true, isRequired: false, transformFunction: null }, displayActionButton: { classPropertyName: "displayActionButton", publicName: "displayActionButton", isSignal: true, isRequired: false, transformFunction: null }, displaySaveButton: { classPropertyName: "displaySaveButton", publicName: "displaySaveButton", isSignal: true, isRequired: false, transformFunction: null }, displayCancelButton: { classPropertyName: "displayCancelButton", publicName: "displayCancelButton", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseWhenCancel: { classPropertyName: "shouldCloseWhenCancel", publicName: "shouldCloseWhenCancel", isSignal: true, isRequired: false, transformFunction: null }, typeCancel: { classPropertyName: "typeCancel", publicName: "typeCancel", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveIcon: { classPropertyName: "saveIcon", publicName: "saveIcon", isSignal: true, isRequired: false, transformFunction: null }, saveIconPosition: { classPropertyName: "saveIconPosition", publicName: "saveIconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, confirmOnClose: { classPropertyName: "confirmOnClose", publicName: "confirmOnClose", isSignal: true, isRequired: false, transformFunction: null }, widgetData: { classPropertyName: "widgetData", publicName: "widgetData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", deleted: "deleted", cancelEvent: "cancelEvent", closeRequest: "closeRequest" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div\n  class=\"widget-backdrop\"\n  role=\"presentation\"\n  tabindex=\"-1\"\n  [class.widget-backdrop--closing]=\"closing()\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n  (mouseup)=\"onBackdropMouseUp($event)\"\n  (animationend)=\"onAnimationEnd($event)\">\n  <div\n    class=\"widget-panel\"\n    [class.widget-panel--closing]=\"closing()\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (mouseup)=\"$event.stopPropagation()\">\n    <div class=\"widget-body\">\n        <div class=\"widget-header\">\n            <div class=\"widget-title\">\n                <h1>{{ title() }}</h1>\n                <h2>{{ subtitle() }}</h2>\n            </div>\n            <ng-content select=\"widget-title\" />\n        </div>\n      <div class=\"widget-scroll\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--widget-animation-duration: .25s;display:block}.widget-backdrop{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background-color:#0006;animation:widget-fade-in var(--widget-animation-duration) ease-out}.widget-backdrop--closing{pointer-events:none;animation:widget-fade-out var(--widget-animation-duration) ease-out forwards}.widget-panel{position:relative;box-sizing:border-box;height:100%;width:90vh;max-width:520px;padding:20px;border-radius:.5rem 0 0 .5rem;background-color:var(--color-white, var(--white, #ffffff));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;animation:widget-slide-in-right var(--widget-animation-duration) ease-out}.widget-panel--closing{animation:widget-slide-out-right var(--widget-animation-duration) ease-out forwards}.widget-body{display:flex;flex-direction:column;justify-content:space-between;height:100%}.widget-header{display:flex;justify-content:space-between;align-items:start;flex-shrink:0}.widget-title{display:flex;flex-direction:column}.widget-scroll{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin}@keyframes widget-fade-in{0%{opacity:0}to{opacity:1}}@keyframes widget-fade-out{0%{opacity:1}to{opacity:0}}@keyframes widget-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes widget-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-base-widget", imports: [], template: "<div\n  class=\"widget-backdrop\"\n  role=\"presentation\"\n  tabindex=\"-1\"\n  [class.widget-backdrop--closing]=\"closing()\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n  (mouseup)=\"onBackdropMouseUp($event)\"\n  (animationend)=\"onAnimationEnd($event)\">\n  <div\n    class=\"widget-panel\"\n    [class.widget-panel--closing]=\"closing()\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (mouseup)=\"$event.stopPropagation()\">\n    <div class=\"widget-body\">\n        <div class=\"widget-header\">\n            <div class=\"widget-title\">\n                <h1>{{ title() }}</h1>\n                <h2>{{ subtitle() }}</h2>\n            </div>\n            <ng-content select=\"widget-title\" />\n        </div>\n      <div class=\"widget-scroll\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--widget-animation-duration: .25s;display:block}.widget-backdrop{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background-color:#0006;animation:widget-fade-in var(--widget-animation-duration) ease-out}.widget-backdrop--closing{pointer-events:none;animation:widget-fade-out var(--widget-animation-duration) ease-out forwards}.widget-panel{position:relative;box-sizing:border-box;height:100%;width:90vh;max-width:520px;padding:20px;border-radius:.5rem 0 0 .5rem;background-color:var(--color-white, var(--white, #ffffff));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;animation:widget-slide-in-right var(--widget-animation-duration) ease-out}.widget-panel--closing{animation:widget-slide-out-right var(--widget-animation-duration) ease-out forwards}.widget-body{display:flex;flex-direction:column;justify-content:space-between;height:100%}.widget-header{display:flex;justify-content:space-between;align-items:start;flex-shrink:0}.widget-title{display:flex;flex-direction:column}.widget-scroll{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin}@keyframes widget-fade-in{0%{opacity:0}to{opacity:1}}@keyframes widget-fade-out{0%{opacity:1}to{opacity:0}}@keyframes widget-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes widget-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], widgetIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetIcon", required: false }] }], cancelTextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelTextButton", required: false }] }], saveTextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveTextButton", required: false }] }], displayActionButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayActionButton", required: false }] }], displaySaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displaySaveButton", required: false }] }], displayCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayCancelButton", required: false }] }], shouldCloseWhenCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldCloseWhenCancel", required: false }] }], typeCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeCancel", required: false }] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], saveIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveIcon", required: false }] }], saveIconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveIconPosition", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], confirmOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmOnClose", required: false }] }], widgetData: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetData", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map