ngx-form-designer 0.0.28 → 0.0.30

package/fesm2022/ngx-form-designer.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, inject, signal, computed, EventEmitter, DestroyRef, Injector, afterNextRender, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, ContentChildren, untracked, ChangeDetectorRef } from '@angular/core';
+import { Injectable, InjectionToken, NgModule, inject, signal, computed, EventEmitter, DestroyRef, Injector, afterNextRender, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, ContentChildren, untracked, ChangeDetectorRef, Pipe } from '@angular/core';
 import { BehaviorSubject, Subject, merge, of, filter, map, debounceTime as debounceTime$1, skip, firstValueFrom } from 'rxjs';
 import { v4 } from 'uuid';
 import * as i1 from '@angular/common';
@@ -13,11 +13,12 @@ import { LucideAngularModule } from 'lucide-angular';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i5 from 'angular-resizable-element';
 import { ResizableModule } from 'angular-resizable-element';
-import { Router, NavigationEnd } from '@angular/router';
 import loader from '@monaco-editor/loader';
+import { Router, NavigationEnd } from '@angular/router';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { NgSelectComponent } from '@ng-select/ng-select';
 import Quill from 'quill';
+import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient, provideHttpClient } from '@angular/common/http';
 
 const CURRENT_SCHEMA_VERSION = '1.0.0';
