@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-kbd.mjs

@@ -0,0 +1,122 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/** Teclas con nombre: `mod` es ⌘ en Mac y Ctrl en el resto. */
+const NAMED_KEYS = {
+    mod: { mac: { text: '⌘', spoken: 'Command' }, other: { text: 'Ctrl' } },
+    cmd: { mac: { text: '⌘', spoken: 'Command' }, other: { text: 'Win' } },
+    ctrl: { mac: { text: '⌃', spoken: 'Control' }, other: { text: 'Ctrl' } },
+    alt: { mac: { text: '⌥', spoken: 'Option' }, other: { text: 'Alt' } },
+    shift: { mac: { text: '⇧', spoken: 'Shift' }, other: { text: 'Shift' } },
+    enter: { mac: { text: '↵', spoken: 'Enter' }, other: { text: 'Enter' } },
+    backspace: { mac: { text: '⌫', spoken: 'Delete' }, other: { text: 'Backspace' } },
+    tab: { mac: { text: 'Tab' }, other: { text: 'Tab' } },
+    esc: { mac: { text: 'Esc' }, other: { text: 'Esc' } },
+    space: { mac: { text: 'Space' }, other: { text: 'Space' } },
+    up: { mac: { text: '↑', spoken: 'Up' }, other: { text: '↑', spoken: 'Up' } },
+    down: { mac: { text: '↓', spoken: 'Down' }, other: { text: '↓', spoken: 'Down' } },
+    left: { mac: { text: '←', spoken: 'Left' }, other: { text: '←', spoken: 'Left' } },
+    right: { mac: { text: '→', spoken: 'Right' }, other: { text: '→', spoken: 'Right' } },
+};
+/** Detecta macOS/iOS en el navegador (en SSR devuelve `false`). */
+function isApplePlatform(doc) {
+    const nav = doc.defaultView?.navigator;
+    const platform = nav?.userAgentData?.platform ?? nav?.platform ?? '';
+    return /mac|iphone|ipad|ipod/i.test(platform);
+}
+/**
+ * Tecla o atajo de teclado de CaribeNG. Con contenido muestra una tecla; con
+ * `keys` muestra la combinación (⌘ K en Mac, Ctrl + K en el resto).
+ *
+ * @example
+ * ```html
+ * <cb-kbd>Esc</cb-kbd>
+ * <cb-kbd [keys]="['mod', 'K']" />
+ * ```
+ */
+class CbKbd {
+    constructor() {
+        this.doc = inject(DOCUMENT);
+        /** Teclas de la combinación: nombres (`mod`, `shift`, `alt`, `enter`, `up`…) o texto libre (`K`, `F2`). */
+        this.keys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
+        /** Plataforma a mostrar. `auto` la detecta (⌘ en Mac). */
+        this.platform = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "platform" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.isMac = computed(() => {
+            const platform = this.platform();
+            return platform === 'auto' ? isApplePlatform(this.doc) : platform === 'mac';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMac" }] : /* istanbul ignore next */ []));
+        this.labels = computed(() => {
+            const mac = this.isMac();
+            return this.keys().map((key) => {
+                const named = NAMED_KEYS[key.toLowerCase()];
+                if (named)
+                    return mac ? named.mac : named.other;
+                return { text: key.length === 1 ? key.toUpperCase() : key };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKbd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbKbd, isStandalone: true, selector: "cb-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-kbd--sm": "size() === 'sm'" }, classAttribute: "cb-kbd" }, ngImport: i0, template: `
+    @if (labels().length) {
+      <kbd class="cb-kbd__combo">
+        @for (key of labels(); track $index) {
+          @if (!$first && !isMac()) {
+            <span class="cb-kbd__plus" aria-hidden="true">+</span>
+          }
+          <kbd class="cb-kbd__key">
+            @if (key.spoken) {
+              <span aria-hidden="true">{{ key.text }}</span><span class="cb-kbd__sr">{{ key.spoken }}</span>
+            } @else {
+              {{ key.text }}
+            }
+          </kbd>
+        }
+      </kbd>
+    } @else {
+      <kbd class="cb-kbd__key"><ng-content /></kbd>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;vertical-align:middle;font-size:var(--cb-text-xs, .75rem)}.cb-kbd__combo{display:inline-flex;align-items:center;gap:.25em;font:inherit}.cb-kbd__key{display:inline-flex;align-items:center;justify-content:center;min-width:1.75em;height:1.75em;padding:0 .4em;border:1px solid var(--cb-color-border-strong);border-bottom-width:2px;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:inherit;font-weight:var(--cb-font-weight-medium, 500);line-height:1;white-space:nowrap}.cb-kbd__plus{color:var(--cb-color-text-muted)}:host(.cb-kbd--sm){font-size:.6875rem}.cb-kbd__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbKbd, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-kbd', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        class: 'cb-kbd',
+                        '[class.cb-kbd--sm]': "size() === 'sm'",
+                    }, template: `
+    @if (labels().length) {
+      <kbd class="cb-kbd__combo">
+        @for (key of labels(); track $index) {
+          @if (!$first && !isMac()) {
+            <span class="cb-kbd__plus" aria-hidden="true">+</span>
+          }
+          <kbd class="cb-kbd__key">
+            @if (key.spoken) {
+              <span aria-hidden="true">{{ key.text }}</span><span class="cb-kbd__sr">{{ key.spoken }}</span>
+            } @else {
+              {{ key.text }}
+            }
+          </kbd>
+        }
+      </kbd>
+    } @else {
+      <kbd class="cb-kbd__key"><ng-content /></kbd>
+    }
+  `, styles: [":host{display:inline-flex;vertical-align:middle;font-size:var(--cb-text-xs, .75rem)}.cb-kbd__combo{display:inline-flex;align-items:center;gap:.25em;font:inherit}.cb-kbd__key{display:inline-flex;align-items:center;justify-content:center;min-width:1.75em;height:1.75em;padding:0 .4em;border:1px solid var(--cb-color-border-strong);border-bottom-width:2px;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:inherit;font-weight:var(--cb-font-weight-medium, 500);line-height:1;white-space:nowrap}.cb-kbd__plus{color:var(--cb-color-text-muted)}:host(.cb-kbd--sm){font-size:.6875rem}.cb-kbd__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }], platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/kbd
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbKbd };

package/fesm2022/caribeng-ui-megamenu.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Injector, input, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { injectCbTranslation } from '@caribeng/ui';
+import { inject, ElementRef, Injector, input, computed, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
 let nextUid = 0;
@@ -24,6 +24,9 @@ class CbMegaMenu {
         /** Categorías con sus grupos de enlaces. */
         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 */ []));
         /** Nombre accesible de la navegación. Por defecto, "Categorías" del idioma activo. */
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -38,6 +41,7 @@ class CbMegaMenu {
     select(link) {
         if (link.disabled)
             return;
+        cbRunCommand(link);
         this.itemSelect.emit(link);
         this.close();
     }
@@ -55,7 +59,7 @@ class CbMegaMenu {
             this.close();
     }
     onTriggerKeydown(event, index) {
-        const count = this.items().length;
+        const count = this.visibleItems().length;
         switch (event.key) {
             case 'ArrowRight':
                 this.focusTrigger((index + 1) % count);
@@ -122,7 +126,7 @@ class CbMegaMenu {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMegaMenu, isStandalone: true, selector: "cb-megamenu", 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: { "document:click": "onDocumentClick($event)", "focusout": "onFocusOut($event)" }, classAttribute: "cb-megamenu" }, ngImport: i0, template: `
     <nav [attr.aria-label]="ariaLabel() ?? t().categories">
       <ul class="cb-megamenu__bar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li>
             <button
               class="cb-megamenu__trigger"
@@ -152,10 +156,10 @@ class CbMegaMenu {
           class="cb-megamenu__panel"
           [id]="panelId"
           role="region"
-          [attr.aria-label]="items()[openIndex()!].label"
+          [attr.aria-label]="visibleItems()[openIndex()!].label"
           (keydown)="onPanelKeydown($event)"
         >
-          @for (group of items()[openIndex()!].groups; track $index) {
+          @for (group of visibleItems()[openIndex()!].groups; track $index) {
             <div class="cb-megamenu__group">
               <h3>{{ group.label }}</h3>
               <ul>
@@ -195,7 +199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     }, template: `
     <nav [attr.aria-label]="ariaLabel() ?? t().categories">
       <ul class="cb-megamenu__bar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li>
             <button
               class="cb-megamenu__trigger"
@@ -225,10 +229,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           class="cb-megamenu__panel"
           [id]="panelId"
           role="region"
-          [attr.aria-label]="items()[openIndex()!].label"
+          [attr.aria-label]="visibleItems()[openIndex()!].label"
           (keydown)="onPanelKeydown($event)"
         >
-          @for (group of items()[openIndex()!].groups; track $index) {
+          @for (group of visibleItems()[openIndex()!].groups; track $index) {
             <div class="cb-megamenu__group">
               <h3>{{ group.label }}</h3>
               <ul>