@ngstarter-ui/components 21.0.46 → 21.0.48

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, model, output, DestroyRef, ElementRef } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, model, output, ElementRef, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { Validators, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormControl, FormArray, FormGroup, FormsModule } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { Button } from '@ngstarter-ui/components/button';
 import { Card, CardAside, CardContent, CardHeader } from '@ngstarter-ui/components/card';
@@ -41,6 +41,16 @@ function formBuilderItem(definition) {
 function formBuilderSettings(definition) {
     return definition;
 }
+function provideFormBuilderField(definition) {
+    return {
+        provide: FORM_BUILDER_FIELDS,
+        useValue: definition,
+        multi: true
+    };
+}
+function provideFormBuilderFields(definitions) {
+    return definitions.map(definition => provideFormBuilderField(definition));
+}
 function provideFormBuilder(config = {}) {
     return makeEnvironmentProviders([
         ...(config.uploadCallback ? [{
@@ -64,6 +74,144 @@ function provideFormBuilder(config = {}) {
         }))
     ]);
 }
+const FIELD_WIDTH_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    .map(width => ({ label: `${width}/12`, value: width }));
+const SPACER_HEIGHT_OPTIONS = [8, 16, 24, 32, 48, 64]
+    .map(height => ({ label: `${height}px`, value: height }));
+const ORIENTATION_OPTIONS = [
+    { label: 'Vertical', value: 'vertical' },
+    { label: 'Horizontal', value: 'horizontal' }
+];
+const FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'field-base-settings',
+            title: 'Field',
+            fields: [
+                { id: 'field-label', name: 'label', type: 'text', label: 'Label' },
+                { id: 'field-name', name: 'name', type: 'text', label: 'Field ID' },
+                { id: 'field-hint', name: 'hint', type: 'text', label: 'Hint' },
+                { id: 'field-width', name: 'width', type: 'select', label: 'Width', defaultValue: 12, options: FIELD_WIDTH_OPTIONS },
+                { id: 'field-required', name: 'required', type: 'toggle', label: 'Required field', defaultValue: false },
+                { id: 'field-readonly', name: 'readonly', type: 'toggle', label: 'Readonly', defaultValue: false },
+                { id: 'field-disabled', name: 'disabled', type: 'toggle', label: 'Disabled', defaultValue: false }
+            ]
+        }
+    ]
+};
+const FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'input-field-base-settings',
+            title: 'Field',
+            fields: [
+                { id: 'input-field-label', name: 'label', type: 'text', label: 'Label' },
+                { id: 'input-field-name', name: 'name', type: 'text', label: 'Field ID' },
+                { id: 'input-field-placeholder', name: 'placeholder', type: 'text', label: 'Placeholder' },
+                { id: 'input-field-hint', name: 'hint', type: 'text', label: 'Hint' },
+                { id: 'input-field-width', name: 'width', type: 'select', label: 'Width', defaultValue: 12, options: FIELD_WIDTH_OPTIONS },
+                { id: 'input-field-required', name: 'required', type: 'toggle', label: 'Required field', defaultValue: false },
+                { id: 'input-field-readonly', name: 'readonly', type: 'toggle', label: 'Readonly', defaultValue: false },
+                { id: 'input-field-disabled', name: 'disabled', type: 'toggle', label: 'Disabled', defaultValue: false }
+            ]
+        }
+    ]
+};
+const FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'layout-base-settings',
+            title: 'Layout',
+            fields: [
+                { id: 'layout-label', name: 'label', type: 'text', label: 'Label' },
+                { id: 'layout-hint', name: 'hint', type: 'text', label: 'Hint' },
+                { id: 'layout-width', name: 'width', type: 'select', label: 'Width', defaultValue: 12, options: FIELD_WIDTH_OPTIONS }
+            ]
+        }
+    ]
+};
+const FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'layout-container-base-settings',
+            title: 'Layout',
+            fields: [
+                { id: 'layout-container-label', name: 'label', type: 'text', label: 'Label' },
+                { id: 'layout-container-width', name: 'width', type: 'select', label: 'Width', defaultValue: 12, options: FIELD_WIDTH_OPTIONS }
+            ]
+        }
+    ]
+};
+const FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'static-base-settings',
+            title: 'Static block',
+            fields: [
+                { id: 'static-label', name: 'label', type: 'text', label: 'Label' },
+                { id: 'static-width', name: 'width', type: 'select', label: 'Width', defaultValue: 12, options: FIELD_WIDTH_OPTIONS }
+            ]
+        }
+    ]
+};
+const FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'section-base-settings',
+            title: 'Section',
+            fields: [
+                { id: 'section-title', name: 'title', type: 'text', label: 'Title' },
+                { id: 'section-description', name: 'description', type: 'textarea', label: 'Description', hint: 'Optional helper text rendered under the section title.' },
+                { id: 'section-collapsed', name: 'collapsed', type: 'toggle', label: 'Collapsed', defaultValue: false }
+            ]
+        }
+    ]
+};
+const CHECKED_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'checked-settings',
+            title: 'Default state',
+            fields: [
+                { id: 'default-checked', name: 'defaultValue', type: 'toggle', label: 'Checked', defaultValue: false }
+            ]
+        }
+    ]
+};
+const OPTIONS_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'options-settings',
+            title: 'Options',
+            fields: [
+                {
+                    id: 'options',
+                    name: 'options',
+                    type: 'textarea',
+                    label: 'Options',
+                    hint: 'One option per line. Use Label:value or Label:value:selected.',
+                    settings: {
+                        valueAdapter: 'optionsText'
+                    }
+                }
+            ]
+        }
+    ]
+};
+const HIDDEN_SETTINGS_SCHEMA = {
+    sections: [
+        {
+            id: 'hidden-settings',
+            title: 'Hidden field',
+            fields: [
+                { id: 'hidden-label', name: 'label', type: 'text', label: 'Label' },
+                { id: 'hidden-name', name: 'name', type: 'text', label: 'Field ID' },
+                { id: 'hidden-default-value', name: 'defaultValue', type: 'text', label: 'Value' },
+                { id: 'hidden-disabled', name: 'disabled', type: 'toggle', label: 'Disabled', defaultValue: false }
+            ]
+        }
+    ]
+};
 const DEFAULT_FORM_BUILDER_FIELDS = [
     {
         type: 'text',
@@ -73,6 +221,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Text field',
             placeholder: 'Enter text'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -83,6 +234,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Number',
             placeholder: '0'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -94,8 +248,26 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Email',
             placeholder: 'name@example.com'
         },
+        settings: {
+            extends: 'input-field'
+        },
         validators: field => field.required ? [Validators.required, Validators.email] : [Validators.email]
     },