@@ -794,6 +795,16 @@ function hasWrapperSurfaceStyles(style) {
 
 const WIDGET_EDITOR_CONTEXT = new InjectionToken('WIDGET_EDITOR_CONTEXT');
 
+const SUPPRESS_API_CALLS_FLAG = '__fdSuppressApiCalls';
+function setEngineApiCallsSuppressed(engine, suppressed) {
+    engine[SUPPRESS_API_CALLS_FLAG] = suppressed;
+}
+function areEngineApiCallsSuppressed(engine) {
+    if (!engine)
+        return false;
+    return engine[SUPPRESS_API_CALLS_FLAG] === true;
+}
+
 const SCOPED_NODE_SEPARATOR = '::scope::';
 function composeScopedNodeId(scopePath, nodeId) {
     if (scopePath.length === 0)
@@ -2559,7 +2570,7 @@ class LayoutNodeComponent {
                 shouldUpdate = true;
             }
             if (readOnlyModeChange && !readOnlyModeChange.firstChange) {
-                // Swap engine proxy for preview mode disabled state overrides
+                // Swap engine proxy for preview runtime flags
                 shouldUpdate = true;
             }
             if (shouldUpdate) {
@@ -2847,8 +2858,8 @@ class LayoutNodeComponent {
         if (mode === 'design') {
             proxy.isFieldVisible = () => true;
         }
-        else {
-            proxy.isFieldEnabled = () => false;
+        if (mode === 'preview') {
+            setEngineApiCallsSuppressed(proxy, true);
         }
         this.renderEngineProxy = proxy;
         this.renderEngineSource = this.engine;
@@ -4219,7 +4230,9 @@ class JsonFormRendererComponent {
         if (!this.engine || this.mode === 'design') {
             return;
         }
-        const apiExecutor = this.resolveEventApiExecutor();
+        const apiExecutor = this.mode === 'preview'
+            ? undefined
+            : this.resolveEventApiExecutor();
         this.runner = new FormEventRunner(this.engine, {
             logger: this.eventLogger,
             apiExecutor,
@@ -4712,7 +4725,7 @@ class JsonFormRendererComponent {
         </ng-container>
         <ng-template #loading>Loading form...</ng-template>
     </div>
-  `, isInline: true, styles: [".form-renderer-container{width:100%;height:100vh;overflow-y:auto}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
+  `, isInline: true, styles: [".form-renderer-container{width:100%;height:100vh}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: JsonFormRendererComponent, decorators: [{
             type: Component,
@@ -4737,7 +4750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         </ng-container>
         <ng-template #loading>Loading form...</ng-template>
     </div>
-  `, styles: [".form-renderer-container{width:100%;height:100vh;overflow-y:auto}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"] }]
+  `, styles: [".form-renderer-container{width:100%;height:100vh}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"] }]
         }], ctorParameters: () => [{ type: DesignerStateService }], propDecorators: { schema: [{
                 type: Input
             }], initialValues: [{
@@ -4953,876 +4966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
-class FormViewerReadonlyComponent {
-    schema;
-    values = {};
-    breakpoint = 'xl';
-    asRow(node) {
-        return node;
-    }
-    asCol(node) {
-        return node;
-    }
-    asWidget(node) {
-        return node;
-    }
-    getField(fieldId) {
-        return this.schema?.fields.find(field => field.id === fieldId);
-    }
-    getFieldLabel(field) {
-        return field.label?.trim() || field.name;
-    }
-    getFieldValue(field) {
-        return this.values[field.name] ?? field.defaultValue ?? null;
-    }
-    getHeadingText(field) {
-        return field.label?.trim() || field.name;
-    }
-    getRichTextContent(field) {
-        const text = field['text'];
-        return typeof text === 'string' ? text : '';
-    }
-    getHeadingLevel(field) {
-        const level = field['level'];
-        return typeof level === 'string' && /^h[1-6]$/.test(level) ? level : 'h2';
-    }
-    getParagraphText(field) {
-        const text = field['text'];
-        if (typeof text === 'string' && text.trim()) {
-            return text;
-        }
-        return field.label?.trim() || '';
-    }
-    getNodeStyle(node) {
-        const style = normalizeStyle(node.style);
-        if (!style['width'])
-            style['width'] = '100%';
-        if (!style['height'])
-            style['height'] = 'auto';
-        return style;
-    }
-    getFieldStyle(field) {
-        return normalizeStyle(field.style);
-    }
-    getColClasses(node) {
-        if (node.type !== 'col')
-            return '';
-        const span = this.getEffectiveSpan(node.responsive || { xs: 12 });
-        return this.getSpanClass(span);
-    }
-    formatFieldValue(field, value) {
-        if (field.type === 'select' || field.type === 'radio' || field.type === 'search' || field.type === 'tree-select') {
-            return this.formatScalarValue(this.resolveOptionLabel(field, value));
-        }
-        if (field.type === 'date') {
-            return this.formatDateValue(value);
-        }
-        if (field.type === 'time') {
-            return this.formatTimeValue(value);
-        }
-        if (field.type === 'datetime-local') {
-            return this.formatDateTimeValue(value);
-        }
-        return this.formatScalarValue(value, field);
-    }
-    formatScalarValue(value, field) {
-        if (Array.isArray(value)) {
-            const scalarItems = value
-                .map(item => this.formatScalarValue(item))
-                .filter(item => item !== 'No value provided');
-            return scalarItems.length ? scalarItems.join(', ') : this.getEmptyValueLabel(field);
-        }
-        if (value == null || value === '') {
-            return this.getEmptyValueLabel(field);
-        }
-        if (typeof value === 'boolean') {
-            return value ? 'Yes' : 'No';
-        }
-        if (typeof value === 'object') {
-            return JSON.stringify(value, null, 2);
-        }
-        return String(value);
-    }
-    getDisplayList(field, value) {
-        if (!Array.isArray(value))
-            return [];
-        return value
-            .map(item => this.resolveOptionLabel(field, item))
-            .map(item => this.formatScalarValue(item))
-            .filter(item => item !== 'No value provided');
-    }
-    getUploadedFiles(value) {
-        if (!value)
-            return [];
-        if (Array.isArray(value)) {
-            return value.filter(item => this.isUploadedFileRef(item));
-        }
-        return this.isUploadedFileRef(value) ? [value] : [];
-    }
-    getImageSource(field, value) {
-        if (typeof value === 'string' && value.trim()) {
-            return value;
-        }
-        const imageSrc = field['imageSrc'];
-        if (typeof imageSrc === 'string' && imageSrc.trim()) {
-            return imageSrc;
-        }
-        const staticValue = field.dataConfig?.staticValue;
-        return typeof staticValue === 'string' && staticValue.trim() ? staticValue : null;
-    }
-    getRepeatableItems(value) {
-        if (!Array.isArray(value))
-            return [];
-        return value.filter(item => this.isRecord(item));
-    }
-    getRepeatableFields(field) {
-        return field.repeatable?.itemSchema?.fields ?? [];
-    }
-    getRepeatableItemTitle(field, index) {
-        const itemLabel = field.repeatable?.itemLabel?.trim() || 'Item';
-        return `${itemLabel} ${index + 1}`;
-    }
-    getNestedFieldValue(item, nestedField) {
-        return item[nestedField.name] ?? nestedField.defaultValue ?? null;
-    }
-    getTableRows(value) {
-        if (!Array.isArray(value))
-            return [];
-        return value.filter(item => this.isRecord(item));
-    }
-    getTableColumns(field, value) {
-        const configuredColumns = Array.isArray(field['columns']) ? field['columns'] : [];
-        const normalizedConfigured = configuredColumns
-            .filter(column => this.isRecord(column) && typeof column['key'] === 'string')
-            .map(column => ({
-            key: String(column['key']),
-            label: typeof column['label'] === 'string' && column['label'].trim()
-                ? String(column['label'])
-                : String(column['key'])
-        }));
-        if (normalizedConfigured.length) {
-            return normalizedConfigured;
-        }
-        const [firstRow] = this.getTableRows(value);
-        if (!firstRow)
-            return [];
-        return Object.keys(firstRow).map(key => ({ key, label: key }));
-    }
-    readPathValue(value, path) {
-        if (!path)
-            return value;
-        return path
-            .split('.')
-            .reduce((current, segment) => (this.isRecord(current) ? current[segment] : undefined), value);
-    }
-    isTruthy(value) {
-        return !!value;
-    }
-    getEmptyValueLabel(field) {
-        return field?.type === 'file' ? 'No files uploaded' : 'No value provided';
-    }
-    formatFileSize(size) {
-        if (size >= 1024 * 1024) {
-            return `${(size / (1024 * 1024)).toFixed(1)} MB`;
-        }
-        if (size >= 1024) {
-            return `${(size / 1024).toFixed(1)} KB`;
-        }
-        return `${size} B`;
-    }
-    trackByNodeId(_, node) {
-        return node.id;
-    }
-    trackByIndex(index) {
-        return index;
-    }
-    trackByFieldId(_, field) {
-        return field.id;
-    }
-    trackByTableColumn(_, column) {
-        return column.key;
-    }
-    trackByUploadedFile(_, file) {
-        return `${file.id ?? ''}-${file.name ?? ''}-${file.url ?? ''}`;
-    }
-    getEffectiveSpan(responsive) {
-        const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
-        const currentIndex = breakpoints.indexOf(this.breakpoint);
-        if (currentIndex === -1)
-            return responsive.xs || 12;
-        for (let index = currentIndex; index >= 0; index -= 1) {
-            const key = breakpoints[index];
-            if (responsive[key] != null) {
-                return responsive[key];
-            }
-        }
-        return 12;
-    }
-    getSpanClass(span) {
-        if (span === 12)
-            return 'w-full';
-        const map = {
-            1: 'w-1/12',
-            2: 'w-2/12',
-            3: 'w-3/12',
-            4: 'w-4/12',
-            5: 'w-5/12',
-            6: 'w-6/12',
-            7: 'w-7/12',
-            8: 'w-8/12',
-            9: 'w-9/12',
-            10: 'w-10/12',
-            11: 'w-11/12'
-        };
-        return map[span] || 'w-full';
-    }
-    resolveOptionLabel(field, value) {
-        const options = this.getFieldOptions(field);
-        const matched = options.find(option => this.optionMatches(option, value));
-        return matched?.label ?? value;
-    }
-    getFieldOptions(field) {
-        return field.dataConfig?.staticOptions ?? field.staticOptions ?? [];
-    }
-    optionMatches(option, value) {
-        return option.value === value || String(option.value) === String(value);
-    }
-    formatDateValue(value) {
-        if (typeof value !== 'string' || !value.trim()) {
-            return this.getEmptyValueLabel();
-        }
-        const date = new Date(`${value}T00:00:00`);
-        return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString('en-GB');
-    }
-    formatTimeValue(value) {
-        if (typeof value !== 'string' || !value.trim()) {
-            return this.getEmptyValueLabel();
-        }
-        const [hours, minutes] = value.split(':');
-        if (!hours || !minutes)
-            return value;
-        const date = new Date();
-        date.setHours(Number(hours), Number(minutes), 0, 0);
-        return Number.isNaN(date.getTime())
-            ? value
-            : date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
-    }
-    formatDateTimeValue(value) {
-        if (typeof value !== 'string' || !value.trim()) {
-            return this.getEmptyValueLabel();
-        }
-        const date = new Date(value);
-        return Number.isNaN(date.getTime())
-            ? value
-            : date.toLocaleString('en-GB', {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-    }
-    isRecord(value) {
-        return !!value && typeof value === 'object' && !Array.isArray(value);
-    }
-    isUploadedFileRef(value) {
-        if (!this.isRecord(value))
-            return false;
-        return typeof value['name'] === 'string'
-            || typeof value['url'] === 'string'
-            || typeof value['id'] === 'string';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormViewerReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormViewerReadonlyComponent, isStandalone: true, selector: "app-form-viewer-readonly", inputs: { schema: "schema", values: "values", breakpoint: "breakpoint" }, ngImport: i0, template: `
-    <div class="space-y-4" data-fd="form-viewer-readonly">
-      <ng-container *ngIf="schema.layout as layout">
-        <ng-container
-          *ngTemplateOutlet="renderNode; context: { $implicit: layout }">
-        </ng-container>
-      </ng-container>
-    </div>
-
-    <ng-template #renderNode let-node>
-      <ng-container [ngSwitch]="node.type">
-        <div
-          *ngSwitchCase="'row'"
-          class="flex flex-wrap"
-          data-fd="form-viewer-row"
-          [style]="getNodeStyle(node)">
-          <ng-container *ngFor="let child of asRow(node).children; trackBy: trackByNodeId">
-            <ng-container
-              *ngTemplateOutlet="renderNode; context: { $implicit: child }">
-            </ng-container>
-          </ng-container>
-        </div>
-
-        <div
-          *ngSwitchCase="'col'"
-          class="min-h-[1px] space-y-4"
-          data-fd="form-viewer-column"
-          [class]="getColClasses(node)"
-          [style]="getNodeStyle(node)">
-          <ng-container *ngFor="let child of asCol(node).children; trackBy: trackByNodeId">
-            <ng-container
-              *ngTemplateOutlet="renderNode; context: { $implicit: child }">
-            </ng-container>
-          </ng-container>
-        </div>
-
-        <ng-container *ngSwitchCase="'widget'">
-          <ng-container *ngIf="getField(asWidget(node).refId) as field">
-            <div class="w-full"
-                 data-fd="form-viewer-widget"
-                 [attr.data-fd-field-name]="field.name"
-                 [attr.data-fd-field-type]="field.type"
-                 [style]="getNodeStyle(node)">
-              <ng-container [ngSwitch]="field.type">
-                <div *ngSwitchCase="'heading'"
-                     data-fd="form-viewer-heading"
-                     [attr.data-fd-field-name]="field.name"
-                     [attr.data-fd-field-type]="field.type"
-                     [style]="getFieldStyle(field)">
-                  <h1
-                    *ngIf="getHeadingLevel(field) === 'h1'"
-                    class="text-4xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h1>
-                  <h2
-                    *ngIf="getHeadingLevel(field) === 'h2'"
-                    class="text-3xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h2>
-                  <h3
-                    *ngIf="getHeadingLevel(field) === 'h3'"
-                    class="text-2xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h3>
-                  <h4
-                    *ngIf="getHeadingLevel(field) === 'h4'"
-                    class="text-xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h4>
-                  <h5
-                    *ngIf="getHeadingLevel(field) === 'h5'"
-                    class="text-lg font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h5>
-                  <h6
-                    *ngIf="getHeadingLevel(field) === 'h6'"
-                    class="text-base font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h6>
-                </div>
-
-                <p
-                  *ngSwitchCase="'paragraph'"
-                  data-fd="form-viewer-paragraph"
-                  [attr.data-fd-field-name]="field.name"
-                  [attr.data-fd-field-type]="field.type"
-                  class="whitespace-pre-wrap text-sm leading-6 text-slate-700"
-                  [style]="getFieldStyle(field)">
-                  {{ getParagraphText(field) }}
-                </p>
-
-                <div
-                  *ngSwitchCase="'rich-text'"
-                  data-fd="form-viewer-rich-text"
-                  [attr.data-fd-field-name]="field.name"
-                  [attr.data-fd-field-type]="field.type"
-                  class="whitespace-pre-wrap text-sm leading-6 text-slate-700"
-                  [style]="getFieldStyle(field)"
-                  [innerHTML]="getRichTextContent(field)"></div>
-
-                <div *ngSwitchCase="'cta-button'"
-                     data-fd="form-viewer-button"
-                     [attr.data-fd-field-name]="field.name"
-                     [attr.data-fd-field-type]="field.type"
-                     [style]="getFieldStyle(field)">
-                  <button
-                    type="button"
-                    disabled
-                    class="inline-flex cursor-default items-center justify-center rounded-lg border border-slate-300 bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">
-                    {{ field.label || 'Action' }}
-                  </button>
-                </div>
-
-                <div *ngSwitchDefault
-                     data-fd="form-viewer-field-card"
-                     [attr.data-fd-field-name]="field.name"
-                     [attr.data-fd-field-type]="field.type"
-                     class="rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm"
-                     [style]="getFieldStyle(field)">
-                  <div class="mb-3 flex items-start justify-between gap-3" *ngIf="field.helpText || field.html5?.required">
-                    <div *ngIf="field.helpText">
-                      <p data-fd="form-viewer-field-help" class="text-xs text-slate-500">
-                        {{ field.helpText }}
-                      </p>
-                    </div>
-                    <span
-                      *ngIf="field.html5?.required"
-                      class="rounded-full bg-rose-50 px-2 py-1 text-[11px] font-medium text-rose-600">
-                      Required
-                    </span>
-                  </div>
-
-                  <ng-container [ngSwitch]="field.type">
-                    <div *ngSwitchCase="'checkbox'"
-                      data-fd="form-viewer-field-value"
-                      class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium"
-                      [class.bg-emerald-50]="isTruthy(getFieldValue(field))"
-                      [class.text-emerald-700]="isTruthy(getFieldValue(field))"
-                      [class.bg-slate-100]="!isTruthy(getFieldValue(field))"
-                      [class.text-slate-600]="!isTruthy(getFieldValue(field))">
-                      {{ isTruthy(getFieldValue(field)) ? 'Checked' : 'Not checked' }}
-                    </div>
-
-                    <div *ngSwitchCase="'multiselect'" data-fd="form-viewer-chip-list" class="flex flex-wrap gap-2">
-                      <span
-                        *ngFor="let item of getDisplayList(field, getFieldValue(field)); trackBy: trackByIndex"
-                        data-fd="form-viewer-chip"
-                        class="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-700">
-                        {{ item }}
-                      </span>
-                      <span *ngIf="!getDisplayList(field, getFieldValue(field)).length" data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">
-                        {{ getEmptyValueLabel(field) }}
-                      </span>
-                    </div>
-
-                    <div *ngSwitchCase="'checkbox-group'" data-fd="form-viewer-chip-list" class="flex flex-wrap gap-2">
-                      <span
-                        *ngFor="let item of getDisplayList(field, getFieldValue(field)); trackBy: trackByIndex"
-                        data-fd="form-viewer-chip"
-                        class="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-700">
-                        {{ item }}
-                      </span>
-                      <span *ngIf="!getDisplayList(field, getFieldValue(field)).length" data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">
-                        {{ getEmptyValueLabel(field) }}
-                      </span>
-                    </div>
-
-                    <div *ngSwitchCase="'file'" data-fd="form-viewer-file-list" class="space-y-2">
-                      <ng-container *ngIf="getUploadedFiles(getFieldValue(field)).length; else emptyFileState">
-                        <div
-                          *ngFor="let file of getUploadedFiles(getFieldValue(field)); trackBy: trackByUploadedFile"
-                          data-fd="form-viewer-file-item"
-                          class="flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                          <div class="min-w-0">
-                            <a
-                              *ngIf="file.url; else fileNameText"
-                              data-fd="form-viewer-file-link"
-                              [href]="file.url"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              class="block truncate text-sm font-medium text-sky-700 underline">
-                              {{ file.name || file.id || 'Uploaded file' }}
-                            </a>
-                            <ng-template #fileNameText>
-                              <div data-fd="form-viewer-file-name" class="truncate text-sm font-medium text-slate-900">
-                                {{ file.name || file.id || 'Uploaded file' }}
-                              </div>
-                            </ng-template>
-                            <div *ngIf="file.type" data-fd="form-viewer-file-type" class="text-xs text-slate-500">{{ file.type }}</div>
-                          </div>
-                          <div *ngIf="file.size != null" data-fd="form-viewer-file-size" class="text-xs text-slate-500">
-                            {{ formatFileSize(file.size) }}
-                          </div>
-                        </div>
-                      </ng-container>
-                      <ng-template #emptyFileState>
-                        <span data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">{{ getEmptyValueLabel(field) }}</span>
-                      </ng-template>
-                    </div>
-
-                    <div *ngSwitchCase="'image'" data-fd="form-viewer-image" class="space-y-3">
-                      <ng-container *ngIf="getImageSource(field, getFieldValue(field)) as imageSrc; else emptyImageState">
-                        <img
-                          data-fd="form-viewer-image-element"
-                          [src]="imageSrc"
-                          [alt]="field.label || field.name"
-                          class="max-h-64 rounded-lg border border-slate-200 object-contain">
-                      </ng-container>
-                      <ng-template #emptyImageState>
-                        <span data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">{{ getEmptyValueLabel(field) }}</span>
-                      </ng-template>
-                    </div>
-
-                    <div *ngSwitchCase="'repeatable-group'" data-fd="form-viewer-repeatable-group" class="space-y-3">
-                      <ng-container *ngIf="getRepeatableItems(getFieldValue(field)).length; else emptyRepeatableState">
-                        <section
-                          *ngFor="let item of getRepeatableItems(getFieldValue(field)); let index = index; trackBy: trackByIndex"
-                          data-fd="form-viewer-repeatable-item"
-                          class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-3">
-                          <div data-fd="form-viewer-repeatable-item-title" class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500">
-                            {{ getRepeatableItemTitle(field, index) }}
-                          </div>
-                          <dl class="grid gap-3 sm:grid-cols-2">
-                            <div
-                              *ngFor="let nestedField of getRepeatableFields(field); trackBy: trackByFieldId"
-                              data-fd="form-viewer-repeatable-field"
-                              class="rounded-md border border-slate-200 bg-white px-3 py-2">
-                              <dt data-fd="form-viewer-repeatable-field-label" class="text-xs font-medium uppercase tracking-wide text-slate-500">
-                                {{ getFieldLabel(nestedField) }}
-                              </dt>
-                              <dd data-fd="form-viewer-repeatable-field-value" class="mt-1 whitespace-pre-wrap text-sm text-slate-900">
-                                {{ formatScalarValue(getNestedFieldValue(item, nestedField)) }}
-                              </dd>
-                            </div>
-                          </dl>
-                        </section>
-                      </ng-container>
-                      <ng-template #emptyRepeatableState>
-                        <span data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">{{ getEmptyValueLabel(field) }}</span>
-                      </ng-template>
-                    </div>
-
-                    <div *ngSwitchCase="'table'" data-fd="form-viewer-table-wrapper" class="overflow-x-auto rounded-lg border border-slate-200">
-                      <table data-fd="form-viewer-table" class="min-w-full divide-y divide-slate-200 text-sm">
-                        <thead data-fd="form-viewer-table-head" class="bg-slate-50">
-                          <tr>
-                            <th
-                              *ngFor="let column of getTableColumns(field, getFieldValue(field)); trackBy: trackByTableColumn"
-                              data-fd="form-viewer-table-header"
-                              class="px-3 py-2 text-left font-semibold text-slate-600">
-                              {{ column.label }}
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody data-fd="form-viewer-table-body" class="divide-y divide-slate-200 bg-white">
-                          <tr *ngFor="let row of getTableRows(getFieldValue(field)); trackBy: trackByIndex" data-fd="form-viewer-table-row">
-                            <td
-                              *ngFor="let column of getTableColumns(field, getFieldValue(field)); trackBy: trackByTableColumn"
-                              data-fd="form-viewer-table-cell"
-                              class="px-3 py-2 align-top text-slate-700">
-                              {{ formatScalarValue(readPathValue(row, column.key)) }}
-                            </td>
-                          </tr>
-                          <tr *ngIf="!getTableRows(getFieldValue(field)).length" data-fd="form-viewer-table-empty-row">
-                            <td data-fd="form-viewer-table-empty"
-                                class="px-3 py-3 text-slate-400"
-                                [attr.colspan]="getTableColumns(field, getFieldValue(field)).length || 1">
-                              {{ getEmptyValueLabel(field) }}
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-
-                    <div *ngSwitchDefault data-fd="form-viewer-field-value" class="whitespace-pre-wrap text-sm leading-6 text-slate-900">
-                      {{ formatFieldValue(field, getFieldValue(field)) }}
-                    </div>
-                  </ng-container>
-                </div>
-              </ng-container>
-            </div>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormViewerReadonlyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-form-viewer-readonly',
-                    standalone: true,
-                    imports: [CommonModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div class="space-y-4" data-fd="form-viewer-readonly">
-      <ng-container *ngIf="schema.layout as layout">
-        <ng-container
-          *ngTemplateOutlet="renderNode; context: { $implicit: layout }">
-        </ng-container>
-      </ng-container>
-    </div>
-
-    <ng-template #renderNode let-node>
-      <ng-container [ngSwitch]="node.type">
-        <div
-          *ngSwitchCase="'row'"
-          class="flex flex-wrap"
-          data-fd="form-viewer-row"
-          [style]="getNodeStyle(node)">
-          <ng-container *ngFor="let child of asRow(node).children; trackBy: trackByNodeId">
-            <ng-container
-              *ngTemplateOutlet="renderNode; context: { $implicit: child }">
-            </ng-container>
-          </ng-container>
-        </div>
-
-        <div
-          *ngSwitchCase="'col'"
-          class="min-h-[1px] space-y-4"
-          data-fd="form-viewer-column"
-          [class]="getColClasses(node)"
-          [style]="getNodeStyle(node)">
-          <ng-container *ngFor="let child of asCol(node).children; trackBy: trackByNodeId">
-            <ng-container
-              *ngTemplateOutlet="renderNode; context: { $implicit: child }">
-            </ng-container>
-          </ng-container>
-        </div>
-
-        <ng-container *ngSwitchCase="'widget'">
-          <ng-container *ngIf="getField(asWidget(node).refId) as field">
-            <div class="w-full"
-                 data-fd="form-viewer-widget"
-                 [attr.data-fd-field-name]="field.name"
-                 [attr.data-fd-field-type]="field.type"
-                 [style]="getNodeStyle(node)">
-              <ng-container [ngSwitch]="field.type">
-                <div *ngSwitchCase="'heading'"
-                     data-fd="form-viewer-heading"
-                     [attr.data-fd-field-name]="field.name"
-                     [attr.data-fd-field-type]="field.type"
-                     [style]="getFieldStyle(field)">
-                  <h1
-                    *ngIf="getHeadingLevel(field) === 'h1'"
-                    class="text-4xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h1>
-                  <h2
-                    *ngIf="getHeadingLevel(field) === 'h2'"
-                    class="text-3xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h2>
-                  <h3
-                    *ngIf="getHeadingLevel(field) === 'h3'"
-                    class="text-2xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h3>
-                  <h4
-                    *ngIf="getHeadingLevel(field) === 'h4'"
-                    class="text-xl font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h4>
-                  <h5
-                    *ngIf="getHeadingLevel(field) === 'h5'"
-                    class="text-lg font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h5>
-                  <h6
-                    *ngIf="getHeadingLevel(field) === 'h6'"
-                    class="text-base font-semibold tracking-tight text-slate-950">
-                    {{ getHeadingText(field) }}
-                  </h6>
-                </div>
-
-                <p
-                  *ngSwitchCase="'paragraph'"
-                  data-fd="form-viewer-paragraph"
-                  [attr.data-fd-field-name]="field.name"
-                  [attr.data-fd-field-type]="field.type"
-                  class="whitespace-pre-wrap text-sm leading-6 text-slate-700"
-                  [style]="getFieldStyle(field)">
-                  {{ getParagraphText(field) }}
-                </p>
-
-                <div
-                  *ngSwitchCase="'rich-text'"
-                  data-fd="form-viewer-rich-text"
-                  [attr.data-fd-field-name]="field.name"
-                  [attr.data-fd-field-type]="field.type"
-                  class="whitespace-pre-wrap text-sm leading-6 text-slate-700"
-                  [style]="getFieldStyle(field)"
-                  [innerHTML]="getRichTextContent(field)"></div>
-
-                <div *ngSwitchCase="'cta-button'"
-                     data-fd="form-viewer-button"
-                     [attr.data-fd-field-name]="field.name"
-                     [attr.data-fd-field-type]="field.type"
-                     [style]="getFieldStyle(field)">
-                  <button
-                    type="button"
-                    disabled
-                    class="inline-flex cursor-default items-center justify-center rounded-lg border border-slate-300 bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">
-                    {{ field.label || 'Action' }}
-                  </button>
-                </div>
-
-                <div *ngSwitchDefault
-                     data-fd="form-viewer-field-card"
-                     [attr.data-fd-field-name]="field.name"
-                     [attr.data-fd-field-type]="field.type"
-                     class="rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm"
-                     [style]="getFieldStyle(field)">
-                  <div class="mb-3 flex items-start justify-between gap-3" *ngIf="field.helpText || field.html5?.required">
-                    <div *ngIf="field.helpText">
-                      <p data-fd="form-viewer-field-help" class="text-xs text-slate-500">
-                        {{ field.helpText }}
-                      </p>
-                    </div>
-                    <span
-                      *ngIf="field.html5?.required"
-                      class="rounded-full bg-rose-50 px-2 py-1 text-[11px] font-medium text-rose-600">
-                      Required
-                    </span>
-                  </div>
-
-                  <ng-container [ngSwitch]="field.type">
-                    <div *ngSwitchCase="'checkbox'"
-                      data-fd="form-viewer-field-value"
-                      class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium"
-                      [class.bg-emerald-50]="isTruthy(getFieldValue(field))"
-                      [class.text-emerald-700]="isTruthy(getFieldValue(field))"
-                      [class.bg-slate-100]="!isTruthy(getFieldValue(field))"
-                      [class.text-slate-600]="!isTruthy(getFieldValue(field))">
-                      {{ isTruthy(getFieldValue(field)) ? 'Checked' : 'Not checked' }}
-                    </div>
-
-                    <div *ngSwitchCase="'multiselect'" data-fd="form-viewer-chip-list" class="flex flex-wrap gap-2">
-                      <span
-                        *ngFor="let item of getDisplayList(field, getFieldValue(field)); trackBy: trackByIndex"
-                        data-fd="form-viewer-chip"
-                        class="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-700">
-                        {{ item }}
-                      </span>
-                      <span *ngIf="!getDisplayList(field, getFieldValue(field)).length" data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">
-                        {{ getEmptyValueLabel(field) }}
-                      </span>
-                    </div>
-
-                    <div *ngSwitchCase="'checkbox-group'" data-fd="form-viewer-chip-list" class="flex flex-wrap gap-2">
-                      <span
-                        *ngFor="let item of getDisplayList(field, getFieldValue(field)); trackBy: trackByIndex"
-                        data-fd="form-viewer-chip"
-                        class="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-700">
-                        {{ item }}
-                      </span>
-                      <span *ngIf="!getDisplayList(field, getFieldValue(field)).length" data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">
-                        {{ getEmptyValueLabel(field) }}
-                      </span>
-                    </div>
-
-                    <div *ngSwitchCase="'file'" data-fd="form-viewer-file-list" class="space-y-2">
-                      <ng-container *ngIf="getUploadedFiles(getFieldValue(field)).length; else emptyFileState">
-                        <div
-                          *ngFor="let file of getUploadedFiles(getFieldValue(field)); trackBy: trackByUploadedFile"
-                          data-fd="form-viewer-file-item"
-                          class="flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                          <div class="min-w-0">
-                            <a
-                              *ngIf="file.url; else fileNameText"
-                              data-fd="form-viewer-file-link"
-                              [href]="file.url"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              class="block truncate text-sm font-medium text-sky-700 underline">
-                              {{ file.name || file.id || 'Uploaded file' }}
-                            </a>
-                            <ng-template #fileNameText>
-                              <div data-fd="form-viewer-file-name" class="truncate text-sm font-medium text-slate-900">
-                                {{ file.name || file.id || 'Uploaded file' }}
-                              </div>
-                            </ng-template>
-                            <div *ngIf="file.type" data-fd="form-viewer-file-type" class="text-xs text-slate-500">{{ file.type }}</div>
-                          </div>
-                          <div *ngIf="file.size != null" data-fd="form-viewer-file-size" class="text-xs text-slate-500">
-                            {{ formatFileSize(file.size) }}
-                          </div>
-                        </div>
-                      </ng-container>
-                      <ng-template #emptyFileState>
-                        <span data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">{{ getEmptyValueLabel(field) }}</span>
-                      </ng-template>
-                    </div>
-
-                    <div *ngSwitchCase="'image'" data-fd="form-viewer-image" class="space-y-3">
-                      <ng-container *ngIf="getImageSource(field, getFieldValue(field)) as imageSrc; else emptyImageState">
-                        <img
-                          data-fd="form-viewer-image-element"
-                          [src]="imageSrc"
-                          [alt]="field.label || field.name"
-                          class="max-h-64 rounded-lg border border-slate-200 object-contain">
-                      </ng-container>
-                      <ng-template #emptyImageState>
-                        <span data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">{{ getEmptyValueLabel(field) }}</span>
-                      </ng-template>
-                    </div>
-
-                    <div *ngSwitchCase="'repeatable-group'" data-fd="form-viewer-repeatable-group" class="space-y-3">
-                      <ng-container *ngIf="getRepeatableItems(getFieldValue(field)).length; else emptyRepeatableState">
-                        <section
-                          *ngFor="let item of getRepeatableItems(getFieldValue(field)); let index = index; trackBy: trackByIndex"
-                          data-fd="form-viewer-repeatable-item"
-                          class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-3">
-                          <div data-fd="form-viewer-repeatable-item-title" class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500">
-                            {{ getRepeatableItemTitle(field, index) }}
-                          </div>
-                          <dl class="grid gap-3 sm:grid-cols-2">
-                            <div
-                              *ngFor="let nestedField of getRepeatableFields(field); trackBy: trackByFieldId"
-                              data-fd="form-viewer-repeatable-field"
-                              class="rounded-md border border-slate-200 bg-white px-3 py-2">
-                              <dt data-fd="form-viewer-repeatable-field-label" class="text-xs font-medium uppercase tracking-wide text-slate-500">
-                                {{ getFieldLabel(nestedField) }}
-                              </dt>
-                              <dd data-fd="form-viewer-repeatable-field-value" class="mt-1 whitespace-pre-wrap text-sm text-slate-900">
-                                {{ formatScalarValue(getNestedFieldValue(item, nestedField)) }}
-                              </dd>
-                            </div>
-                          </dl>
-                        </section>
-                      </ng-container>
-                      <ng-template #emptyRepeatableState>
-                        <span data-fd="form-viewer-field-value-empty" class="text-sm text-slate-400">{{ getEmptyValueLabel(field) }}</span>
-                      </ng-template>
-                    </div>
-
-                    <div *ngSwitchCase="'table'" data-fd="form-viewer-table-wrapper" class="overflow-x-auto rounded-lg border border-slate-200">
-                      <table data-fd="form-viewer-table" class="min-w-full divide-y divide-slate-200 text-sm">
-                        <thead data-fd="form-viewer-table-head" class="bg-slate-50">
-                          <tr>
-                            <th
-                              *ngFor="let column of getTableColumns(field, getFieldValue(field)); trackBy: trackByTableColumn"
-                              data-fd="form-viewer-table-header"
-                              class="px-3 py-2 text-left font-semibold text-slate-600">
-                              {{ column.label }}
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody data-fd="form-viewer-table-body" class="divide-y divide-slate-200 bg-white">
-                          <tr *ngFor="let row of getTableRows(getFieldValue(field)); trackBy: trackByIndex" data-fd="form-viewer-table-row">
-                            <td
-                              *ngFor="let column of getTableColumns(field, getFieldValue(field)); trackBy: trackByTableColumn"
-                              data-fd="form-viewer-table-cell"
-                              class="px-3 py-2 align-top text-slate-700">
-                              {{ formatScalarValue(readPathValue(row, column.key)) }}
-                            </td>
-                          </tr>
-                          <tr *ngIf="!getTableRows(getFieldValue(field)).length" data-fd="form-viewer-table-empty-row">
-                            <td data-fd="form-viewer-table-empty"
-                                class="px-3 py-3 text-slate-400"
-                                [attr.colspan]="getTableColumns(field, getFieldValue(field)).length || 1">
-                              {{ getEmptyValueLabel(field) }}
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-
-                    <div *ngSwitchDefault data-fd="form-viewer-field-value" class="whitespace-pre-wrap text-sm leading-6 text-slate-900">
-                      {{ formatFieldValue(field, getFieldValue(field)) }}
-                    </div>
-                  </ng-container>
-                </div>
-              </ng-container>
-            </div>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-    </ng-template>
-  `
-                }]
-        }], propDecorators: { schema: [{
-                type: Input,
-                args: [{ required: true }]
-            }], values: [{
-                type: Input
-            }], breakpoint: [{
-                type: Input
-            }] } });
-
 class FormViewerComponent {
     schema;
     set data(value) {
@@ -5993,34 +5136,25 @@ class FormViewerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormViewerComponent, isStandalone: true, selector: "app-form-viewer", inputs: { schema: "schema", data: "data", options: "options", viewOnly: "viewOnly", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, outputs: { formDataChange: "formDataChange", formValidationChange: "formValidationChange", uploadedFilesChange: "uploadedFilesChange", submit: "submit" }, viewQueries: [{ propertyName: "renderer", first: true, predicate: JsonFormRendererComponent, descendants: true }], ngImport: i0, template: `
     <div class="form-viewer-container flex flex-col h-full"
          data-fd="form-viewer"
-         [attr.data-fd-mode]="viewOnly ? 'readonly' : 'live'">
-        <div class="flex-1 min-h-0 overflow-y-auto" data-fd="form-viewer-surface">
-            <app-form-viewer-readonly
-                *ngIf="viewOnly; else liveRenderer"
+         [attr.data-fd-mode]="viewOnly ? 'preview' : 'live'">
+        <div class="flex-1 min-h-0" data-fd="form-viewer-surface">
+            <app-json-form-renderer
                 [schema]="schema"
-                [values]="normalizedInitialValues"
-                [breakpoint]="breakpoint()">
-            </app-form-viewer-readonly>
-
-            <ng-template #liveRenderer>
-                <app-json-form-renderer
-                    [schema]="schema"
-                    [initialValues]="normalizedInitialValues"
-                    [mode]="'live'"
-                    [breakpoint]="breakpoint()"
-                    [uploadOnSubmit]="true"
-                    [eventApis]="eventApis"
-                    [eventApiExecutor]="eventApiExecutor"
-                    [fieldDataAccessMap]="fieldDataAccessMap"
-                    [fieldDataAccessApi]="fieldDataAccessApi"
-                    [formContentId]="formContentId"
-                    [formContentVersion]="formContentVersion"
-                    (valueChange)="onValueChange($event)"
-                    (validationChange)="onValidationChange($event)"
-                    (uploadedFilesChange)="onUploadedFilesChange($event)"
-                    (formSubmit)="onRendererSubmit($event)">
-                </app-json-form-renderer>
-            </ng-template>
+                [initialValues]="normalizedInitialValues"
+                [mode]="viewOnly ? 'preview' : 'live'"
+                [breakpoint]="breakpoint()"
+                [uploadOnSubmit]="true"
+                [eventApis]="eventApis"
+                [eventApiExecutor]="eventApiExecutor"
+                [fieldDataAccessMap]="fieldDataAccessMap"
+                [fieldDataAccessApi]="fieldDataAccessApi"
+                [formContentId]="formContentId"
+                [formContentVersion]="formContentVersion"
+                (valueChange)="onValueChange($event)"
+                (validationChange)="onValidationChange($event)"
+                (uploadedFilesChange)="onUploadedFilesChange($event)"
+                (formSubmit)="onRendererSubmit($event)">
+            </app-json-form-renderer>
         </div>
 
         <div *ngIf="!viewOnly && options.showSubmitButton"
@@ -6035,41 +5169,32 @@ class FormViewerComponent {
             </button>
         </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "component", type: FormViewerReadonlyComponent, selector: "app-form-viewer-readonly", inputs: ["schema", "values", "breakpoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-viewer', standalone: true, imports: [CommonModule, JsonFormRendererComponent, FormViewerReadonlyComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'app-form-viewer', standalone: true, imports: [CommonModule, JsonFormRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="form-viewer-container flex flex-col h-full"
          data-fd="form-viewer"
-         [attr.data-fd-mode]="viewOnly ? 'readonly' : 'live'">
-        <div class="flex-1 min-h-0 overflow-y-auto" data-fd="form-viewer-surface">
-            <app-form-viewer-readonly
-                *ngIf="viewOnly; else liveRenderer"
+         [attr.data-fd-mode]="viewOnly ? 'preview' : 'live'">
+        <div class="flex-1 min-h-0" data-fd="form-viewer-surface">
+            <app-json-form-renderer
                 [schema]="schema"
-                [values]="normalizedInitialValues"
-                [breakpoint]="breakpoint()">
-            </app-form-viewer-readonly>
-
-            <ng-template #liveRenderer>
-                <app-json-form-renderer
-                    [schema]="schema"
-                    [initialValues]="normalizedInitialValues"
-                    [mode]="'live'"
-                    [breakpoint]="breakpoint()"
-                    [uploadOnSubmit]="true"
-                    [eventApis]="eventApis"
-                    [eventApiExecutor]="eventApiExecutor"
-                    [fieldDataAccessMap]="fieldDataAccessMap"
-                    [fieldDataAccessApi]="fieldDataAccessApi"
-                    [formContentId]="formContentId"
-                    [formContentVersion]="formContentVersion"
-                    (valueChange)="onValueChange($event)"
-                    (validationChange)="onValidationChange($event)"
-                    (uploadedFilesChange)="onUploadedFilesChange($event)"
-                    (formSubmit)="onRendererSubmit($event)">
-                </app-json-form-renderer>
-            </ng-template>
+                [initialValues]="normalizedInitialValues"
+                [mode]="viewOnly ? 'preview' : 'live'"
+                [breakpoint]="breakpoint()"
+                [uploadOnSubmit]="true"
+                [eventApis]="eventApis"
+                [eventApiExecutor]="eventApiExecutor"
+                [fieldDataAccessMap]="fieldDataAccessMap"
+                [fieldDataAccessApi]="fieldDataAccessApi"
+                [formContentId]="formContentId"
+                [formContentVersion]="formContentVersion"
+                (valueChange)="onValueChange($event)"
+                (validationChange)="onValidationChange($event)"
+                (uploadedFilesChange)="onUploadedFilesChange($event)"
+                (formSubmit)="onRendererSubmit($event)">
+            </app-json-form-renderer>
         </div>
 
         <div *ngIf="!viewOnly && options.showSubmitButton"
@@ -7322,6 +6447,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     args: [WIDGET_DEFINITIONS]
                 }] }, { type: DesignerStateService }] });
 
+class MonacoEditorComponent {
+    value = input('');
+    language = input('html');
+    theme = input('vs');
+    readOnly = input(false);
+    minimap = input(false);
+    options = input(null);
+    valueChange = output();
+    containerRef;
+    static configured = false;
+    monaco;
+    editor;
+    suppressChange = false;
+    subscriptions = [];
+    resizeObserver;
+    editorReady = signal(false);
+    syncInputs = effect(() => {
+        if (!this.editorReady())
+            return;
+        if (!this.editor || !this.monaco)
+            return;
+        const nextValue = this.value();
+        if (this.editor.getValue() !== nextValue) {
+            this.suppressChange = true;
+            this.editor.setValue(nextValue ?? '');
+            this.suppressChange = false;
+        }
+        const model = this.editor.getModel();
+        if (model) {
+            this.monaco.editor.setModelLanguage(model, this.language());
+        }
+        this.monaco.editor.setTheme(this.theme());
+        const options = this.options() ?? {};
+        this.editor.updateOptions({
+            ...options,
+            readOnly: this.readOnly(),
+            minimap: { enabled: this.minimap() }
+        });
+    });
+    async ngAfterViewInit() {
+        if (!MonacoEditorComponent.configured) {
+            loader.config({
+                paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' }
+            });
+            MonacoEditorComponent.configured = true;
+        }
+        this.monaco = (await loader.init());
+        this.editor = this.monaco.editor.create(this.containerRef.nativeElement, {
+            value: this.value() ?? '',
+            language: this.language(),
+            theme: this.theme(),
+            readOnly: this.readOnly(),
+            minimap: { enabled: this.minimap() },
+            automaticLayout: false,
+            ...(this.options() ?? {})
+        });
+        const model = this.editor.getModel();
+        if (model && this.language()) {
+            this.monaco.editor.setModelLanguage(model, this.language());
+        }
+        this.subscriptions.push(this.editor.onDidChangeModelContent(() => {
+            if (this.suppressChange)
+                return;
+            this.valueChange.emit(this.editor?.getValue() ?? '');
+        }));
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.editor?.layout());
+            this.resizeObserver.observe(this.containerRef.nativeElement);
+        }
+        this.editorReady.set(true);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.subscriptions.forEach(subscription => subscription.dispose());
+        this.subscriptions = [];
+        this.editor?.dispose();
+        this.editor = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MonacoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: MonacoEditorComponent, isStandalone: true, selector: "app-monaco-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, minimap: { classPropertyName: "minimap", publicName: "minimap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "block h-full w-full" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: `<div class="h-full w-full" #container></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MonacoEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-monaco-editor',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<div class="h-full w-full" #container></div>`,
+                    host: { class: 'block h-full w-full' }
+                }]
+        }], propDecorators: { containerRef: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }] } });
+
 const DEFAULT_PAGE_STYLE = {
     paddingTop: 32,
     paddingRight: 32,
@@ -7347,6 +6567,15 @@ class LayoutCanvasComponent {
     get device() { return this.state.activeDevice(); } // 'mobile' | 'desktop' for basic passing
     get breakpoint() { return this.state.activeBreakpoint(); }
     zoom = signal(1);
+    showLiveSchemaEditor = signal(false);
+    liveSchemaEditorText = signal('');
+    liveSchemaEditorError = signal('');
+    liveSchemaEditorOptions = {
+        fontSize: 12,
+        lineNumbersMinChars: 3,
+        wordWrap: 'on',
+        scrollBeyondLastLine: false
+    };
     pageBaseSize = signal({ width: 0, height: 0 });
     minZoom = 0.25;
     maxZoom = 3;
@@ -7504,6 +6733,34 @@ class LayoutCanvasComponent {
         }
         this.state.isPreviewMode.set(true);
     }
+    toggleLiveSchemaEditor() {
+        if (this.showLiveSchemaEditor()) {
+            this.closeLiveSchemaEditor();
+            return;
+        }
+        this.liveSchemaEditorText.set(serializeSchema(this.state.schema()));
+        this.liveSchemaEditorError.set('');
+        this.showLiveSchemaEditor.set(true);
+    }
+    closeLiveSchemaEditor() {
+        this.showLiveSchemaEditor.set(false);
+    }
+    onLiveSchemaEditorTextChange(nextText) {
+        this.liveSchemaEditorText.set(nextText);
+        if (this.state.isReadOnly()) {
+            this.liveSchemaEditorError.set('');
+            return;
+        }
+        try {
+            const parsedSchema = parseSchema(nextText);
+            this.state.updateSchema(parsedSchema);
+            this.state.selectNode(null);
+            this.liveSchemaEditorError.set('');
+        }
+        catch {
+            this.liveSchemaEditorError.set('Invalid JSON schema. Changes are not applied until the JSON is valid.');
+        }
+    }
     getCanvasWidth() {
         const bp = this.breakpoint;
         switch (bp) {
@@ -7785,6 +7042,12 @@ class LayoutCanvasComponent {
                 <span class="text-[12px] leading-none">Preview</span>
             </button>
 
+            <button class="inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-transparent transition-colors hover:border-border-default hover:bg-slate-50"
+                    (click)="toggleLiveSchemaEditor(); $event.stopPropagation()"
+                    title="Live JSON schema editor"
+                    aria-label="Live JSON schema editor">
+                <lucide-icon name="braces" class="w-3.5 h-3.5"></lucide-icon>
+            </button>
             <button class="inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-transparent transition-colors hover:border-border-default hover:bg-slate-50"
                     (click)="exportJson(); $event.stopPropagation()" title="Export JSON">
                 <lucide-icon name="download" class="w-3.5 h-3.5"></lucide-icon>
@@ -7891,15 +7154,53 @@ class LayoutCanvasComponent {
               <lucide-icon *ngIf="!last" name="chevron-right" class="w-3 h-3 text-ink-600"></lucide-icon>
           </ng-container>
       </div>
+
+      <div *ngIf="showLiveSchemaEditor()"
+           data-testid="live-schema-editor-panel"
+           class="absolute inset-0 z-[70] flex items-center justify-center bg-black/20 p-4 backdrop-blur-[1px]"
+           (click)="closeLiveSchemaEditor()">
+        <section class="h-full w-full max-w-5xl overflow-hidden rounded-[6px] border border-border-default bg-surface-default shadow-popover"
+                 (click)="$event.stopPropagation()">
+          <header class="flex items-center justify-between border-b border-border-default px-4 py-2.5">
+            <div class="flex flex-col">
+              <h3 class="text-[13px] font-semibold text-text-strong">Live JSON Schema Editor</h3>
+              <p class="text-[11px] text-text-primary/80">Changes apply instantly when JSON is valid.</p>
+            </div>
+            <button type="button"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-[4px] border border-border-default text-text-primary transition-colors hover:bg-slate-50"
+                    aria-label="Close live schema editor"
+                    (click)="closeLiveSchemaEditor()">
+              <lucide-icon name="x" class="h-4 w-4"></lucide-icon>
+            </button>
+          </header>
+
+          <div *ngIf="liveSchemaEditorError()"
+               class="border-b border-red-200 bg-red-50 px-4 py-2 text-[11px] text-red-700">
+            {{ liveSchemaEditorError() }}
+          </div>
+
+          <div class="h-[calc(100%-56px)] min-h-0">
+            <app-monaco-editor
+              class="h-full"
+              [value]="liveSchemaEditorText()"
+              language="json"
+              theme="vs"
+              [readOnly]="state.isReadOnly()"
+              [options]="liveSchemaEditorOptions"
+              (valueChange)="onLiveSchemaEditorTextChange($event)">
+            </app-monaco-editor>
+          </div>
+        </section>
+      </div>
     </div>
 
     <!-- Hidden file input for import -->
     <input type="file" #fileInput accept=".json" (change)="onFileSelected($event)" style="display: none;">
-    `, isInline: true, styles: [".canvas-grid{background-image:radial-gradient(rgba(148,163,184,.35) 1px,transparent 1px);background-size:18px 18px}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+    `, isInline: true, styles: [".canvas-grid{background-image:radial-gradient(rgba(148,163,184,.35) 1px,transparent 1px);background-size:18px 18px}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: MonacoEditorComponent, selector: "app-monaco-editor", inputs: ["value", "language", "theme", "readOnly", "minimap", "options"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-layout-canvas', standalone: true, imports: [CommonModule, JsonFormRendererComponent, UiIconModule], template: `
+            args: [{ selector: 'app-layout-canvas', standalone: true, imports: [CommonModule, JsonFormRendererComponent, UiIconModule, MonacoEditorComponent], template: `
     <div #root class="h-full w-full relative font-sans">
       <!-- Floating Toolbar (fixed to canvas viewport; unaffected by pan/zoom) -->
       <div class="absolute top-4 left-1/2 -translate-x-1/2 z-40">
@@ -7974,6 +7275,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 <span class="text-[12px] leading-none">Preview</span>
             </button>
 
+            <button class="inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-transparent transition-colors hover:border-border-default hover:bg-slate-50"
+                    (click)="toggleLiveSchemaEditor(); $event.stopPropagation()"
+                    title="Live JSON schema editor"
+                    aria-label="Live JSON schema editor">
+                <lucide-icon name="braces" class="w-3.5 h-3.5"></lucide-icon>
+            </button>
             <button class="inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-transparent transition-colors hover:border-border-default hover:bg-slate-50"
                     (click)="exportJson(); $event.stopPropagation()" title="Export JSON">
                 <lucide-icon name="download" class="w-3.5 h-3.5"></lucide-icon>
@@ -8080,6 +7387,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
               <lucide-icon *ngIf="!last" name="chevron-right" class="w-3 h-3 text-ink-600"></lucide-icon>
           </ng-container>
       </div>
+
+      <div *ngIf="showLiveSchemaEditor()"
+           data-testid="live-schema-editor-panel"
+           class="absolute inset-0 z-[70] flex items-center justify-center bg-black/20 p-4 backdrop-blur-[1px]"
+           (click)="closeLiveSchemaEditor()">
+        <section class="h-full w-full max-w-5xl overflow-hidden rounded-[6px] border border-border-default bg-surface-default shadow-popover"
+                 (click)="$event.stopPropagation()">
+          <header class="flex items-center justify-between border-b border-border-default px-4 py-2.5">
+            <div class="flex flex-col">
+              <h3 class="text-[13px] font-semibold text-text-strong">Live JSON Schema Editor</h3>
+              <p class="text-[11px] text-text-primary/80">Changes apply instantly when JSON is valid.</p>
+            </div>
+            <button type="button"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-[4px] border border-border-default text-text-primary transition-colors hover:bg-slate-50"
+                    aria-label="Close live schema editor"
+                    (click)="closeLiveSchemaEditor()">
+              <lucide-icon name="x" class="h-4 w-4"></lucide-icon>
+            </button>
+          </header>
+
+          <div *ngIf="liveSchemaEditorError()"
+               class="border-b border-red-200 bg-red-50 px-4 py-2 text-[11px] text-red-700">
+            {{ liveSchemaEditorError() }}
+          </div>
+
+          <div class="h-[calc(100%-56px)] min-h-0">
+            <app-monaco-editor
+              class="h-full"
+              [value]="liveSchemaEditorText()"
+              language="json"
+              theme="vs"
+              [readOnly]="state.isReadOnly()"
+              [options]="liveSchemaEditorOptions"
+              (valueChange)="onLiveSchemaEditorTextChange($event)">
+            </app-monaco-editor>
+          </div>
+        </section>
+      </div>
     </div>
 
     <!-- Hidden file input for import -->
@@ -25973,101 +25318,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['projectFileInput']
             }] } });
 
-class MonacoEditorComponent {
-    value = input('');
-    language = input('html');
-    theme = input('vs');
-    readOnly = input(false);
-    minimap = input(false);
-    options = input(null);
-    valueChange = output();
-    containerRef;
-    static configured = false;
-    monaco;
-    editor;
-    suppressChange = false;
-    subscriptions = [];
-    resizeObserver;
-    editorReady = signal(false);
-    syncInputs = effect(() => {
-        if (!this.editorReady())
-            return;
-        if (!this.editor || !this.monaco)
-            return;
-        const nextValue = this.value();
-        if (this.editor.getValue() !== nextValue) {
-            this.suppressChange = true;
-            this.editor.setValue(nextValue ?? '');
-            this.suppressChange = false;
-        }
-        const model = this.editor.getModel();
-        if (model) {
-            this.monaco.editor.setModelLanguage(model, this.language());
-        }
-        this.monaco.editor.setTheme(this.theme());
-        const options = this.options() ?? {};
-        this.editor.updateOptions({
-            ...options,
-            readOnly: this.readOnly(),
-            minimap: { enabled: this.minimap() }
-        });
-    });
-    async ngAfterViewInit() {
-        if (!MonacoEditorComponent.configured) {
-            loader.config({
-                paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' }
-            });
-            MonacoEditorComponent.configured = true;
-        }
-        this.monaco = (await loader.init());
-        this.editor = this.monaco.editor.create(this.containerRef.nativeElement, {
-            value: this.value() ?? '',
-            language: this.language(),
-            theme: this.theme(),
-            readOnly: this.readOnly(),
-            minimap: { enabled: this.minimap() },
-            automaticLayout: false,
-            ...(this.options() ?? {})
-        });
-        const model = this.editor.getModel();
-        if (model && this.language()) {
-            this.monaco.editor.setModelLanguage(model, this.language());
-        }
-        this.subscriptions.push(this.editor.onDidChangeModelContent(() => {
-            if (this.suppressChange)
-                return;
-            this.valueChange.emit(this.editor?.getValue() ?? '');
-        }));
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => this.editor?.layout());
-            this.resizeObserver.observe(this.containerRef.nativeElement);
-        }
-        this.editorReady.set(true);
-    }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        this.subscriptions.forEach(subscription => subscription.dispose());
-        this.subscriptions = [];
-        this.editor?.dispose();
-        this.editor = undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MonacoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: MonacoEditorComponent, isStandalone: true, selector: "app-monaco-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, minimap: { classPropertyName: "minimap", publicName: "minimap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "block h-full w-full" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: `<div class="h-full w-full" #container></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MonacoEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-monaco-editor',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<div class="h-full w-full" #container></div>`,
-                    host: { class: 'block h-full w-full' }
-                }]
-        }], propDecorators: { containerRef: [{
-                type: ViewChild,
-                args: ['container', { static: true }]
-            }] } });
-
 /// <reference path="../../json-editor.d.ts" />
 const FD_JSON_EDITOR_ICONLIB = 'fdlucide';
 function ensureFdIconLib(jsonEditorCtor) {
@@ -28084,6 +27334,9 @@ class DefaultDataProvider extends DataProvider {
             return super.queryOptions(field, { ...query, term: query.term || '' }, engine);
         }
         if (cfg.type === 'source' || cfg.type === 'global' || cfg.type === 'api') {
+            if (this.shouldSuppressRemoteAccess(cfg, engine)) {
+                return [];
+            }
             if (!cfg.datasourceId)
                 return [];
             const filters = this.resolveFilters(cfg, engine);
@@ -28135,6 +27388,9 @@ class DefaultDataProvider extends DataProvider {
         // Determine if source-backed
         const isSource = cfg.type === 'source' || cfg.type === 'global' || (cfg.type === 'api' && !!cfg.datasourceId);
         if (isSource && cfg.datasourceId) {
+            if (this.shouldSuppressRemoteAccess(cfg, engine)) {
+                return { rows: [], total: 0 };
+            }
             // Build DataSourceQuery
             const term = query.term ?? '';
             const search = term ? { term, columns: cfg.searchColumns } : undefined;
@@ -28213,6 +27469,9 @@ class DefaultDataProvider extends DataProvider {
             case 'source':
             case 'global':
             case 'api': // Aliasing API to source if datasourceId present
+                if (this.shouldSuppressRemoteAccess(cfg, engine)) {
+                    return [];
+                }
                 if (cfg.datasourceId) {
                     return this.getGlobalRows(cfg);
                 }
@@ -28371,8 +27630,16 @@ class DefaultDataProvider extends DataProvider {
     async getRuntimeOptions(field, engine) {
         if (!engine)
             return undefined;
+        if (areEngineApiCallsSuppressed(engine))
+            return undefined;
         return this.runtimeFieldDataAccessRegistry.getOptions(field, engine);
     }
+    shouldSuppressRemoteAccess(cfg, engine) {
+        if (!engine || !areEngineApiCallsSuppressed(engine)) {
+            return false;
+        }
+        return cfg.type === 'source' || cfg.type === 'global' || cfg.type === 'api';
+    }
     shouldUseLocalResolution(cfg) {
         if (cfg.rowsPath || cfg.labelPath || cfg.valuePath || cfg.rowSelectionMode || cfg.selectionFieldId || cfg.selectionMatchPath || cfg.childRowsPath) {
             return true;
@@ -29440,6 +28707,11 @@ class SelectWidgetComponent {
     runtimeManagedField = false;
     runtimeOptionsLoaded = false;
     dependencyValueSnapshot = new Map();
+    cachedStyleSource;
+    cachedWrapperStyles = { width: '100%' };
+    cachedControlCssVars = this.toCssVarMap({});
+    cachedInputLabel = '';
+    cachedInputAttributes = { 'aria-label': 'Select field' };
     destroyRef = inject(DestroyRef);
     cdr = inject(ChangeDetectorRef);
     dataProvider = inject(DATA_PROVIDER, { optional: true }) || inject(DefaultDataProvider);
@@ -29562,9 +28834,8 @@ class SelectWidgetComponent {
         return this.toSafeNonNegativeInt(this.config['searchMinChars'], 0);
     }
     getInputAttributes() {
-        return {
-            'aria-label': this.getAccessibleLabel()
-        };
+        this.syncTemplateBindingCaches();
+        return this.cachedInputAttributes;
     }
     pillLabel() {
         return String(this.config['pillLabel'] ?? '').trim();
@@ -29578,16 +28849,22 @@ class SelectWidgetComponent {
     showNativeLabel() {
         return this.config?.showLabel !== false && this.nativeLabel().length > 0;
     }
+    getCompositeClass() {
+        return this.showNativeLabel()
+            ? 'relative fd-select-composite mt-[0.5em]'
+            : 'relative fd-select-composite';
+    }
     getWrapperStyles() {
-        const { wrapperStyles } = splitControlSurfaceStyles(this.config.style, SELECT_CONTROL_STYLE_KEYS);
-        return mergeAndNormalize({ width: '100%' }, wrapperStyles);
+        this.syncTemplateBindingCaches();
+        return this.cachedWrapperStyles;
     }
     getControlCssVars() {
-        const { controlStyles } = splitControlSurfaceStyles(this.config.style, SELECT_CONTROL_STYLE_KEYS);
-        return this.toCssVarMap(controlStyles);
+        this.syncTemplateBindingCaches();
+        return this.cachedControlCssVars;
     }
     getPillStyles() {
-        return this.getControlCssVars();
+        this.syncTemplateBindingCaches();
+        return this.cachedControlCssVars;
     }
     get visible() {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
@@ -29871,6 +29148,20 @@ class SelectWidgetComponent {
     getAccessibleLabel() {
         return this.config?.label?.trim() || this.config?.name || this.config?.placeholder || 'Select field';
     }
+    syncTemplateBindingCaches() {
+        const styleSource = this.config?.style;
+        if (this.cachedStyleSource !== styleSource) {
+            const { wrapperStyles, controlStyles } = splitControlSurfaceStyles(this.config.style, SELECT_CONTROL_STYLE_KEYS);
+            this.cachedWrapperStyles = mergeAndNormalize({ width: '100%' }, wrapperStyles);
+            this.cachedControlCssVars = this.toCssVarMap(controlStyles);
+            this.cachedStyleSource = styleSource;
+        }
+        const accessibleLabel = this.getAccessibleLabel();
+        if (this.cachedInputLabel !== accessibleLabel) {
+            this.cachedInputLabel = accessibleLabel;
+            this.cachedInputAttributes = { 'aria-label': accessibleLabel };
+        }
+    }
     toSafeNonNegativeInt(value, fallback) {
         if (typeof value === 'number' && Number.isFinite(value) && value >= 0) {
             return Math.floor(value);
@@ -29890,7 +29181,7 @@ class SelectWidgetComponent {
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="relative fd-select-composite" [class.fd-select-composite--with-pill]="hasPillLabel()" [ngClass]="{'mt-[0.5em]': showNativeLabel()}">
+      <div [class]="getCompositeClass()" [class.fd-select-composite--with-pill]="hasPillLabel()">
         @if (showNativeLabel()) {
           <label
             [for]="fieldId"
@@ -29960,7 +29251,7 @@ class SelectWidgetComponent {
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0;color:var(--fd-select-text-color, #1C2431)}.fd-select-composite{display:flex;width:100%;min-width:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1.5px);border-color:var(--fd-select-border-color, #3F8CFF);border-top-style:var(--fd-select-border-top-style, var(--fd-select-border-style, solid));border-right-style:var(--fd-select-border-right-style, var(--fd-select-border-style, solid));border-bottom-style:var(--fd-select-border-bottom-style, var(--fd-select-border-style, solid));border-left-style:var(--fd-select-border-left-style, var(--fd-select-border-style, solid));border-top-width:var(--fd-select-border-top-width, var(--fd-select-border-width, 1.5px));border-right-width:var(--fd-select-border-right-width, var(--fd-select-border-width, 1.5px));border-bottom-width:var(--fd-select-border-bottom-width, var(--fd-select-border-width, 1.5px));border-left-width:var(--fd-select-border-left-width, var(--fd-select-border-width, 1.5px));border-top-color:var(--fd-select-border-top-color, var(--fd-select-border-color, #3F8CFF));border-right-color:var(--fd-select-border-right-color, var(--fd-select-border-color, #3F8CFF));border-bottom-color:var(--fd-select-border-bottom-color, var(--fd-select-border-color, #3F8CFF));border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-radius:var(--fd-select-border-radius, 4px);border-top-left-radius:var(--fd-select-border-top-left-radius, var(--fd-select-border-radius, 4px));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-bottom-left-radius:var(--fd-select-border-bottom-left-radius, var(--fd-select-border-radius, 4px));background:var(--fd-select-background-color, #FFFFFF);box-shadow:var(--fd-select-box-shadow, none);transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select:hover .ng-select-container{border-color:var(--fd-select-hover-border-color, var(--fd-select-border-color, #3F8CFF))}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:var(--fd-select-interactive-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-interactive-border-color, #7FB2FF)}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:var(--fd-select-invalid-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-invalid-border-color, #EF4444)}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding-top:var(--fd-select-padding-top, 2px);padding-right:var(--fd-select-padding-right, 12px);padding-bottom:var(--fd-select-padding-bottom, 2px);padding-left:var(--fd-select-padding-left, 12px);gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px)}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:var(--fd-select-arrow-padding-right, 12px)}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-arrow-wrapper,:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-clear-wrapper{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:var(--fd-select-icon-color, rgba(28, 36, 49, .6)) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:var(--fd-select-icon-color, rgba(28, 36, 49, .6))}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}.fd-select-pill{display:inline-flex;align-items:center;gap:8px;height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);padding:0 12px;border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1px);border-color:var(--fd-select-border-color, #3F8CFF);border-left-width:var(--fd-select-border-left-width, 1px);border-left-style:var(--fd-select-border-left-style, solid);border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fd-select-background-color, #FFFFFF);color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px);box-shadow:var(--fd-select-box-shadow, none);white-space:nowrap;cursor:pointer}.fd-select-pill:disabled{cursor:default;opacity:.7}.fd-select-pill__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fd-select-icon-color, rgba(28, 36, 49, .6))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
+  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0;color:var(--fd-select-text-color, #1C2431)}.fd-select-composite{display:flex;width:100%;min-width:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1.5px);border-color:var(--fd-select-border-color, #3F8CFF);border-top-style:var(--fd-select-border-top-style, var(--fd-select-border-style, solid));border-right-style:var(--fd-select-border-right-style, var(--fd-select-border-style, solid));border-bottom-style:var(--fd-select-border-bottom-style, var(--fd-select-border-style, solid));border-left-style:var(--fd-select-border-left-style, var(--fd-select-border-style, solid));border-top-width:var(--fd-select-border-top-width, var(--fd-select-border-width, 1.5px));border-right-width:var(--fd-select-border-right-width, var(--fd-select-border-width, 1.5px));border-bottom-width:var(--fd-select-border-bottom-width, var(--fd-select-border-width, 1.5px));border-left-width:var(--fd-select-border-left-width, var(--fd-select-border-width, 1.5px));border-top-color:var(--fd-select-border-top-color, var(--fd-select-border-color, #3F8CFF));border-right-color:var(--fd-select-border-right-color, var(--fd-select-border-color, #3F8CFF));border-bottom-color:var(--fd-select-border-bottom-color, var(--fd-select-border-color, #3F8CFF));border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-radius:var(--fd-select-border-radius, 4px);border-top-left-radius:var(--fd-select-border-top-left-radius, var(--fd-select-border-radius, 4px));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-bottom-left-radius:var(--fd-select-border-bottom-left-radius, var(--fd-select-border-radius, 4px));background:var(--fd-select-background-color, #FFFFFF);box-shadow:var(--fd-select-box-shadow, none);transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select:hover .ng-select-container{border-color:var(--fd-select-hover-border-color, var(--fd-select-border-color, #3F8CFF))}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:var(--fd-select-interactive-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-interactive-border-color, #7FB2FF)}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:var(--fd-select-invalid-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-invalid-border-color, #EF4444)}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding-top:var(--fd-select-padding-top, 2px);padding-right:var(--fd-select-padding-right, 12px);padding-bottom:var(--fd-select-padding-bottom, 2px);padding-left:var(--fd-select-padding-left, 12px);gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px)}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:var(--fd-select-arrow-padding-right, 12px)}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-arrow-wrapper,:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-clear-wrapper{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:var(--fd-select-icon-color, rgba(28, 36, 49, .6)) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:var(--fd-select-icon-color, rgba(28, 36, 49, .6))}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}.fd-select-pill{display:inline-flex;align-items:center;gap:8px;height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);padding:0 12px;border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1px);border-color:var(--fd-select-border-color, #3F8CFF);border-left-width:var(--fd-select-border-left-width, 1px);border-left-style:var(--fd-select-border-left-style, solid);border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fd-select-background-color, #FFFFFF);color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px);box-shadow:var(--fd-select-box-shadow, none);white-space:nowrap;cursor:pointer}.fd-select-pill:disabled{cursor:default;opacity:.7}.fd-select-pill__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fd-select-icon-color, rgba(28, 36, 49, .6))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
@@ -29970,7 +29261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
          [ngStyle]="getWrapperStyles()"
          data-fd="field"
          [attr.data-fd-field-type]="config.type">
-      <div class="relative fd-select-composite" [class.fd-select-composite--with-pill]="hasPillLabel()" [ngClass]="{'mt-[0.5em]': showNativeLabel()}">
+      <div [class]="getCompositeClass()" [class.fd-select-composite--with-pill]="hasPillLabel()">
         @if (showNativeLabel()) {
           <label
             [for]="fieldId"
@@ -32538,6 +31829,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['editor', { static: true }]
             }] } });
 
+class SafePipe {
+    // Use inject() for modern Angular
+    sanitizer = inject(DomSanitizer);
+    transform(value, type) {
+        switch (type) {
+            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default: return value;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SafePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safe',
+                    standalone: true
+                }]
+        }] });
+
 class RichTextWidgetComponent {
     editor = inject(WIDGET_EDITOR_CONTEXT, { optional: true });
     destroyRef = inject(DestroyRef);
@@ -32670,13 +31985,13 @@ class RichTextWidgetComponent {
         [class]="'rich-text-widget ' + contentClass()"
         data-fd="text-content"
         [ngStyle]="editorStyles()"
-        [innerHTML]="contentHtml()"></div>
+        [innerHTML]="contentHtml() | safe:'html'"></div>
     </ng-template>
-  `, isInline: true, styles: [":host ::ng-deep .rich-text-widget ol{list-style-type:var(--fd-ordered-list-style, decimal);margin-left:1.25rem;padding-left:.5rem}:host ::ng-deep .rich-text-widget ul{margin-left:1.25rem;padding-left:.5rem;list-style-type:disc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineQuillEditorComponent, selector: "app-inline-quill-editor", inputs: ["html", "placeholder", "readOnly", "autoFocus", "containerClass", "editorClass", "editorStyle"], outputs: ["htmlChange", "editorBlur", "editorFocus"] }] });
+  `, isInline: true, styles: [":host ::ng-deep .rich-text-widget ol{list-style-type:var(--fd-ordered-list-style, decimal);margin-left:1.25rem;padding-left:.5rem}:host ::ng-deep .rich-text-widget ul{margin-left:1.25rem;padding-left:.5rem;list-style-type:disc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineQuillEditorComponent, selector: "app-inline-quill-editor", inputs: ["html", "placeholder", "readOnly", "autoFocus", "containerClass", "editorClass", "editorStyle"], outputs: ["htmlChange", "editorBlur", "editorFocus"] }, { kind: "pipe", type: SafePipe, name: "safe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RichTextWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-rich-text-widget', standalone: true, imports: [CommonModule, InlineQuillEditorComponent], template: `
+            args: [{ selector: 'app-rich-text-widget', standalone: true, imports: [CommonModule, InlineQuillEditorComponent, SafePipe], template: `
     <ng-container *ngIf="isDesignMode(); else staticContent">
       <app-inline-quill-editor
         [html]="contentHtml()"
@@ -32694,7 +32009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         [class]="'rich-text-widget ' + contentClass()"
         data-fd="text-content"
         [ngStyle]="editorStyles()"
-        [innerHTML]="contentHtml()"></div>
+        [innerHTML]="contentHtml() | safe:'html'"></div>
     </ng-template>
   `, styles: [":host ::ng-deep .rich-text-widget ol{list-style-type:var(--fd-ordered-list-style, decimal);margin-left:1.25rem;padding-left:.5rem}:host ::ng-deep .rich-text-widget ul{margin-left:1.25rem;padding-left:.5rem;list-style-type:disc}\n"] }]
         }], propDecorators: { config: [{