@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.17

package/src/lib/fields/image/image.ts

@@ -1,281 +0,0 @@
-import { HttpEventType } from '@angular/common/http';
-import {
-  Component,
-  computed,
-  DestroyRef,
-  ElementRef,
-  inject,
-  input,
-  model,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
-import type { FormValueControl } from '@angular/forms/signals';
-
-import type { ImageField } from '../../core/models/schema.model';
-import { ApiError } from '../../core/models/api.model';
-import { NotificationService } from '../../core/services/notification.service';
-import { Button } from '../../shared/components/button/button';
-import { UploadService } from '../../core/services/upload.service';
-
-/**
- * Carga de imagen (base.md §7): el valor es SOLO la URL pública.
- *
- * Control propio `FormValueControl<string>`: el nodo llega con `[formField]`
- * desde el despachador y el `id` lo pone el host sobre este elemento (mismo
- * patrón que `multiselect`), para que el `<label for>` del campo exista.
- *
- * Estados: vacío (zona punteada + arrastrar-soltar), subiendo (progreso; el
- * valor no cambia hasta la respuesta), con imagen (preview + Reemplazar /
- * Quitar / Ver en grande, y drop sobre el preview para reemplazar) y error
- * (conserva la imagen anterior).
- */
-@Component({
-  selector: 'app-field-image',
-  imports: [Button],
-  template: ` @if (error(); as message) {
-      <p
-        class="mb-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger"
-        role="alert"
-      >
-        {{ message }}
-      </p>
-    }
-    @if (uploading()) {
-      <div class="rounded-xl border border-neutral/20 bg-surface p-3" data-testid="image-uploading">
-        <div class="h-1.5 w-full overflow-hidden rounded-full bg-neutral/20">
-          <div
-            class="h-full rounded-full bg-primary transition-all"
-            [style.width.%]="progress()"
-          ></div>
-        </div>
-        <p class="mt-1 text-xs text-neutral">Subiendo… {{ progress() }}%</p>
-      </div>
-    } @else if (value()) {
-      <div
-        class="rounded-xl border border-neutral/20 bg-surface p-3"
-        data-testid="image-preview"
-        (dragover)="$event.preventDefault()"
-        (drop)="onDrop($event)"
-      >
-        <img
-          [src]="value()"
-          [alt]="''"
-          [class]="previewClass()"
-          [style.aspect-ratio]="aspectRatio()"
-        />
-        <div class="mt-2 flex flex-wrap items-center gap-2">
-          <button
-            type="button"
-            app-button
-            variant="outline"
-            [disabled]="disabled()"
-            (click)="pickFile()"
-          >
-            Reemplazar
-          </button>
-          @if (!field().required) {
-            <button
-              type="button"
-              app-button
-              variant="outline"
-              [disabled]="disabled()"
-              (click)="clear()"
-            >
-              Quitar
-            </button>
-          }
-          <a
-            class="text-sm font-medium text-primary hover:underline"
-            [href]="value()"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Ver en grande
-          </a>
-        </div>
-      </div>
-    } @else {
-      <div
-        class="rounded-xl border-2 border-dashed border-neutral/30 p-6 text-center"
-        data-testid="image-dropzone"
-        (dragover)="$event.preventDefault()"
-        (drop)="onDrop($event)"
-      >
-        <p class="text-sm text-neutral">Arrastrá una imagen acá</p>
-        <button
-          type="button"
-          app-button
-          variant="outline"
-          class="mt-2"
-          [disabled]="disabled()"
-          (click)="pickFile()"
-        >
-          Subir imagen
-        </button>
-      </div>
-    }
-
-    <input
-      #fileInput
-      type="file"
-      class="sr-only"
-      [accept]="acceptAttr()"
-      [disabled]="disabled()"
-      (change)="onFileSelected($event)"
-    />`,
-})
-export class FieldImage implements FormValueControl<string> {
-  readonly field = input.required<ImageField>();
-  /** Recurso dueño de la imagen (firma de subida: carpeta de Cloudinary, §11.2). */
-  readonly resource = input('');
-
-  /** Sincronizado por el directive `FormField` del host. */
-  readonly value = model.required<string>();
-  readonly disabled = input(false);
-  /** Marca el campo como tocado (upload/clear/error), como el `blur` nativo. */
-  readonly touch = output<void>();
-
-  private readonly upload = inject(UploadService);
-  private readonly notifications = inject(NotificationService);
-  private readonly destroyRef = inject(DestroyRef);
-
-  protected readonly uploading = signal(false);
-  protected readonly progress = signal(0);
-  protected readonly error = signal<string | null>(null);
-
-  /** Literal en el código: Tailwind v4 genera las clases al escanearlo. */
-  protected readonly previewClass = computed(
-    () => `${this.field().previewSize ?? 'w-48'} rounded-lg object-cover`,
-  );
-  protected readonly aspectRatio = computed(() => this.field().aspectRatio ?? null);
-  protected readonly acceptAttr = computed(() => this.field().accept ?? 'image/*');
-
-  /**
-   * Template ref `#fileInput`: Angular NO auto-asigna las template refs a
-   * propiedades de clase (el campo `fileInput` quedaba `undefined` y
-   * `pickFile()` no hacía nada — el selector no se abría). Igual que en
-   * `modal.ts`: el tipo se expresa como genérico (`ElementRef<T>`).
-   */
-  private readonly fileInput = viewChild.required<ElementRef<HTMLInputElement>>('fileInput');
-  private uploadSub?: { unsubscribe(): void };
-
-  protected pickFile(): void {
-    this.fileInput().nativeElement.click();
-  }
-
-  protected clear(): void {
-    this.value.set('');
-    this.error.set(null);
-    this.touch.emit();
-  }
-
-  protected onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const file = input.files?.[0];
-    // Permite volver a elegir el mismo archivo tras un error.
-    input.value = '';
-    if (file) {
-      this.startUpload(file);
-    }
-  }
-
-  protected onDrop(event: Event): void {
-    event.preventDefault();
-    const file = (event as DragEvent).dataTransfer?.files?.[0];
-    if (file) {
-      this.startUpload(file);
-    }
-  }
-
-  /** Valida en cliente (accept + maxSizeMB) y sube con progreso. */
-  private startUpload(file: File): void {
-    if (this.disabled()) {
-      return;
-    }
-    const problem = this.validate(file);
-    if (problem !== null) {
-      this.error.set(problem);
-      this.touch.emit();
-      return;
-    }
-    this.error.set(null);
-    this.uploading.set(true);
-    this.progress.set(0);
-    this.touch.emit();
-
-    this.uploadSub?.unsubscribe();
-    // El nombre del campo viaja siempre: si declara `formats`, el backend
-    // firma ESA lista; sin formatos firma la lista global (R9.5.3).
-    this.uploadSub = this.upload
-      .uploadWithProgress(file, this.resource(), this.field().key)
-      .subscribe({
-        next: (event) => {
-          if (event.type === HttpEventType.UploadProgress) {
-            if (event.total) {
-              this.progress.set(Math.round((event.loaded / event.total) * 100));
-            }
-            return;
-          }
-          if (event.type === HttpEventType.Response) {
-            const url = event.body ?? '';
-            this.uploading.set(false);
-            if (url === '') {
-              this.error.set('No se pudo subir la imagen.');
-              return;
-            }
-            this.value.set(url);
-            this.notifications.success('Imagen subida.');
-          }
-        },
-        error: (err: unknown) => {
-          this.uploading.set(false);
-          // El backend explica el motivo (firma inválida, 429 rate-limit…).
-          this.error.set(
-            err instanceof ApiError
-              ? err.message
-              : 'No se pudo subir la imagen. Revisa la conexión e inténtalo de nuevo.',
-          );
-        },
-      });
-    this.destroyRef.onDestroy(() => this.uploadSub?.unsubscribe());
-  }
-
-  private validate(file: File): string | null {
-    if (!file.type.startsWith('image/')) {
-      return 'El archivo debe ser una imagen.';
-    }
-    const accept = this.field().accept;
-    if (accept !== undefined && !acceptMatches(accept, file)) {
-      return 'Formato no permitido para este campo.';
-    }
-    const maxSizeMB = this.field().maxSizeMB;
-    if (maxSizeMB !== undefined && file.size > maxSizeMB * 1024 * 1024) {
-      return `La imagen supera ${maxSizeMB} MB.`;
-    }
-    return null;
-  }
-}
-
-/** `accept` de `<input type=file>`: lista, `image/*` o extensión `.png`. */
-function acceptMatches(accept: string, file: File): boolean {
-  for (const raw of accept.split(',')) {
-    const entry = raw.trim().toLowerCase();
-    if (entry === '') {
-      continue;
-    }
-    if (entry.startsWith('.')) {
-      if (file.name.toLowerCase().endsWith(entry)) {
-        return true;
-      }
-    } else if (entry.endsWith('/*')) {
-      if (file.type.startsWith(entry.slice(0, -1))) {
-        return true;
-      }
-    } else if (file.type === entry) {
-      return true;
-    }
-  }
-  return false;
-}

