@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-picklist.mjs

@@ -1,34 +1,271 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, model, input, output, contentChild, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/** Plantilla de cada elemento de un `<cb-picklist>`. */
+class CbPickListItemTemplate {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPickListItemTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbPickListItemTemplate, isStandalone: true, selector: "ng-template[cbPickListItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPickListItemTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbPickListItem]' }]
+        }] });
+let nextUid = 0;
+/**
+ * PickList de CaribeNG: transfiere elementos entre una lista de disponibles y
+ * otra de seleccionados, con botones, doble clic o teclado (Espacio marca,
+ * Enter transfiere).
+ *
+ * @example
+ * ```html
+ * <cb-picklist [(source)]="disponibles" [(target)]="asignados" sourceHeader="Permisos" targetHeader="Asignados">
+ *   <ng-template cbPickListItem let-permiso>{{ permiso.nombre }}</ng-template>
+ * </cb-picklist>
+ * ```
+ */
 class CbPickList {
     constructor() {
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
+        this.uid = `cb-picklist-${++nextUid}`;
+        /** Elementos disponibles (two-way). */
         this.source = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+        /** Elementos seleccionados (two-way). */
         this.target = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-        this.selected = signal(new Set(), /* @ts-ignore */
+        /** Título de la lista de origen. Por defecto, "Disponibles" del idioma activo. */
+        this.sourceHeader = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sourceHeader" }] : /* istanbul ignore next */ []));
+        /** Título de la lista de destino. Por defecto, "Seleccionados" del idioma activo. */
+        this.targetHeader = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "targetHeader" }] : /* istanbul ignore next */ []));
+        /** Se emite tras transferir elementos. */
+        this.moved = output();
+        this.itemTemplate = contentChild(CbPickListItemTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /** Posiciones marcadas en cada lista. */
+        this.selected = signal({ source: new Set(), target: new Set() }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.focused = signal({ source: 0, target: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    }
+    headerId(side) {
+        return `${this.uid}-${side}`;
+    }
+    isSelected(side, index) {
+        return this.selected()[side].has(index);
+    }
+    tabbable(side) {
+        const max = this.list(side).length - 1;
+        return Math.max(0, Math.min(this.focused()[side], max));
+    }
+    setFocused(side, index) {
+        this.focused.update((f) => ({ ...f, [side]: index }));
+    }
+    toggle(side, index) {
+        const next = new Set(this.selected()[side]);
+        if (next.has(index))
+            next.delete(index);
+        else
+            next.add(index);
+        this.selected.update((s) => ({ ...s, [side]: next }));
+        this.setFocused(side, index);
     }
-    toggle(item) { const s = new Set(this.selected()); s.has(item) ? s.delete(item) : s.add(item); this.selected.set(s); }
-    move(toTarget) { const moving = [...this.selected()]; if (toTarget) {
-        this.source.set(this.source().filter(x => !this.selected().has(x)));
-        this.target.set([...this.target(), ...moving]);
+    /** Transfiere los elementos marcados al lado indicado. */
+    move(to) {
+        const from = to === 'target' ? 'source' : 'target';
+        this.transfer(from, [...this.selected()[from]].sort((a, b) => a - b));
+    }
+    /** Transfiere todos los elementos al lado indicado. */
+    moveAll(to) {
+        const from = to === 'target' ? 'source' : 'target';
+        this.transfer(from, this.list(from).map((_, i) => i));
+    }
+    /** Transfiere un único elemento al otro lado (doble clic). */
+    moveOne(from, index) {
+        this.transfer(from, [index]);
+    }
+    onKeydown(event, side) {
+        const count = this.list(side).length;
+        if (!count)
+            return;
+        const current = this.tabbable(side);
+        let target = -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = Math.min(count - 1, current + 1);
+                break;
+            case 'ArrowUp':
+                target = Math.max(0, current - 1);
+                break;
+            case 'Home':
+                target = 0;
+                break;
+            case 'End':
+                target = count - 1;
+                break;
+            case ' ':
+                this.toggle(side, current);
+                break;
+            case 'Enter':
+                // Transfiere los marcados; si no hay ninguno, el enfocado.
+                if (this.selected()[side].size)
+                    this.move(side === 'source' ? 'target' : 'source');
+                else
+                    this.moveOne(side, current);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target >= 0) {
+            this.setFocused(side, target);
+            this.host.nativeElement
+                .querySelectorAll(`[data-side="${side}"] [role="option"]`)[target]?.focus();
+        }
+    }
+    list(side) {
+        return side === 'source' ? this.source() : this.target();
+    }
+    transfer(from, indices) {
+        if (!indices.length)
+            return;
+        const to = from === 'source' ? 'target' : 'source';
+        const picked = new Set(indices);
+        const items = this.list(from).filter((_, i) => picked.has(i));
+        const remaining = this.list(from).filter((_, i) => !picked.has(i));
+        const destination = [...this.list(to), ...items];
+        (from === 'source' ? this.source : this.target).set(remaining);
+        (to === 'source' ? this.source : this.target).set(destination);
+        this.selected.set({ source: new Set(), target: new Set() });
+        this.moved.emit({ to, items });
     }
-    else {
-        this.target.set(this.target().filter(x => !this.selected().has(x)));
-        this.source.set([...this.source(), ...moving]);
-    } this.selected.set(new Set()); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPickList, isStandalone: true, selector: "cb-picklist", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", target: "targetChange" }, ngImport: i0, template: `<div class="cb-picklist">@for(list of [source(),target()];track $index){<section><h3>{{ $index===0?'Disponibles':'Seleccionados' }}</h3><ul role="listbox" [attr.aria-label]="$index===0?'Disponibles':'Seleccionados'">@for(item of list;track item){<li role="option" tabindex="0" [attr.aria-selected]="selected().has(item)" (click)="toggle(item)">{{item}}</li>}</ul></section>}<nav><button type="button" aria-label="Mover a seleccionados" (click)="move(true)">→</button><button type="button" aria-label="Devolver a disponibles" (click)="move(false)">←</button></nav></div>`, isInline: true, styles: [":host{display:block}.cb-picklist{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}.cb-picklist h3{font-size:.95rem}.cb-picklist ul{height:12rem;overflow:auto;list-style:none;padding:.25rem;margin:0;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-picklist li{padding:.55rem;cursor:pointer}.cb-picklist li[aria-selected=true]{background:var(--cb-color-primary,#10b981);color:#fff}.cb-picklist nav{display:grid;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPickList, isStandalone: true, selector: "cb-picklist", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, sourceHeader: { classPropertyName: "sourceHeader", publicName: "sourceHeader", isSignal: true, isRequired: false, transformFunction: null }, targetHeader: { classPropertyName: "targetHeader", publicName: "targetHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", target: "targetChange", moved: "moved" }, host: { classAttribute: "cb-picklist-host" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CbPickListItemTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-picklist">
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'source', items: source(), header: sourceHeader() ?? t().available }" />
+
+      <div class="cb-picklist__controls">
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToTarget" [disabled]="!selected().source.size" (click)="move('target')">
+          <cb-icon name="chevron-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToTarget" [disabled]="!source().length" (click)="moveAll('target')">
+          <cb-icon name="chevrons-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToSource" [disabled]="!selected().target.size" (click)="move('source')">
+          <cb-icon name="chevron-left" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToSource" [disabled]="!target().length" (click)="moveAll('source')">
+          <cb-icon name="chevrons-left" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'target', items: target(), header: targetHeader() ?? t().selected }" />
+    </div>
+
+    <ng-template #listTpl let-side="side" let-items="items" let-header="header">
+      <section class="cb-picklist__panel">
+        <div class="cb-picklist__header" [id]="headerId(side)">{{ header }}</div>
+        <ul
+          class="cb-picklist__list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-labelledby]="headerId(side)"
+          [attr.data-side]="side"
+          (keydown)="onKeydown($event, side)"
+        >
+          @for (item of items; track $index; let i = $index) {
+            <li
+              class="cb-picklist__item"
+              role="option"
+              [attr.aria-selected]="isSelected(side, i)"
+              [attr.tabindex]="i === tabbable(side) ? 0 : -1"
+              (focus)="setFocused(side, i)"
+              (click)="toggle(side, i)"
+              (dblclick)="moveOne(side, i)"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: i, list: side }" />
+              } @else {
+                {{ item }}
+              }
+            </li>
+          }
+        </ul>
+      </section>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-600)}.cb-picklist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-picklist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-picklist__panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-picklist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-picklist__list{flex:1;height:14rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-picklist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem);-webkit-user-select:none;user-select:none}.cb-picklist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-picklist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}@media(max-width:640px){.cb-picklist{grid-template-columns:minmax(0,1fr)}.cb-picklist__controls{flex-direction:row;justify-content:center}.cb-picklist__controls cb-icon{transform:rotate(90deg)}}:host-context([data-theme=\"dark\"]) .cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CbPickList, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-picklist', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div class="cb-picklist">@for(list of [source(),target()];track $index){<section><h3>{{ $index===0?'Disponibles':'Seleccionados' }}</h3><ul role="listbox" [attr.aria-label]="$index===0?'Disponibles':'Seleccionados'">@for(item of list;track item){<li role="option" tabindex="0" [attr.aria-selected]="selected().has(item)" (click)="toggle(item)">{{item}}</li>}</ul></section>}<nav><button type="button" aria-label="Mover a seleccionados" (click)="move(true)">→</button><button type="button" aria-label="Devolver a disponibles" (click)="move(false)">←</button></nav></div>`, styles: [":host{display:block}.cb-picklist{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}.cb-picklist h3{font-size:.95rem}.cb-picklist ul{height:12rem;overflow:auto;list-style:none;padding:.25rem;margin:0;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-picklist li{padding:.55rem;cursor:pointer}.cb-picklist li[aria-selected=true]{background:var(--cb-color-primary,#10b981);color:#fff}.cb-picklist nav{display:grid;gap:.5rem}\n"] }]
-        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }] } });
+            args: [{ selector: 'cb-picklist', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon], host: { class: 'cb-picklist-host' }, template: `
+    <div class="cb-picklist">
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'source', items: source(), header: sourceHeader() ?? t().available }" />
+
+      <div class="cb-picklist__controls">
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToTarget" [disabled]="!selected().source.size" (click)="move('target')">
+          <cb-icon name="chevron-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToTarget" [disabled]="!source().length" (click)="moveAll('target')">
+          <cb-icon name="chevrons-right" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveToSource" [disabled]="!selected().target.size" (click)="move('source')">
+          <cb-icon name="chevron-left" [size]="16" aria-hidden="true" />
+        </button>
+        <button type="button" class="cb-picklist__btn" [attr.aria-label]="t().moveAllToSource" [disabled]="!target().length" (click)="moveAll('source')">
+          <cb-icon name="chevrons-left" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+
+      <ng-container *ngTemplateOutlet="listTpl; context: { side: 'target', items: target(), header: targetHeader() ?? t().selected }" />
+    </div>
+
+    <ng-template #listTpl let-side="side" let-items="items" let-header="header">
+      <section class="cb-picklist__panel">
+        <div class="cb-picklist__header" [id]="headerId(side)">{{ header }}</div>
+        <ul
+          class="cb-picklist__list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-labelledby]="headerId(side)"
+          [attr.data-side]="side"
+          (keydown)="onKeydown($event, side)"
+        >
+          @for (item of items; track $index; let i = $index) {
+            <li
+              class="cb-picklist__item"
+              role="option"
+              [attr.aria-selected]="isSelected(side, i)"
+              [attr.tabindex]="i === tabbable(side) ? 0 : -1"
+              (focus)="setFocused(side, i)"
+              (click)="toggle(side, i)"
+              (dblclick)="moveOne(side, i)"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: i, list: side }" />
+              } @else {
+                {{ item }}
+              }
+            </li>
+          }
+        </ul>
+      </section>
+    </ng-template>
+  `, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-600)}.cb-picklist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-picklist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-picklist__panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-picklist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-picklist__list{flex:1;height:14rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-picklist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem);-webkit-user-select:none;user-select:none}.cb-picklist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-picklist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}@media(max-width:640px){.cb-picklist{grid-template-columns:minmax(0,1fr)}.cb-picklist__controls{flex-direction:row;justify-content:center}.cb-picklist__controls cb-icon{transform:rotate(90deg)}}:host-context([data-theme=\"dark\"]) .cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"] }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], moved: [{ type: i0.Output, args: ["moved"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbPickListItemTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbPickList };
+export { CbPickList, CbPickListItemTemplate };