@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-reconciliation.mjs

@@ -0,0 +1,386 @@
+import * as i0 from '@angular/core';
+import { input, model, booleanAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat, injectCbAmount } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+
+const cents = (n) => Math.round(n * 100);
+function dayOf(value) {
+    const d = value instanceof Date ? value : new Date(+value.slice(0, 4), +value.slice(5, 7) - 1, +value.slice(8, 10));
+    return Math.round(new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime() / 86400000);
+}
+function sumAmounts(items) {
+    return cents(items.reduce((t, i) => t + i.amount, 0)) / 100;
+}
+/** Ids ya emparejados de cada lado. */
+function matchedIds(matches) {
+    return { statement: new Set(matches.flatMap((m) => m.statement)), ledger: new Set(matches.flatMap((m) => m.ledger)) };
+}
+/**
+ * Empareja solo, uno a uno, los movimientos pendientes con el mismo valor y una
+ * fecha cercana (`toleranceDays`): primero los de igual referencia, después los
+ * de fecha más próxima.
+ */
+function autoMatch(statement, ledger, existing, toleranceDays = 3) {
+    const used = matchedIds(existing);
+    const free = ledger.filter((l) => !used.ledger.has(l.id));
+    const out = [];
+    const pending = statement.filter((s) => !used.statement.has(s.id)).sort((a, b) => dayOf(a.date) - dayOf(b.date));
+    for (const s of pending) {
+        const candidates = free.filter((l) => cents(l.amount) === cents(s.amount) && Math.abs(dayOf(l.date) - dayOf(s.date)) <= toleranceDays);
+        if (!candidates.length)
+            continue;
+        const ref = (x) => (x.reference ?? '').trim().toLowerCase();
+        candidates.sort((a, b) => {
+            const ra = ref(s) && ref(a) === ref(s) ? 0 : 1;
+            const rb = ref(s) && ref(b) === ref(s) ? 0 : 1;
+            return ra - rb || Math.abs(dayOf(a.date) - dayOf(s.date)) - Math.abs(dayOf(b.date) - dayOf(s.date));
+        });
+        const best = candidates[0];
+        free.splice(free.indexOf(best), 1);
+        out.push({ statement: [s.id], ledger: [best.id] });
+    }
+    return out;
+}
+
+let nextUid = 0;
+/**
+ * Conciliación bancaria de CaribeNG: el extracto del banco frente a los
+ * movimientos en libros, para emparejarlos y ver qué queda pendiente.
+ *
+ * - «Conciliar automáticamente» empareja los de igual valor y fecha cercana
+ *   (`toleranceDays`), dando prioridad a la misma referencia.
+ * - Se marcan movimientos de cada lado y «Emparejar» los une cuando sus sumas
+ *   coinciden (uno con uno, uno con varios o varios con uno).
+ * - Resumen con los pendientes de cada lado y la diferencia; `createEntry` sirve
+ *   para registrar en libros un movimiento del extracto (comisiones, intereses).
+ *
+ * @example
+ * ```html
+ * <cb-reconciliation [statement]="extracto" [ledger]="libros" [(matches)]="conciliados" />
+ * ```
+ */
+class CbReconciliation {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.amount = injectCbAmount();
+        this.uid = `cb-reconciliation-${++nextUid}`;
+        this.sides = ['statement', 'ledger'];
+        /** Movimientos del extracto bancario. */
+        this.statement = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statement" }] : /* istanbul ignore next */ []));
+        /** Movimientos en libros (cuenta de bancos). */
+        this.ledger = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ledger" }] : /* istanbul ignore next */ []));
+        /** Emparejamientos (bidireccional). */
+        this.matches = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
+        /** Días de diferencia admitidos al conciliar automáticamente. */
+        this.toleranceDays = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toleranceDays" }] : /* istanbul ignore next */ []));
+        this.statementLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statementLabel" }] : /* istanbul ignore next */ []));
+        this.ledgerLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ledgerLabel" }] : /* istanbul ignore next */ []));
+        /** Botón «Crear asiento» en los movimientos del extracto sin pareja. */
+        this.allowCreate = input(false, { ...(ngDevMode ? { debugName: "allowCreate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        /** Registrar en libros un movimiento del extracto. */
+        this.createEntry = output();
+        this.onlyPending = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "onlyPending" }] : /* istanbul ignore next */ []));
+        this.selection = signal({ statement: new Set(), ledger: new Set() }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.matched = computed(() => matchedIds(this.matches()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matched" }] : /* istanbul ignore next */ []));
+        this.progress = computed(() => {
+            const all = this.statement().length + this.ledger().length;
+            return all ? (this.matched().statement.size + this.matched().ledger.size) / all : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        this.hasSelection = computed(() => this.selection().statement.size + this.selection().ledger.size > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+        this.selectionDiff = computed(() => Math.round((this.selectedSum('statement') - this.selectedSum('ledger')) * 100) / 100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionDiff" }] : /* istanbul ignore next */ []));
+        /** Se puede emparejar: hay de los dos lados, nada ya emparejado y las sumas coinciden. */
+        this.canMatch = computed(() => {
+            const s = this.selectedItems('statement');
+            const l = this.selectedItems('ledger');
+            return s.length > 0 && l.length > 0 && this.selectionDiff() === 0 && !s.some((i) => this.isMatched('statement', i)) && !l.some((i) => this.isMatched('ledger', i));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canMatch" }] : /* istanbul ignore next */ []));
+        this.selectedMatched = computed(() => this.sides.some((side) => this.selectedItems(side).some((i) => this.isMatched(side, i))), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMatched" }] : /* istanbul ignore next */ []));
+    }
+    items(side) {
+        return side === 'statement' ? this.statement() : this.ledger();
+    }
+    visible(side) {
+        const list = [...this.items(side)].sort((a, b) => dayOf(a.date) - dayOf(b.date));
+        return this.onlyPending() ? list.filter((i) => !this.isMatched(side, i)) : list;
+    }
+    pending(side) {
+        return this.items(side).filter((i) => !this.isMatched(side, i));
+    }
+    pendingSum(side) {
+        return sumAmounts(this.pending(side));
+    }
+    total(side) {
+        return sumAmounts(this.items(side));
+    }
+    isMatched(side, item) {
+        return this.matched()[side].has(item.id);
+    }
+    isSelected(side, item) {
+        return this.selection()[side].has(item.id);
+    }
+    selectedItems(side) {
+        return this.items(side).filter((i) => this.selection()[side].has(i.id));
+    }
+    selectedSum(side) {
+        return sumAmounts(this.selectedItems(side));
+    }
+    money(value) {
+        return this.amount(value, this.currency() ? { currency: this.currency() } : {});
+    }
+    pct(value) {
+        return new Intl.NumberFormat(this.t().intlLocale, { style: 'percent', maximumFractionDigits: 0 }).format(value);
+    }
+    shortDate(value) {
+        const d = value instanceof Date ? value : new Date(+value.slice(0, 4), +value.slice(5, 7) - 1, +value.slice(8, 10));
+        return new Intl.DateTimeFormat(this.t().intlLocale, { day: '2-digit', month: 'short' }).format(d).replace(/\./g, '');
+    }
+    toggle(side, item) {
+        this.selection.update((sel) => {
+            const next = new Set(sel[side]);
+            if (next.has(item.id))
+                next.delete(item.id);
+            else
+                next.add(item.id);
+            return { ...sel, [side]: next };
+        });
+    }
+    /** Empareja los movimientos pendientes de igual valor y fecha cercana. */
+    runAuto() {
+        const found = autoMatch(this.statement(), this.ledger(), this.matches(), this.toleranceDays());
+        if (found.length)
+            this.matches.update((m) => [...m, ...found]);
+        this.say(cbFormat(this.t().reconAutoDone, found.length));
+    }
+    /** Une lo seleccionado de los dos lados (si sus sumas coinciden). */
+    matchSelection() {
+        if (!this.canMatch())
+            return;
+        const match = { statement: this.selectedItems('statement').map((i) => i.id), ledger: this.selectedItems('ledger').map((i) => i.id) };
+        this.matches.update((m) => [...m, match]);
+        this.clearSelection();
+        this.say(this.t().reconMatchedDone);
+    }
+    /** Deshace los emparejamientos que tocan lo seleccionado. */
+    unmatchSelection() {
+        const sel = this.selection();
+        const keep = this.matches().filter((m) => !m.statement.some((id) => sel.statement.has(id)) && !m.ledger.some((id) => sel.ledger.has(id)));
+        const removed = this.matches().length - keep.length;
+        this.matches.set(keep);
+        this.clearSelection();
+        this.say(cbFormat(this.t().reconUnmatchedDone, removed));
+    }
+    clearSelection() {
+        this.selection.set({ statement: new Set(), ledger: new Set() });
+    }
+    say(message) {
+        this.announcement.set('');
+        queueMicrotask(() => this.announcement.set(message));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbReconciliation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbReconciliation, isStandalone: true, selector: "cb-reconciliation", inputs: { statement: { classPropertyName: "statement", publicName: "statement", isSignal: true, isRequired: false, transformFunction: null }, ledger: { classPropertyName: "ledger", publicName: "ledger", isSignal: true, isRequired: false, transformFunction: null }, matches: { classPropertyName: "matches", publicName: "matches", isSignal: true, isRequired: false, transformFunction: null }, toleranceDays: { classPropertyName: "toleranceDays", publicName: "toleranceDays", isSignal: true, isRequired: false, transformFunction: null }, statementLabel: { classPropertyName: "statementLabel", publicName: "statementLabel", isSignal: true, isRequired: false, transformFunction: null }, ledgerLabel: { classPropertyName: "ledgerLabel", publicName: "ledgerLabel", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { matches: "matchesChange", createEntry: "createEntry" }, host: { classAttribute: "cb-reconciliation" }, ngImport: i0, template: `
+    <div class="cb-rc__summary">
+      <div class="cb-rc__stat">
+        <span class="cb-rc__stat-label">{{ t().reconStatementPending }}</span>
+        <span class="cb-rc__stat-value">{{ money(pendingSum('statement')) }}</span>
+        <span class="cb-rc__stat-sub">{{ fmt(t().reconItems, pending('statement').length) }}</span>
+      </div>
+      <div class="cb-rc__stat">
+        <span class="cb-rc__stat-label">{{ t().reconLedgerPending }}</span>
+        <span class="cb-rc__stat-value">{{ money(pendingSum('ledger')) }}</span>
+        <span class="cb-rc__stat-sub">{{ fmt(t().reconItems, pending('ledger').length) }}</span>
+      </div>
+      <div class="cb-rc__stat">
+        <span class="cb-rc__stat-label">{{ t().reconProgress }}</span>
+        <span class="cb-rc__stat-value">{{ pct(progress()) }}</span>
+        <span class="cb-rc__progress" aria-hidden="true"><span [style.width.%]="progress() * 100"></span></span>
+      </div>
+    </div>
+
+    <div class="cb-rc__toolbar" role="toolbar" [attr.aria-label]="t().reconToolbar">
+      @if (!readonly()) {
+        <cb-button size="sm" variant="outlined" (click)="runAuto()">
+          <cb-icon name="sparkles" [size]="15" aria-hidden="true" />
+          {{ t().reconAuto }}
+        </cb-button>
+        <cb-button size="sm" [disabled]="!canMatch()" (click)="matchSelection()">
+          <cb-icon name="merge" [size]="15" aria-hidden="true" />
+          {{ t().reconMatch }}
+        </cb-button>
+        <cb-button size="sm" variant="text" severity="secondary" [disabled]="!selectedMatched()" (click)="unmatchSelection()">{{ t().reconUnmatch }}</cb-button>
+      }
+      <span class="cb-rc__spacer"></span>
+      @if (hasSelection()) {
+        <span class="cb-rc__selection" [class.cb-rc__selection--ok]="selectionDiff() === 0" aria-live="polite">
+          {{ fmt(t().reconSelection, money(selectedSum('statement')), money(selectedSum('ledger'))) }}
+          @if (selectionDiff() !== 0) {
+            · {{ fmt(t().reconDiff, money(selectionDiff())) }}
+          }
+        </span>
+      }
+      <label class="cb-rc__filter">
+        <input type="checkbox" [checked]="onlyPending()" (change)="onlyPending.set($any($event.target).checked)" />
+        {{ t().reconOnlyPending }}
+      </label>
+    </div>
+
+    <div class="cb-rc__sides">
+      @for (side of sides; track side) {
+        <section class="cb-rc__side" [attr.aria-labelledby]="uid + '-' + side">
+          <header class="cb-rc__side-head">
+            <h3 [id]="uid + '-' + side">{{ side === 'statement' ? statementLabel() || t().reconStatement : ledgerLabel() || t().reconLedger }}</h3>
+            <span>{{ money(total(side)) }}</span>
+          </header>
+          <ul class="cb-rc__list">
+            @for (item of visible(side); track item.id) {
+              <li class="cb-rc__item" [class.cb-rc__item--matched]="isMatched(side, item)" [class.cb-rc__item--selected]="isSelected(side, item)">
+                <label class="cb-rc__label">
+                  <input type="checkbox" [checked]="isSelected(side, item)" [disabled]="readonly()" (change)="toggle(side, item)" />
+                  <span class="cb-rc__date">{{ shortDate(item.date) }}</span>
+                  <span class="cb-rc__desc">
+                    {{ item.description }}
+                    @if (item.reference) {
+                      <span class="cb-rc__ref">{{ item.reference }}</span>
+                    }
+                  </span>
+                  <span class="cb-rc__amount" [class.cb-rc__amount--out]="item.amount < 0">{{ money(item.amount) }}</span>
+                  @if (isMatched(side, item)) {
+                    <cb-icon class="cb-rc__linked" name="check" [size]="14" aria-hidden="true" />
+                    <span class="cb-rc__sr">{{ t().reconMatched }}</span>
+                  }
+                </label>
+                @if (side === 'statement' && allowCreate() && !isMatched(side, item) && !readonly()) {
+                  <button type="button" class="cb-rc__create" [attr.aria-label]="fmt(t().reconCreateFor, item.description)" [title]="t().reconCreate" (click)="createEntry.emit(item)">
+                    <cb-icon name="plus" [size]="14" aria-hidden="true" />
+                  </button>
+                }
+              </li>
+            } @empty {
+              <li class="cb-rc__empty">{{ onlyPending() ? t().reconNothingPending : t().noData }}</li>
+            }
+          </ul>
+        </section>
+      }
+    </div>
+    <div class="cb-rc__sr" role="status">{{ announcement() }}</div>
+  `, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-4, 1rem);width:100%;min-width:0;container-type:inline-size;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-rc__summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem}.cb-rc__stat{display:grid;gap:.15rem;padding:.75rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-rc__stat-label,.cb-rc__stat-sub{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-rc__stat-value{font-size:var(--cb-text-lg, 1.125rem);font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-rc__progress{display:block;height:.4rem;overflow:hidden;border-radius:999px;background:var(--cb-color-border)}.cb-rc__progress span{display:block;height:100%;background:var(--cb-color-success-500, #10b981)}.cb-rc__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-rc__spacer{flex:1}.cb-rc__selection{padding:.25rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-warning-500, #f59e0b) 15%,transparent);font-variant-numeric:tabular-nums}.cb-rc__selection--ok{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 15%,transparent)}.cb-rc__filter{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}.cb-rc__sides{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@container (max-width: 44rem){.cb-rc__sides{grid-template-columns:1fr}}.cb-rc__side{min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);overflow:hidden}.cb-rc__side-head{display:flex;align-items:baseline;justify-content:space-between;padding:.6rem .85rem;border-bottom:1px solid var(--cb-color-border);background:var(--cb-color-surface-subtle)}.cb-rc__side-head h3{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-rc__side-head span{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-rc__list{max-height:26rem;margin:0;padding:0;overflow-y:auto;list-style:none}.cb-rc__item{display:flex;align-items:center;gap:.5rem;padding-right:.5rem;border-bottom:1px solid var(--cb-color-border)}.cb-rc__item--matched{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 6%,transparent);color:var(--cb-color-text-muted)}.cb-rc__item--selected{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-rc__label{display:grid;flex:1;grid-template-columns:auto 3.5rem 1fr auto auto;align-items:center;gap:.6rem;min-width:0;padding:.5rem .85rem;cursor:pointer}.cb-rc__label>input{inline-size:1.125rem;block-size:1.125rem;margin:0}.cb-rc__date{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-rc__desc{min-width:0;overflow-wrap:break-word;line-height:1.3}.cb-rc__ref{margin-left:.35rem;padding:0 .35rem;border-radius:4px;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-rc__amount{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-medium, 500);text-align:end;white-space:nowrap}.cb-rc__amount--out{color:var(--cb-color-danger-text, #dc2626)}.cb-rc__item--matched .cb-rc__amount--out{color:inherit}.cb-rc__linked{color:var(--cb-color-success-text, #059669)}.cb-rc__create{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);cursor:pointer}.cb-rc__create:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-rc__empty{padding:1.5rem 1rem;color:var(--cb-color-text-muted);text-align:center}@container (max-width: 30rem){.cb-rc__label{grid-template-columns:auto auto 1fr auto;grid-template-areas:\"check date amount linked\" \". desc desc desc\";row-gap:.15rem}.cb-rc__label>input{grid-area:check}.cb-rc__date{grid-area:date}.cb-rc__desc{grid-area:desc}.cb-rc__amount{grid-area:amount}.cb-rc__linked{grid-area:linked}}.cb-rc__sr{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: CbReconciliation, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-reconciliation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton, CbIcon], host: { class: 'cb-reconciliation' }, template: `
+    <div class="cb-rc__summary">
+      <div class="cb-rc__stat">
+        <span class="cb-rc__stat-label">{{ t().reconStatementPending }}</span>
+        <span class="cb-rc__stat-value">{{ money(pendingSum('statement')) }}</span>
+        <span class="cb-rc__stat-sub">{{ fmt(t().reconItems, pending('statement').length) }}</span>
+      </div>
+      <div class="cb-rc__stat">
+        <span class="cb-rc__stat-label">{{ t().reconLedgerPending }}</span>
+        <span class="cb-rc__stat-value">{{ money(pendingSum('ledger')) }}</span>
+        <span class="cb-rc__stat-sub">{{ fmt(t().reconItems, pending('ledger').length) }}</span>
+      </div>
+      <div class="cb-rc__stat">
+        <span class="cb-rc__stat-label">{{ t().reconProgress }}</span>
+        <span class="cb-rc__stat-value">{{ pct(progress()) }}</span>
+        <span class="cb-rc__progress" aria-hidden="true"><span [style.width.%]="progress() * 100"></span></span>
+      </div>
+    </div>
+
+    <div class="cb-rc__toolbar" role="toolbar" [attr.aria-label]="t().reconToolbar">
+      @if (!readonly()) {
+        <cb-button size="sm" variant="outlined" (click)="runAuto()">
+          <cb-icon name="sparkles" [size]="15" aria-hidden="true" />
+          {{ t().reconAuto }}
+        </cb-button>
+        <cb-button size="sm" [disabled]="!canMatch()" (click)="matchSelection()">
+          <cb-icon name="merge" [size]="15" aria-hidden="true" />
+          {{ t().reconMatch }}
+        </cb-button>
+        <cb-button size="sm" variant="text" severity="secondary" [disabled]="!selectedMatched()" (click)="unmatchSelection()">{{ t().reconUnmatch }}</cb-button>
+      }
+      <span class="cb-rc__spacer"></span>
+      @if (hasSelection()) {
+        <span class="cb-rc__selection" [class.cb-rc__selection--ok]="selectionDiff() === 0" aria-live="polite">
+          {{ fmt(t().reconSelection, money(selectedSum('statement')), money(selectedSum('ledger'))) }}
+          @if (selectionDiff() !== 0) {
+            · {{ fmt(t().reconDiff, money(selectionDiff())) }}
+          }
+        </span>
+      }
+      <label class="cb-rc__filter">
+        <input type="checkbox" [checked]="onlyPending()" (change)="onlyPending.set($any($event.target).checked)" />
+        {{ t().reconOnlyPending }}
+      </label>
+    </div>
+
+    <div class="cb-rc__sides">
+      @for (side of sides; track side) {
+        <section class="cb-rc__side" [attr.aria-labelledby]="uid + '-' + side">
+          <header class="cb-rc__side-head">
+            <h3 [id]="uid + '-' + side">{{ side === 'statement' ? statementLabel() || t().reconStatement : ledgerLabel() || t().reconLedger }}</h3>
+            <span>{{ money(total(side)) }}</span>
+          </header>
+          <ul class="cb-rc__list">
+            @for (item of visible(side); track item.id) {
+              <li class="cb-rc__item" [class.cb-rc__item--matched]="isMatched(side, item)" [class.cb-rc__item--selected]="isSelected(side, item)">
+                <label class="cb-rc__label">
+                  <input type="checkbox" [checked]="isSelected(side, item)" [disabled]="readonly()" (change)="toggle(side, item)" />
+                  <span class="cb-rc__date">{{ shortDate(item.date) }}</span>
+                  <span class="cb-rc__desc">
+                    {{ item.description }}
+                    @if (item.reference) {
+                      <span class="cb-rc__ref">{{ item.reference }}</span>
+                    }
+                  </span>
+                  <span class="cb-rc__amount" [class.cb-rc__amount--out]="item.amount < 0">{{ money(item.amount) }}</span>
+                  @if (isMatched(side, item)) {
+                    <cb-icon class="cb-rc__linked" name="check" [size]="14" aria-hidden="true" />
+                    <span class="cb-rc__sr">{{ t().reconMatched }}</span>
+                  }
+                </label>
+                @if (side === 'statement' && allowCreate() && !isMatched(side, item) && !readonly()) {
+                  <button type="button" class="cb-rc__create" [attr.aria-label]="fmt(t().reconCreateFor, item.description)" [title]="t().reconCreate" (click)="createEntry.emit(item)">
+                    <cb-icon name="plus" [size]="14" aria-hidden="true" />
+                  </button>
+                }
+              </li>
+            } @empty {
+              <li class="cb-rc__empty">{{ onlyPending() ? t().reconNothingPending : t().noData }}</li>
+            }
+          </ul>
+        </section>
+      }
+    </div>
+    <div class="cb-rc__sr" role="status">{{ announcement() }}</div>
+  `, styles: [":host{display:grid;gap:var(--cb-space-4, 1rem);width:100%;min-width:0;container-type:inline-size;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-rc__summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem}.cb-rc__stat{display:grid;gap:.15rem;padding:.75rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-rc__stat-label,.cb-rc__stat-sub{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-rc__stat-value{font-size:var(--cb-text-lg, 1.125rem);font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-rc__progress{display:block;height:.4rem;overflow:hidden;border-radius:999px;background:var(--cb-color-border)}.cb-rc__progress span{display:block;height:100%;background:var(--cb-color-success-500, #10b981)}.cb-rc__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-rc__spacer{flex:1}.cb-rc__selection{padding:.25rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-warning-500, #f59e0b) 15%,transparent);font-variant-numeric:tabular-nums}.cb-rc__selection--ok{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 15%,transparent)}.cb-rc__filter{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}.cb-rc__sides{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@container (max-width: 44rem){.cb-rc__sides{grid-template-columns:1fr}}.cb-rc__side{min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);overflow:hidden}.cb-rc__side-head{display:flex;align-items:baseline;justify-content:space-between;padding:.6rem .85rem;border-bottom:1px solid var(--cb-color-border);background:var(--cb-color-surface-subtle)}.cb-rc__side-head h3{margin:0;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-rc__side-head span{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-rc__list{max-height:26rem;margin:0;padding:0;overflow-y:auto;list-style:none}.cb-rc__item{display:flex;align-items:center;gap:.5rem;padding-right:.5rem;border-bottom:1px solid var(--cb-color-border)}.cb-rc__item--matched{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 6%,transparent);color:var(--cb-color-text-muted)}.cb-rc__item--selected{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-rc__label{display:grid;flex:1;grid-template-columns:auto 3.5rem 1fr auto auto;align-items:center;gap:.6rem;min-width:0;padding:.5rem .85rem;cursor:pointer}.cb-rc__label>input{inline-size:1.125rem;block-size:1.125rem;margin:0}.cb-rc__date{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-rc__desc{min-width:0;overflow-wrap:break-word;line-height:1.3}.cb-rc__ref{margin-left:.35rem;padding:0 .35rem;border-radius:4px;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-rc__amount{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-medium, 500);text-align:end;white-space:nowrap}.cb-rc__amount--out{color:var(--cb-color-danger-text, #dc2626)}.cb-rc__item--matched .cb-rc__amount--out{color:inherit}.cb-rc__linked{color:var(--cb-color-success-text, #059669)}.cb-rc__create{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);cursor:pointer}.cb-rc__create:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-rc__empty{padding:1.5rem 1rem;color:var(--cb-color-text-muted);text-align:center}@container (max-width: 30rem){.cb-rc__label{grid-template-columns:auto auto 1fr auto;grid-template-areas:\"check date amount linked\" \". desc desc desc\";row-gap:.15rem}.cb-rc__label>input{grid-area:check}.cb-rc__date{grid-area:date}.cb-rc__desc{grid-area:desc}.cb-rc__amount{grid-area:amount}.cb-rc__linked{grid-area:linked}}.cb-rc__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], propDecorators: { statement: [{ type: i0.Input, args: [{ isSignal: true, alias: "statement", required: false }] }], ledger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ledger", required: false }] }], matches: [{ type: i0.Input, args: [{ isSignal: true, alias: "matches", required: false }] }, { type: i0.Output, args: ["matchesChange"] }], toleranceDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "toleranceDays", required: false }] }], statementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statementLabel", required: false }] }], ledgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ledgerLabel", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], createEntry: [{ type: i0.Output, args: ["createEntry"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/reconciliation
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbReconciliation, autoMatch, matchedIds, sumAmounts };

package/fesm2022/caribeng-ui-ripple.mjs

@@ -15,6 +15,8 @@ class CbRippleDirective {
     onPointerDown(event) {
         if (this.cbRippleDisabled())
             return;
+        if (this.hostRef.nativeElement.ownerDocument.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+            return;
         const host = this.hostRef.nativeElement;
         const rect = host.getBoundingClientRect();
         const size = Math.max(rect.width, rect.height, 48);