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

package/fesm2022/tinya-code-gas-admin-ui-gap-sorting-iTdy_DYG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-gap-sorting-iTdy_DYG.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/shared/utils/gap-sorting.ts"],"sourcesContent":["/**\n * Ordenamiento con huecos (base.md §8).\n *\n * Reglas:\n * - Posiciones enteras con separación fija (paso 1000: 1000, 2000, 3000…).\n * - Mover entre dos vecinos → punto medio; solo cambia ese elemento.\n * - Mover al inicio → la mitad de la posición del primero.\n * - Mover al final → la del último + paso.\n * - Lista vacía → el paso.\n * - Si los vecinos quedan sin espacio (diferencia < 2) → rebalanceo:\n *   se renumera toda la lista con el paso original conservando el orden\n *   y luego se aplica el movimiento.\n * - Nuevos elementos → última posición + paso.\n *\n * El usuario nunca ve los números; la UI ordena por `position` ascendente.\n */\n\n/** Separación fija entre posiciones. */\nexport const GAP = 1000;\n\nexport interface PositionedItem {\n  key: string;\n  position: number;\n}\n\nexport interface PositionChange {\n  key: string;\n  position: number;\n}\n\nexport interface ReorderResult {\n  /** `true` → hubo rebalanceo: `changes` contiene el lote completo renumerado. */\n  rebalanced: boolean;\n  /** Cambios a enviar: solo el elemento movido, o el lote completo. */\n  changes: PositionChange[];\n}\n\n/** Punto medio entre dos vecinos (solo el elemento movido cambia). */\nexport function moveBetween(prevPosition: number, nextPosition: number): number {\n  return Math.floor((prevPosition + nextPosition) / 2);\n}\n\n/** Mover al inicio: la mitad de la posición del primero. */\nexport function moveToStart(firstPosition: number): number {\n  return Math.floor(firstPosition / 2);\n}\n\n/** Mover al final: la del último + paso. */\nexport function moveToEnd(lastPosition: number): number {\n  return lastPosition + GAP;\n}\n\n/** Posición de un elemento nuevo: al final (lista vacía → el paso). */\nexport function appendPosition(items: PositionedItem[]): number {\n  const sorted = sortItems(items);\n  if (sorted.length === 0) {\n    return GAP;\n  }\n  return moveToEnd(sorted[sorted.length - 1].position);\n}\n\n/** ¿Falta espacio para insertar en `targetIndex`? (base.md §8) */\nexport function needsRebalance(\n  items: PositionedItem[],\n  movingKey: string,\n  targetIndex: number,\n): boolean {\n  const without = sortItems(items.filter((item) => item.key !== movingKey));\n  if (without.length === 0) {\n    return false; // lista vacía → el paso siempre cabe\n  }\n  const index = clamp(targetIndex, 0, without.length);\n  if (index === without.length) {\n    return false; // al final → +paso siempre cabe\n  }\n  if (index === 0) {\n    const first = without[0];\n    return first.position - moveToStart(first.position) < 2;\n  }\n  const prev = without[index - 1];\n  const next = without[index];\n  return next.position - prev.position < 2;\n}\n\n/** Renumera la lista completa con el paso original, conservando el orden. */\nexport function rebalance(items: PositionedItem[], gap: number = GAP): PositionChange[] {\n  return sortItems(items).map((item, index) => ({\n    key: item.key,\n    position: (index + 1) * gap,\n  }));\n}\n\n/**\n * Calcula el resultado de soltar `movingKey` en `targetIndex`\n * (índice que ocupará en la lista SIN el elemento movido, ya ordenada).\n */\nexport function computeMove(\n  items: PositionedItem[],\n  movingKey: string,\n  targetIndex: number,\n): ReorderResult {\n  const sorted = sortItems(items);\n  if (!sorted.some((item) => item.key === movingKey)) {\n    throw new Error(`Elemento no encontrado: ${movingKey}`);\n  }\n  const without = sorted.filter((item) => item.key !== movingKey);\n  const index = clamp(targetIndex, 0, without.length);\n\n  if (needsRebalance(sorted, movingKey, targetIndex)) {\n    // Renumerar toda la lista y luego aplicar el movimiento.\n    const renumbered = rebalance(without);\n    const position = positionFor(renumbered, index);\n    return {\n      rebalanced: true,\n      changes: [...renumbered, { key: movingKey, position }],\n    };\n  }\n\n  return {\n    rebalanced: false,\n    changes: [{ key: movingKey, position: positionFor(without, index) }],\n  };\n}\n\nfunction positionFor(without: PositionChange[], index: number): number {\n  if (without.length === 0) {\n    return GAP;\n  }\n  if (index === 0) {\n    return moveToStart(without[0].position);\n  }\n  if (index === without.length) {\n    return moveToEnd(without[without.length - 1].position);\n  }\n  return moveBetween(without[index - 1].position, without[index].position);\n}\n\nfunction sortItems(items: PositionedItem[]): PositionedItem[] {\n  return [...items].sort((a, b) => a.position - b.position);\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n"],"mappings":"AAkBA,MAAa,MAAM;AAoBnB,SAAgB,YAAY,cAAsB,cAAoB;CACpE,OAAO,KAAK,OAAO,eAAe,gBAAgB,CAAC;AACrD;AAGA,SAAgB,YAAY,eAAqB;CAC/C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACrC;AAGA,SAAgB,UAAU,cAAoB;CAC5C,OAAO,eAAe;AACxB;AAGA,SAAgB,eAAe,OAAuB;CACpD,MAAM,SAAS,UAAU,KAAK;CAC9B,IAAI,OAAO,WAAW,GACpB,OAAO;CAET,OAAO,UAAU,OAAO,OAAO,SAAS,EAAE,CAAC,QAAQ;AACrD;AAGA,SAAgB,eACd,OACA,WACA,aAAmB;CAEnB,MAAM,UAAU,UAAU,MAAM,QAAQ,SAAS,KAAK,QAAQ,SAAS,CAAC;CACxE,IAAI,QAAQ,WAAW,GACrB,OAAO;CAET,MAAM,QAAQ,MAAM,aAAa,GAAG,QAAQ,MAAM;CAClD,IAAI,UAAU,QAAQ,QACpB,OAAO;CAET,IAAI,UAAU,GAAG;EACf,MAAM,QAAQ,QAAQ;EACtB,OAAO,MAAM,WAAW,YAAY,MAAM,QAAQ,IAAI;CACxD;CACA,MAAM,OAAO,QAAQ,QAAQ;CAE7B,OADa,QAAQ,MACd,CAAK,WAAW,KAAK,WAAW;AACzC;AAGA,SAAgB,UAAU,OAAyB,MAAc,KAAG;CAClE,OAAO,UAAU,KAAK,CAAC,CAAC,KAAK,MAAM,WAAW;EAC5C,KAAK,KAAK;EACV,WAAW,QAAQ,KAAK;CACzB,EAAC;AACJ;AAMA,SAAgB,YACd,OACA,WACA,aAAmB;CAEnB,MAAM,SAAS,UAAU,KAAK;CAC9B,IAAI,CAAC,OAAO,MAAM,SAAS,KAAK,QAAQ,SAAS,GAC/C,MAAM,IAAI,MAAM,2BAA2B,WAAW;CAExD,MAAM,UAAU,OAAO,QAAQ,SAAS,KAAK,QAAQ,SAAS;CAC9D,MAAM,QAAQ,MAAM,aAAa,GAAG,QAAQ,MAAM;CAElD,IAAI,eAAe,QAAQ,WAAW,WAAW,GAAG;EAElD,MAAM,aAAa,UAAU,OAAO;EACpC,MAAM,WAAW,YAAY,YAAY,KAAK;EAC9C,OAAO;GACL,YAAY;GACZ,SAAS,CAAC,GAAG,YAAY;IAAE,KAAK;IAAW;GAAQ,CAAE;EACtD;CACH;CAEA,OAAO;EACL,YAAY;EACZ,SAAS,CAAC;GAAE,KAAK;GAAW,UAAU,YAAY,SAAS,KAAK;EAAC,CAAE;CACpE;AACH;AAEA,SAAS,YAAY,SAA2B,OAAa;CAC3D,IAAI,QAAQ,WAAW,GACrB,OAAO;CAET,IAAI,UAAU,GACZ,OAAO,YAAY,QAAQ,EAAE,CAAC,QAAQ;CAExC,IAAI,UAAU,QAAQ,QACpB,OAAO,UAAU,QAAQ,QAAQ,SAAS,EAAE,CAAC,QAAQ;CAEvD,OAAO,YAAY,QAAQ,QAAQ,EAAE,CAAC,UAAU,QAAQ,MAAM,CAAC,QAAQ;AACzE;AAEA,SAAS,UAAU,OAAuB;CACxC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;AAC1D;AAEA,SAAS,MAAM,OAAe,KAAa,KAAW;CACpD,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C"}

package/fesm2022/tinya-code-gas-admin-ui-group-h7-O8tt4.mjs

@@ -0,0 +1,238 @@
+import { t as childTree } from "./tinya-code-gas-admin-ui-field-node-CIK6KNN_.mjs";
+import * as i0 from "@angular/core";
+import { Component, computed, input, signal } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+var FieldGroup = class FieldGroup {
+	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 */ []);
+	content = input.required(...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	display = computed(() => this.field().display ?? "card", ...ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []);
+	state = computed(() => childTree(this.tree(), this.field().key)(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	hasProblem = computed(() => this.state().invalid() && this.state().touched() || this.hasServerError(), ...ngDevMode ? [{ debugName: "hasProblem" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	onToggle(event) {
+		this.open.set(event.currentTarget.open);
+	}
+	hasServerError() {
+		const prefix = `${this.pathPrefix()}${this.field().key}.`;
+		return Object.keys(this.serverErrors()).some((path) => path.startsWith(prefix));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FieldGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: FieldGroup,
+		isStandalone: true,
+		selector: "app-field-group",
+		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
+			},
+			content: {
+				classPropertyName: "content",
+				publicName: "content",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (display() === 'collapsible') {
+      <details
+        class="rounded-xl border border-neutral/20 bg-surface"
+        [open]="open() || hasProblem()"
+        (toggle)="onToggle($event)"
+      >
+        <summary
+          class="flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5"
+        >
+          <span>
+            {{ field().label }}
+            @if (field().required) {
+              <span class="text-danger" aria-hidden="true">*</span>
+            }
+          </span>
+          @if (hasProblem()) {
+            <span class="text-xs font-medium text-danger">Revisar</span>
+          }
+        </summary>
+        <div class="px-4 pb-4">
+          <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+            <ng-container [ngTemplateOutlet]="content()" />
+          </div>
+        </div>
+      </details>
+    } @else if (display() === 'inline') {
+      <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+        <ng-container [ngTemplateOutlet]="content()" />
+      </div>
+    } @else {
+      <section class="rounded-xl border border-neutral/20 bg-surface p-4">
+        <h2 class="mb-3 text-section font-semibold">
+          {{ field().label }}
+          @if (field().required) {
+            <span class="text-danger" aria-hidden="true">*</span>
+          }
+          @if (hasProblem()) {
+            <span class="ml-2 text-xs font-medium text-danger">Revisar</span>
+          }
+        </h2>
+        <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+          <ng-container [ngTemplateOutlet]="content()" />
+        </div>
+      </section>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FieldGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-group",
+			imports: [NgTemplateOutlet],
+			template: `
+    @if (display() === 'collapsible') {
+      <details
+        class="rounded-xl border border-neutral/20 bg-surface"
+        [open]="open() || hasProblem()"
+        (toggle)="onToggle($event)"
+      >
+        <summary
+          class="flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5"
+        >
+          <span>
+            {{ field().label }}
+            @if (field().required) {
+              <span class="text-danger" aria-hidden="true">*</span>
+            }
+          </span>
+          @if (hasProblem()) {
+            <span class="text-xs font-medium text-danger">Revisar</span>
+          }
+        </summary>
+        <div class="px-4 pb-4">
+          <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+            <ng-container [ngTemplateOutlet]="content()" />
+          </div>
+        </div>
+      </details>
+    } @else if (display() === 'inline') {
+      <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+        <ng-container [ngTemplateOutlet]="content()" />
+      </div>
+    } @else {
+      <section class="rounded-xl border border-neutral/20 bg-surface p-4">
+        <h2 class="mb-3 text-section font-semibold">
+          {{ field().label }}
+          @if (field().required) {
+            <span class="text-danger" aria-hidden="true">*</span>
+          }
+          @if (hasProblem()) {
+            <span class="ml-2 text-xs font-medium text-danger">Revisar</span>
+          }
+        </h2>
+        <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+          <ng-container [ngTemplateOutlet]="content()" />
+        </div>
+      </section>
+    }
+  `
+		}]
+	}],
+	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
+			}]
+		}],
+		content: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "content",
+				required: true
+			}]
+		}]
+	}
+});
+export { FieldGroup };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-group-h7-O8tt4.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-group-h7-O8tt4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-group-h7-O8tt4.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/fields/group/group.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, input, signal, type TemplateRef } from '@angular/core';\n\nimport type { GroupField } from '../../core/models/schema.model';\nimport { childTree, type RootTree } from '../field-node';\n\n/**\n * Grupo de campos (base.md §5.4).\n *\n * **Sin importar FieldHost**: los hijos los renderiza el despachador pasando\n * un `ng-template` (`content`) que este componente instancia con\n * `ngTemplateOutlet` en cada variante de chrome. Un import mutuo\n * `field-host ↔ group` rompe en runtime con `Cannot read properties of\n * undefined (reading 'ɵcmp')` y `ng build` NO lo detecta.\n *\n * **Por qué no `<ng-content>`**: con un `<ng-content>` por rama de display,\n * el compilador asigna slot secuencial a cada uno (`generateProjectionDefs`)\n * y el contenido del host cae sólo en el último slot — las ramas\n * `collapsible`/`inline` quedaban vacías. Un solo destino (`TemplateRef`)\n * evita los slots de proyección por completo.\n *\n * Presentaciones:\n * - `card` (por defecto): tarjeta con título.\n * - `collapsible`: `<details>` que se auto-abre si el grupo tiene problemas.\n * - `inline`: sólo la grilla, sin chrome.\n */\n@Component({\n  selector: 'app-field-group',\n  imports: [NgTemplateOutlet],\n  template: `\n    @if (display() === 'collapsible') {\n      <details\n        class=\"rounded-xl border border-neutral/20 bg-surface\"\n        [open]=\"open() || hasProblem()\"\n        (toggle)=\"onToggle($event)\"\n      >\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5\"\n        >\n          <span>\n            {{ field().label }}\n            @if (field().required) {\n              <span class=\"text-danger\" aria-hidden=\"true\">*</span>\n            }\n          </span>\n          @if (hasProblem()) {\n            <span class=\"text-xs font-medium text-danger\">Revisar</span>\n          }\n        </summary>\n        <div class=\"px-4 pb-4\">\n          <div class=\"grid grid-cols-1 gap-x-4 sm:grid-cols-12\">\n            <ng-container [ngTemplateOutlet]=\"content()\" />\n          </div>\n        </div>\n      </details>\n    } @else if (display() === 'inline') {\n      <div class=\"grid grid-cols-1 gap-x-4 sm:grid-cols-12\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    } @else {\n      <section class=\"rounded-xl border border-neutral/20 bg-surface p-4\">\n        <h2 class=\"mb-3 text-section font-semibold\">\n          {{ field().label }}\n          @if (field().required) {\n            <span class=\"text-danger\" aria-hidden=\"true\">*</span>\n          }\n          @if (hasProblem()) {\n            <span class=\"ml-2 text-xs font-medium text-danger\">Revisar</span>\n          }\n        </h2>\n        <div class=\"grid grid-cols-1 gap-x-4 sm:grid-cols-12\">\n          <ng-container [ngTemplateOutlet]=\"content()\" />\n        </div>\n      </section>\n    }\n  `,\n})\nexport class FieldGroup {\n  readonly field = input.required<GroupField>();\n  readonly tree = input.required<RootTree>();\n  /** Errores del backend: detecta rutas anidadas (`address.street`). */\n  readonly serverErrors = input<Record<string, string>>({});\n  /** Prefijo de ruta del grupo en el registro raíz (`address.`). */\n  readonly pathPrefix = input('');\n  /** Hijos: `ng-template` declarado en el case de grupo del FieldHost. */\n  readonly content = input.required<TemplateRef<unknown>>();\n\n  protected readonly display = computed(() => this.field().display ?? 'card');\n\n  /** Estado del subárbol: `invalid()`/`touched()` agregan a los hijos. */\n  private readonly state = computed(() =>\n    childTree<Record<string, unknown>>(this.tree(), this.field().key)(),\n  );\n\n  protected readonly hasProblem = computed(\n    () => (this.state().invalid() && this.state().touched()) || this.hasServerError(),\n  );\n\n  /** El usuario abrió/cerró el `<details>` a mano (se persiste en el binding). */\n  protected readonly open = signal(false);\n\n  protected onToggle(event: Event): void {\n    this.open.set((event.currentTarget as HTMLDetailsElement).open);\n  }\n\n  private hasServerError(): boolean {\n    const prefix = `${this.pathPrefix()}${this.field().key}.`;\n    return Object.keys(this.serverErrors()).some((path) => path.startsWith(prefix));\n  }\n}\n"],"mappings":";;;;AA6EA,IAAa,aAAb,MAAa,WAAU;CACZ,QAAQ,MAAM,SAAsB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,OAAO,MAAM,SAAoB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEjC,eAAe,MAA8B,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEhD,aAAa,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,UAAU,MAAM,SAAgC,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEtC,UAAU,eAAe,KAAK,MAAK,CAAE,CAAC,WAAW,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG1D,QAAQ,eACvB,UAAmC,KAAK,KAAI,GAAI,KAAK,MAAK,CAAE,CAAC,GAAG,CAAC,CAAA,GAClE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,aAAa,eACvB,KAAK,MAAK,CAAE,CAAC,QAAO,KAAM,KAAK,MAAK,CAAE,CAAC,QAAO,KAAO,KAAK,eAAc,GAChF,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGkB,OAAO,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,SAAS,OAAY;EAC7B,KAAK,KAAK,IAAK,MAAM,cAAqC,IAAI;CAChE;CAEQ,iBAAc;EACpB,MAAM,SAAS,GAAG,KAAK,WAAU,IAAK,KAAK,MAAK,CAAE,CAAC,IAAG;EACtD,OAAO,OAAO,KAAK,KAAK,aAAY,CAAE,CAAC,CAAC,MAAM,SAAS,KAAK,WAAW,MAAM,CAAC;CAChF;CA/BW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAhDX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MA/CS;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;CAAA,CAAA;;AAiDf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAnDtB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,SAAS,CAAC,gBAAgB;GAC1B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CX,CAAA"}

