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

package/fesm2022/tinya-code-gas-admin-ui-key-value-nVdgg5at.mjs

@@ -0,0 +1,513 @@
+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 { n as FieldAria } from "./tinya-code-gas-admin-ui-field-aria-BD1Wiggc.mjs";
+import { i as listTree, r as itemTree, t as childTree } from "./tinya-code-gas-admin-ui-field-node-CIK6KNN_.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 } from "@angular/core";
+import { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from "@lucide/angular";
+import { FormField } from "@angular/forms/signals";
+import { CdkDrag, CdkDragHandle, CdkDropList, moveItemInArray } from "@angular/cdk/drag-drop";
+var FieldKeyValue = class FieldKeyValue {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	tree = input.required(...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+	notifications = inject(NotificationService);
+	itemsNode = computed(() => listTree(this.tree(), this.field().key), ...ngDevMode ? [{ debugName: "itemsNode" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.itemsNode()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	idPrefix = computed(() => this.state().name(), ...ngDevMode ? [{ debugName: "idPrefix" }] : /* 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 */ []);
+	fieldNode(index, column) {
+		return childTree(itemTree(this.itemsNode(), index), column);
+	}
+	canAdd() {
+		const max = this.field().max;
+		return max === void 0 || this.items().length < max;
+	}
+	canRemove() {
+		return this.items().length > (this.field().min ?? 0);
+	}
+	add() {
+		if (!this.canAdd()) return;
+		const positionKey = this.field().positionField;
+		const row = {
+			key: "",
+			value: ""
+		};
+		if (positionKey !== void 0) row[positionKey] = appendPosition(this.positioned());
+		this.updateItems((next) => {
+			next.push(row);
+		});
+	}
+	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;
+		const row = this.items()[index];
+		if (row !== void 0 && (row.key.trim() !== "" || row.value.trim() !== "")) {
+			if (!await this.notifications.confirm({
+				title: `Eliminar fila ${index + 1}`,
+				message: "Esta acción no se puede deshacer.",
+				confirmLabel: "Eliminar",
+				cancelLabel: "Cancelar"
+			})) return;
+		}
+		this.updateItems((next) => {
+			next.splice(index, 1);
+		});
+	}
+	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 row = next[Number(change.key)];
+					if (row !== void 0) row[positionKey] = change.position;
+				}
+			}
+			moveItemInArray(next, from, to);
+		});
+	}
+	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: FieldKeyValue,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: FieldKeyValue,
+		isStandalone: true,
+		selector: "app-field-key-value",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tree: {
+				classPropertyName: "tree",
+				publicName: "tree",
+				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 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>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: FieldAria,
+				selector: "input[id], select[id], textarea[id], output[id]"
+			},
+			{
+				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: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				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]"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FieldKeyValue,
+	decorators: [{
+		type: Component,
+		args: [{
+			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>
+  `
+		}]
+	}],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		tree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tree",
+				required: true
+			}]
+		}]
+	}
+});
+export { FieldKeyValue };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-key-value-nVdgg5at.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-key-value-nVdgg5at.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-key-value-nVdgg5at.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/fields/key-value/key-value.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\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 { KeyValueField, KeyValueItem } from '../../core/models/schema.model';\nimport { NotificationService } from '../../core/services/notification.service';\nimport { Button } from '../../shared/components/button/button';\nimport {\n  appendPosition,\n  computeMove,\n  GAP,\n  type PositionedItem,\n} from '../../shared/utils/gap-sorting';\nimport { FieldAria } from '../field-aria';\nimport { childTree, itemTree, listTree, type RootTree } from '../field-node';\n\n/**\n * Pares clave→valor (base.md §9 «ficha técnica»). Hoja: tabla con sus\n * propios `<input [formField]>` (nodos `key`/`value` del ítem) y no toca\n * FieldHost. `position` se calcula con gap-sorting igual que en `list`.\n */\n@Component({\n  selector: 'app-field-key-value',\n  imports: [\n    FieldAria,\n    Button,\n    CdkDrag,\n    CdkDragHandle,\n    CdkDropList,\n    FormField,\n    LucideArrowDown,\n    LucideArrowUp,\n    LucideGripVertical,\n    LucideTrash2,\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 class=\"overflow-x-auto rounded-xl border border-neutral/20 bg-surface\">\n        <table class=\"w-full text-sm\">\n          <thead>\n            <tr class=\"border-b border-neutral/20 text-left text-xs font-medium text-neutral\">\n              <th class=\"w-10 px-3 py-2\" scope=\"col\"><span class=\"sr-only\">Orden</span></th>\n              <th class=\"px-3 py-2\" scope=\"col\">Clave</th>\n              <th class=\"px-3 py-2\" scope=\"col\">Valor</th>\n              <th class=\"w-28 px-3 py-2\" scope=\"col\"><span class=\"sr-only\">Acciones</span></th>\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"items()\"\n            [cdkDropListDisabled]=\"!sortable()\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n          >\n            @for (item of items(); track $index; let i = $index) {\n              <tr\n                class=\"border-b border-neutral/10 last:border-b-0\"\n                cdkDrag\n                [cdkDragDisabled]=\"!sortable()\"\n              >\n                <td class=\"px-3 py-2 align-middle\">\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 fila ' + (i + 1)\"\n                      title=\"Arrastrar para reordenar\"\n                    >\n                      <svg lucideGripVertical size=\"16\" />\n                    </button>\n                  }\n                </td>\n                <td class=\"px-3 py-2\">\n                  <input\n                    class=\"field-input\"\n                    type=\"text\"\n                    placeholder=\"Clave\"\n                    [attr.aria-label]=\"'Clave, fila ' + (i + 1)\"\n                    [id]=\"idPrefix() + '-key-' + i\"\n                    [formField]=\"fieldNode(i, 'key')\"\n                  />\n                </td>\n                <td class=\"px-3 py-2\">\n                  <input\n                    class=\"field-input\"\n                    type=\"text\"\n                    placeholder=\"Valor\"\n                    [attr.aria-label]=\"'Valor, fila ' + (i + 1)\"\n                    [id]=\"idPrefix() + '-value-' + i\"\n                    [formField]=\"fieldNode(i, 'value')\"\n                  />\n                </td>\n                <td class=\"px-3 py-2\">\n                  <span class=\"flex items-center justify-end 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 fila ' + (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 fila ' + (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 fila ' + (i + 1)\"\n                      (click)=\"remove(i)\"\n                    >\n                      <svg lucideTrash2 size=\"16\" />\n                    </button>\n                  </span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\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 especificación' }}\n      </button>\n    </div>\n  `,\n})\nexport class FieldKeyValue {\n  readonly field = input.required<KeyValueField>();\n  readonly tree = input.required<RootTree>();\n\n  private readonly notifications = inject(NotificationService);\n\n  private readonly itemsNode = computed(() =>\n    listTree<KeyValueItem>(this.tree(), this.field().key),\n  );\n  private readonly state = computed(() => this.itemsNode()());\n  /** Prefijo estable del campo para los id de cada celda (§8). */\n  protected readonly idPrefix = computed(() => this.state().name());\n  protected readonly items = computed(() => this.state().value() ?? []);\n\n  protected readonly sortable = computed(() => this.field().sortable ?? true);\n\n  /** Nodo de `key`/`value` del ítem; se llama fresco en cada render (NG01904). */\n  protected fieldNode(\n    index: number,\n    column: 'key' | 'value',\n  ): ReturnType<typeof childTree<string>> {\n    return childTree<string>(itemTree(this.itemsNode(), index), column);\n  }\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 add(): void {\n    if (!this.canAdd()) {\n      return;\n    }\n    const positionKey = this.field().positionField;\n    const row: KeyValueItem & Record<string, unknown> = { key: '', value: '' };\n    if (positionKey !== undefined) {\n      row[positionKey] = appendPosition(this.positioned());\n    }\n    this.updateItems((next) => {\n      next.push(row);\n    });\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<KeyValueItem[]>): 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    const row = this.items()[index];\n    if (row !== undefined && (row.key.trim() !== '' || row.value.trim() !== '')) {\n      const accepted = await this.notifications.confirm({\n        title: `Eliminar fila ${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  }\n\n  /** Mueve y recalcula `position` (base.md §8): cambios antes del splice. */\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 row = next[Number(change.key)] as\n            (KeyValueItem & Record<string, unknown>) | undefined;\n          if (row !== undefined) {\n            row[positionKey] = change.position;\n          }\n        }\n      }\n      moveItemInArray(next, from, to);\n    });\n  }\n\n  private positioned(): PositionedItem[] {\n    const positionKey = this.field().positionField;\n    return this.items().map((item, index) => {\n      const raw =\n        positionKey !== undefined\n          ? (item as unknown as Record<string, unknown>)[positionKey]\n          : 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: KeyValueItem[]) => 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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"}