@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-message.mjs

@@ -1,6 +1,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 { injectCbTranslation } from '@caribeng/ui';
 
 const SEVERITY_ICON = {
     success: 'circle-check',
@@ -23,6 +24,8 @@ const SEVERITY_ICON = {
  */
 class CbMessage {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.severity = input('info', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
         /** Muestra el botón de cerrar. */
@@ -56,13 +59,13 @@ class CbMessage {
         }
         <div class="cb-message__content"><ng-content /></div>
         @if (closable()) {
-          <button type="button" class="cb-message__close" aria-label="Cerrar" (click)="close()">
+          <button type="button" class="cb-message__close" [attr.aria-label]="t().close" (click)="close()">
             <cb-icon name="x" [size]="16" aria-hidden="true" />
           </button>
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\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: CbMessage, decorators: [{
             type: Component,
@@ -74,13 +77,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
         <div class="cb-message__content"><ng-content /></div>
         @if (closable()) {
-          <button type="button" class="cb-message__close" aria-label="Cerrar" (click)="close()">
+          <button type="button" class="cb-message__close" [attr.aria-label]="t().close" (click)="close()">
             <cb-icon name="x" [size]="16" aria-hidden="true" />
           </button>
         }
       </div>
     }
-  `, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"] }]
+  `, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"] }]
         }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-metergroup.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 
 /**
@@ -11,6 +11,17 @@ class CbMeterGroup {
         ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
         this.max = input(100, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible del medidor (p. ej. "Almacenamiento"). */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Suma de los valores (valor actual del `role="meter"`). */
+        this.total = computed(() => this.values().reduce((sum, v) => sum + v.value, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        /** Desglose legible para el lector de pantalla ("Apps 16 %, Fotos 8 %"). */
+        this.valueText = computed(() => this.values()
+            .map((v) => `${v.label} ${this.format(v.value)}%`)
+            .join(', '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
         this.palette = [
             'var(--cb-color-primary-500)',
             'var(--cb-color-info-500)',
@@ -22,13 +33,17 @@ class CbMeterGroup {
         const m = Math.max(1, this.max());
         return Math.min(100, Math.max(0, (val / m) * 100));
     }
+    /** Porcentaje respecto a `max`, redondeado a un decimal. */
+    format(val) {
+        return Math.round(this.percent(val) * 10) / 10;
+    }
     defaultColor(idx) {
         return this.palette[idx % this.palette.length];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMeterGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMeterGroup, isStandalone: true, selector: "cb-meter-group", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()" }, classAttribute: "cb-meter-group" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMeterGroup, isStandalone: true, selector: "cb-meter-group", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "total()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "cb-meter-group" }, ngImport: i0, template: `
     <div class="cb-meter-group__track">
-      @for (item of values(); track item.label; let idx = $index) {
+      @for (item of values(); track $index; let idx = $index) {
         <span
           class="cb-meter-group__bar"
           [style.width.%]="percent(item.value)"
@@ -36,8 +51,8 @@ class CbMeterGroup {
         ></span>
       }
     </div>
-    <ol class="cb-meter-group__legend">
-      @for (item of values(); track item.label; let idx = $index) {
+    <ol class="cb-meter-group__legend" aria-hidden="true">
+      @for (item of values(); track $index; let idx = $index) {
         <li class="cb-meter-group__item">
           <span
             class="cb-meter-group__dot"
@@ -47,7 +62,7 @@ class CbMeterGroup {
             <cb-icon [name]="item.icon" [size]="14" aria-hidden="true" />
           }
           <span class="cb-meter-group__label">{{ item.label }}</span>
-          <span class="cb-meter-group__value">({{ item.value }}%)</span>
+          <span class="cb-meter-group__value">({{ format(item.value) }}%)</span>
         </li>
       }
     </ol>
@@ -60,9 +75,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         role: 'meter',
                         '[attr.aria-valuemin]': '0',
                         '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuenow]': 'total()',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
                     }, template: `
     <div class="cb-meter-group__track">
-      @for (item of values(); track item.label; let idx = $index) {
+      @for (item of values(); track $index; let idx = $index) {
         <span
           class="cb-meter-group__bar"
           [style.width.%]="percent(item.value)"
@@ -70,8 +88,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         ></span>
       }
     </div>
-    <ol class="cb-meter-group__legend">
-      @for (item of values(); track item.label; let idx = $index) {
+    <ol class="cb-meter-group__legend" aria-hidden="true">
+      @for (item of values(); track $index; let idx = $index) {
         <li class="cb-meter-group__item">
           <span
             class="cb-meter-group__dot"
@@ -81,12 +99,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <cb-icon [name]="item.icon" [size]="14" aria-hidden="true" />
           }
           <span class="cb-meter-group__label">{{ item.label }}</span>
-          <span class="cb-meter-group__value">({{ item.value }}%)</span>
+          <span class="cb-meter-group__value">({{ format(item.value) }}%)</span>
         </li>
       }
     </ol>
   `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-meter-group__track{display:flex;width:100%;height:.65rem;border-radius:999px;background:var(--cb-color-border);overflow:hidden;gap:2px}.cb-meter-group__bar{display:block;height:100%;transition:width .2s ease}.cb-meter-group__legend{list-style:none;margin:var(--cb-space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--cb-space-4)}.cb-meter-group__item{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-meter-group__dot{width:.6rem;height:.6rem;border-radius:999px}.cb-meter-group__value{color:var(--cb-color-text-muted)}\n"] }]
-        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.