package/fesm2022/tinya-code-gas-admin-ui-image-7UhJ7nqI.mjs

@@ -0,0 +1,416 @@
+import { t as __exportAll } from "./tinya-code-gas-admin-ui-rolldown-runtime-DpJrqANO.mjs";
+import { b as ApiError } from "./tinya-code-gas-admin-ui-schema-catalog-D0Pk0wAN.mjs";
+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 { t as UploadService } from "./tinya-code-gas-admin-ui-upload.service-CZPEPCeN.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, computed, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { HttpEventType } from "@angular/common/http";
+var image_exports = /* @__PURE__ */ __exportAll({ FieldImage: () => FieldImage });
+var FieldImage = class FieldImage {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	resource = input("", ...ngDevMode ? [{ debugName: "resource" }] : /* istanbul ignore next */ []);
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	touch = output();
+	upload = inject(UploadService);
+	notifications = inject(NotificationService);
+	destroyRef = inject(DestroyRef);
+	uploading = signal(false, ...ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []);
+	progress = signal(0, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
+	error = signal(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	previewClass = computed(() => `${this.field().previewSize ?? "w-48"} rounded-lg object-cover`, ...ngDevMode ? [{ debugName: "previewClass" }] : /* istanbul ignore next */ []);
+	aspectRatio = computed(() => this.field().aspectRatio ?? null, ...ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []);
+	acceptAttr = computed(() => this.field().accept ?? "image/*", ...ngDevMode ? [{ debugName: "acceptAttr" }] : /* istanbul ignore next */ []);
+	fileInput = viewChild.required("fileInput", ...ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []);
+	uploadSub;
+	pickFile() {
+		this.fileInput().nativeElement.click();
+	}
+	clear() {
+		this.value.set("");
+		this.error.set(null);
+		this.touch.emit();
+	}
+	onFileSelected(event) {
+		const input = event.target;
+		const file = input.files?.[0];
+		input.value = "";
+		if (file) this.startUpload(file);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		const file = event.dataTransfer?.files?.[0];
+		if (file) this.startUpload(file);
+	}
+	startUpload(file) {
+		if (this.disabled()) return;
+		const problem = this.validate(file);
+		if (problem !== null) {
+			this.error.set(problem);
+			this.touch.emit();
+			return;
+		}
+		this.error.set(null);
+		this.uploading.set(true);
+		this.progress.set(0);
+		this.touch.emit();
+		this.uploadSub?.unsubscribe();
+		this.uploadSub = this.upload.uploadWithProgress(file, this.resource(), this.field().key).subscribe({
+			next: (event) => {
+				if (event.type === HttpEventType.UploadProgress) {
+					if (event.total) this.progress.set(Math.round(event.loaded / event.total * 100));
+					return;
+				}
+				if (event.type === HttpEventType.Response) {
+					const url = event.body ?? "";
+					this.uploading.set(false);
+					if (url === "") {
+						this.error.set("No se pudo subir la imagen.");
+						return;
+					}
+					this.value.set(url);
+					this.notifications.success("Imagen subida.");
+				}
+			},
+			error: (err) => {
+				this.uploading.set(false);
+				this.error.set(err instanceof ApiError ? err.message : "No se pudo subir la imagen. Revisa la conexión e inténtalo de nuevo.");
+			}
+		});
+		this.destroyRef.onDestroy(() => this.uploadSub?.unsubscribe());
+	}
+	validate(file) {
+		if (!file.type.startsWith("image/")) return "El archivo debe ser una imagen.";
+		const accept = this.field().accept;
+		if (accept !== void 0 && !acceptMatches(accept, file)) return "Formato no permitido para este campo.";
+		const maxSizeMB = this.field().maxSizeMB;
+		if (maxSizeMB !== void 0 && file.size > maxSizeMB * 1024 * 1024) return `La imagen supera ${maxSizeMB} MB.`;
+		return null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FieldImage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: FieldImage,
+		isStandalone: true,
+		selector: "app-field-image",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			resource: {
+				classPropertyName: "resource",
+				publicName: "resource",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		viewQueries: [{
+			propertyName: "fileInput",
+			first: true,
+			predicate: ["fileInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: ` @if (error(); as message) {
+      <p
+        class="mb-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger"
+        role="alert"
+      >
+        {{ message }}
+      </p>
+    }
+    @if (uploading()) {
+      <div class="rounded-xl border border-neutral/20 bg-surface p-3" data-testid="image-uploading">
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-neutral/20">
+          <div
+            class="h-full rounded-full bg-primary transition-all"
+            [style.width.%]="progress()"
+          ></div>
+        </div>
+        <p class="mt-1 text-xs text-neutral">Subiendo… {{ progress() }}%</p>
+      </div>
+    } @else if (value()) {
+      <div
+        class="rounded-xl border border-neutral/20 bg-surface p-3"
+        data-testid="image-preview"
+        (dragover)="$event.preventDefault()"
+        (drop)="onDrop($event)"
+      >
+        <img
+          [src]="value()"
+          [alt]="''"
+          [class]="previewClass()"
+          [style.aspect-ratio]="aspectRatio()"
+        />
+        <div class="mt-2 flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            app-button
+            variant="outline"
+            [disabled]="disabled()"
+            (click)="pickFile()"
+          >
+            Reemplazar
+          </button>
+          @if (!field().required) {
+            <button
+              type="button"
+              app-button
+              variant="outline"
+              [disabled]="disabled()"
+              (click)="clear()"
+            >
+              Quitar
+            </button>
+          }
+          <a
+            class="text-sm font-medium text-primary hover:underline"
+            [href]="value()"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Ver en grande
+          </a>
+        </div>
+      </div>
+    } @else {
+      <div
+        class="rounded-xl border-2 border-dashed border-neutral/30 p-6 text-center"
+        data-testid="image-dropzone"
+        (dragover)="$event.preventDefault()"
+        (drop)="onDrop($event)"
+      >
+        <p class="text-sm text-neutral">Arrastrá una imagen acá</p>
+        <button
+          type="button"
+          app-button
+          variant="outline"
+          class="mt-2"
+          [disabled]="disabled()"
+          (click)="pickFile()"
+        >
+          Subir imagen
+        </button>
+      </div>
+    }
+
+    <input
+      #fileInput
+      type="file"
+      class="sr-only"
+      [accept]="acceptAttr()"
+      [disabled]="disabled()"
+      (change)="onFileSelected($event)"
+    />`,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: Button,
+			selector: "button[app-button]",
+			inputs: [
+				"variant",
+				"size",
+				"type",
+				"disabled",
+				"loading"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FieldImage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-image",
+			imports: [Button],
+			template: ` @if (error(); as message) {
+      <p
+        class="mb-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger"
+        role="alert"
+      >
+        {{ message }}
+      </p>
+    }
+    @if (uploading()) {
+      <div class="rounded-xl border border-neutral/20 bg-surface p-3" data-testid="image-uploading">
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-neutral/20">
+          <div
+            class="h-full rounded-full bg-primary transition-all"
+            [style.width.%]="progress()"
+          ></div>
+        </div>
+        <p class="mt-1 text-xs text-neutral">Subiendo… {{ progress() }}%</p>
+      </div>
+    } @else if (value()) {
+      <div
+        class="rounded-xl border border-neutral/20 bg-surface p-3"
+        data-testid="image-preview"
+        (dragover)="$event.preventDefault()"
+        (drop)="onDrop($event)"
+      >
+        <img
+          [src]="value()"
+          [alt]="''"
+          [class]="previewClass()"
+          [style.aspect-ratio]="aspectRatio()"
+        />
+        <div class="mt-2 flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            app-button
+            variant="outline"
+            [disabled]="disabled()"
+            (click)="pickFile()"
+          >
+            Reemplazar
+          </button>
+          @if (!field().required) {
+            <button
+              type="button"
+              app-button
+              variant="outline"
+              [disabled]="disabled()"
+              (click)="clear()"
+            >
+              Quitar
+            </button>
+          }
+          <a
+            class="text-sm font-medium text-primary hover:underline"
+            [href]="value()"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Ver en grande
+          </a>
+        </div>
+      </div>
+    } @else {
+      <div
+        class="rounded-xl border-2 border-dashed border-neutral/30 p-6 text-center"
+        data-testid="image-dropzone"
+        (dragover)="$event.preventDefault()"
+        (drop)="onDrop($event)"
+      >
+        <p class="text-sm text-neutral">Arrastrá una imagen acá</p>
+        <button
+          type="button"
+          app-button
+          variant="outline"
+          class="mt-2"
+          [disabled]="disabled()"
+          (click)="pickFile()"
+        >
+          Subir imagen
+        </button>
+      </div>
+    }
+
+    <input
+      #fileInput
+      type="file"
+      class="sr-only"
+      [accept]="acceptAttr()"
+      [disabled]="disabled()"
+      (change)="onFileSelected($event)"
+    />`
+		}]
+	}],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		resource: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resource",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		fileInput: [{
+			type: i0.ViewChild,
+			args: ["fileInput", { isSignal: true }]
+		}]
+	}
+});
+function acceptMatches(accept, file) {
+	for (const raw of accept.split(",")) {
+		const entry = raw.trim().toLowerCase();
+		if (entry === "") continue;
+		if (entry.startsWith(".")) {
+			if (file.name.toLowerCase().endsWith(entry)) return true;
+		} else if (entry.endsWith("/*")) {
+			if (file.type.startsWith(entry.slice(0, -1))) return true;
+		} else if (file.type === entry) return true;
+	}
+	return false;
+}
+export { image_exports as n, FieldImage as t };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-image-7UhJ7nqI.mjs.map