@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-menubar.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Injector, input, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Injector, input, computed, output, signal, afterNextRender, 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 bar with optional one-level dropdown menus. */
 class CbMenubar {
@@ -12,6 +12,9 @@ class CbMenubar {
         this.injector = inject(Injector);
         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.itemSelect = output();
@@ -26,6 +29,7 @@ class CbMenubar {
             event.preventDefault();
             return;
         }
+        cbRunCommand(item);
         this.itemSelect.emit(item);
         if (parentIndex !== undefined)
             this.openIndex.set(null);
@@ -57,7 +61,7 @@ class CbMenubar {
             this.openIndex.set(null);
             return;
         }
-        if (event.key === 'ArrowDown' && root && this.items()[rootIndex]?.items?.length) {
+        if (event.key === 'ArrowDown' && root && this.visibleItems()[rootIndex]?.items?.length) {
             event.preventDefault();
             this.openIndex.set(rootIndex);
             // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
@@ -75,7 +79,7 @@ class CbMenubar {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenubar, isStandalone: true, selector: "cb-menubar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)" }, classAttribute: "cb-menubar" }, ngImport: i0, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
             @if (item.items?.length) {
               <button
@@ -136,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     }, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
             @if (item.items?.length) {
               <button

package/fesm2022/caribeng-ui-message.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { injectCbTranslation } from '@caribeng/ui';
 
@@ -36,6 +36,9 @@ class CbMessage {
         /** Visibilidad (two-way). */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** danger y warning se anuncian al momento (`alert`); el resto, sin interrumpir (`status`). */
+        this.urgent = computed(() => this.severity() === 'danger' || this.severity() === 'warning', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urgent" }] : /* istanbul ignore next */ []));
         /** Se emite al cerrar. */
         this.closed = output();
         this.iconName = computed(() => {
@@ -53,7 +56,7 @@ class CbMessage {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMessage, isStandalone: true, selector: "cb-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, host: { classAttribute: "cb-message-host" }, ngImport: i0, template: `
     @if (visible()) {
-      <div class="cb-message" [class]="'cb-message--' + severity()" role="alert">
+      <div class="cb-message" [class]="'cb-message--' + severity()" [attr.role]="urgent() ? 'alert' : 'status'">
         @if (iconName()) {
           <cb-icon class="cb-message__icon" [name]="iconName()" [size]="18" aria-hidden="true" />
         }
@@ -71,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-message-host' }, template: `
     @if (visible()) {
-      <div class="cb-message" [class]="'cb-message--' + severity()" role="alert">
+      <div class="cb-message" [class]="'cb-message--' + severity()" [attr.role]="urgent() ? 'alert' : 'status'">
         @if (iconName()) {
           <cb-icon class="cb-message__icon" [name]="iconName()" [size]="18" aria-hidden="true" />
         }