@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-picklist.mjs

@@ -1,34 +1,271 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, model, input, output, contentChild, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/** Plantilla de cada elemento de un `<cb-picklist>`. */
+class CbPickListItemTemplate {
+    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: CbPickListItemTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbPickListItemTemplate, isStandalone: true, selector: "ng-template[cbPickListItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPickListItemTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbPickListItem]' }]
+        }] });
+let nextUid = 0;
+/**
+ * PickList de CaribeNG: transfiere elementos entre una lista de disponibles y
+ * otra de seleccionados, con botones, doble clic o teclado (Espacio marca,
+ * Enter transfiere).
+ *
+ * @example
+ * ```html
+ * <cb-picklist [(source)]="disponibles" [(target)]="asignados" sourceHeader="Permisos" targetHeader="Asignados">
+ *   <ng-template cbPickListItem let-permiso>{{ permiso.nombre }}</ng-template>
+ * </cb-picklist>
+ * ```
+ */
 class CbPickList {
     constructor() {
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.uid = `cb-picklist-${++nextUid}`;
+        /** Elementos disponibles (two-way). */
         this.source = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+        /** Elementos seleccionados (two-way). */
         this.target = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-        this.selected = signal(new Set(), /* @ts-ignore */
+        /** Título de la lista de origen. Por defecto, "Disponibles" del idioma activo. */
+        this.sourceHeader = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sourceHeader" }] : /* istanbul ignore next */ []));
+        /** Título de la lista de destino. Por defecto, "Seleccionados" del idioma activo. */
+        this.targetHeader = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "targetHeader" }] : /* istanbul ignore next */ []));
+        /** Se emite tras transferir elementos. */
+        this.moved = output();
+        this.itemTemplate = contentChild(CbPickListItemTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /** Posiciones marcadas en cada lista. */
+        this.selected = signal({ source: new Set(), target: new Set() }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.focused = signal({ source: 0, target: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    }
+    headerId(side) {
+        return `${this.uid}-${side}`;
+    }
+    isSelected(side, index) {
+        return this.selected()[side].has(index);
+    }
+    tabbable(side) {
+        const max = this.list(side).length - 1;
+        return Math.max(0, Math.min(this.focused()[side], max));
+    }
+    setFocused(side, index) {
+        this.focused.update((f) => ({ ...f, [side]: index }));
+    }
+    toggle(side, index) {
+        const next = new Set(this.selected()[side]);
+        if (next.has(index))
+            next.delete(index);
+        else
+            next.add(index);
+        this.selected.update((s) => ({ ...s, [side]: next }));
+        this.setFocused(side, index);
     }
-    toggle(item) { const s = new Set(this.selected()); s.has(item) ? s.delete(item) : s.add(item); this.selected.set(s); }
-    move(toTarget) { const moving = [...this.selected()]; if (toTarget) {
-        this.source.set(this.source().filter(x => !this.selected().has(x)));
-        this.target.set([...this.target(), ...moving]);
+    /** Transfiere los elementos marcados al lado indicado. */
+    move(to) {
+        const from = to === 'target' ? 'source' : 'target';
+        this.transfer(from, [...this.selected()[from]].sort((a, b) => a - b));
+    }
+    /** Transfiere todos los elementos al lado indicado. */
+    moveAll(to) {
+        const from = to === 'target' ? 'source' : 'target';
+        this.transfer(from, this.list(from).map((_, i) => i));
+    }
+    /** Transfiere un único elemento al otro lado (doble clic). */
+    moveOne(from, index) {
+        this.transfer(from, [index]);
+    }
+    onKeydown(event, side) {
+        const count = this.list(side).length;
+        if (!count)
+            return;
+        const current = this.tabbable(side);
+        let target = -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = Math.min(count - 1, current + 1);
+                break;
+            case 'ArrowUp':
+                target = Math.max(0, current - 1);
+                break;
+            case 'Home':
+                target = 0;
+                break;
+            case 'End':
+                target = count - 1;
+                break;
+            case ' ':
+                this.toggle(side, current);
+                break;
+            case 'Enter':
+                // Transfiere los marcados; si no hay ninguno, el enfocado.
+                if (this.selected()[side].size)
+                    this.move(side === 'source' ? 'target' : 'source');
+                else
+                    this.moveOne(side, current);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target >= 0) {
+            this.setFocused(side, target);
+            this.host.nativeElement
+                .querySelectorAll(`[data-side="${side}"] [role="option"]`)[target]?.focus();
+        }
+    }
+    list(side) {
+        return side === 'source' ? this.source() : this.target();
+    }
+    transfer(from, indices) {
+        if (!indices.length)
+            return;
+        const to = from === 'source' ? 'target' : 'source';
+        const picked = new Set(indices);
+        const items = this.list(from).filter((_, i) => picked.has(i));
+        const remaining = this.list(from).filter((_, i) => !picked.has(i));
+        const destination = [...this.list(to), ...items];
+        (from === 'source' ? this.source : this.target).set(remaining);
+        (to === 'source' ? this.source : this.target).set(destination);
+        this.selected.set({ source: new Set(), target: new Set() });
+        this.moved.emit({ to, items });
     }
-    else {
-        this.target.set(this.target().filter(x => !this.selected().has(x)));
-        this.source.set([...this.source(), ...moving]);
-    } this.selected.set(new Set()); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPickList, isStandalone: true, selector: "cb-picklist", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", target: "targetChange" }, ngImport: i0, template: `<div class="cb-picklist">@for(list of [source(),target()];track $index){<section><h3>{{ $index===0?'Disponibles':'Seleccionados' }}</h3><ul role="listbox" [attr.aria-label]="$index===0?'Disponibles':'Seleccionados'">@for(item of list;track item){<li role="option" tabindex="0" [attr.aria-selected]="selected().has(item)" (click)="toggle(item)">{{item}}</li>}</ul></section>}<nav><button type="button" aria-label="Mover a seleccionados" (click)="move(true)">→</button><button type="button" aria-label="Devolver a disponibles" (click)="move(false)">←</button></nav></div>`, isInline: true, styles: [":host{display:block}.cb-picklist{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}.cb-picklist h3{font-size:.95rem}.cb-picklist ul{height:12rem;overflow:auto;list-style:none;padding:.25rem;margin:0;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-picklist li{padding:.55rem;cursor:pointer}.cb-picklist li[aria-selected=true]{background:var(--cb-color-primary,#10b981);color:#fff}.cb-picklist nav{display:grid;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPickList, isStandalone: true, selector: "cb-picklist", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, sourceHeader: { classPropertyName: "sourceHeader", publicName: "sourceHeader", isSignal: true, isRequired: false, transformFunction: null }, targetHeader: { classPropertyName: "targetHeader", publicName: "targetHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", target: "targetChange", moved: "moved" }, host: { classAttribute: "cb-picklist-host" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CbPickListItemTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-picklist">
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'source', items: source(), header: sourceHeader() ?? t().available }" />
+
+      <div class="cb-picklist__controls">
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToTarget" [disabled]="!selected().source.size" (click)="move('target')">
+          <cb-icon name="chevron-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToTarget" [disabled]="!source().length" (click)="moveAll('target')">
+          <cb-icon name="chevrons-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToSource" [disabled]="!selected().target.size" (click)="move('source')">
+          <cb-icon name="chevron-left" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToSource" [disabled]="!target().length" (click)="moveAll('source')">
+          <cb-icon name="chevrons-left" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'target', items: target(), header: targetHeader() ?? t().selected }" />
+    </div>
+
+    <ng-template #listTpl let-side="side" let-items="items" let-header="header">
+      <section class="cb-picklist__panel">
+        <div class="cb-picklist__header" [id]="headerId(side)">{{ header }}</div>
+        <ul
+          class="cb-picklist__list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-labelledby]="headerId(side)"
+          [attr.data-side]="side"
+          (keydown)="onKeydown($event, side)"
+        >
+          @for (item of items; track $index; let i = $index) {
+            <li
+              class="cb-picklist__item"
+              role="option"
+              [attr.aria-selected]="isSelected(side, i)"
+              [attr.tabindex]="i === tabbable(side) ? 0 : -1"
+              (focus)="setFocused(side, i)"
+              (click)="toggle(side, i)"
+              (dblclick)="moveOne(side, i)"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: i, list: side }" />
+              } @else {
+                {{ item }}
+              }
+            </li>
+          }
+        </ul>
+      </section>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-600)}.cb-picklist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-picklist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-picklist__panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-picklist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-picklist__list{flex:1;height:14rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-picklist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem);-webkit-user-select:none;user-select:none}.cb-picklist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-picklist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}@media(max-width:640px){.cb-picklist{grid-template-columns:minmax(0,1fr)}.cb-picklist__controls{flex-direction:row;justify-content:center}.cb-picklist__controls cb-icon{transform:rotate(90deg)}}:host-context([data-theme=\"dark\"]) .cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CbPickList, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-picklist', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div class="cb-picklist">@for(list of [source(),target()];track $index){<section><h3>{{ $index===0?'Disponibles':'Seleccionados' }}</h3><ul role="listbox" [attr.aria-label]="$index===0?'Disponibles':'Seleccionados'">@for(item of list;track item){<li role="option" tabindex="0" [attr.aria-selected]="selected().has(item)" (click)="toggle(item)">{{item}}</li>}</ul></section>}<nav><button type="button" aria-label="Mover a seleccionados" (click)="move(true)">→</button><button type="button" aria-label="Devolver a disponibles" (click)="move(false)">←</button></nav></div>`, styles: [":host{display:block}.cb-picklist{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}.cb-picklist h3{font-size:.95rem}.cb-picklist ul{height:12rem;overflow:auto;list-style:none;padding:.25rem;margin:0;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-picklist li{padding:.55rem;cursor:pointer}.cb-picklist li[aria-selected=true]{background:var(--cb-color-primary,#10b981);color:#fff}.cb-picklist nav{display:grid;gap:.5rem}\n"] }]
-        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }] } });
+            args: [{ selector: 'cb-picklist', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon], host: { class: 'cb-picklist-host' }, template: `
+    <div class="cb-picklist">
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'source', items: source(), header: sourceHeader() ?? t().available }" />
+
+      <div class="cb-picklist__controls">
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToTarget" [disabled]="!selected().source.size" (click)="move('target')">
+          <cb-icon name="chevron-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToTarget" [disabled]="!source().length" (click)="moveAll('target')">
+          <cb-icon name="chevrons-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToSource" [disabled]="!selected().target.size" (click)="move('source')">
+          <cb-icon name="chevron-left" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToSource" [disabled]="!target().length" (click)="moveAll('source')">
+          <cb-icon name="chevrons-left" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'target', items: target(), header: targetHeader() ?? t().selected }" />
+    </div>
+
+    <ng-template #listTpl let-side="side" let-items="items" let-header="header">
+      <section class="cb-picklist__panel">
+        <div class="cb-picklist__header" [id]="headerId(side)">{{ header }}</div>
+        <ul
+          class="cb-picklist__list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-labelledby]="headerId(side)"
+          [attr.data-side]="side"
+          (keydown)="onKeydown($event, side)"
+        >
+          @for (item of items; track $index; let i = $index) {
+            <li
+              class="cb-picklist__item"
+              role="option"
+              [attr.aria-selected]="isSelected(side, i)"
+              [attr.tabindex]="i === tabbable(side) ? 0 : -1"
+              (focus)="setFocused(side, i)"
+              (click)="toggle(side, i)"
+              (dblclick)="moveOne(side, i)"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: i, list: side }" />
+              } @else {
+                {{ item }}
+              }
+            </li>
+          }
+        </ul>
+      </section>
+    </ng-template>
+  `, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-600)}.cb-picklist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-picklist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-picklist__panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-picklist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-picklist__list{flex:1;height:14rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-picklist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem);-webkit-user-select:none;user-select:none}.cb-picklist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-picklist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}@media(max-width:640px){.cb-picklist{grid-template-columns:minmax(0,1fr)}.cb-picklist__controls{flex-direction:row;justify-content:center}.cb-picklist__controls cb-icon{transform:rotate(90deg)}}:host-context([data-theme=\"dark\"]) .cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"] }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], moved: [{ type: i0.Output, args: ["moved"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbPickListItemTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbPickList };
+export { CbPickList, CbPickListItemTemplate };

package/fesm2022/caribeng-ui-pricing.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbButton } from '@caribeng/ui/button';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Tabla de precios de CaribeNG: selector Mensual/Anual opcional y planes
@@ -15,6 +16,8 @@ import { CbButton } from '@caribeng/ui/button';
  */
 class CbPricing {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Planes a mostrar. */
         this.plans = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "plans" }] : /* istanbul ignore next */ []));
