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

package/fesm2022/tinya-code-gas-admin-ui-list-DTtCYS4d.mjs

@@ -0,0 +1,637 @@
+import { t as Button } from "./tinya-code-gas-admin-ui-button-BQjNW8KB.mjs";
+import { t as NotificationService } from "./tinya-code-gas-admin-ui-notification.service-LjSULER6.mjs";
+import { i as listTree, r as itemTree } from "./tinya-code-gas-admin-ui-field-node-CIK6KNN_.mjs";
+import { a as colSpanClass, i as seedFields } from "./tinya-code-gas-admin-ui-seed-DkVZbxPP.mjs";
+import { n as appendPosition, r as computeMove, t as GAP } from "./tinya-code-gas-admin-ui-gap-sorting-iTdy_DYG.mjs";
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, signal } from "@angular/core";
+import { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from "@lucide/angular";
+import { NgTemplateOutlet } from "@angular/common";
+import { CdkDrag, CdkDragHandle, CdkDropList, moveItemInArray } from "@angular/cdk/drag-drop";
+var FieldList = class FieldList {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	tree = input.required(...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+	serverErrors = input({}, ...ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []);
+	pathPrefix = input("", ...ngDevMode ? [{ debugName: "pathPrefix" }] : /* istanbul ignore next */ []);
+	exists = input(false, ...ngDevMode ? [{ debugName: "exists" }] : /* istanbul ignore next */ []);
+	childTemplate = input.required(...ngDevMode ? [{ debugName: "childTemplate" }] : /* istanbul ignore next */ []);
+	notifications = inject(NotificationService);
+	intent = signal({}, ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
+	itemsTree = computed(() => listTree(this.tree(), this.field().key), ...ngDevMode ? [{ debugName: "itemsTree" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.itemsTree()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	items = computed(() => this.state().value() ?? [], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	sortable = computed(() => this.field().sortable ?? true, ...ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []);
+	canAdd() {
+		const max = this.field().max;
+		return max === void 0 || this.items().length < max;
+	}
+	canRemove() {
+		return this.items().length > (this.field().min ?? 0);
+	}
+	isAccordion() {
+		return this.field().itemDisplay === "accordion";
+	}
+	isRow() {
+		return this.field().itemDisplay === "row";
+	}
+	isPrimary(index) {
+		return (this.field().primaryFirst ?? false) && index === 0;
+	}
+	titleOf(index) {
+		const item = this.items()[index];
+		const key = this.field().itemTitle;
+		const value = key !== void 0 && item !== void 0 ? item[key] : void 0;
+		return typeof value === "string" && value !== "" ? value : `#${index + 1}`;
+	}
+	openOf(index) {
+		const forced = this.intent()[index];
+		if (forced !== void 0) return forced;
+		return this.hasProblem(index);
+	}
+	toggle(index) {
+		const willOpen = !this.openOf(index);
+		this.intent.update((map) => ({
+			...map,
+			[index]: willOpen
+		}));
+	}
+	hasProblem(index) {
+		const state = itemTree(this.itemsTree(), index)();
+		if (state.invalid() && state.touched()) return true;
+		const prefix = `${this.pathPrefix()}${this.field().key}[${index}].`;
+		return Object.keys(this.serverErrors()).some((path) => path.startsWith(prefix));
+	}
+	add() {
+		if (!this.canAdd()) return;
+		const item = seedFields(this.field().itemFields);
+		const positionKey = this.field().positionField;
+		if (positionKey !== void 0) item[positionKey] = appendPosition(this.positioned());
+		const newIndex = this.items().length;
+		this.updateItems((next) => {
+			next.push(item);
+		});
+		this.intent.update((map) => ({
+			...map,
+			[newIndex]: true
+		}));
+	}
+	move(index, direction) {
+		const target = index + direction;
+		if (target < 0 || target >= this.items().length) return;
+		this.applyMove(index, target);
+	}
+	onDrop(event) {
+		if (event.previousIndex === event.currentIndex) return;
+		this.applyMove(event.previousIndex, event.currentIndex);
+	}
+	async remove(index) {
+		if (!this.canRemove()) return;
+		if (this.hasContent(index)) {
+			if (!await this.notifications.confirm({
+				title: `Eliminar elemento ${index + 1}`,
+				message: "Esta acción no se puede deshacer.",
+				confirmLabel: "Eliminar",
+				cancelLabel: "Cancelar"
+			})) return;
+		}
+		this.updateItems((next) => {
+			next.splice(index, 1);
+		});
+		this.intent.set({});
+	}
+	childContext(index) {
+		const context = {
+			fields: this.field().itemFields,
+			tree: itemTree(this.itemsTree(), index),
+			prefix: `${this.pathPrefix()}${this.field().key}[${index}].`,
+			errors: this.serverErrors(),
+			exists: this.exists(),
+			row: this.isRow(),
+			colSpan: colSpanClass
+		};
+		return {
+			...context,
+			$implicit: context
+		};
+	}
+	hasContent(index) {
+		const item = this.items()[index];
+		if (item === void 0) return false;
+		return JSON.stringify(item) !== JSON.stringify(seedFields(this.field().itemFields));
+	}
+	applyMove(from, to) {
+		const positionKey = this.field().positionField;
+		this.updateItems((next) => {
+			if (positionKey !== void 0) {
+				const result = computeMove(this.positioned(), String(from), to);
+				for (const change of result.changes) {
+					const item = next[Number(change.key)];
+					if (item !== void 0) item[positionKey] = change.position;
+				}
+			}
+			moveItemInArray(next, from, to);
+		});
+		this.intent.set({});
+	}
+	positioned() {
+		const positionKey = this.field().positionField;
+		return this.items().map((item, index) => {
+			const raw = positionKey !== void 0 ? item[positionKey] : void 0;
+			return {
+				key: String(index),
+				position: typeof raw === "number" ? raw : (index + 1) * GAP
+			};
+		});
+	}
+	updateItems(mutator) {
+		this.state().controlValue.update((current) => {
+			const next = [...current];
+			mutator(next);
+			return next;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FieldList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: FieldList,
+		isStandalone: true,
+		selector: "app-field-list",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tree: {
+				classPropertyName: "tree",
+				publicName: "tree",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			serverErrors: {
+				classPropertyName: "serverErrors",
+				publicName: "serverErrors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pathPrefix: {
+				classPropertyName: "pathPrefix",
+				publicName: "pathPrefix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			exists: {
+				classPropertyName: "exists",
+				publicName: "exists",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			childTemplate: {
+				classPropertyName: "childTemplate",
+				publicName: "childTemplate",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		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
+        cdkDropList
+        class="space-y-3"
+        [cdkDropListData]="items()"
+        [cdkDropListDisabled]="!sortable()"
+        (cdkDropListDropped)="onDrop($event)"
+      >
+        @for (item of items(); track $index; let i = $index) {
+          <div
+            class="rounded-xl border border-neutral/20 bg-surface p-3"
+            cdkDrag
+            [cdkDragDisabled]="!sortable()"
+          >
+            <div class="mb-2 flex items-center gap-1.5">
+              @if (sortable()) {
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  class="cursor-grab"
+                  cdkDragHandle
+                  [attr.aria-label]="'Reordenar elemento ' + (i + 1)"
+                  title="Arrastrar para reordenar"
+                >
+                  <svg lucideGripVertical size="16" />
+                </button>
+              }
+              @if (isAccordion()) {
+                <button
+                  type="button"
+                  class="flex min-w-0 items-center gap-1 text-sm font-medium"
+                  [attr.aria-expanded]="openOf(i)"
+                  (click)="toggle(i)"
+                >
+                  <span aria-hidden="true">{{ openOf(i) ? '▾' : '▸' }}</span>
+                  <span class="truncate">{{ titleOf(i) }}</span>
+                </button>
+              }
+              @if (isPrimary(i)) {
+                <span
+                  class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+                >
+                  Principal
+                </span>
+              }
+              @if (hasProblem(i)) {
+                <span class="text-xs font-medium text-danger">Revisar</span>
+              }
+              <span class="ml-auto flex shrink-0 items-center gap-2 lg:gap-1">
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  [disabled]="i === 0"
+                  [attr.aria-label]="'Subir elemento ' + (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 elemento ' + (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 elemento ' + (i + 1)"
+                  (click)="remove(i)"
+                >
+                  <svg lucideTrash2 size="16" />
+                </button>
+              </span>
+            </div>
+            @if (!isAccordion() || openOf(i)) {
+              @if (isRow()) {
+                <div class="flex flex-wrap items-start gap-3">
+                  <ng-container
+                    [ngTemplateOutlet]="childTemplate()"
+                    [ngTemplateOutletContext]="childContext(i)"
+                  />
+                </div>
+              } @else {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  <ng-container
+                    [ngTemplateOutlet]="childTemplate()"
+                    [ngTemplateOutletContext]="childContext(i)"
+                  />
+                </div>
+              }
+            }
+          </div>
+        }
+      </div>
+    }
+
+    <div class="mt-3">
+      <button app-button variant="outline" type="button" [disabled]="!canAdd()" (click)="add()">
+        + {{ field().addLabel ?? 'Agregar elemento' }}
+      </button>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkDrag,
+				selector: "[cdkDrag]",
+				inputs: [
+					"cdkDragData",
+					"cdkDragLockAxis",
+					"cdkDragRootElement",
+					"cdkDragBoundary",
+					"cdkDragStartDelay",
+					"cdkDragFreeDragPosition",
+					"cdkDragDisabled",
+					"cdkDragConstrainPosition",
+					"cdkDragPreviewClass",
+					"cdkDragPreviewContainer",
+					"cdkDragScale"
+				],
+				outputs: [
+					"cdkDragStarted",
+					"cdkDragReleased",
+					"cdkDragEnded",
+					"cdkDragEntered",
+					"cdkDragExited",
+					"cdkDragDropped",
+					"cdkDragMoved"
+				],
+				exportAs: ["cdkDrag"]
+			},
+			{
+				kind: "directive",
+				type: CdkDragHandle,
+				selector: "[cdkDragHandle]",
+				inputs: ["cdkDragHandleDisabled"]
+			},
+			{
+				kind: "directive",
+				type: CdkDropList,
+				selector: "[cdkDropList], cdk-drop-list",
+				inputs: [
+					"cdkDropListConnectedTo",
+					"cdkDropListData",
+					"cdkDropListOrientation",
+					"id",
+					"cdkDropListLockAxis",
+					"cdkDropListDisabled",
+					"cdkDropListSortingDisabled",
+					"cdkDropListEnterPredicate",
+					"cdkDropListSortPredicate",
+					"cdkDropListAutoScrollDisabled",
+					"cdkDropListAutoScrollStep",
+					"cdkDropListElementContainer",
+					"cdkDropListHasAnchor"
+				],
+				outputs: [
+					"cdkDropListDropped",
+					"cdkDropListEntered",
+					"cdkDropListExited",
+					"cdkDropListSorted"
+				],
+				exportAs: ["cdkDropList"]
+			},
+			{
+				kind: "component",
+				type: LucideArrowDown,
+				selector: "svg[lucideArrowDown]"
+			},
+			{
+				kind: "component",
+				type: LucideArrowUp,
+				selector: "svg[lucideArrowUp]"
+			},
+			{
+				kind: "component",
+				type: LucideGripVertical,
+				selector: "svg[lucideGripVertical]"
+			},
+			{
+				kind: "component",
+				type: LucideTrash2,
+				selector: "svg[lucideTrash], svg[lucideTrash2]"
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FieldList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-list",
+			imports: [
+				Button,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDropList,
+				LucideArrowDown,
+				LucideArrowUp,
+				LucideGripVertical,
+				LucideTrash2,
+				NgTemplateOutlet
+			],
+			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
+        cdkDropList
+        class="space-y-3"
+        [cdkDropListData]="items()"
+        [cdkDropListDisabled]="!sortable()"
+        (cdkDropListDropped)="onDrop($event)"
+      >
+        @for (item of items(); track $index; let i = $index) {
+          <div
+            class="rounded-xl border border-neutral/20 bg-surface p-3"
+            cdkDrag
+            [cdkDragDisabled]="!sortable()"
+          >
+            <div class="mb-2 flex items-center gap-1.5">
+              @if (sortable()) {
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  class="cursor-grab"
+                  cdkDragHandle
+                  [attr.aria-label]="'Reordenar elemento ' + (i + 1)"
+                  title="Arrastrar para reordenar"
+                >
+                  <svg lucideGripVertical size="16" />
+                </button>
+              }
+              @if (isAccordion()) {
+                <button
+                  type="button"
+                  class="flex min-w-0 items-center gap-1 text-sm font-medium"
+                  [attr.aria-expanded]="openOf(i)"
+                  (click)="toggle(i)"
+                >
+                  <span aria-hidden="true">{{ openOf(i) ? '▾' : '▸' }}</span>
+                  <span class="truncate">{{ titleOf(i) }}</span>
+                </button>
+              }
+              @if (isPrimary(i)) {
+                <span
+                  class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+                >
+                  Principal
+                </span>
+              }
+              @if (hasProblem(i)) {
+                <span class="text-xs font-medium text-danger">Revisar</span>
+              }
+              <span class="ml-auto flex shrink-0 items-center gap-2 lg:gap-1">
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  [disabled]="i === 0"
+                  [attr.aria-label]="'Subir elemento ' + (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 elemento ' + (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 elemento ' + (i + 1)"
+                  (click)="remove(i)"
+                >
+                  <svg lucideTrash2 size="16" />
+                </button>
+              </span>
+            </div>
+            @if (!isAccordion() || openOf(i)) {
+              @if (isRow()) {
+                <div class="flex flex-wrap items-start gap-3">
+                  <ng-container
+                    [ngTemplateOutlet]="childTemplate()"
+                    [ngTemplateOutletContext]="childContext(i)"
+                  />
+                </div>
+              } @else {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  <ng-container
+                    [ngTemplateOutlet]="childTemplate()"
+                    [ngTemplateOutletContext]="childContext(i)"
+                  />
+                </div>
+              }
+            }
+          </div>
+        }
+      </div>
+    }
+
+    <div class="mt-3">
+      <button app-button variant="outline" type="button" [disabled]="!canAdd()" (click)="add()">
+        + {{ field().addLabel ?? 'Agregar elemento' }}
+      </button>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		tree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tree",
+				required: true
+			}]
+		}],
+		serverErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "serverErrors",
+				required: false
+			}]
+		}],
+		pathPrefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pathPrefix",
+				required: false
+			}]
+		}],
+		exists: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exists",
+				required: false
+			}]
+		}],
+		childTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "childTemplate",
+				required: true
+			}]
+		}]
+	}
+});
+export { FieldList };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-list-DTtCYS4d.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-list-DTtCYS4d.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-list-DTtCYS4d.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/fields/list/list.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, inject, input, signal, type TemplateRef } from '@angular/core';\nimport {\n  CdkDrag,\n  CdkDragDrop,\n  CdkDragHandle,\n  CdkDropList,\n  moveItemInArray,\n} from '@angular/cdk/drag-drop';\n\nimport { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from '@lucide/angular';\nimport type { ListField } from '../../core/models/schema.model';\nimport { NotificationService } from '../../core/services/notification.service';\nimport { Button } from '../../shared/components/button/button';\nimport { colSpanClass } from '../../shared/utils/col-span';\nimport {\n  appendPosition,\n  computeMove,\n  GAP,\n  type PositionedItem,\n} from '../../shared/utils/gap-sorting';\nimport { seedFields } from '../../shared/utils/seed';\nimport { itemTree, listTree, type ListChildContext, type RootTree } from '../field-node';\n\n/**\n * Lista de ítems (base.md §6): asa de arrastre, subir/bajar, eliminar con\n * confirmación (sólo si el ítem tiene contenido) y agregar respetando\n * `min`/`max`.\n *\n * **Los hijos los renderiza el despachador**: este componente recibe el\n * `TemplateRef` (#childTpl, declarado en el `@case` de `field-host`) y lo\n * instancia una vez por ítem con `ngTemplateOutlet`. No importa FieldHost —\n * un import mutuo revienta en runtime (ciclo-check del repo).\n *\n * El orden de visualización ES el orden del arreglo modelo; `position`\n * (gap-sorting, base.md §8) se calcula junto con cada mutación y viaja en el\n * payload. Un hueco que deja un `remove` se autocura en el siguiente `move`.\n */\n@Component({\n  selector: 'app-field-list',\n  imports: [\n    Button,\n    CdkDrag,\n    CdkDragHandle,\n    CdkDropList,\n    LucideArrowDown,\n    LucideArrowUp,\n    LucideGripVertical,\n    LucideTrash2,\n    NgTemplateOutlet,\n  ],\n  template: `\n    @if (items().length === 0) {\n      <p\n        class=\"rounded-lg border border-dashed border-neutral/30 px-4 py-6 text-center text-sm text-neutral\"\n      >\n        {{ field().emptyText ?? 'Sin elementos.' }}\n      </p>\n    } @else {\n      <div\n        cdkDropList\n        class=\"space-y-3\"\n        [cdkDropListData]=\"items()\"\n        [cdkDropListDisabled]=\"!sortable()\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        @for (item of items(); track $index; let i = $index) {\n          <div\n            class=\"rounded-xl border border-neutral/20 bg-surface p-3\"\n            cdkDrag\n            [cdkDragDisabled]=\"!sortable()\"\n          >\n            <div class=\"mb-2 flex items-center gap-1.5\">\n              @if (sortable()) {\n                <button\n                  type=\"button\"\n                  app-button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  class=\"cursor-grab\"\n                  cdkDragHandle\n                  [attr.aria-label]=\"'Reordenar elemento ' + (i + 1)\"\n                  title=\"Arrastrar para reordenar\"\n                >\n                  <svg lucideGripVertical size=\"16\" />\n                </button>\n              }\n              @if (isAccordion()) {\n                <button\n                  type=\"button\"\n                  class=\"flex min-w-0 items-center gap-1 text-sm font-medium\"\n                  [attr.aria-expanded]=\"openOf(i)\"\n                  (click)=\"toggle(i)\"\n                >\n                  <span aria-hidden=\"true\">{{ openOf(i) ? '▾' : '▸' }}</span>\n                  <span class=\"truncate\">{{ titleOf(i) }}</span>\n                </button>\n              }\n              @if (isPrimary(i)) {\n                <span\n                  class=\"rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary\"\n                >\n                  Principal\n                </span>\n              }\n              @if (hasProblem(i)) {\n                <span class=\"text-xs font-medium text-danger\">Revisar</span>\n              }\n              <span class=\"ml-auto flex shrink-0 items-center gap-2 lg:gap-1\">\n                <button\n                  type=\"button\"\n                  app-button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  [disabled]=\"i === 0\"\n                  [attr.aria-label]=\"'Subir elemento ' + (i + 1)\"\n                  (click)=\"move(i, -1)\"\n                >\n                  <svg lucideArrowUp size=\"16\" />\n                </button>\n                <button\n                  type=\"button\"\n                  app-button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  [disabled]=\"i === items().length - 1\"\n                  [attr.aria-label]=\"'Bajar elemento ' + (i + 1)\"\n                  (click)=\"move(i, 1)\"\n                >\n                  <svg lucideArrowDown size=\"16\" />\n                </button>\n                <button\n                  type=\"button\"\n                  app-button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  [disabled]=\"!canRemove()\"\n                  [attr.aria-label]=\"'Eliminar elemento ' + (i + 1)\"\n                  (click)=\"remove(i)\"\n                >\n                  <svg lucideTrash2 size=\"16\" />\n                </button>\n              </span>\n            </div>\n            @if (!isAccordion() || openOf(i)) {\n              @if (isRow()) {\n                <div class=\"flex flex-wrap items-start gap-3\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"childTemplate()\"\n                    [ngTemplateOutletContext]=\"childContext(i)\"\n                  />\n                </div>\n              } @else {\n                <div class=\"grid grid-cols-1 gap-x-4 sm:grid-cols-12\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"childTemplate()\"\n                    [ngTemplateOutletContext]=\"childContext(i)\"\n                  />\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <div class=\"mt-3\">\n      <button app-button variant=\"outline\" type=\"button\" [disabled]=\"!canAdd()\" (click)=\"add()\">\n        + {{ field().addLabel ?? 'Agregar elemento' }}\n      </button>\n    </div>\n  `,\n})\nexport class FieldList {\n  readonly field = input.required<ListField>();\n  readonly tree = input.required<RootTree>();\n  readonly serverErrors = input<Record<string, string>>({});\n  readonly pathPrefix = input('');\n  readonly exists = input(false);\n  /** Template de los hijos, declarado en el `@case` del despachador. */\n  readonly childTemplate = input.required<TemplateRef<ListChildContext>>();\n\n  private readonly notifications = inject(NotificationService);\n\n  /** Intento de apertura por ítem (`undefined` → sigue el auto-open). */\n  private readonly intent = signal<Record<number, boolean>>({});\n\n  private readonly itemsTree = computed(() =>\n    listTree<Record<string, unknown>>(this.tree(), this.field().key),\n  );\n  private readonly state = computed(() => this.itemsTree()());\n  protected readonly items = computed(() => this.state().value() ?? []);\n\n  protected readonly sortable = computed(() => this.field().sortable ?? true);\n  /** Clase fija de la barra de ícono (literal: Tailwind v4 es JIT). */\n\n  protected canAdd(): boolean {\n    const max = this.field().max;\n    return max === undefined || this.items().length < max;\n  }\n\n  protected canRemove(): boolean {\n    return this.items().length > (this.field().min ?? 0);\n  }\n\n  protected isAccordion(): boolean {\n    return this.field().itemDisplay === 'accordion';\n  }\n\n  protected isRow(): boolean {\n    return this.field().itemDisplay === 'row';\n  }\n\n  protected isPrimary(index: number): boolean {\n    return (this.field().primaryFirst ?? false) && index === 0;\n  }\n\n  protected titleOf(index: number): string {\n    const item = this.items()[index];\n    const key = this.field().itemTitle;\n    const value = key !== undefined && item !== undefined ? item[key] : undefined;\n    return typeof value === 'string' && value !== '' ? value : `#${index + 1}`;\n  }\n\n  // ── Ítem abierto (accordion) ──\n\n  protected openOf(index: number): boolean {\n    const forced = this.intent()[index];\n    if (forced !== undefined) {\n      return forced;\n    }\n    return this.hasProblem(index);\n  }\n\n  protected toggle(index: number): void {\n    const willOpen = !this.openOf(index);\n    this.intent.update((map) => ({ ...map, [index]: willOpen }));\n  }\n\n  /** Inválido+tocado (agrega hijos) o error del backend bajo `key[i].`. */\n  hasProblem(index: number): boolean {\n    const state = itemTree(this.itemsTree(), index)();\n    if (state.invalid() && state.touched()) {\n      return true;\n    }\n    const prefix = `${this.pathPrefix()}${this.field().key}[${index}].`;\n    return Object.keys(this.serverErrors()).some((path) => path.startsWith(prefix));\n  }\n\n  // ── Mutaciones (todas sobre `controlValue` → marcan `dirty` solas) ──\n\n  protected add(): void {\n    if (!this.canAdd()) {\n      return;\n    }\n    const item = seedFields(this.field().itemFields);\n    const positionKey = this.field().positionField;\n    if (positionKey !== undefined) {\n      item[positionKey] = appendPosition(this.positioned());\n    }\n    const newIndex = this.items().length;\n    this.updateItems((next) => {\n      next.push(item);\n    });\n    // El ítem nuevo arranca visible.\n    this.intent.update((map) => ({ ...map, [newIndex]: true }));\n  }\n\n  protected move(index: number, direction: -1 | 1): void {\n    const target = index + direction;\n    if (target < 0 || target >= this.items().length) {\n      return;\n    }\n    this.applyMove(index, target);\n  }\n\n  protected onDrop(event: CdkDragDrop<Record<string, unknown>[]>): void {\n    if (event.previousIndex === event.currentIndex) {\n      return;\n    }\n    this.applyMove(event.previousIndex, event.currentIndex);\n  }\n\n  protected async remove(index: number): Promise<void> {\n    if (!this.canRemove()) {\n      return;\n    }\n    if (this.hasContent(index)) {\n      const accepted = await this.notifications.confirm({\n        title: `Eliminar elemento ${index + 1}`,\n        message: 'Esta acción no se puede deshacer.',\n        confirmLabel: 'Eliminar',\n        cancelLabel: 'Cancelar',\n      });\n      if (!accepted) {\n        return;\n      }\n    }\n    this.updateItems((next) => {\n      next.splice(index, 1);\n    });\n    this.intent.set({});\n  }\n\n  /**\n   * Contexto fresco por ítem: los nodos se atan a la identidad (NG01904).\n   *\n   * `$implicit` lleva el objeto completo: en el `ng-template` del host,\n   * `let-child` (sin alias) lee `$implicit` — `NgTemplateOutlet` reparte el\n   * contexto como propiedades top-level, no existe un alias mágico.\n   */\n  protected childContext(index: number): ListChildContext & { $implicit: ListChildContext } {\n    const context: ListChildContext = {\n      fields: this.field().itemFields,\n      tree: itemTree(this.itemsTree(), index),\n      prefix: `${this.pathPrefix()}${this.field().key}[${index}].`,\n      errors: this.serverErrors(),\n      exists: this.exists(),\n      row: this.isRow(),\n      colSpan: colSpanClass,\n    };\n    return { ...context, $implicit: context };\n  }\n\n  /** Ítem con algo distinto de sus `default` → pide confirmación. */\n  private hasContent(index: number): boolean {\n    const item = this.items()[index];\n    if (item === undefined) {\n      return false;\n    }\n    return JSON.stringify(item) !== JSON.stringify(seedFields(this.field().itemFields));\n  }\n\n  /**\n   * Mueve el ítem y recalcula su `position` (base.md §8): los cambios de\n   * posición se aplican ANTES del splice porque las claves referencian los\n   * índices originales.\n   */\n  private applyMove(from: number, to: number): void {\n    const positionKey = this.field().positionField;\n    this.updateItems((next) => {\n      if (positionKey !== undefined) {\n        const result = computeMove(this.positioned(), String(from), to);\n        for (const change of result.changes) {\n          const item = next[Number(change.key)];\n          if (item !== undefined) {\n            item[positionKey] = change.position;\n          }\n        }\n      }\n      moveItemInArray(next, from, to);\n    });\n    this.intent.set({});\n  }\n\n  /** Posiciones actuales; sin `positionField` no se calculan. */\n  private positioned(): PositionedItem[] {\n    const positionKey = this.field().positionField;\n    return this.items().map((item, index) => {\n      const raw = positionKey !== undefined ? item[positionKey] : undefined;\n      // Fallback: un registro viejo sin `position` se numera como rebalanceo.\n      return {\n        key: String(index),\n        position: typeof raw === 'number' ? raw : (index + 1) * GAP,\n      };\n    });\n  }\n\n  private updateItems(mutator: (next: Record<string, unknown>[]) => void): void {\n    this.state().controlValue.update((current) => {\n      const next = [...current];\n      mutator(next);\n      return next;\n    });\n  }\n}\n"],"mappings":"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"}