@caribeng/ui 22.4.0 → 22.6.0

package/fesm2022/caribeng-ui-treetable.mjs

@@ -1,8 +1,9 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, inject, TemplateRef, Directive, ElementRef, output, contentChildren, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, CB_CONFIG, cbToNumber, cbFormatAmount, cbSummarize } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
+import { currencySymbol, cbDownloadXlsx } from '@caribeng/ui/xlsx';
 
 /** Plantilla para las celdas de una columna (`cbTreeTableCell="campo"`). */
 class CbTreeTableCellTemplate {
@@ -45,10 +46,30 @@ class CbTreeTable {
         /** Nombre accesible de la tabla. */
         this.ariaLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Las filas padre muestran, en las columnas con `summary`, el total de sus
+         * descendientes (p. ej. el saldo de una cuenta mayor a partir de sus auxiliares).
+         */
+        this.rollup = input(false, { ...(ngDevMode ? { debugName: "rollup" } : /* istanbul ignore next */ {}), transform: (v) => v !== false && v != null && `${v}` !== 'false' });
+        /** Moneda de las columnas `currency` (si no, la de `provideCaribeNG({ currency })`). */
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        /** Muestra el pie con los totales de las columnas con `summary`. */
+        this.showFooter = input(true, { ...(ngDevMode ? { debugName: "showFooter" } : /* istanbul ignore next */ {}), transform: (v) => v !== false && v != null && `${v}` !== 'false' });
+        /** Clases CSS extra por fila (p. ej. para filas de total). */
+        this.rowClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+        /** Las filas sin hijos se activan con clic o Enter (`nodeActivate`), p. ej. para ver sus movimientos. */
+        this.activateLeaves = input(false, { ...(ngDevMode ? { debugName: "activateLeaves" } : /* istanbul ignore next */ {}), transform: (v) => v !== false && v != null && `${v}` !== 'false' });
+        /** Negativos con signo o entre paréntesis (si no, el de `provideCaribeNG({ negativeStyle })`). */
+        this.negativeStyle = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "negativeStyle" }] : /* istanbul ignore next */ []));
         /** Se emite al expandir una fila. */
         this.nodeExpand = output();
         /** Se emite al contraer una fila. */
         this.nodeCollapse = output();