package/src/lib/fields/key-value/key-value.descriptor.ts

@@ -1,11 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `key-value` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'key-value',
-  since: '1.0',
-  load: () => import('./key-value').then((module) => module.FieldKeyValue),
-  seed: 'array',
-  surfaces: ['form', 'display'],
-};

package/src/lib/fields/key-value/key-value.ts

@@ -1,283 +0,0 @@
-import { Component, computed, inject, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-import {
-  CdkDrag,
-  CdkDragDrop,
-  CdkDragHandle,
-  CdkDropList,
-  moveItemInArray,
-} from '@angular/cdk/drag-drop';
-
-import { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from '@lucide/angular';
-import type { KeyValueField, KeyValueItem } from '../../core/models/schema.model';
-import { NotificationService } from '../../core/services/notification.service';
-import { Button } from '../../shared/components/button/button';
-import {
-  appendPosition,
-  computeMove,
-  GAP,
-  type PositionedItem,
-} from '../../shared/utils/gap-sorting';
-import { FieldAria } from '../field-aria';
-import { childTree, itemTree, listTree, type RootTree } from '../field-node';
-
-/**
- * Pares clave→valor (base.md §9 «ficha técnica»). Hoja: tabla con sus
- * propios `<input [formField]>` (nodos `key`/`value` del ítem) y no toca
- * FieldHost. `position` se calcula con gap-sorting igual que en `list`.
- */
-@Component({
-  selector: 'app-field-key-value',
-  imports: [
-    FieldAria,
-    Button,
-    CdkDrag,
-    CdkDragHandle,
-    CdkDropList,
-    FormField,
-    LucideArrowDown,
-    LucideArrowUp,
-    LucideGripVertical,
-    LucideTrash2,
-  ],
-  template: `
-    @if (items().length === 0) {
-      <p
-        class="rounded-lg border border-dashed border-neutral/30 px-4 py-6 text-center text-sm text-neutral"
-      >
-        {{ field().emptyText ?? 'Sin elementos.' }}
-      </p>
-    } @else {
-      <div class="overflow-x-auto rounded-xl border border-neutral/20 bg-surface">
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral/20 text-left text-xs font-medium text-neutral">
-              <th class="w-10 px-3 py-2" scope="col"><span class="sr-only">Orden</span></th>
-              <th class="px-3 py-2" scope="col">Clave</th>
-              <th class="px-3 py-2" scope="col">Valor</th>
-              <th class="w-28 px-3 py-2" scope="col"><span class="sr-only">Acciones</span></th>
-            </tr>
-          </thead>
-          <tbody
-            cdkDropList
-            [cdkDropListData]="items()"
-            [cdkDropListDisabled]="!sortable()"
-            (cdkDropListDropped)="onDrop($event)"
-          >
-            @for (item of items(); track $index; let i = $index) {
-              <tr
-                class="border-b border-neutral/10 last:border-b-0"
-                cdkDrag
-                [cdkDragDisabled]="!sortable()"
-              >
-                <td class="px-3 py-2 align-middle">
-                  @if (sortable()) {
-                    <button
-                      type="button"
-                      app-button
-                      variant="ghost"
-                      size="icon"
-                      class="cursor-grab"
-                      cdkDragHandle
-                      [attr.aria-label]="'Reordenar fila ' + (i + 1)"
-                      title="Arrastrar para reordenar"
-                    >
-                      <svg lucideGripVertical size="16" />
-                    </button>
-                  }
-                </td>
-                <td class="px-3 py-2">
-                  <input
-                    class="field-input"
-                    type="text"
-                    placeholder="Clave"
-                    [attr.aria-label]="'Clave, fila ' + (i + 1)"
-                    [id]="idPrefix() + '-key-' + i"
-                    [formField]="fieldNode(i, 'key')"
-                  />
-                </td>
-                <td class="px-3 py-2">
-                  <input
-                    class="field-input"
-                    type="text"
-                    placeholder="Valor"
-                    [attr.aria-label]="'Valor, fila ' + (i + 1)"
-                    [id]="idPrefix() + '-value-' + i"
-                    [formField]="fieldNode(i, 'value')"
-                  />
-                </td>
-                <td class="px-3 py-2">
-                  <span class="flex items-center justify-end gap-2 lg:gap-1">
-                    <button
-                      type="button"
-                      app-button
-                      variant="ghost"
-                      size="icon"
-                      [disabled]="i === 0"
-                      [attr.aria-label]="'Subir fila ' + (i + 1)"
-                      (click)="move(i, -1)"
-                    >
-                      <svg lucideArrowUp size="16" />
-                    </button>
-                    <button
-                      type="button"
-                      app-button
-                      variant="ghost"
-                      size="icon"
-                      [disabled]="i === items().length - 1"
-                      [attr.aria-label]="'Bajar fila ' + (i + 1)"
-                      (click)="move(i, 1)"
-                    >
-                      <svg lucideArrowDown size="16" />
-                    </button>
-                    <button
-                      type="button"
-                      app-button
-                      variant="ghost"
-                      size="icon"
-                      [disabled]="!canRemove()"
-                      [attr.aria-label]="'Eliminar fila ' + (i + 1)"
-                      (click)="remove(i)"
-                    >
-                      <svg lucideTrash2 size="16" />
-                    </button>
-                  </span>
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-    }
-
-    <div class="mt-3">
-      <button app-button variant="outline" type="button" [disabled]="!canAdd()" (click)="add()">
-        + {{ field().addLabel ?? 'Agregar especificación' }}
-      </button>
-    </div>
-  `,
-})
-export class FieldKeyValue {
-  readonly field = input.required<KeyValueField>();
-  readonly tree = input.required<RootTree>();
-
-  private readonly notifications = inject(NotificationService);
-
-  private readonly itemsNode = computed(() =>
-    listTree<KeyValueItem>(this.tree(), this.field().key),
-  );
-  private readonly state = computed(() => this.itemsNode()());
-  /** Prefijo estable del campo para los id de cada celda (§8). */
-  protected readonly idPrefix = computed(() => this.state().name());
-  protected readonly items = computed(() => this.state().value() ?? []);
-
-  protected readonly sortable = computed(() => this.field().sortable ?? true);
-
-  /** Nodo de `key`/`value` del ítem; se llama fresco en cada render (NG01904). */
-  protected fieldNode(
-    index: number,
-    column: 'key' | 'value',
-  ): ReturnType<typeof childTree<string>> {
-    return childTree<string>(itemTree(this.itemsNode(), index), column);
-  }
-
-  protected canAdd(): boolean {
-    const max = this.field().max;
-    return max === undefined || this.items().length < max;
-  }
-
-  protected canRemove(): boolean {
-    return this.items().length > (this.field().min ?? 0);
-  }
-
-  protected add(): void {
-    if (!this.canAdd()) {
-      return;
-    }
-    const positionKey = this.field().positionField;
-    const row: KeyValueItem & Record<string, unknown> = { key: '', value: '' };
-    if (positionKey !== undefined) {
-      row[positionKey] = appendPosition(this.positioned());
-    }
-    this.updateItems((next) => {
-      next.push(row);
-    });
-  }
-
-  protected move(index: number, direction: -1 | 1): void {
-    const target = index + direction;
-    if (target < 0 || target >= this.items().length) {
-      return;
-    }
-    this.applyMove(index, target);
-  }
-
-  protected onDrop(event: CdkDragDrop<KeyValueItem[]>): void {
-    if (event.previousIndex === event.currentIndex) {
-      return;
-    }
-    this.applyMove(event.previousIndex, event.currentIndex);
-  }
-
-  protected async remove(index: number): Promise<void> {
-    if (!this.canRemove()) {
-      return;
-    }
-    const row = this.items()[index];
-    if (row !== undefined && (row.key.trim() !== '' || row.value.trim() !== '')) {
-      const accepted = await this.notifications.confirm({
-        title: `Eliminar fila ${index + 1}`,
-        message: 'Esta acción no se puede deshacer.',
-        confirmLabel: 'Eliminar',
-        cancelLabel: 'Cancelar',
-      });
-      if (!accepted) {
-        return;
-      }
-    }
-    this.updateItems((next) => {
-      next.splice(index, 1);
-    });
-  }
-
-  /** Mueve y recalcula `position` (base.md §8): cambios antes del splice. */
-  private applyMove(from: number, to: number): void {
-    const positionKey = this.field().positionField;
-    this.updateItems((next) => {
-      if (positionKey !== undefined) {
-        const result = computeMove(this.positioned(), String(from), to);
-        for (const change of result.changes) {
-          const row = next[Number(change.key)] as
-            (KeyValueItem & Record<string, unknown>) | undefined;
-          if (row !== undefined) {
-            row[positionKey] = change.position;
-          }
-        }
-      }
-      moveItemInArray(next, from, to);
-    });
-  }
-
-  private positioned(): PositionedItem[] {
-    const positionKey = this.field().positionField;
-    return this.items().map((item, index) => {
-      const raw =
-        positionKey !== undefined
-          ? (item as unknown as Record<string, unknown>)[positionKey]
-          : undefined;
-      // Fallback: un registro viejo sin `position` se numera como rebalanceo.
-      return {
-        key: String(index),
-        position: typeof raw === 'number' ? raw : (index + 1) * GAP,
-      };
-    });
-  }
-
-  private updateItems(mutator: (next: KeyValueItem[]) => void): void {
-    this.state().controlValue.update((current) => {
-      const next = [...current];
-      mutator(next);
-      return next;
-    });
-  }
-}

package/src/lib/fields/list/list.descriptor.ts

@@ -1,21 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `list` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'list',
-  since: '1.0',
-  load: () => import('./list').then((module) => module.FieldList),
-  seed: 'array',
-  surfaces: ['form', 'display'],
-  // Compuesto: además de su árbol dibuja el template de cada hijo y hereda
-  // el `exists` del nivel para no reactivar el borrado de filas (R3.6).
-  inputs: (config, extras) => ({
-    field: config,
-    tree: extras.ctx.tree,
-    childTemplate: extras.childTemplate,
-    serverErrors: extras.ctx.serverErrors,
-    pathPrefix: extras.ctx.pathPrefix,
-    exists: extras.ctx.exists,
-  }),
-};