@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-togglebutton.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, output, computed, signal, 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, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -16,9 +16,11 @@ let nextUid = 0;
  */
 class CbToggleButton {
     constructor() {
-        this.onLabel = input('Sí', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.onLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
-        this.offLabel = input('No', /* @ts-ignore */
+        this.offLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
         this.onIcon = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "onIcon" }] : /* istanbul ignore next */ []));
@@ -40,7 +42,7 @@ class CbToggleButton {
         this.changed = output();
         this.checked = computed(() => this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.label = computed(() => (this.value() ? this.onLabel() : this.offLabel()), /* @ts-ignore */
+        this.label = computed(() => (this.value() ? (this.onLabel() ?? this.t().yes) : (this.offLabel() ?? this.t().no)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.icon = computed(() => (this.value() ? this.onIcon() : this.offIcon()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
@@ -99,7 +101,7 @@ class CbToggleButton {
       }
       <span class="cb-togglebutton__label">{{ label() }}</span>
     </button>
-  `, isInline: true, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-100)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-hover)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\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: CbToggleButton, decorators: [{
             type: Component,
@@ -128,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       }
       <span class="cb-togglebutton__label">{{ label() }}</span>
     </button>
-  `, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-100)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
+  `, styles: [":host{display:inline-flex}.cb-togglebutton{display:inline-flex;align-items:center;gap:var(--cb-space-2);height:2.5rem;padding:0 var(--cb-space-4);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-weight:var(--cb-font-weight-medium);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease),border-color var(--cb-duration-fast) var(--cb-ease),color var(--cb-duration-fast) var(--cb-ease)}.cb-togglebutton--sm{height:2.125rem;padding:0 var(--cb-space-3);font-size:var(--cb-text-sm)}.cb-togglebutton--lg{height:2.875rem;padding:0 var(--cb-space-5);font-size:var(--cb-text-lg)}.cb-togglebutton:hover:not(:disabled):not(.cb-is-on){background-color:var(--cb-color-surface-hover)}.cb-togglebutton:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-togglebutton.cb-is-on{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast)}.cb-togglebutton:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-togglebutton.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
         }], propDecorators: { onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", 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-toolbar.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Toolbar de CaribeNG: contenedor horizontal accesible (`role="toolbar"`) para
@@ -17,12 +18,14 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbToolbar {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         /** Etiqueta accesible para el contenedor `role="toolbar"`. */
-        this.ariaLabel = input('Barra de herramientas', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbToolbar, isStandalone: true, selector: "cb-toolbar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "cb-toolbar" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbToolbar, isStandalone: true, selector: "cb-toolbar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().toolbar) || null" }, classAttribute: "cb-toolbar" }, ngImport: i0, template: `
     <div class="cb-toolbar__group cb-toolbar__start">
       <ng-content select="[cb-toolbar-start]" />
       <ng-content />
@@ -40,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         class: 'cb-toolbar',
                         role: 'toolbar',
-                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-label]': '(ariaLabel() ?? t().toolbar) || null',
                     }, template: `
     <div class="cb-toolbar__group cb-toolbar__start">
       <ng-content select="[cb-toolbar-start]" />

package/fesm2022/caribeng-ui-tree.mjs

@@ -1,26 +1,322 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, input, model, output, contentChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/** Plantilla para el contenido de cada nodo. */
+class CbTreeNodeTemplate {
+    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: CbTreeNodeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbTreeNodeTemplate, isStandalone: true, selector: "ng-template[cbTreeNode]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeNodeTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbTreeNode]' }]
+        }] });
+let nextUid = 0;
+/**
+ * Árbol jerárquico de CaribeNG con niveles ilimitados, selección simple y
+ * navegación con teclado según el patrón *tree* de WAI-ARIA.
+ *
+ * @example
+ * ```html
+ * <cb-tree [value]="nodes" [(selection)]="selected" ariaLabel="Documentos" />
+ *
+ * <cb-tree [value]="nodes">
+ *   <ng-template cbTreeNode let-node>{{ node.label }} ({{ node.children?.length ?? 0 }})</ng-template>
+ * </cb-tree>
+ * ```
+ */
 class CbTree {
     constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.host = inject(ElementRef);
+        this.uid = `cb-tree-${++nextUid}`;
+        /** Nodos raíz. */
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Nodo seleccionado (two-way). */
         this.selection = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible del árbol. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se emite al expandir un nodo. */
+        this.nodeExpand = output();
+        /** Se emite al contraer un nodo. */
+        this.nodeCollapse = output();
+        /** Se emite al seleccionar un nodo. */
+        this.nodeSelect = output();
+        this.nodeTemplate = contentChild(CbTreeNodeTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
         this.expanded = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /** Último nodo enfocado por el usuario. */
+        this.activeKey = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+        /** Nodo que recibe el foco con Tab (roving tabindex): el activo, el seleccionado o el primero. */
+        this.tabbableKey = computed(() => this.activeKey() ?? this.selection()?.key ?? this.value()[0]?.key ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabbableKey" }] : /* istanbul ignore next */ []));
+        /** Nodos visibles en orden de lectura (solo ramas expandidas). */
+        this.visible = computed(() => {
+            const out = [];
+            const walk = (nodes, level, parentKey) => {
+                for (const node of nodes) {
+                    out.push({ node, level, parentKey });
+                    if (node.children?.length && this.expanded().has(node.key))
+                        walk(node.children, level + 1, node.key);
+                }
+            };
+            walk(this.value(), 1, null);
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    }
+    /** Expande todos los nodos. */
+    expandAll() {
+        const keys = new Set();
+        const walk = (nodes) => nodes.forEach((n) => {
+            if (n.children?.length) {
+                keys.add(n.key);
+                walk(n.children);
+            }
+        });
+        walk(this.value());
+        this.expanded.set(keys);
+    }
+    /** Contrae todos los nodos. */
+    collapseAll() {
+        this.expanded.set(new Set());
+    }
+    hasChildren(node) {
+        return !!node.children?.length;
+    }
+    isExpanded(node) {
+        return this.expanded().has(node.key);
+    }
+    isSelected(node) {
+        return this.selection()?.key === node.key;
+    }
+    itemId(node) {
+        return `${this.uid}-${node.key}`;
+    }
+    toggle(node, event) {
+        event?.stopPropagation();
+        this.setExpanded(node, !this.isExpanded(node));
+    }
+    onClick(event, node) {
+        event.stopPropagation();
+        this.activeKey.set(node.key);
+        this.select(node);
+    }
+    onKeydown(event) {
+        const list = this.visible();
+        const index = list.findIndex((v) => v.node.key === this.tabbableKey());
+        if (index < 0)
+            return;
+        const current = list[index];
+        let target;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = list[index + 1];
+                break;
+            case 'ArrowUp':
+                target = list[index - 1];
+                break;
+            case 'Home':
+                target = list[0];
+                break;
+            case 'End':
+                target = list[list.length - 1];
+                break;
+            case 'ArrowRight':
+                if (this.hasChildren(current.node)) {
+                    if (!this.isExpanded(current.node))
+                        this.setExpanded(current.node, true);
+                    else
+                        target = list[index + 1];
+                }
+                break;
+            case 'ArrowLeft':
+                if (this.hasChildren(current.node) && this.isExpanded(current.node))
+                    this.setExpanded(current.node, false);
+                else if (current.parentKey)
+                    target = list.find((v) => v.node.key === current.parentKey);
+                break;
+            case 'Enter':
+            case ' ':
+                this.select(current.node);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target)
+            this.focus(target.node);
+    }
+    select(node) {
+        if (node.disabled)
+            return;
+        this.selection.set(node);
+        this.nodeSelect.emit(node);
+    }
+    setExpanded(node, open) {
+        if (open === this.isExpanded(node))
+            return;
+        const next = new Set(this.expanded());
+        if (open)
+            next.add(node.key);
+        else
+            next.delete(node.key);
+        this.expanded.set(next);
+        (open ? this.nodeExpand : this.nodeCollapse).emit(node);
+    }
+    focus(node) {
+        this.activeKey.set(node.key);
+        const id = this.itemId(node);
+        Array.from(this.host.nativeElement.querySelectorAll('[role="treeitem"]'))
+            .find((el) => el.id === id)
+            ?.focus();
     }
-    toggle(key) { const next = new Set(this.expanded()); next.has(key) ? next.delete(key) : next.add(key); this.expanded.set(next); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTree, isStandalone: true, selector: "cb-tree", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, ngImport: i0, template: `<ul class="cb-tree" role="tree">@for(node of value();track node.key){<li role="treeitem" [attr.aria-expanded]="node.children?.length ? expanded().has(node.key) : null"><div class="cb-tree__row">@if(node.children?.length){<button type="button" (click)="toggle(node.key)" [attr.aria-label]="expanded().has(node.key)?'Contraer '+node.label:'Expandir '+node.label">{{expanded().has(node.key)?'−':'+'}}</button>}<button class="cb-tree__label" type="button" (click)="selection.set(node)">{{node.label}}</button></div>@if(node.children?.length&&expanded().has(node.key)){<ul role="group">@for(child of node.children;track child.key){<li role="treeitem"><button class="cb-tree__label" type="button" (click)="selection.set(child)">{{child.label}}</button></li>}</ul>}</li>}</ul>`, isInline: true, styles: [":host{display:block}.cb-tree,.cb-tree ul{list-style:none;margin:0;padding-inline-start:1rem}.cb-tree__row{display:flex;gap:.35rem;align-items:center}.cb-tree button{font:inherit;color:var(--cb-color-text,#111827);background:transparent;border:0;padding:.4rem;cursor:pointer}.cb-tree button:focus-visible{outline:2px solid var(--cb-color-primary,#10b981);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTree, isStandalone: true, selector: "cb-tree", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeSelect: "nodeSelect" }, host: { classAttribute: "cb-tree-host" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: CbTreeNodeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ul class="cb-tree" role="tree" [attr.aria-label]="ariaLabel() || null" (keydown)="onKeydown($event)">
+      <ng-container *ngTemplateOutlet="branch; context: { $implicit: value(), level: 1 }" />
+    </ul>
+
+    <ng-template #branch let-nodes let-level="level">
+      @for (node of nodes; track node.key; let i = $index) {
+        <li
+          class="cb-tree__item"
+          role="treeitem"
+          [id]="itemId(node)"
+          [attr.aria-level]="level"
+          [attr.aria-setsize]="nodes.length"
+          [attr.aria-posinset]="i + 1"
+          [attr.aria-expanded]="hasChildren(node) ? isExpanded(node) : null"
+          [attr.aria-selected]="node.disabled ? null : isSelected(node)"
+          [attr.aria-disabled]="node.disabled ? 'true' : null"
+          [attr.tabindex]="node.key === tabbableKey() ? 0 : -1"
+          (focus)="activeKey.set(node.key)"
+          (click)="onClick($event, node)"
+        >
+          <div
+            class="cb-tree__row"
+            [class.cb-is-selected]="isSelected(node)"
+            [class.cb-is-disabled]="node.disabled"
+            [style.padding-inline-start]="'calc(' + (level - 1) + ' * var(--cb-tree-indent, 1.25rem) + 0.25rem)'"
+          >
+            @if (hasChildren(node)) {
+              <button
+                type="button"
+                class="cb-tree__toggler"
+                tabindex="-1"
+                [attr.aria-label]="fmt(isExpanded(node) ? t().collapseItem : t().expandItem, node.label)"
+                (click)="toggle(node, $event)"
+              >
+                <cb-icon name="chevron-right" [size]="14" [class.cb-is-open]="isExpanded(node)" aria-hidden="true" />
+              </button>
+            } @else {
+              <span class="cb-tree__spacer" aria-hidden="true"></span>
+            }
+            @if (node.icon) {
+              <cb-icon class="cb-tree__icon" [name]="node.icon" [size]="16" aria-hidden="true" />
+            }
+            <span class="cb-tree__label">
+              @if (nodeTemplate(); as tpl) {
+                <ng-container
+                  *ngTemplateOutlet="tpl.template; context: { $implicit: node, level, expanded: isExpanded(node), selected: isSelected(node) }"
+                />
+              } @else {
+                {{ node.label }}
+              }
+            </span>
+          </div>
+          @if (hasChildren(node) && isExpanded(node)) {
+            <ul class="cb-tree__group" role="group">
+              <ng-container *ngTemplateOutlet="branch; context: { $implicit: node.children, level: level + 1 }" />
+            </ul>
+          }
+        </li>
+      }
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-tree,.cb-tree__group{list-style:none;margin:0;padding:0}.cb-tree__item{outline:none}.cb-tree__row{display:flex;align-items:center;gap:var(--cb-space-1, .25rem);min-height:2.25rem;padding-inline-end:var(--cb-space-2, .5rem);border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tree__row:hover{background:var(--cb-color-surface-hover)}.cb-tree__row.cb-is-selected{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-tree__row.cb-is-disabled{opacity:.55;cursor:default}.cb-tree__item:focus-visible>.cb-tree__row{box-shadow:0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-tree__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex:none;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-tree__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tree__toggler cb-icon.cb-is-open{transform:rotate(90deg)}.cb-tree__spacer{width:1.5rem;flex:none}.cb-tree__icon{flex:none;color:var(--cb-color-text-muted)}.cb-tree__label{flex:1;min-width:0}:host-context([data-theme=\"dark\"]) .cb-tree__row:hover{background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}:host-context([data-theme=\"dark\"]) .cb-tree__row.cb-is-selected{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: CbTree, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-tree', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<ul class="cb-tree" role="tree">@for(node of value();track node.key){<li role="treeitem" [attr.aria-expanded]="node.children?.length ? expanded().has(node.key) : null"><div class="cb-tree__row">@if(node.children?.length){<button type="button" (click)="toggle(node.key)" [attr.aria-label]="expanded().has(node.key)?'Contraer '+node.label:'Expandir '+node.label">{{expanded().has(node.key)?'−':'+'}}</button>}<button class="cb-tree__label" type="button" (click)="selection.set(node)">{{node.label}}</button></div>@if(node.children?.length&&expanded().has(node.key)){<ul role="group">@for(child of node.children;track child.key){<li role="treeitem"><button class="cb-tree__label" type="button" (click)="selection.set(child)">{{child.label}}</button></li>}</ul>}</li>}</ul>`, styles: [":host{display:block}.cb-tree,.cb-tree ul{list-style:none;margin:0;padding-inline-start:1rem}.cb-tree__row{display:flex;gap:.35rem;align-items:center}.cb-tree button{font:inherit;color:var(--cb-color-text,#111827);background:transparent;border:0;padding:.4rem;cursor:pointer}.cb-tree button:focus-visible{outline:2px solid var(--cb-color-primary,#10b981);outline-offset:2px}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }] } });
+            args: [{ selector: 'cb-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon], host: { class: 'cb-tree-host' }, template: `
+    <ul class="cb-tree" role="tree" [attr.aria-label]="ariaLabel() || null" (keydown)="onKeydown($event)">
+      <ng-container *ngTemplateOutlet="branch; context: { $implicit: value(), level: 1 }" />
+    </ul>
+
+    <ng-template #branch let-nodes let-level="level">
+      @for (node of nodes; track node.key; let i = $index) {
+        <li
+          class="cb-tree__item"
+          role="treeitem"
+          [id]="itemId(node)"
+          [attr.aria-level]="level"
+          [attr.aria-setsize]="nodes.length"
+          [attr.aria-posinset]="i + 1"
+          [attr.aria-expanded]="hasChildren(node) ? isExpanded(node) : null"
+          [attr.aria-selected]="node.disabled ? null : isSelected(node)"
+          [attr.aria-disabled]="node.disabled ? 'true' : null"
+          [attr.tabindex]="node.key === tabbableKey() ? 0 : -1"
+          (focus)="activeKey.set(node.key)"
+          (click)="onClick($event, node)"
+        >
+          <div
+            class="cb-tree__row"
+            [class.cb-is-selected]="isSelected(node)"
+            [class.cb-is-disabled]="node.disabled"
+            [style.padding-inline-start]="'calc(' + (level - 1) + ' * var(--cb-tree-indent, 1.25rem) + 0.25rem)'"
+          >
+            @if (hasChildren(node)) {
+              <button
+                type="button"
+                class="cb-tree__toggler"
+                tabindex="-1"
+                [attr.aria-label]="fmt(isExpanded(node) ? t().collapseItem : t().expandItem, node.label)"
+                (click)="toggle(node, $event)"
+              >
+                <cb-icon name="chevron-right" [size]="14" [class.cb-is-open]="isExpanded(node)" aria-hidden="true" />
+              </button>
+            } @else {
+              <span class="cb-tree__spacer" aria-hidden="true"></span>
+            }
+            @if (node.icon) {
+              <cb-icon class="cb-tree__icon" [name]="node.icon" [size]="16" aria-hidden="true" />
+            }
+            <span class="cb-tree__label">
+              @if (nodeTemplate(); as tpl) {
+                <ng-container
+                  *ngTemplateOutlet="tpl.template; context: { $implicit: node, level, expanded: isExpanded(node), selected: isSelected(node) }"
+                />
+              } @else {
+                {{ node.label }}
+              }
+            </span>
+          </div>
+          @if (hasChildren(node) && isExpanded(node)) {
+            <ul class="cb-tree__group" role="group">
+              <ng-container *ngTemplateOutlet="branch; context: { $implicit: node.children, level: level + 1 }" />
+            </ul>
+          }
+        </li>
+      }
+    </ng-template>
+  `, styles: [":host{display:block;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-tree,.cb-tree__group{list-style:none;margin:0;padding:0}.cb-tree__item{outline:none}.cb-tree__row{display:flex;align-items:center;gap:var(--cb-space-1, .25rem);min-height:2.25rem;padding-inline-end:var(--cb-space-2, .5rem);border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tree__row:hover{background:var(--cb-color-surface-hover)}.cb-tree__row.cb-is-selected{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-tree__row.cb-is-disabled{opacity:.55;cursor:default}.cb-tree__item:focus-visible>.cb-tree__row{box-shadow:0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-tree__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex:none;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-tree__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tree__toggler cb-icon.cb-is-open{transform:rotate(90deg)}.cb-tree__spacer{width:1.5rem;flex:none}.cb-tree__icon{flex:none;color:var(--cb-color-text-muted)}.cb-tree__label{flex:1;min-width:0}:host-context([data-theme=\"dark\"]) .cb-tree__row:hover{background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}:host-context([data-theme=\"dark\"]) .cb-tree__row.cb-is-selected{color:var(--cb-color-primary-300)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTreeNodeTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbTree };
+export { CbTree, CbTreeNodeTemplate };

package/fesm2022/caribeng-ui-treeselect.mjs

@@ -1,17 +1,21 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, model, signal, computed, viewChild, 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';
 
 /**
  * TreeSelect de CaribeNG: selector desplegable jerárquico con soporte CVA.
  */
 class CbTreeSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.nodes = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('Seleccionar nodo…', /* @ts-ignore */
+        this.placeholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -54,6 +58,7 @@ class CbTreeSelect {
         ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
+        this.trigger = viewChild.required('trigger');
     }
     writeValue(val) {
         this.value.set(val ?? null);
@@ -67,6 +72,14 @@ class CbTreeSelect {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
+    /** Escape cierra el panel y devuelve el foco al disparador. */
+    closeOnEscape(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this.open.set(false);
+        this.trigger().nativeElement.focus();
+    }
     toggleOpen() {
         if (this.isDisabled())
             return;
@@ -105,14 +118,15 @@ class CbTreeSelect {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTreeSelect, isStandalone: true, selector: "cb-tree-select", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.cb-is-open": "open()", "class.cb-is-disabled": "isDisabled()" }, classAttribute: "cb-tree-select" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTreeSelect, isStandalone: true, selector: "cb-tree-select", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown.escape": "closeOnEscape($event)" }, properties: { "class.cb-is-open": "open()", "class.cb-is-disabled": "isDisabled()" }, classAttribute: "cb-tree-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbTreeSelect),
                 multi: true,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
+      #trigger
       type="button"
       class="cb-tree-select__trigger"
       [class.cb-is-invalid]="fieldState.invalid()"
@@ -125,7 +139,7 @@ class CbTreeSelect {
       (click)="toggleOpen()"
     >
       <span class="cb-tree-select__label" [class.cb-is-placeholder]="!selectedLabel()">
-        {{ selectedLabel() || placeholder() }}
+        {{ selectedLabel() || (placeholder() ?? t().select) }}
       </span>
       <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
     </button>
@@ -146,7 +160,7 @@ class CbTreeSelect {
                 type="button"
                 class="cb-tree-select__expander"
                 (click)="toggleNode(item.node.key, $event)"
-                [attr.aria-label]="'Expandir ' + item.node.label"
+                [attr.aria-label]="fmt(t().expandItem, item.node.label)"
               >
                 <cb-icon
                   [name]="isExpanded(item.node.key) ? 'chevron-down' : 'chevron-right'"
@@ -184,9 +198,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: 'cb-tree-select',
                         '[class.cb-is-open]': 'open()',
+                        '(keydown.escape)': 'closeOnEscape($event)',
                         '[class.cb-is-disabled]': 'isDisabled()',
                     }, template: `
     <button
+      #trigger
       type="button"
       class="cb-tree-select__trigger"
       [class.cb-is-invalid]="fieldState.invalid()"
@@ -199,7 +215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (click)="toggleOpen()"
     >
       <span class="cb-tree-select__label" [class.cb-is-placeholder]="!selectedLabel()">
-        {{ selectedLabel() || placeholder() }}
+        {{ selectedLabel() || (placeholder() ?? t().select) }}
       </span>
       <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
     </button>
@@ -220,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type="button"
                 class="cb-tree-select__expander"
                 (click)="toggleNode(item.node.key, $event)"
-                [attr.aria-label]="'Expandir ' + item.node.label"
+                [attr.aria-label]="fmt(t().expandItem, item.node.label)"
               >
                 <cb-icon
                   [name]="isExpanded(item.node.key) ? 'chevron-down' : 'chevron-right'"
@@ -246,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </div>
     }
   `, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-tree-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-tree-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-tree-select__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:240px;overflow:auto;padding:var(--cb-space-1);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);box-shadow:var(--cb-shadow-md, 0 8px 20px rgba(0, 0, 0, .12))}.cb-tree-select__item{display:flex;align-items:center;gap:.25rem;border-radius:var(--cb-radius-sm)}.cb-tree-select__item.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-tree-select__expander{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-tree-select__spacer{display:inline-block;width:1.25rem}.cb-tree-select__node-btn{flex:1;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border:none;background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-tree-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.