@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-aging.mjs

@@ -0,0 +1,488 @@
+import * as i0 from '@angular/core';
+import { inject, input, model, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat, injectCbAmount, CB_CONFIG } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { currencySymbol, cbDownloadXlsx } from '@caribeng/ui/xlsx';
+
+/** Tramos habituales: por vencer, 1–30, 31–60, 61–90 y más de 90 días. */
+function cbDefaultBuckets(labels) {
+    const range = (a, b) => labels.range.replace('{0}', String(a)).replace('{1}', String(b));
+    return [
+        { key: 'current', label: labels.current, from: null, to: 0 },
+        { key: 'd30', label: range(1, 30), from: 1, to: 30 },
+        { key: 'd60', label: range(31, 60), from: 31, to: 60 },
+        { key: 'd90', label: range(61, 90), from: 61, to: 90 },
+        { key: 'over', label: labels.over.replace('{0}', '90'), from: 91, to: null },
+    ];
+}
+function toDay(value) {
+    if (value instanceof Date)
+        return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+    const [y, m, d] = value.slice(0, 10).split('-').map(Number);
+    return new Date(y, m - 1, d);
+}
+/** Días vencidos a la fecha de corte (negativo si aún no vence). */
+function daysOverdue(due, asOf) {
+    return Math.round((toDay(asOf).getTime() - toDay(due).getTime()) / 86400000);
+}
+/** Tramo al que pertenece un número de días vencidos. */
+function bucketOf(days, buckets) {
+    return buckets.find((b) => (b.from === null || days >= b.from) && (b.to === null || b.to === undefined || days <= b.to));
+}
+const round = (n) => Math.round(n * 100) / 100;
+/** Agrupa los documentos por tercero y reparte sus saldos en los tramos. */
+function ageDocuments(documents, buckets, asOf) {
+    const byParty = new Map();
+    for (const doc of documents) {
+        if (!byParty.has(doc.party))
+            byParty.set(doc.party, []);
+        byParty.get(doc.party).push(doc);
+    }
+    return [...byParty].map(([party, docs]) => {
+        const sums = Object.fromEntries(buckets.map((b) => [b.key, 0]));
+        let maxDays = -Infinity;
+        for (const doc of docs) {
+            const days = daysOverdue(doc.due, asOf);
+            maxDays = Math.max(maxDays, days);
+            const bucket = bucketOf(days, buckets);
+            if (bucket)
+                sums[bucket.key] = round(sums[bucket.key] + doc.balance);
+        }
+        return { party, documents: docs, buckets: sums, total: round(docs.reduce((t, d) => t + d.balance, 0)), maxDays };
+    });
+}
+/** Totales por tramo y general. */
+function agingTotals(rows, buckets) {
+    const out = Object.fromEntries(buckets.map((b) => [b.key, 0]));
+    for (const row of rows)
+        for (const b of buckets)
+            out[b.key] = round(out[b.key] + (row.buckets[b.key] ?? 0));
+    return { buckets: out, total: round(rows.reduce((t, r) => t + r.total, 0)) };
+}
+
+/** Colores de los tramos, del más reciente al más vencido. */
+const TONES = ['var(--cb-color-success-500, #10b981)', 'var(--cb-color-warning-400, #fbbf24)', 'var(--cb-color-warning-600, #f97316)', 'var(--cb-color-danger-500, #ef4444)', 'var(--cb-color-danger-700, #b91c1c)'];
+let nextUid = 0;
+/**
+ * Antigüedad de cartera de CaribeNG: cuentas por cobrar o por pagar repartidas
+ * en tramos de vencimiento (por vencer, 1–30, 31–60, 61–90, más de 90 días).
+ *
+ * - Barra de composición por tramo con importes y porcentajes.
+ * - Una fila por tercero, que se abre para ver sus documentos con los días vencidos.
+ * - Ordenar por tercero, por total, por antigüedad o por cualquier tramo; totales y Excel.
+ *
+ * @example
+ * ```html
+ * <cb-aging title="Cartera por edades" [documents]="facturas" [asOf]="corte" />
+ * ```
+ */
+class CbAging {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.amount = injectCbAmount();
+        this.config = inject(CB_CONFIG);
+        this.uid = `cb-aging-${++nextUid}`;
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Documentos pendientes (tercero, número, fecha, vencimiento y saldo). */
+        this.documents = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "documents" }] : /* istanbul ignore next */ []));
+        /** Fecha de corte (hoy por defecto). */
+        this.asOf = input(new Date(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asOf" }] : /* istanbul ignore next */ []));
+        /** Tramos (por defecto: por vencer, 1–30, 31–60, 61–90 y más de 90 días). */
+        this.buckets = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
+        /** Encabezado de la columna de terceros («Cliente», «Proveedor»…). */
+        this.partyHeader = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "partyHeader" }] : /* istanbul ignore next */ []));
+        /** Orden de las filas (bidireccional): `party`, `total`, `maxDays` o la clave de un tramo. */
+        this.sort = model({ key: 'total', order: -1 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        /** Los números de documento son botones (`documentOpen`). */
+        this.documentLinks = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "documentLinks" }] : /* istanbul ignore next */ []));
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        this.documentOpen = output();
+        this.open = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.bucketList = computed(() => {
+            const t = this.t();
+            return this.buckets() ?? cbDefaultBuckets({ current: t.agingCurrent, range: t.agingRange, over: t.agingOver });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bucketList" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => {
+            const rows = ageDocuments(this.documents(), this.bucketList(), this.asOf());
+            const { key, order } = this.sort();
+            const value = (r) => (key === 'party' ? r.party : key === 'total' ? r.total : key === 'maxDays' ? r.maxDays : (r.buckets[key] ?? 0));
+            return rows.sort((a, b) => {
+                const va = value(a);
+                const vb = value(b);
+                return (typeof va === 'string' ? va.localeCompare(String(vb), this.t().intlLocale) : va - vb) * order;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.totals = computed(() => agingTotals(this.rows(), this.bucketList()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
+    }
+    money(value) {
+        return this.amount(value ?? 0, this.currency() ? { currency: this.currency() } : {});
+    }
+    share(key) {
+        const total = this.totals().total;
+        return total ? Math.max(0, (this.totals().buckets[key] ?? 0) / total) : 0;
+    }
+    pct(share) {
+        return new Intl.NumberFormat(this.t().intlLocale, { style: 'percent', maximumFractionDigits: 1 }).format(share);
+    }
+    tone(i) {
+        return TONES[Math.min(i, TONES.length - 1)];
+    }
+    days(doc) {
+        return daysOverdue(doc.due, this.asOf());
+    }
+    sortedDocs(row) {
+        return [...row.documents].sort((a, b) => toDay(a.due).getTime() - toDay(b.due).getTime());
+    }
+    shortDate(value) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { day: '2-digit', month: 'short', year: 'numeric' }).format(toDay(value)).replace(/\./g, '');
+    }
+    longDate(value) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'long' }).format(value);
+    }
+    isOpen(party) {
+        return this.open().has(party);
+    }
+    toggle(party) {
+        const next = new Set(this.open());
+        if (next.has(party))
+            next.delete(party);
+        else
+            next.add(party);
+        this.open.set(next);
+    }
+    sortBy(key) {
+        const s = this.sort();
+        this.sort.set(s.key === key ? { key, order: s.order === 1 ? -1 : 1 } : { key, order: key === 'party' ? 1 : -1 });
+    }
+    ariaSort(key) {
+        const s = this.sort();
+        return s.key !== key ? 'none' : s.order === 1 ? 'ascending' : 'descending';
+    }
+    /** Libro de Excel con el resumen por tercero y el detalle de documentos. */
+    toExcelSheets() {
+        const t = this.t();
+        const currency = this.currency() ?? this.config.currency;
+        const symbol = currency ? currencySymbol(currency, this.config.numberLocale ?? t.intlLocale) : undefined;
+        const money = { type: currency ? 'currency' : 'number', symbol };
+        const buckets = this.bucketList();
+        const title = [this.title() || t.agingTitle, cbFormat(t.agingAsOf, this.longDate(this.asOf()))];
+        return [
+            {
+                name: t.agingSummary,
+                title,
+                columns: [{ header: this.partyHeader() || t.agingParty }, ...buckets.map((b) => ({ header: b.label, ...money })), { header: t.tableTotal, ...money }, { header: t.agingMaxDays, type: 'integer' }],
+                rows: this.rows().map((r) => [r.party, ...buckets.map((b) => r.buckets[b.key] || null), r.total, Math.max(0, r.maxDays)]),
+                totals: [t.tableTotal, ...buckets.map((b) => this.totals().buckets[b.key]), this.totals().total, null],
+            },
+            {
+                name: t.agingDetail,
+                title,
+                columns: [{ header: this.partyHeader() || t.agingParty }, { header: t.agingNumber }, { header: t.agingDate, type: 'date' }, { header: t.agingDue, type: 'date' }, { header: t.agingOverdue, type: 'integer' }, { header: t.agingBalance, ...money }],
+                rows: this.rows().flatMap((r) => this.sortedDocs(r).map((d) => [r.party, d.number ?? String(d.id), d.date ?? null, d.due, this.days(d), d.balance])),
+                totals: [t.tableTotal, null, null, null, null, this.totals().total],
+            },
+        ];
+    }
+    /** Descarga la cartera en Excel (resumen y detalle). */
+    exportExcel(filename) {
+        cbDownloadXlsx(filename ?? (this.title() || this.t().agingTitle), this.toExcelSheets());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAging, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAging, isStandalone: true, selector: "cb-aging", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, documents: { classPropertyName: "documents", publicName: "documents", isSignal: true, isRequired: false, transformFunction: null }, asOf: { classPropertyName: "asOf", publicName: "asOf", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null }, partyHeader: { classPropertyName: "partyHeader", publicName: "partyHeader", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, documentLinks: { classPropertyName: "documentLinks", publicName: "documentLinks", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", documentOpen: "documentOpen" }, host: { classAttribute: "cb-aging" }, ngImport: i0, template: `
+    <div class="cb-ag__head">
+      <div>
+        @if (title()) {
+          <h2 class="cb-ag__title">{{ title() }}</h2>
+        }
+        <p class="cb-ag__asof">{{ fmt(t().agingAsOf, longDate(asOf())) }}</p>
+      </div>
+      <cb-button size="sm" variant="outlined" (click)="exportExcel()">
+        <cb-icon name="download" [size]="15" aria-hidden="true" />
+        {{ t().reportExcel }}
+      </cb-button>
+    </div>
+
+    <div class="cb-ag__summary">
+      <div class="cb-ag__bar" aria-hidden="true">
+        @for (b of bucketList(); track b.key; let i = $index) {
+          @if (share(b.key) > 0) {
+            <span class="cb-ag__seg" [style.flex-grow]="share(b.key)" [style.background]="tone(i)" [title]="b.label + ': ' + money(totals().buckets[b.key])"></span>
+          }
+        }
+      </div>
+      <ul class="cb-ag__legend">
+        @for (b of bucketList(); track b.key; let i = $index) {
+          <li>
+            <span class="cb-ag__dot" [style.background]="tone(i)" aria-hidden="true"></span>
+            <span class="cb-ag__legend-label">{{ b.label }}</span>
+            <span class="cb-ag__legend-value">{{ money(totals().buckets[b.key]) }}</span>
+            <span class="cb-ag__legend-pct">{{ pct(share(b.key)) }}</span>
+          </li>
+        }
+        <li class="cb-ag__legend-total">
+          <span class="cb-ag__legend-label">{{ t().tableTotal }}</span>
+          <span class="cb-ag__legend-value">{{ money(totals().total) }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="cb-ag__wrap">
+      <table class="cb-ag__table" [attr.aria-label]="title() || t().agingTitle">
+        <thead>
+          <tr>
+            <th scope="col" [attr.aria-sort]="ariaSort('party')">
+              <button type="button" class="cb-ag__sort" (click)="sortBy('party')">{{ partyHeader() || t().agingParty }}</button>
+            </th>
+            @for (b of bucketList(); track b.key) {
+              <th scope="col" class="cb-ag__num" [attr.aria-sort]="ariaSort(b.key)">
+                <button type="button" class="cb-ag__sort" (click)="sortBy(b.key)">{{ b.label }}</button>
+              </th>
+            }
+            <th scope="col" class="cb-ag__num" [attr.aria-sort]="ariaSort('total')">
+              <button type="button" class="cb-ag__sort" (click)="sortBy('total')">{{ t().tableTotal }}</button>
+            </th>
+            <th scope="col" class="cb-ag__num" [attr.aria-sort]="ariaSort('maxDays')">
+              <button type="button" class="cb-ag__sort" (click)="sortBy('maxDays')">{{ t().agingMaxDays }}</button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows(); track row.party; let ri = $index) {
+            <tr class="cb-ag__row">
+              <th scope="row">
+                <button
+                  type="button"
+                  class="cb-ag__toggle"
+                  [attr.aria-expanded]="isOpen(row.party)"
+                  [attr.aria-controls]="uid + '-docs-' + ri"
+                  (click)="toggle(row.party)"
+                >
+                  <cb-icon name="chevron-right" [size]="14" [class.cb-is-open]="isOpen(row.party)" aria-hidden="true" />
+                  <span class="cb-ag__party">{{ row.party }} </span>
+                  <span class="cb-ag__count">{{ fmt(t().agingDocs, row.documents.length) }}</span>
+                </button>
+              </th>
+              @for (b of bucketList(); track b.key; let i = $index) {
+                <td class="cb-ag__num" [class.cb-ag__late]="i > 0 && row.buckets[b.key] > 0">{{ row.buckets[b.key] ? money(row.buckets[b.key]) : '' }}</td>
+              }
+              <td class="cb-ag__num cb-ag__strong">{{ money(row.total) }}</td>
+              <td class="cb-ag__num" [class.cb-ag__late]="row.maxDays > 0">{{ row.maxDays > 0 ? fmt(t().agingDays, row.maxDays) : t().agingCurrent }}</td>
+            </tr>
+            @if (isOpen(row.party)) {
+              <tr class="cb-ag__docs" [id]="uid + '-docs-' + ri">
+                <td [attr.colspan]="bucketList().length + 3">
+                  <table class="cb-ag__detail" [attr.aria-label]="fmt(t().agingDocsOf, row.party)">
+                    <thead>
+                      <tr>
+                        <th scope="col">{{ t().agingNumber }}</th>
+                        <th scope="col">{{ t().agingDate }}</th>
+                        <th scope="col">{{ t().agingDue }}</th>
+                        <th scope="col" class="cb-ag__num">{{ t().agingOverdue }}</th>
+                        <th scope="col" class="cb-ag__num">{{ t().agingBalance }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (doc of sortedDocs(row); track doc.id) {
+                        <tr>
+                          <td>
+                            @if (documentLinks()) {
+                              <button type="button" class="cb-ag__doc" (click)="documentOpen.emit(doc)">{{ doc.number || doc.id }}</button>
+                            } @else {
+                              {{ doc.number || doc.id }}
+                            }
+                          </td>
+                          <td>{{ doc.date ? shortDate(doc.date) : '' }}</td>
+                          <td>{{ shortDate(doc.due) }}</td>
+                          <td class="cb-ag__num" [class.cb-ag__late]="days(doc) > 0">{{ days(doc) > 0 ? fmt(t().agingDays, days(doc)) : fmt(t().agingDueIn, -days(doc)) }}</td>
+                          <td class="cb-ag__num">{{ money(doc.balance) }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            }
+          } @empty {
+            <tr>
+              <td class="cb-ag__empty" [attr.colspan]="bucketList().length + 3">{{ t().noData }}</td>
+            </tr>
+          }
+        </tbody>
+        @if (rows().length) {
+          <tfoot>
+            <tr>
+              <th scope="row">{{ t().tableTotal }}</th>
+              @for (b of bucketList(); track b.key) {
+                <td class="cb-ag__num">{{ money(totals().buckets[b.key]) }}</td>
+              }
+              <td class="cb-ag__num">{{ money(totals().total) }}</td>
+              <td></td>
+            </tr>
+          </tfoot>
+        }
+      </table>
+    </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-ag__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem}.cb-ag__title{margin:0;font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__asof{margin:.15rem 0 0;color:var(--cb-color-text-muted)}.cb-ag__summary{display:grid;gap:.6rem}.cb-ag__bar{display:flex;gap:2px;height:.85rem;overflow:hidden;border-radius:999px;background:var(--cb-color-surface-subtle)}.cb-ag__seg{flex-basis:0;min-width:4px}.cb-ag__legend{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;padding:0;list-style:none}.cb-ag__legend li{display:inline-flex;align-items:baseline;gap:.35rem}.cb-ag__dot{display:inline-block;width:.6rem;height:.6rem;border-radius:999px;transform:translateY(1px)}.cb-ag__legend-label{color:var(--cb-color-text-muted)}.cb-ag__legend-value{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__legend-pct{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-ag__legend-total{padding-left:1rem;border-left:1px solid var(--cb-color-border)}.cb-ag__wrap{overflow-x:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-ag__table{width:100%;border-collapse:collapse}.cb-ag__table th,.cb-ag__table td{padding:.55rem .75rem;border-bottom:1px solid var(--cb-color-border);text-align:start;white-space:nowrap}.cb-ag__table>thead th{background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em}.cb-ag__table .cb-ag__num{text-align:end;font-variant-numeric:tabular-nums}.cb-ag__sort{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}th[aria-sort=ascending] .cb-ag__sort:after{content:\" \\2191\"}th[aria-sort=descending] .cb-ag__sort:after{content:\" \\2193\"}.cb-ag__row>th{font-weight:var(--cb-font-weight-medium, 500)}.cb-ag__toggle{display:inline-flex;align-items:center;gap:.35rem;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}.cb-ag__toggle cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-ag__toggle cb-icon.cb-is-open{transform:rotate(90deg)}.cb-ag__count{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:400}.cb-ag__late{color:var(--cb-color-danger-text, #dc2626)}.cb-ag__strong{font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__docs>td{padding:.25rem .75rem .75rem 2rem;background:var(--cb-color-surface-subtle)}.cb-ag__detail{width:100%;border-collapse:collapse}.cb-ag__detail th{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-ag__detail th,.cb-ag__detail td{padding:.35rem .5rem;border-bottom:1px solid var(--cb-color-border)}.cb-ag__doc{padding:0;border:0;background:none;color:var(--cb-color-primary-text, var(--cb-color-primary-700));font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.cb-ag__table tfoot th,.cb-ag__table tfoot td{border-top:2px solid var(--cb-color-border-strong);border-bottom:0;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__empty{height:5rem;color:var(--cb-color-text-muted);text-align:center!important}:is(.cb-ag__sort,.cb-ag__toggle,.cb-ag__doc):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px;border-radius:2px}@media(forced-colors:active){.cb-ag__seg{forced-color-adjust:none}}@container (max-width: 40rem){.cb-ag__table>thead>tr>th:first-child,.cb-ag__table>tbody>tr>th[scope=row],.cb-ag__table>tfoot>tr>:first-child{position:sticky;left:0;z-index:1;min-width:8rem;max-width:10rem;white-space:normal;box-shadow:inset -1px 0 0 var(--cb-color-border)}.cb-ag__table>tbody>tr>th[scope=row]{background:var(--cb-color-bg)}.cb-ag__toggle{flex-wrap:wrap;min-height:2rem}.cb-ag__party{flex:1 1 0;min-width:0}.cb-ag__count{flex-basis:100%;padding-inline-start:calc(14px + .35rem)}}\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: CbAging, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-aging', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton, CbIcon], host: { class: 'cb-aging' }, template: `
+    <div class="cb-ag__head">
+      <div>
+        @if (title()) {
+          <h2 class="cb-ag__title">{{ title() }}</h2>
+        }
+        <p class="cb-ag__asof">{{ fmt(t().agingAsOf, longDate(asOf())) }}</p>
+      </div>
+      <cb-button size="sm" variant="outlined" (click)="exportExcel()">
+        <cb-icon name="download" [size]="15" aria-hidden="true" />
+        {{ t().reportExcel }}
+      </cb-button>
+    </div>
+
+    <div class="cb-ag__summary">
+      <div class="cb-ag__bar" aria-hidden="true">
+        @for (b of bucketList(); track b.key; let i = $index) {
+          @if (share(b.key) > 0) {
+            <span class="cb-ag__seg" [style.flex-grow]="share(b.key)" [style.background]="tone(i)" [title]="b.label + ': ' + money(totals().buckets[b.key])"></span>
+          }
+        }
+      </div>
+      <ul class="cb-ag__legend">
+        @for (b of bucketList(); track b.key; let i = $index) {
+          <li>
+            <span class="cb-ag__dot" [style.background]="tone(i)" aria-hidden="true"></span>
+            <span class="cb-ag__legend-label">{{ b.label }}</span>
+            <span class="cb-ag__legend-value">{{ money(totals().buckets[b.key]) }}</span>
+            <span class="cb-ag__legend-pct">{{ pct(share(b.key)) }}</span>
+          </li>
+        }
+        <li class="cb-ag__legend-total">
+          <span class="cb-ag__legend-label">{{ t().tableTotal }}</span>
+          <span class="cb-ag__legend-value">{{ money(totals().total) }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="cb-ag__wrap">
+      <table class="cb-ag__table" [attr.aria-label]="title() || t().agingTitle">
+        <thead>
+          <tr>
+            <th scope="col" [attr.aria-sort]="ariaSort('party')">
+              <button type="button" class="cb-ag__sort" (click)="sortBy('party')">{{ partyHeader() || t().agingParty }}</button>
+            </th>
+            @for (b of bucketList(); track b.key) {
+              <th scope="col" class="cb-ag__num" [attr.aria-sort]="ariaSort(b.key)">
+                <button type="button" class="cb-ag__sort" (click)="sortBy(b.key)">{{ b.label }}</button>
+              </th>
+            }
+            <th scope="col" class="cb-ag__num" [attr.aria-sort]="ariaSort('total')">
+              <button type="button" class="cb-ag__sort" (click)="sortBy('total')">{{ t().tableTotal }}</button>
+            </th>
+            <th scope="col" class="cb-ag__num" [attr.aria-sort]="ariaSort('maxDays')">
+              <button type="button" class="cb-ag__sort" (click)="sortBy('maxDays')">{{ t().agingMaxDays }}</button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows(); track row.party; let ri = $index) {
+            <tr class="cb-ag__row">
+              <th scope="row">
+                <button
+                  type="button"
+                  class="cb-ag__toggle"
+                  [attr.aria-expanded]="isOpen(row.party)"
+                  [attr.aria-controls]="uid + '-docs-' + ri"
+                  (click)="toggle(row.party)"
+                >
+                  <cb-icon name="chevron-right" [size]="14" [class.cb-is-open]="isOpen(row.party)" aria-hidden="true" />
+                  <span class="cb-ag__party">{{ row.party }} </span>
+                  <span class="cb-ag__count">{{ fmt(t().agingDocs, row.documents.length) }}</span>
+                </button>
+              </th>
+              @for (b of bucketList(); track b.key; let i = $index) {
+                <td class="cb-ag__num" [class.cb-ag__late]="i > 0 && row.buckets[b.key] > 0">{{ row.buckets[b.key] ? money(row.buckets[b.key]) : '' }}</td>
+              }
+              <td class="cb-ag__num cb-ag__strong">{{ money(row.total) }}</td>
+              <td class="cb-ag__num" [class.cb-ag__late]="row.maxDays > 0">{{ row.maxDays > 0 ? fmt(t().agingDays, row.maxDays) : t().agingCurrent }}</td>
+            </tr>
+            @if (isOpen(row.party)) {
+              <tr class="cb-ag__docs" [id]="uid + '-docs-' + ri">
+                <td [attr.colspan]="bucketList().length + 3">
+                  <table class="cb-ag__detail" [attr.aria-label]="fmt(t().agingDocsOf, row.party)">
+                    <thead>
+                      <tr>
+                        <th scope="col">{{ t().agingNumber }}</th>
+                        <th scope="col">{{ t().agingDate }}</th>
+                        <th scope="col">{{ t().agingDue }}</th>
+                        <th scope="col" class="cb-ag__num">{{ t().agingOverdue }}</th>
+                        <th scope="col" class="cb-ag__num">{{ t().agingBalance }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (doc of sortedDocs(row); track doc.id) {
+                        <tr>
+                          <td>
+                            @if (documentLinks()) {
+                              <button type="button" class="cb-ag__doc" (click)="documentOpen.emit(doc)">{{ doc.number || doc.id }}</button>
+                            } @else {
+                              {{ doc.number || doc.id }}
+                            }
+                          </td>
+                          <td>{{ doc.date ? shortDate(doc.date) : '' }}</td>
+                          <td>{{ shortDate(doc.due) }}</td>
+                          <td class="cb-ag__num" [class.cb-ag__late]="days(doc) > 0">{{ days(doc) > 0 ? fmt(t().agingDays, days(doc)) : fmt(t().agingDueIn, -days(doc)) }}</td>
+                          <td class="cb-ag__num">{{ money(doc.balance) }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            }
+          } @empty {
+            <tr>
+              <td class="cb-ag__empty" [attr.colspan]="bucketList().length + 3">{{ t().noData }}</td>
+            </tr>
+          }
+        </tbody>
+        @if (rows().length) {
+          <tfoot>
+            <tr>
+              <th scope="row">{{ t().tableTotal }}</th>
+              @for (b of bucketList(); track b.key) {
+                <td class="cb-ag__num">{{ money(totals().buckets[b.key]) }}</td>
+              }
+              <td class="cb-ag__num">{{ money(totals().total) }}</td>
+              <td></td>
+            </tr>
+          </tfoot>
+        }
+      </table>
+    </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-ag__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem}.cb-ag__title{margin:0;font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__asof{margin:.15rem 0 0;color:var(--cb-color-text-muted)}.cb-ag__summary{display:grid;gap:.6rem}.cb-ag__bar{display:flex;gap:2px;height:.85rem;overflow:hidden;border-radius:999px;background:var(--cb-color-surface-subtle)}.cb-ag__seg{flex-basis:0;min-width:4px}.cb-ag__legend{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;padding:0;list-style:none}.cb-ag__legend li{display:inline-flex;align-items:baseline;gap:.35rem}.cb-ag__dot{display:inline-block;width:.6rem;height:.6rem;border-radius:999px;transform:translateY(1px)}.cb-ag__legend-label{color:var(--cb-color-text-muted)}.cb-ag__legend-value{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__legend-pct{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-ag__legend-total{padding-left:1rem;border-left:1px solid var(--cb-color-border)}.cb-ag__wrap{overflow-x:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-ag__table{width:100%;border-collapse:collapse}.cb-ag__table th,.cb-ag__table td{padding:.55rem .75rem;border-bottom:1px solid var(--cb-color-border);text-align:start;white-space:nowrap}.cb-ag__table>thead th{background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em}.cb-ag__table .cb-ag__num{text-align:end;font-variant-numeric:tabular-nums}.cb-ag__sort{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}th[aria-sort=ascending] .cb-ag__sort:after{content:\" \\2191\"}th[aria-sort=descending] .cb-ag__sort:after{content:\" \\2193\"}.cb-ag__row>th{font-weight:var(--cb-font-weight-medium, 500)}.cb-ag__toggle{display:inline-flex;align-items:center;gap:.35rem;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}.cb-ag__toggle cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-ag__toggle cb-icon.cb-is-open{transform:rotate(90deg)}.cb-ag__count{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:400}.cb-ag__late{color:var(--cb-color-danger-text, #dc2626)}.cb-ag__strong{font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__docs>td{padding:.25rem .75rem .75rem 2rem;background:var(--cb-color-surface-subtle)}.cb-ag__detail{width:100%;border-collapse:collapse}.cb-ag__detail th{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-ag__detail th,.cb-ag__detail td{padding:.35rem .5rem;border-bottom:1px solid var(--cb-color-border)}.cb-ag__doc{padding:0;border:0;background:none;color:var(--cb-color-primary-text, var(--cb-color-primary-700));font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.cb-ag__table tfoot th,.cb-ag__table tfoot td{border-top:2px solid var(--cb-color-border-strong);border-bottom:0;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}.cb-ag__empty{height:5rem;color:var(--cb-color-text-muted);text-align:center!important}:is(.cb-ag__sort,.cb-ag__toggle,.cb-ag__doc):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px;border-radius:2px}@media(forced-colors:active){.cb-ag__seg{forced-color-adjust:none}}@container (max-width: 40rem){.cb-ag__table>thead>tr>th:first-child,.cb-ag__table>tbody>tr>th[scope=row],.cb-ag__table>tfoot>tr>:first-child{position:sticky;left:0;z-index:1;min-width:8rem;max-width:10rem;white-space:normal;box-shadow:inset -1px 0 0 var(--cb-color-border)}.cb-ag__table>tbody>tr>th[scope=row]{background:var(--cb-color-bg)}.cb-ag__toggle{flex-wrap:wrap;min-height:2rem}.cb-ag__party{flex:1 1 0;min-width:0}.cb-ag__count{flex-basis:100%;padding-inline-start:calc(14px + .35rem)}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], documents: [{ type: i0.Input, args: [{ isSignal: true, alias: "documents", required: false }] }], asOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "asOf", required: false }] }], buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], partyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "partyHeader", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], documentLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentLinks", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], documentOpen: [{ type: i0.Output, args: ["documentOpen"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/aging
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbAging, ageDocuments, agingTotals, bucketOf, cbDefaultBuckets, daysOverdue };

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

@@ -3,7 +3,7 @@ import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Compo
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Alert de Caribe Design: banner de notificación con severidad, título,
+ * Alert: banner de notificación con severidad, título,
  * contenido proyectado y cierre opcional.
  *
  * @example
@@ -42,54 +42,54 @@ class CbAlert {
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAlert, isStandalone: true, selector: "cb-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, ngImport: i0, template: `
-    @if (visible()) {
-      <section class="cb-alert cb-alert--{{ severity() }}" role="alert">
-        <span class="cb-alert__icon" aria-hidden="true">{{ glyph() }}</span>
-        <div class="cb-alert__content">
-          @if (title()) {
-            <strong class="cb-alert__title">{{ title() }}</strong>
-          }
-          <div class="cb-alert__body"><ng-content /></div>
-        </div>
-        @if (closable()) {
-          <button
-            type="button"
-            class="cb-alert__close"
-            [attr.aria-label]="t().close"
-            (click)="close()"
-          >
-            ×
-          </button>
-        }
-      </section>
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAlert, isStandalone: true, selector: "cb-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, ngImport: i0, template: `
+    @if (visible()) {
+      <section class="cb-alert cb-alert--{{ severity() }}" role="alert">
+        <span class="cb-alert__icon" aria-hidden="true">{{ glyph() }}</span>
+        <div class="cb-alert__content">
+          @if (title()) {
+            <strong class="cb-alert__title">{{ title() }}</strong>
+          }
+          <div class="cb-alert__body"><ng-content /></div>
+        </div>
+        @if (closable()) {
+          <button
+            type="button"
+            class="cb-alert__close"
+            [attr.aria-label]="t().close"
+            (click)="close()"
+          >
+            ×
+          </button>
+        }
+      </section>
+    }
   `, isInline: true, styles: [":host{display:block;width:100%}.cb-alert{display:flex;align-items:flex-start;gap:var(--cb-space-3, .75rem);box-sizing:border-box;width:100%;padding:var(--cb-space-4, 1rem);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-left-width:4px;border-radius:var(--cb-radius-md, .5rem)}.cb-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.5rem;height:1.5rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;border-radius:var(--cb-radius-full, 999px)}.cb-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem)}.cb-alert__title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-alert__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}.cb-alert__close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:1.1rem;line-height:1;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-sm, .25rem);cursor:pointer}.cb-alert__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-alert--success{border-left-color:var(--cb-color-success-500, #16a34a);background-color:var(--cb-color-success-50, #f0fdf4)}.cb-alert--success .cb-alert__icon{background-color:var(--cb-color-success-500, #16a34a)}.cb-alert--warning{border-left-color:var(--cb-color-warning-500, #d97706);background-color:var(--cb-color-warning-50, #fffbeb)}.cb-alert--warning .cb-alert__icon{background-color:var(--cb-color-warning-500, #d97706)}.cb-alert--error{border-left-color:var(--cb-color-danger-500, #dc2626);background-color:var(--cb-color-danger-50, #fef2f2)}.cb-alert--error .cb-alert__icon{background-color:var(--cb-color-danger-500, #dc2626)}.cb-alert--info{border-left-color:var(--cb-color-info-500, #2563eb);background-color:var(--cb-color-info-50, #eff6ff)}.cb-alert--info .cb-alert__icon{background-color:var(--cb-color-info-500, #2563eb)}:host-context([data-theme=\"dark\"]) .cb-alert{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-alert__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-alert--success,:host-context([data-theme=\"dark\"]) .cb-alert--warning,:host-context([data-theme=\"dark\"]) .cb-alert--error,:host-context([data-theme=\"dark\"]) .cb-alert--info{background-color:var(--cb-color-surface-800, #1e293b)}:host-context([data-theme=\"dark\"]) .cb-alert__close:hover{background-color:var(--cb-color-surface-700, #334155)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    @if (visible()) {
-      <section class="cb-alert cb-alert--{{ severity() }}" role="alert">
-        <span class="cb-alert__icon" aria-hidden="true">{{ glyph() }}</span>
-        <div class="cb-alert__content">
-          @if (title()) {
-            <strong class="cb-alert__title">{{ title() }}</strong>
-          }
-          <div class="cb-alert__body"><ng-content /></div>
-        </div>
-        @if (closable()) {
-          <button
-            type="button"
-            class="cb-alert__close"
-            [attr.aria-label]="t().close"
-            (click)="close()"
-          >
-            ×
-          </button>
-        }
-      </section>
-    }
+            args: [{ selector: 'cb-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    @if (visible()) {
+      <section class="cb-alert cb-alert--{{ severity() }}" role="alert">
+        <span class="cb-alert__icon" aria-hidden="true">{{ glyph() }}</span>
+        <div class="cb-alert__content">
+          @if (title()) {
+            <strong class="cb-alert__title">{{ title() }}</strong>
+          }
+          <div class="cb-alert__body"><ng-content /></div>
+        </div>
+        @if (closable()) {
+          <button
+            type="button"
+            class="cb-alert__close"
+            [attr.aria-label]="t().close"
+            (click)="close()"
+          >
+            ×
+          </button>
+        }
+      </section>
+    }
   `, styles: [":host{display:block;width:100%}.cb-alert{display:flex;align-items:flex-start;gap:var(--cb-space-3, .75rem);box-sizing:border-box;width:100%;padding:var(--cb-space-4, 1rem);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-left-width:4px;border-radius:var(--cb-radius-md, .5rem)}.cb-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.5rem;height:1.5rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;border-radius:var(--cb-radius-full, 999px)}.cb-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem)}.cb-alert__title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-alert__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155)}.cb-alert__close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:1.1rem;line-height:1;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-sm, .25rem);cursor:pointer}.cb-alert__close:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-alert--success{border-left-color:var(--cb-color-success-500, #16a34a);background-color:var(--cb-color-success-50, #f0fdf4)}.cb-alert--success .cb-alert__icon{background-color:var(--cb-color-success-500, #16a34a)}.cb-alert--warning{border-left-color:var(--cb-color-warning-500, #d97706);background-color:var(--cb-color-warning-50, #fffbeb)}.cb-alert--warning .cb-alert__icon{background-color:var(--cb-color-warning-500, #d97706)}.cb-alert--error{border-left-color:var(--cb-color-danger-500, #dc2626);background-color:var(--cb-color-danger-50, #fef2f2)}.cb-alert--error .cb-alert__icon{background-color:var(--cb-color-danger-500, #dc2626)}.cb-alert--info{border-left-color:var(--cb-color-info-500, #2563eb);background-color:var(--cb-color-info-50, #eff6ff)}.cb-alert--info .cb-alert__icon{background-color:var(--cb-color-info-500, #2563eb)}:host-context([data-theme=\"dark\"]) .cb-alert{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-alert__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-alert--success,:host-context([data-theme=\"dark\"]) .cb-alert--warning,:host-context([data-theme=\"dark\"]) .cb-alert--error,:host-context([data-theme=\"dark\"]) .cb-alert--info{background-color:var(--cb-color-surface-800, #1e293b)}:host-context([data-theme=\"dark\"]) .cb-alert__close:hover{background-color:var(--cb-color-surface-700, #334155)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });