@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-empty.mjs

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/**
+ * Empty de CaribeNG: estado vacío con icono o imagen, mensaje y acciones
+ * opcionales (proyectadas). Úsalo cuando una lista, búsqueda o tabla no tiene
+ * datos.
+ *
+ * @example
+ * ```html
+ * <cb-empty title="Aún no tienes movimientos" description="Cuando hagas tu primera compra aparecerá aquí.">
+ *   <cb-button size="sm">Hacer una transferencia</cb-button>
+ * </cb-empty>
+ * ```
+ */
+class CbEmpty {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Mensaje principal. Por defecto, "Sin datos" del idioma activo. */
+        this.title = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Texto de apoyo opcional. */
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /** Icono (se ignora si hay `image`). */
+        this.icon = input('folder', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Ilustración opcional (decorativa). */
+        this.image = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+        /** `sm` para tablas, listas y paneles pequeños. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbEmpty, isStandalone: true, selector: "cb-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-empty--sm": "size() === 'sm'" }, classAttribute: "cb-empty" }, ngImport: i0, template: `
+    @if (image()) {
+      <img class="cb-empty__image" [src]="image()" alt="" />
+    } @else {
+      <span class="cb-empty__icon" aria-hidden="true">
+        <cb-icon [name]="icon()" [size]="size() === 'sm' ? 22 : 32" />
+      </span>
+    }
+    <p class="cb-empty__title">{{ title() ?? t().noData }}</p>
+    @if (description()) {
+      <p class="cb-empty__description">{{ description() }}</p>
+    }
+    <div class="cb-empty__actions"><ng-content /></div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-8, 2rem) var(--cb-space-4, 1rem);text-align:center;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}:host(.cb-empty--sm){padding:var(--cb-space-4, 1rem);gap:var(--cb-space-1, .25rem)}.cb-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin-bottom:var(--cb-space-1, .25rem);color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border-radius:999px}:host(.cb-empty--sm) .cb-empty__icon{width:2.75rem;height:2.75rem}.cb-empty__image{max-width:10rem;max-height:8rem;margin-bottom:var(--cb-space-2, .5rem)}.cb-empty__title{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}:host(.cb-empty--sm) .cb-empty__title{font-size:var(--cb-text-sm, .875rem)}.cb-empty__description{max-width:28rem;margin:0;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-empty__actions:empty{display:none}\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: CbEmpty, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-empty', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-empty', '[class.cb-empty--sm]': "size() === 'sm'" }, template: `
+    @if (image()) {
+      <img class="cb-empty__image" [src]="image()" alt="" />
+    } @else {
+      <span class="cb-empty__icon" aria-hidden="true">
+        <cb-icon [name]="icon()" [size]="size() === 'sm' ? 22 : 32" />
+      </span>
+    }
+    <p class="cb-empty__title">{{ title() ?? t().noData }}</p>
+    @if (description()) {
+      <p class="cb-empty__description">{{ description() }}</p>
+    }
+    <div class="cb-empty__actions"><ng-content /></div>
+  `, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-8, 2rem) var(--cb-space-4, 1rem);text-align:center;font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text)}:host(.cb-empty--sm){padding:var(--cb-space-4, 1rem);gap:var(--cb-space-1, .25rem)}.cb-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin-bottom:var(--cb-space-1, .25rem);color:var(--cb-color-text-muted);background-color:var(--cb-color-surface-subtle);border-radius:999px}:host(.cb-empty--sm) .cb-empty__icon{width:2.75rem;height:2.75rem}.cb-empty__image{max-width:10rem;max-height:8rem;margin-bottom:var(--cb-space-2, .5rem)}.cb-empty__title{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}:host(.cb-empty--sm) .cb-empty__title{font-size:var(--cb-text-sm, .875rem)}.cb-empty__description{max-width:28rem;margin:0;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-2, .5rem)}.cb-empty__actions:empty{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/empty
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbEmpty };

package/fesm2022/caribeng-ui-file-card.mjs

@@ -34,10 +34,10 @@ class CbFileCard {
         this.valueSub = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueSub" }] : /* istanbul ignore next */ []));
     }
