@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-descriptions.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, contentChildren, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+/** Plantilla del valor de un elemento: `<ng-template cbDescriptionsValue="estado" let-valor>`. */
+class CbDescriptionsValue {
+    constructor() {
+        this.cbDescriptionsValue = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbDescriptionsValue" }] : /* istanbul ignore next */ []));
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptionsValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbDescriptionsValue, isStandalone: true, selector: "ng-template[cbDescriptionsValue]", inputs: { cbDescriptionsValue: { classPropertyName: "cbDescriptionsValue", publicName: "cbDescriptionsValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptionsValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cbDescriptionsValue]',
+                    standalone: true,
+                }]
+        }], propDecorators: { cbDescriptionsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbDescriptionsValue", required: true }] }] } });
+let nextId = 0;
+/**
+ * Descriptions de CaribeNG: lista de pares etiqueta / valor (detalle de un
+ * cliente, de una transacción…) en una o varias columnas, sobre una lista de
+ * descripción (`<dl>`) nativa.
+ *
+ * @example
+ * ```html
+ * <cb-descriptions title="Detalle de la transferencia" [columns]="2" [items]="[
+ *   { label: 'Origen', value: 'Ahorros **** 1234' },
+ *   { label: 'Valor', value: '$ 250.000' },
+ *   { label: 'Estado', key: 'estado', value: 'Aprobada' },
+ * ]">
+ *   <ng-template cbDescriptionsValue="estado" let-estado><cb-tag [value]="estado" severity="success" /></ng-template>
+ * </cb-descriptions>
+ * ```
+ */
+class CbDescriptions {
+    constructor() {
+        this.valueTemplates = contentChildren(CbDescriptionsValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueTemplates" }] : /* istanbul ignore next */ []));
+        this.titleId = `cb-descriptions-${++nextId}-title`;
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Título del bloque (se anuncia como encabezado). */
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Nivel del encabezado del título (por defecto 3). */
+        this.headingLevel = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+        /** Columnas en pantallas anchas (en móvil siempre 1). */
+        this.columns = input(2, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Etiqueta encima del valor (`vertical`) o a su lado (`horizontal`). */
+        this.layout = input('vertical', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** Bordes entre elementos. */
+        this.bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    valueTemplate(item) {
+        return item.key ? this.valueTemplates().find((t) => t.cbDescriptionsValue() === item.key) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDescriptions, isStandalone: true, selector: "cb-descriptions", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-descriptions--bordered": "bordered()", "class.cb-descriptions--vertical": "layout() === 'vertical'", "style.--cb-descriptions-columns": "columns()" }, classAttribute: "cb-descriptions" }, queries: [{ propertyName: "valueTemplates", predicate: CbDescriptionsValue, isSignal: true }], ngImport: i0, template: `
+    @if (title()) {
+      <div class="cb-descriptions__title" role="heading" [attr.aria-level]="headingLevel()" [id]="titleId">{{ title() }}</div>
+    }
+    <dl class="cb-descriptions__list" [attr.aria-labelledby]="title() ? titleId : null">
+      @for (item of items(); track $index) {
+        <div class="cb-descriptions__item" [style.grid-column]="item.span && item.span > 1 ? 'span ' + item.span : null">
+          <dt class="cb-descriptions__label">{{ item.label }}</dt>
+          <dd class="cb-descriptions__value">
+            @if (valueTemplate(item); as tpl) {
+              <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: item.value, item }" />
+            } @else {
+              {{ item.value ?? '—' }}
+            }
+          </dd>
+        </div>
+      }
+    </dl>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-descriptions__title{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-descriptions__list{display:grid;grid-template-columns:repeat(var(--cb-descriptions-columns, 2),minmax(0,1fr));gap:var(--cb-space-4, 1rem) var(--cb-space-6, 1.5rem);margin:0}.cb-descriptions__item{display:flex;flex-direction:column;gap:.15rem;min-width:0}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__item{flex-direction:row;align-items:baseline;gap:var(--cb-space-2, .5rem)}.cb-descriptions__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label{flex:none;font-size:var(--cb-text-sm, .875rem)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label:after{content:\":\"}.cb-descriptions__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text-strong);overflow-wrap:anywhere}:host(.cb-descriptions--bordered) .cb-descriptions__list{gap:0;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem)}:host(.cb-descriptions--bordered) .cb-descriptions__item{padding:var(--cb-space-3, .75rem) var(--cb-space-4, 1rem);border-right:1px solid var(--cb-color-border);border-bottom:1px solid var(--cb-color-border);margin:0 -1px -1px 0}:host(.cb-descriptions--bordered) .cb-descriptions__label{font-weight:var(--cb-font-weight-medium, 500)}@media(max-width:600px){.cb-descriptions__list{grid-template-columns:minmax(0,1fr)}.cb-descriptions__item{grid-column:auto!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDescriptions, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-descriptions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet], host: {
+                        class: 'cb-descriptions',
+                        '[class.cb-descriptions--bordered]': 'bordered()',
+                        '[class.cb-descriptions--vertical]': "layout() === 'vertical'",
+                        '[style.--cb-descriptions-columns]': 'columns()',
+                    }, template: `
+    @if (title()) {
+      <div class="cb-descriptions__title" role="heading" [attr.aria-level]="headingLevel()" [id]="titleId">{{ title() }}</div>
+    }
+    <dl class="cb-descriptions__list" [attr.aria-labelledby]="title() ? titleId : null">
+      @for (item of items(); track $index) {
+        <div class="cb-descriptions__item" [style.grid-column]="item.span && item.span > 1 ? 'span ' + item.span : null">
+          <dt class="cb-descriptions__label">{{ item.label }}</dt>
+          <dd class="cb-descriptions__value">
+            @if (valueTemplate(item); as tpl) {
+              <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: item.value, item }" />
+            } @else {
+              {{ item.value ?? '—' }}
+            }
+          </dd>
+        </div>
+      }
+    </dl>
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-descriptions__title{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-descriptions__list{display:grid;grid-template-columns:repeat(var(--cb-descriptions-columns, 2),minmax(0,1fr));gap:var(--cb-space-4, 1rem) var(--cb-space-6, 1.5rem);margin:0}.cb-descriptions__item{display:flex;flex-direction:column;gap:.15rem;min-width:0}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__item{flex-direction:row;align-items:baseline;gap:var(--cb-space-2, .5rem)}.cb-descriptions__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label{flex:none;font-size:var(--cb-text-sm, .875rem)}:host(:not(.cb-descriptions--vertical)) .cb-descriptions__label:after{content:\":\"}.cb-descriptions__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text-strong);overflow-wrap:anywhere}:host(.cb-descriptions--bordered) .cb-descriptions__list{gap:0;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem)}:host(.cb-descriptions--bordered) .cb-descriptions__item{padding:var(--cb-space-3, .75rem) var(--cb-space-4, 1rem);border-right:1px solid var(--cb-color-border);border-bottom:1px solid var(--cb-color-border);margin:0 -1px -1px 0}:host(.cb-descriptions--bordered) .cb-descriptions__label{font-weight:var(--cb-font-weight-medium, 500)}@media(max-width:600px){.cb-descriptions__list{grid-template-columns:minmax(0,1fr)}.cb-descriptions__item{grid-column:auto!important}}\n"] }]
+        }], propDecorators: { valueTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbDescriptionsValue), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/descriptions
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbDescriptions, CbDescriptionsValue };

package/fesm2022/caribeng-ui-dialog.mjs

@@ -6,6 +6,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -26,6 +27,8 @@ let nextUid = 0;
  */
 class CbDialog {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.document = inject(DOCUMENT);
@@ -45,7 +48,7 @@ class CbDialog {
         this.width = input('32rem', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /** Nombre accesible cuando no hay `header`. */
-        this.ariaLabel = input('Diálogo', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /** Se emite cuando el diálogo se cierra. */
         this.onHide = output();
@@ -114,7 +117,7 @@ class CbDialog {
           role="dialog"
           aria-modal="true"
           [attr.aria-labelledby]="header() ? titleId : null"
-          [attr.aria-label]="header() ? null : ariaLabel()"
+          [attr.aria-label]="header() ? null : (ariaLabel() ?? t().dialog)"
           [style.width]="width()"
           cdkTrapFocus
           cdkTrapFocusAutoCapture
@@ -128,7 +131,7 @@ class CbDialog {
                 <button
                   type="button"
                   class="cb-dialog__close"
-                  aria-label="Cerrar"
+                  [attr.aria-label]="t().close"
                   (click)="close()"
                 >
                   <cb-icon name="x" size="sm" />
@@ -145,7 +148,7 @@ class CbDialog {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: CbDialog, decorators: [{
             type: Component,
@@ -157,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           role="dialog"
           aria-modal="true"
           [attr.aria-labelledby]="header() ? titleId : null"
-          [attr.aria-label]="header() ? null : ariaLabel()"
+          [attr.aria-label]="header() ? null : (ariaLabel() ?? t().dialog)"
           [style.width]="width()"
           cdkTrapFocus
           cdkTrapFocusAutoCapture
@@ -171,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 <button
                   type="button"
                   class="cb-dialog__close"
-                  aria-label="Cerrar"
+                  [attr.aria-label]="t().close"
                   (click)="close()"
                 >
                   <cb-icon name="x" size="sm" />
@@ -188,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </div>
       </div>
     </ng-template>
-  `, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\n"] }]
+  `, styles: [".cb-dialog__mask{display:contents}.cb-dialog{display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 2 * var(--cb-space-4));max-height:calc(100vh - 2 * var(--cb-space-6));background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-shadow-lg);font-family:var(--cb-font-sans);overflow:hidden;animation:cb-dialog-in var(--cb-duration-normal) var(--cb-ease-out)}.cb-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-4);padding:var(--cb-space-5) var(--cb-space-6);border-bottom:1px solid var(--cb-color-border)}.cb-dialog__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-dialog__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--cb-radius-md);border:none;background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-base);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-dialog__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-dialog__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dialog__body{padding:var(--cb-space-6);overflow-y:auto}.cb-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-6);border-top:1px solid var(--cb-color-border)}.cb-dialog__footer:empty{display:none}@keyframes cb-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.cb-dialog{animation:none}}\n"] }]
         }], ctorParameters: () => [], 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 }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-dock.mjs

@@ -1,15 +1,18 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /** Compact application launcher with configurable orientation. */
 class CbDock {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.position = input('bottom', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Application dock', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
     }
@@ -17,7 +20,7 @@ class CbDock {
         this.itemSelect.emit(item); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDock, isStandalone: true, selector: "cb-dock", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.cb-dock--top": "position() === \"top\"", "class.cb-dock--right": "position() === \"right\"", "class.cb-dock--bottom": "position() === \"bottom\"", "class.cb-dock--left": "position() === \"left\"" }, classAttribute: "cb-dock" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().appDock)">
       <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="position() === 'left' || position() === 'right' ? 'vertical' : 'horizontal'">
         @for (item of items(); track $index) {
           <li>
@@ -41,7 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.cb-dock--bottom]': 'position() === "bottom"',
                         '[class.cb-dock--left]': 'position() === "left"',
                     }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().appDock)">
       <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="position() === 'left' || position() === 'right' ? 'vertical' : 'horizontal'">
         @for (item of items(); track $index) {
           <li>

package/fesm2022/caribeng-ui-drawer.mjs

@@ -6,6 +6,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Drawer (panel lateral) de CaribeNG sobre CDK Overlay: se desliza desde un
@@ -21,6 +22,8 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbDrawer {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.document = inject(DOCUMENT);
@@ -33,7 +36,7 @@ class CbDrawer {
         this.closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.dismissableMask = input(true, { ...(ngDevMode ? { debugName: "dismissableMask" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        this.ariaLabel = input('Panel', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.onShow = output();
         this.onHide = output();
@@ -104,7 +107,7 @@ class CbDrawer {
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
-        [attr.aria-label]="header() ? null : ariaLabel()"
+        [attr.aria-label]="header() ? null : (ariaLabel() ?? t().panel)"
         cdkTrapFocus
         cdkTrapFocusAutoCapture
       >
@@ -114,7 +117,7 @@ class CbDrawer {
               <h2 class="cb-drawer__title" [id]="titleId">{{ header() }}</h2>
             }
             @if (closable()) {
-              <button type="button" class="cb-drawer__close" aria-label="Cerrar" (click)="close()">
+              <button type="button" class="cb-drawer__close" [attr.aria-label]="t().close" (click)="close()">
                 <cb-icon name="x" [size]="18" aria-hidden="true" />
               </button>
             }
@@ -124,7 +127,7 @@ class CbDrawer {
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: CbDrawer, decorators: [{
             type: Component,
@@ -136,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
-        [attr.aria-label]="header() ? null : ariaLabel()"
+        [attr.aria-label]="header() ? null : (ariaLabel() ?? t().panel)"
         cdkTrapFocus
         cdkTrapFocusAutoCapture
       >
@@ -146,7 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <h2 class="cb-drawer__title" [id]="titleId">{{ header() }}</h2>
             }
             @if (closable()) {
-              <button type="button" class="cb-drawer__close" aria-label="Cerrar" (click)="close()">
+              <button type="button" class="cb-drawer__close" [attr.aria-label]="t().close" (click)="close()">
                 <cb-icon name="x" [size]="18" aria-hidden="true" />
               </button>
             }
@@ -156,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"] }]
+  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"] }]
         }], ctorParameters: () => [], 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 }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 let uid = 0;
 function nextUid() {

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 };