@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-selectbutton.mjs

@@ -128,7 +128,7 @@ class CbSelectButton {
         {{ labelOf(opt) }}
       </button>
     }
-  `, isInline: true, styles: [":host{display:inline-flex;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-selectbutton__btn{padding:0 var(--cb-space-4);height:2.5rem;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-selectbutton__btn:first-child{border-left:none}.cb-selectbutton__btn--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-selectbutton__btn--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-selectbutton__btn:hover:not(:disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-100)}.cb-selectbutton__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;z-index:1}.cb-selectbutton__btn.cb-is-selected{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-selectbutton__btn:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-invalid) .cb-selectbutton__btn{border-color:var(--cb-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-selectbutton__btn{padding:0 var(--cb-space-4);height:2.5rem;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-selectbutton__btn:first-child{border-left:none}.cb-selectbutton__btn--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-selectbutton__btn--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-selectbutton__btn:hover:not(:disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-hover)}.cb-selectbutton__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;z-index:1}.cb-selectbutton__btn.cb-is-selected{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-selectbutton__btn:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-invalid) .cb-selectbutton__btn{border-color:var(--cb-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSelectButton, decorators: [{
             type: Component,
@@ -158,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         {{ labelOf(opt) }}
       </button>
     }
-  `, styles: [":host{display:inline-flex;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-selectbutton__btn{padding:0 var(--cb-space-4);height:2.5rem;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-selectbutton__btn:first-child{border-left:none}.cb-selectbutton__btn--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-selectbutton__btn--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-selectbutton__btn:hover:not(:disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-100)}.cb-selectbutton__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;z-index:1}.cb-selectbutton__btn.cb-is-selected{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-selectbutton__btn:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-invalid) .cb-selectbutton__btn{border-color:var(--cb-color-danger)}\n"] }]
+  `, styles: [":host{display:inline-flex;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);overflow:hidden;font-family:var(--cb-font-sans)}.cb-selectbutton__btn{padding:0 var(--cb-space-4);height:2.5rem;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);background-color:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-selectbutton__btn:first-child{border-left:none}.cb-selectbutton__btn--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-selectbutton__btn--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-selectbutton__btn:hover:not(:disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-hover)}.cb-selectbutton__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;z-index:1}.cb-selectbutton__btn.cb-is-selected{background-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-selectbutton__btn:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}:host(.cb-is-invalid) .cb-selectbutton__btn{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-slider.mjs

@@ -1,22 +1,35 @@
 import * as i0 from '@angular/core';
-import { model, input, output, viewChild, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, booleanAttribute, output, viewChild, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
  * Control deslizante (slider) de CaribeNG, integrado con Angular Forms vía
- * `ControlValueAccessor`. Soporta arrastre con puntero y navegación por teclado.
+ * `ControlValueAccessor`. Soporta arrastre con puntero, teclado y un modo de
+ * rango con dos tiradores (patrón WAI-ARIA *multi-thumb slider*).
+ *
+ * - Un valor: `[(value)]` (número).
+ * - Rango: `range` + `[(rangeValue)]` (`[mínimo, máximo]`). Con Angular Forms,
+ *   el control recibe el número o el par según el modo.
  *
  * @example
  * ```html
- * <cb-slider formControlName="volumen" [min]="0" [max]="100" [step]="5" />
+ * <cb-slider formControlName="volumen" [min]="0" [max]="100" [step]="5" ariaLabel="Volumen" />
+ * <cb-slider range [(rangeValue)]="precio" [min]="0" [max]="2000000" [step]="50000"
+ *            [valueFormat]="{ style: 'currency', currency: 'COP', maximumFractionDigits: 0 }" showValue ariaLabel="Precio" />
  * ```
  */
 class CbSlider {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Valor en modo de un tirador. */
         this.value = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Valor en modo `range`: `[mínimo, máximo]`. */
+        this.rangeValue = model([0, 100], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
         this.min = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
         this.max = input(100, /* @ts-ignore */
@@ -25,35 +38,74 @@ class CbSlider {
         ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
         this.size = input('md', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Dos tiradores para elegir un rango (`[(rangeValue)]`). */
+        this.range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra el valor encima de cada tirador. */
+        this.showValue = input(false, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Formato del valor (texto visible y `aria-valuetext`). */
+        this.valueFormat = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+        /** Locale BCP 47 del formato (por defecto, el del navegador). */
+        this.locale = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: toBoolean });
         /** Estado de validación: inputs manuales + estado de Angular Forms. */
         this.fieldState = cbFieldState({ invalid: () => this.invalid() });
+        /** Nombre accesible; en modo rango se completa con "Mínimo" / "Máximo". */
         this.ariaLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.inputId = input(`cb-slider-${++nextUid}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        /** Valor nuevo (número o rango) cada vez que cambia. */
         this.changed = output();