+        /** Con `activateLeaves`: clic o Enter sobre una fila sin hijos. */
+        this.nodeActivate = output();
         this.cellTemplates = contentChildren(CbTreeTableCellTemplate, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
         this.expanded = signal(new Set(), /* @ts-ignore */
@@ -69,6 +90,72 @@ class CbTreeTable {
             return out;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.config = inject(CB_CONFIG);
+        this.hasFooterText = computed(() => this.columns().some((c) => c.footer), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooterText" }] : /* istanbul ignore next */ []));
+        this.hasFooter = computed(() => this.hasFooterText() || this.columns().some((c) => c.summary), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        /** Columna de la etiqueta "Total": la primera sin total. */
+        this.labelColumn = computed(() => Math.max(0, this.columns().findIndex((c) => !c.summary)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelColumn" }] : /* istanbul ignore next */ []));
+        /** Totales de cada nodo con hijos (sobre sus hojas), por columna con `summary`. */
+        this.aggregates = computed(() => {
+            const cols = this.columns().filter((c) => c.summary);
+            const out = new Map();
+            if (!cols.length)
+                return out;
+            const leavesOf = (node) => {
+                if (!node.children?.length)
+                    return [node.data];
+                const leaves = node.children.flatMap(leavesOf);
+                out.set(node.key, this.summarize(cols, leaves));
+                return leaves;
+            };
+            const all = this.value().flatMap(leavesOf);
+            out.set('', this.summarize(cols, all));
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aggregates" }] : /* istanbul ignore next */ []));
+        /** Totales del pie (sobre todas las hojas). */
+        this.totals = computed(() => this.aggregates().get('') ?? {}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Hoja de Excel con todas las filas (también las contraídas) agrupadas por
+     * nivel con el esquema de Excel, sangría en la primera columna, filas padre en
+     * negrita (con sus totales si hay `rollup`) y el total al final.
+     */
+    toExcelSheet(options = {}) {
+        const cols = this.columns();
+        const locale = this.config.numberLocale ?? this.t().intlLocale;
+        const rows = [];
+        const walk = (nodes, level) => nodes.forEach((node) => {
+            const parent = !!node.children?.length;
+            rows.push({ level, indent: level, bold: parent, cells: cols.map((c) => (c.format && !this.isNumeric(c) ? c.format(this.valueOf(node, c), node) : this.valueOf(node, c))) });
+            if (parent)
+                walk(node.children, level + 1);
+        });
+        walk(this.value(), 0);
+        return {
+            name: options.sheetName ?? (this.ariaLabel() || 'Datos'),
+            title: options.title,
+            columns: cols.map((c) => {
+                const currency = c.currency ?? this.currency() ?? this.config.currency;
+                return {
+                    header: c.header,
+                    type: c.type === 'currency' ? (currency ? 'currency' : 'number') : c.type === 'number' ? 'number' : c.type === 'percent' ? 'percent' : 'text',
+                    decimals: c.decimals,
+                    negative: c.negative ?? this.negativeStyle() ?? this.config.negativeStyle,
+                    symbol: c.type === 'currency' && currency ? currencySymbol(currency, locale) : undefined,
+                };
+            }),
+            rows,
+            totals: this.hasFooter() ? cols.map((c, i) => (c.footer ?? (i === this.labelColumn() && !this.hasFooterText() ? this.t().tableTotal : (this.totals()[c.field] ?? null)))) : undefined,
+        };
+    }
+    /** Descarga el árbol en Excel (`nombre.xlsx`), con los niveles plegables. */
+    exportExcel(filename = 'datos', options = {}) {
+        cbDownloadXlsx(filename, this.toExcelSheet(options));
     }
     /** Expande todas las filas. */
     expandAll() {
@@ -82,6 +169,18 @@ class CbTreeTable {
         walk(this.value());
         this.expanded.set(keys);
     }
+    /** Expande las filas hasta el nivel `level` (1 = solo las raíces visibles) y contrae el resto. */
+    expandToLevel(level) {
+        const keys = new Set();
+        const walk = (nodes, depth) => nodes.forEach((n) => {
+            if (n.children?.length && depth < level) {
+                keys.add(n.key);
+                walk(n.children, depth + 1);
+            }
+        });
+        walk(this.value(), 1);
+        this.expanded.set(keys);
+    }
     /** Contrae todas las filas. */
     collapseAll() {
         this.expanded.set(new Set());
@@ -100,9 +199,61 @@ class CbTreeTable {
         const field = this.columns()[0]?.field;
         return field ? String(node.data[field] ?? '') : node.key;
     }
+    /** Valor de una celda: el total de sus descendientes en las filas padre con `rollup`. */
+    valueOf(node, col) {
+        if (this.rollup() && col.summary && node.children?.length)
+            return this.aggregates().get(node.key)?.[col.field];
+        return node.data[col.field];
+    }
+    isNumeric(col) {
+        return col.type === 'number' || col.type === 'currency' || col.type === 'percent';
+    }
+    alignOf(col) {
+        return col.align || (this.isNumeric(col) ? 'right' : null);
+    }
+    isNegative(value, col) {
+        const n = this.isNumeric(col) ? cbToNumber(value) : null;
+        return n !== null && n < 0;
+    }
+    display(value, col, node) {
+        if (col.format)
+            return col.format(value, node);
+        return this.isNumeric(col) ? this.formatNumber(value, col) : value;
+    }
+    summaryText(value, col) {
+        if (value === undefined || value === null)
+            return '';
+        if (col.summary === 'count')
+            return cbFormatAmount(value, this.config.numberLocale ?? this.t().intlLocale, { decimals: 0 });
+        return String(this.display(value, col, null) ?? '');
+    }
+    summarize(cols, leaves) {
+        const out = {};
+        for (const col of cols) {
+            out[col.field] = typeof col.summary === 'function' ? col.summary(leaves) : cbSummarize(leaves.map((d) => d[col.field]), col.summary);
+        }
+        return out;
+    }
+    formatNumber(value, col) {
+        const locale = this.config.numberLocale ?? this.t().intlLocale;
+        const negative = col.negative ?? this.negativeStyle() ?? this.config.negativeStyle ?? 'minus';
+        if (col.type === 'percent') {
+            const n = cbToNumber(value);
+            if (n === null)
+                return value == null ? '' : String(value);
+            const text = new Intl.NumberFormat(locale, { style: 'percent', minimumFractionDigits: col.decimals ?? 0, maximumFractionDigits: col.decimals ?? 2 }).format(Math.abs(n));
+            return n < 0 ? (negative === 'parens' ? `(${text})` : `-${text}`) : text;
+        }
+        const currency = col.type === 'currency' ? (col.currency ?? this.currency() ?? this.config.currency ?? null) : null;
+        return cbFormatAmount(value, locale, { currency, decimals: col.decimals, negative });
+    }
     cellTemplate(field) {
         return this.cellTemplates().find((c) => c.field() === field)?.template ?? null;
     }
+    onRowClick(node) {
+        if (this.activateLeaves() && !this.hasChildren(node))
+            this.nodeActivate.emit(node);
+    }
     toggle(node) {
         this.setExpanded(node, !this.isExpanded(node));
     }
@@ -142,6 +293,8 @@ class CbTreeTable {
             case ' ':
                 if (this.hasChildren(current.node))
                     this.toggle(current.node);
+                else if (event.key === 'Enter' && this.activateLeaves())
+                    this.nodeActivate.emit(current.node);
                 break;
             default:
                 return;
@@ -167,12 +320,12 @@ class CbTreeTable {
         (open ? this.nodeExpand : this.nodeCollapse).emit(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTreeTable, isStandalone: true, selector: "cb-treetable", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, host: { classAttribute: "cb-treetable-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTreeTableCellTemplate, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTreeTable, isStandalone: true, selector: "cb-treetable", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, rollup: { classPropertyName: "rollup", publicName: "rollup", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, activateLeaves: { classPropertyName: "activateLeaves", publicName: "activateLeaves", isSignal: true, isRequired: false, transformFunction: null }, negativeStyle: { classPropertyName: "negativeStyle", publicName: "negativeStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeActivate: "nodeActivate" }, host: { classAttribute: "cb-treetable-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTreeTableCellTemplate, isSignal: true }], ngImport: i0, template: `
     <table class="cb-treetable" role="treegrid" [attr.aria-label]="ariaLabel() || null" (keydown)="onKeydown($event)">
       <thead>
         <tr>
           @for (col of columns(); track col.field) {
-            <th scope="col">{{ col.header }}</th>
+            <th scope="col" [style.text-align]="alignOf(col)" [style.width]="col.width || null">{{ col.header }}</th>
           }
         </tr>
       </thead>
@@ -180,6 +333,10 @@ class CbTreeTable {
         @for (row of rows(); track row.node.key) {
           <tr
             class="cb-treetable__row"
+            [class]="rowClass()?.(row.node) ?? ''"
+            [class.cb-treetable__row--parent]="rollup() && hasChildren(row.node)"
+            [class.cb-treetable__row--activatable]="activateLeaves() && !hasChildren(row.node)"
+            (click)="onRowClick(row.node)"
             [id]="rowId(row.node)"
             [attr.aria-level]="row.level"
             [attr.aria-setsize]="row.setSize"
@@ -189,8 +346,14 @@ class CbTreeTable {
             (focus)="activeKey.set(row.node.key)"
           >
             @for (col of columns(); track col.field; let first = $first) {
-              <td [class.cb-treetable__first]="first">
+              <td
+                [class.cb-treetable__first]="first"
+                [class.cb-treetable__num]="isNumeric(col)"
+                [class.cb-is-negative]="isNegative(valueOf(row.node, col), col)"
+                [style.text-align]="alignOf(col)"
+              >
                 @if (first) {
+                  <span class="cb-treetable__cell">
                   <span
                     class="cb-treetable__indent"
                     [style.inline-size]="'calc(' + (row.level - 1) + ' * var(--cb-treetable-indent, 1.25rem))'"
@@ -209,19 +372,42 @@ class CbTreeTable {
                   } @else {
                     <span class="cb-treetable__spacer" aria-hidden="true"></span>
                   }
-                }
-                @if (cellTemplate(col.field); as tpl) {
-                  <ng-container *ngTemplateOutlet="tpl; context: { $implicit: row.node.data[col.field], node: row.node, level: row.level }" />
+                  <span class="cb-treetable__label">
+                    <ng-container *ngTemplateOutlet="content; context: { row, col }" />
+                  </span>
+                  </span>
                 } @else {
-                  {{ row.node.data[col.field] }}
+                  <ng-container *ngTemplateOutlet="content; context: { row, col }" />
                 }
               </td>
             }
           </tr>
         }
       </tbody>
+      <ng-template #content let-row="row" let-col="col">
+        @if (cellTemplate(col.field); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: valueOf(row.node, col), node: row.node, level: row.level }" />
+        } @else {
+          {{ display(valueOf(row.node, col), col, row.node) }}
+        }
+      </ng-template>
+      @if (showFooter() && hasFooter() && rows().length) {
+        <tfoot>
+          <tr class="cb-treetable__foot">
+            @for (col of columns(); track col.field; let c = $index) {
+              @if (col.footer || (c === labelColumn() && !hasFooterText())) {
+                <th scope="row" [style.text-align]="alignOf(col)">{{ col.footer || t().tableTotal }}</th>
+              } @else {
+                <td [class.cb-treetable__num]="isNumeric(col)" [class.cb-is-negative]="isNegative(totals()[col.field], col)" [style.text-align]="alignOf(col)">
+                  {{ summaryText(totals()[col.field], col) }}
+                </td>
+              }
+            }
+          </tr>
+        </tfoot>
+      }
     </table>
-  `, isInline: true, styles: [":host{display:block;overflow-x:auto;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-treetable{width:100%;border-collapse:collapse}.cb-treetable th{padding:.65rem .85rem;text-align:left;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--cb-color-text-muted);border-bottom:1px solid var(--cb-color-border)}.cb-treetable td{padding:.55rem .85rem;border-bottom:1px solid var(--cb-color-border);vertical-align:middle}.cb-treetable__row{outline:none;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__row:hover{background:color-mix(in srgb,var(--cb-color-text) 4%,transparent)}.cb-treetable__row:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-treetable__first{white-space:nowrap}.cb-treetable__indent,.cb-treetable__spacer{display:inline-block;vertical-align:middle}.cb-treetable__spacer{width:1.5rem}.cb-treetable__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.25rem;padding:0;vertical-align:middle;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-treetable__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-treetable__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__toggler cb-icon.cb-is-open{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;overflow-x:auto;container-type:inline-size;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-treetable{width:100%;border-collapse:collapse}.cb-treetable th{padding:.65rem .85rem;text-align:left;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--cb-color-text-muted);border-bottom:1px solid var(--cb-color-border)}.cb-treetable td{padding:.55rem .85rem;border-bottom:1px solid var(--cb-color-border);vertical-align:middle}.cb-treetable__row{outline:none;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__row:hover{background:color-mix(in srgb,var(--cb-color-text) 4%,transparent)}.cb-treetable__row:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-treetable__first{white-space:nowrap}.cb-treetable__cell{display:contents}.cb-treetable__indent,.cb-treetable__spacer{display:inline-block;vertical-align:middle}.cb-treetable__spacer{width:1.5rem}.cb-treetable__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.25rem;padding:0;vertical-align:middle;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-treetable__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-treetable__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__toggler cb-icon.cb-is-open{transform:rotate(90deg)}.cb-treetable__num{font-variant-numeric:tabular-nums;white-space:nowrap}.cb-treetable .cb-is-negative{color:var(--cb-color-danger-text, #dc2626)}.cb-treetable__row--parent{font-weight:var(--cb-font-weight-semibold, 600)}.cb-treetable__foot>th,.cb-treetable__foot>td{padding:.65rem .85rem;border-top:2px solid var(--cb-color-border-strong);background:var(--cb-color-surface-subtle);color:var(--cb-color-text-strong, var(--cb-color-text));font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:none;letter-spacing:0}.cb-treetable__row--activatable{cursor:pointer}@container (max-width: 40rem){.cb-treetable__first,.cb-treetable thead th:first-child,.cb-treetable__foot>:first-child{position:sticky;left:0;z-index:1;min-width:8rem;max-width:11rem;white-space:normal}.cb-treetable__first,.cb-treetable thead th:first-child{background-color:var(--cb-color-bg)}.cb-treetable__first{box-shadow:inset -1px 0 0 var(--cb-color-border)}.cb-treetable__cell{display:flex;align-items:center}.cb-treetable__indent,.cb-treetable__spacer,.cb-treetable__toggler{flex:none}.cb-treetable__label{flex:1;min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CbTreeTable, decorators: [{
             type: Component,
@@ -230,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <thead>
         <tr>
           @for (col of columns(); track col.field) {
-            <th scope="col">{{ col.header }}</th>
+            <th scope="col" [style.text-align]="alignOf(col)" [style.width]="col.width || null">{{ col.header }}</th>
           }
         </tr>
       </thead>
@@ -238,6 +424,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         @for (row of rows(); track row.node.key) {
           <tr
             class="cb-treetable__row"
+            [class]="rowClass()?.(row.node) ?? ''"
+            [class.cb-treetable__row--parent]="rollup() && hasChildren(row.node)"
+            [class.cb-treetable__row--activatable]="activateLeaves() && !hasChildren(row.node)"
+            (click)="onRowClick(row.node)"
             [id]="rowId(row.node)"
             [attr.aria-level]="row.level"
             [attr.aria-setsize]="row.setSize"
@@ -247,8 +437,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             (focus)="activeKey.set(row.node.key)"
           >
             @for (col of columns(); track col.field; let first = $first) {
-              <td [class.cb-treetable__first]="first">
+              <td
+                [class.cb-treetable__first]="first"
+                [class.cb-treetable__num]="isNumeric(col)"
+                [class.cb-is-negative]="isNegative(valueOf(row.node, col), col)"
+                [style.text-align]="alignOf(col)"
+              >
                 @if (first) {
+                  <span class="cb-treetable__cell">
                   <span
                     class="cb-treetable__indent"
                     [style.inline-size]="'calc(' + (row.level - 1) + ' * var(--cb-treetable-indent, 1.25rem))'"
@@ -267,20 +463,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   } @else {
                     <span class="cb-treetable__spacer" aria-hidden="true"></span>
                   }
-                }
-                @if (cellTemplate(col.field); as tpl) {
-                  <ng-container *ngTemplateOutlet="tpl; context: { $implicit: row.node.data[col.field], node: row.node, level: row.level }" />
+                  <span class="cb-treetable__label">
+                    <ng-container *ngTemplateOutlet="content; context: { row, col }" />
+                  </span>
+                  </span>
                 } @else {
-                  {{ row.node.data[col.field] }}
+                  <ng-container *ngTemplateOutlet="content; context: { row, col }" />
                 }
               </td>
             }
           </tr>
         }
       </tbody>
+      <ng-template #content let-row="row" let-col="col">
+        @if (cellTemplate(col.field); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: valueOf(row.node, col), node: row.node, level: row.level }" />
+        } @else {
+          {{ display(valueOf(row.node, col), col, row.node) }}
+        }
+      </ng-template>
+      @if (showFooter() && hasFooter() && rows().length) {
+        <tfoot>
+          <tr class="cb-treetable__foot">
+            @for (col of columns(); track col.field; let c = $index) {
+              @if (col.footer || (c === labelColumn() && !hasFooterText())) {
+                <th scope="row" [style.text-align]="alignOf(col)">{{ col.footer || t().tableTotal }}</th>
+              } @else {
+                <td [class.cb-treetable__num]="isNumeric(col)" [class.cb-is-negative]="isNegative(totals()[col.field], col)" [style.text-align]="alignOf(col)">
+                  {{ summaryText(totals()[col.field], col) }}
+                </td>
+              }
+            }
+          </tr>
+        </tfoot>
+      }
     </table>
-  `, styles: [":host{display:block;overflow-x:auto;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-treetable{width:100%;border-collapse:collapse}.cb-treetable th{padding:.65rem .85rem;text-align:left;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--cb-color-text-muted);border-bottom:1px solid var(--cb-color-border)}.cb-treetable td{padding:.55rem .85rem;border-bottom:1px solid var(--cb-color-border);vertical-align:middle}.cb-treetable__row{outline:none;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__row:hover{background:color-mix(in srgb,var(--cb-color-text) 4%,transparent)}.cb-treetable__row:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-treetable__first{white-space:nowrap}.cb-treetable__indent,.cb-treetable__spacer{display:inline-block;vertical-align:middle}.cb-treetable__spacer{width:1.5rem}.cb-treetable__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.25rem;padding:0;vertical-align:middle;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-treetable__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-treetable__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__toggler cb-icon.cb-is-open{transform:rotate(90deg)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTreeTableCellTemplate), { isSignal: true }] }] } });
+  `, styles: [":host{display:block;overflow-x:auto;container-type:inline-size;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-treetable{width:100%;border-collapse:collapse}.cb-treetable th{padding:.65rem .85rem;text-align:left;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--cb-color-text-muted);border-bottom:1px solid var(--cb-color-border)}.cb-treetable td{padding:.55rem .85rem;border-bottom:1px solid var(--cb-color-border);vertical-align:middle}.cb-treetable__row{outline:none;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__row:hover{background:color-mix(in srgb,var(--cb-color-text) 4%,transparent)}.cb-treetable__row:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-treetable__first{white-space:nowrap}.cb-treetable__cell{display:contents}.cb-treetable__indent,.cb-treetable__spacer{display:inline-block;vertical-align:middle}.cb-treetable__spacer{width:1.5rem}.cb-treetable__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.25rem;padding:0;vertical-align:middle;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-treetable__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-treetable__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__toggler cb-icon.cb-is-open{transform:rotate(90deg)}.cb-treetable__num{font-variant-numeric:tabular-nums;white-space:nowrap}.cb-treetable .cb-is-negative{color:var(--cb-color-danger-text, #dc2626)}.cb-treetable__row--parent{font-weight:var(--cb-font-weight-semibold, 600)}.cb-treetable__foot>th,.cb-treetable__foot>td{padding:.65rem .85rem;border-top:2px solid var(--cb-color-border-strong);background:var(--cb-color-surface-subtle);color:var(--cb-color-text-strong, var(--cb-color-text));font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:none;letter-spacing:0}.cb-treetable__row--activatable{cursor:pointer}@container (max-width: 40rem){.cb-treetable__first,.cb-treetable thead th:first-child,.cb-treetable__foot>:first-child{position:sticky;left:0;z-index:1;min-width:8rem;max-width:11rem;white-space:normal}.cb-treetable__first,.cb-treetable thead th:first-child{background-color:var(--cb-color-bg)}.cb-treetable__first{box-shadow:inset -1px 0 0 var(--cb-color-border)}.cb-treetable__cell{display:flex;align-items:center}.cb-treetable__indent,.cb-treetable__spacer,.cb-treetable__toggler{flex:none}.cb-treetable__label{flex:1;min-width:0}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], rollup: [{ type: i0.Input, args: [{ isSignal: true, alias: "rollup", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], activateLeaves: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLeaves", required: false }] }], negativeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "negativeStyle", required: false }] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeActivate: [{ type: i0.Output, args: ["nodeActivate"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTreeTableCellTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/{caribeng-ui-caribe-voucher.mjs → caribeng-ui-voucher.mjs}

@@ -3,7 +3,7 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Voucher de Caribe Design: comprobante de operación con filas clave/valor y
+ * Voucher: comprobante de operación con filas clave/valor y
  * una acción para compartir.
  *
  * @example
@@ -24,53 +24,53 @@ class CbVoucher {
         this.copy = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbVoucher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbVoucher, isStandalone: true, selector: "cb-voucher", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy" }, ngImport: i0, template: `
-    <article class="cb-voucher">
-      <header class="cb-voucher__head">
-        <span class="cb-voucher__check" aria-hidden="true">✓</span>
-        <h2 class="cb-voucher__title">{{ (title() ?? t().receipt) }}</h2>
-      </header>
-      <div class="cb-voucher__intro"><ng-content /></div>
-      <dl class="cb-voucher__list">
-        @for (row of rows(); track $index) {
-          <div class="cb-voucher__row">
-            <dt class="cb-voucher__label">{{ row.label }}</dt>
-            <dd class="cb-voucher__value">{{ row.value }}</dd>
-          </div>
-        }
-      </dl>
-      <div class="cb-voucher__foot">
-        <button type="button" class="cb-voucher__action" (click)="copy.emit()">
-          {{ (actionLabel() ?? t().share) }}
-        </button>
-      </div>
-    </article>
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:22rem}.cb-voucher{display:flex;flex-direction:column;gap:var(--cb-space-4, 1rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-voucher__head{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-voucher__check{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-size:1.4rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;background-color:var(--cb-color-success-500, #16a34a);border-radius:var(--cb-radius-full, 999px)}.cb-voucher__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-voucher__intro{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}.cb-voucher__intro:empty{display:none}.cb-voucher__list{margin:0;padding:var(--cb-space-3, .75rem) 0;border-top:1px dashed var(--cb-color-border, #e2e8f0);border-bottom:1px dashed var(--cb-color-border, #e2e8f0);display:flex;flex-direction:column;gap:var(--cb-space-3, .6rem)}.cb-voucher__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cb-space-3, .75rem)}.cb-voucher__label{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}.cb-voucher__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);text-align:right}.cb-voucher__foot{display:flex;justify-content:center}.cb-voucher__action{width:100%;padding:var(--cb-space-3, .65rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-voucher__action:hover{background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-voucher{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-voucher__list{border-color:var(--cb-color-surface-600, #475569)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbVoucher, isStandalone: true, selector: "cb-voucher", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy" }, ngImport: i0, template: `
+    <article class="cb-voucher">
+      <header class="cb-voucher__head">
+        <span class="cb-voucher__check" aria-hidden="true">✓</span>
+        <h2 class="cb-voucher__title">{{ (title() ?? t().receipt) }}</h2>
+      </header>
+      <div class="cb-voucher__intro"><ng-content /></div>
+      <dl class="cb-voucher__list">
+        @for (row of rows(); track $index) {
+          <div class="cb-voucher__row">
+            <dt class="cb-voucher__label">{{ row.label }}</dt>
+            <dd class="cb-voucher__value">{{ row.value }}</dd>
+          </div>
+        }
+      </dl>
+      <div class="cb-voucher__foot">
+        <button type="button" class="cb-voucher__action" (click)="copy.emit()">
+          {{ (actionLabel() ?? t().share) }}
+        </button>
+      </div>
+    </article>
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:22rem}.cb-voucher{display:flex;flex-direction:column;gap:var(--cb-space-4, 1rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-voucher__head{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-voucher__check{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-size:1.4rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;background-color:var(--cb-color-success-500, #16a34a);border-radius:var(--cb-radius-full, 999px)}.cb-voucher__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-voucher__intro{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}.cb-voucher__intro:empty{display:none}.cb-voucher__list{margin:0;padding:var(--cb-space-3, .75rem) 0;border-top:1px dashed var(--cb-color-border, #e2e8f0);border-bottom:1px dashed var(--cb-color-border, #e2e8f0);display:flex;flex-direction:column;gap:var(--cb-space-3, .6rem)}.cb-voucher__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cb-space-3, .75rem)}.cb-voucher__label{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}.cb-voucher__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);text-align:right}.cb-voucher__foot{display:flex;justify-content:center}.cb-voucher__action{width:100%;padding:var(--cb-space-3, .65rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:#fff;background-color:var(--cb-color-primary-700, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-voucher__action:hover{background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-voucher{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-voucher__list{border-color:var(--cb-color-surface-600, #475569)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbVoucher, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-voucher', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <article class="cb-voucher">
-      <header class="cb-voucher__head">
-        <span class="cb-voucher__check" aria-hidden="true">✓</span>
-        <h2 class="cb-voucher__title">{{ (title() ?? t().receipt) }}</h2>
-      </header>
-      <div class="cb-voucher__intro"><ng-content /></div>
-      <dl class="cb-voucher__list">
-        @for (row of rows(); track $index) {
-          <div class="cb-voucher__row">
-            <dt class="cb-voucher__label">{{ row.label }}</dt>
-            <dd class="cb-voucher__value">{{ row.value }}</dd>
-          </div>
-        }
-      </dl>
-      <div class="cb-voucher__foot">
-        <button type="button" class="cb-voucher__action" (click)="copy.emit()">
-          {{ (actionLabel() ?? t().share) }}
-        </button>
-      </div>
-    </article>
-  `, styles: [":host{display:block;width:100%;max-width:22rem}.cb-voucher{display:flex;flex-direction:column;gap:var(--cb-space-4, 1rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-voucher__head{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-voucher__check{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-size:1.4rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;background-color:var(--cb-color-success-500, #16a34a);border-radius:var(--cb-radius-full, 999px)}.cb-voucher__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-voucher__intro{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}.cb-voucher__intro:empty{display:none}.cb-voucher__list{margin:0;padding:var(--cb-space-3, .75rem) 0;border-top:1px dashed var(--cb-color-border, #e2e8f0);border-bottom:1px dashed var(--cb-color-border, #e2e8f0);display:flex;flex-direction:column;gap:var(--cb-space-3, .6rem)}.cb-voucher__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cb-space-3, .75rem)}.cb-voucher__label{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}.cb-voucher__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);text-align:right}.cb-voucher__foot{display:flex;justify-content:center}.cb-voucher__action{width:100%;padding:var(--cb-space-3, .65rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-voucher__action:hover{background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-voucher{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-voucher__list{border-color:var(--cb-color-surface-600, #475569)}\n"] }]
+            args: [{ selector: 'cb-voucher', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <article class="cb-voucher">
+      <header class="cb-voucher__head">
+        <span class="cb-voucher__check" aria-hidden="true">✓</span>
+        <h2 class="cb-voucher__title">{{ (title() ?? t().receipt) }}</h2>
+      </header>
+      <div class="cb-voucher__intro"><ng-content /></div>
+      <dl class="cb-voucher__list">
+        @for (row of rows(); track $index) {
+          <div class="cb-voucher__row">
+            <dt class="cb-voucher__label">{{ row.label }}</dt>
+            <dd class="cb-voucher__value">{{ row.value }}</dd>
+          </div>
+        }
+      </dl>
+      <div class="cb-voucher__foot">
+        <button type="button" class="cb-voucher__action" (click)="copy.emit()">
+          {{ (actionLabel() ?? t().share) }}
+        </button>
+      </div>
+    </article>
+  `, styles: [":host{display:block;width:100%;max-width:22rem}.cb-voucher{display:flex;flex-direction:column;gap:var(--cb-space-4, 1rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-voucher__head{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-voucher__check{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-size:1.4rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;background-color:var(--cb-color-success-500, #16a34a);border-radius:var(--cb-radius-full, 999px)}.cb-voucher__title{margin:0;font-size:var(--cb-text-lg, 1.05rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-voucher__intro{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}.cb-voucher__intro:empty{display:none}.cb-voucher__list{margin:0;padding:var(--cb-space-3, .75rem) 0;border-top:1px dashed var(--cb-color-border, #e2e8f0);border-bottom:1px dashed var(--cb-color-border, #e2e8f0);display:flex;flex-direction:column;gap:var(--cb-space-3, .6rem)}.cb-voucher__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cb-space-3, .75rem)}.cb-voucher__label{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}.cb-voucher__value{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);text-align:right}.cb-voucher__foot{display:flex;justify-content:center}.cb-voucher__action{width:100%;padding:var(--cb-space-3, .65rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:#fff;background-color:var(--cb-color-primary-700, #047857);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-voucher__action:hover{background-color:var(--cb-color-primary-700, #065f46)}:host-context([data-theme=\"dark\"]) .cb-voucher{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-voucher__list{border-color:var(--cb-color-surface-600, #475569)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], copy: [{ type: i0.Output, args: ["copy"] }] } });
 
 /**