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

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

@@ -1,637 +0,0 @@
-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-CcCA3FdQ.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-C8ijJHAx.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tinya-code-gas-admin-ui-list-C8ijJHAx.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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"}