-    /** Fondo tintado derivado del color (con alpha). */
+    /** Fondo tintado derivado del color (cualquier color CSS: hex, rgb(), var(--…)). */
     tintBg() {
         const c = this.color();
-        return c ? `${c}1f` : null;
+        return c ? `color-mix(in srgb, ${c} 12%, transparent)` : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileCard, isStandalone: true, selector: "cb-file-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueSub: { classPropertyName: "valueSub", publicName: "valueSub", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-file-card" }, ngImport: i0, template: `

package/fesm2022/caribeng-ui-fileupload.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * FileUpload de CaribeNG: selector de archivos con arrastrar y soltar,
@@ -8,6 +9,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbFileUpload {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.accept = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, /* @ts-ignore */
@@ -16,14 +21,19 @@ class CbFileUpload {
         ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.chooseLabel = input('Elegir archivo', /* @ts-ignore */
+        this.chooseLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chooseLabel" }] : /* istanbul ignore next */ []));
-        this.uploadLabel = input('Subir', /* @ts-ignore */
+        this.uploadLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
         this.selectFiles = output();
         this.uploadHandler = output();
+        /** Se emite con los archivos descartados por tamaño (`maxFileSize`) o tipo (`accept`). */
+        this.rejectFiles = output();
         this.files = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        /** Archivos descartados en la última selección (se muestran como aviso). */
+        this.rejected = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rejected" }] : /* istanbul ignore next */ []));
         this.dragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
         this.fileInputRef = viewChild('fileInput', /* @ts-ignore */
@@ -60,10 +70,28 @@ class CbFileUpload {
             this.addFiles(Array.from(dropped));
         }
     }
+    /** Añade archivos validando `accept` y `maxFileSize`; ignora los repetidos. */
     addFiles(incoming) {
         const max = this.maxFileSize();
-        const valid = max != null ? incoming.filter((f) => f.size <= max) : incoming;
-        const next = this.multiple() ? [...this.files(), ...valid] : valid.slice(0, 1);
+        const valid = [];
+        const rejected = [];
+        for (const file of incoming) {
+            if (!this.isAccepted(file))
+                rejected.push({ file, reason: 'type' });
+            else if (max != null && file.size > max)
+                rejected.push({ file, reason: 'size' });
+            else
+                valid.push(file);
+        }
+        this.rejected.set(rejected);
+        if (rejected.length)
+            this.rejectFiles.emit({ files: rejected });
+        if (!valid.length)
+            return;
+        const same = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+        const next = this.multiple()
+            ? [...this.files(), ...valid.filter((f, i) => !this.files().some((e) => same(e, f)) && valid.findIndex((v) => same(v, f)) === i)]
+            : valid.slice(0, 1);
         this.files.set(next);
         this.selectFiles.emit({ files: next });
     }
@@ -73,6 +101,7 @@ class CbFileUpload {
     }
     clear() {
         this.files.set([]);
+        this.rejected.set([]);
     }
     triggerUpload() {
         this.uploadHandler.emit({ files: [...this.files()] });
@@ -80,10 +109,30 @@ class CbFileUpload {
     formatSize(bytes) {
         if (bytes < 1024)
             return `${bytes} B`;
-        return `${(bytes / 1024).toFixed(1)} KB`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    /** Comprueba `accept` (extensiones `.pdf`, tipos `image/png` o comodines `image/*`). */
+    isAccepted(file) {
+        const rules = this.accept()
+            .split(',')
+            .map((r) => r.trim().toLowerCase())
+            .filter(Boolean);
+        if (!rules.length)
+            return true;
+        const name = file.name.toLowerCase();
+        const type = (file.type || '').toLowerCase();
+        return rules.some((rule) => {
+            if (rule.startsWith('.'))
+                return name.endsWith(rule);
+            if (rule.endsWith('/*'))
+                return type.startsWith(rule.slice(0, -1));
+            return type === rule;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileUpload, isStandalone: true, selector: "cb-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFiles: "selectFiles", uploadHandler: "uploadHandler" }, host: { properties: { "class.cb-is-dragover": "dragging()" }, classAttribute: "cb-file-upload" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileUpload, isStandalone: true, selector: "cb-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFiles: "selectFiles", uploadHandler: "uploadHandler", rejectFiles: "rejectFiles" }, host: { properties: { "class.cb-is-dragover": "dragging()" }, classAttribute: "cb-file-upload" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <input
       #fileInput
       type="file"
@@ -107,7 +156,7 @@ class CbFileUpload {
           (click)="openPicker()"
         >
           <cb-icon name="upload" [size]="15" aria-hidden="true" />
-          <span>{{ chooseLabel() }}</span>
+          <span>{{ (chooseLabel() ?? t().chooseFile) }}</span>
         </button>
         @if (files().length > 0) {
           <button
@@ -117,7 +166,7 @@ class CbFileUpload {
             (click)="triggerUpload()"
           >
             <cb-icon name="check" [size]="15" aria-hidden="true" />
-            <span>{{ uploadLabel() }}</span>
+            <span>{{ (uploadLabel() ?? t().upload) }}</span>
           </button>
           <button
             type="button"
@@ -126,13 +175,27 @@ class CbFileUpload {
             (click)="clear()"
           >
             <cb-icon name="x" [size]="15" aria-hidden="true" />
-            <span>Limpiar</span>
+            <span>{{ t().clear }}</span>
           </button>
         }
       </div>
 
+      @if (rejected().length) {
+        <ul class="cb-file-upload__errors" role="alert">
+          @for (r of rejected(); track $index) {
+            <li>
+              {{
+                r.reason === 'size'
+                  ? fmt(t().fileTooLarge, r.file.name, formatSize(maxFileSize() ?? 0))
+                  : fmt(t().fileTypeNotAllowed, r.file.name)
+              }}
+            </li>
+          }
+        </ul>
+      }
+
       @if (files().length === 0) {
-        <p class="cb-file-upload__empty">Arrastra archivos aquí o pulsa "{{ chooseLabel() }}".</p>
+        <p class="cb-file-upload__empty">{{ fmt(t().dropFiles, (chooseLabel() ?? t().chooseFile)) }}</p>
       } @else {
         <ul class="cb-file-upload__list">
           @for (file of files(); track file.name + file.size; let idx = $index) {
@@ -142,7 +205,7 @@ class CbFileUpload {
               <button
                 type="button"
                 class="cb-file-upload__remove"
-                [attr.aria-label]="'Quitar ' + file.name"
+                [attr.aria-label]="fmt(t().removeItem, file.name)"
                 (click)="removeAt(idx)"
               >
                 <cb-icon name="x" [size]="14" aria-hidden="true" />
@@ -152,7 +215,7 @@ class CbFileUpload {
         </ul>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__errors{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:var(--cb-text-sm);color:var(--cb-color-danger)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\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: CbFileUpload, decorators: [{
             type: Component,
@@ -183,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           (click)="openPicker()"
         >
           <cb-icon name="upload" [size]="15" aria-hidden="true" />
-          <span>{{ chooseLabel() }}</span>
+          <span>{{ (chooseLabel() ?? t().chooseFile) }}</span>
         </button>
         @if (files().length > 0) {
           <button
@@ -193,7 +256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             (click)="triggerUpload()"
           >
             <cb-icon name="check" [size]="15" aria-hidden="true" />
-            <span>{{ uploadLabel() }}</span>
+            <span>{{ (uploadLabel() ?? t().upload) }}</span>
           </button>
           <button
             type="button"
@@ -202,13 +265,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             (click)="clear()"
           >
             <cb-icon name="x" [size]="15" aria-hidden="true" />
-            <span>Limpiar</span>
+            <span>{{ t().clear }}</span>
           </button>
         }
       </div>
 
+      @if (rejected().length) {
+        <ul class="cb-file-upload__errors" role="alert">
+          @for (r of rejected(); track $index) {
+            <li>
+              {{
+                r.reason === 'size'
+                  ? fmt(t().fileTooLarge, r.file.name, formatSize(maxFileSize() ?? 0))
+                  : fmt(t().fileTypeNotAllowed, r.file.name)
+              }}
+            </li>
+          }
+        </ul>
+      }
+
       @if (files().length === 0) {
-        <p class="cb-file-upload__empty">Arrastra archivos aquí o pulsa "{{ chooseLabel() }}".</p>
+        <p class="cb-file-upload__empty">{{ fmt(t().dropFiles, (chooseLabel() ?? t().chooseFile)) }}</p>
       } @else {
         <ul class="cb-file-upload__list">
           @for (file of files(); track file.name + file.size; let idx = $index) {
@@ -218,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <button
                 type="button"
                 class="cb-file-upload__remove"
-                [attr.aria-label]="'Quitar ' + file.name"
+                [attr.aria-label]="fmt(t().removeItem, file.name)"
                 (click)="removeAt(idx)"
               >
                 <cb-icon name="x" [size]="14" aria-hidden="true" />
@@ -228,8 +305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </ul>
       }
     </div>
-  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\n"] }]
-        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], selectFiles: [{ type: i0.Output, args: ["selectFiles"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-file-upload__native{display:none}.cb-file-upload__dropzone{padding:var(--cb-space-4);border:1px dashed var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);transition:border-color .14s ease,background-color .14s ease}:host(.cb-is-dragover) .cb-file-upload__dropzone{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-file-upload__actions{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);margin-bottom:var(--cb-space-3)}.cb-file-upload__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .75rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-medium);cursor:pointer}.cb-file-upload__btn--primary{background:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-file-upload__errors{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:var(--cb-text-sm);color:var(--cb-color-danger)}.cb-file-upload__empty{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.cb-file-upload__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.375rem .625rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);font-size:var(--cb-text-sm)}.cb-file-upload__size{margin-left:auto;color:var(--cb-color-text-muted);font-size:.75rem}.cb-file-upload__remove{border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer;padding:.125rem}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], selectFiles: [{ type: i0.Output, args: ["selectFiles"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }], rejectFiles: [{ type: i0.Output, args: ["rejectFiles"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/caribeng-ui-floatlabel.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, signal, afterEveryRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * FloatLabel de CaribeNG: contenedor que eleva visualmente la etiqueta `<label>`
@@ -14,7 +14,9 @@ class CbFloatLabel {
         ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         this.filled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => {
+        // Tras cada render: detecta también valores asignados por código (p. ej. `patchValue`),
+        // que no disparan los eventos `input` / `change`.
+        afterEveryRender(() => {
             this.checkFilled();
         });
     }

package/fesm2022/caribeng-ui-folder-card.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Tarjeta de carpeta de CaribeNG: icono de carpeta, nombre y una fila con
@@ -15,6 +16,8 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbFolderCard {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Nombre de la carpeta. */
         this.name = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -22,7 +25,7 @@ class CbFolderCard {
         this.files = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
         /** Etiqueta tras el número de archivos. */
-        this.filesLabel = input('archivos', /* @ts-ignore */
+        this.filesLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filesLabel" }] : /* istanbul ignore next */ []));
         /** Tamaño mostrado a la derecha. */
         this.size = input('', /* @ts-ignore */
@@ -41,7 +44,9 @@ class CbFolderCard {
     </div>
     <div class="cb-folder-card__name">{{ name() }}</div>
     <div class="cb-folder-card__meta">
-      <span>{{ files() }} {{ filesLabel() }}</span>
+      @if (files() !== '') {
+        <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
+      }
       @if (size()) {
         <span>{{ size() }}</span>
       }
@@ -59,7 +64,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     </div>
     <div class="cb-folder-card__name">{{ name() }}</div>
     <div class="cb-folder-card__meta">
-      <span>{{ files() }} {{ filesLabel() }}</span>
+      @if (files() !== '') {
+        <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
+      }
       @if (size()) {
         <span>{{ size() }}</span>
       }

package/fesm2022/caribeng-ui-galleria.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, inject, ElementRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Galleria de CaribeNG: galería de imágenes con visor principal, leyenda y
@@ -8,6 +9,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbGalleria {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.showThumbnails = input(true, /* @ts-ignore */
@@ -16,6 +21,7 @@ class CbGalleria {
         ...(ngDevMode ? [{ debugName: "circular" }] : /* istanbul ignore next */ []));
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
         this.activeItem = computed(() => this.value()[this.activeIndex()] ?? this.value()[0] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
     }
@@ -39,31 +45,52 @@ class CbGalleria {
         else if (this.circular())
             this.activeIndex.set(0);
     }
+    /** Miniaturas (patrón *tabs*): flechas, Inicio y Fin cambian de imagen y mueven el foco. */
+    onThumbKeydown(event) {
+        const last = this.value().length - 1;
+        const cur = this.activeIndex();
+        const target = event.key === 'ArrowRight' ? (cur < last ? cur + 1 : 0)
+            : event.key === 'ArrowLeft' ? (cur > 0 ? cur - 1 : last)
+                : event.key === 'Home' ? 0
+                    : event.key === 'End' ? last
+                        : null;
+        if (target === null)
+            return;
+        event.preventDefault();
+        this.activeIndex.set(target);
+        this.host.nativeElement.querySelectorAll('.cb-galleria__thumb')[target]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbGalleria, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbGalleria, isStandalone: true, selector: "cb-galleria", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "cb-galleria" }, ngImport: i0, template: `
     @if (activeItem(); as current) {
       <div class="cb-galleria__stage">
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--prev"
-          aria-label="Imagen anterior"
-          (click)="prev()"
-        >
-          <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--prev"
+            [attr.aria-label]="t().previousImage"
+            [disabled]="!circular() && activeIndex() === 0"
+            (click)="prev()"
+          >
+            <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+          </button>
+        }
         <img
           class="cb-galleria__main-img"
           [src]="current.itemImageSrc"
           [alt]="current.alt || current.title || ''"
         />
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--next"
-          aria-label="Imagen siguiente"
-          (click)="next()"
-        >
-          <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--next"
+            [attr.aria-label]="t().nextImage"
+            [disabled]="!circular() && activeIndex() === value().length - 1"
+            (click)="next()"
+          >
+            <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+          </button>
+        }
         @if (current.title) {
           <div class="cb-galleria__caption">{{ current.title }}</div>
         }
@@ -71,20 +98,19 @@ class CbGalleria {
     }
     @if (showThumbnails() && value().length > 1) {
       <div class="cb-galleria__thumbs" role="tablist">
-        @for (item of value(); track item.itemImageSrc; let idx = $index) {
+        @for (item of value(); track $index; let idx = $index) {
           <button
             type="button"
             class="cb-galleria__thumb"
             role="tab"
             [class.cb-is-active]="activeIndex() === idx"
             [attr.aria-selected]="activeIndex() === idx"
-            [attr.aria-label]="item.title || ('Miniatura ' + (idx + 1))"
+            [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+            [attr.aria-label]="item.title || item.alt || fmt(t().thumbnail, idx + 1)"
             (click)="activeIndex.set(idx)"
+            (keydown)="onThumbKeydown($event)"
           >
-            <img
-              [src]="item.thumbnailImageSrc || item.itemImageSrc"
-              [alt]="item.alt || item.title || ''"
-            />
+            <img [src]="item.thumbnailImageSrc || item.itemImageSrc" alt="" />
           </button>
         }
       </div>
@@ -96,27 +122,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-galleria', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-galleria' }, template: `
     @if (activeItem(); as current) {
       <div class="cb-galleria__stage">
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--prev"
-          aria-label="Imagen anterior"
-          (click)="prev()"
-        >
-          <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--prev"
+            [attr.aria-label]="t().previousImage"
+            [disabled]="!circular() && activeIndex() === 0"
+            (click)="prev()"
+          >
+            <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+          </button>
+        }
         <img
           class="cb-galleria__main-img"
           [src]="current.itemImageSrc"
           [alt]="current.alt || current.title || ''"
         />
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--next"
-          aria-label="Imagen siguiente"
-          (click)="next()"
-        >
-          <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--next"
+            [attr.aria-label]="t().nextImage"
+            [disabled]="!circular() && activeIndex() === value().length - 1"
+            (click)="next()"
+          >
+            <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+          </button>
+        }
         @if (current.title) {
           <div class="cb-galleria__caption">{{ current.title }}</div>
         }
@@ -124,20 +156,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     }
     @if (showThumbnails() && value().length > 1) {
       <div class="cb-galleria__thumbs" role="tablist">
-        @for (item of value(); track item.itemImageSrc; let idx = $index) {
+        @for (item of value(); track $index; let idx = $index) {
           <button
             type="button"
             class="cb-galleria__thumb"
             role="tab"
             [class.cb-is-active]="activeIndex() === idx"
             [attr.aria-selected]="activeIndex() === idx"
-            [attr.aria-label]="item.title || ('Miniatura ' + (idx + 1))"
+            [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+            [attr.aria-label]="item.title || item.alt || fmt(t().thumbnail, idx + 1)"
             (click)="activeIndex.set(idx)"
+            (keydown)="onThumbKeydown($event)"
           >
-            <img
-              [src]="item.thumbnailImageSrc || item.itemImageSrc"
-              [alt]="item.alt || item.title || ''"
-            />
+            <img [src]="item.thumbnailImageSrc || item.itemImageSrc" alt="" />
           </button>
         }
       </div>