@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-table.mjs

@@ -475,7 +475,7 @@ class CbTable {
     }
     // --- Helpers ---------------------------------------------------------------
     cellValue(row, col) {
-        return row != null && typeof row === 'object' ? row[col.field] : row;
+        return fieldValue(row, col.field);
     }
     cellTemplate(field) {
         return this.cellTemplates().find((cell) => cell.cbTableCell() === field);
@@ -505,8 +505,8 @@ class CbTable {
         return a === b;
     }
     compare(a, b, field) {
-        const av = a?.[field];
-        const bv = b?.[field];
+        const av = fieldValue(a, field);
+        const bv = fieldValue(b, field);
         if (av == null)
             return bv == null ? 0 : -1;
         if (bv == null)
@@ -981,8 +981,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }
+/** Valor de `field` en la fila; admite rutas (`cliente.nombre`), como `field` en PrimeNG. */
 function fieldValue(row, field) {
-    return row != null && typeof row === 'object' ? row[field] : row;
+    if (row == null || typeof row !== 'object')
+        return row;
+    const record = row;
+    if (field in record || !field.includes('.'))
+        return record[field];
+    return field.split('.').reduce((value, key) => (value != null && typeof value === 'object' ? value[key] : undefined), row);
 }
 /** Minúsculas y sin tildes, para que "jose" encuentre "José". */
 function normalize(text) {

package/fesm2022/caribeng-ui-tabmenu.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Horizontal navigation menu with an active item. */
 class CbTabMenu {
@@ -10,6 +10,9 @@ class CbTabMenu {
         this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, /* @ts-ignore */
@@ -20,13 +23,14 @@ class CbTabMenu {
         if (item.disabled)
             return;
         this.activeIndex.set(index);
+        cbRunCommand(item);
         this.itemSelect.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTabMenu, isStandalone: true, selector: "cb-tabmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", itemSelect: "itemSelect" }, host: { classAttribute: "cb-tabmenu" }, ngImport: i0, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().sectionNavigation)">
       <ul class="cb-tabmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-tabmenu__entry">
             @if (item.url && !item.disabled) {
               <a class="cb-tabmenu__link" [href]="item.url" [attr.aria-current]="activeIndex() === i ? 'page' : null" [attr.tabindex]="item.disabled ? -1 : 0" (click)="select(item, i)">
@@ -50,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-tabmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-tabmenu' }, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().sectionNavigation)">
       <ul class="cb-tabmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-tabmenu__entry">
             @if (item.url && !item.disabled) {
               <a class="cb-tabmenu__link" [href]="item.url" [attr.aria-current]="activeIndex() === i ? 'page' : null" [attr.tabindex]="item.disabled ? -1 : 0" (click)="select(item, i)">

package/fesm2022/caribeng-ui-tieredmenu.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, input, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, computed, output, signal, viewChild, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Popup menu with cascading submenus. */
 class CbTieredMenu {
@@ -15,6 +15,9 @@ class CbTieredMenu {
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.triggerLabel = input(undefined, /* @ts-ignore */
@@ -33,6 +36,8 @@ class CbTieredMenu {
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
             { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
         ];
+        this.injector = inject(Injector);
+        this.trigger = viewChild.required('trigger');
         this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
     }
     toggle(event) { if (this.overlayRef)
@@ -46,26 +51,111 @@ class CbTieredMenu {
         this.overlayRef = ref;
         this.isOpen.set(true);
         ref.attach(new TemplatePortal(this.content(), this.vcr));
-        ref.backdropClick().subscribe(() => this.hide());
+        ref.backdropClick().subscribe(() => this.hide(false));
         ref.keydownEvents().subscribe((event) => { if (event.key === 'Escape') {
             event.preventDefault();
             this.hide();
         } });
+        // Patrón WAI-ARIA menu: al abrir, el foco pasa al primer item.
+        afterNextRender(() => this.focusFirst(ref.overlayElement.querySelector('.cb-tieredmenu__list')), { injector: this.injector });
     }
     select(item) { if (item.disabled)
-        return; this.itemSelect.emit(item); this.hide(); }
-    hide() { this.overlayRef?.dispose(); this.overlayRef = null; this.isOpen.set(false); this.openIndex.set(null); this.openChildIndex.set(null); }
+        return; cbRunCommand(item); this.itemSelect.emit(item); this.hide(); }
+    /** Cierra el menú; con `restoreFocus` (por defecto) el foco vuelve al botón que lo abre. */
+    hide(restoreFocus = true) {
+        const wasOpen = !!this.overlayRef;
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        this.openIndex.set(null);
+        this.openChildIndex.set(null);
+        if (wasOpen && restoreFocus)
+            this.trigger().nativeElement.focus();
+    }
+    onTriggerKeydown(event) {
+        if (event.key !== 'ArrowDown' || this.overlayRef)
+            return;
+        event.preventDefault();
+        this.show(event.currentTarget);
+    }
+    /** Flechas, Inicio y Fin dentro de cada nivel; derecha abre el submenú e izquierda vuelve al nivel anterior. */
+    onMenuKeydown(event) {
+        const item = event.target.closest('[role="menuitem"]');
+        const menu = item?.closest('[role="menu"]');
+        if (!item || !menu)
+            return;
+        const items = this.menuItems(menu);
+        const at = items.indexOf(item);
+        const opensSubmenu = item.getAttribute('aria-haspopup') === 'menu';
+        switch (event.key) {
+            case 'ArrowDown':
+                items[(at + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+                items[(at - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Home':
+                items[0]?.focus();
+                break;
+            case 'End':
+                items[items.length - 1]?.focus();
+                break;
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ':
+                if (!opensSubmenu)
+                    return;
+                this.openSubmenu(item);
+                break;
+            case 'ArrowLeft': {
+                if (menu.classList.contains('cb-tieredmenu__list'))
+                    break;
+                const parent = menu.parentElement?.querySelector(':scope > [role="menuitem"]');
+                if (parent?.dataset['level'] === '1') {
+                    this.openIndex.set(null);
+                    this.openChildIndex.set(null);
+                }
+                else
+                    this.openChildIndex.set(null);
+                parent?.focus();
+                break;
+            }
+            case 'Tab':
+                this.hide();
+                break;
+            default: return;
+        }
+        event.preventDefault();
+    }
+    openSubmenu(item) {
+        const index = Number(item.dataset['index']);
+        if (item.dataset['level'] === '1') {
+            this.openIndex.set(index);
+            this.openChildIndex.set(null);
+        }
+        else
+            this.openChildIndex.set(index);
+        // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
+        afterNextRender(() => this.focusFirst(item.parentElement?.querySelector(':scope > [role="menu"]') ?? null), { injector: this.injector });
+    }
+    menuItems(menu) {
+        return Array.from(menu.querySelectorAll(':scope > li > [role="menuitem"]')).filter((el) => !el.hasAttribute('disabled'));
+    }
+    focusFirst(menu) {
+        if (menu)
+            this.menuItems(menu)[0]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTieredMenu, isStandalone: true, selector: "cb-tieredmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ (triggerLabel() ?? t().menu) }}</button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTieredMenu, isStandalone: true, selector: "cb-tieredmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button #trigger class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)">
-        @for (item of items(); track $index; let i = $index) {
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)" (keydown)="onMenuKeydown($event)">
+        @for (item of visibleItems(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
-            <li class="cb-tieredmenu__entry" [class.cb-tieredmenu__entry--open]="openIndex() === i">
+            <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -73,7 +163,7 @@ class CbTieredMenu {
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -105,15 +195,15 @@ class CbTieredMenu {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-tieredmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], template: `
-    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ (triggerLabel() ?? t().menu) }}</button>
+    <button #trigger class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)">
-        @for (item of items(); track $index; let i = $index) {
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)" (keydown)="onMenuKeydown($event)">
+        @for (item of visibleItems(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
-            <li class="cb-tieredmenu__entry" [class.cb-tieredmenu__entry--open]="openIndex() === i">
+            <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -121,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -149,7 +239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </ul>
     </ng-template>
   `, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.