@caribeng/ui 22.4.0 → 22.6.0

package/fesm2022/caribeng-ui-kpi.mjs

@@ -0,0 +1,189 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat, CB_CONFIG, cbFormatAmount } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+let nextUid = 0;
+/**
+ * Indicador (KPI) de CaribeNG: valor, variación frente al periodo anterior,
+ * minigráfica de tendencia y avance hacia una meta.
+ *
+ * - `better` dice si subir es bueno (`up`, ingresos) o malo (`down`, gastos): el
+ *   color de la variación lo sigue.
+ * - La variación se calcula sola a partir de `previous` y se dice con texto
+ *   («sube 12,3 %»), no solo con el color o la flecha.
+ *
+ * @example
+ * ```html
+ * <cb-kpi label="Ingresos del mes" [value]="208330000" [previous]="167440000" [series]="ventas" compareLabel="vs. octubre 2025" />
+ * ```
+ */
+class CbKpi {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.Math = Math;
+        this.config = inject(CB_CONFIG);
+        this.uid = `cb-kpi-${++nextUid}`;
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.value = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Valor del periodo con el que se compara. */
+        this.previous = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previous" }] : /* istanbul ignore next */ []));
+        /** Texto de la comparación («vs. mes anterior»). */
+        this.compareLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "compareLabel" }] : /* istanbul ignore next */ []));
+        /** `up`: subir es bueno (ingresos); `down`: subir es malo (gastos); `none`: sin color. */
+        this.better = input('up', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "better" }] : /* istanbul ignore next */ []));
+        this.format_ = input('currency', { ...(ngDevMode ? { debugName: "format_" } : /* istanbul ignore next */ {}), alias: 'format' });
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        this.decimals = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
+        /** Serie para la minigráfica (del más antiguo al más reciente). */
+        this.series = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+        /** Meta: muestra el avance del valor hacia ella. */
+        this.target = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        this.locale = computed(() => this.config.numberLocale ?? this.t().intlLocale, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.delta = computed(() => {
+            const v = this.value();
+            const p = this.previous();
+            if (v === null || p === null)
+                return null;
+            const change = p === 0 ? (v === 0 ? 0 : null) : (v - p) / Math.abs(p);
+            if (change === null)
+                return null;
+            const pct = new Intl.NumberFormat(this.locale(), { style: 'percent', maximumFractionDigits: 1 }).format(Math.abs(change));
+            const t = this.t();
+            const better = this.better();
+            const good = change === 0 || better === 'none' ? null : (change > 0) === (better === 'up');
+            return {
+                change,
+                good,
+                text: `${change > 0 ? '+' : change < 0 ? '−' : ''}${pct}`,
+                spoken: change === 0 ? t.kpiSame : cbFormat(change > 0 ? t.kpiUp : t.kpiDown, pct),
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
+        this.points = computed(() => {
+            const s = this.series();
+            if (s.length < 2)
+                return null;
+            const min = Math.min(...s);
+            const max = Math.max(...s);
+            const span = max - min || 1;
+            const xy = s.map((v, i) => [(i / (s.length - 1)) * 100, 30 - ((v - min) / span) * 28]);
+            const line = xy.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');
+            return { line, area: `${line} L100,32 L0,32 Z` };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
+        this.sparkLabel = computed(() => {
+            const s = this.series();
+            return s.length ? cbFormat(this.t().kpiTrend, this.format(s[0]), this.format(s[s.length - 1]), s.length) : '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sparkLabel" }] : /* istanbul ignore next */ []));
+        this.progress = computed(() => {
+            const v = this.value();
+            const g = this.target();
+            if (v === null || !g)
+                return null;
+            return { pct: Math.round((v / g) * 100) };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    }
+    format(v) {
+        if (v === null)
+            return '—';
+        const locale = this.locale();
+        switch (this.format_()) {
+            case 'percent':
+                return new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: this.decimals() ?? 1 }).format(v);
+            case 'integer':
+                return cbFormatAmount(v, locale, { decimals: 0 });
+            case 'number':
+                return cbFormatAmount(v, locale, { decimals: this.decimals() });
+            default:
+                return cbFormatAmount(v, locale, { currency: this.currency() ?? this.config.currency ?? null, decimals: this.decimals() ?? 0 });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKpi, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbKpi, isStandalone: true, selector: "cb-kpi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, compareLabel: { classPropertyName: "compareLabel", publicName: "compareLabel", isSignal: true, isRequired: false, transformFunction: null }, better: { classPropertyName: "better", publicName: "better", isSignal: true, isRequired: false, transformFunction: null }, format_: { classPropertyName: "format_", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "uid + \"-label\"" }, classAttribute: "cb-kpi" }, ngImport: i0, template: `
+    <div class="cb-kpi__head">
+      <span class="cb-kpi__label" [id]="uid + '-label'">{{ label() }}</span>
+      @if (delta(); as d) {
+        <span class="cb-kpi__delta" [class.cb-kpi__delta--good]="d.good === true" [class.cb-kpi__delta--bad]="d.good === false">
+          <cb-icon [name]="d.change > 0 ? 'trending-up' : d.change < 0 ? 'trending-down' : 'minus'" [size]="14" aria-hidden="true" />
+          <span aria-hidden="true">{{ d.text }}</span>
+          <span class="cb-kpi__sr">{{ d.spoken }}</span>
+        </span>
+      }
+    </div>
+    <div class="cb-kpi__value">{{ format(value()) }}</div>
+    @if (previous() !== null) {
+      <div class="cb-kpi__compare">{{ compareLabel() || t().kpiPrevious }}: {{ format(previous()) }}</div>
+    }
+    @if (points(); as p) {
+      <svg class="cb-kpi__spark" viewBox="0 0 100 32" preserveAspectRatio="none" role="img" [attr.aria-label]="sparkLabel()">
+        <path class="cb-kpi__area" [attr.d]="p.area" />
+        <path class="cb-kpi__line" [attr.d]="p.line" vector-effect="non-scaling-stroke" />
+      </svg>
+    }
+    @if (progress(); as g) {
+      <div class="cb-kpi__goal">
+        <div class="cb-kpi__bar" role="progressbar" [attr.aria-valuenow]="g.pct" aria-valuemin="0" aria-valuemax="100" [attr.aria-label]="t().kpiGoal">
+          <span [style.width.%]="Math.min(100, g.pct)"></span>
+        </div>
+        <span class="cb-kpi__goal-text">{{ fmt(t().kpiOfGoal, g.pct, format(target())) }}</span>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:grid;gap:.35rem;min-width:0;padding:1rem 1.1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised, var(--cb-color-bg));color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-kpi__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-kpi__label{color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-kpi__delta{display:inline-flex;align-items:center;gap:.2rem;padding:.1rem .45rem;border-radius:999px;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600);white-space:nowrap}.cb-kpi__delta--good{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 14%,transparent);color:var(--cb-color-success-text, #047857)}.cb-kpi__delta--bad{background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 12%,transparent);color:var(--cb-color-danger-text, #b91c1c)}.cb-kpi__value{overflow:hidden;font-size:var(--cb-text-2xl, 1.5rem);font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-bold, 700);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}.cb-kpi__compare{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums}.cb-kpi__spark{width:100%;height:2.25rem;margin-top:.25rem;overflow:visible}.cb-kpi__line{fill:none;stroke:var(--cb-color-primary-500);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.cb-kpi__area{fill:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-kpi__goal{display:grid;gap:.25rem;margin-top:.25rem}.cb-kpi__bar{height:.4rem;overflow:hidden;border-radius:999px;background:var(--cb-color-surface-subtle)}.cb-kpi__bar span{display:block;height:100%;border-radius:inherit;background:var(--cb-color-primary-500)}.cb-kpi__goal-text{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-kpi__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: 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: CbKpi, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-kpi', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-kpi', role: 'group', '[attr.aria-labelledby]': 'uid + "-label"' }, template: `
+    <div class="cb-kpi__head">
+      <span class="cb-kpi__label" [id]="uid + '-label'">{{ label() }}</span>
+      @if (delta(); as d) {
+        <span class="cb-kpi__delta" [class.cb-kpi__delta--good]="d.good === true" [class.cb-kpi__delta--bad]="d.good === false">
+          <cb-icon [name]="d.change > 0 ? 'trending-up' : d.change < 0 ? 'trending-down' : 'minus'" [size]="14" aria-hidden="true" />
+          <span aria-hidden="true">{{ d.text }}</span>
+          <span class="cb-kpi__sr">{{ d.spoken }}</span>
+        </span>
+      }
+    </div>
+    <div class="cb-kpi__value">{{ format(value()) }}</div>
+    @if (previous() !== null) {
+      <div class="cb-kpi__compare">{{ compareLabel() || t().kpiPrevious }}: {{ format(previous()) }}</div>
+    }
+    @if (points(); as p) {
+      <svg class="cb-kpi__spark" viewBox="0 0 100 32" preserveAspectRatio="none" role="img" [attr.aria-label]="sparkLabel()">
+        <path class="cb-kpi__area" [attr.d]="p.area" />
+        <path class="cb-kpi__line" [attr.d]="p.line" vector-effect="non-scaling-stroke" />
+      </svg>
+    }
+    @if (progress(); as g) {
+      <div class="cb-kpi__goal">
+        <div class="cb-kpi__bar" role="progressbar" [attr.aria-valuenow]="g.pct" aria-valuemin="0" aria-valuemax="100" [attr.aria-label]="t().kpiGoal">
+          <span [style.width.%]="Math.min(100, g.pct)"></span>
+        </div>
+        <span class="cb-kpi__goal-text">{{ fmt(t().kpiOfGoal, g.pct, format(target())) }}</span>
+      </div>
+    }
+  `, styles: [":host{display:grid;gap:.35rem;min-width:0;padding:1rem 1.1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised, var(--cb-color-bg));color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-kpi__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-kpi__label{color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-kpi__delta{display:inline-flex;align-items:center;gap:.2rem;padding:.1rem .45rem;border-radius:999px;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600);white-space:nowrap}.cb-kpi__delta--good{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 14%,transparent);color:var(--cb-color-success-text, #047857)}.cb-kpi__delta--bad{background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 12%,transparent);color:var(--cb-color-danger-text, #b91c1c)}.cb-kpi__value{overflow:hidden;font-size:var(--cb-text-2xl, 1.5rem);font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-bold, 700);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}.cb-kpi__compare{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums}.cb-kpi__spark{width:100%;height:2.25rem;margin-top:.25rem;overflow:visible}.cb-kpi__line{fill:none;stroke:var(--cb-color-primary-500);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.cb-kpi__area{fill:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-kpi__goal{display:grid;gap:.25rem;margin-top:.25rem}.cb-kpi__bar{height:.4rem;overflow:hidden;border-radius:999px;background:var(--cb-color-surface-subtle)}.cb-kpi__bar span{display:block;height:100%;border-radius:inherit;background:var(--cb-color-primary-500)}.cb-kpi__goal-text{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-kpi__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], previous: [{ type: i0.Input, args: [{ isSignal: true, alias: "previous", required: false }] }], compareLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareLabel", required: false }] }], better: [{ type: i0.Input, args: [{ isSignal: true, alias: "better", required: false }] }], format_: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/kpi
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbKpi };

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

@@ -3,7 +3,7 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Enlace de Caribe Design. Renderiza un ancla accesible con estilos de marca,
+ * Enlace. Renderiza un ancla accesible con estilos de marca,
  * soporte de enlaces externos y estado deshabilitado.
  *
  * @example
@@ -30,45 +30,45 @@ class CbLink {
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbLink, isStandalone: true, selector: "cb-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-link-host" }, ngImport: i0, template: `
-    <a
-      class="cb-link"
-      [class.cb-is-disabled]="disabled()"
-      [attr.href]="disabled() ? null : href()"
-      [attr.target]="external() ? '_blank' : null"
-      [attr.rel]="external() ? 'noopener noreferrer' : null"
-      [attr.tabindex]="disabled() ? -1 : 0"
-      [attr.aria-disabled]="disabled() || null"
-      role="link"
-    >
-      <span class="cb-link__label">{{ label() }}<ng-content /></span>
-      @if (external()) {
-        <span class="cb-link__external" aria-hidden="true">↗</span>
-        <span class="cb-link__sr">{{ t().opensInNewTab }}</span>
-      }
-    </a>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-600, #047857);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}.cb-link__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbLink, isStandalone: true, selector: "cb-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-link-host" }, ngImport: i0, template: `
+    <a
+      class="cb-link"
+      [class.cb-is-disabled]="disabled()"
+      [attr.href]="disabled() ? null : href()"
+      [attr.target]="external() ? '_blank' : null"
+      [attr.rel]="external() ? 'noopener noreferrer' : null"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      [attr.aria-disabled]="disabled() || null"
+      role="link"
+    >
+      <span class="cb-link__label">{{ label() }}<ng-content /></span>
+      @if (external()) {
+        <span class="cb-link__external" aria-hidden="true">↗</span>
+        <span class="cb-link__sr">{{ t().opensInNewTab }}</span>
+      }
+    </a>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-text);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}.cb-link__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbLink, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-link', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-link-host' }, template: `
-    <a
-      class="cb-link"
-      [class.cb-is-disabled]="disabled()"
-      [attr.href]="disabled() ? null : href()"
-      [attr.target]="external() ? '_blank' : null"
-      [attr.rel]="external() ? 'noopener noreferrer' : null"
-      [attr.tabindex]="disabled() ? -1 : 0"
-      [attr.aria-disabled]="disabled() || null"
-      role="link"
-    >
-      <span class="cb-link__label">{{ label() }}<ng-content /></span>
-      @if (external()) {
-        <span class="cb-link__external" aria-hidden="true">↗</span>
-        <span class="cb-link__sr">{{ t().opensInNewTab }}</span>
-      }
-    </a>
-  `, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-600, #047857);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}.cb-link__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+            args: [{ selector: 'cb-link', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-link-host' }, template: `
+    <a
+      class="cb-link"
+      [class.cb-is-disabled]="disabled()"
+      [attr.href]="disabled() ? null : href()"
+      [attr.target]="external() ? '_blank' : null"
+      [attr.rel]="external() ? 'noopener noreferrer' : null"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      [attr.aria-disabled]="disabled() || null"
+      role="link"
+    >
+      <span class="cb-link__label">{{ label() }}<ng-content /></span>
+      @if (external()) {
+        <span class="cb-link__external" aria-hidden="true">↗</span>
+        <span class="cb-link__sr">{{ t().opensInNewTab }}</span>
+      }
+    </a>
+  `, styles: [":host{display:inline-flex;align-items:center}.cb-link{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);line-height:var(--cb-line-height-normal, 1.5);color:var(--cb-color-primary-text);text-decoration:none;cursor:pointer;border-radius:var(--cb-radius-sm, .25rem);transition:color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-link__label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.cb-link:hover{color:var(--cb-color-primary-700, #065f46)}.cb-link:active{color:var(--cb-color-primary-800, #064e3b)}.cb-link:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-link__external{font-size:.85em;line-height:1}.cb-link.cb-is-disabled{color:var(--cb-color-text-muted, #94a3b8);pointer-events:none;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-link{color:var(--cb-color-primary-400, #34d399)}:host-context([data-theme=\"dark\"]) .cb-link:hover{color:var(--cb-color-primary-300, #6ee7b7)}.cb-link__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**

package/fesm2022/caribeng-ui-masonry.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, numberAttribute, DestroyRef, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/** Alto de cada fila de la rejilla (px): cuanto menor, más exacto el ajuste de alturas. */
+const ROW = 4;
+/** Filas que ocupa un elemento de `height` px con un hueco de `gap` px debajo. */
+function masonrySpan(height, gap, row = ROW) {
+    return Math.max(1, Math.ceil((height + gap) / row));
+}
+/**
+ * Masonry de CaribeNG: reparte los elementos proyectados en columnas de alturas distintas, sin
+ * huecos, como un tablero de Pinterest. Usa CSS Grid y mide la altura de cada elemento (también
+ * si cambia, p. ej. al cargar una imagen), así que el orden del DOM —el que siguen el teclado y
+ * los lectores de pantalla— es el orden visual por filas, a diferencia de las columnas de CSS.
+ *
+ * @example
+ * ```html
+ * <cb-masonry minColumnWidth="14rem" gap="12px" role="list">
+ *   @for (foto of fotos(); track foto.id) { <figure role="listitem">…</figure> }
+ * </cb-masonry>
+ * ```
+ */
+class CbMasonry {
+    constructor() {
+        this.host = inject(ElementRef);
+        /** Número fijo de columnas (0 = las que quepan con `minColumnWidth`). */
+        this.columns = input(0, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Ancho mínimo de columna cuando `columns` es 0. */
+        this.minColumnWidth = input('16rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : /* istanbul ignore next */ []));
+        /** Separación entre elementos (cualquier longitud CSS). */
+        this.gap = input('16px', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const host = this.host.nativeElement;
+            const layout = () => {
+                const gap = parseFloat(getComputedStyle(host).columnGap) || 0;
+                for (const child of Array.from(host.children)) {
+                    const span = `span ${masonrySpan(child.getBoundingClientRect().height, gap)}`;
+                    if (child.style.gridRowEnd !== span)
+                        child.style.gridRowEnd = span;
+                }
+            };
+            let frame = 0;
+            const schedule = () => {
+                cancelAnimationFrame(frame);
+                frame = requestAnimationFrame(layout);
+            };
+            layout();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            // Cambia el alto de un elemento (imágenes que cargan, texto que se adapta) o el ancho de las
+            // columnas (también al cambiar `gap`, `columns` o `minColumnWidth`).
+            const resize = new ResizeObserver(schedule);
+            resize.observe(host);
+            const watch = (el) => resize.observe(el);
+            Array.from(host.children).forEach(watch);
+            // Elementos que llegan o se van (p. ej. con scroll infinito).
+            const mutations = new MutationObserver((records) => {
+                for (const r of records)
+                    r.addedNodes.forEach((n) => n instanceof Element && watch(n));
+                schedule();
+            });
+            mutations.observe(host, { childList: true });
+            destroyRef.onDestroy(() => {
+                cancelAnimationFrame(frame);
+                resize.disconnect();
+                mutations.disconnect();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMasonry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbMasonry, isStandalone: true, selector: "cb-masonry", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--cb-masonry-gap": "gap()", "style.--cb-masonry-columns": "columns() > 0 ? \"repeat(\" + columns() + \", minmax(0, 1fr))\" : \"repeat(auto-fill, minmax(min(\" + minColumnWidth() + \", 100%), 1fr))\"" }, classAttribute: "cb-masonry" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-masonry{display:grid;grid-template-columns:var(--cb-masonry-columns);grid-auto-rows:4px;column-gap:var(--cb-masonry-gap);grid-auto-flow:row;align-items:start;margin:0;padding:0;list-style:none}.cb-masonry>*{align-self:start;min-width:0;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMasonry, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-masonry', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cb-masonry',
+                        '[style.--cb-masonry-gap]': 'gap()',
+                        '[style.--cb-masonry-columns]': 'columns() > 0 ? "repeat(" + columns() + ", minmax(0, 1fr))" : "repeat(auto-fill, minmax(min(" + minColumnWidth() + ", 100%), 1fr))"',
+                    }, template: `<ng-content />`, styles: [".cb-masonry{display:grid;grid-template-columns:var(--cb-masonry-columns);grid-auto-rows:4px;column-gap:var(--cb-masonry-gap);grid-auto-flow:row;align-items:start;margin:0;padding:0;list-style:none}.cb-masonry>*{align-self:start;min-width:0;margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/masonry
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbMasonry, masonrySpan as cbMasonrySpan };