@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-splitbutton.mjs

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, viewChild, input, booleanAttribute, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbMenu } from '@caribeng/ui/menu';
+
+/**
+ * SplitButton de CaribeNG: una acción principal y un menú con acciones
+ * secundarias ("Guardar ▾"). La flecha abre el menú (también con Flecha abajo)
+ * y anuncia `aria-haspopup="menu"` / `aria-expanded`.
+ *
+ * @example
+ * ```html
+ * <cb-split-button label="Guardar" icon="check" [items]="masOpciones"
+ *                  (primaryClick)="guardar()" (itemSelect)="onOpcion($event)" />
+ * ```
+ */
+class CbSplitButton {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.menu = viewChild.required('menu');
+        /** Texto de la acción principal (también nombra el grupo). */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Icono de la acción principal. */
+        this.icon = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Acciones secundarias del menú. */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.severity = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        this.variant = input('solid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nombre del botón de la flecha y del menú. Por defecto, "Más acciones" del idioma activo. */
+        this.menuAriaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Clic en la acción principal. */
+        this.primaryClick = output();
+        /** Acción secundaria elegida en el menú. */
+        this.itemSelect = output();
+        this.open = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    }
+    /** Abre o cierra el menú anclado (y devuelve el foco) al botón real de la flecha. */
+    toggleMenu() {
+        const menu = this.menu();
+        if (menu.isOpen) {
+            menu.hide();
+            return;
+        }
+        const trigger = this.host.nativeElement.querySelector('.cb-split-button__toggle button');
+        if (!trigger)
+            return;
+        menu.show(trigger);
+        this.open.set(true);
+    }
+    openFromKeyboard(event) {
+        event.preventDefault();
+        if (!this.menu().isOpen)
+            this.toggleMenu();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSplitButton, isStandalone: true, selector: "cb-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", itemSelect: "itemSelect" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label() || null", "class.cb-split-button--outlined": "variant() === 'outlined'" }, classAttribute: "cb-split-button" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <cb-button
+      class="cb-split-button__main"
+      [severity]="severity()"
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [loading]="loading()"
+      (click)="primaryClick.emit($event)"
+    >
+      @if (icon()) {
+        <cb-icon [name]="icon()!" [size]="16" aria-hidden="true" />
+      }
+      {{ label() }}<ng-content />
+    </cb-button>
+    <cb-button
+      class="cb-split-button__toggle"
+      [severity]="severity()"
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [ariaLabel]="menuAriaLabel() ?? t().moreActions"
+      ariaHaspopup="menu"
+      [ariaExpanded]="open()"
+      (click)="toggleMenu()"
+      (keydown.arrowdown)="openFromKeyboard($event)"
+    >
+      <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
+    </cb-button>
+    <cb-menu
+      #menu
+      [items]="items()"
+      [ariaLabel]="menuAriaLabel() ?? t().moreActions"
+      (itemSelect)="itemSelect.emit($event)"
+      (hidden)="open.set(false)"
+    />
+  `, isInline: true, styles: [".cb-split-button{display:inline-flex;align-items:stretch}.cb-split-button .cb-split-button__main .cb-button{border-top-right-radius:0;border-bottom-right-radius:0}.cb-split-button .cb-split-button__toggle .cb-button{padding-inline:var(--cb-space-2);border-top-left-radius:0;border-bottom-left-radius:0}.cb-split-button .cb-split-button__toggle{margin-left:1px}.cb-split-button.cb-split-button--outlined .cb-split-button__toggle{margin-left:-1px}\n"], dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbMenu, selector: "cb-menu", inputs: ["items", "ariaLabel"], outputs: ["itemSelect", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSplitButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CbButton, CbIcon, CbMenu], host: {
+                        class: 'cb-split-button',
+                        role: 'group',
+                        '[attr.aria-label]': 'label() || null',
+                        '[class.cb-split-button--outlined]': "variant() === 'outlined'",
+                    }, template: `
+    <cb-button
+      class="cb-split-button__main"
+      [severity]="severity()"
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [loading]="loading()"
+      (click)="primaryClick.emit($event)"
+    >
+      @if (icon()) {
+        <cb-icon [name]="icon()!" [size]="16" aria-hidden="true" />
+      }
+      {{ label() }}<ng-content />
+    </cb-button>
+    <cb-button
+      class="cb-split-button__toggle"
+      [severity]="severity()"
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [ariaLabel]="menuAriaLabel() ?? t().moreActions"
+      ariaHaspopup="menu"
+      [ariaExpanded]="open()"
+      (click)="toggleMenu()"
+      (keydown.arrowdown)="openFromKeyboard($event)"
+    >
+      <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
+    </cb-button>
+    <cb-menu
+      #menu
+      [items]="items()"
+      [ariaLabel]="menuAriaLabel() ?? t().moreActions"
+      (itemSelect)="itemSelect.emit($event)"
+      (hidden)="open.set(false)"
+    />
+  `, styles: [".cb-split-button{display:inline-flex;align-items:stretch}.cb-split-button .cb-split-button__main .cb-button{border-top-right-radius:0;border-bottom-right-radius:0}.cb-split-button .cb-split-button__toggle .cb-button{padding-inline:var(--cb-space-2);border-top-left-radius:0;border-bottom-left-radius:0}.cb-split-button .cb-split-button__toggle{margin-left:1px}.cb-split-button.cb-split-button--outlined .cb-split-button__toggle{margin-left:-1px}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], primaryClick: [{ type: i0.Output, args: ["primaryClick"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/splitbutton
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbSplitButton };

package/fesm2022/caribeng-ui-splitter.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, output, contentChildren, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 let nextSplitterPanelUid = 0;
 /**
@@ -16,6 +17,8 @@ let nextSplitterPanelUid = 0;
  */
 class CbSplitter {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.Math = Math;
         this.hostRef = inject(ElementRef);
         /** Orientación de la división: `'horizontal'` (lado a lado) o `'vertical'` (apilados). */
@@ -144,7 +147,7 @@ class CbSplitter {
         [attr.aria-valuenow]="Math.round(effectiveSizes()[idx])"
         [attr.aria-valuemin]="panelMinSize(idx)"
         [attr.aria-valuemax]="100 - panelMinSize(idx + 1)"
-        aria-label="Redimensionar paneles"
+        [attr.aria-label]="t().resizePanels"
         (pointerdown)="onGutterPointerDown($event, idx)"
         (keydown)="onGutterKeydown($event, idx)"
       >
@@ -172,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [attr.aria-valuenow]="Math.round(effectiveSizes()[idx])"
         [attr.aria-valuemin]="panelMinSize(idx)"
         [attr.aria-valuemax]="100 - panelMinSize(idx + 1)"
-        aria-label="Redimensionar paneles"
+        [attr.aria-label]="t().resizePanels"
         (pointerdown)="onGutterPointerDown($event, idx)"
         (keydown)="onGutterKeydown($event, idx)"
       >

package/fesm2022/caribeng-ui-statistic.mjs

@@ -0,0 +1,183 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output, signal, inject, DestroyRef, effect } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/**
+ * Statistic de CaribeNG: cifra destacada para dashboards, con título, prefijo,
+ * sufijo, formato con `Intl.NumberFormat` y tendencia opcional.
+ *
+ * @example
+ * ```html
+ * <cb-statistic title="Saldo disponible" [value]="12450000" locale="es-CO"
+ *               [format]="{ style: 'currency', currency: 'COP', maximumFractionDigits: 0 }" />
+ * <cb-statistic title="Gastos del mes" [value]="8.4" suffix="%" trend="down" trendLabel="vs. septiembre" />
+ * ```
+ */
+class CbStatistic {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.value = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.prefix = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.suffix = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+        /** Opciones de `Intl.NumberFormat` (moneda, porcentaje, decimales…). */
+        this.format = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Locale BCP 47 del formato (por defecto, el del navegador). */
+        this.locale = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Tendencia: añade flecha, color y el texto "aumenta" / "disminuye". */
+        this.trend = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+        /** Texto junto a la tendencia (p. ej. "+12 % vs. septiembre"). */
+        this.trendLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trendLabel" }] : /* istanbul ignore next */ []));
+        this.formatted = computed(() => {
+            const v = this.value();
+            if (v === null || v === '')
+                return '—';
+            return typeof v === 'number' ? new Intl.NumberFormat(this.locale(), this.format()).format(v) : v;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStatistic, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbStatistic, isStandalone: true, selector: "cb-statistic", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-statistic" }, ngImport: i0, template: `
+    @if (title()) {
+      <span class="cb-statistic__title">{{ title() }}</span>
+    }
+    <span class="cb-statistic__value">
+      @if (prefix()) {
+        <span class="cb-statistic__affix">{{ prefix() }}</span>
+      }
+      <span class="cb-statistic__number">{{ formatted() }}</span>
+      @if (suffix()) {
+        <span class="cb-statistic__affix">{{ suffix() }}</span>
+      }
+    </span>
+    @if (trend()) {
+      <span class="cb-statistic__trend" [class.cb-statistic__trend--up]="trend() === 'up'" [class.cb-statistic__trend--down]="trend() === 'down'">
+        <cb-icon [name]="trend() === 'up' ? 'trending-up' : 'trending-down'" [size]="14" aria-hidden="true" />
+        <!-- El color y la flecha no bastan: el sentido también se dice con texto. -->
+        <span class="cb-statistic__sr">{{ trend() === 'up' ? t().trendUp : t().trendDown }}</span>
+        @if (trendLabel()) {
+          <span>{{ trendLabel() }}</span>
+        }
+      </span>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;gap:.2rem;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-statistic__title{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-statistic__value{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--cb-color-text-strong)}.cb-statistic__number{font-size:var(--cb-text-2xl, 1.5rem);font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums;line-height:1.2}.cb-statistic__affix{font-size:var(--cb-text-base, 1rem);color:var(--cb-color-text-muted)}.cb-statistic__trend{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-statistic__trend--up{color:var(--cb-color-success-600, #059669)}.cb-statistic__trend--down{color:var(--cb-color-danger-600, #dc2626)}.cb-statistic__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"], 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: CbStatistic, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-statistic', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-statistic' }, template: `
+    @if (title()) {
+      <span class="cb-statistic__title">{{ title() }}</span>
+    }
+    <span class="cb-statistic__value">
+      @if (prefix()) {
+        <span class="cb-statistic__affix">{{ prefix() }}</span>
+      }
+      <span class="cb-statistic__number">{{ formatted() }}</span>
+      @if (suffix()) {
+        <span class="cb-statistic__affix">{{ suffix() }}</span>
+      }
+    </span>
+    @if (trend()) {
+      <span class="cb-statistic__trend" [class.cb-statistic__trend--up]="trend() === 'up'" [class.cb-statistic__trend--down]="trend() === 'down'">
+        <cb-icon [name]="trend() === 'up' ? 'trending-up' : 'trending-down'" [size]="14" aria-hidden="true" />
+        <!-- El color y la flecha no bastan: el sentido también se dice con texto. -->
+        <span class="cb-statistic__sr">{{ trend() === 'up' ? t().trendUp : t().trendDown }}</span>
+        @if (trendLabel()) {
+          <span>{{ trendLabel() }}</span>
+        }
+      </span>
+    }
+  `, styles: [":host{display:inline-flex;flex-direction:column;gap:.2rem;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-statistic__title{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-statistic__value{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--cb-color-text-strong)}.cb-statistic__number{font-size:var(--cb-text-2xl, 1.5rem);font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums;line-height:1.2}.cb-statistic__affix{font-size:var(--cb-text-base, 1rem);color:var(--cb-color-text-muted)}.cb-statistic__trend{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-statistic__trend--up{color:var(--cb-color-success-600, #059669)}.cb-statistic__trend--down{color:var(--cb-color-danger-600, #dc2626)}.cb-statistic__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: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }] } });
+/**
+ * Countdown de CaribeNG: cuenta regresiva hasta una fecha (vencimientos,
+ * códigos OTP, ofertas). Emite `finished` al llegar a cero.
+ *
+ * @example
+ * ```html
+ * <cb-countdown title="Tu código vence en" [target]="vence" (finished)="pedirOtro()" />
+ * ```
+ */
+class CbCountdown {
+    constructor() {
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Momento final (fecha o milisegundos desde 1970). */
+        this.target = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        /** Mostrar los días aunque sean 0. Por defecto solo cuando quedan días. */
+        this.showDays = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDays" }] : /* istanbul ignore next */ []));
+        /** Se emite una vez al llegar a cero. */
+        this.finished = output();
+        this.now = signal(Date.now(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+        this.finishedFor = null;
+        /** Milisegundos restantes (nunca negativos). */
+        this.remaining = computed(() => Math.max(0, +this.target() - this.now()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => {
+            const total = Math.floor(this.remaining() / 1000);
+            const days = Math.floor(total / 86400);
+            const hh = pad(Math.floor((total % 86400) / 3600));
+            const mm = pad(Math.floor((total % 3600) / 60));
+            const ss = pad(total % 60);
+            return days > 0 || this.showDays() ? `${days}d ${hh}:${mm}:${ss}` : `${hh}:${mm}:${ss}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        const timer = setInterval(() => this.now.set(Date.now()), 1000);
+        inject(DestroyRef).onDestroy(() => clearInterval(timer));
+        effect(() => {
+            const target = +this.target();
+            if (this.remaining() === 0 && this.finishedFor !== target) {
+                this.finishedFor = target;
+                this.finished.emit();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCountdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCountdown, isStandalone: true, selector: "cb-countdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, showDays: { classPropertyName: "showDays", publicName: "showDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished" }, host: { classAttribute: "cb-statistic cb-countdown" }, ngImport: i0, template: `
+    @if (title()) {
+      <span class="cb-statistic__title">{{ title() }}</span>
+    }
+    <!-- role="timer": los lectores no anuncian cada segundo, pero el valor se puede consultar. -->
+    <span class="cb-statistic__value" role="timer" [attr.aria-label]="title() || null">
+      <span class="cb-statistic__number">{{ display() }}</span>
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;gap:.2rem;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-statistic__title{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-statistic__value{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--cb-color-text-strong)}.cb-statistic__number{font-size:var(--cb-text-2xl, 1.5rem);font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums;line-height:1.2}.cb-statistic__affix{font-size:var(--cb-text-base, 1rem);color:var(--cb-color-text-muted)}.cb-statistic__trend{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-statistic__trend--up{color:var(--cb-color-success-600, #059669)}.cb-statistic__trend--down{color:var(--cb-color-danger-600, #dc2626)}.cb-statistic__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: CbCountdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-countdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-statistic cb-countdown' }, template: `
+    @if (title()) {
+      <span class="cb-statistic__title">{{ title() }}</span>
+    }
+    <!-- role="timer": los lectores no anuncian cada segundo, pero el valor se puede consultar. -->
+    <span class="cb-statistic__value" role="timer" [attr.aria-label]="title() || null">
+      <span class="cb-statistic__number">{{ display() }}</span>
+    </span>
+  `, styles: [":host{display:inline-flex;flex-direction:column;gap:.2rem;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}.cb-statistic__title{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-statistic__value{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--cb-color-text-strong)}.cb-statistic__number{font-size:var(--cb-text-2xl, 1.5rem);font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums;line-height:1.2}.cb-statistic__affix{font-size:var(--cb-text-base, 1rem);color:var(--cb-color-text-muted)}.cb-statistic__trend{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-statistic__trend--up{color:var(--cb-color-success-600, #059669)}.cb-statistic__trend--down{color:var(--cb-color-danger-600, #dc2626)}.cb-statistic__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"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], showDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDays", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }] } });
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+
+/*
+ * Public API Surface de @caribeng/ui/statistic
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbCountdown, CbStatistic };

package/fesm2022/caribeng-ui-stepper.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { contentChildren, input, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, computed } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbButton } from '@caribeng/ui/button';
+import { injectCbTranslation } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -19,6 +20,8 @@ let nextUid = 0;
  */
 class CbStepper {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.steps = contentChildren(CbStep, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         /** Muestra los botones Atrás/Siguiente integrados. */
@@ -79,14 +82,14 @@ class CbStepper {
     @if (showNav()) {
       <div class="cb-stepper__nav">
         <cb-button variant="text" severity="secondary" [disabled]="activeIndex() === 0" (click)="prev()">
-          Atrás
+          {{ t().back }}
         </cb-button>
         <cb-button [disabled]="activeIndex() >= steps().length - 1" (click)="next()">
-          Siguiente
+          {{ t().next }}
         </cb-button>
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.cb-stepper__item{display:flex;align-items:center;gap:var(--cb-space-2);flex:1 1 auto}.cb-stepper__item:last-child{flex:0 0 auto}.cb-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:var(--cb-radius-full);border:2px solid var(--cb-color-border-strong);background-color:var(--cb-color-bg);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-bold);cursor:pointer;transition:all var(--cb-duration-fast) var(--cb-ease)}.cb-stepper__indicator:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-stepper__indicator:disabled{cursor:default}.cb-is-active .cb-stepper__indicator{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-500)}.cb-is-complete .cb-stepper__indicator{border-color:var(--cb-color-primary-500);background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-stepper__label{font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);white-space:nowrap}.cb-is-active .cb-stepper__label{color:var(--cb-color-text)}.cb-stepper__connector{flex:1 1 auto;height:2px;min-width:var(--cb-space-4);margin:0 var(--cb-space-2);background-color:var(--cb-color-border)}.cb-is-complete .cb-stepper__connector{background-color:var(--cb-color-primary-500)}.cb-stepper__content{padding:var(--cb-space-5) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-stepper__nav{display:flex;justify-content:space-between;gap:var(--cb-space-3)}@media(max-width:480px){.cb-stepper__label{display:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.cb-stepper__item{display:flex;align-items:center;gap:var(--cb-space-2);flex:1 1 auto}.cb-stepper__item:last-child{flex:0 0 auto}.cb-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:var(--cb-radius-full);border:2px solid var(--cb-color-border-strong);background-color:var(--cb-color-bg);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-bold);cursor:pointer;transition:all var(--cb-duration-fast) var(--cb-ease)}.cb-stepper__indicator:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-stepper__indicator:disabled{cursor:default}.cb-is-active .cb-stepper__indicator{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-500)}.cb-is-complete .cb-stepper__indicator{border-color:var(--cb-color-primary-500);background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-stepper__label{font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);white-space:nowrap}.cb-is-active .cb-stepper__label{color:var(--cb-color-text)}.cb-stepper__connector{flex:1 1 auto;height:2px;min-width:var(--cb-space-4);margin:0 var(--cb-space-2);background-color:var(--cb-color-border)}.cb-is-complete .cb-stepper__connector{background-color:var(--cb-color-primary-500)}.cb-stepper__content{padding:var(--cb-space-5) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-stepper__nav{display:flex;justify-content:space-between;gap:var(--cb-space-3)}@media(max-width:480px){.cb-stepper__label{display:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbStepper, decorators: [{
             type: Component,
@@ -126,10 +129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     @if (showNav()) {
       <div class="cb-stepper__nav">
         <cb-button variant="text" severity="secondary" [disabled]="activeIndex() === 0" (click)="prev()">
-          Atrás
+          {{ t().back }}
         </cb-button>
         <cb-button [disabled]="activeIndex() >= steps().length - 1" (click)="next()">
-          Siguiente
+          {{ t().next }}
         </cb-button>
       </div>
     }

package/fesm2022/caribeng-ui-steps.mjs

@@ -1,15 +1,18 @@
 import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /** Clickable progress navigation for a multi-step flow. */
 class CbSteps {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.steps = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Steps', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.activeChange = output();
     }
@@ -21,7 +24,7 @@ class CbSteps {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSteps, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSteps, isStandalone: true, selector: "cb-steps", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", activeChange: "activeChange" }, host: { classAttribute: "cb-steps" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().steps)">
       <ol class="cb-steps__list">
         @for (step of steps(); track $index; let i = $index; let last = $last) {
           <li class="cb-steps__entry" [class.cb-steps__entry--complete]="i < activeIndex()" [class.cb-steps__entry--current]="i === activeIndex()">
@@ -39,7 +42,7 @@ class CbSteps {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSteps, decorators: [{
             type: Component,
             args: [{ selector: 'cb-steps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-steps' }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().steps)">
       <ol class="cb-steps__list">
         @for (step of steps(); track $index; let i = $index; let last = $last) {
           <li class="cb-steps__entry" [class.cb-steps__entry--complete]="i < activeIndex()" [class.cb-steps__entry--current]="i === activeIndex()">