@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-organizationchart.mjs

@@ -29,7 +29,7 @@ class CbOrganizationChart {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOrganizationChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbOrganizationChart, isStandalone: true, selector: "cb-organization-chart", 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" }, ngImport: i0, template: `
-    <div class="cb-organization-chart" role="tree" [attr.aria-label]="(ariaLabel() ?? t().orgChart)">
+    <div class="cb-organization-chart" role="group" [attr.aria-label]="(ariaLabel() ?? t().orgChart)">
       <ng-container
         [ngTemplateOutlet]="nodesTemplate"
         [ngTemplateOutletContext]="{ $implicit: value() }"
@@ -39,18 +39,16 @@ class CbOrganizationChart {
     <ng-template #nodesTemplate let-nodes>
       <ul class="cb-organization-chart__nodes">
         @for (node of nodes; track node.key) {
-          <li class="cb-organization-chart__branch" role="none">
+          <li class="cb-organization-chart__branch">
             <div
               class="cb-organization-chart__card"
-              role="treeitem"
               [class.cb-organization-chart__card--selected]="selection()?.key === node.key"
-              [attr.aria-selected]="selection()?.key === node.key"
-              [attr.aria-expanded]="node.children?.length ? expanded().has(node.key) : null"
             >
               <button
                 class="cb-organization-chart__select"
                 type="button"
                 (click)="selection.set(node)"
+                [attr.aria-pressed]="selection()?.key === node.key"
                 [attr.aria-label]="fmt(t().selectItem, node.label)"
               >
                 @if (node.icon) {
@@ -85,7 +83,7 @@ class CbOrganizationChart {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbOrganizationChart, decorators: [{
             type: Component,
             args: [{ selector: 'cb-organization-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CbIcon], template: `
-    <div class="cb-organization-chart" role="tree" [attr.aria-label]="(ariaLabel() ?? t().orgChart)">
+    <div class="cb-organization-chart" role="group" [attr.aria-label]="(ariaLabel() ?? t().orgChart)">
       <ng-container
         [ngTemplateOutlet]="nodesTemplate"
         [ngTemplateOutletContext]="{ $implicit: value() }"
@@ -95,18 +93,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <ng-template #nodesTemplate let-nodes>
       <ul class="cb-organization-chart__nodes">
         @for (node of nodes; track node.key) {
-          <li class="cb-organization-chart__branch" role="none">
+          <li class="cb-organization-chart__branch">
             <div
               class="cb-organization-chart__card"
-              role="treeitem"
               [class.cb-organization-chart__card--selected]="selection()?.key === node.key"
-              [attr.aria-selected]="selection()?.key === node.key"
-              [attr.aria-expanded]="node.children?.length ? expanded().has(node.key) : null"
             >
               <button
                 class="cb-organization-chart__select"
                 type="button"
                 (click)="selection.set(node)"
+                [attr.aria-pressed]="selection()?.key === node.key"
                 [attr.aria-label]="fmt(t().selectItem, node.label)"
               >
                 @if (node.icon) {

package/fesm2022/caribeng-ui-panel.mjs

@@ -42,8 +42,8 @@ class CbPanel {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPanel, isStandalone: true, selector: "cb-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", collapsedChange2: "collapsedChange2" }, host: { properties: { "class.cb-panel--toggleable": "toggleable()", "class.cb-is-collapsed": "collapsed()" }, classAttribute: "cb-panel" }, ngImport: i0, template: `
-    <div class="cb-panel__header" [id]="headerId">
-      <span class="cb-panel__title">{{ header() }}</span>
+    <div class="cb-panel__header">
+      <span class="cb-panel__title" [id]="headerId">{{ header() }}</span>
       <div class="cb-panel__actions">
         <ng-content select="[cb-panel-icons]" />
         @if (toggleable()) {
@@ -51,7 +51,7 @@ class CbPanel {
             type="button"
             class="cb-panel__toggler"
             [attr.aria-expanded]="!collapsed()"
-            [attr.aria-controls]="contentId"
+            [attr.aria-controls]="collapsed() ? null : contentId"
             [attr.aria-label]="header() || t().togglePanel"
             (click)="toggle()"
           >
@@ -86,8 +86,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.cb-panel--toggleable]': 'toggleable()',
                         '[class.cb-is-collapsed]': 'collapsed()',
                     }, template: `
-    <div class="cb-panel__header" [id]="headerId">
-      <span class="cb-panel__title">{{ header() }}</span>
+    <div class="cb-panel__header">
+      <span class="cb-panel__title" [id]="headerId">{{ header() }}</span>
       <div class="cb-panel__actions">
         <ng-content select="[cb-panel-icons]" />
         @if (toggleable()) {
@@ -95,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-panel__toggler"
             [attr.aria-expanded]="!collapsed()"
-            [attr.aria-controls]="contentId"
+            [attr.aria-controls]="collapsed() ? null : contentId"
             [attr.aria-label]="header() || t().togglePanel"
             (click)="toggle()"
           >

package/fesm2022/caribeng-ui-panelmenu.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 let nextPanelMenuId = 0;
 /** Vertical menu with collapsible sections. */
@@ -12,6 +12,9 @@ class CbPanelMenu {
         this.uid = ++nextPanelMenuId;
         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.multiple = input(false, /* @ts-ignore */
@@ -31,13 +34,13 @@ class CbPanelMenu {
             next.add(index);
         this.openItems.set(next);
     }
-    select(item) { if (!item.disabled)
-        this.itemSelect.emit(item); }
+    select(item) { if (item.disabled)
+        return; cbRunCommand(item); this.itemSelect.emit(item); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPanelMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPanelMenu, isStandalone: true, selector: "cb-panelmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { classAttribute: "cb-panelmenu" }, ngImport: i0, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().panelMenu)">
       <ul class="cb-panelmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-panelmenu__entry">
             @if (item.items?.length) {
               <button class="cb-panelmenu__trigger" type="button" [disabled]="item.disabled" [attr.aria-expanded]="isOpen(i)" [attr.aria-controls]="panelId(i)" (click)="toggle(i)">
@@ -82,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-panelmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-panelmenu' }, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().panelMenu)">
       <ul class="cb-panelmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-panelmenu__entry">
             @if (item.items?.length) {
               <button class="cb-panelmenu__trigger" type="button" [disabled]="item.disabled" [attr.aria-expanded]="isOpen(i)" [attr.aria-controls]="panelId(i)" (click)="toggle(i)">