@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-confirmdialog.mjs

@@ -1,9 +1,9 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, model, input, output, effect, ViewEncapsulation, 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 } from '@caribeng/ui';
+import { injectCbTranslation, CbConfirmationService } from '@caribeng/ui';
 import { CbButton } from '@caribeng/ui/button';
 
 let nextUid = 0;
@@ -22,11 +22,22 @@ let nextUid = 0;
  *   (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 */ []));
@@ -43,10 +54,35 @@ class CbConfirmDialog {
         /** 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(() => {
@@ -59,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())
@@ -66,14 +118,24 @@ 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 }, acceptSeverity: { classPropertyName: "acceptSeverity", publicName: "acceptSeverity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", accepted: "accepted", rejected: "rejected" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    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
@@ -86,11 +148,11 @@ class CbConfirmDialog {
           cdkTrapFocusAutoCapture
           (click)="$event.stopPropagation()"
         >
-          <h2 class="cb-confirm-dialog__title" [id]="titleId">{{ header() ?? t().confirm }}</h2>
-          <p class="cb-confirm-dialog__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+          <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()">{{ rejectLabel() ?? t().cancel }}</cb-button>
-            <cb-button [severity]="acceptSeverity()" (click)="confirm()">{{ acceptLabel() ?? t().accept }}</cb-button>
+            <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>
@@ -112,17 +174,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           cdkTrapFocusAutoCapture
           (click)="$event.stopPropagation()"
         >
-          <h2 class="cb-confirm-dialog__title" [id]="titleId">{{ header() ?? t().confirm }}</h2>
-          <p class="cb-confirm-dialog__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+          <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()">{{ rejectLabel() ?? t().cancel }}</cb-button>
-            <cb-button [severity]="acceptSeverity()" (click)="confirm()">{{ acceptLabel() ?? t().accept }}</cb-button>
+            <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 }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+        }], 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,9 +1,9 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, Injector, model, input, output, viewChild, signal, afterNextRender, ViewEncapsulation, 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 } from '@caribeng/ui';
+import { injectCbTranslation, CbConfirmationService } from '@caribeng/ui';
 import { CbButton } from '@caribeng/ui/button';
 
 let nextUid = 0;
@@ -17,6 +17,19 @@ let nextUid = 0;
  * <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() {
@@ -24,6 +37,7 @@ class CbConfirmPopup {
         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 */
@@ -38,6 +52,15 @@ class CbConfirmPopup {
         /** 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');
@@ -46,10 +69,45 @@ class CbConfirmPopup {
         ...(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) {
@@ -77,24 +135,38 @@ class CbConfirmPopup {
     }
     accept() {
         this.accepted.emit();
-        this.close();
+        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.overlayRef.dispose();
-            this.overlayRef = null;
-            this.anchored.set(false);
+            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);
+    }
     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 }, acceptSeverity: { classPropertyName: "acceptSeverity", publicName: "acceptSeverity", 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: `
+    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" />
     }
@@ -107,13 +179,13 @@ class CbConfirmPopup {
         [attr.aria-describedby]="messageId"
         (keydown.escape)="reject()"
       >
-        <p class="cb-confirm-popup__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+        <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()">
-            {{ rejectLabel() ?? t().cancel }}
+            {{ shown().rejectLabel }}
           </cb-button>
-          <cb-button size="sm" [severity]="acceptSeverity()" (click)="accept()">
-            {{ acceptLabel() ?? t().accept }}
+          <cb-button size="sm" [severity]="shown().acceptSeverity" (click)="accept()">
+            {{ shown().acceptLabel }}
           </cb-button>
         </div>
       </section>
@@ -135,19 +207,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [attr.aria-describedby]="messageId"
         (keydown.escape)="reject()"
       >
-        <p class="cb-confirm-popup__message" [id]="messageId">{{ message() ?? t().confirmMessage }}</p>
+        <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()">
-            {{ rejectLabel() ?? t().cancel }}
+            {{ shown().rejectLabel }}
           </cb-button>
-          <cb-button size="sm" [severity]="acceptSeverity()" (click)="accept()">
-            {{ acceptLabel() ?? t().accept }}
+          <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"] }]
-        }], 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 }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+        }], 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,9 +1,9 @@
 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 } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Context menu that opens at the pointer position on right click. */
 class CbContextMenu {
@@ -15,6 +15,9 @@ class CbContextMenu {
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** 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();
@@ -58,6 +61,7 @@ class CbContextMenu {
     select(item) {
         if (item.disabled || item.separator)
             return;
+        cbRunCommand(item);
         this.itemSelect.emit(item);
         this.close();
     }
@@ -70,7 +74,7 @@ class CbContextMenu {
     <ng-content />
     <ng-template #content>
       <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().contextMenu)">
-        @for (item of items(); track $index) {
+        @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)">
@@ -89,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <ng-content />
     <ng-template #content>
       <div class="cb-contextmenu__panel" role="menu" [attr.aria-label]="(ariaLabel() ?? t().contextMenu)">
-        @for (item of items(); track $index) {
+        @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)">

package/fesm2022/caribeng-ui-copy-button.mjs

@@ -0,0 +1,230 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, booleanAttribute, output, signal, computed, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * Portapapeles de CaribeNG. Usa la API asíncrona del navegador y, si no está
+ * disponible (HTTP sin contexto seguro, navegadores antiguos), un textarea
+ * temporal con `execCommand('copy')`.
+ */
+class CbClipboard {
+    constructor() {
+        this.doc = inject(DOCUMENT);
+    }
+    /** Copia `text`. Resuelve `true` si se copió y `false` si el navegador lo impidió. */
+    async copy(text) {
+        const clipboard = this.doc.defaultView?.navigator?.clipboard;
+        if (clipboard?.writeText) {
+            try {
+                await clipboard.writeText(text);
+                return true;
+            }
+            catch {
+                // Sin permiso o sin foco: se intenta el método clásico.
+            }
+        }
+        return this.copyWithTextarea(text);
+    }
+    copyWithTextarea(text) {
+        const doc = this.doc;
+        if (!doc.body || typeof doc.execCommand !== 'function')
+            return false;
+        const active = doc.activeElement;
+        const area = doc.createElement('textarea');
+        area.value = text;
+        area.setAttribute('readonly', '');
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        area.style.pointerEvents = 'none';
+        doc.body.appendChild(area);
+        area.select();
+        let ok = false;
+        try {
+            ok = doc.execCommand('copy');
+        }
+        catch {
+            ok = false;
+        }
+        area.remove();
+        active?.focus?.();
+        return ok;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbClipboard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbClipboard, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbClipboard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Botón que copia un texto al portapapeles y confirma con un ✓ durante unos
+ * segundos. El resultado se anuncia a los lectores de pantalla.
+ *
+ * @example
+ * ```html
+ * <span>0012 3456 7890</span> <cb-copy-button value="001234567890" />
+ * <cb-copy-button [value]="apiKey" showLabel variant="outlined" />
+ * ```
+ */
+class CbCopyButton {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.clipboard = inject(CbClipboard);
+        this.timer = null;
+        /** Texto que se copia. */
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Muestra el texto ("Copiar" / "Copiado") junto al icono. */
+        this.showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Texto del botón y nombre accesible. Por defecto, "Copiar" del idioma activo. */
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Texto tras copiar. Por defecto, "Copiado". */
+        this.copiedLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []));
+        /** Milisegundos que dura la confirmación. */
+        this.timeout = input(2000, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeout" }] : /* istanbul ignore next */ []));
+        this.variant = input('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.severity = input('secondary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        this.size = input('sm', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Texto copiado. */
+        this.copied = output();
+        /** El navegador no permitió copiar. */
+        this.copyError = output();
+        this.state = signal('idle', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.buttonLabel = computed(() => this.label() ?? this.t().copy, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+        this.visibleLabel = computed(() => this.state() === 'copied' ? (this.copiedLabel() ?? this.t().copied) : this.buttonLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleLabel" }] : /* istanbul ignore next */ []));
+        this.announcement = computed(() => {
+            const state = this.state();
+            if (state === 'copied')
+                return this.copiedLabel() ?? this.t().copied;
+            if (state === 'error')
+                return this.t().copyFailed;
+            return '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.iconSize = computed(() => (this.size() === 'lg' ? 18 : this.size() === 'sm' ? 14 : 16), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        inject(DestroyRef).onDestroy(() => this.clearTimer());
+    }
+    /** Copia el valor y muestra la confirmación. Resuelve `true` si lo consiguió. */
+    async copy() {
+        if (this.disabled())
+            return false;
+        const text = String(this.value() ?? '');
+        const ok = await this.clipboard.copy(text);
+        this.state.set(ok ? 'copied' : 'error');
+        if (ok)
+            this.copied.emit(text);
+        else
+            this.copyError.emit(text);
+        this.clearTimer();
+        this.timer = setTimeout(() => this.state.set('idle'), Math.max(0, this.timeout()));
+        return ok;
+    }
+    clearTimer() {
+        if (this.timer !== null)
+            clearTimeout(this.timer);
+        this.timer = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCopyButton, isStandalone: true, selector: "cb-copy-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyError: "copyError" }, host: { classAttribute: "cb-copy-button" }, ngImport: i0, template: `
+    <cb-button
+      [variant]="variant()"
+      [severity]="state() === 'copied' ? 'success' : severity()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [ariaLabel]="showLabel() ? undefined : buttonLabel()"
+      (click)="copy()"
+    >
+      <cb-icon [name]="state() === 'copied' ? 'check' : 'copy'" [size]="iconSize()" aria-hidden="true" />
+      @if (showLabel()) {
+        <span>{{ visibleLabel() }}</span>
+      }
+    </cb-button>
+    <span class="cb-copy-button__status" role="status">{{ announcement() }}</span>
+  `, isInline: true, styles: [":host{display:inline-flex;vertical-align:middle}.cb-copy-button__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { 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: CbCopyButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-copy-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton, CbIcon], host: { class: 'cb-copy-button' }, template: `
+    <cb-button
+      [variant]="variant()"
+      [severity]="state() === 'copied' ? 'success' : severity()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [ariaLabel]="showLabel() ? undefined : buttonLabel()"
+      (click)="copy()"
+    >
+      <cb-icon [name]="state() === 'copied' ? 'check' : 'copy'" [size]="iconSize()" aria-hidden="true" />
+      @if (showLabel()) {
+        <span>{{ visibleLabel() }}</span>
+      }
+    </cb-button>
+    <span class="cb-copy-button__status" role="status">{{ announcement() }}</span>
+  `, styles: [":host{display:inline-flex;vertical-align:middle}.cb-copy-button__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
+
+/**
+ * Copia un texto al portapapeles al pulsar el elemento (botón, enlace, icono…).
+ * Para el aviso visual usa `cb-copy-button`, o reacciona a `copied`.
+ *
+ * @example
+ * ```html
+ * <button type="button" [cbCopy]="cuenta" (copied)="toast.add({ summary: 'Copiado' })">Copiar</button>
+ * ```
+ */
+class CbCopy {
+    constructor() {
+        this.clipboard = inject(CbClipboard);
+        /** Texto que se copia. */
+        this.cbCopy = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbCopy" }] : /* istanbul ignore next */ []));
+        /** Texto copiado. */
+        this.copied = output();
+        /** El navegador no permitió copiar. */
+        this.copyError = output();
+    }
+    /** Copia el texto. Resuelve `true` si lo consiguió. */
+    async copy() {
+        const text = String(this.cbCopy() ?? '');
+        const ok = await this.clipboard.copy(text);
+        if (ok)
+            this.copied.emit(text);
+        else
+            this.copyError.emit(text);
+        return ok;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbCopy, isStandalone: true, selector: "[cbCopy]", inputs: { cbCopy: { classPropertyName: "cbCopy", publicName: "cbCopy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyError: "copyError" }, host: { listeners: { "click": "copy()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cbCopy]',
+                    host: { '(click)': 'copy()' },
+                }]
+        }], propDecorators: { cbCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbCopy", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/copy-button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbClipboard, CbCopy, CbCopyButton };