@caribeng/ui 22.4.0 → 22.6.0

package/fesm2022/caribeng-ui-document.mjs

@@ -0,0 +1,495 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, CB_CONFIG, cbFormatAmount } from '@caribeng/ui';
+import { cbAmountInWords } from '@caribeng/ui/amount';
+
+/**
+ * Imprime solo un elemento de la página, con sus estilos, en un marco oculto: la
+ * página no cambia y el diálogo de impresión (o «Guardar como PDF») muestra
+ * únicamente ese elemento.
+ */
+function cbPrintElement(element, title = document.title) {
+    const doc = element.ownerDocument;
+    const frame = doc.createElement('iframe');
+    frame.setAttribute('aria-hidden', 'true');
+    frame.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0';
+    doc.body.appendChild(frame);
+    const w = frame.contentWindow;
+    if (!w) {
+        frame.remove();
+        return;
+    }
+    // Se copian las hojas de estilo (incluidas las de los componentes) y los tokens del tema.
+    const styles = Array.from(doc.querySelectorAll('style, link[rel="stylesheet"]'))
+        .map((n) => n.outerHTML)
+        .join('');
+    const root = doc.documentElement;
+    const attrs = Array.from(root.attributes)
+        .map((a) => `${a.name}="${a.value.replace(/"/g, '"')}"`)
+        .join(' ');
+    w.document.open();
+    w.document.write(
+    // La base es la de la página: así las hojas enlazadas con ruta relativa se encuentran.
+    `<!doctype html><html ${attrs}><head><meta charset="utf-8"><base href="${doc.baseURI.replace(/"/g, '&quot;')}"><title>${title.replace(/</g, '&lt;')}</title>${styles}` +
+        '<style>@page{margin:14mm}body{margin:0;background:#fff}.cb-print-root{box-shadow:none!important;border:0!important;max-width:none!important}</style>' +
+        `</head><body>${element.outerHTML.replace('class="', 'class="cb-print-root ')}</body></html>`);
+    w.document.close();
+    const go = () => {
+        w.focus();
+        w.print();
+        setTimeout(() => frame.remove(), 1000);
+    };
+    // Espera a que carguen las hojas enlazadas (fuentes y estilos) antes de imprimir.
+    if (w.document.readyState === 'complete')
+        setTimeout(go, 50);
+    else
+        w.addEventListener('load', go, { once: true });
+}
+
+const round = (n) => Math.round(n * 100) / 100;
+/** Totales de un documento a partir de sus líneas. */
+function documentTotals(lines, adjustments = []) {
+    let subtotal = 0;
+    let discount = 0;
+    const taxes = new Map();
+    for (const l of lines) {
+        const gross = l.quantity * l.unitPrice;
+        const disc = gross * (l.discount ?? 0);
+        const base = gross - disc;
+        subtotal += gross;
+        discount += disc;
+        if (l.tax) {
+            const t = taxes.get(l.tax) ?? { base: 0, amount: 0 };
+            t.base += base;
+            t.amount += base * l.tax;
+            taxes.set(l.tax, t);
+        }
+    }
+    const taxList = [...taxes].sort(([a], [b]) => b - a).map(([rate, t]) => ({ rate, base: round(t.base), amount: round(t.amount) }));
+    const taxTotal = round(taxList.reduce((s, t) => s + t.amount, 0));
+    const adjustmentTotal = round(adjustments.reduce((s, a) => s + a.amount, 0));
+    const net = round(subtotal - discount);
+    return { subtotal: round(subtotal), discount: round(discount), net, taxes: taxList, taxTotal, adjustments, total: round(net + taxTotal + adjustmentTotal) };
+}
+/**
+ * Documento imprimible de CaribeNG: factura, cotización, comprobante o recibo con
+ * cabecera de la empresa, tercero, líneas, impuestos, retenciones, total en letras,
+ * notas y firmas.
+ *
+ * - Calcula subtotales, descuentos, impuestos por tarifa y ajustes (retenciones).
+ * - `print()` imprime solo el documento (o lo guarda en PDF) con sus estilos.
+ *
+ * @example
+ * ```html
+ * <cb-document #doc title="Factura de venta" number="FV-1252" [issuer]="empresa" [party]="cliente" [lines]="items" />
+ * <button (click)="doc.print()">Imprimir</button>
+ * ```
+ */
+class CbDocument {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.config = inject(CB_CONFIG);
+        this.sheet = viewChild.required('sheet');
+        /** Título («Factura electrónica de venta», «Comprobante de egreso»). */
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.number = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "number" }] : /* istanbul ignore next */ []));
+        this.date = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        this.issuer = input({ name: '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "issuer" }] : /* istanbul ignore next */ []));
+        this.party = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "party" }] : /* istanbul ignore next */ []));
+        /** Datos sueltos de la cabecera (vencimiento, forma de pago…). */
+        this.fields = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        this.lines = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+        /** Retenciones (negativas) u otros cargos después de impuestos. */
+        this.adjustments = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "adjustments" }] : /* istanbul ignore next */ []));
+        /** Nombre del impuesto en los totales («IVA»). */
+        this.taxLabel = input('IVA', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "taxLabel" }] : /* istanbul ignore next */ []));
+        /** Muestra el total en letras. */
+        this.words = input(true, { ...(ngDevMode ? { debugName: "words" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.notes = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "notes" }] : /* istanbul ignore next */ []));
+        /** Rótulos de las firmas («Elaboró», «Aprobó», «Recibí conforme»). */
+        this.signatures = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "signatures" }] : /* istanbul ignore next */ []));
+        this.footer = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        /** Subtotal, descuentos, impuestos por tarifa, ajustes y total. */
+        this.totals = computed(() => documentTotals(this.lines(), this.adjustments()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
+        this.hasCodes = computed(() => this.lines().some((l) => l.code), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCodes" }] : /* istanbul ignore next */ []));
+        this.hasDiscounts = computed(() => this.lines().some((l) => l.discount), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasDiscounts" }] : /* istanbul ignore next */ []));
+        this.hasTaxes = computed(() => this.lines().some((l) => l.tax), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTaxes" }] : /* istanbul ignore next */ []));
+        this.locale = computed(() => this.config.numberLocale ?? this.t().intlLocale, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.code = computed(() => this.currency() ?? this.config.currency ?? 'COP', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+        this.inWords = computed(() => cbAmountInWords(this.totals().total, { language: this.t().intlLocale.startsWith('en') ? 'en' : 'es', currency: this.code() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inWords" }] : /* istanbul ignore next */ []));
+    }
+    join(...parts) {
+        return parts.filter((p) => !!p).join(' · ');
+    }
+    money(v) {
+        return cbFormatAmount(v, this.locale(), { currency: this.code(), negative: 'minus' });
+    }
+    qty(v) {
+        return new Intl.NumberFormat(this.locale(), { maximumFractionDigits: 3 }).format(v);
+    }
+    pct(v) {
+        return new Intl.NumberFormat(this.locale(), { style: 'percent', maximumFractionDigits: 2 }).format(v);
+    }
+    longDate(d) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'long' }).format(d);
+    }
+    /** Imprime solo el documento (o lo guarda como PDF desde el diálogo de impresión). */
+    print() {
+        cbPrintElement(this.sheet().nativeElement, [this.title(), this.number()].filter(Boolean).join(' '));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDocument, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDocument, isStandalone: true, selector: "cb-document", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, issuer: { classPropertyName: "issuer", publicName: "issuer", isSignal: true, isRequired: false, transformFunction: null }, party: { classPropertyName: "party", publicName: "party", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, adjustments: { classPropertyName: "adjustments", publicName: "adjustments", isSignal: true, isRequired: false, transformFunction: null }, taxLabel: { classPropertyName: "taxLabel", publicName: "taxLabel", isSignal: true, isRequired: false, transformFunction: null }, words: { classPropertyName: "words", publicName: "words", isSignal: true, isRequired: false, transformFunction: null }, notes: { classPropertyName: "notes", publicName: "notes", isSignal: true, isRequired: false, transformFunction: null }, signatures: { classPropertyName: "signatures", publicName: "signatures", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-document" }, viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <article #sheet class="cb-doc" [attr.aria-label]="title() + (number() ? ' ' + number() : '')">
+      <header class="cb-doc__head">
+        <div class="cb-doc__issuer">
+          @if (issuer().logo) {
+            <img class="cb-doc__logo" [src]="issuer().logo" alt="" />
+          }
+          <div>
+            <p class="cb-doc__issuer-name">{{ issuer().name }}</p>
+            @if (issuer().taxId) {
+              <p>{{ t().documentTaxId }} {{ issuer().taxId }}</p>
+            }
+            @if (issuer().address) {
+              <p>{{ issuer().address }}</p>
+            }
+            @if (issuer().phone || issuer().email) {
+              <p>{{ join(issuer().phone, issuer().email) }}</p>
+            }
+          </div>
+        </div>
+        <div class="cb-doc__title-box">
+          <h2 class="cb-doc__title">{{ title() }}</h2>
+          @if (number()) {
+            <p class="cb-doc__number">{{ number() }}</p>
+          }
+          @if (date()) {
+            <p>{{ t().documentDate }}: {{ longDate(date()!) }}</p>
+          }
+        </div>
+      </header>
+
+      @if (party() || fields().length) {
+        <section class="cb-doc__meta">
+          @if (party(); as p) {
+            <div class="cb-doc__party">
+              <p class="cb-doc__caption">{{ p.label || t().documentParty }}</p>
+              <p class="cb-doc__party-name">{{ p.name }}</p>
+              @if (p.taxId) {
+                <p>{{ t().documentTaxId }} {{ p.taxId }}</p>
+              }
+              @if (p.address) {
+                <p>{{ p.address }}</p>
+              }
+              @if (p.phone || p.email) {
+                <p>{{ join(p.phone, p.email) }}</p>
+              }
+            </div>
+          }
+          @if (fields().length) {
+            <dl class="cb-doc__fields">
+              @for (f of fields(); track f.label) {
+                <div>
+                  <dt>{{ f.label }}</dt>
+                  <dd>{{ f.value }}</dd>
+                </div>
+              }
+            </dl>
+          }
+        </section>
+      }
+
+      @if (lines().length) {
+        <table class="cb-doc__lines" role="table">
+          <thead role="rowgroup">
+            <tr role="row">
+              @if (hasCodes()) {
+                <th scope="col" role="columnheader">{{ t().documentCode }}</th>
+              }
+              <th scope="col" role="columnheader">{{ t().documentDescription }}</th>
+              <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentQuantity }}</th>
+              <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentUnitPrice }}</th>
+              @if (hasDiscounts()) {
+                <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentDiscount }}</th>
+              }
+              @if (hasTaxes()) {
+                <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentTax }}</th>
+              }
+              <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentAmount }}</th>
+            </tr>
+          </thead>
+          <tbody role="rowgroup">
+            @for (l of lines(); track $index) {
+              <tr role="row">
+                @if (hasCodes()) {
+                  <td class="cb-doc__code" role="cell" [attr.data-label]="t().documentCode">{{ l.code }}</td>
+                }
+                <td class="cb-doc__desc" role="cell">{{ l.description }}</td>
+                <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentQuantity">{{ qty(l.quantity) }}</td>
+                <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentUnitPrice">{{ money(l.unitPrice) }}</td>
+                @if (hasDiscounts()) {
+                  <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentDiscount">{{ l.discount ? pct(l.discount) : '' }}</td>
+                }
+                @if (hasTaxes()) {
+                  <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentTax">{{ l.tax ? pct(l.tax) : '' }}</td>
+                }
+                <td class="cb-doc__num cb-doc__amount" role="cell" [attr.data-label]="t().documentAmount">{{ money(l.quantity * l.unitPrice * (1 - (l.discount ?? 0))) }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+
+        <div class="cb-doc__bottom">
+          <div class="cb-doc__left">
+            @if (words()) {
+              <p class="cb-doc__caption">{{ t().documentInWords }}</p>
+              <p class="cb-doc__words">{{ inWords() }}</p>
+            }
+            @if (notes()) {
+              <p class="cb-doc__caption">{{ t().documentNotes }}</p>
+              <p class="cb-doc__notes">{{ notes() }}</p>
+            }
+          </div>
+          <dl class="cb-doc__totals">
+            <div>
+              <dt>{{ t().documentSubtotal }}</dt>
+              <dd>{{ money(totals().subtotal) }}</dd>
+            </div>
+            @if (totals().discount) {
+              <div>
+                <dt>{{ t().documentDiscount }}</dt>
+                <dd>{{ money(-totals().discount) }}</dd>
+              </div>
+            }
+            @for (tx of totals().taxes; track tx.rate) {
+              <div>
+                <dt>{{ taxLabel() }} {{ pct(tx.rate) }}</dt>
+                <dd>{{ money(tx.amount) }}</dd>
+              </div>
+            }
+            @for (a of totals().adjustments; track a.label) {
+              <div>
+                <dt>{{ a.label }}</dt>
+                <dd>{{ money(a.amount) }}</dd>
+              </div>
+            }
+            <div class="cb-doc__grand">
+              <dt>{{ t().documentTotal }}</dt>
+              <dd>{{ money(totals().total) }}</dd>
+            </div>
+          </dl>
+        </div>
+      }
+
+      <ng-content />
+
+      @if (signatures().length) {
+        <div class="cb-doc__signs">
+          @for (s of signatures(); track $index) {
+            <div class="cb-doc__sign">
+              <span class="cb-doc__sign-line"></span>
+              <span>{{ s }}</span>
+            </div>
+          }
+        </div>
+      }
+      @if (footer()) {
+        <footer class="cb-doc__footer">{{ footer() }}</footer>
+      }
+    </article>
+  `, isInline: true, styles: [":host{display:block;min-width:0;container-type:inline-size}.cb-doc{display:grid;gap:1.25rem;max-width:52rem;padding:2rem 2.25rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:#fff;box-shadow:var(--cb-shadow-md);color:#111827;font-family:var(--cb-font-sans);font-size:.8125rem;line-height:1.45}.cb-doc p{margin:0}.cb-doc__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:2px solid #111827}.cb-doc__issuer{display:flex;gap:.85rem;color:#4b5563}.cb-doc__logo{width:3.5rem;height:3.5rem;object-fit:contain}.cb-doc__issuer-name{color:#111827;font-size:1rem;font-weight:700}.cb-doc__title-box{text-align:end;color:#4b5563}.cb-doc__title{margin:0;color:#111827;font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.cb-doc__number{color:#111827;font-size:1rem;font-variant-numeric:tabular-nums;font-weight:600}.cb-doc__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem}.cb-doc__caption{color:#6b7280;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.cb-doc__party{color:#4b5563}.cb-doc__party-name{color:#111827;font-size:.9rem;font-weight:600}.cb-doc__fields{display:grid;grid-template-columns:auto auto;gap:.2rem 1rem;margin:0}.cb-doc__fields>div{display:contents}.cb-doc__fields dt{color:#6b7280}.cb-doc__fields dd{margin:0;font-weight:500;text-align:end}.cb-doc__lines{width:100%;border-collapse:collapse}.cb-doc__lines th,.cb-doc__lines td{padding:.45rem .5rem;border-bottom:1px solid #e5e7eb;text-align:start;vertical-align:top}.cb-doc__lines thead th{border-bottom:1.5px solid #111827;color:#4b5563;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.cb-doc .cb-doc__num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}.cb-doc__code{color:#6b7280;font-variant-numeric:tabular-nums}.cb-doc__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.25rem 2rem}.cb-doc__left{display:grid;flex:1 1 18rem;align-content:start;gap:.2rem}.cb-doc__words{margin-bottom:.6rem!important;font-weight:600}.cb-doc__notes{color:#4b5563;white-space:pre-line}.cb-doc__totals{display:grid;flex:0 1 17rem;gap:.25rem;margin:0}.cb-doc__totals>div{display:flex;justify-content:space-between;gap:1rem}.cb-doc__totals dt{color:#4b5563}.cb-doc__totals dd{margin:0;font-variant-numeric:tabular-nums}.cb-doc__grand{margin-top:.25rem;padding-top:.45rem;border-top:2px solid #111827;font-size:1rem}.cb-doc__grand dt,.cb-doc__grand dd{color:#111827;font-weight:700}.cb-doc__signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:2rem;margin-top:2.5rem}.cb-doc__sign{display:grid;gap:.3rem;color:#4b5563;text-align:center}.cb-doc__sign-line{border-top:1px solid #111827}.cb-doc__footer{padding-top:.75rem;border-top:1px solid #e5e7eb;color:#6b7280;font-size:.7rem;text-align:center}@container (max-width: 36rem){.cb-doc{padding:1.25rem 1rem}.cb-doc__title-box{text-align:start}.cb-doc__lines thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cb-doc__lines,.cb-doc__lines tbody,.cb-doc__lines tr,.cb-doc__lines td{display:block}.cb-doc__lines tr{display:flex;flex-direction:column;padding:.55rem 0;border-bottom:1px solid #e5e7eb}.cb-doc__lines td{display:flex;justify-content:space-between;gap:1rem;padding:.1rem 0;border:0}.cb-doc__lines td:empty{display:none}.cb-doc__lines td[data-label]:before{content:attr(data-label);color:#6b7280;font-weight:400;text-align:start;white-space:normal}.cb-doc__lines .cb-doc__desc{order:-1;font-weight:600}.cb-doc__lines .cb-doc__amount{font-weight:600}.cb-doc__totals{flex-basis:100%}}@media print{.cb-doc{max-width:none;padding:0;border:0;box-shadow:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDocument, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-document', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-document' }, template: `
+    <article #sheet class="cb-doc" [attr.aria-label]="title() + (number() ? ' ' + number() : '')">
+      <header class="cb-doc__head">
+        <div class="cb-doc__issuer">
+          @if (issuer().logo) {
+            <img class="cb-doc__logo" [src]="issuer().logo" alt="" />
+          }
+          <div>
+            <p class="cb-doc__issuer-name">{{ issuer().name }}</p>
+            @if (issuer().taxId) {
+              <p>{{ t().documentTaxId }} {{ issuer().taxId }}</p>
+            }
+            @if (issuer().address) {
+              <p>{{ issuer().address }}</p>
+            }
+            @if (issuer().phone || issuer().email) {
+              <p>{{ join(issuer().phone, issuer().email) }}</p>
+            }
+          </div>
+        </div>
+        <div class="cb-doc__title-box">
+          <h2 class="cb-doc__title">{{ title() }}</h2>
+          @if (number()) {
+            <p class="cb-doc__number">{{ number() }}</p>
+          }
+          @if (date()) {
+            <p>{{ t().documentDate }}: {{ longDate(date()!) }}</p>
+          }
+        </div>
+      </header>
+
+      @if (party() || fields().length) {
+        <section class="cb-doc__meta">
+          @if (party(); as p) {
+            <div class="cb-doc__party">
+              <p class="cb-doc__caption">{{ p.label || t().documentParty }}</p>
+              <p class="cb-doc__party-name">{{ p.name }}</p>
+              @if (p.taxId) {
+                <p>{{ t().documentTaxId }} {{ p.taxId }}</p>
+              }
+              @if (p.address) {
+                <p>{{ p.address }}</p>
+              }
+              @if (p.phone || p.email) {
+                <p>{{ join(p.phone, p.email) }}</p>
+              }
+            </div>
+          }
+          @if (fields().length) {
+            <dl class="cb-doc__fields">
+              @for (f of fields(); track f.label) {
+                <div>
+                  <dt>{{ f.label }}</dt>
+                  <dd>{{ f.value }}</dd>
+                </div>
+              }
+            </dl>
+          }
+        </section>
+      }
+
+      @if (lines().length) {
+        <table class="cb-doc__lines" role="table">
+          <thead role="rowgroup">
+            <tr role="row">
+              @if (hasCodes()) {
+                <th scope="col" role="columnheader">{{ t().documentCode }}</th>
+              }
+              <th scope="col" role="columnheader">{{ t().documentDescription }}</th>
+              <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentQuantity }}</th>
+              <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentUnitPrice }}</th>
+              @if (hasDiscounts()) {
+                <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentDiscount }}</th>
+              }
+              @if (hasTaxes()) {
+                <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentTax }}</th>
+              }
+              <th scope="col" role="columnheader" class="cb-doc__num">{{ t().documentAmount }}</th>
+            </tr>
+          </thead>
+          <tbody role="rowgroup">
+            @for (l of lines(); track $index) {
+              <tr role="row">
+                @if (hasCodes()) {
+                  <td class="cb-doc__code" role="cell" [attr.data-label]="t().documentCode">{{ l.code }}</td>
+                }
+                <td class="cb-doc__desc" role="cell">{{ l.description }}</td>
+                <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentQuantity">{{ qty(l.quantity) }}</td>
+                <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentUnitPrice">{{ money(l.unitPrice) }}</td>
+                @if (hasDiscounts()) {
+                  <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentDiscount">{{ l.discount ? pct(l.discount) : '' }}</td>
+                }
+                @if (hasTaxes()) {
+                  <td class="cb-doc__num" role="cell" [attr.data-label]="t().documentTax">{{ l.tax ? pct(l.tax) : '' }}</td>
+                }
+                <td class="cb-doc__num cb-doc__amount" role="cell" [attr.data-label]="t().documentAmount">{{ money(l.quantity * l.unitPrice * (1 - (l.discount ?? 0))) }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+
+        <div class="cb-doc__bottom">
+          <div class="cb-doc__left">
+            @if (words()) {
+              <p class="cb-doc__caption">{{ t().documentInWords }}</p>
+              <p class="cb-doc__words">{{ inWords() }}</p>
+            }
+            @if (notes()) {
+              <p class="cb-doc__caption">{{ t().documentNotes }}</p>
+              <p class="cb-doc__notes">{{ notes() }}</p>
+            }
+          </div>
+          <dl class="cb-doc__totals">
+            <div>
+              <dt>{{ t().documentSubtotal }}</dt>
+              <dd>{{ money(totals().subtotal) }}</dd>
+            </div>
+            @if (totals().discount) {
+              <div>
+                <dt>{{ t().documentDiscount }}</dt>
+                <dd>{{ money(-totals().discount) }}</dd>
+              </div>
+            }
+            @for (tx of totals().taxes; track tx.rate) {
+              <div>
+                <dt>{{ taxLabel() }} {{ pct(tx.rate) }}</dt>
+                <dd>{{ money(tx.amount) }}</dd>
+              </div>
+            }
+            @for (a of totals().adjustments; track a.label) {
+              <div>
+                <dt>{{ a.label }}</dt>
+                <dd>{{ money(a.amount) }}</dd>
+              </div>
+            }
+            <div class="cb-doc__grand">
+              <dt>{{ t().documentTotal }}</dt>
+              <dd>{{ money(totals().total) }}</dd>
+            </div>
+          </dl>
+        </div>
+      }
+
+      <ng-content />
+
+      @if (signatures().length) {
+        <div class="cb-doc__signs">
+          @for (s of signatures(); track $index) {
+            <div class="cb-doc__sign">
+              <span class="cb-doc__sign-line"></span>
+              <span>{{ s }}</span>
+            </div>
+          }
+        </div>
+      }
+      @if (footer()) {
+        <footer class="cb-doc__footer">{{ footer() }}</footer>
+      }
+    </article>
+  `, styles: [":host{display:block;min-width:0;container-type:inline-size}.cb-doc{display:grid;gap:1.25rem;max-width:52rem;padding:2rem 2.25rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:#fff;box-shadow:var(--cb-shadow-md);color:#111827;font-family:var(--cb-font-sans);font-size:.8125rem;line-height:1.45}.cb-doc p{margin:0}.cb-doc__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:2px solid #111827}.cb-doc__issuer{display:flex;gap:.85rem;color:#4b5563}.cb-doc__logo{width:3.5rem;height:3.5rem;object-fit:contain}.cb-doc__issuer-name{color:#111827;font-size:1rem;font-weight:700}.cb-doc__title-box{text-align:end;color:#4b5563}.cb-doc__title{margin:0;color:#111827;font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.cb-doc__number{color:#111827;font-size:1rem;font-variant-numeric:tabular-nums;font-weight:600}.cb-doc__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem}.cb-doc__caption{color:#6b7280;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.cb-doc__party{color:#4b5563}.cb-doc__party-name{color:#111827;font-size:.9rem;font-weight:600}.cb-doc__fields{display:grid;grid-template-columns:auto auto;gap:.2rem 1rem;margin:0}.cb-doc__fields>div{display:contents}.cb-doc__fields dt{color:#6b7280}.cb-doc__fields dd{margin:0;font-weight:500;text-align:end}.cb-doc__lines{width:100%;border-collapse:collapse}.cb-doc__lines th,.cb-doc__lines td{padding:.45rem .5rem;border-bottom:1px solid #e5e7eb;text-align:start;vertical-align:top}.cb-doc__lines thead th{border-bottom:1.5px solid #111827;color:#4b5563;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.cb-doc .cb-doc__num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}.cb-doc__code{color:#6b7280;font-variant-numeric:tabular-nums}.cb-doc__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.25rem 2rem}.cb-doc__left{display:grid;flex:1 1 18rem;align-content:start;gap:.2rem}.cb-doc__words{margin-bottom:.6rem!important;font-weight:600}.cb-doc__notes{color:#4b5563;white-space:pre-line}.cb-doc__totals{display:grid;flex:0 1 17rem;gap:.25rem;margin:0}.cb-doc__totals>div{display:flex;justify-content:space-between;gap:1rem}.cb-doc__totals dt{color:#4b5563}.cb-doc__totals dd{margin:0;font-variant-numeric:tabular-nums}.cb-doc__grand{margin-top:.25rem;padding-top:.45rem;border-top:2px solid #111827;font-size:1rem}.cb-doc__grand dt,.cb-doc__grand dd{color:#111827;font-weight:700}.cb-doc__signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:2rem;margin-top:2.5rem}.cb-doc__sign{display:grid;gap:.3rem;color:#4b5563;text-align:center}.cb-doc__sign-line{border-top:1px solid #111827}.cb-doc__footer{padding-top:.75rem;border-top:1px solid #e5e7eb;color:#6b7280;font-size:.7rem;text-align:center}@container (max-width: 36rem){.cb-doc{padding:1.25rem 1rem}.cb-doc__title-box{text-align:start}.cb-doc__lines thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cb-doc__lines,.cb-doc__lines tbody,.cb-doc__lines tr,.cb-doc__lines td{display:block}.cb-doc__lines tr{display:flex;flex-direction:column;padding:.55rem 0;border-bottom:1px solid #e5e7eb}.cb-doc__lines td{display:flex;justify-content:space-between;gap:1rem;padding:.1rem 0;border:0}.cb-doc__lines td:empty{display:none}.cb-doc__lines td[data-label]:before{content:attr(data-label);color:#6b7280;font-weight:400;text-align:start;white-space:normal}.cb-doc__lines .cb-doc__desc{order:-1;font-weight:600}.cb-doc__lines .cb-doc__amount{font-weight:600}.cb-doc__totals{flex-basis:100%}}@media print{.cb-doc{max-width:none;padding:0;border:0;box-shadow:none}}\n"] }]
+        }], propDecorators: { sheet: [{ type: i0.ViewChild, args: ['sheet', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], issuer: [{ type: i0.Input, args: [{ isSignal: true, alias: "issuer", required: false }] }], party: [{ type: i0.Input, args: [{ isSignal: true, alias: "party", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], adjustments: [{ type: i0.Input, args: [{ isSignal: true, alias: "adjustments", required: false }] }], taxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "taxLabel", required: false }] }], words: [{ type: i0.Input, args: [{ isSignal: true, alias: "words", required: false }] }], notes: [{ type: i0.Input, args: [{ isSignal: true, alias: "notes", required: false }] }], signatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatures", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/document
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbDocument, cbPrintElement, documentTotals };

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

@@ -3,7 +3,7 @@ import { input, model, inject, ElementRef, computed, ViewEncapsulation, ChangeDe
 import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
- * Dots-indicator de Caribe Design: indicador de paginación por puntos. El punto
+ * Dots-indicator: indicador de paginación por puntos. El punto
  * activo se alarga; cada punto es navegable.
  *
  * @example
@@ -43,50 +43,50 @@ class CbDotsIndicator {
         this.host.nativeElement.querySelectorAll('.cb-dots-indicator__dot')[target]?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDotsIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDotsIndicator, isStandalone: true, selector: "cb-dots-indicator", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "cb-dots-indicator-host" }, ngImport: i0, template: `
-    <div
-      class="cb-dots-indicator"
-      role="tablist"
-      [attr.aria-label]="t().pageIndicator"
-      (keydown)="onKeydown($event)"
-    >
-      @for (idx of indices(); track idx) {
-        <button
-          type="button"
-          class="cb-dots-indicator__dot"
-          [class.cb-dots-indicator__dot--active]="activeIndex() === idx"
-          role="tab"
-          [attr.aria-selected]="activeIndex() === idx"
-          [attr.tabindex]="activeIndex() === idx ? 0 : -1"
-          [attr.aria-label]="fmt(t().page, idx + 1)"
-          (click)="activeIndex.set(idx)"
-        ></button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDotsIndicator, isStandalone: true, selector: "cb-dots-indicator", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "cb-dots-indicator-host" }, ngImport: i0, template: `
+    <div
+      class="cb-dots-indicator"
+      role="tablist"
+      [attr.aria-label]="t().pageIndicator"
+      (keydown)="onKeydown($event)"
+    >
+      @for (idx of indices(); track idx) {
+        <button
+          type="button"
+          class="cb-dots-indicator__dot"
+          [class.cb-dots-indicator__dot--active]="activeIndex() === idx"
+          role="tab"
+          [attr.aria-selected]="activeIndex() === idx"
+          [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+          [attr.aria-label]="fmt(t().page, idx + 1)"
+          (click)="activeIndex.set(idx)"
+        ></button>
+      }
+    </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-dots-indicator{display:inline-flex;align-items:center;gap:var(--cb-space-2, .4rem)}.cb-dots-indicator__dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-300, #cbd5e1);cursor:pointer;transition:width var(--cb-duration-normal, .2s) var(--cb-ease, ease),background-color var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-dots-indicator__dot:hover:not(.cb-dots-indicator__dot--active){background-color:var(--cb-color-surface-400, #94a3b8)}.cb-dots-indicator__dot--active{width:1.4rem;background-color:var(--cb-color-primary-500, #10b981)}.cb-dots-indicator__dot:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-dots-indicator__dot{background-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-dots-indicator__dot--active{background-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDotsIndicator, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-dots-indicator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-dots-indicator-host' }, template: `
-    <div
-      class="cb-dots-indicator"
-      role="tablist"
-      [attr.aria-label]="t().pageIndicator"
-      (keydown)="onKeydown($event)"
-    >
-      @for (idx of indices(); track idx) {
-        <button
-          type="button"
-          class="cb-dots-indicator__dot"
-          [class.cb-dots-indicator__dot--active]="activeIndex() === idx"
-          role="tab"
-          [attr.aria-selected]="activeIndex() === idx"
-          [attr.tabindex]="activeIndex() === idx ? 0 : -1"
-          [attr.aria-label]="fmt(t().page, idx + 1)"
-          (click)="activeIndex.set(idx)"
-        ></button>
-      }
-    </div>
+            args: [{ selector: 'cb-dots-indicator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-dots-indicator-host' }, template: `
+    <div
+      class="cb-dots-indicator"
+      role="tablist"
+      [attr.aria-label]="t().pageIndicator"
+      (keydown)="onKeydown($event)"
+    >
+      @for (idx of indices(); track idx) {
+        <button
+          type="button"
+          class="cb-dots-indicator__dot"
+          [class.cb-dots-indicator__dot--active]="activeIndex() === idx"
+          role="tab"
+          [attr.aria-selected]="activeIndex() === idx"
+          [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+          [attr.aria-label]="fmt(t().page, idx + 1)"
+          (click)="activeIndex.set(idx)"
+        ></button>
+      }
+    </div>
   `, styles: [":host{display:inline-flex}.cb-dots-indicator{display:inline-flex;align-items:center;gap:var(--cb-space-2, .4rem)}.cb-dots-indicator__dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:var(--cb-radius-full, 999px);background-color:var(--cb-color-surface-300, #cbd5e1);cursor:pointer;transition:width var(--cb-duration-normal, .2s) var(--cb-ease, ease),background-color var(--cb-duration-normal, .2s) var(--cb-ease, ease)}.cb-dots-indicator__dot:hover:not(.cb-dots-indicator__dot--active){background-color:var(--cb-color-surface-400, #94a3b8)}.cb-dots-indicator__dot--active{width:1.4rem;background-color:var(--cb-color-primary-500, #10b981)}.cb-dots-indicator__dot:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-dots-indicator__dot{background-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-dots-indicator__dot--active{background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
         }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }] } });