@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-financial-report.mjs

@@ -0,0 +1,380 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, input, booleanAttribute, model, output, computed, afterRenderEffect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat, CB_CONFIG, cbSummarize, cbFormatAmount } from '@caribeng/ui';
+import { resolveAccounts, accountLabel } from '@caribeng/ui/account-picker';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbTreeTable } from '@caribeng/ui/treetable';
+import { currencySymbol, cbDownloadXlsx } from '@caribeng/ui/xlsx';
+
+let nextUid = 0;
+/**
+ * Informe financiero jerárquico de CaribeNG: balance general, estado de resultados
+ * o balance de prueba a partir del plan de cuentas y los saldos de las cuentas de
+ * movimiento.
+ *
+ * - Cada cuenta mayor suma a sus auxiliares; los niveles se abren con los botones
+ *   «Nivel 1…N» y se pueden ocultar las cuentas en cero.
+ * - Varios periodos en columnas y, con `comparative`, la variación y el % del
+ *   primero frente al segundo.
+ * - Totales calculados (`totals`), saldos de naturaleza crédito en positivo
+ *   (`signByNature`), exportación a Excel con niveles plegables e impresión.
+ * - Clic o Enter en una cuenta de movimiento emite `accountOpen` (ver sus movimientos).
+ *
+ * @example
+ * ```html
+ * <cb-financial-report title="Estado de resultados" [accounts]="puc" [balances]="saldos" [periods]="['2026', '2025']" comparative [classes]="['4', '5', '6']" [totals]="utilidad" />
+ * ```
+ */
+class CbFinancialReport {
+    /** Signo de cada cuenta según la naturaleza de su clase. */
+    signOf(acc) {
+        if (!this.signByNature())
+            return 1;
+        const nature = acc.nature ?? acc.ancestors.find((a) => a.nature)?.nature ?? (['2', '3', '4'].includes(acc.code[0]) ? 'credit' : 'debit');
+        return nature === 'credit' ? -1 : 1;
+    }
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.config = inject(CB_CONFIG);
+        this.uid = `cb-financial-report-${++nextUid}`;
+        this.tree = viewChild.required(CbTreeTable);
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Líneas bajo el título (empresa, NIT, periodo). */
+        this.subtitle = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /** Plan de cuentas. */
+        this.accounts = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "accounts" }] : /* istanbul ignore next */ []));
+        /** Saldos de las cuentas de movimiento, uno por periodo. */
+        this.balances = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "balances" }] : /* istanbul ignore next */ []));
+        /** Nombres de los periodos (columnas). */
+        this.periods = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "periods" }] : /* istanbul ignore next */ []));
+        /** Columnas de variación y % del primer periodo frente al segundo. */
+        this.comparative = input(false, { ...(ngDevMode ? { debugName: "comparative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Clases (cuentas raíz) que se muestran: `['1', '2', '3']` para el balance. Todas
+         * por defecto. Los `totals` pueden usar cualquier cuenta, también de otras clases.
+         */
+        this.classes = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        /** Muestra en positivo los saldos de naturaleza crédito (pasivo, patrimonio, ingresos). */
+        this.signByNature = input(true, { ...(ngDevMode ? { debugName: "signByNature" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Filas de total al final. */
+        this.totals = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
+        /** Niveles abiertos (1 = solo las clases). */
+        this.level = model(2, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+        /** Oculta las cuentas cuyos saldos son todos cero. */
+        this.hideZero = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideZero" }] : /* istanbul ignore next */ []));
+        this.toolbar = input(true, { ...(ngDevMode ? { debugName: "toolbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        this.negativeStyle = input('parens', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "negativeStyle" }] : /* istanbul ignore next */ []));
+        /** Clic o Enter en una cuenta de movimiento. */
+        this.accountOpen = output();
+        this.resolved = computed(() => resolveAccounts(this.accounts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+        this.byCode = computed(() => new Map(this.resolved().map((a) => [a.code, a])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "byCode" }] : /* istanbul ignore next */ []));
+        /** Árbol de todo el plan de cuentas con los saldos (con signo) en las hojas. */
+        this.allNodes = computed(() => {
+            const periods = this.periods().length;
+            const balances = this.balances();
+            const all = this.resolved();
+            const childrenOf = new Map();
+            const roots = [];
+            const present = new Set(all.map((a) => a.code));
+            for (const a of all) {
+                const parent = [...a.ancestors].reverse().find((p) => present.has(p.code));
+                if (parent) {
+                    if (!childrenOf.has(parent.code))
+                        childrenOf.set(parent.code, []);
+                    childrenOf.get(parent.code).push(a);
+                }
+                else
+                    roots.push(a);
+            }
+            const build = (a) => {
+                const kids = childrenOf.get(a.code) ?? [];
+                const data = { cuenta: accountLabel(a), code: a.code };
+                if (!kids.length) {
+                    const sign = this.signOf(a);
+                    const values = balances[a.code] ?? [];
+                    for (let i = 0; i < periods; i++)
+                        data[`p${i}`] = values[i] == null ? 0 : sign * values[i];
+                    if (this.comparative() && periods >= 2) {
+                        data['var'] = data['p0'] - data['p1'];
+                        data['pct'] = data['p1'] ? data['var'] / Math.abs(data['p1']) : null;
+                    }
+                }
+                return { key: a.code, data, children: kids.length ? kids.map(build) : undefined };
+            };
+            return roots.map(build);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allNodes" }] : /* istanbul ignore next */ []));
+        /** Árbol del informe: solo las clases pedidas (`classes`). */
+        this.baseNodes = computed(() => {
+            const allowed = this.classes();
+            return allowed ? this.allNodes().filter((n) => allowed.some((c) => n.key.startsWith(c))) : this.allNodes();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseNodes" }] : /* istanbul ignore next */ []));
+        /** Árbol mostrado: sin las cuentas en cero (si se pide) y con las filas de total. */
+        this.nodes = computed(() => {
+            const periods = this.periods().length;
+            const isZero = (n) => n.children?.length ? n.children.every(isZero) : Array.from({ length: periods }, (_, i) => n.data[`p${i}`]).every((v) => !v);
+            const prune = (nodes) => nodes.filter((n) => !isZero(n)).map((n) => (n.children?.length ? { ...n, children: prune(n.children) } : n));
+            const tree = this.hideZero() ? prune(this.baseNodes()) : this.baseNodes();
+            return [...tree, ...this.totalNodes()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+        /** Total (con signo) de una cuenta en cada periodo, sumando sus hojas. */
+        this.sums = computed(() => {
+            const periods = this.periods().length;
+            const out = new Map();
+            const walk = (n) => {
+                const v = n.children?.length
+                    ? n.children.map(walk).reduce((acc, x) => acc.map((a, i) => a + x[i]), new Array(periods).fill(0))
+                    : Array.from({ length: periods }, (_, i) => n.data[`p${i}`] ?? 0);
+                out.set(n.key, v);
+                return v;
+            };
+            // Sobre todo el plan: un total puede usar cuentas fuera de las clases mostradas.
+            this.allNodes().forEach(walk);
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sums" }] : /* istanbul ignore next */ []));
+        this.totalNodes = computed(() => {
+            const periods = this.periods().length;
+            return this.totals().map((total, ti) => {
+                const values = new Array(periods).fill(0);
+                for (const term of total.terms) {
+                    const v = this.sums().get(term.code) ?? new Array(periods).fill(0);
+                    v.forEach((x, i) => (values[i] = Math.round((values[i] + (term.sign ?? 1) * x) * 100) / 100));
+                }
+                const data = { cuenta: total.label };
+                values.forEach((v, i) => (data[`p${i}`] = v));
+                if (this.comparative() && periods >= 2) {
+                    data['var'] = values[0] - values[1];
+                    data['pct'] = values[1] ? (values[0] - values[1]) / Math.abs(values[1]) : null;
+                }
+                return { key: `__total${ti}`, data };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalNodes" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => {
+            const t = this.t();
+            const cols = [{ field: 'cuenta', header: t.journalAccount }];
+            this.periods().forEach((p, i) => cols.push({ field: `p${i}`, header: p, type: 'currency', summary: 'sum' }));
+            if (this.comparative() && this.periods().length >= 2) {
+                cols.push({ field: 'var', header: t.reportVariation, type: 'currency', summary: (leaves) => (cbSummarize(leaves.map((d) => d['p0']), 'sum') ?? 0) - (cbSummarize(leaves.map((d) => d['p1']), 'sum') ?? 0) }, {
+                    field: 'pct',
+                    header: '%',
+                    type: 'percent',
+                    decimals: 1,
+                    summary: (leaves) => {
+                        const cur = cbSummarize(leaves.map((d) => d['p0']), 'sum') ?? 0;
+                        const prev = cbSummarize(leaves.map((d) => d['p1']), 'sum') ?? 0;
+                        return prev ? (cur - prev) / Math.abs(prev) : null;
+                    },
+                });
+            }
+            return cols;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Niveles disponibles (hasta la profundidad del plan de cuentas). */
+        this.levels = computed(() => {
+            let depth = 1;
+            const walk = (nodes, d) => nodes.forEach((n) => {
+                depth = Math.max(depth, d);
+                if (n.children?.length)
+                    walk(n.children, d + 1);
+            });
+            walk(this.baseNodes(), 1);
+            return Array.from({ length: depth }, (_, i) => i + 1);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+        this.rowClass = (node) => node.key.startsWith('__total') ? 'cb-fr__total' : this.byCode().get(node.key)?.level === 1 ? 'cb-fr__class' : null;
+        // Cada cambio de nivel (o del árbol) abre las filas hasta ese nivel.
+        afterRenderEffect(() => {
+            const level = this.level();
+            this.nodes();
+            untracked(() => this.tree().expandToLevel(level));
+        });
+    }
+    onActivate(node) {
+        const acc = this.byCode().get(node.key);
+        if (acc)
+            this.accountOpen.emit(acc);
+    }
+    /** Hoja de Excel del informe: todas las cuentas con sus niveles plegables, títulos y totales. */
+    toExcelSheet() {
+        const sheet = this.tree().toExcelSheet({ title: [this.title(), ...this.subtitle()].filter(Boolean), sheetName: this.title() || this.t().reportTitle });
+        // Las filas de total van en negrita y sin nivel.
+        const firstTotal = sheet.rows.length - this.totalNodes().length;
+        const rows = sheet.rows.map((r, i) => (i >= firstTotal ? { ...r, bold: true, level: 0, indent: 0 } : r));
+        const currency = this.currency() ?? this.config.currency;
+        return { ...sheet, rows, totals: undefined, columns: sheet.columns.map((c) => (c.type === 'currency' ? { ...c, negative: this.negativeStyle() ?? c.negative, symbol: currency ? currencySymbol(currency, this.config.numberLocale ?? this.t().intlLocale) : c.symbol } : c)) };
+    }
+    /** Descarga el informe en Excel. */
+    exportExcel(filename) {
+        cbDownloadXlsx(filename ?? (this.title() || this.t().reportTitle), this.toExcelSheet());
+    }
+    /** Imprime el informe (todas las cuentas hasta el nivel abierto) en una ventana de impresión limpia. */
+    print() {
+        const doc = document;
+        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)
+            return;
+        const esc = (s) => String(s ?? '').replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c]);
+        const cols = this.columns();
+        const locale = this.config.numberLocale ?? this.t().intlLocale;
+        const currency = this.currency() ?? this.config.currency ?? null;
+        const money = (v, c) => v == null || v === '' ? '' : c.type === 'percent' ? cbFormatAmount(v * 100, locale, { decimals: 1, negative: this.negativeStyle() }) + ' %' : cbFormatAmount(v, locale, { currency, negative: this.negativeStyle() });
+        const sheet = this.tree().toExcelSheet();
+        const visibleLevel = this.level();
+        const firstTotal = sheet.rows.length - this.totalNodes().length;
+        const body = sheet.rows
+            .map((r, i) => ({ r, isTotal: i >= firstTotal }))
+            .filter(({ r }) => (r.level ?? 0) < visibleLevel)
+            .map(({ r, isTotal }) => {
+            return `<tr class="${r.bold || isTotal ? 'b' : ''}${isTotal ? ' t' : ''}"><td style="padding-left:${0.4 + (r.indent ?? 0) * 1.1}rem">${esc(r.cells[0])}</td>${cols
+                .slice(1)
+                .map((c, ci) => `<td class="n">${esc(money(r.cells[ci + 1], c))}</td>`)
+                .join('')}</tr>`;
+        })
+            .join('');
+        w.document.open();
+        w.document.write(`<!doctype html><html lang="${esc(this.t().intlLocale)}"><head><meta charset="utf-8"><title>${esc(this.title() || this.t().reportTitle)}</title><style>` +
+            'body{font:12px system-ui,sans-serif;color:#111;margin:24px}h1{font-size:16px;margin:0 0 2px}p{margin:0;color:#555}table{width:100%;border-collapse:collapse;margin-top:14px}' +
+            'th,td{padding:4px 6px;border-bottom:1px solid #e5e7eb;text-align:left}th{font-size:11px;text-transform:uppercase;color:#555;border-bottom:1.5px solid #111}.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.b td{font-weight:600}.t td{border-top:1.5px solid #111}' +
+            `</style></head><body>${this.title() ? `<h1>${esc(this.title())}</h1>` : ''}${this.subtitle()
+                .map((s) => `<p>${esc(s)}</p>`)
+                .join('')}<table><thead><tr>${cols.map((c, i) => `<th${i ? ' class="n"' : ''}>${esc(c.header)}</th>`).join('')}</tr></thead><tbody>${body}</tbody></table></body></html>`);
+        w.document.close();
+        w.focus();
+        w.print();
+        setTimeout(() => frame.remove(), 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFinancialReport, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFinancialReport, isStandalone: true, selector: "cb-financial-report", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, accounts: { classPropertyName: "accounts", publicName: "accounts", isSignal: true, isRequired: false, transformFunction: null }, balances: { classPropertyName: "balances", publicName: "balances", isSignal: true, isRequired: false, transformFunction: null }, periods: { classPropertyName: "periods", publicName: "periods", isSignal: true, isRequired: false, transformFunction: null }, comparative: { classPropertyName: "comparative", publicName: "comparative", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, signByNature: { classPropertyName: "signByNature", publicName: "signByNature", isSignal: true, isRequired: false, transformFunction: null }, totals: { classPropertyName: "totals", publicName: "totals", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, hideZero: { classPropertyName: "hideZero", publicName: "hideZero", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, negativeStyle: { classPropertyName: "negativeStyle", publicName: "negativeStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", hideZero: "hideZeroChange", accountOpen: "accountOpen" }, host: { classAttribute: "cb-financial-report" }, viewQueries: [{ propertyName: "tree", first: true, predicate: CbTreeTable, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (title() || subtitle().length) {
+      <header class="cb-fr__head">
+        @if (title()) {
+          <h2 class="cb-fr__title" [id]="uid + '-title'">{{ title() }}</h2>
+        }
+        @for (line of subtitle(); track $index) {
+          <p class="cb-fr__subtitle">{{ line }}</p>
+        }
+      </header>
+    }
+
+    @if (toolbar()) {
+      <div class="cb-fr__toolbar" role="toolbar" [attr.aria-label]="t().reportToolbar">
+        <div class="cb-fr__levels" role="group" [attr.aria-label]="t().reportLevel">
+          @for (n of levels(); track n) {
+            <button type="button" class="cb-fr__level" [attr.aria-pressed]="level() === n" [attr.aria-label]="fmt(t().reportLevelN, n)" (click)="level.set(n)">{{ n }}</button>
+          }
+        </div>
+        <button type="button" class="cb-fr__toggle" [attr.aria-pressed]="hideZero()" (click)="hideZero.set(!hideZero())">
+          <cb-icon [name]="hideZero() ? 'eye-off' : 'eye'" [size]="15" aria-hidden="true" />
+          {{ t().reportHideZero }}
+        </button>
+        <span class="cb-fr__spacer"></span>
+        <cb-button size="sm" variant="outlined" (click)="exportExcel()">
+          <cb-icon name="download" [size]="15" aria-hidden="true" />
+          {{ t().reportExcel }}
+        </cb-button>
+        <cb-button size="sm" variant="text" (click)="print()">
+          <cb-icon name="file" [size]="15" aria-hidden="true" />
+          {{ t().reportPrint }}
+        </cb-button>
+      </div>
+    }
+
+    <cb-treetable
+      [value]="nodes()"
+      [columns]="columns()"
+      rollup
+      [showFooter]="false"
+      [currency]="currency()"
+      [negativeStyle]="negativeStyle()"
+      [rowClass]="rowClass"
+      [activateLeaves]="true"
+      [ariaLabel]="title() || t().reportTitle"
+      (nodeActivate)="onActivate($event)"
+    />
+  `, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-3, .75rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-fr__head{display:grid;gap:.15rem}.cb-fr__title{margin:0;font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-fr__subtitle{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-fr__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.cb-fr__levels{display:inline-flex;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-fr__level,.cb-fr__toggle{border:0;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);cursor:pointer}.cb-fr__level{min-width:2rem;height:1.85rem;border-radius:var(--cb-radius-sm, 4px);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-fr__level[aria-pressed=true]{background:var(--cb-color-bg);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgb(0 0 0 / .08));color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-fr__toggle{display:inline-flex;align-items:center;gap:.35rem;height:2rem;padding:0 .6rem;border-radius:var(--cb-radius-md);color:var(--cb-color-text-muted)}.cb-fr__toggle[aria-pressed=true]{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent);color:var(--cb-color-text)}:is(.cb-fr__level,.cb-fr__toggle):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-fr__spacer{flex:1}:host ::ng-deep .cb-fr__class>td{background:var(--cb-color-surface-subtle)}:host ::ng-deep .cb-fr__total>td{border-top:2px solid var(--cb-color-border-strong);background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}\n"], dependencies: [{ kind: "component", type: CbTreeTable, selector: "cb-treetable", inputs: ["value", "columns", "ariaLabel", "rollup", "currency", "showFooter", "rowClass", "activateLeaves", "negativeStyle"], outputs: ["nodeExpand", "nodeCollapse", "nodeActivate"] }, { 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: CbFinancialReport, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-financial-report', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbTreeTable, CbButton, CbIcon], host: { class: 'cb-financial-report' }, template: `
+    @if (title() || subtitle().length) {
+      <header class="cb-fr__head">
+        @if (title()) {
+          <h2 class="cb-fr__title" [id]="uid + '-title'">{{ title() }}</h2>
+        }
+        @for (line of subtitle(); track $index) {
+          <p class="cb-fr__subtitle">{{ line }}</p>
+        }
+      </header>
+    }
+
+    @if (toolbar()) {
+      <div class="cb-fr__toolbar" role="toolbar" [attr.aria-label]="t().reportToolbar">
+        <div class="cb-fr__levels" role="group" [attr.aria-label]="t().reportLevel">
+          @for (n of levels(); track n) {
+            <button type="button" class="cb-fr__level" [attr.aria-pressed]="level() === n" [attr.aria-label]="fmt(t().reportLevelN, n)" (click)="level.set(n)">{{ n }}</button>
+          }
+        </div>
+        <button type="button" class="cb-fr__toggle" [attr.aria-pressed]="hideZero()" (click)="hideZero.set(!hideZero())">
+          <cb-icon [name]="hideZero() ? 'eye-off' : 'eye'" [size]="15" aria-hidden="true" />
+          {{ t().reportHideZero }}
+        </button>
+        <span class="cb-fr__spacer"></span>
+        <cb-button size="sm" variant="outlined" (click)="exportExcel()">
+          <cb-icon name="download" [size]="15" aria-hidden="true" />
+          {{ t().reportExcel }}
+        </cb-button>
+        <cb-button size="sm" variant="text" (click)="print()">
+          <cb-icon name="file" [size]="15" aria-hidden="true" />
+          {{ t().reportPrint }}
+        </cb-button>
+      </div>
+    }
+
+    <cb-treetable
+      [value]="nodes()"
+      [columns]="columns()"
+      rollup
+      [showFooter]="false"
+      [currency]="currency()"
+      [negativeStyle]="negativeStyle()"
+      [rowClass]="rowClass"
+      [activateLeaves]="true"
+      [ariaLabel]="title() || t().reportTitle"
+      (nodeActivate)="onActivate($event)"
+    />
+  `, styles: [":host{display:grid;gap:var(--cb-space-3, .75rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-fr__head{display:grid;gap:.15rem}.cb-fr__title{margin:0;font-size:var(--cb-text-lg, 1.125rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-fr__subtitle{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-fr__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.cb-fr__levels{display:inline-flex;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-fr__level,.cb-fr__toggle{border:0;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);cursor:pointer}.cb-fr__level{min-width:2rem;height:1.85rem;border-radius:var(--cb-radius-sm, 4px);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-fr__level[aria-pressed=true]{background:var(--cb-color-bg);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgb(0 0 0 / .08));color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-fr__toggle{display:inline-flex;align-items:center;gap:.35rem;height:2rem;padding:0 .6rem;border-radius:var(--cb-radius-md);color:var(--cb-color-text-muted)}.cb-fr__toggle[aria-pressed=true]{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent);color:var(--cb-color-text)}:is(.cb-fr__level,.cb-fr__toggle):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-fr__spacer{flex:1}:host ::ng-deep .cb-fr__class>td{background:var(--cb-color-surface-subtle)}:host ::ng-deep .cb-fr__total>td{border-top:2px solid var(--cb-color-border-strong);background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CbTreeTable), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], accounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "accounts", required: false }] }], balances: [{ type: i0.Input, args: [{ isSignal: true, alias: "balances", required: false }] }], periods: [{ type: i0.Input, args: [{ isSignal: true, alias: "periods", required: false }] }], comparative: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparative", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], signByNature: [{ type: i0.Input, args: [{ isSignal: true, alias: "signByNature", required: false }] }], totals: [{ type: i0.Input, args: [{ isSignal: true, alias: "totals", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }, { type: i0.Output, args: ["levelChange"] }], hideZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideZero", required: false }] }, { type: i0.Output, args: ["hideZeroChange"] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], negativeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "negativeStyle", required: false }] }], accountOpen: [{ type: i0.Output, args: ["accountOpen"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/financial-report
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbFinancialReport };

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

@@ -3,7 +3,7 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Float-menu de Caribe Design: menú flotante en forma de píldora con opciones
+ * Float-menu: menú flotante en forma de píldora con opciones
  * seleccionables (segmentado horizontal).
  *
  * @example
@@ -28,39 +28,39 @@ class CbFloatMenu {
         this.select = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFloatMenu, isStandalone: true, selector: "cb-float-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "cb-float-menu-host" }, ngImport: i0, template: `
-    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
-      @for (item of items(); track item.id) {
-        <button
-          type="button"
-          class="cb-float-menu__item"
-          [class.cb-float-menu__item--active]="activeId() === item.id"
-          [attr.aria-current]="activeId() === item.id || null"
-          (click)="select.emit(item)"
-        >
-          {{ item.label }}
-        </button>
-      }
-    </nav>
-  `, isInline: true, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-float-menu__item: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-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFloatMenu, isStandalone: true, selector: "cb-float-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "cb-float-menu-host" }, ngImport: i0, template: `
+    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="cb-float-menu__item"
+          [class.cb-float-menu__item--active]="activeId() === item.id"
+          [attr.aria-current]="activeId() === item.id || null"
+          (click)="select.emit(item)"
+        >
+          {{ item.label }}
+        </button>
+      }
+    </nav>
+  `, isInline: true, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:#fff;background-color:var(--cb-color-primary-700, #047857)}.cb-float-menu__item: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-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--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: CbFloatMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-float-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-float-menu-host' }, template: `
-    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
-      @for (item of items(); track item.id) {
-        <button
-          type="button"
-          class="cb-float-menu__item"
-          [class.cb-float-menu__item--active]="activeId() === item.id"
-          [attr.aria-current]="activeId() === item.id || null"
-          (click)="select.emit(item)"
-        >
-          {{ item.label }}
-        </button>
-      }
-    </nav>
-  `, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-float-menu__item: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-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
+            args: [{ selector: 'cb-float-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-float-menu-host' }, template: `
+    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="cb-float-menu__item"
+          [class.cb-float-menu__item--active]="activeId() === item.id"
+          [attr.aria-current]="activeId() === item.id || null"
+          (click)="select.emit(item)"
+        >
+          {{ item.label }}
+        </button>
+      }
+    </nav>
+  `, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:#fff;background-color:var(--cb-color-primary-700, #047857)}.cb-float-menu__item: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-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 /**

package/fesm2022/caribeng-ui-floatlabel.mjs

@@ -32,7 +32,7 @@ class CbFloatLabel {
         this.filled.set(Boolean(inputEl && inputEl.value.trim().length > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbFloatLabel, isStandalone: true, selector: "cb-float-label", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "input": "checkFilled()", "change": "checkFilled()" }, properties: { "class.cb-float-label--over": "variant() === \"over\"", "class.cb-float-label--in": "variant() === \"in\"", "class.cb-float-label--on": "variant() === \"on\"", "class.cb-is-active": "focused() || filled()" }, classAttribute: "cb-float-label" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-500)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbFloatLabel, isStandalone: true, selector: "cb-float-label", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "input": "checkFilled()", "change": "checkFilled()" }, properties: { "class.cb-float-label--over": "variant() === \"over\"", "class.cb-float-label--in": "variant() === \"in\"", "class.cb-float-label--on": "variant() === \"on\"", "class.cb-is-active": "focused() || filled()" }, classAttribute: "cb-float-label" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-text)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatLabel, decorators: [{
             type: Component,
@@ -46,7 +46,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(focusout)': 'onFocusOut()',
                         '(input)': 'checkFilled()',
                         '(change)': 'checkFilled()',
-                    }, template: `<ng-content />`, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-500)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"] }]
+                    }, template: `<ng-content />`, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-text)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 /**