@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-confirmdialog.mjs

@@ -1,31 +1,88 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, model, input, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, model, input, output, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import { injectCbTranslation, CbConfirmationService } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
 
 let nextUid = 0;
 /**
  * Diálogo de confirmación (`role="alertdialog"`) con trampa de foco, cierre con
- * Escape (equivale a cancelar) y restauración del foco al cerrarse.
+ * Escape (equivale a cancelar) y restauración del foco al cerrarse. Al abrirse,
+ * el foco va al botón de cancelar (la opción segura).
+ *
+ * @example
+ * ```html
+ * <cb-confirm-dialog
+ *   [(visible)]="confirmar"
+ *   header="Eliminar cuenta"
+ *   message="Esta acción no se puede deshacer."
+ *   acceptSeverity="danger"
+ *   (accepted)="eliminar()"
+ * />
+ * ```
+ *
+ * Con `service` muestra las confirmaciones pedidas desde código con
+ * `CbConfirmationService` (como `ConfirmationService` de PrimeNG):
+ *
+ * ```html
+ * <cb-confirm-dialog service />
+ * ```
+ * ```ts
+ * inject(CbConfirmationService).confirm({ message: '¿Eliminar?', accept: () => this.eliminar() });
+ * ```
  */
 class CbConfirmDialog {
     constructor() {
+        this.t = injectCbTranslation();
         this.document = inject(DOCUMENT);
+        this.confirmation = inject(CbConfirmationService);
+        /** Visibilidad (two-way). */
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.header = input('Confirmar', /* @ts-ignore */
+        /** Título. Por defecto, "Confirmar" del idioma activo. */
+        this.header = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-        this.message = input('¿Deseas continuar?', /* @ts-ignore */
+        /** Mensaje. Por defecto, "¿Deseas continuar?" del idioma activo. */
+        this.message = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-        this.acceptLabel = input('Aceptar', /* @ts-ignore */
+        this.acceptLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
-        this.rejectLabel = input('Cancelar', /* @ts-ignore */
+        this.rejectLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rejectLabel" }] : /* istanbul ignore next */ []));
+        /** Severidad del botón de aceptar (p. ej. `danger` para acciones destructivas). */
+        this.acceptSeverity = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "acceptSeverity" }] : /* istanbul ignore next */ []));
+        /**
+         * Muestra las confirmaciones pedidas con `CbConfirmationService`. Sin él, el
+         * componente solo responde a `[(visible)]` (así un diálogo declarativo no se
+         * abre con las confirmaciones de otra parte de la app).
+         */
+        this.service = input(false, { ...(ngDevMode ? { debugName: "service" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Con `service`: atiende solo las confirmaciones con este mismo `key` (o sin key si no se indica). */
+        this.key = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
         this.accepted = output();
         this.rejected = output();
         this.titleId = `cb-confirm-dialog-${++nextUid}-title`;
         this.messageId = `${this.titleId.replace('-title', '')}-message`;
+        /** Confirmación pedida con `CbConfirmationService` que se está mostrando. */
+        this.active = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** Textos visibles: los de la confirmación del servicio, si la hay; si no, los inputs y el idioma. */
+        this.shown = computed(() => {
+            const active = this.active();
+            const t = this.t();
+            return {
+                header: active?.header ?? this.header() ?? t.confirm,
+                message: active?.message ?? this.message() ?? t.confirmMessage,
+                acceptLabel: active?.acceptLabel ?? this.acceptLabel() ?? t.accept,
+                rejectLabel: active?.rejectLabel ?? this.rejectLabel() ?? t.cancel,
+                acceptSeverity: active?.acceptSeverity ?? this.acceptSeverity(),
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
         /** Elemento enfocado antes de abrir; recibe el foco de vuelta al cerrar. */
         this.previouslyFocused = null;
         effect(() => {
@@ -38,6 +95,22 @@ class CbConfirmDialog {
                 queueMicrotask(() => el.focus?.());
             }
         });
+        effect(() => {
+            if (!this.service())
+                return;
+            const request = this.confirmation.request();
+            untracked(() => {
+                if (request && request.confirmation.key === this.key()) {
+                    this.active.set(request.confirmation);
+                    this.visible.set(true);
+                }
+                else if (!request && this.active()) {
+                    // Cerrada desde el servicio (close()).
+                    this.active.set(null);
+                    this.visible.set(false);
+                }
+            });
+        });
     }
     onEscape() {
         if (this.visible())
@@ -45,19 +118,76 @@ class CbConfirmDialog {
     }
     confirm() {
         this.accepted.emit();
-        this.visible.set(false);
+        this.finish('accept');
     }
     reject() {
         this.rejected.emit();
+        this.finish('reject');
+    }
+    /** Cierra y, si venía del servicio, lo libera y ejecuta su callback (que puede pedir otra confirmación). */
+    finish(action) {
+        const active = this.active();
+        this.active.set(null);
         this.visible.set(false);
+        if (active) {
+            this.confirmation.close();
+            active[action]?.();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmDialog, isStandalone: true, selector: "cb-confirm-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `@if(visible()){<div class="cb-confirm-dialog__mask" (click)="reject()"><section class="cb-confirm-dialog" role="alertdialog" aria-modal="true" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="messageId" cdkTrapFocus cdkTrapFocusAutoCapture (click)="$event.stopPropagation()"><h2 [id]="titleId">{{header()}}</h2><p [id]="messageId">{{message()}}</p><footer><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></footer></section></div>}`, isInline: true, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0006}.cb-confirm-dialog{width:min(28rem,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-confirm-dialog h2{margin:0 0 .75rem;font-size:1.15rem}.cb-confirm-dialog footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}.cb-confirm-dialog button{padding:.5rem .8rem}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmDialog, isStandalone: true, selector: "cb-confirm-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptSeverity: { classPropertyName: "acceptSeverity", publicName: "acceptSeverity", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    @if (visible()) {
+      <div class="cb-confirm-dialog__mask" (click)="reject()">
+        <section
+          class="cb-confirm-dialog"
+          role="alertdialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          [attr.aria-describedby]="messageId"
+          cdkTrapFocus
+          cdkTrapFocusAutoCapture
+          (click)="$event.stopPropagation()"
+        >
+          <h2 class="cb-confirm-dialog__title" [id]="titleId">{{ shown().header }}</h2>
+          <p class="cb-confirm-dialog__message" [id]="messageId">{{ shown().message }}</p>
+          <footer class="cb-confirm-dialog__actions">
+            <cb-button variant="text" severity="secondary" (click)="reject()">{{ shown().rejectLabel }}</cb-button>
+            <cb-button [severity]="shown().acceptSeverity" (click)="confirm()">{{ shown().acceptLabel }}</cb-button>
+          </footer>
+        </section>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--cb-space-4, 1rem);background:color-mix(in srgb,#000 40%,transparent)}.cb-confirm-dialog{box-sizing:border-box;width:min(28rem,100%);padding:var(--cb-space-6, 1.5rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:var(--cb-shadow-lg, 0 1rem 3rem rgb(0 0 0 / 20%))}.cb-confirm-dialog__title{margin:0 0 var(--cb-space-2, .5rem);font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-confirm-dialog__message{margin:0;color:var(--cb-color-text-muted);line-height:1.55}.cb-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-6, 1.5rem)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbConfirmDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-confirm-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [A11yModule], host: { '(document:keydown.escape)': 'onEscape()' }, template: `@if(visible()){<div class="cb-confirm-dialog__mask" (click)="reject()"><section class="cb-confirm-dialog" role="alertdialog" aria-modal="true" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="messageId" cdkTrapFocus cdkTrapFocusAutoCapture (click)="$event.stopPropagation()"><h2 [id]="titleId">{{header()}}</h2><p [id]="messageId">{{message()}}</p><footer><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></footer></section></div>}`, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0006}.cb-confirm-dialog{width:min(28rem,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-confirm-dialog h2{margin:0 0 .75rem;font-size:1.15rem}.cb-confirm-dialog footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}.cb-confirm-dialog button{padding:.5rem .8rem}\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 }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+            args: [{ selector: 'cb-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule, CbButton], host: { '(document:keydown.escape)': 'onEscape()' }, template: `
+    @if (visible()) {
+      <div class="cb-confirm-dialog__mask" (click)="reject()">
+        <section
+          class="cb-confirm-dialog"
+          role="alertdialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          [attr.aria-describedby]="messageId"
+          cdkTrapFocus
+          cdkTrapFocusAutoCapture
+          (click)="$event.stopPropagation()"
+        >
+          <h2 class="cb-confirm-dialog__title" [id]="titleId">{{ shown().header }}</h2>
+          <p class="cb-confirm-dialog__message" [id]="messageId">{{ shown().message }}</p>
+          <footer class="cb-confirm-dialog__actions">
+            <cb-button variant="text" severity="secondary" (click)="reject()">{{ shown().rejectLabel }}</cb-button>
+            <cb-button [severity]="shown().acceptSeverity" (click)="confirm()">{{ shown().acceptLabel }}</cb-button>
+          </footer>
+        </section>
+      </div>
+    }
+  `, styles: [":host{display:contents}.cb-confirm-dialog__mask{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--cb-space-4, 1rem);background:color-mix(in srgb,#000 40%,transparent)}.cb-confirm-dialog{box-sizing:border-box;width:min(28rem,100%);padding:var(--cb-space-6, 1.5rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:var(--cb-shadow-lg, 0 1rem 3rem rgb(0 0 0 / 20%))}.cb-confirm-dialog__title{margin:0 0 var(--cb-space-2, .5rem);font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-confirm-dialog__message{margin:0;color:var(--cb-color-text-muted);line-height:1.55}.cb-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-6, 1.5rem)}\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 }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], acceptSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptSeverity", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+function toBoolean(value) {
+    return value !== false && value != null && `${value}` !== 'false';
+}
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-confirmpopup.mjs

@@ -1,28 +1,228 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, Injector, model, input, output, viewChild, signal, computed, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { injectCbTranslation, CbConfirmationService } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
 
+let nextUid = 0;
+/**
+ * Confirmación breve de CaribeNG. Ábrela anclada al botón que la dispara con
+ * `confirm($event)` (como PrimeNG), o en línea con `[(visible)]`. Escape o un
+ * clic fuera la cancelan; el foco vuelve al disparador al cerrarse.
+ *
+ * @example
+ * ```html
+ * <cb-button severity="danger" (click)="borrar.confirm($event)">Eliminar</cb-button>
+ * <cb-confirm-popup #borrar message="¿Eliminar este archivo?" (accepted)="eliminar()" />
+ * ```
+ *
+ * Con `service` muestra las confirmaciones de `CbConfirmationService` que traen
+ * `target` (como `ConfirmationService` de PrimeNG):
+ *
+ * ```html
+ * <cb-button (click)="borrar($event)">Eliminar</cb-button>
+ * <cb-confirm-popup service />
+ * ```
+ * ```ts
+ * borrar(event: Event) {
+ *   inject(CbConfirmationService).confirm({ target: event.currentTarget, message: '¿Eliminar?', accept: () => this.eliminar() });
+ * }
+ * ```
+ */
 class CbConfirmPopup {
     constructor() {
+        this.t = injectCbTranslation();
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.confirmation = inject(CbConfirmationService);
+        this.messageId = `cb-confirm-popup-${++nextUid}-message`;
+        /** Visibilidad (two-way). Con `[(visible)]` se muestra en línea. */
         this.visible = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.message = input('¿Confirmas la acción?', /* @ts-ignore */
+        /** Pregunta a confirmar. Por defecto, la del idioma activo. */
+        this.message = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-        this.acceptLabel = input('Aceptar', /* @ts-ignore */
+        this.acceptLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
-        this.rejectLabel = input('Cancelar', /* @ts-ignore */
+        this.rejectLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rejectLabel" }] : /* istanbul ignore next */ []));
+        /** Severidad del botón de aceptar (p. ej. `danger` para acciones destructivas). */
+        this.acceptSeverity = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "acceptSeverity" }] : /* istanbul ignore next */ []));
+        /**
+         * Muestra las confirmaciones pedidas con `CbConfirmationService`. Sin él, el
+         * componente solo responde a `[(visible)]` (así un diálogo declarativo no se
+         * abre con las confirmaciones de otra parte de la app).
+         */
+        this.service = input(false, { ...(ngDevMode ? { debugName: "service" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Con `service`: atiende solo las confirmaciones con este mismo `key` (o sin key si no se indica). */
+        this.key = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
         this.accepted = output();
         this.rejected = output();
+        this.panel = viewChild.required('panel');
+        /** Abierta como overlay anclado a un disparador. */
+        this.anchored = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchored" }] : /* istanbul ignore next */ []));
+        this.overlayRef = null;
+        this.trigger = null;
+        /** Confirmación pedida con `CbConfirmationService` que se está mostrando. */
+        this.active = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** Textos visibles: los de la confirmación del servicio, si la hay; si no, los inputs y el idioma. */
+        this.shown = computed(() => {
+            const active = this.active();
+            const t = this.t();
+            return {
+                message: active?.message ?? this.message() ?? t.confirmMessage,
+                acceptLabel: active?.acceptLabel ?? this.acceptLabel() ?? t.accept,
+                rejectLabel: active?.rejectLabel ?? this.rejectLabel() ?? t.cancel,
+                acceptSeverity: active?.acceptSeverity ?? this.acceptSeverity(),
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+        this.positions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
+        ];
+        effect(() => {
+            if (!this.service())
+                return;
+            const request = this.confirmation.request();
+            untracked(() => {
+                const target = request?.confirmation.target;
+                if (request && request.confirmation.key === this.key() && target instanceof HTMLElement) {
+                    // Una nueva petición sustituye a la que estuviera abierta.
+                    if (this.overlayRef)
+                        this.dispose();
+                    this.active.set(request.confirmation);
+                    this.show(target);
+                }
+                else if (!request && this.active()) {
+                    // Cerrada desde el servicio (close()).
+                    this.active.set(null);
+                    this.close();
+                }
+            });
+        });
+    }
+    /** Abre la confirmación anclada al elemento que recibió el evento. */
+    confirm(event) {
+        this.show(event.currentTarget);
+    }
+    /** Abre la confirmación anclada a `target`. */
+    show(target) {
+        if (this.overlayRef)
+            return;
+        this.trigger = target;
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().flexibleConnectedTo(target).withPositions(this.positions).withPush(true),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        this.overlayRef.attach(new TemplatePortal(this.panel(), this.vcr));
+        this.overlayRef.backdropClick().subscribe(() => this.reject());
+        this.anchored.set(true);
+        this.visible.set(true);
+        // Foco en la opción segura (cancelar), como en ConfirmDialog.
+        afterNextRender(() => this.overlayRef?.overlayElement.querySelector('button')?.focus(), {
+            injector: this.injector,
+        });
+    }
+    accept() {
+        this.accepted.emit();
+        this.finish('accept');
+    }
+    reject() {
+        this.rejected.emit();
+        this.finish('reject');
+    }
+    /** Cierra y, si venía del servicio, lo libera y ejecuta su callback (que puede pedir otra confirmación). */
+    finish(action) {
+        const active = this.active();
+        this.active.set(null);
+        this.close();
+        if (active) {
+            this.confirmation.close();
+            active[action]?.();
+        }
+    }
+    close() {
+        this.visible.set(false);
+        if (this.overlayRef) {
+            this.dispose();
+            this.trigger?.focus();
+            this.trigger = null;
+        }
+    }
+    /** Quita el overlay sin devolver el foco. */
+    dispose() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.anchored.set(false);
     }
-    confirm() { this.accepted.emit(); this.visible.set(false); }
-    reject() { this.rejected.emit(); this.visible.set(false); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbConfirmPopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmPopup, isStandalone: true, selector: "cb-confirm-popup", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, ngImport: i0, template: `@if(visible()){<section class="cb-confirm-popup" role="alertdialog" aria-modal="false"><p>{{message()}}</p><div><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></div></section>}`, isInline: true, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:14rem;padding:1rem;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.65rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 .5rem 1.5rem #0002}.cb-confirm-popup p{margin:0 0 .75rem}.cb-confirm-popup div{display:flex;justify-content:flex-end;gap:.4rem}.cb-confirm-popup button{padding:.4rem .65rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbConfirmPopup, isStandalone: true, selector: "cb-confirm-popup", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptSeverity: { classPropertyName: "acceptSeverity", publicName: "acceptSeverity", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { classAttribute: "cb-confirm-popup-host" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (visible() && !anchored()) {
+      <ng-container *ngTemplateOutlet="panel" />
+    }
+
+    <ng-template #panel>
+      <section
+        class="cb-confirm-popup"
+        role="alertdialog"
+        aria-modal="false"
+        [attr.aria-describedby]="messageId"
+        (keydown.escape)="reject()"
+      >
+        <p class="cb-confirm-popup__message" [id]="messageId">{{ shown().message }}</p>
+        <div class="cb-confirm-popup__actions">
+          <cb-button size="sm" variant="text" severity="secondary" (click)="reject()">
+            {{ shown().rejectLabel }}
+          </cb-button>
+          <cb-button size="sm" [severity]="shown().acceptSeverity" (click)="accept()">
+            {{ shown().acceptLabel }}
+          </cb-button>
+        </div>
+      </section>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:15rem;max-width:22rem;padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:0 .75rem 2rem color-mix(in srgb,#000 18%,transparent)}.cb-confirm-popup__message{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);line-height:1.5}.cb-confirm-popup__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbConfirmPopup, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-confirm-popup', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `@if(visible()){<section class="cb-confirm-popup" role="alertdialog" aria-modal="false"><p>{{message()}}</p><div><button type="button" (click)="reject()">{{rejectLabel()}}</button><button type="button" (click)="confirm()">{{acceptLabel()}}</button></div></section>}`, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:14rem;padding:1rem;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.65rem;background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827);box-shadow:0 .5rem 1.5rem #0002}.cb-confirm-popup p{margin:0 0 .75rem}.cb-confirm-popup div{display:flex;justify-content:flex-end;gap:.4rem}.cb-confirm-popup button{padding:.4rem .65rem}\n"] }]
-        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+            args: [{ selector: 'cb-confirm-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbButton], host: { class: 'cb-confirm-popup-host' }, template: `
+    @if (visible() && !anchored()) {
+      <ng-container *ngTemplateOutlet="panel" />
+    }
+
+    <ng-template #panel>
+      <section
+        class="cb-confirm-popup"
+        role="alertdialog"
+        aria-modal="false"
+        [attr.aria-describedby]="messageId"
+        (keydown.escape)="reject()"
+      >
+        <p class="cb-confirm-popup__message" [id]="messageId">{{ shown().message }}</p>
+        <div class="cb-confirm-popup__actions">
+          <cb-button size="sm" variant="text" severity="secondary" (click)="reject()">
+            {{ shown().rejectLabel }}
+          </cb-button>
+          <cb-button size="sm" [severity]="shown().acceptSeverity" (click)="accept()">
+            {{ shown().acceptLabel }}
+          </cb-button>
+        </div>
+      </section>
+    </ng-template>
+  `, styles: [":host{display:inline-block}.cb-confirm-popup{min-width:15rem;max-width:22rem;padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);box-shadow:0 .75rem 2rem color-mix(in srgb,#000 18%,transparent)}.cb-confirm-popup__message{margin:0 0 var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);line-height:1.5}.cb-confirm-popup__actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2, .5rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], acceptSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptSeverity", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+function toBoolean(value) {
+    return value !== false && value != null && `${value}` !== 'false';
+}
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-contextmenu.mjs

@@ -1,18 +1,24 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, input, output, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, computed, output, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Context menu that opens at the pointer position on right click. */
 class CbContextMenu {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Context menu', /* @ts-ignore */
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
         this.content = viewChild.required('content');
@@ -55,6 +61,7 @@ class CbContextMenu {
     select(item) {
         if (item.disabled || item.separator)
             return;
+        cbRunCommand(item);
         this.itemSelect.emit(item);
         this.close();
     }
@@ -66,8 +73,8 @@ class CbContextMenu {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbContextMenu, isStandalone: true, selector: "cb-contextmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "contextmenu": "open($event)" }, classAttribute: "cb-contextmenu" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-content />
     <ng-template #content>
-      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="ariaLabel()">
-        @for (item of items(); track $index) {
+      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().contextMenu)">
+        @for (item of visibleItems(); track $index) {
           @if (item.separator) { <div class="cb-contextmenu__separator" role="separator"></div> }
           @else {
             <button class="cb-contextmenu__item" type="button" role="menuitem" [disabled]="item.disabled" (click)="select(item)">
@@ -85,8 +92,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-contextmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-contextmenu', '(contextmenu)': 'open($event)' }, template: `
     <ng-content />
     <ng-template #content>
-      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="ariaLabel()">
-        @for (item of items(); track $index) {
+      <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().contextMenu)">
+        @for (item of visibleItems(); track $index) {
           @if (item.separator) { <div class="cb-contextmenu__separator" role="separator"></div> }
           @else {
             <button class="cb-contextmenu__item" type="button" role="menuitem" [disabled]="item.disabled" (click)="select(item)">