+        this.rangeChanged = output();
         this.track = viewChild.required('track');
-        this.dragging = false;
+        /** Tirador que se arrastra o se movió por última vez (0 = mínimo, 1 = máximo). */
+        this.activeThumb = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeThumb" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-        this.percent = computed(() => {
-            const span = this.max() - this.min();
-            if (span <= 0)
-                return 0;
-            return Math.min(100, Math.max(0, ((this.value() - this.min()) / span) * 100));
+        this.formatter = computed(() => {
+            const vf = this.valueFormat();
+            return typeof vf === 'function' ? vf : new Intl.NumberFormat(this.locale(), vf).format;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+        this.lowPercent = computed(() => this.percentOf(this.range() ? this.rangeValue()[0] : this.min()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lowPercent" }] : /* istanbul ignore next */ []));
+        this.highPercent = computed(() => this.percentOf(this.range() ? this.rangeValue()[1] : this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highPercent" }] : /* istanbul ignore next */ []));
+        /** Datos de cada tirador: en rango, los límites de uno dependen del otro (no se cruzan). */
+        this.thumbs = computed(() => {
+            const fmt = this.formatter();
+            const label = this.ariaLabel();
+            if (!this.range()) {
+                const v = this.value();
+                return [{ index: 0, value: v, min: this.min(), max: this.max(), percent: this.percentOf(v), text: fmt(v), label }];
+            }
+            const [lo, hi] = this.rangeValue();
+            return [
+                { index: 0, value: lo, min: this.min(), max: hi, percent: this.percentOf(lo), text: fmt(lo), label: joinLabel(label, this.t().minimum) },
+                { index: 1, value: hi, min: lo, max: this.max(), percent: this.percentOf(hi), text: fmt(hi), label: joinLabel(label, this.t().maximum) },
+            ];
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
     }
     // --- ControlValueAccessor --------------------------------------------------
     writeValue(value) {
-        this.value.set(this.clampSnap(typeof value === 'number' ? value : this.min()));
+        if (Array.isArray(value)) {
+            const lo = this.clampSnap(value[0] ?? this.min());
+            const hi = this.clampSnap(value[1] ?? this.max());
+            this.rangeValue.set([Math.min(lo, hi), Math.max(lo, hi)]);
+        }
+        else {
+            this.value.set(this.clampSnap(typeof value === 'number' ? value : this.min()));
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -69,15 +121,13 @@ class CbSlider {
         if (this.isDisabled())
             return;
         event.preventDefault();
-        this.dragging = true;
         event.target.setPointerCapture?.(event.pointerId);
-        this.updateFromClientX(event.clientX);
-        const move = (e) => {
-            if (this.dragging)
-                this.updateFromClientX(e.clientX);
-        };
+        // En rango se arrastra el tirador más cercano al punto pulsado.
+        const thumb = this.range() ? this.nearestThumb(event.clientX) : 0;
+        this.activeThumb.set(thumb);
+        this.updateFromClientX(event.clientX, thumb);
+        const move = (e) => this.updateFromClientX(e.clientX, thumb);
         const up = () => {
-            this.dragging = false;
             this.onTouched();
             window.removeEventListener('pointermove', move);
             window.removeEventListener('pointerup', up);
@@ -85,20 +135,34 @@ class CbSlider {
         window.addEventListener('pointermove', move);
         window.addEventListener('pointerup', up);
     }
-    updateFromClientX(clientX) {
+    valueAtClientX(clientX) {
         const rect = this.track().nativeElement.getBoundingClientRect();
         if (rect.width <= 0)
-            return;
+            return null;
         const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
-        const raw = this.min() + ratio * (this.max() - this.min());
-        this.commit(this.clampSnap(raw));
+        return this.min() + ratio * (this.max() - this.min());
+    }
+    nearestThumb(clientX) {
+        const v = this.valueAtClientX(clientX);
+        if (v === null)
+            return this.activeThumb();
+        const [lo, hi] = this.rangeValue();
+        if (lo === hi)
+            return v > hi ? 1 : 0;
+        return Math.abs(v - lo) <= Math.abs(v - hi) ? 0 : 1;
+    }
+    updateFromClientX(clientX, thumb) {
+        const v = this.valueAtClientX(clientX);
+        if (v !== null)
+            this.setThumb(thumb, this.clampSnap(v));
     }
     // --- Teclado ---------------------------------------------------------------
-    onKeydown(event) {
+    onKeydown(event, thumb) {
         if (this.isDisabled())
             return;
         const step = this.step();
-        let next = this.value();
+        const current = this.range() ? this.rangeValue()[thumb] : this.value();
+        let next = current;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowUp':
@@ -124,9 +188,16 @@ class CbSlider {
                 return;
         }
         event.preventDefault();
-        this.commit(this.clampSnap(next));
+        this.activeThumb.set(thumb);
+        this.setThumb(thumb, this.clampSnap(next));
     }
     // --- Helpers ---------------------------------------------------------------
+    percentOf(v) {
+        const span = this.max() - this.min();
+        if (span <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, ((v - this.min()) / span) * 100));
+    }
     clampSnap(n) {
         const min = this.min();
         const max = this.max();
@@ -134,43 +205,59 @@ class CbSlider {
         const snapped = Math.round((n - min) / step) * step + min;
         return Math.min(max, Math.max(min, Number(snapped.toFixed(10))));
     }
-    commit(next) {
-        if (next === this.value())
+    /** Mueve un tirador sin cruzar el otro y avisa del cambio. */
+    setThumb(thumb, next) {
+        if (!this.range()) {
+            if (next === this.value())
+                return;
+            this.value.set(next);
+            this.onChange(next);
+            this.changed.emit(next);
             return;
-        this.value.set(next);
-        this.onChange(next);
-        this.changed.emit(next);
+        }
+        const [lo, hi] = this.rangeValue();
+        const updated = thumb === 0 ? [Math.min(next, hi), hi] : [lo, Math.max(next, lo)];
+        if (updated[0] === lo && updated[1] === hi)
+            return;
+        this.rangeValue.set(updated);
+        this.onChange(updated);
+        this.rangeChanged.emit(updated);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: CbSlider, isStandalone: true, selector: "cb-slider", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { properties: { "class.cb-is-invalid": "fieldState.invalid()", "class": "'cb-slider--' + size()", "class.cb-is-disabled": "isDisabled()" }, classAttribute: "cb-slider" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSlider, isStandalone: true, selector: "cb-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", changed: "changed", rangeChanged: "rangeChanged" }, host: { properties: { "class.cb-is-invalid": "fieldState.invalid()", "class": "'cb-slider--' + size()", "class.cb-is-disabled": "isDisabled()", "class.cb-slider--with-value": "showValue()" }, classAttribute: "cb-slider" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbSlider),
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      #track
-      class="cb-slider__track"
-      (pointerdown)="onPointerDown($event)"
-    >
-      <div class="cb-slider__range" [style.width.%]="percent()"></div>
-      <div
-        class="cb-slider__thumb"
-        [style.left.%]="percent()"
-        role="slider"
-        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-        [attr.tabindex]="isDisabled() ? -1 : 0"
-        [attr.aria-valuemin]="min()"
-        [attr.aria-valuemax]="max()"
-        [attr.aria-valuenow]="value()"
-        [attr.aria-label]="ariaLabel() || null"
-        [attr.aria-disabled]="isDisabled() ? 'true' : null"
-        (keydown)="onKeydown($event)"
-        (blur)="onTouched()"
-      ></div>
+    <div #track class="cb-slider__track" (pointerdown)="onPointerDown($event)">
+      <div class="cb-slider__range" [style.left.%]="range() ? lowPercent() : 0" [style.width.%]="range() ? highPercent() - lowPercent() : highPercent()"></div>
+      @for (thumb of thumbs(); track thumb.index) {
+        <div
+          class="cb-slider__thumb"
+          [class.cb-is-active]="activeThumb() === thumb.index"
+          [style.left.%]="thumb.percent"
+          role="slider"
+          [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+          [attr.tabindex]="isDisabled() ? -1 : 0"
+          [attr.aria-valuemin]="thumb.min"
+          [attr.aria-valuemax]="thumb.max"
+          [attr.aria-valuenow]="thumb.value"
+          [attr.aria-valuetext]="valueFormat() ? thumb.text : null"
+          [attr.aria-label]="thumb.label || null"
+          [attr.aria-disabled]="isDisabled() ? 'true' : null"
+          (keydown)="onKeydown($event, thumb.index)"
+          (focus)="activeThumb.set(thumb.index)"
+          (blur)="onTouched()"
+        >
+          @if (showValue()) {
+            <span class="cb-slider__value" aria-hidden="true">{{ thumb.text }}</span>
+          }
+        </div>
+      }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;padding:var(--cb-space-2) 0;--_thumb: 1.1rem;--_track-h: .375rem}:host(.cb-slider--sm){--_thumb: .9rem;--_track-h: .3rem}:host(.cb-slider--lg){--_thumb: 1.3rem;--_track-h: .45rem}.cb-slider__track{position:relative;height:var(--_track-h);border-radius:var(--cb-radius-full);background-color:var(--cb-color-surface-200);cursor:pointer;touch-action:none}.cb-slider__range{position:absolute;left:0;top:0;height:100%;border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500)}.cb-slider__thumb{position:absolute;top:50%;width:var(--_thumb);height:var(--_thumb);transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500);border:2px solid var(--cb-color-bg);box-shadow:var(--cb-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-slider__thumb:active{cursor:grabbing}.cb-slider__thumb:focus-visible{box-shadow:0 0 0 4px var(--cb-color-focus-ring)}:host(.cb-is-disabled){opacity:var(--cb-opacity-disabled, .55)}:host(.cb-is-disabled) .cb-slider__track,:host(.cb-is-disabled) .cb-slider__thumb{cursor:default}:host-context([data-theme=\"dark\"]) .cb-slider__track{background-color:var(--cb-color-surface-300)}:host(.cb-is-invalid) .cb-slider__track{box-shadow:0 0 0 2px var(--cb-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;padding:var(--cb-space-2) 0;--_thumb: 1.1rem;--_track-h: .375rem}:host(.cb-slider--sm){--_thumb: .9rem;--_track-h: .3rem}:host(.cb-slider--lg){--_thumb: 1.3rem;--_track-h: .45rem}.cb-slider__track{position:relative;height:var(--_track-h);border-radius:var(--cb-radius-full);background-color:var(--cb-color-border);cursor:pointer;touch-action:none}.cb-slider__range{position:absolute;left:0;top:0;height:100%;border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500)}.cb-slider__thumb{position:absolute;top:50%;width:var(--_thumb);height:var(--_thumb);transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500);border:2px solid var(--cb-color-bg);box-shadow:var(--cb-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-slider__thumb:active{cursor:grabbing}.cb-slider__thumb:focus-visible{box-shadow:0 0 0 4px var(--cb-color-focus-ring)}.cb-slider__thumb.cb-is-active{z-index:1}:host(.cb-slider--with-value){padding-top:2rem}.cb-slider__value{position:absolute;bottom:calc(100% + .4rem);left:50%;padding:.1rem .4rem;font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--cb-color-text);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);transform:translate(-50%);pointer-events:none}:host(.cb-is-disabled){opacity:var(--cb-opacity-disabled, .55)}:host(.cb-is-disabled) .cb-slider__track,:host(.cb-is-disabled) .cb-slider__thumb{cursor:default}:host(.cb-is-invalid) .cb-slider__track{box-shadow:0 0 0 2px var(--cb-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSlider, decorators: [{
             type: Component,
@@ -179,27 +266,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.cb-is-invalid]': 'fieldState.invalid()',
                         '[class]': "'cb-slider--' + size()",
                         '[class.cb-is-disabled]': 'isDisabled()',
+                        '[class.cb-slider--with-value]': 'showValue()',
                     }, template: `
-    <div
-      #track
-      class="cb-slider__track"
-      (pointerdown)="onPointerDown($event)"
-    >
-      <div class="cb-slider__range" [style.width.%]="percent()"></div>
-      <div
-        class="cb-slider__thumb"
-        [style.left.%]="percent()"
-        role="slider"
-        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-        [attr.tabindex]="isDisabled() ? -1 : 0"
-        [attr.aria-valuemin]="min()"
-        [attr.aria-valuemax]="max()"
-        [attr.aria-valuenow]="value()"
-        [attr.aria-label]="ariaLabel() || null"
-        [attr.aria-disabled]="isDisabled() ? 'true' : null"
-        (keydown)="onKeydown($event)"
-        (blur)="onTouched()"
-      ></div>
+    <div #track class="cb-slider__track" (pointerdown)="onPointerDown($event)">
+      <div class="cb-slider__range" [style.left.%]="range() ? lowPercent() : 0" [style.width.%]="range() ? highPercent() - lowPercent() : highPercent()"></div>
+      @for (thumb of thumbs(); track thumb.index) {
+        <div
+          class="cb-slider__thumb"
+          [class.cb-is-active]="activeThumb() === thumb.index"
+          [style.left.%]="thumb.percent"
+          role="slider"
+          [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+          [attr.tabindex]="isDisabled() ? -1 : 0"
+          [attr.aria-valuemin]="thumb.min"
+          [attr.aria-valuemax]="thumb.max"
+          [attr.aria-valuenow]="thumb.value"
+          [attr.aria-valuetext]="valueFormat() ? thumb.text : null"
+          [attr.aria-label]="thumb.label || null"
+          [attr.aria-disabled]="isDisabled() ? 'true' : null"
+          (keydown)="onKeydown($event, thumb.index)"
+          (focus)="activeThumb.set(thumb.index)"
+          (blur)="onTouched()"
+        >
+          @if (showValue()) {
+            <span class="cb-slider__value" aria-hidden="true">{{ thumb.text }}</span>
+          }
+        </div>
+      }
     </div>
   `, providers: [
                         {
@@ -207,11 +300,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => CbSlider),
                             multi: true,
                         },
-                    ], styles: [":host{display:block;width:100%;padding:var(--cb-space-2) 0;--_thumb: 1.1rem;--_track-h: .375rem}:host(.cb-slider--sm){--_thumb: .9rem;--_track-h: .3rem}:host(.cb-slider--lg){--_thumb: 1.3rem;--_track-h: .45rem}.cb-slider__track{position:relative;height:var(--_track-h);border-radius:var(--cb-radius-full);background-color:var(--cb-color-surface-200);cursor:pointer;touch-action:none}.cb-slider__range{position:absolute;left:0;top:0;height:100%;border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500)}.cb-slider__thumb{position:absolute;top:50%;width:var(--_thumb);height:var(--_thumb);transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500);border:2px solid var(--cb-color-bg);box-shadow:var(--cb-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-slider__thumb:active{cursor:grabbing}.cb-slider__thumb:focus-visible{box-shadow:0 0 0 4px var(--cb-color-focus-ring)}:host(.cb-is-disabled){opacity:var(--cb-opacity-disabled, .55)}:host(.cb-is-disabled) .cb-slider__track,:host(.cb-is-disabled) .cb-slider__thumb{cursor:default}:host-context([data-theme=\"dark\"]) .cb-slider__track{background-color:var(--cb-color-surface-300)}:host(.cb-is-invalid) .cb-slider__track{box-shadow:0 0 0 2px var(--cb-color-danger)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+                    ], styles: [":host{display:block;width:100%;padding:var(--cb-space-2) 0;--_thumb: 1.1rem;--_track-h: .375rem}:host(.cb-slider--sm){--_thumb: .9rem;--_track-h: .3rem}:host(.cb-slider--lg){--_thumb: 1.3rem;--_track-h: .45rem}.cb-slider__track{position:relative;height:var(--_track-h);border-radius:var(--cb-radius-full);background-color:var(--cb-color-border);cursor:pointer;touch-action:none}.cb-slider__range{position:absolute;left:0;top:0;height:100%;border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500)}.cb-slider__thumb{position:absolute;top:50%;width:var(--_thumb);height:var(--_thumb);transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background-color:var(--cb-color-primary-500);border:2px solid var(--cb-color-bg);box-shadow:var(--cb-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-slider__thumb:active{cursor:grabbing}.cb-slider__thumb:focus-visible{box-shadow:0 0 0 4px var(--cb-color-focus-ring)}.cb-slider__thumb.cb-is-active{z-index:1}:host(.cb-slider--with-value){padding-top:2rem}.cb-slider__value{position:absolute;bottom:calc(100% + .4rem);left:50%;padding:.1rem .4rem;font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--cb-color-text);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);transform:translate(-50%);pointer-events:none}:host(.cb-is-disabled){opacity:var(--cb-opacity-disabled, .55)}:host(.cb-is-disabled) .cb-slider__track,:host(.cb-is-disabled) .cb-slider__thumb{cursor:default}:host(.cb-is-invalid) .cb-slider__track{box-shadow:0 0 0 2px var(--cb-color-danger)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], rangeChanged: [{ type: i0.Output, args: ["rangeChanged"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }
+function joinLabel(label, suffix) {
+    return label ? `${label} ${suffix.toLocaleLowerCase()}` : suffix;
+}
 
 /*
  * Public API Surface de @caribeng/ui/slider

package/fesm2022/caribeng-ui-speeddial.mjs

@@ -1,9 +1,12 @@
 import * as i0 from '@angular/core';
 import { input, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 class CbSpeedDial {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.direction = input('up', /* @ts-ignore */
@@ -12,9 +15,9 @@ class CbSpeedDial {
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         this.closeIcon = input('x', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closeIcon" }] : /* istanbul ignore next */ []));
-        this.openLabel = input('Abrir acciones', /* @ts-ignore */
+        this.openLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "openLabel" }] : /* istanbul ignore next */ []));
-        this.closeLabel = input('Cerrar acciones', /* @ts-ignore */
+        this.closeLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
         this.open = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -46,7 +49,7 @@ class CbSpeedDial {
       class="cb-speed-dial__trigger"
       type="button"
       [attr.aria-expanded]="open()"
-      [attr.aria-label]="open() ? closeLabel() : openLabel()"
+      [attr.aria-label]="open() ? (closeLabel() ?? t().closeActions) : (openLabel() ?? t().openActions)"
       (click)="open.set(!open())"
     ><cb-icon [name]="open() ? closeIcon() : icon()" [size]="20" aria-hidden="true" /></button>
   `, isInline: true, styles: [":host{display:inline-flex;position:relative;align-items:center;justify-content:center;color:var(--cb-color-text)}.cb-speed-dial__trigger,.cb-speed-dial__action{display:grid;place-items:center;border:0;border-radius:50%;color:var(--cb-color-primary-contrast, #fff);background:var(--cb-color-primary);box-shadow:var(--cb-shadow-md);cursor:pointer;transition:transform var(--cb-duration-fast, .12s) ease,opacity var(--cb-duration-fast, .12s) ease}.cb-speed-dial__trigger{z-index:1;width:3rem;height:3rem}.cb-speed-dial__actions{position:absolute;display:flex;align-items:center;gap:.5rem}.cb-speed-dial__action{width:2.5rem;height:2.5rem;background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border)}.cb-speed-dial__action:disabled{opacity:.5;cursor:default}.cb-speed-dial__trigger:hover,.cb-speed-dial__action:hover:not(:disabled),.cb-speed-dial__trigger:focus-visible,.cb-speed-dial__action:focus-visible{outline:2px solid var(--cb-color-primary);outline-offset:2px;transform:scale(1.06)}:host(.cb-speed-dial--up) .cb-speed-dial__actions{bottom:calc(100% + .5rem);flex-direction:column-reverse}:host(.cb-speed-dial--down) .cb-speed-dial__actions{top:calc(100% + .5rem);flex-direction:column}:host(.cb-speed-dial--left) .cb-speed-dial__actions{right:calc(100% + .5rem);flex-direction:row-reverse}:host(.cb-speed-dial--right) .cb-speed-dial__actions{left:calc(100% + .5rem);flex-direction:row}@media(prefers-reduced-motion:reduce){.cb-speed-dial__trigger,.cb-speed-dial__action{transition:none}}:host-context([data-theme=\"dark\"]) .cb-speed-dial__action{color:var(--cb-color-text)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -79,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       class="cb-speed-dial__trigger"
       type="button"
       [attr.aria-expanded]="open()"
-      [attr.aria-label]="open() ? closeLabel() : openLabel()"
+      [attr.aria-label]="open() ? (closeLabel() ?? t().closeActions) : (openLabel() ?? t().openActions)"
       (click)="open.set(!open())"
     ><cb-icon [name]="open() ? closeIcon() : icon()" [size]="20" aria-hidden="true" /></button>
   `, styles: [":host{display:inline-flex;position:relative;align-items:center;justify-content:center;color:var(--cb-color-text)}.cb-speed-dial__trigger,.cb-speed-dial__action{display:grid;place-items:center;border:0;border-radius:50%;color:var(--cb-color-primary-contrast, #fff);background:var(--cb-color-primary);box-shadow:var(--cb-shadow-md);cursor:pointer;transition:transform var(--cb-duration-fast, .12s) ease,opacity var(--cb-duration-fast, .12s) ease}.cb-speed-dial__trigger{z-index:1;width:3rem;height:3rem}.cb-speed-dial__actions{position:absolute;display:flex;align-items:center;gap:.5rem}.cb-speed-dial__action{width:2.5rem;height:2.5rem;background:var(--cb-color-surface-raised);color:var(--cb-color-text);border:1px solid var(--cb-color-border)}.cb-speed-dial__action:disabled{opacity:.5;cursor:default}.cb-speed-dial__trigger:hover,.cb-speed-dial__action:hover:not(:disabled),.cb-speed-dial__trigger:focus-visible,.cb-speed-dial__action:focus-visible{outline:2px solid var(--cb-color-primary);outline-offset:2px;transform:scale(1.06)}:host(.cb-speed-dial--up) .cb-speed-dial__actions{bottom:calc(100% + .5rem);flex-direction:column-reverse}:host(.cb-speed-dial--down) .cb-speed-dial__actions{top:calc(100% + .5rem);flex-direction:column}:host(.cb-speed-dial--left) .cb-speed-dial__actions{right:calc(100% + .5rem);flex-direction:row-reverse}:host(.cb-speed-dial--right) .cb-speed-dial__actions{left:calc(100% + .5rem);flex-direction:row}@media(prefers-reduced-motion:reduce){.cb-speed-dial__trigger,.cb-speed-dial__action{transition:none}}:host-context([data-theme=\"dark\"]) .cb-speed-dial__action{color:var(--cb-color-text)}\n"] }]

package/fesm2022/caribeng-ui-spinner.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Spinner de CaribeNG: indicador de carga circular.
@@ -12,6 +13,8 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbSpinner {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Tamaño en píxeles. */
         this.size = input(32, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -24,7 +27,7 @@ class CbSpinner {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbSpinner, isStandalone: true, selector: "cb-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "'cb-spinner cb-spinner--' + severity()", "attr.aria-label": "ariaLabel() || 'Cargando'" }, classAttribute: "cb-spinner" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbSpinner, isStandalone: true, selector: "cb-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "'cb-spinner cb-spinner--' + severity()", "attr.aria-label": "ariaLabel() || t().loading" }, classAttribute: "cb-spinner" }, ngImport: i0, template: `
     <svg
       class="cb-spinner__svg"
       [attr.width]="size()"
@@ -43,7 +46,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: 'cb-spinner',
                         '[class]': "'cb-spinner cb-spinner--' + severity()",
                         role: 'status',
-                        '[attr.aria-label]': "ariaLabel() || 'Cargando'",
+                        '[attr.aria-label]': 'ariaLabel() || t().loading',
                     }, template: `
     <svg
       class="cb-spinner__svg"