+    {
+        type: 'hidden',
+        label: 'Hidden',
+        group: 'Basic',
+        icon: 'fluent:eye-off-24-regular',
+        description: 'Native hidden input included in submitted form values.',
+        defaults: {
+            label: 'Hidden field',
+            defaultValue: ''
+        },
+        settings: {
+            extends: 'none',
+            schema: HIDDEN_SETTINGS_SCHEMA
+        }
+    },
     {
         type: 'textarea',
         label: 'Textarea',
@@ -105,6 +277,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Description',
             placeholder: 'Enter description',
             width: 12
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -120,6 +295,56 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Group',
             width: 12,
             children: []
+        },
+        settings: {
+            extends: 'layout-container'
+        }
+    },
+    {
+        type: 'repeater',
+        label: 'Repeater',
+        kind: 'layout',
+        group: 'Layout',
+        icon: 'fluent:copy-add-24-regular',
+        description: 'Repeat a group of nested fields as a FormArray.',
+        acceptsChildren: true,
+        defaults: {
+            kind: 'layout',
+            label: 'Repeater',
+            name: 'items',
+            width: 12,
+            settings: {
+                allowNullValue: false,
+                emptyText: 'No items added yet.'
+            },
+            children: []
+        },
+        settings: {
+            extends: 'layout-container',
+            schema: {
+                sections: [
+                    {
+                        id: 'repeater-settings',
+                        title: 'Repeater',
+                        fields: [
+                            {
+                                id: 'repeater-allow-null-value',
+                                name: 'settings.allowNullValue',
+                                type: 'toggle',
+                                label: 'Allow null value',
+                                defaultValue: false
+                            },
+                            {
+                                id: 'repeater-empty-text',
+                                name: 'settings.emptyText',
+                                type: 'textarea',
+                                label: 'Empty text',
+                                defaultValue: 'No items added yet.'
+                            }
+                        ]
+                    }
+                ]
+            }
         }
     },
     {
@@ -136,6 +361,20 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             settings: {
                 height: 24
             }
+        },
+        settings: {
+            extends: 'static',
+            schema: {
+                sections: [
+                    {
+                        id: 'spacer-settings',
+                        title: 'Spacer',
+                        fields: [
+                            { id: 'spacer-height', name: 'settings.height', type: 'select', label: 'Height', defaultValue: 24, options: SPACER_HEIGHT_OPTIONS }
+                        ]
+                    }
+                ]
+            }
         }
     },
     {
@@ -151,6 +390,31 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
                 { label: 'Option 1', value: 'option_1' },
                 { label: 'Option 2', value: 'option_2' }
             ]
+        },
+        settings: {
+            extends: 'input-field',
+            schema: {
+                sections: [
+                    {
+                        id: 'select-behavior-settings',
+                        title: 'Select',
+                        fields: [
+                            {
+                                id: 'select-multiple',
+                                name: 'multiple',
+                                type: 'toggle',
+                                label: 'Multiple',
+                                defaultValue: false,
+                                settings: {
+                                    valueAdapter: 'selectMultiple'
+                                }
+                            },
+                            { id: 'select-clearable', name: 'clearable', type: 'toggle', label: 'Clearable', defaultValue: true }
+                        ]
+                    },
+                    ...OPTIONS_SETTINGS_SCHEMA.sections
+                ]
+            }
         }
     },
     {
@@ -167,6 +431,21 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
                 { label: 'Option 1', value: 'option_1' },
                 { label: 'Option 2', value: 'option_2' }
             ]
+        },
+        settings: {
+            extends: 'field',
+            schema: {
+                sections: [
+                    {
+                        id: 'radio-settings',
+                        title: 'Radio',
+                        fields: [
+                            { id: 'radio-orientation', name: 'settings.orientation', type: 'select', label: 'Orientation', defaultValue: 'vertical', options: ORIENTATION_OPTIONS }
+                        ]
+                    },
+                    ...OPTIONS_SETTINGS_SCHEMA.sections
+                ]
+            }
         }
     },
     {
@@ -177,6 +456,10 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Checkbox',
             defaultValue: false
+        },
+        settings: {
+            extends: 'field',
+            schema: CHECKED_SETTINGS_SCHEMA
         }
     },
     {
@@ -187,6 +470,10 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Toggle',
             defaultValue: false
+        },
+        settings: {
+            extends: 'field',
+            schema: CHECKED_SETTINGS_SCHEMA
         }
     },
     {
@@ -197,6 +484,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Date',
             placeholder: 'Select date'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -207,6 +497,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Time',
             placeholder: 'Select time'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -218,6 +511,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Date range',
             placeholder: 'Start date',
             width: 12
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -233,6 +529,37 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             settings: {
                 accept: '*/*'
             }
+        },
+        settings: {
+            extends: 'input-field',
+            schema: {
+                sections: [
+                    {
+                        id: 'upload-settings',
+                        title: 'Upload',
+                        fields: [
+                            {
+                                id: 'upload-multiple',
+                                name: 'multiple',
+                                type: 'toggle',
+                                label: 'Multiple',
+                                defaultValue: false,
+                                settings: {
+                                    valueAdapter: 'multipleDefaultValue'
+                                }
+                            },
+                            {
+                                id: 'upload-accept',
+                                name: 'settings.accept',
+                                type: 'text',
+                                label: 'Accepted file types',
+                                defaultValue: '*/*',
+                                hint: 'Use MIME types separated by commas, for example image/*,application/pdf.'
+                            }
+                        ]
+                    }
+                ]
+            }
         }
     },
     {
@@ -243,6 +570,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Timezone',
             placeholder: 'Select timezone'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -253,6 +583,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Amount',
             placeholder: '0.00'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -263,6 +596,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         defaults: {
             label: 'Currency',
             placeholder: 'Select currency'
+        },
+        settings: {
+            extends: 'input-field'
         }
     },
     {
@@ -274,6 +610,20 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Country',
             placeholder: 'Select country',
             clearable: true
+        },
+        settings: {
+            extends: 'input-field',
+            schema: {
+                sections: [
+                    {
+                        id: 'country-select-settings',
+                        title: 'Country select',
+                        fields: [
+                            { id: 'country-clearable', name: 'clearable', type: 'toggle', label: 'Clearable', defaultValue: true }
+                        ]
+                    }
+                ]
+            }
         }
     }
 ];
@@ -285,7 +635,11 @@ const DEFAULT_FORM_BUILDER_ITEMS = [
         group: 'Layout',
         icon: 'fluent:folder-24-regular',
         description: 'Top-level layout container.',
-        acceptsChildren: true
+        acceptsChildren: true,
+        settings: {
+            extends: 'none',
+            schema: FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA
+        }
     },
     ...DEFAULT_FORM_BUILDER_FIELDS
 ];
@@ -430,9 +784,9 @@ class FormBuilderFieldHost {
         return String(value);
     }
     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 }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", 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: [
+    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 }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", 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", "class.is-hidden-field": "!editableCanvas() && field().type === \"hidden\"" }, 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()\"\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 ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\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-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}: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)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\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: DateRangeInput, selector: "ngs-date-range-input", inputs: ["rangePicker", "separator"], exportAs: ["ngsDateRangeInput"] }, { kind: "component", type: DateRangePicker, selector: "ngs-date-range-picker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets", "calendarCount", "extended"], exportAs: ["ngsDateRangePicker"] }, { kind: "directive", type: StartDate, selector: "input[ngsStartDate]" }, { kind: "directive", type: EndDate, selector: "input[ngsEndDate]" }, { 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"] }, { kind: "component", type: Timepicker, selector: "ngs-timepicker", inputs: ["disabled", "interval"], outputs: ["opened", "closed"], exportAs: ["ngsTimepicker"] }, { kind: "directive", type: TimepickerInput, selector: "input[ngsTimepicker]", inputs: ["disabled", "max", "min", "openOnClick", "ngsTimepicker"] }, { kind: "component", type: TimepickerToggle, selector: "ngs-timepicker-toggle", inputs: ["for", "disabled"], exportAs: ["ngsTimepickerToggle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: UploadArea, selector: "ngs-upload-area", inputs: ["accept", "allowHover", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadArea"] }, { kind: "directive", type: UploadAreaIconDirective, selector: "[ngsUploadAreaIcon]" }, { kind: "directive", type: UploadAreaMainStateDirective, selector: "[ngsUploadAreaMainState]" }, { kind: "directive", type: UploadAreaDropStateDirective, selector: "[ngsUploadAreaDropState]" }, { kind: "directive", type: UploadAreaInvalidStateDirective, selector: "[ngsUploadAreaInvalidState]" }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }], 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 ('hidden') {\n      <input type=\"hidden\" [formControl]=\"control()\">\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 ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\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-hidden-field{display:none}: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-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}: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)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\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: DateRangeInput, selector: "ngs-date-range-input", inputs: ["rangePicker", "separator"], exportAs: ["ngsDateRangeInput"] }, { kind: "component", type: DateRangePicker, selector: "ngs-date-range-picker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets", "calendarCount", "extended"], exportAs: ["ngsDateRangePicker"] }, { kind: "directive", type: StartDate, selector: "input[ngsStartDate]" }, { kind: "directive", type: EndDate, selector: "input[ngsEndDate]" }, { 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"] }, { kind: "component", type: Timepicker, selector: "ngs-timepicker", inputs: ["disabled", "interval"], outputs: ["opened", "closed"], exportAs: ["ngsTimepicker"] }, { kind: "directive", type: TimepickerInput, selector: "input[ngsTimepicker]", inputs: ["disabled", "max", "min", "openOnClick", "ngsTimepicker"] }, { kind: "component", type: TimepickerToggle, selector: "ngs-timepicker-toggle", inputs: ["for", "disabled"], exportAs: ["ngsTimepickerToggle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: UploadArea, selector: "ngs-upload-area", inputs: ["accept", "allowHover", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadArea"] }, { kind: "directive", type: UploadAreaIconDirective, selector: "[ngsUploadAreaIcon]" }, { kind: "directive", type: UploadAreaMainStateDirective, selector: "[ngsUploadAreaMainState]" }, { kind: "directive", type: UploadAreaDropStateDirective, selector: "[ngsUploadAreaDropState]" }, { kind: "directive", type: UploadAreaInvalidStateDirective, selector: "[ngsUploadAreaInvalidState]" }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, decorators: [{
             type: Component,
@@ -485,8 +839,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[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'
-                    }, 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 ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\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-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}: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)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                        '[class.is-width-12]': '!editableCanvas() && (field().width ?? 12) === 12',
+                        '[class.is-hidden-field]': '!editableCanvas() && field().type === "hidden"'
+                    }, 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 ('hidden') {\n      <input type=\"hidden\" [formControl]=\"control()\">\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 ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\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-hidden-field{display:none}: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-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}: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)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\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 }] }], uploadCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCallback", required: false }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class FormBuilderRenderer {
@@ -523,23 +878,7 @@ class FormBuilderRenderer {
         }
         return definitions;
     }, []), ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
-    visibleCanvasItems = computed(() => this.resolveCanvasItems(this.schema())
-        .map(item => {
-        if (item.field) {
-            return {
-                ...item,
-                field: this.visibleFields([item.field])[0]
-            };
-        }
-        return {
-            ...item,
-            section: {
-                ...item.section,
-                fields: this.visibleFields(item.section.fields)
-            }
-        };
-    })
-        .filter(item => !!item.field || !!item.section?.fields.length), ...(ngDevMode ? [{ debugName: "visibleCanvasItems" }] : /* istanbul ignore next */ []));
+    visibleCanvasItems = computed(() => this.resolveCanvasItems(this.schema()).filter(item => !!item.field || !!item.section?.fields.length), ...(ngDevMode ? [{ debugName: "visibleCanvasItems" }] : /* istanbul ignore next */ []));
     formGroup = computed(() => this.createFormGroup(), ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(onCleanup => {
@@ -551,8 +890,8 @@ class FormBuilderRenderer {
             onCleanup(() => subscription.unsubscribe());
         });
     }
-    getControl(field) {
-        const control = this.formGroup().get(field.name);
+    getControl(field, formGroup = this.formGroup()) {
+        const control = formGroup.controls[field.name];
         if (control instanceof FormControl) {
             return control;
         }
@@ -576,7 +915,45 @@ class FormBuilderRenderer {
             field.type === 'grid';
     }
     visibleChildren(field) {
-        return this.visibleFields(field.children ?? []);
+        return field.children ?? [];
+    }
+    isRepeaterField(field) {
+        return field.type === 'repeater';
+    }
+    repeaterArray(field, formGroup = this.formGroup()) {
+        const control = formGroup.controls[field.name];
+        return control instanceof FormArray
+            ? control
+            : new FormArray([]);
+    }
+    repeaterGroups(field, formGroup = this.formGroup()) {
+        return this.repeaterArray(field, formGroup).controls;
+    }
+    repeaterEmptyText(field) {
+        const emptyText = field.settings?.['emptyText'];
+        return typeof emptyText === 'string' ? emptyText.trim() : '';
+    }
+    addRepeaterItem(field, formGroup = this.formGroup()) {
+        if (this.readonly()) {
+            return;
+        }
+        const array = this.repeaterArray(field, formGroup);
+        array.push(this.createRepeaterGroup(field));
+        array.updateValueAndValidity();
+    }
+    removeRepeaterItem(field, index, formGroup = this.formGroup()) {
+        if (this.readonly()) {
+            return;
+        }
+        if (!this.canRemoveRepeaterItem(field, formGroup)) {
+            return;
+        }
+        const array = this.repeaterArray(field, formGroup);
+        array.removeAt(index);
+        array.updateValueAndValidity();
+    }
+    canRemoveRepeaterItem(field, formGroup = this.formGroup()) {
+        return this.allowsNullValue(field) || this.repeaterArray(field, formGroup).length > 1;
     }
     submit() {
         const form = this.formGroup();
@@ -590,12 +967,24 @@ class FormBuilderRenderer {
         const controls = {};
         const value = this.value();
         const fields = [
-            ...flattenFields(this.schema().fields ?? []),
-            ...this.schema().sections.flatMap(section => flattenFields(section.fields))
+            ...(this.schema().fields ?? []),
+            ...this.schema().sections.flatMap(section => section.fields)
         ];
+        this.addFieldsToControls(controls, fields, value);
+        return new FormGroup(controls);
+    }
+    addFieldsToControls(controls, fields, value) {
         for (const field of fields) {
             const definition = this.definitions().find(item => item.type === field.type);
-            if (this.isContainerField(field) || definition?.kind === 'static' || field.kind === 'static') {
+            if (this.isRepeaterField(field)) {
+                controls[field.name] = this.createRepeaterArray(field, value[field.name]);
+                continue;
+            }
+            if (this.isContainerField(field)) {
+                this.addFieldsToControls(controls, field.children ?? [], value);
+                continue;
+            }
+            if (definition?.kind === 'static' || field.kind === 'static') {
                 continue;
             }
             const validators = definition?.validators?.(field) ?? validatorsFromRules(field.validation, field);
@@ -605,15 +994,32 @@ class FormBuilderRenderer {
             }, validators);
             controls[field.name] = control;
         }
-        return new FormGroup(controls);
     }
-    visibleFields(fields) {
-        return fields
-            .filter(field => field.visibility?.form !== false)
-            .map(field => ({
-            ...field,
-            children: field.children ? this.visibleFields(field.children) : undefined
-        }));
+    createRepeaterArray(field, value) {
+        const allowNullValue = this.allowsNullValue(field);
+        const rows = Array.isArray(value) && (allowNullValue || value.length > 0)
+            ? value
+            : allowNullValue
+                ? []
+                : [{}];
+        const validators = allowNullValue ? [] : [repeaterRequiredValidator];
+        return new FormArray(rows.map(row => this.createRepeaterGroup(field, row)), validators);
+    }
+    createRepeaterGroup(field, value = {}) {
+        const controls = {};
+        const rowValue = isRecord(value) ? value : {};
+        for (const child of flattenFields(field.children ?? [])) {
+            const definition = this.definitions().find(item => item.type === child.type);
+            if (this.isContainerField(child) || definition?.kind === 'static' || child.kind === 'static') {
+                continue;
+            }
+            const validators = definition?.validators?.(child) ?? validatorsFromRules(child.validation, child);
+            controls[child.name] = new FormControl({
+                value: rowValue[child.name] ?? this.fieldInitialValue(child),
+                disabled: child.disabled || this.readonly()
+            }, validators);
+        }
+        return new FormGroup(controls);
     }
     fieldInitialValue(field) {
         if (field.defaultValue !== undefined) {
@@ -630,6 +1036,9 @@ class FormBuilderRenderer {
         }
         return selectedValues[0] ?? null;
     }
+    allowsNullValue(field) {
+        return field.settings?.['allowNullValue'] === true;
+    }
     resolveCanvasItems(schema) {
         const fieldsById = new Map((schema.fields ?? []).map(field => [field.id, field]));
         const sectionsById = new Map(schema.sections.map(section => [section.id, section]));
@@ -650,7 +1059,7 @@ class FormBuilderRenderer {
         return items;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderRenderer, isStandalone: true, selector: "ngs-form-renderer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", formSubmit: "formSubmit", formReady: "formReady" }, host: { classAttribute: "ngs-form-renderer" }, exportAs: ["ngsFormRenderer"], ngImport: i0, template: "<ng-template #renderFields let-fields>\n  <div class=\"ngs-form-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isContainerField(field)) {\n        <section class=\"ngs-form-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          [uploadCallback]=\"uploadCallback()\"\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-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-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas", "uploadCallback"], exportAs: ["ngsFormBuilderFieldHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderRenderer, isStandalone: true, selector: "ngs-form-renderer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", formSubmit: "formSubmit", formReady: "formReady" }, host: { classAttribute: "ngs-form-renderer" }, exportAs: ["ngsFormRenderer"], ngImport: i0, template: "<ng-template #renderFields let-fields let-controlGroup=\"controlGroup\">\n  <div class=\"ngs-form-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isRepeaterField(field)) {\n        <section class=\"ngs-form-renderer-grid-field ngs-form-renderer-repeater\">\n          <header>\n            <div>\n              <h4>{{ field.label }}</h4>\n              @if (field.hint) {\n                <p>{{ field.hint }}</p>\n              }\n            </div>\n\n            @if (!readonly()) {\n              <button ngsButton=\"outlined\" type=\"button\" (click)=\"addRepeaterItem(field, controlGroup)\">\n                +\n              </button>\n            }\n          </header>\n\n          <div class=\"ngs-form-renderer-repeater-items\">\n            @if (!repeaterGroups(field, controlGroup).length && repeaterEmptyText(field)) {\n              <p class=\"ngs-form-renderer-repeater-empty\">{{ repeaterEmptyText(field) }}</p>\n            }\n\n            @for (group of repeaterGroups(field, controlGroup); track $index) {\n              <div class=\"ngs-form-renderer-repeater-item\" [formGroup]=\"group\">\n                <div class=\"ngs-form-renderer-repeater-item-header\">\n                  <span>{{ field.label }} {{ $index + 1 }}</span>\n                  @if (!readonly() && canRemoveRepeaterItem(field, controlGroup)) {\n                    <button ngsButton=\"text\" type=\"button\" (click)=\"removeRepeaterItem(field, $index, controlGroup)\">\n                      Remove\n                    </button>\n                  }\n                </div>\n\n                <ng-container\n                  [ngTemplateOutlet]=\"renderFields\"\n                  [ngTemplateOutletContext]=\"{ $implicit: visibleChildren(field), controlGroup: group }\"/>\n              </div>\n            }\n          </div>\n        </section>\n      } @else if (isContainerField(field)) {\n        <section class=\"ngs-form-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), controlGroup: controlGroup }\"/>\n        </section>\n      } @else {\n        <ngs-form-builder-field-host\n          [field]=\"field\"\n          [control]=\"getControl(field, controlGroup)\"\n          [definitions]=\"definitions()\"\n          [uploadCallback]=\"uploadCallback()\"\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], controlGroup: formGroup() }\"/>\n      } @else if (item.section; as section) {\n        <section class=\"ngs-form-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, controlGroup: formGroup() }\"/>\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-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field>header{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-renderer-grid-field>header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-renderer-repeater-items{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-repeater-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px dashed var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-repeater-item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-renderer-repeater-item-header span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-renderer-repeater-empty{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);margin:0}\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: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas", "uploadCallback"], exportAs: ["ngsFormBuilderFieldHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderRenderer, decorators: [{
             type: Component,
@@ -661,7 +1070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         FormBuilderFieldHost
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-form-renderer'
-                    }, template: "<ng-template #renderFields let-fields>\n  <div class=\"ngs-form-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isContainerField(field)) {\n        <section class=\"ngs-form-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          [uploadCallback]=\"uploadCallback()\"\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-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-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-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"] }]
+                    }, template: "<ng-template #renderFields let-fields let-controlGroup=\"controlGroup\">\n  <div class=\"ngs-form-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isRepeaterField(field)) {\n        <section class=\"ngs-form-renderer-grid-field ngs-form-renderer-repeater\">\n          <header>\n            <div>\n              <h4>{{ field.label }}</h4>\n              @if (field.hint) {\n                <p>{{ field.hint }}</p>\n              }\n            </div>\n\n            @if (!readonly()) {\n              <button ngsButton=\"outlined\" type=\"button\" (click)=\"addRepeaterItem(field, controlGroup)\">\n                +\n              </button>\n            }\n          </header>\n\n          <div class=\"ngs-form-renderer-repeater-items\">\n            @if (!repeaterGroups(field, controlGroup).length && repeaterEmptyText(field)) {\n              <p class=\"ngs-form-renderer-repeater-empty\">{{ repeaterEmptyText(field) }}</p>\n            }\n\n            @for (group of repeaterGroups(field, controlGroup); track $index) {\n              <div class=\"ngs-form-renderer-repeater-item\" [formGroup]=\"group\">\n                <div class=\"ngs-form-renderer-repeater-item-header\">\n                  <span>{{ field.label }} {{ $index + 1 }}</span>\n                  @if (!readonly() && canRemoveRepeaterItem(field, controlGroup)) {\n                    <button ngsButton=\"text\" type=\"button\" (click)=\"removeRepeaterItem(field, $index, controlGroup)\">\n                      Remove\n                    </button>\n                  }\n                </div>\n\n                <ng-container\n                  [ngTemplateOutlet]=\"renderFields\"\n                  [ngTemplateOutletContext]=\"{ $implicit: visibleChildren(field), controlGroup: group }\"/>\n              </div>\n            }\n          </div>\n        </section>\n      } @else if (isContainerField(field)) {\n        <section class=\"ngs-form-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), controlGroup: controlGroup }\"/>\n        </section>\n      } @else {\n        <ngs-form-builder-field-host\n          [field]=\"field\"\n          [control]=\"getControl(field, controlGroup)\"\n          [definitions]=\"definitions()\"\n          [uploadCallback]=\"uploadCallback()\"\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], controlGroup: formGroup() }\"/>\n      } @else if (item.section; as section) {\n        <section class=\"ngs-form-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, controlGroup: formGroup() }\"/>\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-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-grid-field>header{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-renderer-grid-field>header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-renderer-repeater-items{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-repeater-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px dashed var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-renderer-repeater-item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-renderer-repeater-item-header span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-renderer-repeater-empty{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);margin:0}\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 }] }], uploadCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCallback", 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 {
@@ -672,6 +1081,14 @@ function normalizeFieldDefinition$1(definition) {
 function flattenFields(fields) {
     return fields.flatMap(field => [field, ...flattenFields(field.children ?? [])]);
 }
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function repeaterRequiredValidator(control) {
+    return control instanceof FormArray && control.length === 0
+        ? { repeaterRequired: true }
+        : null;
+}
 function normalizedLayout(schema) {
     const used = new Set();
     const layout = [];
@@ -704,250 +1121,6 @@ function normalizedLayout(schema) {
     return layout;
 }
 
-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'];
-    spacerHeightOptions = [8, 16, 24, 32, 48, 64];
-    hasCheckedState = computed(() => ['checkbox', 'toggle'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasCheckedState" }] : /* istanbul ignore next */ []));
-    hasPlaceholder = computed(() => !['checkbox', 'toggle', 'radio', 'spacer'].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 */ []));
-    hasMultiple = computed(() => ['select', 'upload'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasMultiple" }] : /* istanbul ignore next */ []));
-    isSelect = computed(() => this.field().type === 'select', ...(ngDevMode ? [{ debugName: "isSelect" }] : /* istanbul ignore next */ []));
-    isUpload = computed(() => this.field().type === 'upload', ...(ngDevMode ? [{ debugName: "isUpload" }] : /* istanbul ignore next */ []));
-    isRadio = computed(() => this.field().type === 'radio', ...(ngDevMode ? [{ debugName: "isRadio" }] : /* istanbul ignore next */ []));
-    isSpacer = computed(() => this.field().type === 'spacer', ...(ngDevMode ? [{ debugName: "isSpacer" }] : /* istanbul ignore next */ []));
-    hasBehaviorToggles = computed(() => !this.isSpacer(), ...(ngDevMode ? [{ debugName: "hasBehaviorToggles" }] : /* 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}${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);
-    }
-    patchSettings(changes) {
-        this.patch({
-            settings: {
-                ...this.field().settings,
-                ...changes
-            }
-        });
-    }
-    patchMultiple(multiple) {
-        if (this.field().type === 'select') {
-            this.patchSelectMultiple(multiple);
-            return;
-        }
-        this.patch({
-            multiple,
-            defaultValue: multiple ? [] : null
-        });
-    }
-    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 = this.normalizeSelectedOptions(value
-            .split('\n')
-            .map(line => line.trim())
-            .filter(Boolean)
-            .map((line, index) => {
-            const parsed = parseOptionLine(line);
-            return {
-                label: parsed?.label || `Option ${index + 1}`,
-                value: parsed?.value || `option_${index + 1}`,
-                selected: parsed?.selected || undefined
-            };
-        }));
-        this.patch({
-            options,
-            defaultValue: this.resolveSelectedDefaultValue(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  @if (!isSpacer()) {\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\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  @if (!isSpacer()) {\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\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  @if (hasBehaviorToggles()) {\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 (hasMultiple()) {\n        <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patchMultiple($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\n  @if (isUpload()) {\n    <ngs-form-field>\n      <ngs-label>Accepted file types</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().settings?.['accept'] || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patchSettings({ accept: $event })\">\n      <ngs-hint>Use MIME types separated by commas, for example image/*,application/pdf.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  @if (isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Height</ngs-label>\n      <ngs-select [ngModel]=\"field().settings?.['height'] ?? 24\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchSettings({ height: $event })\">\n        @for (height of spacerHeightOptions; track height) {\n          <ngs-option [value]=\"height\">{{ height }}px</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\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,
-                        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  @if (!isSpacer()) {\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\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  @if (!isSpacer()) {\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\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  @if (hasBehaviorToggles()) {\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 (hasMultiple()) {\n        <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patchMultiple($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\n  @if (isUpload()) {\n    <ngs-form-field>\n      <ngs-label>Accepted file types</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().settings?.['accept'] || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patchSettings({ accept: $event })\">\n      <ngs-hint>Use MIME types separated by commas, for example image/*,application/pdf.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  @if (isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Height</ngs-label>\n      <ngs-select [ngModel]=\"field().settings?.['height'] ?? 24\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchSettings({ height: $event })\">\n        @for (height of spacerHeightOptions; track height) {\n          <ngs-option [value]=\"height\">{{ height }}px</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\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];
-    showHintSetting = computed(() => this.field().type !== 'group', ...(ngDevMode ? [{ debugName: "showHintSetting" }] : /* istanbul ignore next */ []));
-    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  @if (showHintSetting()) {\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\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  @if (showHintSetting()) {\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\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 */ []));
@@ -964,10 +1137,29 @@ class FormBuilderSettingsHost {
         }
         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 */ []));
+    settingsSchema = computed(() => {
+        const definition = this.itemDefinition();
+        const config = this.settingsConfig(definition);
+        const inheritance = config?.extends ?? this.inferSettingsInheritance(definition);
+        const schemas = [
+            this.baseSettingsSchema(inheritance),
+            this.resolveOwnSettingsSchema(config, definition)
+        ].filter((schema) => !!schema);
+        return mergeSettingsSchemas(schemas);
+    }, ...(ngDevMode ? [{ debugName: "settingsSchema" }] : /* istanbul ignore next */ []));
+    settingsValue = computed(() => {
+        const item = this.section() ?? this.field();
+        const schema = this.settingsSchema();
+        const value = {};
+        if (!item || !schema) {
+            return value;
+        }
+        for (const settingField of flattenSettingsFields(schema)) {
+            value[settingField.name] = this.readSettingValue(item, settingField);
+        }
+        return value;
+    }, ...(ngDevMode ? [{ debugName: "settingsValue" }] : /* istanbul ignore next */ []));
+    legacyLoaded = signal(false, ...(ngDevMode ? [{ debugName: "legacyLoaded" }] : /* istanbul ignore next */ []));
     anchor = viewChild.required('anchor', { read: ViewContainerRef });
     constructor() {
         effect(async () => {
@@ -979,18 +1171,18 @@ class FormBuilderSettingsHost {
             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 => {
+            const legacySettings = this.legacySettingsImporter(itemDefinition) ?? 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) {
+            this.legacyLoaded.set(false);
+            if (!legacySettings) {
                 return;
             }
-            const componentType = await customSettings();
+            const componentType = await legacySettings();
             const componentRef = viewContainer.createComponent(componentType);
             componentRef.setInput('item', section ?? field);
             componentRef.setInput('field', field);
@@ -1000,23 +1192,286 @@ class FormBuilderSettingsHost {
             componentRef.setInput('update', section ? this.updateSection() : this.update());
             componentRef.setInput('updateField', this.update());
             componentRef.setInput('updateSection', this.updateSection());
-            this.customLoaded.set(true);
+            this.legacyLoaded.set(true);
+        });
+    }
+    applySettingsValue(value) {
+        const schema = this.settingsSchema();
+        const section = this.section();
+        const field = this.field();
+        if (!schema) {
+            return;
+        }
+        if (section) {
+            const patch = this.createSettingsPatch(section, schema, value);
+            if (Object.keys(patch).length) {
+                this.updateSection()?.(patch);
+            }
+            return;
+        }
+        if (field) {
+            const patch = this.createSettingsPatch(field, schema, value);
+            if (Object.keys(patch).length) {
+                this.update()?.(patch);
+            }
+        }
+    }
+    createSettingsPatch(item, schema, value) {
+        const patch = {};
+        for (const settingField of flattenSettingsFields(schema)) {
+            if (settingField.settings?.['valueAdapter'] === 'optionsText' && isFormBuilderField(item)) {
+                if (value[settingField.name] === this.readSettingValue(item, settingField)) {
+                    continue;
+                }
+                const nextOptions = parseOptionsText(String(value[settingField.name] ?? ''), item);
+                patch['options'] = nextOptions;
+                patch['defaultValue'] = resolveSelectedDefaultValue(nextOptions, item);
+                continue;
+            }
+            if (settingField.settings?.['valueAdapter'] === 'selectMultiple' && isFormBuilderField(item)) {
+                const multiple = value[settingField.name] === true;
+                if (multiple === (item.multiple === true)) {
+                    continue;
+                }
+                const options = multiple ? item.options ?? [] : normalizeSelectedOptions(item.options ?? [], { ...item, multiple });
+                patch['multiple'] = multiple;
+                patch['options'] = options;
+                patch['defaultValue'] = resolveMultipleDefaultValue(item, options, multiple);
+                continue;
+            }
+            if (settingField.settings?.['valueAdapter'] === 'multipleDefaultValue' && isFormBuilderField(item)) {
+                const multiple = value[settingField.name] === true;
+                if (multiple === (item.multiple === true)) {
+                    continue;
+                }
+                patch['multiple'] = multiple;
+                patch['defaultValue'] = multiple ? [] : null;
+                continue;
+            }
+            const nextValue = value[settingField.name];
+            if (nextValue === this.readSettingValue(item, settingField)) {
+                continue;
+            }
+            seedPathPatch(patch, item, settingField.name);
+            setPathValue(patch, settingField.name, nextValue);
+        }
+        return patch;
+    }
+    readSettingValue(item, settingField) {
+        if (settingField.settings?.['valueAdapter'] === 'optionsText' && isFormBuilderField(item)) {
+            return optionsToText(item.options ?? [], item.defaultValue);
+        }
+        const value = getPathValue(item, settingField.name);
+        return value === undefined ? settingField.defaultValue ?? null : value;
+    }
+    settingsConfig(definition) {
+        return definition?.settings && typeof definition.settings !== 'function'
+            ? definition.settings
+            : undefined;
+    }
+    legacySettingsImporter(definition) {
+        return typeof definition?.settings === 'function'
+            ? definition.settings
+            : undefined;
+    }
+    resolveOwnSettingsSchema(config, definition) {
+        const schema = config?.schema;
+        if (!schema) {
+            return null;
+        }
+        if (typeof schema !== 'function') {
+            return schema;
+        }
+        const section = this.section();
+        if (section) {
+            return schema({
+                item: section,
+                section,
+                schema: this.schema(),
+                definition,
+                update: this.updateSection(),
+                updateSection: this.updateSection()
+            });
+        }
+        const field = this.field();
+        return schema({
+            item: field,
+            field,
+            schema: this.schema(),
+            definition,
+            update: this.update(),
+            updateField: this.update()
         });
     }
-    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 });
+    inferSettingsInheritance(definition) {
+        const field = this.field();
+        if (this.section()) {
+            return 'none';
+        }
+        const kind = definition?.kind ?? field?.kind ?? 'field';
+        if (kind === 'static') {
+            return 'static';
+        }
+        if (kind === 'layout' || definition?.acceptsChildren || field?.children?.length) {
+            return 'layout';
+        }
+        return 'field';
+    }
+    baseSettingsSchema(inheritance) {
+        if (this.section()) {
+            return inheritance === 'none' ? null : FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA;
+        }
+        switch (inheritance) {
+            case 'field':
+                return FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA;
+            case 'input-field':
+                return FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA;
+            case 'layout':
+                return FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA;
+            case 'layout-container':
+                return FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA;
+            case 'static':
+                return FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA;
+            default:
+                return null;
+        }
+    }
+    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": "!settingsSchema() && !legacyLoaded()" }, 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 (settingsSchema(); as schema) {\n  <ngs-form-renderer\n    [schema]=\"schema\"\n    [value]=\"settingsValue()\"\n    [showSubmit]=\"false\"\n    (valueChange)=\"applySettingsValue($event)\"/>\n}\n\n<ng-container #anchor/>\n", dependencies: [{ kind: "component", type: FormBuilderRenderer, selector: "ngs-form-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "uploadCallback", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormRenderer"] }], 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: [
+                        FormBuilderRenderer
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-form-builder-settings-host',
+                        '[class.is-empty]': '!settingsSchema() && !legacyLoaded()'
+                    }, template: "@if (settingsSchema(); as schema) {\n  <ngs-form-renderer\n    [schema]=\"schema\"\n    [value]=\"settingsValue()\"\n    [showSubmit]=\"false\"\n    (valueChange)=\"applySettingsValue($event)\"/>\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 }] }] } });
+function mergeSettingsSchemas(schemas) {
+    if (!schemas.length) {
+        return null;
+    }
+    return {
+        sections: schemas.flatMap(schema => schema.sections.map(section => ({
+            ...section,
+            fields: section.fields.map(field => ({ ...field }))
+        })))
+    };
+}
+function flattenSettingsFields(schema) {
+    return [
+        ...(schema.fields ?? []),
+        ...schema.sections.flatMap(section => section.fields)
+    ].flatMap(field => [field, ...flattenSettingsFields({ sections: [], fields: field.children ?? [] })]);
+}
+function getPathValue(source, path) {
+    return path.split('.').reduce((value, key) => value?.[key], source);
+}
+function setPathValue(target, path, value) {
+    const keys = path.split('.');
+    let cursor = target;
+    keys.slice(0, -1).forEach(key => {
+        cursor[key] = cursor[key] ?? {};
+        cursor = cursor[key];
+    });
+    cursor[keys[keys.length - 1]] = value;
+}
+function seedPathPatch(target, source, path) {
+    const [rootKey] = path.split('.');
+    const sourceValue = source[rootKey];
+    if (!path.includes('.') || target[rootKey] !== undefined || !isPlainObject(sourceValue)) {
+        return;
+    }
+    target[rootKey] = { ...sourceValue };
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isFormBuilderField(item) {
+    return 'type' in item;
+}
+function optionsToText(options, defaultValue) {
+    return options
+        .map(option => `${option.label}:${option.value}${isOptionSelected(option, defaultValue) ? ':selected' : ''}`)
+        .join('\n');
+}
+function parseOptionsText(value, field) {
+    return normalizeSelectedOptions(value
+        .split('\n')
+        .map(line => line.trim())
+        .filter(Boolean)
+        .map((line, index) => {
+        const parsed = parseOptionLine$1(line);
+        return {
+            label: parsed?.label || `Option ${index + 1}`,
+            value: parsed?.value || `option_${index + 1}`,
+            selected: parsed?.selected || undefined
+        };
+    }), field);
+}
+function parseOptionLine$1(line) {
+    const parts = line.split(':').map(part => part.trim());
+    if (parts.length < 2 || !parts[0] || !parts[1]) {
+        return null;
+    }
+    return {
+        label: parts[0],
+        value: parts[1],
+        selected: parts[2] === 'selected'
+    };
+}
+function normalizeSelectedOptions(options, field) {
+    if (field.type === 'checkbox-list' || field.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;
+    });
+}
+function resolveSelectedDefaultValue(options, field) {
+    const selectedValues = options
+        .filter(option => option.selected)
+        .map(option => option.value);
+    if (field.type === 'checkbox-list' || field.multiple) {
+        return selectedValues;
+    }
+    return selectedValues[0] ?? null;
+}
+function resolveMultipleDefaultValue(field, options, multiple) {
+    const selectedValues = options
+        .filter(option => option.selected)
+        .map(option => option.value);
+    if (multiple) {
+        return Array.isArray(field.defaultValue)
+            ? field.defaultValue
+            : field.defaultValue == null
+                ? selectedValues
+                : [field.defaultValue];
+    }
+    return Array.isArray(field.defaultValue)
+        ? field.defaultValue[0] ?? selectedValues[0] ?? null
+        : field.defaultValue ?? selectedValues[0] ?? null;
+}
+function isOptionSelected(option, defaultValue) {
+    if (option.selected) {
+        return true;
+    }
+    return Array.isArray(defaultValue)
+        ? defaultValue.includes(option.value)
+        : defaultValue === option.value;
 }
-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';
@@ -1123,7 +1578,7 @@ class FormBuilder {
         return this.fieldTreeRootNodes;
     }, ...(ngDevMode ? [{ debugName: "fieldTree" }] : /* istanbul ignore next */ []));
     fieldTreeChildrenAccessor = (node) => node.children ?? [];
-    hasFieldTreeChildren = (_, node) => !!node.children?.length;
+    hasFieldTreeChildren = (_, node) => !!node.children;
     trackFieldTreeNode = (_, node) => node.id;
     fieldTreeDraggablePredicate = (_node) => true;
     fieldTreeDropPredicate = (source, target, position) => this.canDropFieldTreeNode(source, target, position);
@@ -1341,7 +1796,7 @@ class FormBuilder {
     }
     toggleFieldTreeNode(tree, node, event) {
         event.stopPropagation();
-        if (!node.children?.length) {
+        if (!node.children) {
             return;
         }
         if (tree.isExpanded(node)) {
@@ -1679,11 +2134,6 @@ class FormBuilder {
             kind,
             label: baseLabel,
             width: definition.defaults?.width ?? this.defaultWidth(definition.type),
-            visibility: {
-                form: true,
-                email: true,
-                pdf: true
-            },
             ...definition.defaults
         };
         if (field.defaultValue === undefined) {
@@ -1875,7 +2325,7 @@ class FormBuilder {
                     return;
                 }
                 for (const node of this.flattenFieldTree(this.fieldTree())) {
-                    if (node.children?.length && expandedIds.has(node.id)) {
+                    if (node.children && expandedIds.has(node.id)) {
                         tree.expand(node);
                     }
                 }
@@ -1899,7 +2349,7 @@ class FormBuilder {
         }
         const expandableIds = path
             .slice(0, -1)
-            .filter(node => !!node.children?.length)
+            .filter(node => !!node.children)
             .map(node => node.id);
         if (expandableIds.length) {
             this.expandedFieldTreeNodeIds.update(ids => {
@@ -1915,7 +2365,7 @@ class FormBuilder {
                 const tree = this.actualFieldsTree();
                 if (tree) {
                     for (const node of path.slice(0, -1)) {
-                        if (node.children?.length) {
+                        if (node.children) {
                             tree.expand(node);
                         }
                     }
@@ -2075,9 +2525,9 @@ class FormBuilder {
         node.kind = 'field';
         node.field = field;
         node.section = section;
-        if (children?.length) {
+        if (children?.length || this.isContainerField(field)) {
             node.children ??= [];
-            replaceArrayContents(node.children, children);
+            replaceArrayContents(node.children, children ?? []);
         }
         else {
             node.children = undefined;
@@ -2238,7 +2688,6 @@ function cloneField(field) {
         ...field,
         options: field.options?.map(option => ({ ...option })),
         validation: field.validation?.map(rule => ({ ...rule })),
-        visibility: field.visibility ? { ...field.visibility } : undefined,
         settings: field.settings ? { ...field.settings } : undefined,
         children: field.children?.map(cloneField)
     };
@@ -2306,9 +2755,253 @@ function containsField(field, fieldId) {
     return (field.children ?? []).some(child => child.id === fieldId || containsField(child, fieldId));
 }
 
+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'];
+    spacerHeightOptions = [8, 16, 24, 32, 48, 64];
+    hasCheckedState = computed(() => ['checkbox', 'toggle'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasCheckedState" }] : /* istanbul ignore next */ []));
+    hasPlaceholder = computed(() => !['checkbox', 'toggle', 'radio', 'spacer'].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 */ []));
+    hasMultiple = computed(() => ['select', 'upload'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasMultiple" }] : /* istanbul ignore next */ []));
+    isSelect = computed(() => this.field().type === 'select', ...(ngDevMode ? [{ debugName: "isSelect" }] : /* istanbul ignore next */ []));
+    isUpload = computed(() => this.field().type === 'upload', ...(ngDevMode ? [{ debugName: "isUpload" }] : /* istanbul ignore next */ []));
+    isRadio = computed(() => this.field().type === 'radio', ...(ngDevMode ? [{ debugName: "isRadio" }] : /* istanbul ignore next */ []));
+    isSpacer = computed(() => this.field().type === 'spacer', ...(ngDevMode ? [{ debugName: "isSpacer" }] : /* istanbul ignore next */ []));
+    hasBehaviorToggles = computed(() => !this.isSpacer(), ...(ngDevMode ? [{ debugName: "hasBehaviorToggles" }] : /* 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}${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);
+    }
+    patchSettings(changes) {
+        this.patch({
+            settings: {
+                ...this.field().settings,
+                ...changes
+            }
+        });
+    }
+    patchMultiple(multiple) {
+        if (this.field().type === 'select') {
+            this.patchSelectMultiple(multiple);
+            return;
+        }
+        this.patch({
+            multiple,
+            defaultValue: multiple ? [] : null
+        });
+    }
+    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 = this.normalizeSelectedOptions(value
+            .split('\n')
+            .map(line => line.trim())
+            .filter(Boolean)
+            .map((line, index) => {
+            const parsed = parseOptionLine(line);
+            return {
+                label: parsed?.label || `Option ${index + 1}`,
+                value: parsed?.value || `option_${index + 1}`,
+                selected: parsed?.selected || undefined
+            };
+        }));
+        this.patch({
+            options,
+            defaultValue: this.resolveSelectedDefaultValue(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  @if (!isSpacer()) {\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\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  @if (!isSpacer()) {\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\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  @if (hasBehaviorToggles()) {\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 (hasMultiple()) {\n        <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patchMultiple($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\n  @if (isUpload()) {\n    <ngs-form-field>\n      <ngs-label>Accepted file types</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().settings?.['accept'] || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patchSettings({ accept: $event })\">\n      <ngs-hint>Use MIME types separated by commas, for example image/*,application/pdf.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  @if (isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Height</ngs-label>\n      <ngs-select [ngModel]=\"field().settings?.['height'] ?? 24\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchSettings({ height: $event })\">\n        @for (height of spacerHeightOptions; track height) {\n          <ngs-option [value]=\"height\">{{ height }}px</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\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,
+                        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  @if (!isSpacer()) {\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\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  @if (!isSpacer()) {\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\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  @if (hasBehaviorToggles()) {\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 (hasMultiple()) {\n        <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patchMultiple($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\n  @if (isUpload()) {\n    <ngs-form-field>\n      <ngs-label>Accepted file types</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().settings?.['accept'] || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patchSettings({ accept: $event })\">\n      <ngs-hint>Use MIME types separated by commas, for example image/*,application/pdf.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  @if (isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Height</ngs-label>\n      <ngs-select [ngModel]=\"field().settings?.['height'] ?? 24\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchSettings({ height: $event })\">\n        @for (height of spacerHeightOptions; track height) {\n          <ngs-option [value]=\"height\">{{ height }}px</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\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];
+    showHintSetting = computed(() => this.field().type !== 'group', ...(ngDevMode ? [{ debugName: "showHintSetting" }] : /* istanbul ignore next */ []));
+    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  @if (showHintSetting()) {\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\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  @if (showHintSetting()) {\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\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 }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_ITEMS, FORM_BUILDER_SETTINGS, FORM_BUILDER_UPLOAD_CALLBACK, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, validatorsFromRules };
+export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA, FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA, FORM_BUILDER_ITEMS, FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA, FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA, FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA, FORM_BUILDER_SETTINGS, FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA, FORM_BUILDER_UPLOAD_CALLBACK, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, provideFormBuilderField, provideFormBuilderFields, validatorsFromRules };
 //# sourceMappingURL=ngstarter-ui-components-form-builder.mjs.map