@ngstarter-ui/components 21.0.47 → 21.0.49

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, model, output, ElementRef, DestroyRef } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, model, output, ElementRef, numberAttribute, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, FormArray, FormGroup, FormsModule } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
@@ -198,6 +198,20 @@ const OPTIONS_SETTINGS_SCHEMA = {
         }
     ]
 };
+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',
@@ -239,6 +253,21 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         },
         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',
@@ -755,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,
@@ -810,11 +839,12 @@ 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 {
+class FormRenderer {
     providedItems = inject(FORM_BUILDER_ITEMS, { optional: true }) ?? [];
     providedFields = inject(FORM_BUILDER_FIELDS, { optional: true }) ?? [];
     orphanControls = new Map();
@@ -848,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 => {
@@ -901,7 +915,7 @@ class FormBuilderRenderer {
             field.type === 'grid';
     }
     visibleChildren(field) {
-        return this.visibleFields(field.children ?? []);
+        return field.children ?? [];
     }
     isRepeaterField(field) {
         return field.type === 'repeater';
@@ -1007,14 +1021,6 @@ class FormBuilderRenderer {
         }
         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
-        }));
-    }
     fieldInitialValue(field) {
         if (field.defaultValue !== undefined) {
             return field.defaultValue;
@@ -1052,10 +1058,10 @@ 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 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormRenderer, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormRenderer, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-form-renderer', exportAs: 'ngsFormRenderer', imports: [
                         NgTemplateOutlet,
@@ -1331,12 +1337,12 @@ class FormBuilderSettingsHost {
         }
     }
     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 });
+    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: FormRenderer, 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
+                        FormRenderer
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-form-builder-settings-host',
                         '[class.is-empty]': '!settingsSchema() && !legacyLoaded()'
@@ -1485,9 +1491,12 @@ class FormBuilder {
     fieldTreeRootNodes = [];
     fieldTreeStructureKey = '';
     suppressPaletteClick = false;
+    pendingNativeDropTarget = null;
+    nativeDropTargetDelayTimer = null;
     schema = model(createDefaultFormBuilderSchema(), ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
     paletteTitle = input('Fields', ...(ngDevMode ? [{ debugName: "paletteTitle" }] : /* istanbul ignore next */ []));
     inspectorTitle = input('Field properties', ...(ngDevMode ? [{ debugName: "inspectorTitle" }] : /* istanbul ignore next */ []));
+    canvasDropPlaceholderDelay = input(200, { ...(ngDevMode ? { debugName: "canvasDropPlaceholderDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     uploadCallback = input(undefined, ...(ngDevMode ? [{ debugName: "uploadCallback" }] : /* istanbul ignore next */ []));
     fieldSelected = output();
     fieldAdded = output();
@@ -1585,6 +1594,9 @@ class FormBuilder {
             this.updateSection(section, changes);
         }
     };
+    ngOnDestroy() {
+        this.clearPendingNativeDropTarget();
+    }
     paletteDragStarted(event, definition) {
         this.suppressPaletteClick = true;
         this.nativeDragItem.set({ kind: 'field', definition });
@@ -1606,7 +1618,7 @@ class FormBuilder {
     }
     paletteDragEnded() {
         this.nativeDragItem.set(null);
-        this.setNativeDropTarget(null);
+        this.clearNativeDropTarget();
         window.setTimeout(() => {
             this.suppressPaletteClick = false;
         });
@@ -1675,9 +1687,7 @@ class FormBuilder {
             target.contains(relatedTarget)) {
             return;
         }
-        if (this.nativeDropTarget()?.containerId === containerId) {
-            this.setNativeDropTarget(null);
-        }
+        this.clearNativeDropTarget(containerId);
     }
     nativeFieldDrop(event, containerId) {
         const item = this.resolveNativeDragItem(event);
@@ -1686,7 +1696,7 @@ class FormBuilder {
         }
         event.preventDefault();
         event.stopPropagation();
-        const target = this.nativeDropTarget();
+        const target = this.nativeDropTarget() ?? this.pendingNativeDropTarget?.target ?? null;
         const index = target?.containerId === containerId ? target.index : 0;
         if (item.kind === 'section') {
             if (containerId !== ROOT_DROP_LIST_ID) {
@@ -1698,7 +1708,7 @@ class FormBuilder {
             this.insertNativeField(item.definition, containerId, index);
         }
         this.nativeDragItem.set(null);
-        this.setNativeDropTarget(null);
+        this.clearNativeDropTarget();
     }
     isNativeDropTarget(containerId, index) {
         const target = this.nativeDropTarget();
@@ -1957,7 +1967,7 @@ class FormBuilder {
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect = 'copy';
         }
-        this.setNativeDropTarget({
+        this.scheduleNativeDropTarget(event, {
             containerId,
             index: this.resolveNativeDropIndex(event, itemSelector)
         });
@@ -1971,17 +1981,70 @@ class FormBuilder {
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect = 'copy';
         }
-        this.setNativeDropTarget({ containerId, index });
+        this.scheduleNativeDropTarget(event, { containerId, index });
+    }
+    scheduleNativeDropTarget(event, target) {
+        const current = this.nativeDropTarget();
+        if (this.isSameNativeDropTarget(current, target)) {
+            this.clearPendingNativeDropTarget();
+            return;
+        }
+        const delay = Math.max(0, this.canvasDropPlaceholderDelay() || 0);
+        if (delay === 0) {
+            this.clearPendingNativeDropTarget();
+            this.setNativeDropTarget(target);
+            return;
+        }
+        if (this.pendingNativeDropTarget &&
+            this.isSameNativeDropTarget(this.pendingNativeDropTarget.target, target) &&
+            this.pendingNativeDropTarget.clientX === event.clientX &&
+            this.pendingNativeDropTarget.clientY === event.clientY) {
+            return;
+        }
+        this.clearPendingNativeDropTarget();
+        this.setNativeDropTarget(null);
+        const pending = {
+            target,
+            clientX: event.clientX,
+            clientY: event.clientY
+        };
+        this.pendingNativeDropTarget = pending;
+        this.nativeDropTargetDelayTimer = window.setTimeout(() => {
+            if (this.pendingNativeDropTarget !== pending) {
+                return;
+            }
+            this.pendingNativeDropTarget = null;
+            this.nativeDropTargetDelayTimer = null;
+            this.setNativeDropTarget(target);
+        }, delay);
+    }
+    clearNativeDropTarget(containerId) {
+        if (!containerId || this.pendingNativeDropTarget?.target.containerId === containerId) {
+            this.clearPendingNativeDropTarget();
+        }
+        if (!containerId || this.nativeDropTarget()?.containerId === containerId) {
+            this.setNativeDropTarget(null);
+        }
+    }
+    clearPendingNativeDropTarget() {
+        if (this.nativeDropTargetDelayTimer !== null) {
+            window.clearTimeout(this.nativeDropTargetDelayTimer);
+            this.nativeDropTargetDelayTimer = null;
+        }
+        this.pendingNativeDropTarget = null;
     }
     setNativeDropTarget(target) {
         const current = this.nativeDropTarget();
-        if (current?.containerId === target?.containerId && current?.index === target?.index) {
+        if (this.isSameNativeDropTarget(current, target)) {
             return;
         }
         const previousRects = this.captureCanvasItemRects();
         this.nativeDropTarget.set(target);
         this.afterNextPaint(() => this.animateCanvasItemMoves(previousRects));
     }
+    isSameNativeDropTarget(first, second) {
+        return first?.containerId === second?.containerId && first?.index === second?.index;
+    }
     captureCanvasItemRects() {
         const rects = new Map();
         for (const element of this.getCanvasAnimatedItems()) {
@@ -2128,11 +2191,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) {
@@ -2617,7 +2675,7 @@ class FormBuilder {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilder, isStandalone: true, selector: "ngs-form-builder", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, paletteTitle: { classPropertyName: "paletteTitle", publicName: "paletteTitle", isSignal: true, isRequired: false, transformFunction: null }, inspectorTitle: { classPropertyName: "inspectorTitle", publicName: "inspectorTitle", isSignal: true, isRequired: false, transformFunction: null }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schema: "schemaChange", fieldSelected: "fieldSelected", fieldAdded: "fieldAdded", fieldRemoved: "fieldRemoved" }, host: { classAttribute: "ngs-form-builder" }, viewQueries: [{ propertyName: "actualFieldsTree", first: true, predicate: ["actualFieldsTree"], descendants: true, isSignal: true }], exportAs: ["ngsFormBuilder"], ngImport: i0, template: "<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      @if (isContainerField(field)) {\n        <div\n          class=\"ngs-form-builder-field is-container\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n          (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n          (drop)=\"nativeContainerFieldDrop($event, field)\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <div class=\"ngs-form-builder-grid-field\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldList\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: field.children ?? [],\n                containerId: fieldDropListId(field),\n                section\n              }\"/>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"ngs-form-builder-field\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <ngs-form-builder-field-host\n            [field]=\"field\"\n            [control]=\"previewControl(field)\"\n            [definitions]=\"definitions()\"\n            [uploadCallback]=\"uploadCallback()\"\n            [readonly]=\"true\"\n            [editableCanvas]=\"true\"/>\n        </div>\n      }\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\">\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-border px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-border\">\n    <ngs-tab-group\n      animationDuration=\"0ms\"\n      [selectedIndex]=\"fieldsTabIndex()\"\n      (selectedIndexChange)=\"fieldsTabIndex.set($event)\">\n      <ngs-tab label=\"Fields\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"flex flex-col gap-5 p-4\">\n            <section class=\"flex flex-col gap-2\">\n              <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n              <button\n                type=\"button\"\n                class=\"ngs-form-builder-palette-item\"\n                draggable=\"true\"\n                (dragstart)=\"sectionPaletteDragStarted($event)\"\n                (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n              </button>\n\n              @for (definition of layoutDefinitions(); track definition.type) {\n                <button\n                  type=\"button\"\n                  class=\"ngs-form-builder-palette-item\"\n                  draggable=\"true\"\n                  (dragstart)=\"paletteDragStarted($event, definition)\"\n                  (dragend)=\"paletteDragEnded()\"\n                  (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                </button>\n              }\n            </section>\n\n            @for (group of paletteGroups(); track group.name) {\n              <section class=\"flex flex-col gap-2\">\n                <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                <div class=\"flex flex-col gap-2\">\n                  @for (definition of group.fields; track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n      <ngs-tab label=\"Layers\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"px-4 py-4\">\n            <ngs-tree\n              #actualFieldsTree=\"ngsTree\"\n              [dataSource]=\"fieldTree()\"\n              [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n              [trackBy]=\"trackFieldTreeNode\"\n              [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n              [dropPredicate]=\"fieldTreeDropPredicate\"\n              [nodePaddingIndent]=\"80\"\n              [reorderOnDrop]=\"false\"\n              (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n              draggable>\n              <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                  <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                  <span>{{ source.label }}</span>\n                </div>\n              </ng-template>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                             ngsTreeNodePadding\n                             [value]=\"node.id\"\n                             [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                <button\n                  ngsIconButton\n                  class=\"ngs-form-builder-tree-toggle\"\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                  <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                </button>\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n  <!--                  @if (node.name) {-->\n  <!--                    <small>{{ node.name }}</small>-->\n  <!--                  }-->\n                </button>\n              </ngs-tree-node>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    {{ node.label }}\n<!--                  <span class=\"inline-flex flex-col\">-->\n<!--                    -->\n<!--                    @if (node.name) {-->\n<!--                      <small>{{ node.name }}</small>-->\n<!--                    }-->\n<!--                  </span>-->\n                </button>\n              </ngs-tree-node>\n            </ngs-tree>\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n    </ngs-tab-group>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              @if (isContainerField(field)) {\n                <div\n                  class=\"ngs-form-builder-field is-container\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n                  (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n                  (drop)=\"nativeContainerFieldDrop($event, field)\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"ngs-form-builder-grid-field\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: field.children ?? [],\n                        containerId: fieldDropListId(field)\n                      }\"/>\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"ngs-form-builder-field\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <ngs-form-builder-field-host\n                    [field]=\"field\"\n                    [control]=\"previewControl(field)\"\n                    [definitions]=\"definitions()\"\n                    [uploadCallback]=\"uploadCallback()\"\n                    [readonly]=\"true\"\n                    [editableCanvas]=\"true\"/>\n                </div>\n              }\n            } @else if (item.section; as section) {\n              <ngs-card class=\"ngs-form-builder-section\"\n                        [attr.data-form-builder-section-id]=\"section.id\"\n                        (dragover)=\"nativeSectionDragOver($event, section)\"\n                        (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                        (drop)=\"nativeSectionDrop($event, section)\"\n                        (click)=\"selectSection(section)\">\n                <ngs-card-header>\n                  <div class=\"ngs-form-builder-section-heading\">\n                    <input ngsInput\n                           class=\"ngs-form-builder-section-title\"\n                           [ngModel]=\"section.title\"\n                           [ngModelOptions]=\"{standalone: true}\"\n                           (ngModelChange)=\"updateSection(section, { title: $event })\"\n                           aria-label=\"Section title\">\n                  </div>\n                  @if (section.description) {\n                    <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                  }\n\n                  <ngs-card-aside>\n                    <div class=\"ngs-form-builder-section-actions\">\n                      <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                        <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                      </button>\n                      <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                        <ngs-icon name=\"fluent:delete-24-regular\"/>\n                      </button>\n                    </div>\n                  </ngs-card-aside>\n                </ngs-card-header>\n\n                @if (!isSectionCollapsed(section)) {\n                  <ngs-card-content>\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: section.fields,\n                        containerId: sectionDropListId(section),\n                        section\n                      }\"/>\n                  </ngs-card-content>\n                } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                  <ngs-card-content>\n                    <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                    </div>\n                  </ngs-card-content>\n                }\n              </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-border\">\n    @if (selectedField() || selectedSection()) {\n      <ngs-panel-header class=\"ps-5 pe-2 border-b border-border\">\n        <ngs-toolbar>\n          <ngs-toolbar-title class=\"truncate\">\n            {{ inspectorTitle() }}\n          </ngs-toolbar-title>\n          <ngs-toolbar-subtitle>\n            {{ selectedField()?.label || selectedSection()?.title }}\n          </ngs-toolbar-subtitle>\n          <ngs-toolbar-spacer/>\n          <ngs-toolbar-item>\n            <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n              <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n            </button>\n          </ngs-toolbar-item>\n        </ngs-toolbar>\n      </ngs-panel-header>\n    }\n\n    <ngs-panel-content>\n      @if (selectedField() || selectedSection()) {\n        <ngs-scrollbar-area [absolute]=\"true\">\n          <div class=\"flex flex-col gap-4 p-5\">\n            <ngs-form-builder-settings-host\n              [field]=\"selectedField()\"\n              [section]=\"selectedSection()\"\n              [schema]=\"schema()\"\n              [definitions]=\"definitions()\"\n              [settingsDefinitions]=\"settingsDefinitions()\"\n              [update]=\"updateSelectedField\"\n              [updateSection]=\"updateSelectedSection\"/>\n\n            @if (selectedField(); as field) {\n              <div class=\"mt-3\">\n                <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n                  <ngs-icon name=\"fluent:delete-24-regular\"/>\n                  Delete field\n                </button>\n              </div>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      } @else {\n        <div class=\"ngs-form-builder-empty-inspector\">\n          Select a field on the canvas or in the fields tree to edit its settings.\n        </div>\n      }\n    </ngs-panel-content>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-renderer\n      [schema]=\"schema()\"\n      [uploadCallback]=\"uploadCallback()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-on-surface);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);color:var(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-palette-item:hover{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 96%)}}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{flex:none;width:calc(var(--spacing, .25rem) * 10)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed;border-color:var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{height:100%;min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4);grid-column:span 12}:host .ngs-form-builder-native-ghost-section{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}:host .ngs-form-builder-canvas-list{display:grid;flex:1;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:calc(var(--spacing, .25rem) * 4);min-height:100%}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host ngs-panel-aside.ngs-form-builder-inspector{display:flex;flex-direction:column}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-header{flex:none}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-content{min-height:0;flex:1 1 auto;overflow:hidden}:host .ngs-form-builder-empty-inspector{display:flex;min-height:100%;align-items:center;justify-content:center;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .ngs-form-builder-field-placeholder{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Card, selector: "ngs-card", inputs: ["appearance"], exportAs: ["ngsCard"] }, { kind: "component", type: CardAside, selector: "ngs-card-aside, [ngs-card-aside], ngsCardAside" }, { kind: "component", type: CardContent, selector: "ngs-card-content, [ngs-card-content], [ngsCardContent]", inputs: ["withoutPadding"], exportAs: ["ngsCardContent"] }, { kind: "component", type: CardHeader, selector: "ngs-card-header", exportAs: ["ngsCardHeader"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: Tree, selector: "ngs-tree", inputs: ["checkable", "selectable", "draggable", "draggablePredicate", "dropPredicate", "reorderOnDrop", "dragPreview", "nodePaddingIndent", "childrenKey", "filterValue", "filterPredicate", "filterMode"], outputs: ["checkedChange", "selectedChange", "nodeDrop"], exportAs: ["ngsTree"] }, { kind: "directive", type: TreeDragPlaceholder, selector: "ng-template[ngsTreeDragPlaceholder]" }, { kind: "component", type: TreeNode, selector: "ngs-tree-node", inputs: ["tabIndex", "value", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["ngsTreeNode"] }, { kind: "directive", type: TreeNodeDef, selector: "[ngsTreeNodeDef]", inputs: ["ngsTreeNodeDefWhen", "ngsTreeNode"] }, { kind: "directive", type: TreeNodePadding, selector: "[ngsTreeNodePadding]", inputs: ["ngsTreeNodePadding", "ngsTreeNodePaddingIndent"] }, { kind: "component", type: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas", "uploadCallback"], exportAs: ["ngsFormBuilderFieldHost"] }, { kind: "component", type: FormBuilderRenderer, selector: "ngs-form-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "uploadCallback", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormRenderer"] }, { kind: "component", type: FormBuilderSettingsHost, selector: "ngs-form-builder-settings-host", inputs: ["field", "section", "schema", "definitions", "settingsDefinitions", "update", "updateSection"], exportAs: ["ngsFormBuilderSettingsHost"] }, { kind: "component", type: ToolbarSubtitle, selector: "ngs-toolbar-subtitle", exportAs: ["ngsToolbarSubtitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilder, isStandalone: true, selector: "ngs-form-builder", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, paletteTitle: { classPropertyName: "paletteTitle", publicName: "paletteTitle", isSignal: true, isRequired: false, transformFunction: null }, inspectorTitle: { classPropertyName: "inspectorTitle", publicName: "inspectorTitle", isSignal: true, isRequired: false, transformFunction: null }, canvasDropPlaceholderDelay: { classPropertyName: "canvasDropPlaceholderDelay", publicName: "canvasDropPlaceholderDelay", isSignal: true, isRequired: false, transformFunction: null }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schema: "schemaChange", fieldSelected: "fieldSelected", fieldAdded: "fieldAdded", fieldRemoved: "fieldRemoved" }, host: { classAttribute: "ngs-form-builder" }, viewQueries: [{ propertyName: "actualFieldsTree", first: true, predicate: ["actualFieldsTree"], descendants: true, isSignal: true }], exportAs: ["ngsFormBuilder"], ngImport: i0, template: "<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\"></div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      @if (isContainerField(field)) {\n        <div\n          class=\"ngs-form-builder-field is-container\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n          (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n          (drop)=\"nativeContainerFieldDrop($event, field)\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <div class=\"ngs-form-builder-grid-field\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldList\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: field.children ?? [],\n                containerId: fieldDropListId(field),\n                section\n              }\"/>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"ngs-form-builder-field\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <ngs-form-builder-field-host\n            [field]=\"field\"\n            [control]=\"previewControl(field)\"\n            [definitions]=\"definitions()\"\n            [uploadCallback]=\"uploadCallback()\"\n            [readonly]=\"true\"\n            [editableCanvas]=\"true\"/>\n        </div>\n      }\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\">\n  <ngs-panel-header autoHeight class=\"border-b border-border px-5 py-3\">\n    <ngs-toolbar>\n      <div class=\"min-w-0\">\n        <ngs-toolbar-subtitle>Form builder</ngs-toolbar-subtitle>\n        <ngs-toolbar-title appearance=\"large\" class=\"truncate\">{{ schema().title || 'Untitled form' }}</ngs-toolbar-title>\n      </div>\n\n      <ngs-toolbar-spacer/>\n\n      <ngs-toolbar-item>\n        <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n          <ngs-icon name=\"fluent:eye-24-regular\"/>\n          Preview\n        </button>\n      </ngs-toolbar-item>\n    </ngs-toolbar>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-border\">\n    <ngs-tab-group\n      animationDuration=\"0ms\"\n      [selectedIndex]=\"fieldsTabIndex()\"\n      (selectedIndexChange)=\"fieldsTabIndex.set($event)\">\n      <ngs-tab label=\"Fields\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"flex flex-col gap-5 p-4\">\n            <section class=\"flex flex-col gap-2\">\n              <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n              <button\n                type=\"button\"\n                class=\"ngs-form-builder-palette-item\"\n                draggable=\"true\"\n                (dragstart)=\"sectionPaletteDragStarted($event)\"\n                (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n              </button>\n\n              @for (definition of layoutDefinitions(); track definition.type) {\n                <button\n                  type=\"button\"\n                  class=\"ngs-form-builder-palette-item\"\n                  draggable=\"true\"\n                  (dragstart)=\"paletteDragStarted($event, definition)\"\n                  (dragend)=\"paletteDragEnded()\"\n                  (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                </button>\n              }\n            </section>\n\n            @for (group of paletteGroups(); track group.name) {\n              <section class=\"flex flex-col gap-2\">\n                <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                <div class=\"flex flex-col gap-2\">\n                  @for (definition of group.fields; track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n      <ngs-tab label=\"Layers\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"px-4 py-4\">\n            <ngs-tree\n              #actualFieldsTree=\"ngsTree\"\n              [dataSource]=\"fieldTree()\"\n              [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n              [trackBy]=\"trackFieldTreeNode\"\n              [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n              [dropPredicate]=\"fieldTreeDropPredicate\"\n              [nodePaddingIndent]=\"80\"\n              [reorderOnDrop]=\"false\"\n              (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n              draggable>\n              <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                  <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                  <span>{{ source.label }}</span>\n                </div>\n              </ng-template>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                             ngsTreeNodePadding\n                             [value]=\"node.id\"\n                             [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                <button\n                  ngsIconButton\n                  class=\"ngs-form-builder-tree-toggle\"\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                  <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                </button>\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n  <!--                  @if (node.name) {-->\n  <!--                    <small>{{ node.name }}</small>-->\n  <!--                  }-->\n                </button>\n              </ngs-tree-node>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    {{ node.label }}\n<!--                  <span class=\"inline-flex flex-col\">-->\n<!--                    -->\n<!--                    @if (node.name) {-->\n<!--                      <small>{{ node.name }}</small>-->\n<!--                    }-->\n<!--                  </span>-->\n                </button>\n              </ngs-tree-node>\n            </ngs-tree>\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n    </ngs-tab-group>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-5 p-6\">\n        <div\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              @if (isContainerField(field)) {\n                <div\n                  class=\"ngs-form-builder-field is-container\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n                  (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n                  (drop)=\"nativeContainerFieldDrop($event, field)\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"ngs-form-builder-grid-field\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: field.children ?? [],\n                        containerId: fieldDropListId(field)\n                      }\"/>\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"ngs-form-builder-field\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <ngs-form-builder-field-host\n                    [field]=\"field\"\n                    [control]=\"previewControl(field)\"\n                    [definitions]=\"definitions()\"\n                    [uploadCallback]=\"uploadCallback()\"\n                    [readonly]=\"true\"\n                    [editableCanvas]=\"true\"/>\n                </div>\n              }\n            } @else if (item.section; as section) {\n              <ngs-card class=\"ngs-form-builder-section\"\n                        [attr.data-form-builder-section-id]=\"section.id\"\n                        (dragover)=\"nativeSectionDragOver($event, section)\"\n                        (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                        (drop)=\"nativeSectionDrop($event, section)\"\n                        (click)=\"selectSection(section)\">\n                <ngs-card-header>\n                  <div class=\"ngs-form-builder-section-heading\">\n                    <input ngsInput\n                           class=\"ngs-form-builder-section-title\"\n                           [ngModel]=\"section.title\"\n                           [ngModelOptions]=\"{standalone: true}\"\n                           (ngModelChange)=\"updateSection(section, { title: $event })\"\n                           aria-label=\"Section title\">\n                  </div>\n                  @if (section.description) {\n                    <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                  }\n\n                  <ngs-card-aside>\n                    <div class=\"ngs-form-builder-section-actions\">\n                      <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                        <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                      </button>\n                      <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                        <ngs-icon name=\"fluent:delete-24-regular\"/>\n                      </button>\n                    </div>\n                  </ngs-card-aside>\n                </ngs-card-header>\n\n                @if (!isSectionCollapsed(section)) {\n                  <ngs-card-content>\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: section.fields,\n                        containerId: sectionDropListId(section),\n                        section\n                      }\"/>\n                  </ngs-card-content>\n                } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                  <ngs-card-content>\n                    <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                    </div>\n                  </ngs-card-content>\n                }\n              </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-border\">\n    @if (selectedField() || selectedSection()) {\n      <ngs-panel-header class=\"ps-5 pe-2 border-b border-border\">\n        <ngs-toolbar>\n          <ngs-toolbar-title class=\"truncate\">\n            {{ inspectorTitle() }}\n          </ngs-toolbar-title>\n          <ngs-toolbar-subtitle>\n            {{ selectedField()?.label || selectedSection()?.title }}\n          </ngs-toolbar-subtitle>\n          <ngs-toolbar-spacer/>\n          <ngs-toolbar-item>\n            <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n              <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n            </button>\n          </ngs-toolbar-item>\n        </ngs-toolbar>\n      </ngs-panel-header>\n    }\n\n    <ngs-panel-content>\n      @if (selectedField() || selectedSection()) {\n        <ngs-scrollbar-area [absolute]=\"true\">\n          <div class=\"flex flex-col gap-4 p-5\">\n            <ngs-form-builder-settings-host\n              [field]=\"selectedField()\"\n              [section]=\"selectedSection()\"\n              [schema]=\"schema()\"\n              [definitions]=\"definitions()\"\n              [settingsDefinitions]=\"settingsDefinitions()\"\n              [update]=\"updateSelectedField\"\n              [updateSection]=\"updateSelectedSection\"/>\n\n            @if (selectedField(); as field) {\n              <div class=\"mt-3\">\n                <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n                  <ngs-icon name=\"fluent:delete-24-regular\"/>\n                  Delete field\n                </button>\n              </div>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      } @else {\n        <div class=\"ngs-form-builder-empty-inspector\">\n          Select a field on the canvas or in the fields tree to edit its settings.\n        </div>\n      }\n    </ngs-panel-content>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-renderer\n      [schema]=\"schema()\"\n      [uploadCallback]=\"uploadCallback()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid;border-color:var(--ngs-color-border);background:var(--ngs-color-surface-container-lowest);color:var(--ngs-color-on-surface);border-radius:var(--ngs-radius-current);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);color:var(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-palette-item:hover{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 96%)}}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{flex:none;width:calc(var(--spacing, .25rem) * 10)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed;border-color:var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{height:100%;min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4);grid-column:span 12}:host .ngs-form-builder-native-ghost-section{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}:host .ngs-form-builder-canvas-list{display:grid;flex:1;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:calc(var(--spacing, .25rem) * 4);min-height:100%}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host ngs-panel-aside.ngs-form-builder-inspector{display:flex;flex-direction:column}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-header{flex:none}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-content{min-height:0;flex:1 1 auto;overflow:hidden}:host .ngs-form-builder-empty-inspector{display:flex;min-height:100%;align-items:center;justify-content:center;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .ngs-form-builder-field-placeholder{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;min-height:calc(var(--spacing, .25rem) * 16);opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Card, selector: "ngs-card", inputs: ["appearance"], exportAs: ["ngsCard"] }, { kind: "component", type: CardAside, selector: "ngs-card-aside, [ngs-card-aside], ngsCardAside" }, { kind: "component", type: CardContent, selector: "ngs-card-content, [ngs-card-content], [ngsCardContent]", inputs: ["withoutPadding"], exportAs: ["ngsCardContent"] }, { kind: "component", type: CardHeader, selector: "ngs-card-header", exportAs: ["ngsCardHeader"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", inputs: ["appearance"], exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: Tree, selector: "ngs-tree", inputs: ["checkable", "selectable", "draggable", "draggablePredicate", "dropPredicate", "reorderOnDrop", "dragPreview", "nodePaddingIndent", "childrenKey", "filterValue", "filterPredicate", "filterMode"], outputs: ["checkedChange", "selectedChange", "nodeDrop"], exportAs: ["ngsTree"] }, { kind: "directive", type: TreeDragPlaceholder, selector: "ng-template[ngsTreeDragPlaceholder]" }, { kind: "component", type: TreeNode, selector: "ngs-tree-node", inputs: ["tabIndex", "value", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["ngsTreeNode"] }, { kind: "directive", type: TreeNodeDef, selector: "[ngsTreeNodeDef]", inputs: ["ngsTreeNodeDefWhen", "ngsTreeNode"] }, { kind: "directive", type: TreeNodePadding, selector: "[ngsTreeNodePadding]", inputs: ["ngsTreeNodePadding", "ngsTreeNodePaddingIndent"] }, { kind: "component", type: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas", "uploadCallback"], exportAs: ["ngsFormBuilderFieldHost"] }, { kind: "component", type: FormRenderer, selector: "ngs-form-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "uploadCallback", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormRenderer"] }, { kind: "component", type: FormBuilderSettingsHost, selector: "ngs-form-builder-settings-host", inputs: ["field", "section", "schema", "definitions", "settingsDefinitions", "update", "updateSection"], exportAs: ["ngsFormBuilderSettingsHost"] }, { kind: "component", type: ToolbarSubtitle, selector: "ngs-toolbar-subtitle", exportAs: ["ngsToolbarSubtitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilder, decorators: [{
             type: Component,
@@ -2653,13 +2711,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         TreeNodeDef,
                         TreeNodePadding,
                         FormBuilderFieldHost,
-                        FormBuilderRenderer,
+                        FormRenderer,
                         FormBuilderSettingsHost,
                         ToolbarSubtitle
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-form-builder'
-                    }, template: "<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      @if (isContainerField(field)) {\n        <div\n          class=\"ngs-form-builder-field is-container\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n          (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n          (drop)=\"nativeContainerFieldDrop($event, field)\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <div class=\"ngs-form-builder-grid-field\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldList\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: field.children ?? [],\n                containerId: fieldDropListId(field),\n                section\n              }\"/>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"ngs-form-builder-field\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <ngs-form-builder-field-host\n            [field]=\"field\"\n            [control]=\"previewControl(field)\"\n            [definitions]=\"definitions()\"\n            [uploadCallback]=\"uploadCallback()\"\n            [readonly]=\"true\"\n            [editableCanvas]=\"true\"/>\n        </div>\n      }\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\">\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-border px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-border\">\n    <ngs-tab-group\n      animationDuration=\"0ms\"\n      [selectedIndex]=\"fieldsTabIndex()\"\n      (selectedIndexChange)=\"fieldsTabIndex.set($event)\">\n      <ngs-tab label=\"Fields\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"flex flex-col gap-5 p-4\">\n            <section class=\"flex flex-col gap-2\">\n              <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n              <button\n                type=\"button\"\n                class=\"ngs-form-builder-palette-item\"\n                draggable=\"true\"\n                (dragstart)=\"sectionPaletteDragStarted($event)\"\n                (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n              </button>\n\n              @for (definition of layoutDefinitions(); track definition.type) {\n                <button\n                  type=\"button\"\n                  class=\"ngs-form-builder-palette-item\"\n                  draggable=\"true\"\n                  (dragstart)=\"paletteDragStarted($event, definition)\"\n                  (dragend)=\"paletteDragEnded()\"\n                  (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                </button>\n              }\n            </section>\n\n            @for (group of paletteGroups(); track group.name) {\n              <section class=\"flex flex-col gap-2\">\n                <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                <div class=\"flex flex-col gap-2\">\n                  @for (definition of group.fields; track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n      <ngs-tab label=\"Layers\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"px-4 py-4\">\n            <ngs-tree\n              #actualFieldsTree=\"ngsTree\"\n              [dataSource]=\"fieldTree()\"\n              [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n              [trackBy]=\"trackFieldTreeNode\"\n              [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n              [dropPredicate]=\"fieldTreeDropPredicate\"\n              [nodePaddingIndent]=\"80\"\n              [reorderOnDrop]=\"false\"\n              (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n              draggable>\n              <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                  <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                  <span>{{ source.label }}</span>\n                </div>\n              </ng-template>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                             ngsTreeNodePadding\n                             [value]=\"node.id\"\n                             [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                <button\n                  ngsIconButton\n                  class=\"ngs-form-builder-tree-toggle\"\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                  <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                </button>\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n  <!--                  @if (node.name) {-->\n  <!--                    <small>{{ node.name }}</small>-->\n  <!--                  }-->\n                </button>\n              </ngs-tree-node>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    {{ node.label }}\n<!--                  <span class=\"inline-flex flex-col\">-->\n<!--                    -->\n<!--                    @if (node.name) {-->\n<!--                      <small>{{ node.name }}</small>-->\n<!--                    }-->\n<!--                  </span>-->\n                </button>\n              </ngs-tree-node>\n            </ngs-tree>\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n    </ngs-tab-group>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              @if (isContainerField(field)) {\n                <div\n                  class=\"ngs-form-builder-field is-container\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n                  (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n                  (drop)=\"nativeContainerFieldDrop($event, field)\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"ngs-form-builder-grid-field\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: field.children ?? [],\n                        containerId: fieldDropListId(field)\n                      }\"/>\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"ngs-form-builder-field\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <ngs-form-builder-field-host\n                    [field]=\"field\"\n                    [control]=\"previewControl(field)\"\n                    [definitions]=\"definitions()\"\n                    [uploadCallback]=\"uploadCallback()\"\n                    [readonly]=\"true\"\n                    [editableCanvas]=\"true\"/>\n                </div>\n              }\n            } @else if (item.section; as section) {\n              <ngs-card class=\"ngs-form-builder-section\"\n                        [attr.data-form-builder-section-id]=\"section.id\"\n                        (dragover)=\"nativeSectionDragOver($event, section)\"\n                        (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                        (drop)=\"nativeSectionDrop($event, section)\"\n                        (click)=\"selectSection(section)\">\n                <ngs-card-header>\n                  <div class=\"ngs-form-builder-section-heading\">\n                    <input ngsInput\n                           class=\"ngs-form-builder-section-title\"\n                           [ngModel]=\"section.title\"\n                           [ngModelOptions]=\"{standalone: true}\"\n                           (ngModelChange)=\"updateSection(section, { title: $event })\"\n                           aria-label=\"Section title\">\n                  </div>\n                  @if (section.description) {\n                    <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                  }\n\n                  <ngs-card-aside>\n                    <div class=\"ngs-form-builder-section-actions\">\n                      <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                        <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                      </button>\n                      <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                        <ngs-icon name=\"fluent:delete-24-regular\"/>\n                      </button>\n                    </div>\n                  </ngs-card-aside>\n                </ngs-card-header>\n\n                @if (!isSectionCollapsed(section)) {\n                  <ngs-card-content>\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: section.fields,\n                        containerId: sectionDropListId(section),\n                        section\n                      }\"/>\n                  </ngs-card-content>\n                } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                  <ngs-card-content>\n                    <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                    </div>\n                  </ngs-card-content>\n                }\n              </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-border\">\n    @if (selectedField() || selectedSection()) {\n      <ngs-panel-header class=\"ps-5 pe-2 border-b border-border\">\n        <ngs-toolbar>\n          <ngs-toolbar-title class=\"truncate\">\n            {{ inspectorTitle() }}\n          </ngs-toolbar-title>\n          <ngs-toolbar-subtitle>\n            {{ selectedField()?.label || selectedSection()?.title }}\n          </ngs-toolbar-subtitle>\n          <ngs-toolbar-spacer/>\n          <ngs-toolbar-item>\n            <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n              <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n            </button>\n          </ngs-toolbar-item>\n        </ngs-toolbar>\n      </ngs-panel-header>\n    }\n\n    <ngs-panel-content>\n      @if (selectedField() || selectedSection()) {\n        <ngs-scrollbar-area [absolute]=\"true\">\n          <div class=\"flex flex-col gap-4 p-5\">\n            <ngs-form-builder-settings-host\n              [field]=\"selectedField()\"\n              [section]=\"selectedSection()\"\n              [schema]=\"schema()\"\n              [definitions]=\"definitions()\"\n              [settingsDefinitions]=\"settingsDefinitions()\"\n              [update]=\"updateSelectedField\"\n              [updateSection]=\"updateSelectedSection\"/>\n\n            @if (selectedField(); as field) {\n              <div class=\"mt-3\">\n                <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n                  <ngs-icon name=\"fluent:delete-24-regular\"/>\n                  Delete field\n                </button>\n              </div>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      } @else {\n        <div class=\"ngs-form-builder-empty-inspector\">\n          Select a field on the canvas or in the fields tree to edit its settings.\n        </div>\n      }\n    </ngs-panel-content>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-renderer\n      [schema]=\"schema()\"\n      [uploadCallback]=\"uploadCallback()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-on-surface);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);color:var(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-palette-item:hover{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 96%)}}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{flex:none;width:calc(var(--spacing, .25rem) * 10)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed;border-color:var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{height:100%;min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4);grid-column:span 12}:host .ngs-form-builder-native-ghost-section{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}:host .ngs-form-builder-canvas-list{display:grid;flex:1;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:calc(var(--spacing, .25rem) * 4);min-height:100%}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host ngs-panel-aside.ngs-form-builder-inspector{display:flex;flex-direction:column}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-header{flex:none}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-content{min-height:0;flex:1 1 auto;overflow:hidden}:host .ngs-form-builder-empty-inspector{display:flex;min-height:100%;align-items:center;justify-content:center;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .ngs-form-builder-field-placeholder{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { actualFieldsTree: [{ type: i0.ViewChild, args: ['actualFieldsTree', { isSignal: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }, { type: i0.Output, args: ["schemaChange"] }], paletteTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "paletteTitle", required: false }] }], inspectorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorTitle", required: false }] }], uploadCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCallback", required: false }] }], fieldSelected: [{ type: i0.Output, args: ["fieldSelected"] }], fieldAdded: [{ type: i0.Output, args: ["fieldAdded"] }], fieldRemoved: [{ type: i0.Output, args: ["fieldRemoved"] }] } });
+                    }, template: "<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\"></div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      @if (isContainerField(field)) {\n        <div\n          class=\"ngs-form-builder-field is-container\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n          (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n          (drop)=\"nativeContainerFieldDrop($event, field)\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <div class=\"ngs-form-builder-grid-field\">\n            <ng-container\n              [ngTemplateOutlet]=\"fieldList\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: field.children ?? [],\n                containerId: fieldDropListId(field),\n                section\n              }\"/>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"ngs-form-builder-field\"\n          [class.is-width-1]=\"(field.width ?? 12) === 1\"\n          [class.is-width-2]=\"field.width === 2\"\n          [class.is-width-3]=\"field.width === 3\"\n          [class.is-width-4]=\"field.width === 4\"\n          [class.is-width-5]=\"field.width === 5\"\n          [class.is-width-6]=\"field.width === 6\"\n          [class.is-width-7]=\"field.width === 7\"\n          [class.is-width-8]=\"field.width === 8\"\n          [class.is-width-9]=\"field.width === 9\"\n          [class.is-width-10]=\"field.width === 10\"\n          [class.is-width-11]=\"field.width === 11\"\n          [class.is-width-12]=\"(field.width ?? 12) === 12\"\n          [class.is-selected]=\"selectedFieldId() === field.id\"\n          [attr.data-form-builder-field-id]=\"field.id\"\n          (click)=\"$event.stopPropagation(); selectCanvasField(field, section)\">\n          <div class=\"ngs-form-builder-field-header\">\n            <div class=\"ngs-form-builder-field-label\">\n              <ngs-icon [name]=\"fieldIcon(field)\"/>\n              <span>{{ field.label }}</span>\n            </div>\n          </div>\n\n          <ngs-form-builder-field-host\n            [field]=\"field\"\n            [control]=\"previewControl(field)\"\n            [definitions]=\"definitions()\"\n            [uploadCallback]=\"uploadCallback()\"\n            [readonly]=\"true\"\n            [editableCanvas]=\"true\"/>\n        </div>\n      }\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\">\n  <ngs-panel-header autoHeight class=\"border-b border-border px-5 py-3\">\n    <ngs-toolbar>\n      <div class=\"min-w-0\">\n        <ngs-toolbar-subtitle>Form builder</ngs-toolbar-subtitle>\n        <ngs-toolbar-title appearance=\"large\" class=\"truncate\">{{ schema().title || 'Untitled form' }}</ngs-toolbar-title>\n      </div>\n\n      <ngs-toolbar-spacer/>\n\n      <ngs-toolbar-item>\n        <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n          <ngs-icon name=\"fluent:eye-24-regular\"/>\n          Preview\n        </button>\n      </ngs-toolbar-item>\n    </ngs-toolbar>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-border\">\n    <ngs-tab-group\n      animationDuration=\"0ms\"\n      [selectedIndex]=\"fieldsTabIndex()\"\n      (selectedIndexChange)=\"fieldsTabIndex.set($event)\">\n      <ngs-tab label=\"Fields\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"flex flex-col gap-5 p-4\">\n            <section class=\"flex flex-col gap-2\">\n              <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n              <button\n                type=\"button\"\n                class=\"ngs-form-builder-palette-item\"\n                draggable=\"true\"\n                (dragstart)=\"sectionPaletteDragStarted($event)\"\n                (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n              </button>\n\n              @for (definition of layoutDefinitions(); track definition.type) {\n                <button\n                  type=\"button\"\n                  class=\"ngs-form-builder-palette-item\"\n                  draggable=\"true\"\n                  (dragstart)=\"paletteDragStarted($event, definition)\"\n                  (dragend)=\"paletteDragEnded()\"\n                  (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                </button>\n              }\n            </section>\n\n            @for (group of paletteGroups(); track group.name) {\n              <section class=\"flex flex-col gap-2\">\n                <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                <div class=\"flex flex-col gap-2\">\n                  @for (definition of group.fields; track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n      <ngs-tab label=\"Layers\" class=\"relative\">\n        <ngs-scrollbar-area>\n          <div class=\"px-4 py-4\">\n            <ngs-tree\n              #actualFieldsTree=\"ngsTree\"\n              [dataSource]=\"fieldTree()\"\n              [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n              [trackBy]=\"trackFieldTreeNode\"\n              [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n              [dropPredicate]=\"fieldTreeDropPredicate\"\n              [nodePaddingIndent]=\"80\"\n              [reorderOnDrop]=\"false\"\n              (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n              draggable>\n              <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                  <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                  <span>{{ source.label }}</span>\n                </div>\n              </ng-template>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                             ngsTreeNodePadding\n                             [value]=\"node.id\"\n                             [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                <button\n                  ngsIconButton\n                  class=\"ngs-form-builder-tree-toggle\"\n                  [attr.aria-label]=\"'Toggle ' + node.label\"\n                  (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                  <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                </button>\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n  <!--                  @if (node.name) {-->\n  <!--                    <small>{{ node.name }}</small>-->\n  <!--                  }-->\n                </button>\n              </ngs-tree-node>\n\n              <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                <button\n                  ngsButton=\"text\"\n                  type=\"button\"\n                  class=\"ngs-form-builder-tree-item\"\n                  [class.is-selected]=\"selectedFieldId() === node.id\"\n                  [attr.data-form-builder-tree-node-id]=\"node.id\"\n                  (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    {{ node.label }}\n<!--                  <span class=\"inline-flex flex-col\">-->\n<!--                    -->\n<!--                    @if (node.name) {-->\n<!--                      <small>{{ node.name }}</small>-->\n<!--                    }-->\n<!--                  </span>-->\n                </button>\n              </ngs-tree-node>\n            </ngs-tree>\n          </div>\n        </ngs-scrollbar-area>\n      </ngs-tab>\n    </ngs-tab-group>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-5 p-6\">\n        <div\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              @if (isContainerField(field)) {\n                <div\n                  class=\"ngs-form-builder-field is-container\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n                  (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n                  (drop)=\"nativeContainerFieldDrop($event, field)\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"ngs-form-builder-grid-field\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: field.children ?? [],\n                        containerId: fieldDropListId(field)\n                      }\"/>\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"ngs-form-builder-field\"\n                  [class.is-width-1]=\"(field.width ?? 12) === 1\"\n                  [class.is-width-2]=\"field.width === 2\"\n                  [class.is-width-3]=\"field.width === 3\"\n                  [class.is-width-4]=\"field.width === 4\"\n                  [class.is-width-5]=\"field.width === 5\"\n                  [class.is-width-6]=\"field.width === 6\"\n                  [class.is-width-7]=\"field.width === 7\"\n                  [class.is-width-8]=\"field.width === 8\"\n                  [class.is-width-9]=\"field.width === 9\"\n                  [class.is-width-10]=\"field.width === 10\"\n                  [class.is-width-11]=\"field.width === 11\"\n                  [class.is-width-12]=\"(field.width ?? 12) === 12\"\n                  [class.is-selected]=\"selectedFieldId() === field.id\"\n                  [attr.data-form-builder-field-id]=\"field.id\"\n                  (click)=\"$event.stopPropagation(); selectCanvasField(field)\">\n                  <div class=\"ngs-form-builder-field-header\">\n                    <div class=\"ngs-form-builder-field-label\">\n                      <ngs-icon [name]=\"fieldIcon(field)\"/>\n                      <span>{{ field.label }}</span>\n                    </div>\n                  </div>\n\n                  <ngs-form-builder-field-host\n                    [field]=\"field\"\n                    [control]=\"previewControl(field)\"\n                    [definitions]=\"definitions()\"\n                    [uploadCallback]=\"uploadCallback()\"\n                    [readonly]=\"true\"\n                    [editableCanvas]=\"true\"/>\n                </div>\n              }\n            } @else if (item.section; as section) {\n              <ngs-card class=\"ngs-form-builder-section\"\n                        [attr.data-form-builder-section-id]=\"section.id\"\n                        (dragover)=\"nativeSectionDragOver($event, section)\"\n                        (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                        (drop)=\"nativeSectionDrop($event, section)\"\n                        (click)=\"selectSection(section)\">\n                <ngs-card-header>\n                  <div class=\"ngs-form-builder-section-heading\">\n                    <input ngsInput\n                           class=\"ngs-form-builder-section-title\"\n                           [ngModel]=\"section.title\"\n                           [ngModelOptions]=\"{standalone: true}\"\n                           (ngModelChange)=\"updateSection(section, { title: $event })\"\n                           aria-label=\"Section title\">\n                  </div>\n                  @if (section.description) {\n                    <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                  }\n\n                  <ngs-card-aside>\n                    <div class=\"ngs-form-builder-section-actions\">\n                      <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                        <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                      </button>\n                      <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                        <ngs-icon name=\"fluent:delete-24-regular\"/>\n                      </button>\n                    </div>\n                  </ngs-card-aside>\n                </ngs-card-header>\n\n                @if (!isSectionCollapsed(section)) {\n                  <ngs-card-content>\n                    <ng-container\n                      [ngTemplateOutlet]=\"fieldList\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: section.fields,\n                        containerId: sectionDropListId(section),\n                        section\n                      }\"/>\n                  </ngs-card-content>\n                } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                  <ngs-card-content>\n                    <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                    </div>\n                  </ngs-card-content>\n                }\n              </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-border\">\n    @if (selectedField() || selectedSection()) {\n      <ngs-panel-header class=\"ps-5 pe-2 border-b border-border\">\n        <ngs-toolbar>\n          <ngs-toolbar-title class=\"truncate\">\n            {{ inspectorTitle() }}\n          </ngs-toolbar-title>\n          <ngs-toolbar-subtitle>\n            {{ selectedField()?.label || selectedSection()?.title }}\n          </ngs-toolbar-subtitle>\n          <ngs-toolbar-spacer/>\n          <ngs-toolbar-item>\n            <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n              <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n            </button>\n          </ngs-toolbar-item>\n        </ngs-toolbar>\n      </ngs-panel-header>\n    }\n\n    <ngs-panel-content>\n      @if (selectedField() || selectedSection()) {\n        <ngs-scrollbar-area [absolute]=\"true\">\n          <div class=\"flex flex-col gap-4 p-5\">\n            <ngs-form-builder-settings-host\n              [field]=\"selectedField()\"\n              [section]=\"selectedSection()\"\n              [schema]=\"schema()\"\n              [definitions]=\"definitions()\"\n              [settingsDefinitions]=\"settingsDefinitions()\"\n              [update]=\"updateSelectedField\"\n              [updateSection]=\"updateSelectedSection\"/>\n\n            @if (selectedField(); as field) {\n              <div class=\"mt-3\">\n                <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n                  <ngs-icon name=\"fluent:delete-24-regular\"/>\n                  Delete field\n                </button>\n              </div>\n            }\n          </div>\n        </ngs-scrollbar-area>\n      } @else {\n        <div class=\"ngs-form-builder-empty-inspector\">\n          Select a field on the canvas or in the fields tree to edit its settings.\n        </div>\n      }\n    </ngs-panel-content>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-renderer\n      [schema]=\"schema()\"\n      [uploadCallback]=\"uploadCallback()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid;border-color:var(--ngs-color-border);background:var(--ngs-color-surface-container-lowest);color:var(--ngs-color-on-surface);border-radius:var(--ngs-radius-current);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);color:var(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-palette-item:hover{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 96%)}}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{flex:none;width:calc(var(--spacing, .25rem) * 10)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed;border-color:var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{height:100%;min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4);grid-column:span 12}:host .ngs-form-builder-native-ghost-section{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}:host .ngs-form-builder-canvas-list{display:grid;flex:1;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:calc(var(--spacing, .25rem) * 4);min-height:100%}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid;border-color:var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host ngs-panel-aside.ngs-form-builder-inspector{display:flex;flex-direction:column}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-header{flex:none}:host ngs-panel-aside.ngs-form-builder-inspector>ngs-panel-content{min-height:0;flex:1 1 auto;overflow:hidden}:host .ngs-form-builder-empty-inspector{display:flex;min-height:100%;align-items:center;justify-content:center;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .ngs-form-builder-field-placeholder{border-color:transparent;background:var(--ngs-color-primary);box-shadow:none;min-height:calc(var(--spacing, .25rem) * 16);opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 97%)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { actualFieldsTree: [{ type: i0.ViewChild, args: ['actualFieldsTree', { isSignal: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }, { type: i0.Output, args: ["schemaChange"] }], paletteTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "paletteTitle", required: false }] }], inspectorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorTitle", required: false }] }], canvasDropPlaceholderDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasDropPlaceholderDelay", required: false }] }], uploadCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCallback", required: false }] }], fieldSelected: [{ type: i0.Output, args: ["fieldSelected"] }], fieldAdded: [{ type: i0.Output, args: ["fieldAdded"] }], fieldRemoved: [{ type: i0.Output, args: ["fieldRemoved"] }] } });
 function createDefaultFormBuilderSchema() {
     return {
         title: 'New form',
@@ -2687,7 +2745,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)
     };
@@ -3003,5 +3060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, FormBuilderSettingsHost, FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, provideFormBuilderField, provideFormBuilderFields, validatorsFromRules };
 //# sourceMappingURL=ngstarter-ui-components-form-builder.mjs.map