@ngstarter-ui/components 21.0.40 → 21.0.42

package/fesm2022/ngstarter-ui-components-form-builder.mjs

@@ -1,14 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, inject, model, output, ElementRef } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, inject, model, output, DestroyRef, ElementRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
-import { moveItemInArray, transferArrayItem, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDragPreview, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import { NgTemplateOutlet } from '@angular/common';
 import { Button } from '@ngstarter-ui/components/button';
 import { Card, CardAside, CardContent, CardHeader } from '@ngstarter-ui/components/card';
 import { ConfirmManager } from '@ngstarter-ui/components/confirm';
 import { Dialog, DialogActions, DialogClose, DialogContent, DialogTitle } from '@ngstarter-ui/components/dialog';
-import { FormField, Hint, IconButtonSuffix, Label } from '@ngstarter-ui/components/form-field';
 import { Icon } from '@ngstarter-ui/components/icon';
 import { Input } from '@ngstarter-ui/components/input';
 import { Panel, PanelAside, PanelContent, PanelHeader, PanelSidebar } from '@ngstarter-ui/components/panel';
@@ -16,21 +14,36 @@ import { ScrollbarArea } from '@ngstarter-ui/components/scrollbar-area';
 import { Tab, TabGroup } from '@ngstarter-ui/components/tabs';
 import { Tree, TreeDragPlaceholder, TreeNode, TreeNodeDef, TreeNodePadding } from '@ngstarter-ui/components/tree';
 import { Datepicker, DatepickerInput, DatepickerToggle, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';
+import { FormField, Hint, IconButtonSuffix, Label, Error } from '@ngstarter-ui/components/form-field';
 import { Select } from '@ngstarter-ui/components/select';
 import { Option } from '@ngstarter-ui/components/option';
 import { Checkbox } from '@ngstarter-ui/components/checkbox';
-import { SlideToggle } from '@ngstarter-ui/components/slide-toggle';
+import { SlideToggle, SlideToggleGroup } from '@ngstarter-ui/components/slide-toggle';
+import { RadioButton, RadioGroup } from '@ngstarter-ui/components/radio';
+import { CountrySelect } from '@ngstarter-ui/components/country-select';
+import { CurrencySelect } from '@ngstarter-ui/components/currency-select';
+import { TimezoneSelect } from '@ngstarter-ui/components/timezone-select';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
+const FORM_BUILDER_ITEMS = new InjectionToken('FORM_BUILDER_ITEMS');
 const FORM_BUILDER_FIELDS = new InjectionToken('FORM_BUILDER_FIELDS');
 const FORM_BUILDER_SETTINGS = new InjectionToken('FORM_BUILDER_SETTINGS');
 function formBuilderField(definition) {
     return definition;
 }
+function formBuilderItem(definition) {
+    return definition;
+}
 function formBuilderSettings(definition) {
     return definition;
 }
 function provideFormBuilder(config = {}) {
     return makeEnvironmentProviders([
+        ...(config.items ?? []).map(item => ({
+            provide: FORM_BUILDER_ITEMS,
+            useValue: item,
+            multi: true
+        })),
         ...(config.fields ?? []).map(field => ({
             provide: FORM_BUILDER_FIELDS,
             useValue: field,
@@ -87,13 +100,16 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         }
     },
     {
-        type: 'grid',
-        label: 'Grid',
+        type: 'group',
+        label: 'Group',
+        kind: 'layout',
         group: 'Layout',
-        icon: 'fluent:grid-24-regular',
+        icon: 'fluent:group-24-regular',
         description: 'Container for nested fields.',
+        acceptsChildren: true,
         defaults: {
-            label: 'Grid',
+            kind: 'layout',
+            label: 'Group',
             width: 12,
             children: []
         }
@@ -106,6 +122,23 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Select',
             placeholder: 'Choose an option',
+            clearable: true,
+            options: [
+                { label: 'Option 1', value: 'option_1' },
+                { label: 'Option 2', value: 'option_2' }
+            ]
+        }
+    },
+    {
+        type: 'radio',
+        label: 'Radio',
+        group: 'Choices',
+        icon: 'fluent:radio-button-24-regular',
+        defaults: {
+            label: 'Radio',
+            settings: {
+                orientation: 'vertical'
+            },
             options: [
                 { label: 'Option 1', value: 'option_1' },
                 { label: 'Option 2', value: 'option_2' }
@@ -142,6 +175,16 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             placeholder: 'Select date'
         }
     },
+    {
+        type: 'timezone-select',
+        label: 'Timezone select',
+        group: 'Date and time',
+        icon: 'fluent:globe-clock-24-regular',
+        defaults: {
+            label: 'Timezone',
+            placeholder: 'Select timezone'
+        }
+    },
     {
         type: 'currency',
         label: 'Currency',
@@ -151,8 +194,41 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Amount',
             placeholder: '0.00'
         }
+    },
+    {
+        type: 'currency-select',
+        label: 'Currency select',
+        group: 'Finance',
+        icon: 'fluent:money-hand-24-regular',
+        defaults: {
+            label: 'Currency',
+            placeholder: 'Select currency'
+        }
+    },
+    {
+        type: 'country-select',
+        label: 'Country select',
+        group: 'Location',
+        icon: 'fluent:globe-location-24-regular',
+        defaults: {
+            label: 'Country',
+            placeholder: 'Select country',
+            clearable: true
+        }
     }
 ];
+const DEFAULT_FORM_BUILDER_ITEMS = [
+    {
+        type: 'section',
+        label: 'Section',
+        kind: 'layout',
+        group: 'Layout',
+        icon: 'fluent:folder-24-regular',
+        description: 'Top-level layout container.',
+        acceptsChildren: true
+    },
+    ...DEFAULT_FORM_BUILDER_FIELDS
+];
 function validatorsFromRules(rules = [], field) {
     const validators = [];
     if (field?.required || rules.some(rule => rule.type === 'required')) {
@@ -189,6 +265,7 @@ class FormBuilderFieldHost {
         const type = this.field().type;
         return type === 'number' || type === 'email' ? type : 'text';
     }, ...(ngDevMode ? [{ debugName: "textInputType" }] : /* istanbul ignore next */ []));
+    radioOrientation = computed(() => this.field().settings?.['orientation'] === 'horizontal' ? 'horizontal' : 'vertical', ...(ngDevMode ? [{ debugName: "radioOrientation" }] : /* istanbul ignore next */ []));
     anchor = viewChild.required('anchor', { read: ViewContainerRef });
     constructor() {
         effect(async () => {
@@ -207,13 +284,14 @@ class FormBuilderFieldHost {
             componentRef.setInput('field', field);
             componentRef.setInput('control', control);
             componentRef.setInput('readonly', this.readonly());
+            componentRef.setInput('definition', definitions.find(definition => definition.type === field.type));
             this.customLoaded.set(true);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderFieldHost, isStandalone: true, selector: "ngs-form-builder-field-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, editableCanvas: { classPropertyName: "editableCanvas", publicName: "editableCanvas", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-custom": "customLoaded()", "class.is-width-1": "!editableCanvas() && field().width === 1", "class.is-width-2": "!editableCanvas() && field().width === 2", "class.is-width-3": "!editableCanvas() && field().width === 3", "class.is-width-4": "!editableCanvas() && field().width === 4", "class.is-width-5": "!editableCanvas() && field().width === 5", "class.is-width-6": "!editableCanvas() && field().width === 6", "class.is-width-7": "!editableCanvas() && field().width === 7", "class.is-width-8": "!editableCanvas() && field().width === 8", "class.is-width-9": "!editableCanvas() && field().width === 9", "class.is-width-10": "!editableCanvas() && field().width === 10", "class.is-width-11": "!editableCanvas() && field().width === 11", "class.is-width-12": "!editableCanvas() && (field().width ?? 12) === 12" }, classAttribute: "ngs-form-builder-field-host" }, providers: [
             provideNativeDateAdapter()
-        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderFieldHost"], ngImport: i0, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\" [placeholder]=\"field().placeholder || ''\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"], exportAs: ["ngsDatepickerInput"] }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderFieldHost"], ngImport: i0, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\"\n                    [placeholder]=\"field().placeholder || ''\"\n                    [multiple]=\"field().multiple ?? false\"\n                    [clearable]=\"field().clearable ?? false\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('radio') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-radio-group [formControl]=\"control()\"\n                         [name]=\"field().name\"\n                         [orientation]=\"radioOrientation()\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n          }\n        </ngs-radio-group>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('timezone-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-timezone-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-currency-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('country-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-country-select [formControl]=\"control()\"\n                            [placeholder]=\"field().placeholder || ''\"\n                            [clearable]=\"field().clearable ?? false\"\n                            [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-choice-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-choice-label{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-builder-choice-hint{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"], exportAs: ["ngsDatepickerInput"] }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: RadioButton, selector: "ngs-radio-button", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["checkedChange", "change"] }, { kind: "component", type: RadioGroup, selector: "ngs-radio-group", inputs: ["disabled", "name", "orientation", "value"], outputs: ["disabledChange", "valueChange", "change"], exportAs: ["ngsRadioGroup"] }, { kind: "component", type: CountrySelect, selector: "ngs-country-select", inputs: ["searchTerm", "value", "id", "placeholder", "required", "disabled", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "showCountryCode"], outputs: ["searchTermChange", "valueChange", "requiredChange", "disabledChange", "opened", "closed", "selectionChange"], exportAs: ["ngsCountrySelect"] }, { kind: "component", type: CurrencySelect, selector: "ngs-currency-select", inputs: ["searchTerm", "placeholder", "required", "disabled", "showCountryName"], outputs: ["searchTermChange", "requiredChange", "disabledChange", "opened", "closed"], exportAs: ["ngsCurrencySelect"] }, { kind: "component", type: TimezoneSelect, selector: "ngs-timezone-select", inputs: ["aria-describedby", "locale", "placeholder", "required", "disabled", "value", "searchTerm"], outputs: ["valueChange", "searchTermChange", "opened", "closed"], exportAs: ["ngsTimezoneSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, decorators: [{
             type: Component,
@@ -230,7 +308,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         Select,
                         Option,
                         Checkbox,
-                        SlideToggle
+                        SlideToggle,
+                        RadioButton,
+                        RadioGroup,
+                        CountrySelect,
+                        CurrencySelect,
+                        TimezoneSelect
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         provideNativeDateAdapter()
                     ], host: {
@@ -248,11 +331,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[class.is-width-10]': '!editableCanvas() && field().width === 10',
                         '[class.is-width-11]': '!editableCanvas() && field().width === 11',
                         '[class.is-width-12]': '!editableCanvas() && (field().width ?? 12) === 12'
-                    }, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\" [placeholder]=\"field().placeholder || ''\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\"\n                    [placeholder]=\"field().placeholder || ''\"\n                    [multiple]=\"field().multiple ?? false\"\n                    [clearable]=\"field().clearable ?? false\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('radio') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-radio-group [formControl]=\"control()\"\n                         [name]=\"field().name\"\n                         [orientation]=\"radioOrientation()\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n          }\n        </ngs-radio-group>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('timezone-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-timezone-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-currency-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('country-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-country-select [formControl]=\"control()\"\n                            [placeholder]=\"field().placeholder || ''\"\n                            [clearable]=\"field().clearable ?? false\"\n                            [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-choice-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-choice-label{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-builder-choice-hint{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], editableCanvas: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableCanvas", required: false }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class FormBuilderRenderer {
+    providedItems = inject(FORM_BUILDER_ITEMS, { optional: true }) ?? [];
     providedFields = inject(FORM_BUILDER_FIELDS, { optional: true }) ?? [];
+    orphanControls = new Map();
     schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     showSubmit = input(true, ...(ngDevMode ? [{ debugName: "showSubmit" }] : /* istanbul ignore next */ []));
@@ -261,9 +346,27 @@ class FormBuilderRenderer {
     formSubmit = output();
     formReady = output();
     definitions = computed(() => [
-        ...DEFAULT_FORM_BUILDER_FIELDS,
-        ...this.providedFields
-    ], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+        ...DEFAULT_FORM_BUILDER_ITEMS,
+        ...this.providedFields,
+        ...this.providedItems
+    ].reduce((definitions, definition) => {
+        const normalized = normalizeFieldDefinition$1(definition);
+        const index = definitions.findIndex(item => item.type === normalized.type);
+        if (index === -1) {
+            definitions.push(normalized);
+        }
+        else {
+            definitions[index] = {
+                ...definitions[index],
+                ...normalized,
+                defaults: {
+                    ...definitions[index].defaults,
+                    ...normalized.defaults
+                }
+            };
+        }
+        return definitions;
+    }, []), ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
     visibleCanvasItems = computed(() => this.resolveCanvasItems(this.schema())
         .map(item => {
         if (item.field) {
@@ -293,10 +396,28 @@ class FormBuilderRenderer {
         });
     }
     getControl(field) {
-        return this.formGroup().get(field.name);
+        const control = this.formGroup().get(field.name);
+        if (control instanceof FormControl) {
+            return control;
+        }
+        const existing = this.orphanControls.get(field.id);
+        if (existing) {
+            return existing;
+        }
+        const nextControl = new FormControl({
+            value: this.fieldInitialValue(field),
+            disabled: true
+        });
+        this.orphanControls.set(field.id, nextControl);
+        return nextControl;
     }
     isContainerField(field) {
-        return field.type === 'grid';
+        const definition = this.definitions().find(item => item.type === field.type);
+        return definition?.acceptsChildren === true ||
+            definition?.kind === 'layout' ||
+            field.kind === 'layout' ||
+            field.type === 'group' ||
+            field.type === 'grid';
     }
     visibleChildren(field) {
         return this.visibleFields(field.children ?? []);
@@ -317,13 +438,13 @@ class FormBuilderRenderer {
             ...this.schema().sections.flatMap(section => flattenFields(section.fields))
         ];
         for (const field of fields) {
-            if (this.isContainerField(field)) {
+            const definition = this.definitions().find(item => item.type === field.type);
+            if (this.isContainerField(field) || definition?.kind === 'static' || field.kind === 'static') {
                 continue;
             }
-            const definition = this.definitions().find(item => item.type === field.type);
             const validators = definition?.validators?.(field) ?? validatorsFromRules(field.validation, field);
             const control = new FormControl({
-                value: value[field.name] ?? field.defaultValue ?? null,
+                value: value[field.name] ?? this.fieldInitialValue(field),
                 disabled: field.disabled || this.readonly()
             }, validators);
             controls[field.name] = control;
@@ -338,6 +459,18 @@ class FormBuilderRenderer {
             children: field.children ? this.visibleFields(field.children) : undefined
         }));
     }
+    fieldInitialValue(field) {
+        if (field.defaultValue !== undefined) {
+            return field.defaultValue;
+        }
+        const selectedValues = (field.options ?? [])
+            .filter(option => option.selected)
+            .map(option => option.value);
+        if (field.type === 'checkbox-list' || field.multiple) {
+            return selectedValues;
+        }
+        return selectedValues[0] ?? null;
+    }
     resolveCanvasItems(schema) {
         const fieldsById = new Map((schema.fields ?? []).map(field => [field.id, field]));
         const sectionsById = new Map(schema.sections.map(section => [section.id, section]));
@@ -371,6 +504,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'class': 'ngs-form-builder-renderer'
                     }, template: "<ng-template #renderFields let-fields>\n  <div class=\"ngs-form-builder-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isContainerField(field)) {\n        <section class=\"ngs-form-builder-renderer-grid-field\">\n          <header>\n            <h4>{{ field.label }}</h4>\n            @if (field.hint) {\n              <p>{{ field.hint }}</p>\n            }\n          </header>\n\n          <ng-container\n            [ngTemplateOutlet]=\"renderFields\"\n            [ngTemplateOutletContext]=\"{ $implicit: visibleChildren(field) }\"/>\n        </section>\n      } @else {\n        <ngs-form-builder-field-host\n          [field]=\"field\"\n          [control]=\"getControl(field)\"\n          [definitions]=\"definitions()\"\n          [readonly]=\"readonly()\"/>\n      }\n    }\n  </div>\n</ng-template>\n\n<form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n  <div class=\"flex flex-col gap-6\">\n    @for (item of visibleCanvasItems(); track item.kind + ':' + item.id) {\n      @if (item.field) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderFields\"\n          [ngTemplateOutletContext]=\"{ $implicit: [item.field] }\"/>\n      } @else if (item.section; as section) {\n        <section class=\"ngs-form-builder-renderer-section\">\n          @if (section.title || section.description) {\n            <header>\n              @if (section.title) {\n                <h3>{{ section.title }}</h3>\n              }\n              @if (section.description) {\n                <p>{{ section.description }}</p>\n              }\n            </header>\n          }\n\n          <ng-container\n            [ngTemplateOutlet]=\"renderFields\"\n            [ngTemplateOutletContext]=\"{ $implicit: section.fields }\"/>\n        </section>\n      }\n    }\n\n    @if (showSubmit() && !readonly()) {\n      <div class=\"flex justify-end\">\n        <button ngsButton=\"filled\" type=\"submit\">{{ submitLabel() }}</button>\n      </div>\n    }\n  </div>\n</form>\n", styles: [":host{display:block}:host .ngs-form-builder-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-builder-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-builder-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-builder-renderer-grid-field>header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubmit", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formReady: [{ type: i0.Output, args: ["formReady"] }] } });
+function normalizeFieldDefinition$1(definition) {
+    return {
+        ...definition,
+        kind: definition.kind ?? 'field'
+    };
+}
 function flattenFields(fields) {
     return fields.flatMap(field => [field, ...flattenFields(field.children ?? [])]);
 }
@@ -406,102 +545,313 @@ function normalizedLayout(schema) {
     return layout;
 }
 
-class FormBuilderSettingsHost {
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
-    definitions = input([], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
-    settingsDefinitions = input([], ...(ngDevMode ? [{ debugName: "settingsDefinitions" }] : /* istanbul ignore next */ []));
-    update = input.required(...(ngDevMode ? [{ debugName: "update" }] : /* istanbul ignore next */ []));
-    customLoaded = signal(false, ...(ngDevMode ? [{ debugName: "customLoaded" }] : /* istanbul ignore next */ []));
-    anchor = viewChild.required('anchor', { read: ViewContainerRef });
-    constructor() {
-        effect(async () => {
-            const field = this.field();
-            const definitions = this.definitions();
-            const settingDefinitions = this.settingsDefinitions();
-            const viewContainer = this.anchor();
-            const fieldDefinition = definitions.find(definition => definition.type === field.type);
-            const customSettings = fieldDefinition?.settings ??
-                settingDefinitions.find(definition => definition.fieldType === field.type)?.component;
-            viewContainer.clear();
-            this.customLoaded.set(false);
-            if (!customSettings) {
-                return;
-            }
-            const componentType = await customSettings();
-            const componentRef = viewContainer.createComponent(componentType);
-            componentRef.setInput('field', field);
-            componentRef.setInput('schema', this.schema());
-            componentRef.setInput('update', this.update());
-            this.customLoaded.set(true);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: FormBuilderSettingsHost, isStandalone: true, selector: "ngs-form-builder-settings-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, settingsDefinitions: { classPropertyName: "settingsDefinitions", publicName: "settingsDefinitions", isSignal: true, isRequired: false, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.is-empty": "!customLoaded()" }, classAttribute: "ngs-form-builder-settings-host" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderSettingsHost"], ngImport: i0, template: "<ng-container #anchor/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngs-form-builder-settings-host', exportAs: 'ngsFormBuilderSettingsHost', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'ngs-form-builder-settings-host',
-                        '[class.is-empty]': '!customLoaded()'
-                    }, template: "<ng-container #anchor/>\n" }]
-        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], settingsDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingsDefinitions", required: false }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: true }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
-
 class BasicFormBuilderFieldSettings {
+    destroyRef = inject(DestroyRef);
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     update = input.required(...(ngDevMode ? [{ debugName: "update" }] : /* istanbul ignore next */ []));
+    optionsControl = new FormControl('', {
+        nonNullable: true,
+        validators: optionsTextValidator
+    });
     fieldWidthOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+    radioOrientationOptions = ['vertical', 'horizontal'];
+    hasCheckedState = computed(() => ['checkbox', 'toggle'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasCheckedState" }] : /* istanbul ignore next */ []));
+    hasPlaceholder = computed(() => !['checkbox', 'toggle', 'radio'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasPlaceholder" }] : /* istanbul ignore next */ []));
     hasOptions = computed(() => ['select', 'radio', 'checkbox-list'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasOptions" }] : /* istanbul ignore next */ []));
+    hasClearable = computed(() => ['select', 'country-select'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasClearable" }] : /* istanbul ignore next */ []));
+    isSelect = computed(() => this.field().type === 'select', ...(ngDevMode ? [{ debugName: "isSelect" }] : /* istanbul ignore next */ []));
+    isRadio = computed(() => this.field().type === 'radio', ...(ngDevMode ? [{ debugName: "isRadio" }] : /* istanbul ignore next */ []));
+    radioOrientation = computed(() => this.field().settings?.['orientation'] === 'horizontal' ? 'horizontal' : 'vertical', ...(ngDevMode ? [{ debugName: "radioOrientation" }] : /* istanbul ignore next */ []));
     optionsText = computed(() => (this.field().options ?? [])
-        .map(option => `${option.label}:${option.value}`)
+        .map(option => `${option.label}:${option.value}${this.isOptionSelected(option) ? ':selected' : ''}`)
         .join('\n'), ...(ngDevMode ? [{ debugName: "optionsText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const nextValue = this.optionsText();
+            if (this.optionsControl.value !== nextValue) {
+                this.optionsControl.setValue(nextValue, { emitEvent: false });
+            }
+        });
+        this.optionsControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(value => {
+            if (this.optionsControl.invalid) {
+                return;
+            }
+            this.patchOptions(value);
+        });
+    }
     patch(changes) {
         this.update()(changes);
     }
+    patchSelectMultiple(multiple) {
+        const field = this.field();
+        const options = multiple ? field.options ?? [] : this.normalizeSelectedOptions(field.options ?? [], false);
+        const selectedValues = this.selectedOptionValues(options);
+        let defaultValue = null;
+        if (multiple) {
+            defaultValue = Array.isArray(field.defaultValue)
+                ? field.defaultValue
+                : field.defaultValue == null
+                    ? selectedValues
+                    : [field.defaultValue];
+        }
+        else {
+            defaultValue = Array.isArray(field.defaultValue)
+                ? field.defaultValue[0] ?? selectedValues[0] ?? null
+                : field.defaultValue ?? selectedValues[0] ?? null;
+        }
+        this.patch({ multiple, options, defaultValue });
+    }
+    patchRadioOrientation(orientation) {
+        this.patch({
+            settings: {
+                ...this.field().settings,
+                orientation
+            }
+        });
+    }
     patchOptions(value) {
-        const options = value
+        const options = this.normalizeSelectedOptions(value
             .split('\n')
             .map(line => line.trim())
             .filter(Boolean)
             .map((line, index) => {
-            const [label, optionValue] = line.split(':');
+            const parsed = parseOptionLine(line);
             return {
-                label: label?.trim() || `Option ${index + 1}`,
-                value: (optionValue ?? label ?? `option_${index + 1}`).trim()
+                label: parsed?.label || `Option ${index + 1}`,
+                value: parsed?.value || `option_${index + 1}`,
+                selected: parsed?.selected || undefined
             };
+        }));
+        this.patch({
+            options,
+            defaultValue: this.resolveSelectedDefaultValue(options)
         });
-        this.patch({ options });
+    }
+    normalizeSelectedOptions(options, multiple = this.field().multiple) {
+        if (this.field().type === 'checkbox-list' || multiple) {
+            return options;
+        }
+        let selectedSeen = false;
+        return options.map(option => {
+            if (!option.selected) {
+                return option;
+            }
+            if (selectedSeen) {
+                return {
+                    ...option,
+                    selected: undefined
+                };
+            }
+            selectedSeen = true;
+            return option;
+        });
+    }
+    resolveSelectedDefaultValue(options) {
+        const selectedValues = this.selectedOptionValues(options);
+        if (this.field().type === 'checkbox-list' || this.field().multiple) {
+            return selectedValues;
+        }
+        return selectedValues[0] ?? null;
+    }
+    selectedOptionValues(options) {
+        return options
+            .filter(option => option.selected)
+            .map(option => option.value);
+    }
+    isOptionSelected(option) {
+        if (option.selected) {
+            return true;
+        }
+        const defaultValue = this.field().defaultValue;
+        return Array.isArray(defaultValue)
+            ? defaultValue.includes(option.value)
+            : defaultValue === option.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderFieldSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderFieldSettings, isStandalone: true, selector: "ngs-basic-form-builder-field-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-field-settings" }, exportAs: ["ngsBasicFormBuilderFieldSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Field ID</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().name\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ name: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Placeholder</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().placeholder || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ placeholder: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  <div class=\"flex flex-col gap-3 py-1\">\n    <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ required: $event })\">\n      Required field\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ readonly: $event })\">\n      Readonly\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ disabled: $event })\">\n      Disabled\n    </ngs-slide-toggle>\n  </div>\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [ngModel]=\"optionsText()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patchOptions($event)\"></textarea>\n      <ngs-hint>One option per line. Use Label:value to set explicit values.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderFieldSettings, isStandalone: true, selector: "ngs-basic-form-builder-field-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-field-settings" }, exportAs: ["ngsBasicFormBuilderFieldSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Field ID</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().name\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ name: $event })\">\n  </ngs-form-field>\n\n  @if (hasPlaceholder()) {\n    <ngs-form-field>\n      <ngs-label>Placeholder</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().placeholder || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ placeholder: $event })\">\n    </ngs-form-field>\n  }\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  <ngs-slide-toggle-group class=\"mb-4\">\n    <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ required: $event })\">\n      Required field\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ readonly: $event })\">\n      Readonly\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ disabled: $event })\">\n      Disabled\n    </ngs-slide-toggle>\n\n    @if (hasCheckedState()) {\n      <ngs-slide-toggle [ngModel]=\"field().defaultValue === true\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ defaultValue: $event })\">\n        Checked\n      </ngs-slide-toggle>\n    }\n\n    @if (isSelect()) {\n      <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patchSelectMultiple($event)\">\n        Multiple\n      </ngs-slide-toggle>\n    }\n\n    @if (hasClearable()) {\n      <ngs-slide-toggle [ngModel]=\"field().clearable ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ clearable: $event })\">\n        Clearable\n      </ngs-slide-toggle>\n    }\n  </ngs-slide-toggle-group>\n\n  @if (isRadio()) {\n    <ngs-form-field>\n      <ngs-label>Orientation</ngs-label>\n      <ngs-select [ngModel]=\"radioOrientation()\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchRadioOrientation($event)\">\n        @for (orientation of radioOrientationOptions; track orientation) {\n          <ngs-option [value]=\"orientation\">{{ orientation }}</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [formControl]=\"optionsControl\"></textarea>\n      @if (optionsControl.hasError('formBuilderOptionsFormat')) {\n        <ngs-error>Use Label:value or Label:value:selected.</ngs-error>\n      }\n      <ngs-hint>One option per line. Use Label:value or Label:value:selected.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: SlideToggleGroup, selector: "ngs-slide-toggle-group", exportAs: ["ngsSlideToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderFieldSettings, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-basic-form-builder-field-settings', exportAs: 'ngsBasicFormBuilderFieldSettings', imports: [
                         FormsModule,
+                        ReactiveFormsModule,
+                        Error,
                         FormField,
                         Hint,
                         Label,
                         Input,
                         Select,
                         Option,
-                        SlideToggle
+                        SlideToggle,
+                        SlideToggleGroup
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-basic-form-builder-field-settings'
-                    }, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Field ID</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().name\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ name: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Placeholder</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().placeholder || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ placeholder: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  <div class=\"flex flex-col gap-3 py-1\">\n    <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ required: $event })\">\n      Required field\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ readonly: $event })\">\n      Readonly\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ disabled: $event })\">\n      Disabled\n    </ngs-slide-toggle>\n  </div>\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [ngModel]=\"optionsText()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patchOptions($event)\"></textarea>\n      <ngs-hint>One option per line. Use Label:value to set explicit values.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Field ID</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().name\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ name: $event })\">\n  </ngs-form-field>\n\n  @if (hasPlaceholder()) {\n    <ngs-form-field>\n      <ngs-label>Placeholder</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().placeholder || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ placeholder: $event })\">\n    </ngs-form-field>\n  }\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  <ngs-slide-toggle-group class=\"mb-4\">\n    <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ required: $event })\">\n      Required field\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ readonly: $event })\">\n      Readonly\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ disabled: $event })\">\n      Disabled\n    </ngs-slide-toggle>\n\n    @if (hasCheckedState()) {\n      <ngs-slide-toggle [ngModel]=\"field().defaultValue === true\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ defaultValue: $event })\">\n        Checked\n      </ngs-slide-toggle>\n    }\n\n    @if (isSelect()) {\n      <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patchSelectMultiple($event)\">\n        Multiple\n      </ngs-slide-toggle>\n    }\n\n    @if (hasClearable()) {\n      <ngs-slide-toggle [ngModel]=\"field().clearable ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ clearable: $event })\">\n        Clearable\n      </ngs-slide-toggle>\n    }\n  </ngs-slide-toggle-group>\n\n  @if (isRadio()) {\n    <ngs-form-field>\n      <ngs-label>Orientation</ngs-label>\n      <ngs-select [ngModel]=\"radioOrientation()\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchRadioOrientation($event)\">\n        @for (orientation of radioOrientationOptions; track orientation) {\n          <ngs-option [value]=\"orientation\">{{ orientation }}</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [formControl]=\"optionsControl\"></textarea>\n      @if (optionsControl.hasError('formBuilderOptionsFormat')) {\n        <ngs-error>Use Label:value or Label:value:selected.</ngs-error>\n      }\n      <ngs-hint>One option per line. Use Label:value or Label:value:selected.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: true }] }] } });
+function optionsTextValidator(control) {
+    const hasInvalidLine = (control.value ?? '')
+        .split('\n')
+        .map(line => line.trim())
+        .filter(Boolean)
+        .some(line => !parseOptionLine(line));
+    return hasInvalidLine ? { formBuilderOptionsFormat: true } : null;
+}
+function parseOptionLine(line) {
+    const parts = line.split(':').map(part => part.trim());
+    if (parts.length < 2 || parts.length > 3) {
+        return null;
+    }
+    const [label, value, selected] = parts;
+    if (!label || !value) {
+        return null;
+    }
+    if (selected !== undefined && selected !== 'selected') {
+        return null;
+    }
+    return {
+        label,
+        value,
+        selected: selected === 'selected'
+    };
+}
+
+class BasicFormBuilderLayoutSettings {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    update = input.required(...(ngDevMode ? [{ debugName: "update" }] : /* istanbul ignore next */ []));
+    fieldWidthOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+    patch(changes) {
+        this.update()(changes);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderLayoutSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderLayoutSettings, isStandalone: true, selector: "ngs-basic-form-builder-layout-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-layout-settings" }, exportAs: ["ngsBasicFormBuilderLayoutSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n    <ngs-hint>Shown below the layout title in preview and renderer.</ngs-hint>\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n</div>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderLayoutSettings, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-basic-form-builder-layout-settings', exportAs: 'ngsBasicFormBuilderLayoutSettings', imports: [
+                        FormsModule,
+                        FormField,
+                        Hint,
+                        Label,
+                        Input,
+                        Option,
+                        Select
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-basic-form-builder-layout-settings'
+                    }, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n    <ngs-hint>Shown below the layout title in preview and renderer.</ngs-hint>\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n</div>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: true }] }] } });
 
+class BasicFormBuilderSectionSettings {
+    section = input.required(...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    update = input.required(...(ngDevMode ? [{ debugName: "update" }] : /* istanbul ignore next */ []));
+    patch(changes) {
+        this.update()(changes);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderSectionSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: BasicFormBuilderSectionSettings, isStandalone: true, selector: "ngs-basic-form-builder-section-settings", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-section-settings" }, exportAs: ["ngsBasicFormBuilderSectionSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Title</ngs-label>\n    <input ngsInput\n           [ngModel]=\"section().title\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ title: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Description</ngs-label>\n    <textarea ngsInput\n              rows=\"3\"\n              [ngModel]=\"section().description || ''\"\n              [ngModelOptions]=\"{standalone: true}\"\n              (ngModelChange)=\"patch({ description: $event })\"></textarea>\n    <ngs-hint>Optional helper text rendered under the section title.</ngs-hint>\n  </ngs-form-field>\n\n  <ngs-slide-toggle [ngModel]=\"section().collapsed ?? false\"\n                    [ngModelOptions]=\"{standalone: true}\"\n                    (ngModelChange)=\"patch({ collapsed: $event })\">\n    Collapsed\n  </ngs-slide-toggle>\n</div>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderSectionSettings, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-basic-form-builder-section-settings', exportAs: 'ngsBasicFormBuilderSectionSettings', imports: [
+                        FormsModule,
+                        FormField,
+                        Hint,
+                        Label,
+                        Input,
+                        SlideToggle
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-basic-form-builder-section-settings'
+                    }, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Title</ngs-label>\n    <input ngsInput\n           [ngModel]=\"section().title\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ title: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Description</ngs-label>\n    <textarea ngsInput\n              rows=\"3\"\n              [ngModel]=\"section().description || ''\"\n              [ngModelOptions]=\"{standalone: true}\"\n              (ngModelChange)=\"patch({ description: $event })\"></textarea>\n    <ngs-hint>Optional helper text rendered under the section title.</ngs-hint>\n  </ngs-form-field>\n\n  <ngs-slide-toggle [ngModel]=\"section().collapsed ?? false\"\n                    [ngModelOptions]=\"{standalone: true}\"\n                    (ngModelChange)=\"patch({ collapsed: $event })\">\n    Collapsed\n  </ngs-slide-toggle>\n</div>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: true }] }] } });
+
+class FormBuilderSettingsHost {
+    field = input(null, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    section = input(null, ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    definitions = input([], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    settingsDefinitions = input([], ...(ngDevMode ? [{ debugName: "settingsDefinitions" }] : /* istanbul ignore next */ []));
+    update = input(...(ngDevMode ? [undefined, { debugName: "update" }] : /* istanbul ignore next */ []));
+    updateSection = input(...(ngDevMode ? [undefined, { debugName: "updateSection" }] : /* istanbul ignore next */ []));
+    itemDefinition = computed(() => {
+        const field = this.field();
+        const section = this.section();
+        if (section) {
+            return this.definitions().find(definition => definition.type === 'section');
+        }
+        return field ? this.definitions().find(definition => definition.type === field.type) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "itemDefinition" }] : /* istanbul ignore next */ []));
+    fieldDefinition = this.itemDefinition;
+    fieldKind = computed(() => this.itemDefinition()?.kind ?? this.field()?.kind ?? 'field', ...(ngDevMode ? [{ debugName: "fieldKind" }] : /* istanbul ignore next */ []));
+    isLayoutField = computed(() => this.fieldKind() === 'layout' || !!this.field()?.children?.length, ...(ngDevMode ? [{ debugName: "isLayoutField" }] : /* istanbul ignore next */ []));
+    customLoaded = signal(false, ...(ngDevMode ? [{ debugName: "customLoaded" }] : /* istanbul ignore next */ []));
+    anchor = viewChild.required('anchor', { read: ViewContainerRef });
+    constructor() {
+        effect(async () => {
+            const field = this.field();
+            const section = this.section();
+            const definitions = this.definitions();
+            const settingDefinitions = this.settingsDefinitions();
+            const viewContainer = this.anchor();
+            const type = section ? 'section' : field?.type;
+            const itemDefinition = type ? definitions.find(definition => definition.type === type) : undefined;
+            const kind = section ? 'layout' : (itemDefinition?.kind ?? field?.kind ?? 'field');
+            const customSettings = itemDefinition?.settings ?? settingDefinitions.find(definition => {
+                if (type && (definition.itemType === type || definition.fieldType === type || definition.type === type)) {
+                    return true;
+                }
+                return !!definition.kind && definition.kind === kind;
+            })?.component;
+            viewContainer.clear();
+            this.customLoaded.set(false);
+            if (!customSettings) {
+                return;
+            }
+            const componentType = await customSettings();
+            const componentRef = viewContainer.createComponent(componentType);
+            componentRef.setInput('item', section ?? field);
+            componentRef.setInput('field', field);
+            componentRef.setInput('section', section);
+            componentRef.setInput('schema', this.schema());
+            componentRef.setInput('definition', itemDefinition);
+            componentRef.setInput('update', section ? this.updateSection() : this.update());
+            componentRef.setInput('updateField', this.update());
+            componentRef.setInput('updateSection', this.updateSection());
+            this.customLoaded.set(true);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderSettingsHost, isStandalone: true, selector: "ngs-form-builder-settings-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, settingsDefinitions: { classPropertyName: "settingsDefinitions", publicName: "settingsDefinitions", isSignal: true, isRequired: false, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: false, transformFunction: null }, updateSection: { classPropertyName: "updateSection", publicName: "updateSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-empty": "!customLoaded()" }, classAttribute: "ngs-form-builder-settings-host" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderSettingsHost"], ngImport: i0, template: "@if (section(); as sectionItem) {\n  <ngs-basic-form-builder-section-settings\n    [section]=\"sectionItem\"\n    [update]=\"updateSection()!\"/>\n} @else if (field(); as fieldItem) {\n  @if (isLayoutField()) {\n    <ngs-basic-form-builder-layout-settings\n      [field]=\"fieldItem\"\n      [update]=\"update()!\"/>\n  } @else {\n    <ngs-basic-form-builder-field-settings\n      [field]=\"fieldItem\"\n      [update]=\"update()!\"/>\n  }\n}\n\n<ng-container #anchor/>\n", dependencies: [{ kind: "component", type: BasicFormBuilderFieldSettings, selector: "ngs-basic-form-builder-field-settings", inputs: ["field", "update"], exportAs: ["ngsBasicFormBuilderFieldSettings"] }, { kind: "component", type: BasicFormBuilderLayoutSettings, selector: "ngs-basic-form-builder-layout-settings", inputs: ["field", "update"], exportAs: ["ngsBasicFormBuilderLayoutSettings"] }, { kind: "component", type: BasicFormBuilderSectionSettings, selector: "ngs-basic-form-builder-section-settings", inputs: ["section", "update"], exportAs: ["ngsBasicFormBuilderSectionSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-builder-settings-host', exportAs: 'ngsFormBuilderSettingsHost', imports: [
+                        BasicFormBuilderFieldSettings,
+                        BasicFormBuilderLayoutSettings,
+                        BasicFormBuilderSectionSettings
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-form-builder-settings-host',
+                        '[class.is-empty]': '!customLoaded()'
+                    }, template: "@if (section(); as sectionItem) {\n  <ngs-basic-form-builder-section-settings\n    [section]=\"sectionItem\"\n    [update]=\"updateSection()!\"/>\n} @else if (field(); as fieldItem) {\n  @if (isLayoutField()) {\n    <ngs-basic-form-builder-layout-settings\n      [field]=\"fieldItem\"\n      [update]=\"update()!\"/>\n  } @else {\n    <ngs-basic-form-builder-field-settings\n      [field]=\"fieldItem\"\n      [update]=\"update()!\"/>\n  }\n}\n\n<ng-container #anchor/>\n" }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], settingsDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingsDefinitions", required: false }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: false }] }], updateSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateSection", required: false }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
 const ROOT_DROP_LIST_ID = 'ngs-form-builder-root-fields';
 const PALETTE_DRAG_TYPE = 'application/x-ngstarter-form-builder-field';
 const PALETTE_DRAG_ITEM = 'application/x-ngstarter-form-builder-item';
+const ACTUAL_FIELDS_TAB_INDEX = 1;
 class FormBuilder {
     dialog = inject(Dialog);
     confirmManager = inject(ConfirmManager);
     elementRef = inject(ElementRef);
+    providedItems = inject(FORM_BUILDER_ITEMS, { optional: true }) ?? [];
     providedFields = inject(FORM_BUILDER_FIELDS, { optional: true }) ?? [];
     providedSettings = inject(FORM_BUILDER_SETTINGS, { optional: true }) ?? [];
     previewControls = new Map();
+    fieldTreeNodeCache = new Map();
+    canvasAnimationTimers = new WeakMap();
     actualFieldsTree = viewChild('actualFieldsTree', ...(ngDevMode ? [{ debugName: "actualFieldsTree" }] : /* istanbul ignore next */ []));
+    fieldTreeRootNodes = [];
+    fieldTreeStructureKey = '';
     suppressPaletteClick = false;
     schema = model(createDefaultFormBuilderSchema(), ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
     paletteTitle = input('Fields', ...(ngDevMode ? [{ debugName: "paletteTitle" }] : /* istanbul ignore next */ []));
@@ -510,6 +860,7 @@ class FormBuilder {
     fieldAdded = output();
     fieldRemoved = output();
     search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    fieldsTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "fieldsTabIndex" }] : /* istanbul ignore next */ []));
     selectedFieldId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFieldId" }] : /* istanbul ignore next */ []));
     nativeDragItem = signal(null, ...(ngDevMode ? [{ debugName: "nativeDragItem" }] : /* istanbul ignore next */ []));
     nativeDragFieldDefinition = computed(() => {
@@ -518,19 +869,35 @@ class FormBuilder {
     }, ...(ngDevMode ? [{ debugName: "nativeDragFieldDefinition" }] : /* istanbul ignore next */ []));
     nativeDragSection = computed(() => this.nativeDragItem()?.kind === 'section', ...(ngDevMode ? [{ debugName: "nativeDragSection" }] : /* istanbul ignore next */ []));
     nativeDropTarget = signal(null, ...(ngDevMode ? [{ debugName: "nativeDropTarget" }] : /* istanbul ignore next */ []));
-    dragCollapsedSectionIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "dragCollapsedSectionIds" }] : /* istanbul ignore next */ []));
     expandedFieldTreeNodeIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedFieldTreeNodeIds" }] : /* istanbul ignore next */ []));
     definitions = computed(() => [
-        ...DEFAULT_FORM_BUILDER_FIELDS,
-        ...this.providedFields
-    ], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+        ...DEFAULT_FORM_BUILDER_ITEMS,
+        ...this.providedFields,
+        ...this.providedItems
+    ].reduce((definitions, definition) => {
+        const normalized = normalizeFieldDefinition(definition);
+        const index = definitions.findIndex(item => item.type === normalized.type);
+        if (index === -1) {
+            definitions.push(normalized);
+        }
+        else {
+            definitions[index] = {
+                ...definitions[index],
+                ...normalized,
+                defaults: {
+                    ...definitions[index].defaults,
+                    ...normalized.defaults
+                }
+            };
+        }
+        return definitions;
+    }, []), ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
     settingsDefinitions = computed(() => this.providedSettings, ...(ngDevMode ? [{ debugName: "settingsDefinitions" }] : /* istanbul ignore next */ []));
-    fieldContainerDropListIds = computed(() => this.collectFieldContainerDropListIds(this.schema()), ...(ngDevMode ? [{ debugName: "fieldContainerDropListIds" }] : /* istanbul ignore next */ []));
     canvasItems = computed(() => this.resolveCanvasItems(this.schema()), ...(ngDevMode ? [{ debugName: "canvasItems" }] : /* istanbul ignore next */ []));
     layoutDefinitions = computed(() => {
         const query = this.search().trim().toLowerCase();
         return this.definitions().filter(definition => {
-            if ((definition.group || 'Other') !== 'Layout') {
+            if (definition.type === 'section' || (definition.group || 'Other') !== 'Layout') {
                 return false;
             }
             return this.matchesPaletteQuery(definition, query);
@@ -554,23 +921,22 @@ class FormBuilder {
     }, ...(ngDevMode ? [{ debugName: "selectedField" }] : /* istanbul ignore next */ []));
     selectedSection = computed(() => {
         const selectedId = this.selectedFieldId();
-        return selectedId ? this.findFieldLocation(this.schema(), selectedId)?.section ?? null : null;
+        return selectedId ? this.schema().sections.find(section => section.id === selectedId) ?? null : null;
     }, ...(ngDevMode ? [{ debugName: "selectedSection" }] : /* istanbul ignore next */ []));
     fieldTree = computed(() => {
-        return this.resolveCanvasItems(this.schema()).map(item => {
-            if (item.field) {
-                return this.createFieldTreeNode(item.field);
-            }
-            return {
-                id: item.section.id,
-                label: item.section.title,
-                type: 'section',
-                icon: 'fluent:folder-24-regular',
-                kind: 'section',
-                section: item.section,
-                children: item.section.fields.map(field => this.createFieldTreeNode(field, item.section))
-            };
+        const nodes = this.resolveCanvasItems(this.schema()).map(item => {
+            return item.field
+                ? this.upsertFieldTreeNode(item.field)
+                : this.upsertSectionTreeNode(item.section);
         });
+        const structureKey = this.resolveFieldTreeStructureKey(nodes);
+        if (structureKey !== this.fieldTreeStructureKey) {
+            this.fieldTreeStructureKey = structureKey;
+            this.fieldTreeRootNodes = nodes;
+            return this.fieldTreeRootNodes;
+        }
+        replaceArrayContents(this.fieldTreeRootNodes, nodes);
+        return this.fieldTreeRootNodes;
     }, ...(ngDevMode ? [{ debugName: "fieldTree" }] : /* istanbul ignore next */ []));
     fieldTreeChildrenAccessor = (node) => node.children ?? [];
     hasFieldTreeChildren = (_, node) => !!node.children?.length;
@@ -580,9 +946,11 @@ class FormBuilder {
     updateSelectedField = (changes) => {
         this.patchSelectedField(changes);
     };
-    fieldDropListEnterPredicate = (drag) => {
-        const data = drag.data;
-        return !(isFormBuilderLayoutItem(data) && data.kind === 'section');
+    updateSelectedSection = (changes) => {
+        const section = this.selectedSection();
+        if (section) {
+            this.updateSection(section, changes);
+        }
     };
     paletteDragStarted(event, definition) {
         this.suppressPaletteClick = true;
@@ -605,7 +973,7 @@ class FormBuilder {
     }
     paletteDragEnded() {
         this.nativeDragItem.set(null);
-        this.nativeDropTarget.set(null);
+        this.setNativeDropTarget(null);
         window.setTimeout(() => {
             this.suppressPaletteClick = false;
         });
@@ -675,7 +1043,7 @@ class FormBuilder {
             return;
         }
         if (this.nativeDropTarget()?.containerId === containerId) {
-            this.nativeDropTarget.set(null);
+            this.setNativeDropTarget(null);
         }
     }
     nativeFieldDrop(event, containerId) {
@@ -697,7 +1065,7 @@ class FormBuilder {
             this.insertNativeField(item.definition, containerId, index);
         }
         this.nativeDragItem.set(null);
-        this.nativeDropTarget.set(null);
+        this.setNativeDropTarget(null);
     }
     isNativeDropTarget(containerId, index) {
         const target = this.nativeDropTarget();
@@ -752,7 +1120,8 @@ class FormBuilder {
             schema.sections.push(nextSection);
             schema.layout = this.normalizedLayout(schema);
         }
-        if (section.fields.some(field => field.id === this.selectedFieldId() || containsField(field, this.selectedFieldId()))) {
+        if (this.selectedFieldId() === section.id ||
+            section.fields.some(field => field.id === this.selectedFieldId() || containsField(field, this.selectedFieldId()))) {
             this.selectedFieldId.set(null);
         }
         this.schema.set(schema);
@@ -765,134 +1134,28 @@ class FormBuilder {
         }
         Object.assign(nextSection, changes);
         this.schema.set(schema);
-    }
-    sectionDragStarted(section) {
-        if (section.collapsed) {
-            return;
-        }
-        this.dragCollapsedSectionIds.update(ids => new Set(ids).add(section.id));
-    }
-    sectionDragEnded(section) {
-        if (!this.dragCollapsedSectionIds().has(section.id)) {
-            return;
-        }
-        this.dragCollapsedSectionIds.update(ids => {
-            const next = new Set(ids);
-            next.delete(section.id);
-            return next;
-        });
+        this.restoreFieldTreeExpansion();
     }
     isSectionCollapsed(section) {
-        return section.collapsed === true || this.dragCollapsedSectionIds().has(section.id);
-    }
-    dropField(event) {
-        const schema = cloneSchema(this.schema());
-        const targetContainer = this.findContainerLocation(schema, event.container.id);
-        if (!targetContainer) {
-            return;
-        }
-        if (event.previousContainer.id === 'ngs-form-builder-palette') {
-            const definition = event.item.data;
-            const field = this.createField(definition, schema);
-            targetContainer.fields.splice(event.currentIndex, 0, field);
-            this.schema.set(schema);
-            this.selectField(field, targetContainer.section);
-            this.fieldAdded.emit({ field, section: targetContainer.section });
-            return;
-        }
-        if (event.previousContainer.id === ROOT_DROP_LIST_ID) {
-            const layout = this.normalizedLayout(schema);
-            const movingItem = this.resolveCanvasDragItem(event.item.data, layout);
-            if (!movingItem || movingItem.kind !== 'field') {
-                return;
-            }
-            const sourceIndex = (schema.fields ?? []).findIndex(field => field.id === movingItem.id);
-            const movingField = (schema.fields ?? [])[sourceIndex];
-            const layoutIndex = layout.findIndex(item => item.kind === 'field' && item.id === movingItem.id);
-            if (!movingField) {
-                return;
-            }
-            if (targetContainer.owner &&
-                (targetContainer.owner.id === movingField.id || containsField(movingField, targetContainer.owner.id))) {
-                return;
-            }
-            schema.fields?.splice(sourceIndex, 1);
-            if (layoutIndex > -1) {
-                layout.splice(layoutIndex, 1);
-            }
-            targetContainer.fields.splice(event.currentIndex, 0, movingField);
-            schema.layout = layout;
-            this.schema.set(schema);
-            return;
-        }
-        const sourceContainer = this.findContainerLocation(schema, event.previousContainer.id);
-        if (!sourceContainer) {
-            return;
-        }
-        const movingField = sourceContainer.fields[event.previousIndex];
-        if (movingField &&
-            targetContainer.owner &&
-            (targetContainer.owner.id === movingField.id || containsField(movingField, targetContainer.owner.id))) {
-            return;
-        }
-        if (sourceContainer.id === targetContainer.id) {
-            moveItemInArray(targetContainer.fields, event.previousIndex, event.currentIndex);
-        }
-        else {
-            transferArrayItem(sourceContainer.fields, targetContainer.fields, event.previousIndex, event.currentIndex);
-        }
-        this.schema.set(schema);
-    }
-    dropCanvasItem(event) {
-        const schema = cloneSchema(this.schema());
-        const layout = this.normalizedLayout(schema);
-        if (event.previousContainer.id === 'ngs-form-builder-palette') {
-            const definition = event.item.data;
-            const field = this.createField(definition, schema);
-            schema.fields ??= [];
-            schema.fields.push(field);
-            layout.splice(event.currentIndex, 0, { kind: 'field', id: field.id });
-            schema.layout = layout;
-            this.schema.set(schema);
-            this.selectField(field);
-            this.fieldAdded.emit({ field });
-            return;
-        }
-        if (event.previousContainer.id === ROOT_DROP_LIST_ID) {
-            const movingItem = this.resolveCanvasDragItem(event.item.data, layout);
-            const previousIndex = movingItem
-                ? layout.findIndex(item => item.kind === movingItem.kind && item.id === movingItem.id)
-                : event.previousIndex;
-            if (previousIndex < 0) {
-                return;
-            }
-            moveItemInArray(layout, previousIndex, event.currentIndex);
-            schema.layout = layout;
-            this.schema.set(schema);
-            this.clearSectionDragCollapse();
-            return;
-        }
-        const sourceContainer = this.findContainerLocation(schema, event.previousContainer.id);
-        if (!sourceContainer) {
-            return;
-        }
-        const movingField = sourceContainer.fields[event.previousIndex];
-        if (!movingField) {
-            return;
-        }
-        sourceContainer.fields.splice(event.previousIndex, 1);
-        schema.fields ??= [];
-        schema.fields.push(movingField);
-        layout.splice(event.currentIndex, 0, { kind: 'field', id: movingField.id });
-        schema.layout = layout;
-        this.schema.set(schema);
-        this.clearSectionDragCollapse();
+        return section.collapsed === true;
     }
-    selectField(field, section = this.selectedSection()) {
+    selectField(field, section) {
         this.selectedFieldId.set(field.id);
         this.fieldSelected.emit({ field, section: section ?? undefined });
     }
+    selectSection(section) {
+        this.selectedFieldId.set(section.id);
+    }
+    selectCanvasField(field, section) {
+        this.selectField(field, section);
+        this.openActualFieldsTreeForField(field.id);
+    }
     selectFieldTreeNode(node) {
+        if (node.section && !node.field) {
+            this.selectSection(node.section);
+            this.scrollCanvasSectionIntoView(node.section.id);
+            return;
+        }
         if (node.field) {
             if (node.section?.collapsed) {
                 this.updateSection(node.section, { collapsed: false });
@@ -1013,7 +1276,7 @@ class FormBuilder {
             return existing;
         }
         const control = new FormControl({
-            value: field.defaultValue ?? null,
+            value: this.fieldInitialValue(field),
             disabled: true
         });
         this.previewControls.set(field.id, control);
@@ -1033,14 +1296,20 @@ class FormBuilder {
             ...location.field,
             ...changes
         };
-        if (changes.type === 'grid' && !nextField.children) {
+        if (this.isContainerField(nextField) && !nextField.children) {
             nextField.children = [];
         }
         location.siblings[location.index] = nextField;
         this.schema.set(schema);
+        this.syncPreviewControl(nextField);
     }
     isContainerField(field) {
-        return field.type === 'grid';
+        const definition = this.definitions().find(item => item.type === field.type);
+        return definition?.acceptsChildren === true ||
+            definition?.kind === 'layout' ||
+            field.kind === 'layout' ||
+            field.type === 'group' ||
+            field.type === 'grid';
     }
     fieldIcon(field) {
         return this.definitions().find(definition => definition.type === field.type)?.icon || 'fluent:form-24-regular';
@@ -1063,7 +1332,7 @@ class FormBuilder {
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect = 'copy';
         }
-        this.nativeDropTarget.set({
+        this.setNativeDropTarget({
             containerId,
             index: this.resolveNativeDropIndex(event, itemSelector)
         });
@@ -1077,7 +1346,68 @@ class FormBuilder {
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect = 'copy';
         }
-        this.nativeDropTarget.set({ containerId, index });
+        this.setNativeDropTarget({ containerId, index });
+    }
+    setNativeDropTarget(target) {
+        const current = this.nativeDropTarget();
+        if (current?.containerId === target?.containerId && current?.index === target?.index) {
+            return;
+        }
+        const previousRects = this.captureCanvasItemRects();
+        this.nativeDropTarget.set(target);
+        this.afterNextPaint(() => this.animateCanvasItemMoves(previousRects));
+    }
+    captureCanvasItemRects() {
+        const rects = new Map();
+        for (const element of this.getCanvasAnimatedItems()) {
+            const key = this.getCanvasAnimatedItemKey(element);
+            if (key) {
+                rects.set(key, element.getBoundingClientRect());
+            }
+        }
+        return rects;
+    }
+    animateCanvasItemMoves(previousRects) {
+        if (!previousRects.size) {
+            return;
+        }
+        for (const element of this.getCanvasAnimatedItems()) {
+            const key = this.getCanvasAnimatedItemKey(element);
+            const previousRect = key ? previousRects.get(key) : undefined;
+            if (!previousRect) {
+                continue;
+            }
+            const nextRect = element.getBoundingClientRect();
+            const deltaX = previousRect.left - nextRect.left;
+            const deltaY = previousRect.top - nextRect.top;
+            if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) {
+                continue;
+            }
+            const animationTimer = this.canvasAnimationTimers.get(element);
+            if (animationTimer) {
+                window.clearTimeout(animationTimer);
+            }
+            element.style.transition = 'none';
+            element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+            element.getBoundingClientRect();
+            element.style.transition = 'transform 160ms cubic-bezier(0, 0, 0.2, 1)';
+            element.style.transform = '';
+            this.canvasAnimationTimers.set(element, window.setTimeout(() => {
+                element.style.transition = '';
+                element.style.transform = '';
+            }, 180));
+        }
+    }
+    getCanvasAnimatedItems() {
+        return Array.from(this.elementRef.nativeElement.querySelectorAll('.ngs-form-builder-canvas [data-form-builder-field-id], .ngs-form-builder-canvas [data-form-builder-section-id]'));
+    }
+    getCanvasAnimatedItemKey(element) {
+        const fieldId = element.dataset['formBuilderFieldId'];
+        if (fieldId) {
+            return `field:${fieldId}`;
+        }
+        const sectionId = element.dataset['formBuilderSectionId'];
+        return sectionId ? `section:${sectionId}` : null;
     }
     insertNativeField(definition, containerId, index) {
         const schema = cloneSchema(this.schema());
@@ -1164,10 +1494,12 @@ class FormBuilder {
     createField(definition, schema) {
         const baseLabel = definition.defaults?.label || definition.label;
         const name = uniqueFieldName(toFieldName(baseLabel), schema);
-        return {
+        const kind = definition.defaults?.kind ?? definition.kind ?? 'field';
+        const field = {
             id: uniqueId('field'),
             name,
             type: definition.type,
+            kind,
             label: baseLabel,
             width: definition.defaults?.width ?? this.defaultWidth(definition.type),
             visibility: {
@@ -1177,6 +1509,10 @@ class FormBuilder {
             },
             ...definition.defaults
         };
+        if (field.defaultValue === undefined) {
+            field.defaultValue = this.fieldInitialValue(field);
+        }
+        return field;
     }
     defaultWidth(type) {
         return 12;
@@ -1231,30 +1567,6 @@ class FormBuilder {
         }
         return layout;
     }
-    collectFieldContainerDropListIds(schema) {
-        return [
-            ...(schema.fields ?? []).flatMap(field => this.collectFieldDropListIds(field)),
-            ...schema.sections.flatMap(section => [
-                this.sectionDropListId(section),
-                ...section.fields.flatMap(field => this.collectFieldDropListIds(field))
-            ])
-        ];
-    }
-    collectFieldDropListIds(field) {
-        return [
-            ...(this.isContainerField(field) ? [this.fieldDropListId(field)] : []),
-            ...(field.children ?? []).flatMap(child => this.collectFieldDropListIds(child))
-        ];
-    }
-    resolveCanvasDragItem(data, layout) {
-        if (isFormBuilderLayoutItem(data)) {
-            return data;
-        }
-        if (isFormBuilderField(data)) {
-            return layout.find(item => item.kind === 'field' && item.id === data.id) ?? null;
-        }
-        return null;
-    }
     detachFieldFromLocation(schema, location) {
         location.siblings.splice(location.index, 1);
         if (location.siblings === (schema.fields ?? [])) {
@@ -1330,11 +1642,6 @@ class FormBuilder {
         });
         schema.layout = layout;
     }
-    clearSectionDragCollapse() {
-        if (this.dragCollapsedSectionIds().size) {
-            this.dragCollapsedSectionIds.set(new Set());
-        }
-    }
     resetFieldTreeAfterRejectedDrop() {
         this.schema.set(cloneSchema(this.schema()));
         this.restoreFieldTreeExpansion();
@@ -1400,10 +1707,80 @@ class FormBuilder {
     flattenFieldTree(nodes) {
         return nodes.flatMap(node => [node, ...this.flattenFieldTree(node.children ?? [])]);
     }
+    openActualFieldsTreeForField(fieldId) {
+        const path = this.findFieldTreeNodePath(this.fieldTree(), fieldId);
+        this.fieldsTabIndex.set(ACTUAL_FIELDS_TAB_INDEX);
+        if (!path.length) {
+            return;
+        }
+        const expandableIds = path
+            .slice(0, -1)
+            .filter(node => !!node.children?.length)
+            .map(node => node.id);
+        if (expandableIds.length) {
+            this.expandedFieldTreeNodeIds.update(ids => {
+                const next = new Set(ids);
+                for (const id of expandableIds) {
+                    next.add(id);
+                }
+                return next;
+            });
+        }
+        this.afterNextPaint(() => {
+            this.afterNextPaint(() => {
+                const tree = this.actualFieldsTree();
+                if (tree) {
+                    for (const node of path.slice(0, -1)) {
+                        if (node.children?.length) {
+                            tree.expand(node);
+                        }
+                    }
+                }
+                this.scrollFieldTreeNodeIntoView(fieldId);
+            });
+        });
+    }
+    findFieldTreeNodePath(nodes, fieldId, path = []) {
+        for (const node of nodes) {
+            const nextPath = [...path, node];
+            if (node.id === fieldId) {
+                return nextPath;
+            }
+            const childPath = this.findFieldTreeNodePath(node.children ?? [], fieldId, nextPath);
+            if (childPath.length) {
+                return childPath;
+            }
+        }
+        return [];
+    }
+    scrollFieldTreeNodeIntoView(fieldId) {
+        const target = this.findFieldTreeNodeElement(fieldId);
+        if (!target) {
+            return;
+        }
+        const scrollableContent = target
+            .closest('ngs-scrollbar-area')
+            ?.querySelector('.scrollable-content');
+        if (!scrollableContent) {
+            target.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+            return;
+        }
+        this.scrollElementFullyIntoView(target, scrollableContent);
+    }
+    findFieldTreeNodeElement(fieldId) {
+        const nodes = this.elementRef.nativeElement.querySelectorAll('.ngs-form-builder-palette [data-form-builder-tree-node-id]');
+        return Array.from(nodes).find(node => node.dataset['formBuilderTreeNodeId'] === fieldId) ?? null;
+    }
     scrollCanvasFieldIntoView(fieldId) {
+        this.scrollCanvasItemIntoView(() => this.findCanvasFieldElement(fieldId));
+    }
+    scrollCanvasSectionIntoView(sectionId) {
+        this.scrollCanvasItemIntoView(() => this.findCanvasSectionElement(sectionId));
+    }
+    scrollCanvasItemIntoView(resolveTarget) {
         this.afterNextPaint(() => {
             this.afterNextPaint(() => {
-                const target = this.findCanvasFieldElement(fieldId);
+                const target = resolveTarget();
                 if (!target) {
                     return;
                 }
@@ -1422,6 +1799,37 @@ class FormBuilder {
         const fields = this.elementRef.nativeElement.querySelectorAll('.ngs-form-builder-canvas [data-form-builder-field-id]');
         return Array.from(fields).find(field => field.dataset['formBuilderFieldId'] === fieldId) ?? null;
     }
+    findCanvasSectionElement(sectionId) {
+        const sections = this.elementRef.nativeElement.querySelectorAll('.ngs-form-builder-canvas [data-form-builder-section-id]');
+        return Array.from(sections).find(section => section.dataset['formBuilderSectionId'] === sectionId) ?? null;
+    }
+    syncPreviewControl(field) {
+        const control = this.previewControls.get(field.id);
+        if (!control) {
+            return;
+        }
+        queueMicrotask(() => {
+            const value = this.fieldInitialValue(field);
+            if (control.value !== value) {
+                control.setValue(value, { emitEvent: false });
+            }
+            if (control.enabled) {
+                control.disable({ emitEvent: false });
+            }
+        });
+    }
+    fieldInitialValue(field) {
+        if (field.defaultValue !== undefined) {
+            return field.defaultValue;
+        }
+        const selectedValues = (field.options ?? [])
+            .filter(option => option.selected)
+            .map(option => option.value);
+        if (field.type === 'checkbox-list' || field.multiple) {
+            return selectedValues;
+        }
+        return selectedValues[0] ?? null;
+    }
     scrollElementFullyIntoView(target, scrollableContent) {
         const padding = 16;
         const containerRect = scrollableContent.getBoundingClientRect();
@@ -1455,19 +1863,59 @@ class FormBuilder {
         }
         window.setTimeout(callback);
     }
-    createFieldTreeNode(field, section) {
+    upsertSectionTreeNode(section) {
+        const node = this.getCachedFieldTreeNode(section.id);
+        const children = section.fields.map(field => this.upsertFieldTreeNode(field, section));
+        node.label = section.title;
+        node.name = undefined;
+        node.type = 'section';
+        node.icon = 'fluent:folder-24-regular';
+        node.kind = 'section';
+        node.field = undefined;
+        node.section = section;
+        node.children ??= [];
+        replaceArrayContents(node.children, children);
+        return node;
+    }
+    upsertFieldTreeNode(field, section) {
         const definition = this.definitions().find(item => item.type === field.type);
-        return {
-            id: field.id,
-            label: field.label,
-            name: field.name,
-            type: field.type,
-            icon: definition?.icon || 'fluent:form-24-regular',
-            kind: 'field',
-            field,
-            section,
-            children: field.children?.map(child => this.createFieldTreeNode(child, section))
+        const node = this.getCachedFieldTreeNode(field.id);
+        const children = field.children?.map(child => this.upsertFieldTreeNode(child, section));
+        node.label = field.label;
+        node.name = field.name;
+        node.type = field.type;
+        node.icon = definition?.icon || 'fluent:form-24-regular';
+        node.kind = 'field';
+        node.field = field;
+        node.section = section;
+        if (children?.length) {
+            node.children ??= [];
+            replaceArrayContents(node.children, children);
+        }
+        else {
+            node.children = undefined;
+        }
+        return node;
+    }
+    getCachedFieldTreeNode(id) {
+        const cached = this.fieldTreeNodeCache.get(id);
+        if (cached) {
+            return cached;
+        }
+        const node = {
+            id,
+            label: '',
+            type: '',
+            icon: 'fluent:form-24-regular',
+            kind: 'field'
         };
+        this.fieldTreeNodeCache.set(id, node);
+        return node;
+    }
+    resolveFieldTreeStructureKey(nodes) {
+        return nodes
+            .map(node => `${node.kind}:${node.id}[${this.resolveFieldTreeStructureKey(node.children ?? [])}]`)
+            .join('|');
     }
     findContainerLocation(schema, containerId) {
         if (containerId === ROOT_DROP_LIST_ID) {
@@ -1533,19 +1981,13 @@ class FormBuilder {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilder, isStandalone: true, selector: "ngs-form-builder", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, paletteTitle: { classPropertyName: "paletteTitle", publicName: "paletteTitle", isSignal: true, isRequired: false, transformFunction: null }, inspectorTitle: { classPropertyName: "inspectorTitle", publicName: "inspectorTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schema: "schemaChange", fieldSelected: "fieldSelected", fieldAdded: "fieldAdded", fieldRemoved: "fieldRemoved" }, host: { classAttribute: "ngs-form-builder" }, viewQueries: [{ propertyName: "actualFieldsTree", first: true, predicate: ["actualFieldsTree"], descendants: true, isSignal: true }], exportAs: ["ngsFormBuilder"], ngImport: i0, template: "<ng-template #fieldCard let-field let-section=\"section\" let-dragData=\"dragData\">\n  <div\n    class=\"ngs-form-builder-field\"\n    cdkDrag\n    [cdkDragData]=\"dragData || field\"\n    [class.is-width-1]=\"(field.width ?? 12) === 1\"\n    [class.is-width-2]=\"field.width === 2\"\n    [class.is-width-3]=\"field.width === 3\"\n    [class.is-width-4]=\"field.width === 4\"\n    [class.is-width-5]=\"field.width === 5\"\n    [class.is-width-6]=\"field.width === 6\"\n    [class.is-width-7]=\"field.width === 7\"\n    [class.is-width-8]=\"field.width === 8\"\n    [class.is-width-9]=\"field.width === 9\"\n    [class.is-width-10]=\"field.width === 10\"\n    [class.is-width-11]=\"field.width === 11\"\n    [class.is-width-12]=\"(field.width ?? 12) === 12\"\n    [class.is-container]=\"isContainerField(field)\"\n    [class.is-selected]=\"selectedFieldId() === field.id\"\n    [attr.data-form-builder-field-id]=\"field.id\"\n    (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n    (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n    (drop)=\"nativeContainerFieldDrop($event, field)\"\n    (click)=\"$event.stopPropagation(); selectField(field, section)\">\n    <div class=\"ngs-form-builder-field-header\">\n      <div class=\"ngs-form-builder-field-label\">\n        <ngs-icon [name]=\"fieldIcon(field)\"/>\n        <span>{{ field.label }}</span>\n      </div>\n\n      <button ngsIconButton type=\"button\" class=\"ngs-form-builder-field-handle\" cdkDragHandle aria-label=\"Move field\">\n        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n      </button>\n    </div>\n\n    @if (isContainerField(field)) {\n      <div class=\"ngs-form-builder-grid-field\">\n        <ng-container\n          [ngTemplateOutlet]=\"fieldList\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: field.children ?? [],\n            containerId: fieldDropListId(field),\n            section\n          }\"/>\n      </div>\n    } @else {\n      <ngs-form-builder-field-host\n        [field]=\"field\"\n        [control]=\"previewControl(field)\"\n        [definitions]=\"definitions()\"\n        [readonly]=\"true\"\n        [editableCanvas]=\"true\"/>\n    }\n\n    <ng-template cdkDragPlaceholder>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-line-placeholder\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n      </div>\n    </ng-template>\n\n    <ng-template cdkDragPreview>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-drag-preview\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n        <div class=\"ngs-form-builder-field-header\">\n          <div class=\"ngs-form-builder-field-label\">\n            <ngs-icon [name]=\"fieldIcon(field)\"/>\n            <span>{{ field.label }}</span>\n          </div>\n          <span class=\"ngs-form-builder-drag-icon\">\n            <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n          </span>\n        </div>\n        <div class=\"ngs-form-builder-ghost-control\"></div>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    cdkDropList\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    [cdkDropListData]=\"fields\"\n    cdkDropListOrientation=\"mixed\"\n    [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n    [cdkDropListEnterPredicate]=\"fieldDropListEnterPredicate\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\"\n    (cdkDropListDropped)=\"dropField($event)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"fieldCard\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: field,\n          section\n        }\"/>\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\" cdkDropListGroup>\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-b-subtle px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-e-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <h3 class=\"text-base font-semibold\">{{ paletteTitle() }}</h3>\n\n        <ngs-tab-group animationDuration=\"0ms\" ngs-stretch-tabs=\"false\">\n          <ngs-tab label=\"Placeholders\">\n            <div class=\"flex flex-col gap-4 pt-4\">\n              <ngs-form-field>\n                <ngs-label>Search placeholder</ngs-label>\n                <input ngsInput\n                       [ngModel]=\"search()\"\n                       [ngModelOptions]=\"{standalone: true}\"\n                       (ngModelChange)=\"search.set($event)\">\n              </ngs-form-field>\n\n              <div class=\"flex flex-col gap-5\">\n                <section class=\"flex flex-col gap-2\">\n                  <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n                  <button\n                    type=\"button\"\n                    class=\"ngs-form-builder-palette-item\"\n                    draggable=\"true\"\n                    (dragstart)=\"sectionPaletteDragStarted($event)\"\n                    (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n                  </button>\n\n                  @for (definition of layoutDefinitions(); track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                    </button>\n                  }\n                </section>\n\n                @for (group of paletteGroups(); track group.name) {\n                  <section class=\"flex flex-col gap-2\">\n                    <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                    <div class=\"flex flex-col gap-2\">\n                      @for (definition of group.fields; track definition.type) {\n                        <button\n                          type=\"button\"\n                          class=\"ngs-form-builder-palette-item\"\n                          draggable=\"true\"\n                          (dragstart)=\"paletteDragStarted($event, definition)\"\n                          (dragend)=\"paletteDragEnded()\"\n                          (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                        </button>\n                      }\n                    </div>\n                  </section>\n                }\n              </div>\n            </div>\n          </ngs-tab>\n\n          <ngs-tab label=\"Actual fields\">\n            <div class=\"pt-4\">\n              <ngs-tree\n                #actualFieldsTree=\"ngsTree\"\n                [dataSource]=\"fieldTree()\"\n                [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n                [trackBy]=\"trackFieldTreeNode\"\n                [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n                [dropPredicate]=\"fieldTreeDropPredicate\"\n                [reorderOnDrop]=\"false\"\n                (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n                draggable>\n                <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                  <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                    <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                    <span>{{ source.label }}</span>\n                  </div>\n                </ng-template>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                               ngsTreeNodePadding\n                               [value]=\"node.id\"\n                               [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                  <button\n                    ngsIconButton\n                    class=\"ngs-form-builder-tree-toggle\"\n                    [attr.aria-label]=\"'Toggle ' + node.label\"\n                    (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                    <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                  </button>\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n              </ngs-tree>\n            </div>\n          </ngs-tab>\n        </ngs-tab-group>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          cdkDropList\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          [cdkDropListData]=\"canvasItems()\"\n          [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\"\n          (cdkDropListDropped)=\"dropCanvasItem($event)\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              <ng-container\n                [ngTemplateOutlet]=\"fieldCard\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: field,\n                  dragData: item\n                }\"/>\n            } @else if (item.section; as section) {\n            <ngs-card class=\"ngs-form-builder-section\"\n                      cdkDrag\n                      cdkDragLockAxis=\"y\"\n                      [cdkDragData]=\"item\"\n                      (cdkDragStarted)=\"sectionDragStarted(section)\"\n                      (cdkDragEnded)=\"sectionDragEnded(section)\"\n                      (dragover)=\"nativeSectionDragOver($event, section)\"\n                      (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                      (drop)=\"nativeSectionDrop($event, section)\">\n              <ngs-card-header>\n                <div class=\"ngs-form-builder-section-heading\">\n                  <button ngsIconButton type=\"button\" class=\"ngs-form-builder-section-handle\" cdkDragHandle aria-label=\"Move section\">\n                    <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                  </button>\n                  <input ngsInput\n                         class=\"ngs-form-builder-section-title\"\n                         [ngModel]=\"section.title\"\n                         [ngModelOptions]=\"{standalone: true}\"\n                         (ngModelChange)=\"updateSection(section, { title: $event })\"\n                         aria-label=\"Section title\">\n                </div>\n                @if (section.description) {\n                  <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                }\n\n                <ngs-card-aside>\n                  <div class=\"ngs-form-builder-section-actions\">\n                    <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                      <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                    </button>\n                    <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                      <ngs-icon name=\"fluent:delete-24-regular\"/>\n                    </button>\n                  </div>\n                </ngs-card-aside>\n              </ngs-card-header>\n\n              @if (!isSectionCollapsed(section)) {\n                <ngs-card-content>\n                  <ng-container\n                    [ngTemplateOutlet]=\"fieldList\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: section.fields,\n                      containerId: sectionDropListId(section),\n                      section\n                    }\"/>\n                </ngs-card-content>\n              } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                <ngs-card-content>\n                  <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                    <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                  </div>\n                </ngs-card-content>\n              }\n\n              <ng-template cdkDragPlaceholder>\n                <div class=\"ngs-form-builder-section-line-placeholder\"></div>\n              </ng-template>\n\n              <ng-template cdkDragPreview>\n                <ngs-card class=\"ngs-form-builder-section ngs-form-builder-section-drag-preview\">\n                  <ngs-card-header>\n                    <div class=\"ngs-form-builder-section-heading\">\n                      <span class=\"ngs-form-builder-section-handle\">\n                        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                      </span>\n                      <span class=\"ngs-form-builder-section-preview-title\">{{ section.title }}</span>\n                    </div>\n                    <ngs-card-aside>\n                      <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"size-5\"/>\n                    </ngs-card-aside>\n                  </ngs-card-header>\n                </ngs-card>\n              </ng-template>\n            </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-s-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-5\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"min-w-0\">\n            <h3 class=\"text-base font-semibold\">{{ inspectorTitle() }}</h3>\n            @if (selectedField()) {\n              <p class=\"truncate text-sm text-secondary\">{{ selectedField()?.label }}</p>\n            }\n          </div>\n          <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n\n        @if (selectedField(); as field) {\n          <ngs-basic-form-builder-field-settings\n            [field]=\"field\"\n            [update]=\"updateSelectedField\"/>\n\n          <ngs-form-builder-settings-host\n            [field]=\"field\"\n            [schema]=\"schema()\"\n            [definitions]=\"definitions()\"\n            [settingsDefinitions]=\"settingsDefinitions()\"\n            [update]=\"updateSelectedField\"/>\n\n          <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n            <ngs-icon name=\"fluent:delete-24-regular\"/>\n            Delete field\n          </button>\n        } @else {\n          <div class=\"ngs-form-builder-empty-inspector\">\n            Select a field on the canvas or in the fields tree to edit its settings.\n          </div>\n        }\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-builder-renderer\n      [schema]=\"schema()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-primary);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1);--ngs-tree-node-drop-line-color: var(--ngs-color-primary);--ngs-tree-node-drop-target-outline: 0;--ngs-tree-node-drop-target-bg: var(--ngs-color-primary-container)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{--ngs-button-height: calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-drag-preview{width:min(100%,900px);background:var(--ngs-color-surface)}:host .ngs-form-builder-native-ghost-section{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-list{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-handle{flex:none;color:var(--ngs-color-on-surface-variant);cursor:grab}:host .ngs-form-builder-section-handle:active{cursor:grabbing}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-handle{flex:none;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-empty-inspector{display:flex;min-height:calc(var(--spacing, .25rem) * 14);align-items:center;justify-content:center;border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-lg);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-empty-inspector{min-height:calc(var(--spacing, .25rem) * 28);border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .cdk-drag-preview{box-sizing:border-box;border-radius:var(--ngs-radius-lg);box-shadow:var(--ngs-shadow-lg)}:host .ngs-form-builder-field-placeholder{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 92%)}}:host .ngs-form-builder-field-line-placeholder{min-height:calc(var(--spacing, .25rem) * 6);justify-content:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-field-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .ngs-form-builder-field-drag-preview{width:min(360px,100vw - calc(var(--spacing, .25rem) * 8));min-height:calc(var(--spacing, .25rem) * 20);border-color:var(--ngs-color-primary);background:var(--ngs-color-surface);box-shadow:var(--ngs-shadow-lg);opacity:.94;pointer-events:none}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 18);border:1px dashed var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 6);border:0;background:transparent}:host .ngs-form-builder-section-line-placeholder{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-section-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .cdk-drag-placeholder{opacity:0}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder,:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder,:host .ngs-form-builder-canvas-list .ngs-form-builder-section-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-palette .cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-drop-list.cdk-drop-list-dragging .ngs-form-builder-field:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-canvas-list.cdk-drop-list-dragging .ngs-form-builder-section:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Card, selector: "ngs-card", inputs: ["appearance"], exportAs: ["ngsCard"] }, { kind: "component", type: CardAside, selector: "ngs-card-aside, [ngs-card-aside], ngsCardAside" }, { kind: "component", type: CardContent, selector: "ngs-card-content, [ngs-card-content], [ngsCardContent]", inputs: ["withoutPadding"], exportAs: ["ngsCardContent"] }, { kind: "component", type: CardHeader, selector: "ngs-card-header", exportAs: ["ngsCardHeader"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Tree, selector: "ngs-tree", inputs: ["checkable", "selectable", "draggable", "draggablePredicate", "dropPredicate", "reorderOnDrop", "dragPreview", "childrenKey", "filterValue", "filterPredicate", "filterMode"], outputs: ["checkedChange", "selectedChange", "nodeDrop"], exportAs: ["ngsTree"] }, { kind: "directive", type: TreeDragPlaceholder, selector: "ng-template[ngsTreeDragPlaceholder]" }, { kind: "component", type: TreeNode, selector: "ngs-tree-node", inputs: ["tabIndex", "value", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["ngsTreeNode"] }, { kind: "directive", type: TreeNodeDef, selector: "[ngsTreeNodeDef]", inputs: ["ngsTreeNodeDefWhen", "ngsTreeNode"] }, { kind: "directive", type: TreeNodePadding, selector: "[ngsTreeNodePadding]", inputs: ["ngsTreeNodePadding", "ngsTreeNodePaddingIndent"] }, { kind: "component", type: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas"], exportAs: ["ngsFormBuilderFieldHost"] }, { kind: "component", type: FormBuilderRenderer, selector: "ngs-form-builder-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormBuilderRenderer"] }, { kind: "component", type: FormBuilderSettingsHost, selector: "ngs-form-builder-settings-host", inputs: ["field", "schema", "definitions", "settingsDefinitions", "update"], exportAs: ["ngsFormBuilderSettingsHost"] }, { kind: "component", type: BasicFormBuilderFieldSettings, selector: "ngs-basic-form-builder-field-settings", inputs: ["field", "update"], exportAs: ["ngsBasicFormBuilderFieldSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilder, isStandalone: true, selector: "ngs-form-builder", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, paletteTitle: { classPropertyName: "paletteTitle", publicName: "paletteTitle", isSignal: true, isRequired: false, transformFunction: null }, inspectorTitle: { classPropertyName: "inspectorTitle", publicName: "inspectorTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schema: "schemaChange", fieldSelected: "fieldSelected", fieldAdded: "fieldAdded", fieldRemoved: "fieldRemoved" }, host: { classAttribute: "ngs-form-builder" }, viewQueries: [{ propertyName: "actualFieldsTree", first: true, predicate: ["actualFieldsTree"], descendants: true, isSignal: true }], exportAs: ["ngsFormBuilder"], ngImport: i0, template: "<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      @if (isContainerField(field)) {\n        <div\n          class=\"ngs-form-builder-field is-container\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n          (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n          (drop)=\"nativeContainerFieldDrop($event, field)\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <div class=\"ngs-form-builder-grid-field\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldList\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: field.children ?? [],\n                containerId: fieldDropListId(field),\n                section\n              }\"/>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"ngs-form-builder-field\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <ngs-form-builder-field-host\n            [field]=\"field\"\n            [control]=\"previewControl(field)\"\n            [definitions]=\"definitions()\"\n            [readonly]=\"true\"\n            [editableCanvas]=\"true\"/>\n        </div>\n      }\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\">\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-b-subtle px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-e-subtle\">\n    <ngs-tab-group\n      animationDuration=\"0ms\"\n      [selectedIndex]=\"fieldsTabIndex()\"\n      (selectedIndexChange)=\"fieldsTabIndex.set($event)\">\n      <ngs-tab label=\"Fields\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"flex flex-col gap-5 p-4\">\n            <section class=\"flex flex-col gap-2\">\n              <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n              <button\n                type=\"button\"\n                class=\"ngs-form-builder-palette-item\"\n                draggable=\"true\"\n                (dragstart)=\"sectionPaletteDragStarted($event)\"\n                (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n              </button>\n\n              @for (definition of layoutDefinitions(); track definition.type) {\n                <button\n                  type=\"button\"\n                  class=\"ngs-form-builder-palette-item\"\n                  draggable=\"true\"\n                  (dragstart)=\"paletteDragStarted($event, definition)\"\n                  (dragend)=\"paletteDragEnded()\"\n                  (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                </button>\n              }\n            </section>\n\n            @for (group of paletteGroups(); track group.name) {\n              <section class=\"flex flex-col gap-2\">\n                <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                <div class=\"flex flex-col gap-2\">\n                  @for (definition of group.fields; track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n      <ngs-tab label=\"Layers\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"ps-1 pe-4 py-4\">\n            <ngs-tree\n              #actualFieldsTree=\"ngsTree\"\n              [dataSource]=\"fieldTree()\"\n              [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n              [trackBy]=\"trackFieldTreeNode\"\n              [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n              [dropPredicate]=\"fieldTreeDropPredicate\"\n              [nodePaddingIndent]=\"80\"\n              [reorderOnDrop]=\"false\"\n              (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n              draggable>\n              <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                  <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                  <span>{{ source.label }}</span>\n                </div>\n              </ng-template>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    {{ node.label }}\n<!--                  <span class=\"inline-flex flex-col\">-->\n<!--                    -->\n<!--                    @if (node.name) {-->\n<!--                      <small>{{ node.name }}</small>-->\n<!--                    }-->\n<!--                  </span>-->\n                </button>\n              </ngs-tree-node>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                             ngsTreeNodePadding\n                             [value]=\"node.id\"\n                             [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                <button\n                  ngsIconButton\n                  class=\"ngs-form-builder-tree-toggle\"\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                  <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                </button>\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n  <!--                  @if (node.name) {-->\n  <!--                    <small>{{ node.name }}</small>-->\n  <!--                  }-->\n                </button>\n              </ngs-tree-node>\n            </ngs-tree>\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n    </ngs-tab-group>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              @if (isContainerField(field)) {\n                <div\n                  class=\"ngs-form-builder-field is-container\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n                  (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n                  (drop)=\"nativeContainerFieldDrop($event, field)\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"ngs-form-builder-grid-field\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: field.children ?? [],\n                        containerId: fieldDropListId(field)\n                      }\"/>\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"ngs-form-builder-field\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <ngs-form-builder-field-host\n                    [field]=\"field\"\n                    [control]=\"previewControl(field)\"\n                    [definitions]=\"definitions()\"\n                    [readonly]=\"true\"\n                    [editableCanvas]=\"true\"/>\n                </div>\n              }\n            } @else if (item.section; as section) {\n              <ngs-card class=\"ngs-form-builder-section\"\n                        [attr.data-form-builder-section-id]=\"section.id\"\n                        (dragover)=\"nativeSectionDragOver($event, section)\"\n                        (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                        (drop)=\"nativeSectionDrop($event, section)\"\n                        (click)=\"selectSection(section)\">\n                <ngs-card-header>\n                  <div class=\"ngs-form-builder-section-heading\">\n                    <input ngsInput\n                           class=\"ngs-form-builder-section-title\"\n                           [ngModel]=\"section.title\"\n                           [ngModelOptions]=\"{standalone: true}\"\n                           (ngModelChange)=\"updateSection(section, { title: $event })\"\n                           aria-label=\"Section title\">\n                  </div>\n                  @if (section.description) {\n                    <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                  }\n\n                  <ngs-card-aside>\n                    <div class=\"ngs-form-builder-section-actions\">\n                      <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                        <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                      </button>\n                      <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                        <ngs-icon name=\"fluent:delete-24-regular\"/>\n                      </button>\n                    </div>\n                  </ngs-card-aside>\n                </ngs-card-header>\n\n                @if (!isSectionCollapsed(section)) {\n                  <ngs-card-content>\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: section.fields,\n                        containerId: sectionDropListId(section),\n                        section\n                      }\"/>\n                  </ngs-card-content>\n                } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                  <ngs-card-content>\n                    <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                    </div>\n                  </ngs-card-content>\n                }\n              </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-s-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-5\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"min-w-0\">\n            <h3 class=\"text-base font-semibold\">{{ inspectorTitle() }}</h3>\n            @if (selectedField() || selectedSection()) {\n              <p class=\"truncate text-sm text-secondary\">{{ selectedField()?.label || selectedSection()?.title }}</p>\n            }\n          </div>\n          <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n\n        @if (selectedField() || selectedSection()) {\n          <ngs-form-builder-settings-host\n            [field]=\"selectedField()\"\n            [section]=\"selectedSection()\"\n            [schema]=\"schema()\"\n            [definitions]=\"definitions()\"\n            [settingsDefinitions]=\"settingsDefinitions()\"\n            [update]=\"updateSelectedField\"\n            [updateSection]=\"updateSelectedSection\"/>\n\n          @if (selectedField(); as field) {\n            <div class=\"mt-3\">\n              <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n                <ngs-icon name=\"fluent:delete-24-regular\"/>\n                Delete field\n              </button>\n            </div>\n          }\n        } @else {\n          <div class=\"ngs-form-builder-empty-inspector\">\n            Select a field on the canvas or in the fields tree to edit its settings.\n          </div>\n        }\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-builder-renderer\n      [schema]=\"schema()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-on-surface);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);color:var(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-palette-item:hover{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 96%)}}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4);grid-column:span 12}:host .ngs-form-builder-native-ghost-section{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-empty-inspector{display:flex;min-height:calc(var(--spacing, .25rem) * 14);align-items:center;justify-content:center;border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-lg);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-empty-inspector{min-height:calc(var(--spacing, .25rem) * 28);border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .ngs-form-builder-field-placeholder{border-style:dashed;border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 92%)}}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Card, selector: "ngs-card", inputs: ["appearance"], exportAs: ["ngsCard"] }, { kind: "component", type: CardAside, selector: "ngs-card-aside, [ngs-card-aside], ngsCardAside" }, { kind: "component", type: CardContent, selector: "ngs-card-content, [ngs-card-content], [ngsCardContent]", inputs: ["withoutPadding"], exportAs: ["ngsCardContent"] }, { kind: "component", type: CardHeader, selector: "ngs-card-header", exportAs: ["ngsCardHeader"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Tree, selector: "ngs-tree", inputs: ["checkable", "selectable", "draggable", "draggablePredicate", "dropPredicate", "reorderOnDrop", "dragPreview", "nodePaddingIndent", "childrenKey", "filterValue", "filterPredicate", "filterMode"], outputs: ["checkedChange", "selectedChange", "nodeDrop"], exportAs: ["ngsTree"] }, { kind: "directive", type: TreeDragPlaceholder, selector: "ng-template[ngsTreeDragPlaceholder]" }, { kind: "component", type: TreeNode, selector: "ngs-tree-node", inputs: ["tabIndex", "value", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["ngsTreeNode"] }, { kind: "directive", type: TreeNodeDef, selector: "[ngsTreeNodeDef]", inputs: ["ngsTreeNodeDefWhen", "ngsTreeNode"] }, { kind: "directive", type: TreeNodePadding, selector: "[ngsTreeNodePadding]", inputs: ["ngsTreeNodePadding", "ngsTreeNodePaddingIndent"] }, { kind: "component", type: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas"], exportAs: ["ngsFormBuilderFieldHost"] }, { kind: "component", type: FormBuilderRenderer, selector: "ngs-form-builder-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormBuilderRenderer"] }, { kind: "component", type: FormBuilderSettingsHost, selector: "ngs-form-builder-settings-host", inputs: ["field", "section", "schema", "definitions", "settingsDefinitions", "update", "updateSection"], exportAs: ["ngsFormBuilderSettingsHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilder, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-form-builder', exportAs: 'ngsFormBuilder', imports: [
                         NgTemplateOutlet,
                         FormsModule,
-                        CdkDrag,
-                        CdkDragHandle,
-                        CdkDragPlaceholder,
-                        CdkDragPreview,
-                        CdkDropList,
-                        CdkDropListGroup,
                         Button,
                         Card,
                         CardAside,
@@ -1555,10 +1997,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         DialogClose,
                         DialogContent,
                         DialogTitle,
-                        FormField,
                         Icon,
                         Input,
-                        Label,
                         Panel,
                         PanelAside,
                         PanelContent,
@@ -1574,11 +2014,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         TreeNodePadding,
                         FormBuilderFieldHost,
                         FormBuilderRenderer,
-                        FormBuilderSettingsHost,
-                        BasicFormBuilderFieldSettings
+                        FormBuilderSettingsHost
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-form-builder'
-                    }, template: "<ng-template #fieldCard let-field let-section=\"section\" let-dragData=\"dragData\">\n  <div\n    class=\"ngs-form-builder-field\"\n    cdkDrag\n    [cdkDragData]=\"dragData || field\"\n    [class.is-width-1]=\"(field.width ?? 12) === 1\"\n    [class.is-width-2]=\"field.width === 2\"\n    [class.is-width-3]=\"field.width === 3\"\n    [class.is-width-4]=\"field.width === 4\"\n    [class.is-width-5]=\"field.width === 5\"\n    [class.is-width-6]=\"field.width === 6\"\n    [class.is-width-7]=\"field.width === 7\"\n    [class.is-width-8]=\"field.width === 8\"\n    [class.is-width-9]=\"field.width === 9\"\n    [class.is-width-10]=\"field.width === 10\"\n    [class.is-width-11]=\"field.width === 11\"\n    [class.is-width-12]=\"(field.width ?? 12) === 12\"\n    [class.is-container]=\"isContainerField(field)\"\n    [class.is-selected]=\"selectedFieldId() === field.id\"\n    [attr.data-form-builder-field-id]=\"field.id\"\n    (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n    (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n    (drop)=\"nativeContainerFieldDrop($event, field)\"\n    (click)=\"$event.stopPropagation(); selectField(field, section)\">\n    <div class=\"ngs-form-builder-field-header\">\n      <div class=\"ngs-form-builder-field-label\">\n        <ngs-icon [name]=\"fieldIcon(field)\"/>\n        <span>{{ field.label }}</span>\n      </div>\n\n      <button ngsIconButton type=\"button\" class=\"ngs-form-builder-field-handle\" cdkDragHandle aria-label=\"Move field\">\n        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n      </button>\n    </div>\n\n    @if (isContainerField(field)) {\n      <div class=\"ngs-form-builder-grid-field\">\n        <ng-container\n          [ngTemplateOutlet]=\"fieldList\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: field.children ?? [],\n            containerId: fieldDropListId(field),\n            section\n          }\"/>\n      </div>\n    } @else {\n      <ngs-form-builder-field-host\n        [field]=\"field\"\n        [control]=\"previewControl(field)\"\n        [definitions]=\"definitions()\"\n        [readonly]=\"true\"\n        [editableCanvas]=\"true\"/>\n    }\n\n    <ng-template cdkDragPlaceholder>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-line-placeholder\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n      </div>\n    </ng-template>\n\n    <ng-template cdkDragPreview>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-drag-preview\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n        <div class=\"ngs-form-builder-field-header\">\n          <div class=\"ngs-form-builder-field-label\">\n            <ngs-icon [name]=\"fieldIcon(field)\"/>\n            <span>{{ field.label }}</span>\n          </div>\n          <span class=\"ngs-form-builder-drag-icon\">\n            <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n          </span>\n        </div>\n        <div class=\"ngs-form-builder-ghost-control\"></div>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    cdkDropList\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    [cdkDropListData]=\"fields\"\n    cdkDropListOrientation=\"mixed\"\n    [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n    [cdkDropListEnterPredicate]=\"fieldDropListEnterPredicate\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\"\n    (cdkDropListDropped)=\"dropField($event)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"fieldCard\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: field,\n          section\n        }\"/>\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\" cdkDropListGroup>\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-b-subtle px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-e-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <h3 class=\"text-base font-semibold\">{{ paletteTitle() }}</h3>\n\n        <ngs-tab-group animationDuration=\"0ms\" ngs-stretch-tabs=\"false\">\n          <ngs-tab label=\"Placeholders\">\n            <div class=\"flex flex-col gap-4 pt-4\">\n              <ngs-form-field>\n                <ngs-label>Search placeholder</ngs-label>\n                <input ngsInput\n                       [ngModel]=\"search()\"\n                       [ngModelOptions]=\"{standalone: true}\"\n                       (ngModelChange)=\"search.set($event)\">\n              </ngs-form-field>\n\n              <div class=\"flex flex-col gap-5\">\n                <section class=\"flex flex-col gap-2\">\n                  <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n                  <button\n                    type=\"button\"\n                    class=\"ngs-form-builder-palette-item\"\n                    draggable=\"true\"\n                    (dragstart)=\"sectionPaletteDragStarted($event)\"\n                    (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n                  </button>\n\n                  @for (definition of layoutDefinitions(); track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                    </button>\n                  }\n                </section>\n\n                @for (group of paletteGroups(); track group.name) {\n                  <section class=\"flex flex-col gap-2\">\n                    <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                    <div class=\"flex flex-col gap-2\">\n                      @for (definition of group.fields; track definition.type) {\n                        <button\n                          type=\"button\"\n                          class=\"ngs-form-builder-palette-item\"\n                          draggable=\"true\"\n                          (dragstart)=\"paletteDragStarted($event, definition)\"\n                          (dragend)=\"paletteDragEnded()\"\n                          (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                        </button>\n                      }\n                    </div>\n                  </section>\n                }\n              </div>\n            </div>\n          </ngs-tab>\n\n          <ngs-tab label=\"Actual fields\">\n            <div class=\"pt-4\">\n              <ngs-tree\n                #actualFieldsTree=\"ngsTree\"\n                [dataSource]=\"fieldTree()\"\n                [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n                [trackBy]=\"trackFieldTreeNode\"\n                [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n                [dropPredicate]=\"fieldTreeDropPredicate\"\n                [reorderOnDrop]=\"false\"\n                (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n                draggable>\n                <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                  <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                    <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                    <span>{{ source.label }}</span>\n                  </div>\n                </ng-template>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                               ngsTreeNodePadding\n                               [value]=\"node.id\"\n                               [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                  <button\n                    ngsIconButton\n                    class=\"ngs-form-builder-tree-toggle\"\n                    [attr.aria-label]=\"'Toggle ' + node.label\"\n                    (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                    <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                  </button>\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n              </ngs-tree>\n            </div>\n          </ngs-tab>\n        </ngs-tab-group>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          cdkDropList\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          [cdkDropListData]=\"canvasItems()\"\n          [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\"\n          (cdkDropListDropped)=\"dropCanvasItem($event)\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              <ng-container\n                [ngTemplateOutlet]=\"fieldCard\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: field,\n                  dragData: item\n                }\"/>\n            } @else if (item.section; as section) {\n            <ngs-card class=\"ngs-form-builder-section\"\n                      cdkDrag\n                      cdkDragLockAxis=\"y\"\n                      [cdkDragData]=\"item\"\n                      (cdkDragStarted)=\"sectionDragStarted(section)\"\n                      (cdkDragEnded)=\"sectionDragEnded(section)\"\n                      (dragover)=\"nativeSectionDragOver($event, section)\"\n                      (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                      (drop)=\"nativeSectionDrop($event, section)\">\n              <ngs-card-header>\n                <div class=\"ngs-form-builder-section-heading\">\n                  <button ngsIconButton type=\"button\" class=\"ngs-form-builder-section-handle\" cdkDragHandle aria-label=\"Move section\">\n                    <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                  </button>\n                  <input ngsInput\n                         class=\"ngs-form-builder-section-title\"\n                         [ngModel]=\"section.title\"\n                         [ngModelOptions]=\"{standalone: true}\"\n                         (ngModelChange)=\"updateSection(section, { title: $event })\"\n                         aria-label=\"Section title\">\n                </div>\n                @if (section.description) {\n                  <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                }\n\n                <ngs-card-aside>\n                  <div class=\"ngs-form-builder-section-actions\">\n                    <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                      <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                    </button>\n                    <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                      <ngs-icon name=\"fluent:delete-24-regular\"/>\n                    </button>\n                  </div>\n                </ngs-card-aside>\n              </ngs-card-header>\n\n              @if (!isSectionCollapsed(section)) {\n                <ngs-card-content>\n                  <ng-container\n                    [ngTemplateOutlet]=\"fieldList\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: section.fields,\n                      containerId: sectionDropListId(section),\n                      section\n                    }\"/>\n                </ngs-card-content>\n              } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                <ngs-card-content>\n                  <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                    <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                  </div>\n                </ngs-card-content>\n              }\n\n              <ng-template cdkDragPlaceholder>\n                <div class=\"ngs-form-builder-section-line-placeholder\"></div>\n              </ng-template>\n\n              <ng-template cdkDragPreview>\n                <ngs-card class=\"ngs-form-builder-section ngs-form-builder-section-drag-preview\">\n                  <ngs-card-header>\n                    <div class=\"ngs-form-builder-section-heading\">\n                      <span class=\"ngs-form-builder-section-handle\">\n                        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                      </span>\n                      <span class=\"ngs-form-builder-section-preview-title\">{{ section.title }}</span>\n                    </div>\n                    <ngs-card-aside>\n                      <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"size-5\"/>\n                    </ngs-card-aside>\n                  </ngs-card-header>\n                </ngs-card>\n              </ng-template>\n            </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-s-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-5\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"min-w-0\">\n            <h3 class=\"text-base font-semibold\">{{ inspectorTitle() }}</h3>\n            @if (selectedField()) {\n              <p class=\"truncate text-sm text-secondary\">{{ selectedField()?.label }}</p>\n            }\n          </div>\n          <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n\n        @if (selectedField(); as field) {\n          <ngs-basic-form-builder-field-settings\n            [field]=\"field\"\n            [update]=\"updateSelectedField\"/>\n\n          <ngs-form-builder-settings-host\n            [field]=\"field\"\n            [schema]=\"schema()\"\n            [definitions]=\"definitions()\"\n            [settingsDefinitions]=\"settingsDefinitions()\"\n            [update]=\"updateSelectedField\"/>\n\n          <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n            <ngs-icon name=\"fluent:delete-24-regular\"/>\n            Delete field\n          </button>\n        } @else {\n          <div class=\"ngs-form-builder-empty-inspector\">\n            Select a field on the canvas or in the fields tree to edit its settings.\n          </div>\n        }\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-builder-renderer\n      [schema]=\"schema()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-primary);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1);--ngs-tree-node-drop-line-color: var(--ngs-color-primary);--ngs-tree-node-drop-target-outline: 0;--ngs-tree-node-drop-target-bg: var(--ngs-color-primary-container)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{--ngs-button-height: calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-drag-preview{width:min(100%,900px);background:var(--ngs-color-surface)}:host .ngs-form-builder-native-ghost-section{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-list{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-handle{flex:none;color:var(--ngs-color-on-surface-variant);cursor:grab}:host .ngs-form-builder-section-handle:active{cursor:grabbing}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-handle{flex:none;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-empty-inspector{display:flex;min-height:calc(var(--spacing, .25rem) * 14);align-items:center;justify-content:center;border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-lg);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-empty-inspector{min-height:calc(var(--spacing, .25rem) * 28);border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .cdk-drag-preview{box-sizing:border-box;border-radius:var(--ngs-radius-lg);box-shadow:var(--ngs-shadow-lg)}:host .ngs-form-builder-field-placeholder{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 92%)}}:host .ngs-form-builder-field-line-placeholder{min-height:calc(var(--spacing, .25rem) * 6);justify-content:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-field-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .ngs-form-builder-field-drag-preview{width:min(360px,100vw - calc(var(--spacing, .25rem) * 8));min-height:calc(var(--spacing, .25rem) * 20);border-color:var(--ngs-color-primary);background:var(--ngs-color-surface);box-shadow:var(--ngs-shadow-lg);opacity:.94;pointer-events:none}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 18);border:1px dashed var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 6);border:0;background:transparent}:host .ngs-form-builder-section-line-placeholder{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-section-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .cdk-drag-placeholder{opacity:0}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder,:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder,:host .ngs-form-builder-canvas-list .ngs-form-builder-section-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-palette .cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-drop-list.cdk-drop-list-dragging .ngs-form-builder-field:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-canvas-list.cdk-drop-list-dragging .ngs-form-builder-section:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      @if (isContainerField(field)) {\n        <div\n          class=\"ngs-form-builder-field is-container\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n          (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n          (drop)=\"nativeContainerFieldDrop($event, field)\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <div class=\"ngs-form-builder-grid-field\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldList\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: field.children ?? [],\n                containerId: fieldDropListId(field),\n                section\n              }\"/>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"ngs-form-builder-field\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <ngs-form-builder-field-host\n            [field]=\"field\"\n            [control]=\"previewControl(field)\"\n            [definitions]=\"definitions()\"\n            [readonly]=\"true\"\n            [editableCanvas]=\"true\"/>\n        </div>\n      }\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\">\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-b-subtle px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-e-subtle\">\n    <ngs-tab-group\n      animationDuration=\"0ms\"\n      [selectedIndex]=\"fieldsTabIndex()\"\n      (selectedIndexChange)=\"fieldsTabIndex.set($event)\">\n      <ngs-tab label=\"Fields\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"flex flex-col gap-5 p-4\">\n            <section class=\"flex flex-col gap-2\">\n              <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n              <button\n                type=\"button\"\n                class=\"ngs-form-builder-palette-item\"\n                draggable=\"true\"\n                (dragstart)=\"sectionPaletteDragStarted($event)\"\n                (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n              </button>\n\n              @for (definition of layoutDefinitions(); track definition.type) {\n                <button\n                  type=\"button\"\n                  class=\"ngs-form-builder-palette-item\"\n                  draggable=\"true\"\n                  (dragstart)=\"paletteDragStarted($event, definition)\"\n                  (dragend)=\"paletteDragEnded()\"\n                  (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                </button>\n              }\n            </section>\n\n            @for (group of paletteGroups(); track group.name) {\n              <section class=\"flex flex-col gap-2\">\n                <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                <div class=\"flex flex-col gap-2\">\n                  @for (definition of group.fields; track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n      <ngs-tab label=\"Layers\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"ps-1 pe-4 py-4\">\n            <ngs-tree\n              #actualFieldsTree=\"ngsTree\"\n              [dataSource]=\"fieldTree()\"\n              [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n              [trackBy]=\"trackFieldTreeNode\"\n              [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n              [dropPredicate]=\"fieldTreeDropPredicate\"\n              [nodePaddingIndent]=\"80\"\n              [reorderOnDrop]=\"false\"\n              (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n              draggable>\n              <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                  <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                  <span>{{ source.label }}</span>\n                </div>\n              </ng-template>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    {{ node.label }}\n<!--                  <span class=\"inline-flex flex-col\">-->\n<!--                    -->\n<!--                    @if (node.name) {-->\n<!--                      <small>{{ node.name }}</small>-->\n<!--                    }-->\n<!--                  </span>-->\n                </button>\n              </ngs-tree-node>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                             ngsTreeNodePadding\n                             [value]=\"node.id\"\n                             [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                <button\n                  ngsIconButton\n                  class=\"ngs-form-builder-tree-toggle\"\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                  <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                </button>\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n  <!--                  @if (node.name) {-->\n  <!--                    <small>{{ node.name }}</small>-->\n  <!--                  }-->\n                </button>\n              </ngs-tree-node>\n            </ngs-tree>\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n    </ngs-tab-group>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              @if (isContainerField(field)) {\n                <div\n                  class=\"ngs-form-builder-field is-container\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n                  (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n                  (drop)=\"nativeContainerFieldDrop($event, field)\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"ngs-form-builder-grid-field\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: field.children ?? [],\n                        containerId: fieldDropListId(field)\n                      }\"/>\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"ngs-form-builder-field\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <ngs-form-builder-field-host\n                    [field]=\"field\"\n                    [control]=\"previewControl(field)\"\n                    [definitions]=\"definitions()\"\n                    [readonly]=\"true\"\n                    [editableCanvas]=\"true\"/>\n                </div>\n              }\n            } @else if (item.section; as section) {\n              <ngs-card class=\"ngs-form-builder-section\"\n                        [attr.data-form-builder-section-id]=\"section.id\"\n                        (dragover)=\"nativeSectionDragOver($event, section)\"\n                        (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                        (drop)=\"nativeSectionDrop($event, section)\"\n                        (click)=\"selectSection(section)\">\n                <ngs-card-header>\n                  <div class=\"ngs-form-builder-section-heading\">\n                    <input ngsInput\n                           class=\"ngs-form-builder-section-title\"\n                           [ngModel]=\"section.title\"\n                           [ngModelOptions]=\"{standalone: true}\"\n                           (ngModelChange)=\"updateSection(section, { title: $event })\"\n                           aria-label=\"Section title\">\n                  </div>\n                  @if (section.description) {\n                    <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                  }\n\n                  <ngs-card-aside>\n                    <div class=\"ngs-form-builder-section-actions\">\n                      <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                        <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                      </button>\n                      <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                        <ngs-icon name=\"fluent:delete-24-regular\"/>\n                      </button>\n                    </div>\n                  </ngs-card-aside>\n                </ngs-card-header>\n\n                @if (!isSectionCollapsed(section)) {\n                  <ngs-card-content>\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: section.fields,\n                        containerId: sectionDropListId(section),\n                        section\n                      }\"/>\n                  </ngs-card-content>\n                } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                  <ngs-card-content>\n                    <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                    </div>\n                  </ngs-card-content>\n                }\n              </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-s-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-5\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"min-w-0\">\n            <h3 class=\"text-base font-semibold\">{{ inspectorTitle() }}</h3>\n            @if (selectedField() || selectedSection()) {\n              <p class=\"truncate text-sm text-secondary\">{{ selectedField()?.label || selectedSection()?.title }}</p>\n            }\n          </div>\n          <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n\n        @if (selectedField() || selectedSection()) {\n          <ngs-form-builder-settings-host\n            [field]=\"selectedField()\"\n            [section]=\"selectedSection()\"\n            [schema]=\"schema()\"\n            [definitions]=\"definitions()\"\n            [settingsDefinitions]=\"settingsDefinitions()\"\n            [update]=\"updateSelectedField\"\n            [updateSection]=\"updateSelectedSection\"/>\n\n          @if (selectedField(); as field) {\n            <div class=\"mt-3\">\n              <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n                <ngs-icon name=\"fluent:delete-24-regular\"/>\n                Delete field\n              </button>\n            </div>\n          }\n        } @else {\n          <div class=\"ngs-form-builder-empty-inspector\">\n            Select a field on the canvas or in the fields tree to edit its settings.\n          </div>\n        }\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-builder-renderer\n      [schema]=\"schema()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-on-surface);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);color:var(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-palette-item:hover{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 96%)}}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4);grid-column:span 12}:host .ngs-form-builder-native-ghost-section{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-empty-inspector{display:flex;min-height:calc(var(--spacing, .25rem) * 14);align-items:center;justify-content:center;border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-lg);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-empty-inspector{min-height:calc(var(--spacing, .25rem) * 28);border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .ngs-form-builder-field-placeholder{border-style:dashed;border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 92%)}}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { actualFieldsTree: [{ type: i0.ViewChild, args: ['actualFieldsTree', { isSignal: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }, { type: i0.Output, args: ["schemaChange"] }], paletteTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "paletteTitle", required: false }] }], inspectorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorTitle", required: false }] }], fieldSelected: [{ type: i0.Output, args: ["fieldSelected"] }], fieldAdded: [{ type: i0.Output, args: ["fieldAdded"] }], fieldRemoved: [{ type: i0.Output, args: ["fieldRemoved"] }] } });
 function createDefaultFormBuilderSchema() {
     const sectionId = uniqueId('section');
@@ -1619,23 +2058,18 @@ function cloneField(field) {
         children: field.children?.map(cloneField)
     };
 }
-function isFormBuilderLayoutItem(value) {
-    if (!value || typeof value !== 'object') {
-        return false;
-    }
-    const item = value;
-    return (item.kind === 'field' || item.kind === 'section') && typeof item.id === 'string';
-}
-function isFormBuilderField(value) {
-    if (!value || typeof value !== 'object') {
-        return false;
-    }
-    const field = value;
-    return typeof field.id === 'string' && typeof field.type === 'string';
-}
 function clampIndex(index, length) {
     return Math.max(0, Math.min(index, length));
 }
+function replaceArrayContents(target, source) {
+    target.splice(0, target.length, ...source);
+}
+function normalizeFieldDefinition(definition) {
+    return {
+        ...definition,
+        kind: definition.kind ?? 'field'
+    };
+}
 function toFieldName(label) {
     return label
         .trim()
@@ -1691,5 +2125,5 @@ function containsField(field, fieldId) {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicFormBuilderFieldSettings, DEFAULT_FORM_BUILDER_FIELDS, FORM_BUILDER_FIELDS, FORM_BUILDER_SETTINGS, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, FormBuilderRenderer as FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderSettings, provideFormBuilder, validatorsFromRules };
+export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_ITEMS, FORM_BUILDER_SETTINGS, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, FormBuilderRenderer as FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, validatorsFromRules };
 //# sourceMappingURL=ngstarter-ui-components-form-builder.mjs.map