@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-repeater.mjs

@@ -0,0 +1,223 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, Injector, contentChild, input, output, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/** Plantilla de cada elemento: `<ng-template cbRepeaterItem let-grupo let-i="index">`. */
+class CbRepeaterItem {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbRepeaterItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbRepeaterItem, isStandalone: true, selector: "ng-template[cbRepeaterItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbRepeaterItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cbRepeaterItem]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Repeater de CaribeNG: lista repetible de campos sobre un `FormArray`
+ * ("Agregar beneficiario"). Cada elemento es un grupo nombrado con su botón de
+ * quitar; respeta `min` y `max`, mueve el foco al agregar y quitar, y anuncia
+ * los cambios al lector de pantalla.
+ *
+ * @example
+ * ```html
+ * <cb-repeater [formArray]="beneficiarios" [createItem]="nuevoBeneficiario" itemLabel="Beneficiario" [max]="5">
+ *   <ng-template cbRepeaterItem let-grupo>
+ *     <ng-container [formGroup]="grupo">
+ *       <cb-input label="Nombre" formControlName="nombre" />
+ *     </ng-container>
+ *   </ng-template>
+ * </cb-repeater>
+ * ```
+ */
+class CbRepeater {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.itemTemplate = contentChild(CbRepeaterItem, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /** FormArray con un control por elemento. */
+        this.formArray = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formArray" }] : /* istanbul ignore next */ []));
+        /** Crea el control de un elemento nuevo (p. ej. `() => fb.group({ nombre: [''] })`). */
+        this.createItem = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "createItem" }] : /* istanbul ignore next */ []));
+        /** Nombre de cada elemento ("Beneficiario" → "Beneficiario 1", "Beneficiario 2"…). Por defecto, "Elemento" del idioma activo. */
+        this.itemLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []));
+        /** Texto del botón de agregar. Por defecto, "Agregar beneficiario". */
+        this.addLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addLabel" }] : /* istanbul ignore next */ []));
+        /** Mínimo de elementos (no se puede quitar por debajo). */
+        this.min = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Máximo de elementos (el botón de agregar se deshabilita). */
+        this.max = input(Number.POSITIVE_INFINITY, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.itemAdd = output();
+        this.itemRemove = output();
+        /** Controles del FormArray (se actualiza también si el FormArray cambia desde fuera). */
+        this.controls = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.canAdd = computed(() => !this.disabled() && this.controls().length < this.max(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canAdd" }] : /* istanbul ignore next */ []));
+        this.addText = computed(() => {
+            const label = this.itemLabel();
+            return this.addLabel() ?? (label ? `${this.t().add} ${label.toLocaleLowerCase()}` : this.t().add);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addText" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const array = this.formArray();
+            const sync = () => this.controls.set([...array.controls]);
+            sync();
+            const sub = array.valueChanges.subscribe(sync);
+            onCleanup(() => sub.unsubscribe());
+        });
+    }
+    labelFor(index) {
+        const label = this.itemLabel();
+        return label ? `${label} ${index + 1}` : cbFormat(this.t().chartItem, index + 1);
+    }
+    /** Agrega un elemento al final y lleva el foco a su primer campo. */
+    add() {
+        if (!this.canAdd())
+            return;
+        const array = this.formArray();
+        array.push(this.createItem()());
+        array.markAsDirty();
+        const index = array.length - 1;
+        this.controls.set([...array.controls]);
+        this.announcement.set(cbFormat(this.t().itemAdded, this.labelFor(index)));
+        this.itemAdd.emit(index);
+        this.focusAfterRender(() => {
+            const item = this.host.nativeElement.querySelector(`.cb-repeater__item[data-index="${index}"]`);
+            return item?.querySelector('.cb-repeater__body :is(input, select, textarea, button, [tabindex]:not([tabindex="-1"]))') ?? null;
+        });
+    }
+    /** Quita un elemento y deja el foco en el anterior (o en el botón de agregar). */
+    remove(index) {
+        const array = this.formArray();
+        if (array.length <= this.min() || this.disabled())
+            return;
+        const label = this.labelFor(index);
+        array.removeAt(index);
+        array.markAsDirty();
+        this.controls.set([...array.controls]);
+        this.announcement.set(cbFormat(this.t().itemRemoved, label));
+        this.itemRemove.emit(index);
+        // El foco pasa al botón de quitar del elemento anterior (o del nuevo primero); si no queda ninguno, a "Agregar".
+        this.focusAfterRender(() => {
+            const next = array.length ? Math.max(0, index - 1) : -1;
+            const item = next >= 0 ? this.host.nativeElement.querySelector(`.cb-repeater__item[data-index="${next}"]`) : null;
+            const remove = item?.querySelector('.cb-repeater__remove button:not(:disabled)');
+            return remove ?? this.host.nativeElement.querySelector('.cb-repeater__add button');
+        });
+    }
+    focusAfterRender(find) {
+        afterNextRender(() => find()?.focus(), { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbRepeater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbRepeater, isStandalone: true, selector: "cb-repeater", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, createItem: { classPropertyName: "createItem", publicName: "createItem", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdd: "itemAdd", itemRemove: "itemRemove" }, host: { classAttribute: "cb-repeater" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CbRepeaterItem, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @for (control of controls(); track control; let i = $index) {
+      <div class="cb-repeater__item" role="group" [attr.aria-label]="labelFor(i)" [attr.data-index]="i">
+        <div class="cb-repeater__head">
+          <span class="cb-repeater__title">{{ labelFor(i) }}</span>
+          <cb-button
+            class="cb-repeater__remove"
+            variant="text"
+            severity="secondary"
+            size="sm"
+            [disabled]="controls().length <= min() || disabled()"
+            [ariaLabel]="fmt(t().removeItem, labelFor(i))"
+            (click)="remove(i)"
+          >
+            <cb-icon name="trash" [size]="15" aria-hidden="true" />
+          </cb-button>
+        </div>
+        @if (itemTemplate(); as tpl) {
+          <div class="cb-repeater__body">
+            <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: control, index: i, label: labelFor(i) }" />
+          </div>
+        }
+      </div>
+    }
+    <cb-button
+      class="cb-repeater__add"
+      variant="outlined"
+      size="sm"
+      [disabled]="!canAdd()"
+      (click)="add()"
+    >
+      <cb-icon name="plus" [size]="15" aria-hidden="true" />
+      {{ addText() }}
+    </cb-button>
+    <span class="cb-repeater__sr" aria-live="polite">{{ announcement() }}</span>
+  `, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit)}.cb-repeater__item{display:grid;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-4, 1rem);background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem)}.cb-repeater__head{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2, .5rem)}.cb-repeater__title{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-repeater__body{display:grid;gap:var(--cb-space-3, .75rem)}.cb-repeater__add{justify-self:start}.cb-repeater__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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbRepeater, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-repeater', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbButton, CbIcon], host: { class: 'cb-repeater' }, template: `
+    @for (control of controls(); track control; let i = $index) {
+      <div class="cb-repeater__item" role="group" [attr.aria-label]="labelFor(i)" [attr.data-index]="i">
+        <div class="cb-repeater__head">
+          <span class="cb-repeater__title">{{ labelFor(i) }}</span>
+          <cb-button
+            class="cb-repeater__remove"
+            variant="text"
+            severity="secondary"
+            size="sm"
+            [disabled]="controls().length <= min() || disabled()"
+            [ariaLabel]="fmt(t().removeItem, labelFor(i))"
+            (click)="remove(i)"
+          >
+            <cb-icon name="trash" [size]="15" aria-hidden="true" />
+          </cb-button>
+        </div>
+        @if (itemTemplate(); as tpl) {
+          <div class="cb-repeater__body">
+            <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: control, index: i, label: labelFor(i) }" />
+          </div>
+        }
+      </div>
+    }
+    <cb-button
+      class="cb-repeater__add"
+      variant="outlined"
+      size="sm"
+      [disabled]="!canAdd()"
+      (click)="add()"
+    >
+      <cb-icon name="plus" [size]="15" aria-hidden="true" />
+      {{ addText() }}
+    </cb-button>
+    <span class="cb-repeater__sr" aria-live="polite">{{ announcement() }}</span>
+  `, styles: [":host{display:grid;gap:var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit)}.cb-repeater__item{display:grid;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-4, 1rem);background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem)}.cb-repeater__head{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2, .5rem)}.cb-repeater__title{font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-repeater__body{display:grid;gap:var(--cb-space-3, .75rem)}.cb-repeater__add{justify-self:start}.cb-repeater__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: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbRepeaterItem), { isSignal: true }] }], formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], createItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "createItem", required: true }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemAdd: [{ type: i0.Output, args: ["itemAdd"] }], itemRemove: [{ type: i0.Output, args: ["itemRemove"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/repeater
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbRepeater, CbRepeaterItem };

package/fesm2022/caribeng-ui-result.mjs

@@ -0,0 +1,91 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CbIcon } from '@caribeng/ui/icon';
+
+const ICONS = {
+    success: 'circle-check',
+    error: 'circle-x',
+    warning: 'triangle-alert',
+    info: 'info',
+    '404': 'search',
+    '403': 'lock',
+    '500': 'circle-alert',
+};
+/**
+ * Result de CaribeNG: pantalla de resultado (operación exitosa, error,
+ * aviso) o de error HTTP (404, 403, 500) con título, subtítulo, contenido extra
+ * y acciones proyectadas.
+ *
+ * @example
+ * ```html
+ * <cb-result status="success" title="Transferencia enviada" subtitle="Comprobante #48213">
+ *   <cb-button>Volver al inicio</cb-button>
+ * </cb-result>
+ * ```
+ */
+class CbResult {
+    constructor() {
+        /** Tipo de resultado: define el icono y el color. */
+        this.status = input('info', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.subtitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /** Icono propio (en lugar del del estado). */
+        this.icon = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Nivel del encabezado del título (por defecto 2). */
+        this.headingLevel = input(2, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+        this.isHttp = computed(() => /^\d{3}$/.test(this.status()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHttp" }] : /* istanbul ignore next */ []));
+        this.defaultIcon = computed(() => ICONS[this.status()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
+        /** Los errores HTTP usan el color neutro; los demás, el de su estado. */
+        this.statusClass = computed(() => (this.isHttp() ? 'http' : this.status()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statusClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbResult, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbResult, isStandalone: true, selector: "cb-result", inputs: { status: { classPropertyName: "status", publicName: "status", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'cb-result cb-result--' + statusClass()" }, classAttribute: "cb-result" }, ngImport: i0, template: `
+    @if (isHttp()) {
+      <span class="cb-result__code" aria-hidden="true">{{ status() }}</span>
+    } @else {
+      <span class="cb-result__icon" aria-hidden="true">
+        <cb-icon [name]="icon() ?? defaultIcon()" [size]="40" />
+      </span>
+    }
+    <div class="cb-result__title" role="heading" [attr.aria-level]="headingLevel()">{{ title() }}</div>
+    @if (subtitle()) {
+      <p class="cb-result__subtitle">{{ subtitle() }}</p>
+    }
+    <div class="cb-result__content"><ng-content /></div>
+  `, isInline: true, styles: [":host{--_accent: var(--cb-color-info-500);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-result--success){--_accent: var(--cb-color-success-500)}:host(.cb-result--error){--_accent: var(--cb-color-danger-500)}:host(.cb-result--warning){--_accent: var(--cb-color-warning-500)}:host(.cb-result--info){--_accent: var(--cb-color-info-500)}:host(.cb-result--http){--_accent: var(--cb-color-primary-500)}.cb-result__icon{display:inline-flex;align-items:center;justify-content:center;width:5rem;height:5rem;margin-bottom:var(--cb-space-2, .5rem);color:var(--_accent);background-color:color-mix(in srgb,var(--_accent) 14%,transparent);border-radius:999px}.cb-result__code{font-size:clamp(3.5rem,12vw,6rem);font-weight:var(--cb-font-weight-bold, 700);line-height:1;letter-spacing:-.04em;color:var(--_accent)}.cb-result__title{margin:0;font-size:var(--cb-text-xl, 1.25rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-result__subtitle{max-width:32rem;margin:0;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-result__content{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-4, 1rem)}.cb-result__content: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: CbResult, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-result', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-result', '[class]': "'cb-result cb-result--' + statusClass()" }, template: `
+    @if (isHttp()) {
+      <span class="cb-result__code" aria-hidden="true">{{ status() }}</span>
+    } @else {
+      <span class="cb-result__icon" aria-hidden="true">
+        <cb-icon [name]="icon() ?? defaultIcon()" [size]="40" />
+      </span>
+    }
+    <div class="cb-result__title" role="heading" [attr.aria-level]="headingLevel()">{{ title() }}</div>
+    @if (subtitle()) {
+      <p class="cb-result__subtitle">{{ subtitle() }}</p>
+    }
+    <div class="cb-result__content"><ng-content /></div>
+  `, styles: [":host{--_accent: var(--cb-color-info-500);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-result--success){--_accent: var(--cb-color-success-500)}:host(.cb-result--error){--_accent: var(--cb-color-danger-500)}:host(.cb-result--warning){--_accent: var(--cb-color-warning-500)}:host(.cb-result--info){--_accent: var(--cb-color-info-500)}:host(.cb-result--http){--_accent: var(--cb-color-primary-500)}.cb-result__icon{display:inline-flex;align-items:center;justify-content:center;width:5rem;height:5rem;margin-bottom:var(--cb-space-2, .5rem);color:var(--_accent);background-color:color-mix(in srgb,var(--_accent) 14%,transparent);border-radius:999px}.cb-result__code{font-size:clamp(3.5rem,12vw,6rem);font-weight:var(--cb-font-weight-bold, 700);line-height:1;letter-spacing:-.04em;color:var(--_accent)}.cb-result__title{margin:0;font-size:var(--cb-text-xl, 1.25rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-strong)}.cb-result__subtitle{max-width:32rem;margin:0;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted)}.cb-result__content{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem);margin-top:var(--cb-space-4, 1rem)}.cb-result__content:empty{display:none}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/result
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbResult };

package/fesm2022/caribeng-ui-ripple.mjs

@@ -15,6 +15,8 @@ class CbRippleDirective {
     onPointerDown(event) {
         if (this.cbRippleDisabled())
             return;
+        if (this.hostRef.nativeElement.ownerDocument.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+            return;
         const host = this.hostRef.nativeElement;
         const rect = host.getBoundingClientRect();
         const size = Math.max(rect.width, rect.height, 48);

package/fesm2022/caribeng-ui-scrollpanel.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * ScrollPanel de CaribeNG: contenedor de desplazamiento con barras estilizadas
@@ -14,6 +15,8 @@ import { input, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component
  */
 class CbScrollPanel {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Ancho CSS del contenedor (ej. `'100%'`, `'320px'`). */
         this.width = input('100%', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
@@ -21,7 +24,7 @@ class CbScrollPanel {
         this.height = input('200px', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         /** Etiqueta accesible para la región con scroll. */
-        this.ariaLabel = input('Área desplazable', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.viewportRef = viewChild('viewport', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* istanbul ignore next */ []));
@@ -40,7 +43,7 @@ class CbScrollPanel {
       class="cb-scroll-panel__viewport"
       role="region"
       tabindex="0"
-      [attr.aria-label]="ariaLabel() || 'Área desplazable'"
+      [attr.aria-label]="(ariaLabel() ?? t().scrollableArea)"
     >
       <div class="cb-scroll-panel__content">
         <ng-content />
@@ -60,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       class="cb-scroll-panel__viewport"
       role="region"
       tabindex="0"
-      [attr.aria-label]="ariaLabel() || 'Área desplazable'"
+      [attr.aria-label]="(ariaLabel() ?? t().scrollableArea)"
     >
       <div class="cb-scroll-panel__content">
         <ng-content />

package/fesm2022/caribeng-ui-scrolltop.mjs

@@ -2,6 +2,7 @@ import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, DestroyRef, input, signal, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * ScrollTop de CaribeNG: botón flotante que aparece cuando el usuario supera
@@ -19,6 +20,8 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbScrollTop {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.doc = inject(DOCUMENT);
         this.hostRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
@@ -35,7 +38,7 @@ class CbScrollTop {
         this.icon = input('chevron-up', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /** Etiqueta accesible para el botón. */
-        this.ariaLabel = input('Volver arriba', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.visible = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
@@ -88,7 +91,9 @@ class CbScrollTop {
         }
     }
     scrollToTop() {
-        const behavior = this.behavior();
+        // Con "reducir movimiento" en el sistema, el desplazamiento es instantáneo.
+        const reduce = this.doc.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        const behavior = reduce ? 'auto' : this.behavior();
         if (this.target() === 'parent') {
             const parentEl = this.getParentTarget();
             if (!parentEl)
@@ -117,7 +122,7 @@ class CbScrollTop {
       <button
         type="button"
         class="cb-scroll-top__button"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-label]="(ariaLabel() ?? t().scrollTop)"
         (click)="scrollToTop()"
       >
         <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />
@@ -136,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <button
         type="button"
         class="cb-scroll-top__button"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-label]="(ariaLabel() ?? t().scrollTop)"
         (click)="scrollToTop()"
       >
         <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />