@caribeng/ui 22.2.0 → 22.4.0

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

package/fesm2022/caribeng-ui-dataview.mjs

@@ -1,7 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, input, model, contentChild, linkedSignal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 import { CbPaginator } from '@caribeng/ui/paginator';
 
 /** Plantilla de cada elemento de un `<cb-dataview>`. */
@@ -47,6 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 class CbDataView {
     constructor() {
         this.t = injectCbTranslation();
+        this.fmt = cbFormat;
         /** Colección a mostrar. */
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -138,6 +139,7 @@ class CbDataView {
                 type="button"
                 class="cb-dataview__select"
                 [attr.aria-pressed]="isSelected(item)"
+                [attr.aria-label]="fmt(t().selectItem, asItem(item).title)"
                 (click)="selection.set(asItem(item))"
               >
                 {{ t().select }}
@@ -204,6 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type="button"
                 class="cb-dataview__select"
                 [attr.aria-pressed]="isSelected(item)"
+                [attr.aria-label]="fmt(t().selectItem, asItem(item).title)"
                 (click)="selection.set(asItem(item))"
               >
                 {{ t().select }}

package/fesm2022/caribeng-ui-dock.mjs

@@ -1,11 +1,17 @@
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, output, computed, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { injectCbTranslation } from '@caribeng/ui';
 
-/** Compact application launcher with configurable orientation. */
+/**
+ * Compact application launcher with configurable orientation.
+ *
+ * Sigue el patrón WAI-ARIA *toolbar*: un solo elemento entra en el orden de
+ * tabulación y las flechas (según la orientación), Inicio y Fin recorren el resto.
+ */
 class CbDock {
     constructor() {
+        this.host = inject(ElementRef);
         /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
         this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
@@ -15,19 +21,53 @@ class CbDock {
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
+        this.vertical = computed(() => this.position() === 'left' || this.position() === 'right', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+        /** Último elemento enfocado (el que recibe Tab al volver). */
+        this.active = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** Elemento con `tabindex="0"`: el activo si se puede enfocar, si no el primero habilitado. */
+        this.tabStop = computed(() => {
+            const items = this.items();
+            if (items[this.active()] && !items[this.active()].disabled)
+                return this.active();
+            return items.findIndex((item) => !item.disabled);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
     }
     select(item) { if (!item.disabled)
         this.itemSelect.emit(item); }
+    onKeydown(event) {
+        const [prev, next] = this.vertical() ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
+        const enabled = this.items().flatMap((item, i) => (item.disabled ? [] : [i]));
+        if (!enabled.length)
+            return;
+        const at = enabled.indexOf(this.tabStop());
+        let target;
+        if (event.key === next)
+            target = enabled[(at + 1) % enabled.length];
+        else if (event.key === prev)
+            target = enabled[(at - 1 + enabled.length) % enabled.length];
+        else if (event.key === 'Home')
+            target = enabled[0];
+        else if (event.key === 'End')
+            target = enabled[enabled.length - 1];
+        else
+            return;
+        event.preventDefault();
+        this.active.set(target);
+        this.host.nativeElement.querySelectorAll('.cb-dock__item')[target]?.focus();
+    }
     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() ?? 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>
+      <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'" (keydown)="onKeydown($event)">
+        @for (item of items(); track $index; let i = $index) {
+          <li role="none">
             @if (item.url && !item.disabled) {
-              <a class="cb-dock__item" [href]="item.url" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
+              <a class="cb-dock__item" [href]="item.url" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
             } @else {
-              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
+              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
             }
           </li>
         }
@@ -45,13 +85,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.cb-dock--left]': 'position() === "left"',
                     }, template: `
     <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>
+      <ul class="cb-dock__list" role="toolbar" [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'" (keydown)="onKeydown($event)">
+        @for (item of items(); track $index; let i = $index) {
+          <li role="none">
             @if (item.url && !item.disabled) {
-              <a class="cb-dock__item" [href]="item.url" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
+              <a class="cb-dock__item" [href]="item.url" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></a>
             } @else {
-              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
+              <button class="cb-dock__item" type="button" [disabled]="item.disabled" [attr.tabindex]="i === tabStop() ? 0 : -1" [attr.aria-label]="item.label" [title]="item.label" (click)="select(item)" (focus)="active.set(i)"><cb-icon [name]="item.icon" [size]="22" aria-hidden="true" /></button>
             }
           </li>
         }