@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-dynamicdialog.mjs

@@ -1,27 +1,231 @@
 import * as i0 from '@angular/core';
-import { model, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, inject, Injector, Injectable } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbDialog } from '@caribeng/ui/dialog';
+import { NgComponentOutlet, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/**
+ * Variante declarativa del diálogo dinámico: un `cb-dialog` con título y
+ * texto, para casos simples. Para abrir **componentes** con datos y recibir un
+ * resultado, usa `CbDialogService.open()`.
+ *
+ * @example
+ * ```html
+ * <cb-dynamic-dialog [(visible)]="visible" header="Detalle" content="Tu solicitud fue enviada." />
+ * ```
+ */
 class CbDynamicDialog {
     constructor() {
+        this.t = injectCbTranslation();
+        /** Visibilidad (two-way). */
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.header = input('Diálogo', /* @ts-ignore */
+        /** Título. Por defecto, "Diálogo" del idioma activo. */
+        this.header = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        /** Texto del cuerpo (también se puede proyectar contenido). */
         this.content = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /** Se emite al cerrarse. */
         this.closed = output();
     }
-    close() { this.visible.set(false); this.closed.emit(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDynamicDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDynamicDialog, isStandalone: true, selector: "cb-dynamic-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, ngImport: i0, template: `@if(visible()){<div class="cb-dynamic-dialog__mask"><section role="dialog" aria-modal="true" [attr.aria-label]="header()"><header><h2>{{header()}}</h2><button type="button" aria-label="Cerrar diálogo" (click)="close()">×</button></header><div class="cb-dynamic-dialog__content">{{content()}}</div><ng-content /></section></div>}`, isInline: true, styles: [":host{display:contents}.cb-dynamic-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0006}.cb-dynamic-dialog section{width:min(36rem,calc(100vw - 2rem));padding:1.25rem;border-radius:.75rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 1rem 3rem #0003}.cb-dynamic-dialog header{display:flex;justify-content:space-between;align-items:center}.cb-dynamic-dialog h2{font-size:1.15rem;margin:0}.cb-dynamic-dialog header button{border:0;background:transparent;font-size:1.5rem;cursor:pointer}.cb-dynamic-dialog__content{padding:1rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDynamicDialog, isStandalone: true, selector: "cb-dynamic-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <cb-dialog [(visible)]="visible" [header]="header() ?? t().dialog" (onHide)="closed.emit()">
+      @if (content()) {
+        <p class="cb-dynamic-dialog__text">{{ content() }}</p>
+      }
+      <ng-content />
+    </cb-dialog>
+  `, isInline: true, styles: [".cb-dynamic-dialog__text{margin:0}\n"], dependencies: [{ kind: "component", type: CbDialog, selector: "cb-dialog", inputs: ["visible", "header", "closable", "dismissableMask", "closeOnEscape", "width", "ariaLabel"], outputs: ["visibleChange", "onHide", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDynamicDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-dynamic-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `@if(visible()){<div class="cb-dynamic-dialog__mask"><section role="dialog" aria-modal="true" [attr.aria-label]="header()"><header><h2>{{header()}}</h2><button type="button" aria-label="Cerrar diálogo" (click)="close()">×</button></header><div class="cb-dynamic-dialog__content">{{content()}}</div><ng-content /></section></div>}`, styles: [":host{display:contents}.cb-dynamic-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0006}.cb-dynamic-dialog section{width:min(36rem,calc(100vw - 2rem));padding:1.25rem;border-radius:.75rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 1rem 3rem #0003}.cb-dynamic-dialog header{display:flex;justify-content:space-between;align-items:center}.cb-dynamic-dialog h2{font-size:1.15rem;margin:0}.cb-dynamic-dialog header button{border:0;background:transparent;font-size:1.5rem;cursor:pointer}.cb-dynamic-dialog__content{padding:1rem 0}\n"] }]
+            args: [{ selector: 'cb-dynamic-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbDialog], host: { style: 'display: contents' }, template: `
+    <cb-dialog [(visible)]="visible" [header]="header() ?? t().dialog" (onHide)="closed.emit()">
+      @if (content()) {
+        <p class="cb-dynamic-dialog__text">{{ content() }}</p>
+      }
+      <ng-content />
+    </cb-dialog>
+  `, styles: [".cb-dynamic-dialog__text{margin:0}\n"] }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+/** Datos pasados en `config.data`, para inyectar en el componente abierto. */
+const CB_DYNAMIC_DIALOG_DATA = new InjectionToken('CB_DYNAMIC_DIALOG_DATA');
+/**
+ * Referencia a un diálogo abierto con `CbDialogService`. El componente abierto
+ * puede inyectarla para cerrarse devolviendo un resultado.
+ */
+class CbDynamicDialogRef {
+    /** @internal */
+    constructor(dispose) {
+        this.dispose = dispose;
+        this.closed$ = new Subject();
+        this.isClosed = false;
+        /** Emite el resultado (o `undefined` si se cerró sin él) y completa. */
+        this.onClose = this.closed$.asObservable();
+    }
+    /** Cierra el diálogo devolviendo un resultado opcional. */
+    close(result) {
+        if (this.isClosed)
+            return;
+        this.isClosed = true;
+        this.dispose();
+        this.closed$.next(result);
+        this.closed$.complete();
+    }
+}
+let nextUid = 0;
+/** @internal */
+const CbDynamicDialogConfigToken = new InjectionToken('CbDynamicDialogConfig');
+/** @internal */
+const CbDynamicDialogComponentToken = new InjectionToken('CbDynamicDialogComponent');
+/** Contenedor visual del diálogo dinámico (uso interno de CbDialogService). */
+class CbDynamicDialogContainer {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.config = inject(CbDynamicDialogConfigToken);
+        this.ref = inject(CbDynamicDialogRef);
+        this.component = inject(CbDynamicDialogComponentToken);
+        this.injector = inject(Injector);
+        this.titleId = `cb-dynamic-dialog-${++nextUid}-title`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDynamicDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDynamicDialogContainer, isStandalone: true, selector: "cb-dynamic-dialog-container", ngImport: i0, template: `
+    <div
+      class="cb-dynamic-dialog"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="config.header ? titleId : null"
+      [attr.aria-label]="config.header ? null : config.ariaLabel || t().dialog"
+      [style.width]="config.width || '32rem'"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+    >
+      @if (config.header || config.closable !== false) {
+        <header class="cb-dynamic-dialog__header">
+          @if (config.header) {
+            <h2 class="cb-dynamic-dialog__title" [id]="titleId">{{ config.header }}</h2>
+          }
+          @if (config.closable !== false) {
+            <button type="button" class="cb-dynamic-dialog__close" [attr.aria-label]="t().close" (click)="ref.close()">
+              <cb-icon name="x" [size]="16" aria-hidden="true" />
+            </button>
+          }
+        </header>
+      }
+      <div class="cb-dynamic-dialog__body">
+        <ng-container *ngComponentOutlet="component; injector: injector" />
+      </div>
+    </div>
+  `, isInline: true, styles: [".cb-dynamic-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4, 1rem));max-height:calc(100vh - 2 * var(--cb-space-6, 1.5rem));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden}.cb-dynamic-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4, 1rem);padding:var(--cb-space-5, 1.25rem) var(--cb-space-6, 1.5rem);border-bottom:1px solid var(--cb-color-border)}.cb-dynamic-dialog__title{margin:0;font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-dynamic-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;margin-inline-start:auto;border:none;border-radius:var(--cb-radius-md, .5rem);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-dynamic-dialog__close:hover{background:color-mix(in srgb,var(--cb-color-text) 8%,transparent);color:var(--cb-color-text)}.cb-dynamic-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-dynamic-dialog__body{padding:var(--cb-space-5, 1.25rem) var(--cb-space-6, 1.5rem);overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDynamicDialogContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-dynamic-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule, NgComponentOutlet, CbIcon], template: `
+    <div
+      class="cb-dynamic-dialog"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="config.header ? titleId : null"
+      [attr.aria-label]="config.header ? null : config.ariaLabel || t().dialog"
+      [style.width]="config.width || '32rem'"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+    >
+      @if (config.header || config.closable !== false) {
+        <header class="cb-dynamic-dialog__header">
+          @if (config.header) {
+            <h2 class="cb-dynamic-dialog__title" [id]="titleId">{{ config.header }}</h2>
+          }
+          @if (config.closable !== false) {
+            <button type="button" class="cb-dynamic-dialog__close" [attr.aria-label]="t().close" (click)="ref.close()">
+              <cb-icon name="x" [size]="16" aria-hidden="true" />
+            </button>
+          }
+        </header>
+      }
+      <div class="cb-dynamic-dialog__body">
+        <ng-container *ngComponentOutlet="component; injector: injector" />
+      </div>
+    </div>
+  `, styles: [".cb-dynamic-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4, 1rem));max-height:calc(100vh - 2 * var(--cb-space-6, 1.5rem));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden}.cb-dynamic-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4, 1rem);padding:var(--cb-space-5, 1.25rem) var(--cb-space-6, 1.5rem);border-bottom:1px solid var(--cb-color-border)}.cb-dynamic-dialog__title{margin:0;font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-dynamic-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;margin-inline-start:auto;border:none;border-radius:var(--cb-radius-md, .5rem);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-dynamic-dialog__close:hover{background:color-mix(in srgb,var(--cb-color-text) 8%,transparent);color:var(--cb-color-text)}.cb-dynamic-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-dynamic-dialog__body{padding:var(--cb-space-5, 1.25rem) var(--cb-space-6, 1.5rem);overflow-y:auto}\n"] }]
+        }] });
+/**
+ * Abre componentes dentro de un diálogo modal (como `DialogService` de PrimeNG):
+ * trampa de foco, cierre con Escape y fondo, y devolución del foco al cerrar.
+ *
+ * @example
+ * ```ts
+ * const ref = inject(CbDialogService).open(EditarCliente, {
+ *   header: 'Editar cliente',
+ *   data: { id: 42 },
+ * });
+ * ref.onClose.subscribe((guardado) => { … });
+ *
+ * // Dentro de EditarCliente:
+ * readonly data = inject<{ id: number }>(CB_DYNAMIC_DIALOG_DATA);
+ * readonly ref = inject(CbDynamicDialogRef);
+ * guardar() { this.ref.close(true); }
+ * ```
+ */
+class CbDialogService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.injector = inject(Injector);
+        this.document = inject(DOCUMENT);
+    }
+    open(component, config = {}) {
+        const previouslyFocused = this.document.activeElement;
+        const overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cb-dialog-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+        });
+        const ref = new CbDynamicDialogRef(() => {
+            overlayRef.dispose();
+            previouslyFocused?.focus?.();
+        });
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: CbDynamicDialogRef, useValue: ref },
+                { provide: CB_DYNAMIC_DIALOG_DATA, useValue: config.data },
+                { provide: CbDynamicDialogConfigToken, useValue: config },
+                { provide: CbDynamicDialogComponentToken, useValue: component },
+            ],
+        });
+        overlayRef.attach(new ComponentPortal(CbDynamicDialogContainer, null, injector));
+        overlayRef.backdropClick().subscribe(() => {
+            if (config.dismissableMask !== false)
+                ref.close();
+        });
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && config.closeOnEscape !== false) {
+                event.preventDefault();
+                ref.close();
+            }
+        });
+        return ref;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbDynamicDialog };
+export { CB_DYNAMIC_DIALOG_DATA, CbDialogService, CbDynamicDialog, CbDynamicDialogContainer, CbDynamicDialogRef };