@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-infinite-scroll.mjs

@@ -0,0 +1,226 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, input, booleanAttribute, numberAttribute, output, signal, computed, viewChild, DestroyRef, afterNextRender, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbSpinner } from '@caribeng/ui/spinner';
+
+/**
+ * Scroll infinito de CaribeNG: envuelve una lista y pide más elementos (`loadMore`) al acercarse
+ * al final, con un botón "Cargar más" como alternativa. Tras `autoLimit` cargas automáticas pasa
+ * al botón, para que el pie de página siga siendo alcanzable; anuncia las cargas y, al cargar con
+ * el botón, lleva el foco al primer elemento nuevo.
+ *
+ * @example
+ * ```html
+ * <cb-infinite-scroll [loading]="cargando()" [hasMore]="hayMas()" [count]="items().length" (loadMore)="cargar()">
+ *   <ul>@for (i of items(); track i.id) { <li>{{ i.nombre }}</li> }</ul>
+ * </cb-infinite-scroll>
+ * ```
+ */
+class CbInfiniteScroll {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        /** Hay una carga en curso (muestra el indicador y evita pedir otra). */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Quedan elementos por cargar. */
+        this.hasMore = input(true, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** La última carga falló: muestra el aviso y "Reintentar". */
+        this.error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Número de elementos ya cargados: para anunciar cuántos llegaron y enfocar el primero nuevo. */
+        this.count = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+        /** Carga automática al llegar al final o solo con el botón. */
+        this.mode = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Cargas automáticas seguidas antes de pasar al botón (0 = sin límite). */
+        this.autoLimit = input(3, { ...(ngDevMode ? { debugName: "autoLimit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Distancia al final a la que se empieza a cargar (margen del IntersectionObserver). */
+        this.threshold = input('200px', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+        /** El propio componente hace scroll, con este alto máximo (si no, se usa la página). */
+        this.scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.height = input('24rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Elementos de la lista, para llevar el foco al primero nuevo tras "Cargar más". */
+        this.itemSelector = input('li, [role="listitem"], article', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemSelector" }] : /* istanbul ignore next */ []));
+        /** Mensaje al llegar al final (con `showEnd`). */
+        this.showEnd = input(true, { ...(ngDevMode ? { debugName: "showEnd" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.endMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "endMessage" }] : /* istanbul ignore next */ []));
+        this.errorMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.loadMoreLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadMoreLabel" }] : /* istanbul ignore next */ []));
+        /** Pide la siguiente página. */
+        this.loadMore = output();
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        /** Cargas automáticas desde la última con el botón. */
+        this.autoCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoCount" }] : /* istanbul ignore next */ []));
+        this.showButton = computed(() => this.mode() === 'button' || (this.autoLimit() > 0 && this.autoCount() >= this.autoLimit()) || !this.observerSupported, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showButton" }] : /* istanbul ignore next */ []));
+        this.sentinel = viewChild.required('sentinel');
+        this.observerSupported = typeof IntersectionObserver !== 'undefined';
+        /** Cuántos había al pedir la carga y si la pidió el botón (para el anuncio y el foco). */
+        this.pending = null;
+        this.visible = false;
+        this.announceFlip = false;
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (!this.observerSupported)
+                return;
+            const observer = new IntersectionObserver(([entry]) => {
+                this.visible = entry.isIntersecting;
+                if (this.visible)
+                    this.tryAuto();
+            }, { root: this.scrollable() ? this.host.nativeElement : null, rootMargin: `0px 0px ${this.threshold()} 0px` });
+            observer.observe(this.sentinel().nativeElement);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+        // Fin de una carga: anuncio, foco al primer elemento nuevo (si la pidió el botón) y, si el
+        // final sigue a la vista (pocos elementos), se pide otra.
+        // Una carga termina cuando `loading` vuelve a false, o —si la app carga de forma síncrona y
+        // `loading` no llega a verse en true— cuando cambia `count` o se activa `error`.
+        let wasLoading = false;
+        effect(() => {
+            const loading = this.loading();
+            const count = this.count();
+            const error = this.error();
+            untracked(() => {
+                if (loading) {
+                    if (!wasLoading)
+                        this.announce(this.t().infiniteLoading);
+                    wasLoading = true;
+                    return;
+                }
+                const pending = this.pending;
+                const done = wasLoading || (pending !== null && (count !== pending.count || error));
+                wasLoading = false;
+                if (!done)
+                    return;
+                this.pending = null;
+                if (this.error()) {
+                    this.announce(this.errorMessage() ?? this.t().infiniteError);
+                    return;
+                }
+                const now = this.count();
+                if (pending?.count !== undefined && now !== undefined && now > pending.count) {
+                    this.announce(cbFormat(this.t().infiniteLoaded, now - pending.count, now));
+                    if (pending.source !== 'scroll')
+                        this.focusItem(pending.count);
+                }
+                else if (!this.hasMore()) {
+                    this.announce(this.endMessage() ?? this.t().infiniteEnd);
+                }
+                afterNextRender(() => this.tryAuto(), { injector: this.injector });
+            });
+        });
+    }
+    /** Vuelve a permitir cargas automáticas (p. ej. al cambiar un filtro y reiniciar la lista). */
+    reset() {
+        this.autoCount.set(0);
+        this.pending = null;
+    }
+    request(source) {
+        if (this.loading())
+            return;
+        // Con el botón, se vuelve a contar desde cero el límite de cargas automáticas.
+        if (source !== 'scroll')
+            this.autoCount.set(0);
+        this.pending = { count: this.count(), source };
+        this.loadMore.emit(source);
+    }
+    tryAuto() {
+        if (!this.visible || this.mode() !== 'auto' || this.loading() || this.error() || !this.hasMore() || this.pending)
+            return;
+        if (this.autoLimit() > 0 && this.autoCount() >= this.autoLimit())
+            return;
+        this.autoCount.update((n) => n + 1);
+        this.request('scroll');
+    }
+    focusItem(index) {
+        afterNextRender(() => {
+            const items = this.host.nativeElement.querySelectorAll(this.itemSelector());
+            const target = items[index];
+            if (!target)
+                return;
+            // Un elemento de lista no es enfocable: se le da tabindex -1 para poder llevar el foco.
+            if (!target.matches('a[href], button, input, select, textarea, [tabindex]'))
+                target.setAttribute('tabindex', '-1');
+            target.focus();
+        }, { injector: this.injector });
+    }
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    announce(text) {
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInfiniteScroll, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbInfiniteScroll, isStandalone: true, selector: "cb-infinite-scroll", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, autoLimit: { classPropertyName: "autoLimit", publicName: "autoLimit", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, itemSelector: { classPropertyName: "itemSelector", publicName: "itemSelector", isSignal: true, isRequired: false, transformFunction: null }, showEnd: { classPropertyName: "showEnd", publicName: "showEnd", isSignal: true, isRequired: false, transformFunction: null }, endMessage: { classPropertyName: "endMessage", publicName: "endMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore" }, host: { properties: { "class.cb-infinite-scroll--self": "scrollable()", "style.max-height": "scrollable() ? height() : null", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "cb-infinite-scroll" }, viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+    <div #sentinel class="cb-is__sentinel" aria-hidden="true"></div>
+    <div class="cb-is__footer">
+      @if (loading()) {
+        <!-- Lo anuncia la región aria-live de abajo (el spinner es role="status" y lo repetiría). -->
+        <span class="cb-is__status" aria-hidden="true">
+          <cb-spinner [size]="20" />
+          {{ t().infiniteLoading }}
+        </span>
+      } @else if (error()) {
+        <span class="cb-is__error">{{ errorMessage() ?? t().infiniteError }}</span>
+        <button type="button" class="cb-is__btn" (click)="request('retry')">{{ t().infiniteRetry }}</button>
+      } @else if (hasMore()) {
+        @if (showButton()) {
+          <button #more type="button" class="cb-is__btn" (click)="request('button')">{{ loadMoreLabel() ?? t().infiniteLoadMore }}</button>
+        }
+      } @else if (showEnd()) {
+        <span class="cb-is__end">{{ endMessage() ?? t().infiniteEnd }}</span>
+      }
+    </div>
+    <span class="cb-is__sr" aria-live="polite">{{ announcement() }}</span>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}:host(.cb-infinite-scroll--self){overflow-y:auto;overscroll-behavior:contain}.cb-is__sentinel{height:1px}.cb-is__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;min-height:3rem;padding:.5rem}.cb-is__footer:empty{min-height:0;padding:0}.cb-is__status{display:inline-flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted)}.cb-is__end{color:var(--cb-color-text-muted)}.cb-is__error{color:var(--cb-color-danger)}.cb-is__btn{min-height:2.25rem;padding:0 1rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-is__btn:hover{background:var(--cb-color-surface-hover)}.cb-is__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-is__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: CbSpinner, selector: "cb-spinner", inputs: ["size", "strokeWidth", "severity", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInfiniteScroll, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbSpinner], host: {
+                        class: 'cb-infinite-scroll',
+                        '[class.cb-infinite-scroll--self]': 'scrollable()',
+                        '[style.max-height]': 'scrollable() ? height() : null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                    }, template: `
+    <ng-content />
+    <div #sentinel class="cb-is__sentinel" aria-hidden="true"></div>
+    <div class="cb-is__footer">
+      @if (loading()) {
+        <!-- Lo anuncia la región aria-live de abajo (el spinner es role="status" y lo repetiría). -->
+        <span class="cb-is__status" aria-hidden="true">
+          <cb-spinner [size]="20" />
+          {{ t().infiniteLoading }}
+        </span>
+      } @else if (error()) {
+        <span class="cb-is__error">{{ errorMessage() ?? t().infiniteError }}</span>
+        <button type="button" class="cb-is__btn" (click)="request('retry')">{{ t().infiniteRetry }}</button>
+      } @else if (hasMore()) {
+        @if (showButton()) {
+          <button #more type="button" class="cb-is__btn" (click)="request('button')">{{ loadMoreLabel() ?? t().infiniteLoadMore }}</button>
+        }
+      } @else if (showEnd()) {
+        <span class="cb-is__end">{{ endMessage() ?? t().infiniteEnd }}</span>
+      }
+    </div>
+    <span class="cb-is__sr" aria-live="polite">{{ announcement() }}</span>
+  `, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}:host(.cb-infinite-scroll--self){overflow-y:auto;overscroll-behavior:contain}.cb-is__sentinel{height:1px}.cb-is__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;min-height:3rem;padding:.5rem}.cb-is__footer:empty{min-height:0;padding:0}.cb-is__status{display:inline-flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted)}.cb-is__end{color:var(--cb-color-text-muted)}.cb-is__error{color:var(--cb-color-danger)}.cb-is__btn{min-height:2.25rem;padding:0 1rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-is__btn:hover{background:var(--cb-color-surface-hover)}.cb-is__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-is__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: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], autoLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLimit", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], itemSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSelector", required: false }] }], showEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnd", required: false }] }], endMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "endMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], sentinel: [{ type: i0.ViewChild, args: ['sentinel', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/infinite-scroll
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbInfiniteScroll };

package/fesm2022/caribeng-ui-input-number.mjs

@@ -149,10 +149,20 @@ class CbInputNumber {
         this.cvaDisabled.set(isDisabled);
     }
     // --- Interacción -----------------------------------------------------------
-    onFocus() {
+    onFocus(event) {
+        // De solo lectura: se sigue viendo con formato (no se edita).
+        if (this.readonly())
+            return;
         this.focused.set(true);
         const v = this.value();
-        this.editing.set(v == null ? '' : this.toRawString(v));
+        const raw = v == null ? '' : this.toRawString(v);
+        this.editing.set(raw);
+        // El texto crudo se escribe ya (sin esperar al render) y queda seleccionado:
+        // así lo que se escribe reemplaza el valor y las teclas no actúan sobre el texto con formato.
+        const field = event.target;
+        if (field.value !== raw)
+            field.value = raw;
+        field.select();
     }
     onInput(event) {
         this.editing.set(event.target.value);
@@ -200,12 +210,16 @@ class CbInputNumber {
         const options = {
             useGrouping: this.useGrouping(),
         };
+        const minF = this.minFractionDigits();
+        const maxF = this.maxFractionDigits();
         if (this.mode() === 'currency') {
             options.style = 'currency';
             options.currency = this.currency();
+            // Decimales fijos de la moneda, iguales en todos los navegadores (Chrome usa 0 para COP).
+            const digits = ZERO_DECIMALS.has(this.currency().toUpperCase()) ? 0 : 2;
+            options.minimumFractionDigits = Math.min(digits, maxF ?? digits);
+            options.maximumFractionDigits = Math.max(digits, minF ?? digits);
         }
-        const minF = this.minFractionDigits();
-        const maxF = this.maxFractionDigits();
         if (minF != null)
             options.minimumFractionDigits = minF;
         if (maxF != null)
@@ -285,7 +299,7 @@ class CbInputNumber {
         [attr.aria-valuenow]="value()"
         [attr.aria-valuemin]="min()"
         [attr.aria-valuemax]="max()"
-        (focus)="onFocus()"
+        (focus)="onFocus($event)"
         (input)="onInput($event)"
         (blur)="onBlur()"
         (keydown)="onKeydown($event)"
@@ -373,7 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [attr.aria-valuenow]="value()"
         [attr.aria-valuemin]="min()"
         [attr.aria-valuemax]="max()"
-        (focus)="onFocus()"
+        (focus)="onFocus($event)"
         (input)="onInput($event)"
         (blur)="onBlur()"
         (keydown)="onKeydown($event)"
@@ -416,6 +430,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     }
   `, styles: [":host{display:block}.cb-input-number__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-input-number__required{color:var(--cb-color-danger);margin-left:2px}.cb-input-number{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-input-number:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-input-number:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-input-number.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-input-number.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-input-number.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-input-number__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;text-align:right}.cb-input-number__field::placeholder{color:var(--cb-color-text-muted)}.cb-input-number__field:focus{outline:none}.cb-input-number__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-input-number--sm .cb-input-number__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-input-number--md .cb-input-number__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-input-number--lg .cb-input-number__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-input-number__buttons{display:flex;flex:none;flex-direction:column;border-left:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn{display:flex;flex:1 1 50%;align-items:center;justify-content:center;width:2rem;padding:0;color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border:none;cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-input-number__btn:hover:not(:disabled){background-color:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-input-number__btn:disabled{opacity:.4;cursor:not-allowed}.cb-input-number__btn--up{border-top-right-radius:var(--cb-radius-md);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-input-number__btn--down{border-bottom-right-radius:var(--cb-radius-md)}.cb-input-number__btn cb-icon{color:currentColor}.cb-input-number__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-input-number__message--hint{color:var(--cb-color-text-muted)}.cb-input-number__message--error{color:var(--cb-color-danger)}.cb-input-number__required--required,.cb-input-number__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
+/** Monedas sin decimales (ISO 4217). */
+const ZERO_DECIMALS = new Set(['BIF', 'CLP', 'DJF', 'GNF', 'ISK', 'JPY', 'KMF', 'KRW', 'PYG', 'RWF', 'UGX', 'UYI', 'VND', 'VUV', 'XAF', 'XOF', 'XPF']);
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }

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

@@ -4,7 +4,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 /**
- * Input-search de Caribe Design: campo de búsqueda con icono, botón de limpiar
+ * Input-search: campo de búsqueda con icono, botón de limpiar
  * e integración con Angular Forms (CVA).
  *
  * @example
@@ -63,38 +63,38 @@ class CbInputSearch {
                 useExisting: forwardRef(() => CbInputSearch),
                 multi: true,
             },
-        ], ngImport: i0, template: `
-    <div
-      class="cb-input-search"
-      [class.cb-is-invalid]="fieldState.invalid()"
-      [class.cb-is-disabled]="disabled() || cvaDisabled()"
-    >
-      <span class="cb-input-search__icon" aria-hidden="true">⌕</span>
-      <input
-        #field
-        class="cb-input-search__field"
-        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-        [attr.aria-required]="fieldState.required() || null"
-        type="search"
-        [value]="value()"
-        [placeholder]="(placeholder() ?? t().search)"
-        [disabled]="disabled() || cvaDisabled()"
-        [attr.aria-label]="(placeholder() ?? t().search)"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        (keydown.enter)="search.emit(value())"
-      />
-      @if (clearable() && value()) {
-        <button
-          type="button"
-          class="cb-input-search__clear"
-          [attr.aria-label]="t().clearSearch"
-          (click)="clear(); field.focus()"
-        >
-          ×
-        </button>
-      }
-    </div>
+        ], ngImport: i0, template: `
+    <div
+      class="cb-input-search"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [class.cb-is-disabled]="disabled() || cvaDisabled()"
+    >
+      <span class="cb-input-search__icon" aria-hidden="true">⌕</span>
+      <input
+        #field
+        class="cb-input-search__field"
+        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+        [attr.aria-required]="fieldState.required() || null"
+        type="search"
+        [value]="value()"
+        [placeholder]="(placeholder() ?? t().search)"
+        [disabled]="disabled() || cvaDisabled()"
+        [attr.aria-label]="(placeholder() ?? t().search)"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        (keydown.enter)="search.emit(value())"
+      />
+      @if (clearable() && value()) {
+        <button
+          type="button"
+          class="cb-input-search__clear"
+          [attr.aria-label]="t().clearSearch"
+          (click)="clear(); field.focus()"
+        >
+          ×
+        </button>
+      }
+    </div>
   `, isInline: true, styles: [":host{display:inline-block;width:100%;max-width:20rem}.cb-input-search{display:flex;align-items:center;gap:var(--cb-space-2, .5rem);box-sizing:border-box;width:100%;padding:0 var(--cb-space-3, .75rem);height:2.5rem;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-md, .5rem);transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-input-search:focus-within{border-color:var(--cb-color-primary-500, #10b981);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500, #10b981) 18%,transparent)}.cb-input-search.cb-is-disabled{opacity:.6;background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-input-search__icon{flex:none;font-size:1.1rem;color:var(--cb-color-text-muted, #64748b)}.cb-input-search__field{flex:1;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem)}.cb-input-search__field::-webkit-search-cancel-button{display:none}.cb-input-search__clear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1rem;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer}.cb-input-search__clear:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-input-search{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}.cb-input-search.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputSearch, decorators: [{
@@ -105,38 +105,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => CbInputSearch),
                             multi: true,
                         },
-                    ], host: { class: 'cb-input-search-host' }, template: `
-    <div
-      class="cb-input-search"
-      [class.cb-is-invalid]="fieldState.invalid()"
-      [class.cb-is-disabled]="disabled() || cvaDisabled()"
-    >
-      <span class="cb-input-search__icon" aria-hidden="true">⌕</span>
-      <input
-        #field
-        class="cb-input-search__field"
-        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-        [attr.aria-required]="fieldState.required() || null"
-        type="search"
-        [value]="value()"
-        [placeholder]="(placeholder() ?? t().search)"
-        [disabled]="disabled() || cvaDisabled()"
-        [attr.aria-label]="(placeholder() ?? t().search)"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        (keydown.enter)="search.emit(value())"
-      />
-      @if (clearable() && value()) {
-        <button
-          type="button"
-          class="cb-input-search__clear"
-          [attr.aria-label]="t().clearSearch"
-          (click)="clear(); field.focus()"
-        >
-          ×
-        </button>
-      }
-    </div>
+                    ], host: { class: 'cb-input-search-host' }, template: `
+    <div
+      class="cb-input-search"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [class.cb-is-disabled]="disabled() || cvaDisabled()"
+    >
+      <span class="cb-input-search__icon" aria-hidden="true">⌕</span>
+      <input
+        #field
+        class="cb-input-search__field"
+        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+        [attr.aria-required]="fieldState.required() || null"
+        type="search"
+        [value]="value()"
+        [placeholder]="(placeholder() ?? t().search)"
+        [disabled]="disabled() || cvaDisabled()"
+        [attr.aria-label]="(placeholder() ?? t().search)"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        (keydown.enter)="search.emit(value())"
+      />
+      @if (clearable() && value()) {
+        <button
+          type="button"
+          class="cb-input-search__clear"
+          [attr.aria-label]="t().clearSearch"
+          (click)="clear(); field.focus()"
+        >
+          ×
+        </button>
+      }
+    </div>
   `, styles: [":host{display:inline-block;width:100%;max-width:20rem}.cb-input-search{display:flex;align-items:center;gap:var(--cb-space-2, .5rem);box-sizing:border-box;width:100%;padding:0 var(--cb-space-3, .75rem);height:2.5rem;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-md, .5rem);transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-input-search:focus-within{border-color:var(--cb-color-primary-500, #10b981);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500, #10b981) 18%,transparent)}.cb-input-search.cb-is-disabled{opacity:.6;background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-input-search__icon{flex:none;font-size:1.1rem;color:var(--cb-color-text-muted, #64748b)}.cb-input-search__field{flex:1;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem)}.cb-input-search__field::-webkit-search-cancel-button{display:none}.cb-input-search__clear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1rem;color:var(--cb-color-text-muted, #64748b);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer}.cb-input-search__clear:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-input-search{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}.cb-input-search.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }] } });
 

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

@@ -4,7 +4,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 /**
- * Input-token de Caribe Design: entrada de código OTP con casillas por dígito,
+ * Input-token: entrada de código OTP con casillas por dígito,
  * enmascarado opcional y CVA.
  *
  * @example
@@ -112,35 +112,35 @@ class CbInputToken {
                 useExisting: forwardRef(() => CbInputToken),
                 multi: true,
             },
-        ], ngImport: i0, template: `
-    <div class="cb-input-token">
-      <div
-        class="cb-input-token__slots"
-        role="group"
-        [attr.aria-label]="t().verificationCode"
-      >
-        @for (slot of slots(); track slot) {
-          <input
-            class="cb-input-token__slot"
-            [class.cb-is-invalid]="fieldState.invalid()"
-            [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-            [type]="unmasked() ? 'text' : 'password'"
-            maxlength="1"
-            inputmode="numeric"
-            [value]="charAt(slot)"
-            [disabled]="disabled() || cvaDisabled()"
-            [attr.aria-label]="fmt(t().digit, slot + 1)"
-            (input)="onDigitInput($event, slot)"
-            (keydown)="onKeydown($event, slot)"
-            (paste)="onPaste($event)"
-            (blur)="onTouched()"
-          />
-        }
-      </div>
-      @if (helpText()) {
-        <span class="cb-input-token__help">{{ helpText() }}</span>
-      }
-    </div>
+        ], ngImport: i0, template: `
+    <div class="cb-input-token">
+      <div
+        class="cb-input-token__slots"
+        role="group"
+        [attr.aria-label]="t().verificationCode"
+      >
+        @for (slot of slots(); track slot) {
+          <input
+            class="cb-input-token__slot"
+            [class.cb-is-invalid]="fieldState.invalid()"
+            [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+            [type]="unmasked() ? 'text' : 'password'"
+            maxlength="1"
+            inputmode="numeric"
+            [value]="charAt(slot)"
+            [disabled]="disabled() || cvaDisabled()"
+            [attr.aria-label]="fmt(t().digit, slot + 1)"
+            (input)="onDigitInput($event, slot)"
+            (keydown)="onKeydown($event, slot)"
+            (paste)="onPaste($event)"
+            (blur)="onTouched()"
+          />
+        }
+      </div>
+      @if (helpText()) {
+        <span class="cb-input-token__help">{{ helpText() }}</span>
+      }
+    </div>
   `, isInline: true, styles: [":host{display:inline-block}.cb-input-token{display:inline-flex;flex-direction:column;gap:var(--cb-space-2, .4rem);font-family:var(--cb-font-sans, inherit)}.cb-input-token__slots{display:inline-flex;gap:var(--cb-space-2, .45rem)}.cb-input-token__slot{width:2.5rem;height:3rem;text-align:center;font:inherit;font-size:var(--cb-text-lg, 1.1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-md, .5rem);transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-input-token__slot:focus-visible{outline:none;border-color:var(--cb-color-primary-500, #10b981);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}.cb-input-token__slot:disabled{opacity:.6;background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-input-token__help{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}:host-context([data-theme=\"dark\"]) .cb-input-token__slot{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}.cb-input-token__slot.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputToken, decorators: [{
@@ -151,35 +151,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => CbInputToken),
                             multi: true,
                         },
-                    ], host: { class: 'cb-input-token-host' }, template: `
-    <div class="cb-input-token">
-      <div
-        class="cb-input-token__slots"
-        role="group"
-        [attr.aria-label]="t().verificationCode"
-      >
-        @for (slot of slots(); track slot) {
-          <input
-            class="cb-input-token__slot"
-            [class.cb-is-invalid]="fieldState.invalid()"
-            [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-            [type]="unmasked() ? 'text' : 'password'"
-            maxlength="1"
-            inputmode="numeric"
-            [value]="charAt(slot)"
-            [disabled]="disabled() || cvaDisabled()"
-            [attr.aria-label]="fmt(t().digit, slot + 1)"
-            (input)="onDigitInput($event, slot)"
-            (keydown)="onKeydown($event, slot)"
-            (paste)="onPaste($event)"
-            (blur)="onTouched()"
-          />
-        }
-      </div>
-      @if (helpText()) {
-        <span class="cb-input-token__help">{{ helpText() }}</span>
-      }
-    </div>
+                    ], host: { class: 'cb-input-token-host' }, template: `
+    <div class="cb-input-token">
+      <div
+        class="cb-input-token__slots"
+        role="group"
+        [attr.aria-label]="t().verificationCode"
+      >
+        @for (slot of slots(); track slot) {
+          <input
+            class="cb-input-token__slot"
+            [class.cb-is-invalid]="fieldState.invalid()"
+            [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+            [type]="unmasked() ? 'text' : 'password'"
+            maxlength="1"
+            inputmode="numeric"
+            [value]="charAt(slot)"
+            [disabled]="disabled() || cvaDisabled()"
+            [attr.aria-label]="fmt(t().digit, slot + 1)"
+            (input)="onDigitInput($event, slot)"
+            (keydown)="onKeydown($event, slot)"
+            (paste)="onPaste($event)"
+            (blur)="onTouched()"
+          />
+        }
+      </div>
+      @if (helpText()) {
+        <span class="cb-input-token__help">{{ helpText() }}</span>
+      }
+    </div>
   `, styles: [":host{display:inline-block}.cb-input-token{display:inline-flex;flex-direction:column;gap:var(--cb-space-2, .4rem);font-family:var(--cb-font-sans, inherit)}.cb-input-token__slots{display:inline-flex;gap:var(--cb-space-2, .45rem)}.cb-input-token__slot{width:2.5rem;height:3rem;text-align:center;font:inherit;font-size:var(--cb-text-lg, 1.1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-md, .5rem);transition:border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-input-token__slot:focus-visible{outline:none;border-color:var(--cb-color-primary-500, #10b981);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}.cb-input-token__slot:disabled{opacity:.6;background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-input-token__help{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}:host-context([data-theme=\"dark\"]) .cb-input-token__slot{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}.cb-input-token__slot.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { numInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "numInputs", required: false }] }], unmasked: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmasked", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });