{"version":3,"file":"ngx-t-forms-form-payload-projection.component-y9PSIeP1.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/form-payload-projection/projection-expression.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/form-payload-projection/form-payload-projection.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/form-payload-projection/form-payload-projection.component.html"],"sourcesContent":["/**\r\n * Parser/serialiser for the `projectFormData` submission expression.\r\n *\r\n * At runtime the expression is consumed by `destructureObject({ $formValue: form }, expr)`,\r\n * so the only token available is `$formValue` — the entire submitted form. The\r\n * sole authoring choice is therefore whether to send the form fields flat or to\r\n * nest the whole payload under one or more named keys. This module bridges that\r\n * raw string and the guided builder's structured model.\r\n */\r\n\r\n/** Token that resolves to the entire submitted form payload at runtime. */\r\nexport const FORM_VALUE_TOKEN = '$formValue';\r\n\r\n/** Default envelope: the whole form nested under a `data` key. */\r\nexport const DEFAULT_PROJECTION = `data:{${FORM_VALUE_TOKEN}}`;\r\n\r\n/**\r\n * Structured model behind the guided \"Project form data\" editor.\r\n *\r\n * @remarks `keys` empty ⇒ send fields at the top level; each key nests the whole\r\n * form under that name (`{ key: { ...form } }`).\r\n */\r\nexport interface ProjectionModel {\r\n /** Keys to nest the whole form under. Empty ⇒ send fields at the top level. */\r\n readonly keys: readonly string[];\r\n}\r\n\r\n/** Matches a single `alias:{token}` envelope entry. */\r\nconst ENVELOPE = /^([^:]+):\\{(.+)\\}$/;\r\n\r\n/**\r\n * Parses a `projectFormData` expression into the guided model (best-effort).\r\n * Unrecognised entries are kept as literal keys so nothing is silently dropped.\r\n */\r\nexport function parseProjection(expression: string | null | undefined): ProjectionModel {\r\n if (!expression) return { keys: [] };\r\n const keys = expression\r\n .split(',')\r\n .map((entry) => entry.trim())\r\n .filter(Boolean)\r\n .map((entry) => {\r\n const match = ENVELOPE.exec(entry);\r\n // `alias:{$formValue}` ⇒ alias; a bare token (or any other entry) ⇒ literal key.\r\n return (match?.[1] ?? entry).trim();\r\n })\r\n .filter(Boolean);\r\n return { keys };\r\n}\r\n\r\n/** Serialises the guided model back to a `projectFormData` expression. */\r\nexport function serializeProjection(model: ProjectionModel): string {\r\n return model.keys\r\n .map((key) => key.trim())\r\n .filter(Boolean)\r\n .map((key) => `${key}:{${FORM_VALUE_TOKEN}}`)\r\n .join(', ');\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ViewEncapsulation,\r\n computed,\r\n effect,\r\n input,\r\n output,\r\n signal,\r\n} from '@angular/core';\r\nimport { JsonPipe } from '@angular/common';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { FormColumnInputs } from 'ngx-t-forms-types';\r\n\r\nimport {\r\n DEFAULT_PROJECTION,\r\n parseProjection,\r\n serializeProjection,\r\n} from './projection-expression';\r\n\r\n/** Validation error surfaced by the parent editor for display. */\r\ninterface ProjectionError {\r\n readonly key: string;\r\n readonly message: string;\r\n}\r\n\r\n/**\r\n * Guided editor for a form's `projectFormData` submission expression.\r\n *\r\n * Replaces the raw `data:{$formValue}` text field with a no-code chooser: send\r\n * the form fields flat, or wrap the whole payload under one or more named keys —\r\n * with a live preview of the resulting JSON shape. The runtime engine only\r\n * exposes the whole form (`$formValue`), so the model is intentionally a simple\r\n * list of envelope keys (see {@link parseProjection}).\r\n *\r\n * @example\r\n * \r\n */\r\n@Component({\r\n selector: 'lib-form-payload-projection',\r\n templateUrl: './form-payload-projection.component.html',\r\n styleUrl: './form-payload-projection.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.Emulated,\r\n host: { class: 'lib-form-payload-projection' },\r\n imports: [JsonPipe, MatButtonModule, MatButtonToggleModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class FormPayloadProjectionComponent {\r\n /** Current `projectFormData` expression. */\r\n readonly value = input('');\r\n\r\n /** Whether the editor is read-only. */\r\n readonly disabled = input(false);\r\n\r\n /** The form's inputs — used to sketch the payload shape in the preview. */\r\n readonly formInputs = input([]);\r\n\r\n /** Validation errors surfaced by the parent for display. */\r\n readonly errors = input([]);\r\n\r\n /** Emits the serialised expression whenever the user changes the mapping. */\r\n readonly valueChanged = output();\r\n\r\n /** Envelope keys the whole form is nested under. Empty ⇒ sent flat. */\r\n protected readonly keys = signal([]);\r\n\r\n /** 'flat' = top-level fields; 'wrap' = nested under key(s). */\r\n protected readonly mode = computed<'flat' | 'wrap'>(() => (this.keys().length > 0 ? 'wrap' : 'flat'));\r\n\r\n /**\r\n * The last expression we synced from / emitted. Guards the input bridge so our\r\n * own round-tripped emissions don't clobber in-progress edits (the parent\r\n * debounces and echoes the value back through `value`).\r\n */\r\n #lastSynced: string | undefined = undefined;\r\n\r\n protected readonly valueBridge = effect(() => {\r\n const incoming = this.value() ?? '';\r\n if (incoming === this.#lastSynced) return;\r\n this.#lastSynced = incoming;\r\n this.keys.set([...parseProjection(incoming).keys]);\r\n });\r\n\r\n /** A sample of the form payload (field name → placeholder) for the preview. */\r\n readonly #sampleForm = computed>(() => {\r\n const sample: Record = {};\r\n for (const column of this.formInputs()) {\r\n if (column.multipleInputInEditId || !column.formControlName) continue;\r\n sample[column.formControlName] = '…';\r\n if (Object.keys(sample).length >= 8) break;\r\n }\r\n if (Object.keys(sample).length === 0) sample['field'] = '…';\r\n return sample;\r\n });\r\n\r\n /** Live preview of the JSON shape sent to the endpoint. */\r\n protected readonly preview = computed(() => {\r\n const keys = this.keys().map((k) => k.trim()).filter(Boolean);\r\n const sample = this.#sampleForm();\r\n if (keys.length === 0) return sample;\r\n const out: Record = {};\r\n for (const key of keys) out[key] = sample;\r\n return out;\r\n });\r\n\r\n /** Switches between flat and wrapped modes (seeding a default key on first wrap). */\r\n protected setMode(mode: 'flat' | 'wrap'): void {\r\n if (mode === 'flat') {\r\n this.#apply([]);\r\n return;\r\n }\r\n if (this.keys().length === 0) this.#apply(['data']);\r\n }\r\n\r\n protected addKey(): void {\r\n this.#apply([...this.keys(), '']);\r\n }\r\n\r\n protected updateKey(index: number, key: string): void {\r\n this.#apply(this.keys().map((k, i) => (i === index ? key : k)));\r\n }\r\n\r\n protected removeKey(index: number): void {\r\n this.#apply(this.keys().filter((_, i) => i !== index));\r\n }\r\n\r\n /** Reads a native input's value from a DOM event (keeps the template `any`-free). */\r\n protected inputValue(event: Event): string {\r\n return (event.target as HTMLInputElement).value;\r\n }\r\n\r\n protected trackByIndex(index: number): number {\r\n return index;\r\n }\r\n\r\n /** Reset to the recommended default (`data:{$formValue}`). */\r\n protected resetToDefault(): void {\r\n this.#apply([...parseProjection(DEFAULT_PROJECTION).keys]);\r\n }\r\n\r\n #apply(keys: string[]): void {\r\n if (this.disabled()) return;\r\n this.keys.set(keys);\r\n const serialized = serializeProjection({ keys });\r\n // Pre-record so the echoed value (see valueBridge) is ignored, preserving\r\n // empty in-progress key rows that serialise away.\r\n this.#lastSynced = serialized;\r\n this.valueChanged.emit(serialized);\r\n }\r\n}\r\n","
\r\n
\r\n help_outline\r\n Choose how the submitted form is shaped before it is sent to the endpoint.\r\n
\r\n\r\n \r\n \r\n list Top level\r\n \r\n \r\n data_object Wrap under key\r\n \r\n \r\n\r\n @if (mode() === 'wrap') {\r\n
\r\n Wrap the form under\r\n @for (key of keys(); track trackByIndex($index); let i = $index) {\r\n
\r\n {\r\n \r\n : form}\r\n \r\n
\r\n }\r\n \r\n
\r\n } @else {\r\n
\r\n info\r\n Every field is sent at the top level of the request body.\r\n
\r\n }\r\n\r\n
\r\n
\r\n Sent to the endpoint\r\n \r\n
\r\n
{{ preview() | json }}
\r\n
\r\n\r\n @for (error of errors(); track $index) {\r\n