@@ -34,16 +37,16 @@ class CbPricing {
         this.currency = input('$', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
         /** Etiquetas configurables. */
-        this.monthlyLabel = input('Mensual', /* @ts-ignore */
+        this.monthlyLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthlyLabel" }] : /* istanbul ignore next */ []));
-        this.annualLabel = input('Anual', /* @ts-ignore */
+        this.annualLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "annualLabel" }] : /* istanbul ignore next */ []));
-        this.perMonthLabel = input('/mes', /* @ts-ignore */
+        this.perMonthLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "perMonthLabel" }] : /* istanbul ignore next */ []));
-        this.perYearLabel = input('/año', /* @ts-ignore */
+        this.perYearLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "perYearLabel" }] : /* istanbul ignore next */ []));
         /** Prefijo del CTA cuando el plan no define `ctaLabel`. */
-        this.ctaLabel = input('Elegir', /* @ts-ignore */
+        this.ctaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
         /** Emite el plan elegido. */
         this.planSelect = output();
@@ -78,7 +81,7 @@ class CbPricing {
             [class.cb-pricing__toggle-btn--on]="billing() === 'monthly'"
             (click)="billing.set('monthly')"
           >
-            {{ monthlyLabel() }}
+            {{ (monthlyLabel() ?? t().monthly) }}
           </button>
           <button
             type="button"
@@ -86,7 +89,7 @@ class CbPricing {
             [class.cb-pricing__toggle-btn--on]="billing() === 'annual'"
             (click)="billing.set('annual')"
           >
-            {{ annualLabel() }}
+            {{ (annualLabel() ?? t().yearly) }}
           </button>
         </div>
       </div>
@@ -100,7 +103,7 @@ class CbPricing {
             <div class="cb-pricing__price-row">
               <div class="cb-pricing__price">
                 <strong>{{ currency() }}{{ priceOf(p) }}</strong>
-                <span class="cb-pricing__per">{{ billing() === 'annual' ? perYearLabel() : perMonthLabel() }}</span>
+                <span class="cb-pricing__per">{{ billing() === 'annual' ? (perYearLabel() ?? t().perYear) : (perMonthLabel() ?? t().perMonth) }}</span>
               </div>
               @if (oldPriceOf(p); as old) {
                 <span class="cb-pricing__old">{{ currency() }}{{ old }}</span>
@@ -128,12 +131,12 @@ class CbPricing {
             [variant]="p.featured ? 'solid' : 'outlined'"
             (click)="planSelect.emit(p)"
           >
-            {{ p.ctaLabel || ctaLabel() + ' ' + p.name }}
+            {{ p.ctaLabel || (ctaLabel() ?? t().choose) + ' ' + p.name }}
           </cb-button>
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-600, #059669);border-color:var(--cb-color-primary-600, #059669);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{display:none}:host(.cb-pricing--horizontal) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:none}:host(.cb-pricing--horizontal) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-600, #059669);border-color:var(--cb-color-primary-600, #059669);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{display:none}:host(.cb-pricing--horizontal) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:none}:host(.cb-pricing--horizontal) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPricing, decorators: [{
             type: Component,
@@ -155,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             [class.cb-pricing__toggle-btn--on]="billing() === 'monthly'"
             (click)="billing.set('monthly')"
           >
-            {{ monthlyLabel() }}
+            {{ (monthlyLabel() ?? t().monthly) }}
           </button>
           <button
             type="button"
@@ -163,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             [class.cb-pricing__toggle-btn--on]="billing() === 'annual'"
             (click)="billing.set('annual')"
           >
-            {{ annualLabel() }}
+            {{ (annualLabel() ?? t().yearly) }}
           </button>
         </div>
       </div>
@@ -177,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <div class="cb-pricing__price-row">
               <div class="cb-pricing__price">
                 <strong>{{ currency() }}{{ priceOf(p) }}</strong>
-                <span class="cb-pricing__per">{{ billing() === 'annual' ? perYearLabel() : perMonthLabel() }}</span>
+                <span class="cb-pricing__per">{{ billing() === 'annual' ? (perYearLabel() ?? t().perYear) : (perMonthLabel() ?? t().perMonth) }}</span>
               </div>
               @if (oldPriceOf(p); as old) {
                 <span class="cb-pricing__old">{{ currency() }}{{ old }}</span>
@@ -205,7 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             [variant]="p.featured ? 'solid' : 'outlined'"
             (click)="planSelect.emit(p)"
           >
-            {{ p.ctaLabel || ctaLabel() + ' ' + p.name }}
+            {{ p.ctaLabel || (ctaLabel() ?? t().choose) + ' ' + p.name }}
           </cb-button>
         </div>
       }

package/fesm2022/caribeng-ui-rating.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { model, input, output, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -16,6 +16,10 @@ let nextUid = 0;
  */
 class CbRating {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         /** Valor seleccionado (two-way opcional fuera de Angular Forms). */
         this.value = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -126,7 +130,7 @@ class CbRating {
         class="cb-rating__star"
         [class]="'cb-rating__star--' + size()"
         [class.cb-rating__star--on]="i <= display()"
-        [attr.aria-label]="i + ' de ' + stars()"
+        [attr.aria-label]="fmt(t().ratingOf, i, stars())"
         tabindex="-1"
         [disabled]="isDisabled() || readonly()"
         (click)="pick(i)"
@@ -162,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         class="cb-rating__star"
         [class]="'cb-rating__star--' + size()"
         [class.cb-rating__star--on]="i <= display()"
-        [attr.aria-label]="i + ' de ' + stars()"
+        [attr.aria-label]="fmt(t().ratingOf, i, stars())"
         tabindex="-1"
         [disabled]="isDisabled() || readonly()"
         (click)="pick(i)"