@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-folder-card.mjs

@@ -1,23 +1,32 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, input, booleanAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { CbMenu } from '@caribeng/ui/menu';
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Tarjeta de carpeta de CaribeNG: icono de carpeta, nombre y una fila con
- * número de archivos y tamaño. Proyecta acciones (menú) por `[cb-folder-actions]`.
+ * número de archivos y tamaño.
+ *
+ * Con `actions` muestra un botón ⋮ que abre un menú (`cb-menu`) con esas
+ * acciones y emite `actionSelect`. Con `clickable`, toda la tarjeta abre la
+ * carpeta (`open`) sin interferir con el botón del menú. Sigue aceptando un
+ * trigger propio proyectado por `[cb-folder-actions]`.
  *
  * @example
  * ```html
- * <cb-folder-card name="Imágenes" files="345" size="26.4 GB">
- *   <button cb-folder-actions aria-label="Opciones">⋮</button>
- * </cb-folder-card>
+ * <cb-folder-card name="Imágenes" files="345" size="26.4 GB" clickable
+ *   [actions]="acciones" (actionSelect)="onAccion($event)" (open)="abrir()" />
  * ```
  */
 class CbFolderCard {
     constructor() {
         /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
         this.t = injectCbTranslation();
+        this.menu = viewChild('menu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.trigger = viewChild('trigger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         /** Nombre de la carpeta. */
         this.name = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -33,16 +42,85 @@ class CbFolderCard {
         /** Color del icono de carpeta. */
         this.color = input('#f5b301', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Acciones del menú ⋮ (abrir, renombrar, eliminar…). Sin acciones no se muestra el botón. */
+        this.actions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Nombre del botón ⋮ y del menú. Por defecto, "Más acciones: {nombre}" del idioma activo. */
+        this.actionsAriaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Toda la tarjeta es pulsable y emite `open` (clic, Enter o Espacio). */
+        this.clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Acción elegida en el menú ⋮. */
+        this.actionSelect = output();
+        /** Se pidió abrir la carpeta (solo con `clickable`). */
+        this.open = output();
+        this.menuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        this.menuLabel = computed(() => {
+            const custom = this.actionsAriaLabel();
+            if (custom)
+                return custom;
+            const name = this.name();
+            return name ? `${this.t().moreActions}: ${name}` : this.t().moreActions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    }
+    /** Abre o cierra el menú de acciones anclado al botón ⋮. */
+    toggleMenu() {
+        const menu = this.menu();
+        const trigger = this.trigger()?.nativeElement;
+        if (!menu || !trigger)
+            return;
+        if (menu.isOpen) {
+            menu.hide();
+            return;
+        }
+        menu.show(trigger);
+        this.menuOpen.set(true);
+    }
+    openFromKeyboard(event) {
+        event.preventDefault();
+        if (!this.menu()?.isOpen)
+            this.toggleMenu();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFolderCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFolderCard, isStandalone: true, selector: "cb-folder-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, filesLabel: { classPropertyName: "filesLabel", publicName: "filesLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-folder-card" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFolderCard, isStandalone: true, selector: "cb-folder-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, filesLabel: { classPropertyName: "filesLabel", publicName: "filesLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsAriaLabel: { classPropertyName: "actionsAriaLabel", publicName: "actionsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect", open: "open" }, host: { properties: { "class.cb-folder-card--clickable": "clickable()" }, classAttribute: "cb-folder-card" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="cb-folder-card__top">
       <cb-icon name="folder" [size]="30" class="cb-folder-card__icon" [style.color]="color() || null" aria-hidden="true" />
       <span class="cb-folder-card__actions">
         <ng-content select="[cb-folder-actions]" />
+        @if (actions().length) {
+          <button
+            #trigger
+            type="button"
+            class="cb-folder-card__menu-button"
+            [attr.aria-label]="menuLabel()"
+            aria-haspopup="menu"
+            [attr.aria-expanded]="menuOpen()"
+            (click)="toggleMenu()"
+            (keydown.arrowdown)="openFromKeyboard($event)"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+              <circle cx="12" cy="5" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="12" cy="19" r="2" />
+            </svg>
+          </button>
+          <cb-menu
+            #menu
+            [items]="actions()"
+            [ariaLabel]="menuLabel()"
+            (itemSelect)="actionSelect.emit($event)"
+            (hidden)="menuOpen.set(false)"
+          />
+        }
       </span>
     </div>
-    <div class="cb-folder-card__name">{{ name() }}</div>
+    @if (clickable()) {
+      <button type="button" class="cb-folder-card__name cb-folder-card__open" (click)="open.emit($event)">{{ name() }}</button>
+    } @else {
+      <div class="cb-folder-card__name">{{ name() }}</div>
+    }
     <div class="cb-folder-card__meta">
       @if (files() !== '') {
         <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
@@ -51,18 +129,50 @@ class CbFolderCard {
         <span>{{ size() }}</span>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__name{margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:relative;display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-folder-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-folder-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-folder-card--clickable:has(.cb-folder-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.25rem;color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__menu-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.375rem -.5rem 0 0;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:inherit;cursor:pointer}.cb-folder-card__menu-button:hover,.cb-folder-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-folder-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__name{display:block;margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__open{width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.95rem;text-align:start;cursor:pointer}.cb-folder-card__open:focus-visible{outline:none}.cb-folder-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbMenu, selector: "cb-menu", inputs: ["items", "ariaLabel"], outputs: ["itemSelect", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFolderCard, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-folder-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-folder-card' }, template: `
+            args: [{ selector: 'cb-folder-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbMenu], host: {
+                        class: 'cb-folder-card',
+                        '[class.cb-folder-card--clickable]': 'clickable()',
+                    }, template: `
     <div class="cb-folder-card__top">
       <cb-icon name="folder" [size]="30" class="cb-folder-card__icon" [style.color]="color() || null" aria-hidden="true" />
       <span class="cb-folder-card__actions">
         <ng-content select="[cb-folder-actions]" />
+        @if (actions().length) {
+          <button
+            #trigger
+            type="button"
+            class="cb-folder-card__menu-button"
+            [attr.aria-label]="menuLabel()"
+            aria-haspopup="menu"
+            [attr.aria-expanded]="menuOpen()"
+            (click)="toggleMenu()"
+            (keydown.arrowdown)="openFromKeyboard($event)"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+              <circle cx="12" cy="5" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="12" cy="19" r="2" />
+            </svg>
+          </button>
+          <cb-menu
+            #menu
+            [items]="actions()"
+            [ariaLabel]="menuLabel()"
+            (itemSelect)="actionSelect.emit($event)"
+            (hidden)="menuOpen.set(false)"
+          />
+        }
       </span>
     </div>
-    <div class="cb-folder-card__name">{{ name() }}</div>
+    @if (clickable()) {
+      <button type="button" class="cb-folder-card__name cb-folder-card__open" (click)="open.emit($event)">{{ name() }}</button>
+    } @else {
+      <div class="cb-folder-card__name">{{ name() }}</div>
+    }
     <div class="cb-folder-card__meta">
       @if (files() !== '') {
         <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
@@ -71,8 +181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <span>{{ size() }}</span>
       }
     </div>
-  `, styles: [":host{display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__name{margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+  `, styles: [":host{position:relative;display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-folder-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-folder-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-folder-card--clickable:has(.cb-folder-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.25rem;color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__menu-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.375rem -.5rem 0 0;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:inherit;cursor:pointer}.cb-folder-card__menu-button:hover,.cb-folder-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-folder-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__name{display:block;margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__open{width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.95rem;text-align:start;cursor:pointer}.cb-folder-card__open:focus-visible{outline:none}.cb-folder-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAriaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], actionSelect: [{ type: i0.Output, args: ["actionSelect"] }], open: [{ type: i0.Output, args: ["open"] }] } });
 
 /*
  * Public API Surface de @caribeng/ui/folder-card

package/fesm2022/{caribeng-ui-caribe-footer.mjs → caribeng-ui-footer.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Footer de Caribe Design: pie de página con texto de copyright y una zona de
+ * Footer: pie de página con texto de copyright y una zona de
  * enlaces o acciones proyectadas.
  *
  * @example
@@ -17,28 +17,28 @@ class CbFooter {
         ...(ngDevMode ? [{ debugName: "copyright" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFooter, isStandalone: true, selector: "cb-footer", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-footer-host" }, ngImport: i0, template: `
-    <footer class="cb-footer">
-      @if (copyright()) {
-        <span class="cb-footer__copy">{{ copyright() }}</span>
-      }
-      <div class="cb-footer__links">
-        <ng-content />
-      </div>
-    </footer>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFooter, isStandalone: true, selector: "cb-footer", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-footer-host" }, ngImport: i0, template: `
+    <footer class="cb-footer">
+      @if (copyright()) {
+        <span class="cb-footer__copy">{{ copyright() }}</span>
+      }
+      <div class="cb-footer__links">
+        <ng-content />
+      </div>
+    </footer>
   `, isInline: true, styles: [":host{display:block;width:100%}.cb-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--cb-space-3, .75rem);width:100%;box-sizing:border-box;padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-50, #f8fafc);border-top:1px solid var(--cb-color-border, #e2e8f0)}.cb-footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-4, 1rem)}:host-context([data-theme=\"dark\"]) .cb-footer{color:var(--cb-color-surface-300, #cbd5e1);background-color:var(--cb-color-surface-900, #0f172a);border-top-color:var(--cb-color-surface-700, #334155)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFooter, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-footer-host' }, template: `
-    <footer class="cb-footer">
-      @if (copyright()) {
-        <span class="cb-footer__copy">{{ copyright() }}</span>
-      }
-      <div class="cb-footer__links">
-        <ng-content />
-      </div>
-    </footer>
+            args: [{ selector: 'cb-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-footer-host' }, template: `
+    <footer class="cb-footer">
+      @if (copyright()) {
+        <span class="cb-footer__copy">{{ copyright() }}</span>
+      }
+      <div class="cb-footer__links">
+        <ng-content />
+      </div>
+    </footer>
   `, styles: [":host{display:block;width:100%}.cb-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--cb-space-3, .75rem);width:100%;box-sizing:border-box;padding:var(--cb-space-4, 1rem) var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-50, #f8fafc);border-top:1px solid var(--cb-color-border, #e2e8f0)}.cb-footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-4, 1rem)}:host-context([data-theme=\"dark\"]) .cb-footer{color:var(--cb-color-surface-300, #cbd5e1);background-color:var(--cb-color-surface-900, #0f172a);border-top-color:var(--cb-color-surface-700, #334155)}\n"] }]
         }], propDecorators: { copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: false }] }] } });