@ngstarter-ui/components 21.0.39 → 21.0.40

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

@@ -0,0 +1,1695 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, inject, model, output, ElementRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
+import { moveItemInArray, transferArrayItem, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDragPreview, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
+import { Button } from '@ngstarter-ui/components/button';
+import { Card, CardAside, CardContent, CardHeader } from '@ngstarter-ui/components/card';
+import { ConfirmManager } from '@ngstarter-ui/components/confirm';
+import { Dialog, DialogActions, DialogClose, DialogContent, DialogTitle } from '@ngstarter-ui/components/dialog';
+import { FormField, Hint, IconButtonSuffix, Label } from '@ngstarter-ui/components/form-field';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { Input } from '@ngstarter-ui/components/input';
+import { Panel, PanelAside, PanelContent, PanelHeader, PanelSidebar } from '@ngstarter-ui/components/panel';
+import { ScrollbarArea } from '@ngstarter-ui/components/scrollbar-area';
+import { Tab, TabGroup } from '@ngstarter-ui/components/tabs';
+import { Tree, TreeDragPlaceholder, TreeNode, TreeNodeDef, TreeNodePadding } from '@ngstarter-ui/components/tree';
+import { Datepicker, DatepickerInput, DatepickerToggle, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';
+import { Select } from '@ngstarter-ui/components/select';
+import { Option } from '@ngstarter-ui/components/option';
+import { Checkbox } from '@ngstarter-ui/components/checkbox';
+import { SlideToggle } from '@ngstarter-ui/components/slide-toggle';
+
+const FORM_BUILDER_FIELDS = new InjectionToken('FORM_BUILDER_FIELDS');
+const FORM_BUILDER_SETTINGS = new InjectionToken('FORM_BUILDER_SETTINGS');
+function formBuilderField(definition) {
+    return definition;
+}
+function formBuilderSettings(definition) {
+    return definition;
+}
+function provideFormBuilder(config = {}) {
+    return makeEnvironmentProviders([
+        ...(config.fields ?? []).map(field => ({
+            provide: FORM_BUILDER_FIELDS,
+            useValue: field,
+            multi: true
+        })),
+        ...(config.settings ?? []).map(settings => ({
+            provide: FORM_BUILDER_SETTINGS,
+            useValue: settings,
+            multi: true
+        }))
+    ]);
+}
+const DEFAULT_FORM_BUILDER_FIELDS = [
+    {
+        type: 'text',
+        label: 'Text',
+        group: 'Basic',
+        icon: 'fluent:text-font-24-regular',
+        defaults: {
+            label: 'Text field',
+            placeholder: 'Enter text'
+        }
+    },
+    {
+        type: 'number',
+        label: 'Number',
+        group: 'Basic',
+        icon: 'fluent:number-symbol-24-regular',
+        defaults: {
+            label: 'Number',
+            placeholder: '0'
+        }
+    },
+    {
+        type: 'email',
+        label: 'Email',
+        group: 'Basic',
+        icon: 'fluent:mail-24-regular',
+        defaults: {
+            label: 'Email',
+            placeholder: 'name@example.com'
+        },
+        validators: field => field.required ? [Validators.required, Validators.email] : [Validators.email]
+    },
+    {
+        type: 'textarea',
+        label: 'Textarea',
+        group: 'Basic',
+        icon: 'fluent:text-description-24-regular',
+        defaults: {
+            label: 'Description',
+            placeholder: 'Enter description',
+            width: 12
+        }
+    },
+    {
+        type: 'grid',
+        label: 'Grid',
+        group: 'Layout',
+        icon: 'fluent:grid-24-regular',
+        description: 'Container for nested fields.',
+        defaults: {
+            label: 'Grid',
+            width: 12,
+            children: []
+        }
+    },
+    {
+        type: 'select',
+        label: 'Select',
+        group: 'Choices',
+        icon: 'fluent:multiselect-ltr-24-regular',
+        defaults: {
+            label: 'Select',
+            placeholder: 'Choose an option',
+            options: [
+                { label: 'Option 1', value: 'option_1' },
+                { label: 'Option 2', value: 'option_2' }
+            ]
+        }
+    },
+    {
+        type: 'checkbox',
+        label: 'Checkbox',
+        group: 'Choices',
+        icon: 'fluent:checkbox-checked-24-regular',
+        defaults: {
+            label: 'Checkbox',
+            defaultValue: false
+        }
+    },
+    {
+        type: 'toggle',
+        label: 'Toggle',
+        group: 'Choices',
+        icon: 'fluent:toggle-right-24-regular',
+        defaults: {
+            label: 'Toggle',
+            defaultValue: false
+        }
+    },
+    {
+        type: 'date',
+        label: 'Date',
+        group: 'Date and time',
+        icon: 'fluent:calendar-ltr-24-regular',
+        defaults: {
+            label: 'Date',
+            placeholder: 'Select date'
+        }
+    },
+    {
+        type: 'currency',
+        label: 'Currency',
+        group: 'Finance',
+        icon: 'fluent:money-24-regular',
+        defaults: {
+            label: 'Amount',
+            placeholder: '0.00'
+        }
+    }
+];
+function validatorsFromRules(rules = [], field) {
+    const validators = [];
+    if (field?.required || rules.some(rule => rule.type === 'required')) {
+        validators.push(Validators.required);
+    }
+    for (const rule of rules) {
+        if (rule.type === 'email') {
+            validators.push(Validators.email);
+        }
+        else if (rule.type === 'minLength') {
+            validators.push(Validators.minLength(Number(rule.value)));
+        }
+        else if (rule.type === 'maxLength') {
+            validators.push(Validators.maxLength(Number(rule.value)));
+        }
+        else if (rule.type === 'min') {
+            validators.push(Validators.min(Number(rule.value)));
+        }
+        else if (rule.type === 'max') {
+            validators.push(Validators.max(Number(rule.value)));
+        }
+    }
+    return validators;
+}
+
+class FormBuilderFieldHost {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    definitions = input([], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    editableCanvas = input(false, ...(ngDevMode ? [{ debugName: "editableCanvas" }] : /* istanbul ignore next */ []));
+    customLoaded = signal(false, ...(ngDevMode ? [{ debugName: "customLoaded" }] : /* istanbul ignore next */ []));
+    textInputType = computed(() => {
+        const type = this.field().type;
+        return type === 'number' || type === 'email' ? type : 'text';
+    }, ...(ngDevMode ? [{ debugName: "textInputType" }] : /* istanbul ignore next */ []));
+    anchor = viewChild.required('anchor', { read: ViewContainerRef });
+    constructor() {
+        effect(async () => {
+            const field = this.field();
+            const control = this.control();
+            const definitions = this.definitions();
+            const viewContainer = this.anchor();
+            const renderer = definitions.find(definition => definition.type === field.type)?.renderer;
+            viewContainer.clear();
+            this.customLoaded.set(false);
+            if (!renderer) {
+                return;
+            }
+            const componentType = await renderer();
+            const componentRef = viewContainer.createComponent(componentType);
+            componentRef.setInput('field', field);
+            componentRef.setInput('control', control);
+            componentRef.setInput('readonly', this.readonly());
+            this.customLoaded.set(true);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderFieldHost, isStandalone: true, selector: "ngs-form-builder-field-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, editableCanvas: { classPropertyName: "editableCanvas", publicName: "editableCanvas", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-custom": "customLoaded()", "class.is-width-1": "!editableCanvas() && field().width === 1", "class.is-width-2": "!editableCanvas() && field().width === 2", "class.is-width-3": "!editableCanvas() && field().width === 3", "class.is-width-4": "!editableCanvas() && field().width === 4", "class.is-width-5": "!editableCanvas() && field().width === 5", "class.is-width-6": "!editableCanvas() && field().width === 6", "class.is-width-7": "!editableCanvas() && field().width === 7", "class.is-width-8": "!editableCanvas() && field().width === 8", "class.is-width-9": "!editableCanvas() && field().width === 9", "class.is-width-10": "!editableCanvas() && field().width === 10", "class.is-width-11": "!editableCanvas() && field().width === 11", "class.is-width-12": "!editableCanvas() && (field().width ?? 12) === 12" }, classAttribute: "ngs-form-builder-field-host" }, providers: [
+            provideNativeDateAdapter()
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderFieldHost"], ngImport: i0, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\" [placeholder]=\"field().placeholder || ''\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"], exportAs: ["ngsDatepickerInput"] }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-builder-field-host', exportAs: 'ngsFormBuilderFieldHost', imports: [
+                        ReactiveFormsModule,
+                        Datepicker,
+                        DatepickerInput,
+                        DatepickerToggle,
+                        FormField,
+                        Hint,
+                        IconButtonSuffix,
+                        Label,
+                        Input,
+                        Select,
+                        Option,
+                        Checkbox,
+                        SlideToggle
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        provideNativeDateAdapter()
+                    ], host: {
+                        'class': 'ngs-form-builder-field-host',
+                        '[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'
+                    }, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\" [placeholder]=\"field().placeholder || ''\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\" [disabled]=\"readonly() || (field().disabled ?? false)\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], editableCanvas: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableCanvas", required: false }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+class FormBuilderRenderer {
+    providedFields = inject(FORM_BUILDER_FIELDS, { optional: true }) ?? [];
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    showSubmit = input(true, ...(ngDevMode ? [{ debugName: "showSubmit" }] : /* istanbul ignore next */ []));
+    submitLabel = input('Submit', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    value = model({}, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    formSubmit = output();
+    formReady = output();
+    definitions = computed(() => [
+        ...DEFAULT_FORM_BUILDER_FIELDS,
+        ...this.providedFields
+    ], ...(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 */ []));
+    formGroup = computed(() => this.createFormGroup(), ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(onCleanup => {
+            const form = this.formGroup();
+            this.formReady.emit(form);
+            const subscription = form.valueChanges.subscribe(() => {
+                this.value.set(form.getRawValue());
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    getControl(field) {
+        return this.formGroup().get(field.name);
+    }
+    isContainerField(field) {
+        return field.type === 'grid';
+    }
+    visibleChildren(field) {
+        return this.visibleFields(field.children ?? []);
+    }
+    submit() {
+        const form = this.formGroup();
+        if (form.invalid) {
+            form.markAllAsTouched();
+            return;
+        }
+        this.formSubmit.emit(form.getRawValue());
+    }
+    createFormGroup() {
+        const controls = {};
+        const value = this.value();
+        const fields = [
+            ...flattenFields(this.schema().fields ?? []),
+            ...this.schema().sections.flatMap(section => flattenFields(section.fields))
+        ];
+        for (const field of fields) {
+            if (this.isContainerField(field)) {
+                continue;
+            }
+            const definition = this.definitions().find(item => item.type === field.type);
+            const validators = definition?.validators?.(field) ?? validatorsFromRules(field.validation, field);
+            const control = new FormControl({
+                value: value[field.name] ?? field.defaultValue ?? null,
+                disabled: field.disabled || this.readonly()
+            }, validators);
+            controls[field.name] = control;
+        }
+        return new FormGroup(controls);
+    }
+    visibleFields(fields) {
+        return fields
+            .filter(field => field.visibility?.form !== false)
+            .map(field => ({
+            ...field,
+            children: field.children ? this.visibleFields(field.children) : undefined
+        }));
+    }
+    resolveCanvasItems(schema) {
+        const fieldsById = new Map((schema.fields ?? []).map(field => [field.id, field]));
+        const sectionsById = new Map(schema.sections.map(section => [section.id, section]));
+        const items = [];
+        for (const item of normalizedLayout(schema)) {
+            if (item.kind === 'field') {
+                const field = fieldsById.get(item.id);
+                if (field) {
+                    items.push({ ...item, field });
+                }
+                continue;
+            }
+            const section = sectionsById.get(item.id);
+            if (section) {
+                items.push({ ...item, section });
+            }
+        }
+        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-builder-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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", formSubmit: "formSubmit", formReady: "formReady" }, host: { classAttribute: "ngs-form-builder-renderer" }, exportAs: ["ngsFormBuilderRenderer"], ngImport: i0, template: "<ng-template #renderFields let-fields>\n  <div class=\"ngs-form-builder-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isContainerField(field)) {\n        <section class=\"ngs-form-builder-renderer-grid-field\">\n          <header>\n            <h4>{{ field.label }}</h4>\n            @if (field.hint) {\n              <p>{{ field.hint }}</p>\n            }\n          </header>\n\n          <ng-container\n            [ngTemplateOutlet]=\"renderFields\"\n            [ngTemplateOutletContext]=\"{ $implicit: visibleChildren(field) }\"/>\n        </section>\n      } @else {\n        <ngs-form-builder-field-host\n          [field]=\"field\"\n          [control]=\"getControl(field)\"\n          [definitions]=\"definitions()\"\n          [readonly]=\"readonly()\"/>\n      }\n    }\n  </div>\n</ng-template>\n\n<form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n  <div class=\"flex flex-col gap-6\">\n    @for (item of visibleCanvasItems(); track item.kind + ':' + item.id) {\n      @if (item.field) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderFields\"\n          [ngTemplateOutletContext]=\"{ $implicit: [item.field] }\"/>\n      } @else if (item.section; as section) {\n        <section class=\"ngs-form-builder-renderer-section\">\n          @if (section.title || section.description) {\n            <header>\n              @if (section.title) {\n                <h3>{{ section.title }}</h3>\n              }\n              @if (section.description) {\n                <p>{{ section.description }}</p>\n              }\n            </header>\n          }\n\n          <ng-container\n            [ngTemplateOutlet]=\"renderFields\"\n            [ngTemplateOutletContext]=\"{ $implicit: section.fields }\"/>\n        </section>\n      }\n    }\n\n    @if (showSubmit() && !readonly()) {\n      <div class=\"flex justify-end\">\n        <button ngsButton=\"filled\" type=\"submit\">{{ submitLabel() }}</button>\n      </div>\n    }\n  </div>\n</form>\n", styles: [":host{display:block}:host .ngs-form-builder-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-builder-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-builder-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-builder-renderer-grid-field>header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], 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"], exportAs: ["ngsFormBuilderFieldHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-builder-renderer', exportAs: 'ngsFormBuilderRenderer', imports: [
+                        NgTemplateOutlet,
+                        ReactiveFormsModule,
+                        Button,
+                        FormBuilderFieldHost
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-form-builder-renderer'
+                    }, template: "<ng-template #renderFields let-fields>\n  <div class=\"ngs-form-builder-renderer-grid\">\n    @for (field of fields; track field.id) {\n      @if (isContainerField(field)) {\n        <section class=\"ngs-form-builder-renderer-grid-field\">\n          <header>\n            <h4>{{ field.label }}</h4>\n            @if (field.hint) {\n              <p>{{ field.hint }}</p>\n            }\n          </header>\n\n          <ng-container\n            [ngTemplateOutlet]=\"renderFields\"\n            [ngTemplateOutletContext]=\"{ $implicit: visibleChildren(field) }\"/>\n        </section>\n      } @else {\n        <ngs-form-builder-field-host\n          [field]=\"field\"\n          [control]=\"getControl(field)\"\n          [definitions]=\"definitions()\"\n          [readonly]=\"readonly()\"/>\n      }\n    }\n  </div>\n</ng-template>\n\n<form [formGroup]=\"formGroup()\" (ngSubmit)=\"submit()\">\n  <div class=\"flex flex-col gap-6\">\n    @for (item of visibleCanvasItems(); track item.kind + ':' + item.id) {\n      @if (item.field) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderFields\"\n          [ngTemplateOutletContext]=\"{ $implicit: [item.field] }\"/>\n      } @else if (item.section; as section) {\n        <section class=\"ngs-form-builder-renderer-section\">\n          @if (section.title || section.description) {\n            <header>\n              @if (section.title) {\n                <h3>{{ section.title }}</h3>\n              }\n              @if (section.description) {\n                <p>{{ section.description }}</p>\n              }\n            </header>\n          }\n\n          <ng-container\n            [ngTemplateOutlet]=\"renderFields\"\n            [ngTemplateOutletContext]=\"{ $implicit: section.fields }\"/>\n        </section>\n      }\n    }\n\n    @if (showSubmit() && !readonly()) {\n      <div class=\"flex justify-end\">\n        <button ngsButton=\"filled\" type=\"submit\">{{ submitLabel() }}</button>\n      </div>\n    }\n  </div>\n</form>\n", styles: [":host{display:block}:host .ngs-form-builder-renderer-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-section header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-renderer-section header h3{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600}:host .ngs-form-builder-renderer-section header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}:host .ngs-form-builder-renderer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-grid-field{display:flex;grid-column:1/-1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-renderer-grid-field>header h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600}:host .ngs-form-builder-renderer-grid-field>header p{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubmit", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formReady: [{ type: i0.Output, args: ["formReady"] }] } });
+function flattenFields(fields) {
+    return fields.flatMap(field => [field, ...flattenFields(field.children ?? [])]);
+}
+function normalizedLayout(schema) {
+    const used = new Set();
+    const layout = [];
+    const fieldsById = new Map((schema.fields ?? []).map(field => [field.id, field]));
+    const sectionsById = new Map(schema.sections.map(section => [section.id, section]));
+    for (const item of schema.layout ?? []) {
+        const key = `${item.kind}:${item.id}`;
+        if (used.has(key)) {
+            continue;
+        }
+        if ((item.kind === 'field' && fieldsById.has(item.id)) || (item.kind === 'section' && sectionsById.has(item.id))) {
+            used.add(key);
+            layout.push(item);
+        }
+    }
+    for (const field of schema.fields ?? []) {
+        const key = `field:${field.id}`;
+        if (!used.has(key)) {
+            used.add(key);
+            layout.push({ kind: 'field', id: field.id });
+        }
+    }
+    for (const section of schema.sections) {
+        const key = `section:${section.id}`;
+        if (!used.has(key)) {
+            used.add(key);
+            layout.push({ kind: 'section', id: section.id });
+        }
+    }
+    return layout;
+}
+
+class FormBuilderSettingsHost {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    definitions = input([], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    settingsDefinitions = input([], ...(ngDevMode ? [{ debugName: "settingsDefinitions" }] : /* istanbul ignore next */ []));
+    update = input.required(...(ngDevMode ? [{ debugName: "update" }] : /* istanbul ignore next */ []));
+    customLoaded = signal(false, ...(ngDevMode ? [{ debugName: "customLoaded" }] : /* istanbul ignore next */ []));
+    anchor = viewChild.required('anchor', { read: ViewContainerRef });
+    constructor() {
+        effect(async () => {
+            const field = this.field();
+            const definitions = this.definitions();
+            const settingDefinitions = this.settingsDefinitions();
+            const viewContainer = this.anchor();
+            const fieldDefinition = definitions.find(definition => definition.type === field.type);
+            const customSettings = fieldDefinition?.settings ??
+                settingDefinitions.find(definition => definition.fieldType === field.type)?.component;
+            viewContainer.clear();
+            this.customLoaded.set(false);
+            if (!customSettings) {
+                return;
+            }
+            const componentType = await customSettings();
+            const componentRef = viewContainer.createComponent(componentType);
+            componentRef.setInput('field', field);
+            componentRef.setInput('schema', this.schema());
+            componentRef.setInput('update', this.update());
+            this.customLoaded.set(true);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: FormBuilderSettingsHost, isStandalone: true, selector: "ngs-form-builder-settings-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, settingsDefinitions: { classPropertyName: "settingsDefinitions", publicName: "settingsDefinitions", isSignal: true, isRequired: false, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.is-empty": "!customLoaded()" }, classAttribute: "ngs-form-builder-settings-host" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderSettingsHost"], ngImport: i0, template: "<ng-container #anchor/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-builder-settings-host', exportAs: 'ngsFormBuilderSettingsHost', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-form-builder-settings-host',
+                        '[class.is-empty]': '!customLoaded()'
+                    }, template: "<ng-container #anchor/>\n" }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], settingsDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingsDefinitions", required: false }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: true }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+class BasicFormBuilderFieldSettings {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    update = input.required(...(ngDevMode ? [{ debugName: "update" }] : /* istanbul ignore next */ []));
+    fieldWidthOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+    hasOptions = computed(() => ['select', 'radio', 'checkbox-list'].includes(this.field().type), ...(ngDevMode ? [{ debugName: "hasOptions" }] : /* istanbul ignore next */ []));
+    optionsText = computed(() => (this.field().options ?? [])
+        .map(option => `${option.label}:${option.value}`)
+        .join('\n'), ...(ngDevMode ? [{ debugName: "optionsText" }] : /* istanbul ignore next */ []));
+    patch(changes) {
+        this.update()(changes);
+    }
+    patchOptions(value) {
+        const options = value
+            .split('\n')
+            .map(line => line.trim())
+            .filter(Boolean)
+            .map((line, index) => {
+            const [label, optionValue] = line.split(':');
+            return {
+                label: label?.trim() || `Option ${index + 1}`,
+                value: (optionValue ?? label ?? `option_${index + 1}`).trim()
+            };
+        });
+        this.patch({ options });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderFieldSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderFieldSettings, isStandalone: true, selector: "ngs-basic-form-builder-field-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-field-settings" }, exportAs: ["ngsBasicFormBuilderFieldSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Field ID</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().name\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ name: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Placeholder</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().placeholder || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ placeholder: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  <div class=\"flex flex-col gap-3 py-1\">\n    <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ required: $event })\">\n      Required field\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ readonly: $event })\">\n      Readonly\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ disabled: $event })\">\n      Disabled\n    </ngs-slide-toggle>\n  </div>\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [ngModel]=\"optionsText()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patchOptions($event)\"></textarea>\n      <ngs-hint>One option per line. Use Label:value to set explicit values.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderFieldSettings, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-basic-form-builder-field-settings', exportAs: 'ngsBasicFormBuilderFieldSettings', imports: [
+                        FormsModule,
+                        FormField,
+                        Hint,
+                        Label,
+                        Input,
+                        Select,
+                        Option,
+                        SlideToggle
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-basic-form-builder-field-settings'
+                    }, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Field ID</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().name\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ name: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Placeholder</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().placeholder || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ placeholder: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Hint</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().hint || ''\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ hint: $event })\">\n  </ngs-form-field>\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  <div class=\"flex flex-col gap-3 py-1\">\n    <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ required: $event })\">\n      Required field\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ readonly: $event })\">\n      Readonly\n    </ngs-slide-toggle>\n\n    <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                      [ngModelOptions]=\"{standalone: true}\"\n                      (ngModelChange)=\"patch({ disabled: $event })\">\n      Disabled\n    </ngs-slide-toggle>\n  </div>\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [ngModel]=\"optionsText()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patchOptions($event)\"></textarea>\n      <ngs-hint>One option per line. Use Label:value to set explicit values.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: true }] }] } });
+
+const ROOT_DROP_LIST_ID = 'ngs-form-builder-root-fields';
+const PALETTE_DRAG_TYPE = 'application/x-ngstarter-form-builder-field';
+const PALETTE_DRAG_ITEM = 'application/x-ngstarter-form-builder-item';
+class FormBuilder {
+    dialog = inject(Dialog);
+    confirmManager = inject(ConfirmManager);
+    elementRef = inject(ElementRef);
+    providedFields = inject(FORM_BUILDER_FIELDS, { optional: true }) ?? [];
+    providedSettings = inject(FORM_BUILDER_SETTINGS, { optional: true }) ?? [];
+    previewControls = new Map();
+    actualFieldsTree = viewChild('actualFieldsTree', ...(ngDevMode ? [{ debugName: "actualFieldsTree" }] : /* istanbul ignore next */ []));
+    suppressPaletteClick = false;
+    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 */ []));
+    fieldSelected = output();
+    fieldAdded = output();
+    fieldRemoved = output();
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    selectedFieldId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFieldId" }] : /* istanbul ignore next */ []));
+    nativeDragItem = signal(null, ...(ngDevMode ? [{ debugName: "nativeDragItem" }] : /* istanbul ignore next */ []));
+    nativeDragFieldDefinition = computed(() => {
+        const item = this.nativeDragItem();
+        return item?.kind === 'field' ? item.definition : null;
+    }, ...(ngDevMode ? [{ debugName: "nativeDragFieldDefinition" }] : /* istanbul ignore next */ []));
+    nativeDragSection = computed(() => this.nativeDragItem()?.kind === 'section', ...(ngDevMode ? [{ debugName: "nativeDragSection" }] : /* istanbul ignore next */ []));
+    nativeDropTarget = signal(null, ...(ngDevMode ? [{ debugName: "nativeDropTarget" }] : /* istanbul ignore next */ []));
+    dragCollapsedSectionIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "dragCollapsedSectionIds" }] : /* istanbul ignore next */ []));
+    expandedFieldTreeNodeIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedFieldTreeNodeIds" }] : /* istanbul ignore next */ []));
+    definitions = computed(() => [
+        ...DEFAULT_FORM_BUILDER_FIELDS,
+        ...this.providedFields
+    ], ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    settingsDefinitions = computed(() => this.providedSettings, ...(ngDevMode ? [{ debugName: "settingsDefinitions" }] : /* istanbul ignore next */ []));
+    fieldContainerDropListIds = computed(() => this.collectFieldContainerDropListIds(this.schema()), ...(ngDevMode ? [{ debugName: "fieldContainerDropListIds" }] : /* istanbul ignore next */ []));
+    canvasItems = computed(() => this.resolveCanvasItems(this.schema()), ...(ngDevMode ? [{ debugName: "canvasItems" }] : /* istanbul ignore next */ []));
+    layoutDefinitions = computed(() => {
+        const query = this.search().trim().toLowerCase();
+        return this.definitions().filter(definition => {
+            if ((definition.group || 'Other') !== 'Layout') {
+                return false;
+            }
+            return this.matchesPaletteQuery(definition, query);
+        });
+    }, ...(ngDevMode ? [{ debugName: "layoutDefinitions" }] : /* istanbul ignore next */ []));
+    paletteGroups = computed(() => {
+        const query = this.search().trim().toLowerCase();
+        const groups = new Map();
+        for (const definition of this.definitions()) {
+            const group = definition.group || 'Other';
+            if (group === 'Layout' || !this.matchesPaletteQuery(definition, query)) {
+                continue;
+            }
+            groups.set(group, [...(groups.get(group) ?? []), definition]);
+        }
+        return Array.from(groups, ([name, fields]) => ({ name, fields }));
+    }, ...(ngDevMode ? [{ debugName: "paletteGroups" }] : /* istanbul ignore next */ []));
+    selectedField = computed(() => {
+        const selectedId = this.selectedFieldId();
+        return selectedId ? this.findFieldLocation(this.schema(), selectedId)?.field ?? null : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedField" }] : /* istanbul ignore next */ []));
+    selectedSection = computed(() => {
+        const selectedId = this.selectedFieldId();
+        return selectedId ? this.findFieldLocation(this.schema(), selectedId)?.section ?? null : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedSection" }] : /* istanbul ignore next */ []));
+    fieldTree = computed(() => {
+        return this.resolveCanvasItems(this.schema()).map(item => {
+            if (item.field) {
+                return this.createFieldTreeNode(item.field);
+            }
+            return {
+                id: item.section.id,
+                label: item.section.title,
+                type: 'section',
+                icon: 'fluent:folder-24-regular',
+                kind: 'section',
+                section: item.section,
+                children: item.section.fields.map(field => this.createFieldTreeNode(field, item.section))
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "fieldTree" }] : /* istanbul ignore next */ []));
+    fieldTreeChildrenAccessor = (node) => node.children ?? [];
+    hasFieldTreeChildren = (_, node) => !!node.children?.length;
+    trackFieldTreeNode = (_, node) => node.id;
+    fieldTreeDraggablePredicate = (_node) => true;
+    fieldTreeDropPredicate = (source, target, position) => this.canDropFieldTreeNode(source, target, position);
+    updateSelectedField = (changes) => {
+        this.patchSelectedField(changes);
+    };
+    fieldDropListEnterPredicate = (drag) => {
+        const data = drag.data;
+        return !(isFormBuilderLayoutItem(data) && data.kind === 'section');
+    };
+    paletteDragStarted(event, definition) {
+        this.suppressPaletteClick = true;
+        this.nativeDragItem.set({ kind: 'field', definition });
+        event.dataTransfer?.setData(PALETTE_DRAG_TYPE, definition.type);
+        event.dataTransfer?.setData(PALETTE_DRAG_ITEM, 'field');
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'copy';
+            this.setPaletteDragImage(event);
+        }
+    }
+    sectionPaletteDragStarted(event) {
+        this.suppressPaletteClick = true;
+        this.nativeDragItem.set({ kind: 'section' });
+        event.dataTransfer?.setData(PALETTE_DRAG_ITEM, 'section');
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'copy';
+            this.setPaletteDragImage(event);
+        }
+    }
+    paletteDragEnded() {
+        this.nativeDragItem.set(null);
+        this.nativeDropTarget.set(null);
+        window.setTimeout(() => {
+            this.suppressPaletteClick = false;
+        });
+    }
+    paletteClicked(definition) {
+        if (this.suppressPaletteClick) {
+            return;
+        }
+        this.addField(definition);
+    }
+    nativeCanvasDragOver(event) {
+        this.nativeDragOver(event, ROOT_DROP_LIST_ID, '.ngs-form-builder-field:not(.ngs-form-builder-native-ghost-field), .ngs-form-builder-section:not(.ngs-form-builder-native-ghost-section)');
+    }
+    nativeFieldDragOver(event, containerId) {
+        if (this.nativeDragItem()?.kind === 'section') {
+            return;
+        }
+        event.stopPropagation();
+        this.nativeDragOver(event, containerId, '.ngs-form-builder-field:not(.ngs-form-builder-native-ghost-field)');
+    }
+    nativeSectionDragOver(event, section) {
+        if (this.nativeDragItem()?.kind === 'section') {
+            return;
+        }
+        event.stopPropagation();
+        this.nativeDragOverAtIndex(event, this.sectionDropListId(section), section.fields.length);
+    }
+    nativeSectionDrop(event, section) {
+        if (this.nativeDragItem()?.kind === 'section') {
+            return;
+        }
+        event.stopPropagation();
+        this.nativeFieldDrop(event, this.sectionDropListId(section));
+    }
+    nativeContainerFieldDragOver(event, field) {
+        if (!this.isContainerField(field)) {
+            return;
+        }
+        if (this.nativeDragItem()?.kind === 'section') {
+            return;
+        }
+        event.stopPropagation();
+        this.nativeDragOverAtIndex(event, this.fieldDropListId(field), field.children?.length ?? 0);
+    }
+    nativeContainerFieldDragLeave(event, field) {
+        if (!this.isContainerField(field)) {
+            return;
+        }
+        this.nativeDragLeave(event, this.fieldDropListId(field));
+    }
+    nativeContainerFieldDrop(event, field) {
+        if (!this.isContainerField(field)) {
+            return;
+        }
+        if (this.nativeDragItem()?.kind === 'section') {
+            return;
+        }
+        event.stopPropagation();
+        this.nativeFieldDrop(event, this.fieldDropListId(field));
+    }
+    nativeDragLeave(event, containerId) {
+        const target = event.currentTarget;
+        const relatedTarget = event.relatedTarget;
+        if (target instanceof HTMLElement &&
+            relatedTarget instanceof Node &&
+            target.contains(relatedTarget)) {
+            return;
+        }
+        if (this.nativeDropTarget()?.containerId === containerId) {
+            this.nativeDropTarget.set(null);
+        }
+    }
+    nativeFieldDrop(event, containerId) {
+        const item = this.resolveNativeDragItem(event);
+        if (!item) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const target = this.nativeDropTarget();
+        const index = target?.containerId === containerId ? target.index : 0;
+        if (item.kind === 'section') {
+            if (containerId !== ROOT_DROP_LIST_ID) {
+                return;
+            }
+            this.insertNativeSection(index);
+        }
+        else {
+            this.insertNativeField(item.definition, containerId, index);
+        }
+        this.nativeDragItem.set(null);
+        this.nativeDropTarget.set(null);
+    }
+    isNativeDropTarget(containerId, index) {
+        const target = this.nativeDropTarget();
+        return target?.containerId === containerId && target.index === index;
+    }
+    addField(definition, sectionId) {
+        const schema = cloneSchema(this.schema());
+        const fields = sectionId
+            ? schema.sections.find(item => item.id === sectionId)?.fields
+            : schema.fields;
+        if (!fields) {
+            return;
+        }
+        const field = this.createField(definition, schema);
+        const section = sectionId ? schema.sections.find(item => item.id === sectionId) : undefined;
+        fields.push(field);
+        if (!sectionId) {
+            schema.layout = this.normalizedLayout(schema);
+        }
+        this.schema.set(schema);
+        this.selectField(field, section);
+        this.fieldAdded.emit({ field, section });
+    }
+    addSection() {
+        const schema = cloneSchema(this.schema());
+        schema.sections.push({
+            id: uniqueId('section'),
+            title: `Section ${schema.sections.length + 1}`,
+            fields: []
+        });
+        schema.layout = this.normalizedLayout(schema);
+        this.schema.set(schema);
+    }
+    openPreview(template) {
+        this.dialog.open(template, {
+            width: '760px',
+            maxWidth: 'calc(100vw - 48px)',
+            maxHeight: 'calc(100vh - 48px)',
+            ariaLabel: 'Form preview'
+        });
+    }
+    removeSection(section) {
+        const schema = cloneSchema(this.schema());
+        schema.sections = schema.sections.filter(item => item.id !== section.id);
+        schema.layout = this.normalizedLayout(schema).filter(item => !(item.kind === 'section' && item.id === section.id));
+        if (schema.sections.length === 0) {
+            const nextSection = {
+                id: uniqueId('section'),
+                title: 'Section',
+                fields: []
+            };
+            schema.sections.push(nextSection);
+            schema.layout = this.normalizedLayout(schema);
+        }
+        if (section.fields.some(field => field.id === this.selectedFieldId() || containsField(field, this.selectedFieldId()))) {
+            this.selectedFieldId.set(null);
+        }
+        this.schema.set(schema);
+    }
+    updateSection(section, changes) {
+        const schema = cloneSchema(this.schema());
+        const nextSection = schema.sections.find(item => item.id === section.id);
+        if (!nextSection) {
+            return;
+        }
+        Object.assign(nextSection, changes);
+        this.schema.set(schema);
+    }
+    sectionDragStarted(section) {
+        if (section.collapsed) {
+            return;
+        }
+        this.dragCollapsedSectionIds.update(ids => new Set(ids).add(section.id));
+    }
+    sectionDragEnded(section) {
+        if (!this.dragCollapsedSectionIds().has(section.id)) {
+            return;
+        }
+        this.dragCollapsedSectionIds.update(ids => {
+            const next = new Set(ids);
+            next.delete(section.id);
+            return next;
+        });
+    }
+    isSectionCollapsed(section) {
+        return section.collapsed === true || this.dragCollapsedSectionIds().has(section.id);
+    }
+    dropField(event) {
+        const schema = cloneSchema(this.schema());
+        const targetContainer = this.findContainerLocation(schema, event.container.id);
+        if (!targetContainer) {
+            return;
+        }
+        if (event.previousContainer.id === 'ngs-form-builder-palette') {
+            const definition = event.item.data;
+            const field = this.createField(definition, schema);
+            targetContainer.fields.splice(event.currentIndex, 0, field);
+            this.schema.set(schema);
+            this.selectField(field, targetContainer.section);
+            this.fieldAdded.emit({ field, section: targetContainer.section });
+            return;
+        }
+        if (event.previousContainer.id === ROOT_DROP_LIST_ID) {
+            const layout = this.normalizedLayout(schema);
+            const movingItem = this.resolveCanvasDragItem(event.item.data, layout);
+            if (!movingItem || movingItem.kind !== 'field') {
+                return;
+            }
+            const sourceIndex = (schema.fields ?? []).findIndex(field => field.id === movingItem.id);
+            const movingField = (schema.fields ?? [])[sourceIndex];
+            const layoutIndex = layout.findIndex(item => item.kind === 'field' && item.id === movingItem.id);
+            if (!movingField) {
+                return;
+            }
+            if (targetContainer.owner &&
+                (targetContainer.owner.id === movingField.id || containsField(movingField, targetContainer.owner.id))) {
+                return;
+            }
+            schema.fields?.splice(sourceIndex, 1);
+            if (layoutIndex > -1) {
+                layout.splice(layoutIndex, 1);
+            }
+            targetContainer.fields.splice(event.currentIndex, 0, movingField);
+            schema.layout = layout;
+            this.schema.set(schema);
+            return;
+        }
+        const sourceContainer = this.findContainerLocation(schema, event.previousContainer.id);
+        if (!sourceContainer) {
+            return;
+        }
+        const movingField = sourceContainer.fields[event.previousIndex];
+        if (movingField &&
+            targetContainer.owner &&
+            (targetContainer.owner.id === movingField.id || containsField(movingField, targetContainer.owner.id))) {
+            return;
+        }
+        if (sourceContainer.id === targetContainer.id) {
+            moveItemInArray(targetContainer.fields, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(sourceContainer.fields, targetContainer.fields, event.previousIndex, event.currentIndex);
+        }
+        this.schema.set(schema);
+    }
+    dropCanvasItem(event) {
+        const schema = cloneSchema(this.schema());
+        const layout = this.normalizedLayout(schema);
+        if (event.previousContainer.id === 'ngs-form-builder-palette') {
+            const definition = event.item.data;
+            const field = this.createField(definition, schema);
+            schema.fields ??= [];
+            schema.fields.push(field);
+            layout.splice(event.currentIndex, 0, { kind: 'field', id: field.id });
+            schema.layout = layout;
+            this.schema.set(schema);
+            this.selectField(field);
+            this.fieldAdded.emit({ field });
+            return;
+        }
+        if (event.previousContainer.id === ROOT_DROP_LIST_ID) {
+            const movingItem = this.resolveCanvasDragItem(event.item.data, layout);
+            const previousIndex = movingItem
+                ? layout.findIndex(item => item.kind === movingItem.kind && item.id === movingItem.id)
+                : event.previousIndex;
+            if (previousIndex < 0) {
+                return;
+            }
+            moveItemInArray(layout, previousIndex, event.currentIndex);
+            schema.layout = layout;
+            this.schema.set(schema);
+            this.clearSectionDragCollapse();
+            return;
+        }
+        const sourceContainer = this.findContainerLocation(schema, event.previousContainer.id);
+        if (!sourceContainer) {
+            return;
+        }
+        const movingField = sourceContainer.fields[event.previousIndex];
+        if (!movingField) {
+            return;
+        }
+        sourceContainer.fields.splice(event.previousIndex, 1);
+        schema.fields ??= [];
+        schema.fields.push(movingField);
+        layout.splice(event.currentIndex, 0, { kind: 'field', id: movingField.id });
+        schema.layout = layout;
+        this.schema.set(schema);
+        this.clearSectionDragCollapse();
+    }
+    selectField(field, section = this.selectedSection()) {
+        this.selectedFieldId.set(field.id);
+        this.fieldSelected.emit({ field, section: section ?? undefined });
+    }
+    selectFieldTreeNode(node) {
+        if (node.field) {
+            if (node.section?.collapsed) {
+                this.updateSection(node.section, { collapsed: false });
+            }
+            this.selectField(node.field, node.section);
+            this.scrollCanvasFieldIntoView(node.field.id);
+        }
+    }
+    toggleFieldTreeNode(tree, node, event) {
+        event.stopPropagation();
+        if (!node.children?.length) {
+            return;
+        }
+        if (tree.isExpanded(node)) {
+            tree.collapse(node);
+            this.expandedFieldTreeNodeIds.update(ids => {
+                const next = new Set(ids);
+                next.delete(node.id);
+                return next;
+            });
+            return;
+        }
+        tree.expand(node);
+        this.expandedFieldTreeNodeIds.update(ids => new Set(ids).add(node.id));
+    }
+    isFieldTreeNodeExpanded(tree, node) {
+        return tree.isExpanded(node) || this.expandedFieldTreeNodeIds().has(node.id);
+    }
+    fieldTreePlaceholderIcon(source) {
+        return source.kind === 'section' ? 'fluent:folder-24-regular' : source.icon;
+    }
+    fieldTreeNodeDropped(event) {
+        if (event.source.kind === 'section') {
+            this.dropFieldTreeSection(event);
+            return;
+        }
+        if (event.source.kind !== 'field' ||
+            event.source.id === event.target.id ||
+            (event.target.kind === 'field' && event.position === 'inside' && !this.isContainerField(event.target.field))) {
+            this.resetFieldTreeAfterRejectedDrop();
+            return;
+        }
+        const schema = cloneSchema(this.schema());
+        const sourceLocation = this.findFieldLocation(schema, event.source.id);
+        if (!sourceLocation) {
+            this.resetFieldTreeAfterRejectedDrop();
+            return;
+        }
+        if (event.target.kind === 'field' &&
+            (sourceLocation.field.id === event.target.id || containsField(sourceLocation.field, event.target.id))) {
+            this.resetFieldTreeAfterRejectedDrop();
+            return;
+        }
+        const movingField = sourceLocation.field;
+        this.detachFieldFromLocation(schema, sourceLocation);
+        if (event.target.kind === 'section') {
+            const inserted = event.position === 'inside'
+                ? this.insertFieldIntoTreeSection(schema, movingField, event.target.id)
+                : this.insertFieldAroundTreeSection(schema, movingField, event.target.id, event.position);
+            if (inserted) {
+                this.schema.set(schema);
+                this.restoreFieldTreeExpansion();
+                this.selectField(movingField, event.position === 'inside' ? inserted.section : undefined);
+                return;
+            }
+        }
+        if (event.target.kind === 'field') {
+            const target = this.resolveTreeFieldInsertTarget(schema, event.target.id, event.position);
+            if (target) {
+                target.fields.splice(target.index, 0, movingField);
+                if (target.fields === (schema.fields ?? [])) {
+                    this.insertRootFieldIntoLayout(schema, movingField, event.target.id, event.position);
+                }
+                this.schema.set(schema);
+                this.restoreFieldTreeExpansion();
+                this.selectField(movingField, target.section);
+                return;
+            }
+        }
+        this.resetFieldTreeAfterRejectedDrop();
+    }
+    confirmRemoveField(field) {
+        const confirmRef = this.confirmManager.open({
+            title: 'Delete field',
+            description: `Delete "${field.label}" from this form? This action cannot be undone.`
+        });
+        confirmRef.confirmed.subscribe(() => {
+            this.removeField(field);
+        });
+    }
+    removeField(field) {
+        const schema = cloneSchema(this.schema());
+        const location = this.findFieldLocation(schema, field.id);
+        if (!location) {
+            return;
+        }
+        location.siblings.splice(location.index, 1);
+        schema.layout = this.normalizedLayout(schema).filter(item => !(item.kind === 'field' && item.id === field.id));
+        this.deletePreviewControls(field);
+        if (this.selectedFieldId() === field.id || containsField(field, this.selectedFieldId())) {
+            this.selectedFieldId.set(null);
+        }
+        this.schema.set(schema);
+        this.fieldRemoved.emit({ field, section: location.section });
+    }
+    sectionDropListId(section) {
+        return `ngs-form-builder-section-${section.id}`;
+    }
+    fieldDropListId(field) {
+        return `ngs-form-builder-field-${field.id}`;
+    }
+    rootDropListId() {
+        return ROOT_DROP_LIST_ID;
+    }
+    previewControl(field) {
+        const existing = this.previewControls.get(field.id);
+        if (existing) {
+            return existing;
+        }
+        const control = new FormControl({
+            value: field.defaultValue ?? null,
+            disabled: true
+        });
+        this.previewControls.set(field.id, control);
+        return control;
+    }
+    patchSelectedField(changes) {
+        const selectedId = this.selectedFieldId();
+        if (!selectedId) {
+            return;
+        }
+        const schema = cloneSchema(this.schema());
+        const location = this.findFieldLocation(schema, selectedId);
+        if (!location) {
+            return;
+        }
+        const nextField = {
+            ...location.field,
+            ...changes
+        };
+        if (changes.type === 'grid' && !nextField.children) {
+            nextField.children = [];
+        }
+        location.siblings[location.index] = nextField;
+        this.schema.set(schema);
+    }
+    isContainerField(field) {
+        return field.type === 'grid';
+    }
+    fieldIcon(field) {
+        return this.definitions().find(definition => definition.type === field.type)?.icon || 'fluent:form-24-regular';
+    }
+    definitionWidth(definition) {
+        return definition.defaults?.width ?? this.defaultWidth(definition.type);
+    }
+    matchesPaletteQuery(definition, query) {
+        return !query ||
+            definition.label.toLowerCase().includes(query) ||
+            definition.type.toLowerCase().includes(query) ||
+            (definition.description?.toLowerCase().includes(query) ?? false);
+    }
+    nativeDragOver(event, containerId, itemSelector) {
+        const item = this.nativeDragItem();
+        if (!item || (item.kind === 'section' && containerId !== ROOT_DROP_LIST_ID)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        this.nativeDropTarget.set({
+            containerId,
+            index: this.resolveNativeDropIndex(event, itemSelector)
+        });
+    }
+    nativeDragOverAtIndex(event, containerId, index) {
+        const item = this.nativeDragItem();
+        if (!item || item.kind === 'section') {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        this.nativeDropTarget.set({ containerId, index });
+    }
+    insertNativeField(definition, containerId, index) {
+        const schema = cloneSchema(this.schema());
+        const field = this.createField(definition, schema);
+        if (containerId === ROOT_DROP_LIST_ID) {
+            const layout = this.normalizedLayout(schema);
+            schema.fields ??= [];
+            schema.fields.push(field);
+            layout.splice(clampIndex(index, layout.length), 0, { kind: 'field', id: field.id });
+            schema.layout = layout;
+            this.schema.set(schema);
+            this.selectField(field);
+            this.fieldAdded.emit({ field });
+            return;
+        }
+        const targetContainer = this.findContainerLocation(schema, containerId);
+        if (!targetContainer) {
+            return;
+        }
+        targetContainer.fields.splice(clampIndex(index, targetContainer.fields.length), 0, field);
+        this.schema.set(schema);
+        this.selectField(field, targetContainer.section);
+        this.fieldAdded.emit({ field, section: targetContainer.section });
+    }
+    insertNativeSection(index) {
+        const schema = cloneSchema(this.schema());
+        const section = {
+            id: uniqueId('section'),
+            title: `Section ${schema.sections.length + 1}`,
+            fields: []
+        };
+        const layout = this.normalizedLayout(schema);
+        schema.sections.push(section);
+        layout.splice(clampIndex(index, layout.length), 0, { kind: 'section', id: section.id });
+        schema.layout = layout;
+        this.schema.set(schema);
+    }
+    resolveNativeDragItem(event) {
+        const currentItem = this.nativeDragItem();
+        if (currentItem) {
+            return currentItem;
+        }
+        if (event.dataTransfer?.getData(PALETTE_DRAG_ITEM) === 'section') {
+            return { kind: 'section' };
+        }
+        const type = event.dataTransfer?.getData(PALETTE_DRAG_TYPE);
+        const definition = type ? this.definitions().find(item => item.type === type) ?? null : null;
+        return definition ? { kind: 'field', definition } : null;
+    }
+    resolveNativeDropIndex(event, itemSelector) {
+        const container = event.currentTarget;
+        if (!(container instanceof HTMLElement)) {
+            return 0;
+        }
+        const items = Array.from(container.children).filter((child) => {
+            return child instanceof HTMLElement && child.matches(itemSelector);
+        });
+        for (let index = 0; index < items.length; index += 1) {
+            const rect = items[index].getBoundingClientRect();
+            const centerY = rect.top + rect.height / 2;
+            const centerX = rect.left + rect.width / 2;
+            const sameRow = event.clientY >= rect.top && event.clientY <= rect.bottom;
+            if (event.clientY < centerY || (sameRow && event.clientX < centerX)) {
+                return index;
+            }
+        }
+        return items.length;
+    }
+    setPaletteDragImage(event) {
+        const source = event.currentTarget;
+        if (!(source instanceof HTMLElement) || !event.dataTransfer) {
+            return;
+        }
+        const clone = source.cloneNode(true);
+        if (!(clone instanceof HTMLElement)) {
+            return;
+        }
+        clone.classList.add('ngs-form-builder-native-drag-image');
+        source.parentElement?.appendChild(clone);
+        const rect = source.getBoundingClientRect();
+        event.dataTransfer.setDragImage(clone, Math.min(event.offsetX, rect.width), Math.min(event.offsetY, rect.height));
+        window.setTimeout(() => clone.remove());
+    }
+    createField(definition, schema) {
+        const baseLabel = definition.defaults?.label || definition.label;
+        const name = uniqueFieldName(toFieldName(baseLabel), schema);
+        return {
+            id: uniqueId('field'),
+            name,
+            type: definition.type,
+            label: baseLabel,
+            width: definition.defaults?.width ?? this.defaultWidth(definition.type),
+            visibility: {
+                form: true,
+                email: true,
+                pdf: true
+            },
+            ...definition.defaults
+        };
+    }
+    defaultWidth(type) {
+        return 12;
+    }
+    resolveCanvasItems(schema) {
+        const fieldsById = new Map((schema.fields ?? []).map(field => [field.id, field]));
+        const sectionsById = new Map(schema.sections.map(section => [section.id, section]));
+        const items = [];
+        for (const item of this.normalizedLayout(schema)) {
+            if (item.kind === 'field') {
+                const field = fieldsById.get(item.id);
+                if (field) {
+                    items.push({ ...item, field });
+                }
+                continue;
+            }
+            const section = sectionsById.get(item.id);
+            if (section) {
+                items.push({ ...item, section });
+            }
+        }
+        return items;
+    }
+    normalizedLayout(schema) {
+        const used = new Set();
+        const layout = [];
+        const fieldsById = new Map((schema.fields ?? []).map(field => [field.id, field]));
+        const sectionsById = new Map(schema.sections.map(section => [section.id, section]));
+        for (const item of schema.layout ?? []) {
+            const key = `${item.kind}:${item.id}`;
+            if (used.has(key)) {
+                continue;
+            }
+            if ((item.kind === 'field' && fieldsById.has(item.id)) || (item.kind === 'section' && sectionsById.has(item.id))) {
+                used.add(key);
+                layout.push(item);
+            }
+        }
+        for (const field of schema.fields ?? []) {
+            const key = `field:${field.id}`;
+            if (!used.has(key)) {
+                used.add(key);
+                layout.push({ kind: 'field', id: field.id });
+            }
+        }
+        for (const section of schema.sections) {
+            const key = `section:${section.id}`;
+            if (!used.has(key)) {
+                used.add(key);
+                layout.push({ kind: 'section', id: section.id });
+            }
+        }
+        return layout;
+    }
+    collectFieldContainerDropListIds(schema) {
+        return [
+            ...(schema.fields ?? []).flatMap(field => this.collectFieldDropListIds(field)),
+            ...schema.sections.flatMap(section => [
+                this.sectionDropListId(section),
+                ...section.fields.flatMap(field => this.collectFieldDropListIds(field))
+            ])
+        ];
+    }
+    collectFieldDropListIds(field) {
+        return [
+            ...(this.isContainerField(field) ? [this.fieldDropListId(field)] : []),
+            ...(field.children ?? []).flatMap(child => this.collectFieldDropListIds(child))
+        ];
+    }
+    resolveCanvasDragItem(data, layout) {
+        if (isFormBuilderLayoutItem(data)) {
+            return data;
+        }
+        if (isFormBuilderField(data)) {
+            return layout.find(item => item.kind === 'field' && item.id === data.id) ?? null;
+        }
+        return null;
+    }
+    detachFieldFromLocation(schema, location) {
+        location.siblings.splice(location.index, 1);
+        if (location.siblings === (schema.fields ?? [])) {
+            schema.layout = this.normalizedLayout(schema).filter(item => !(item.kind === 'field' && item.id === location.field.id));
+        }
+    }
+    insertFieldIntoTreeSection(schema, field, sectionId) {
+        const section = schema.sections.find(item => item.id === sectionId);
+        if (!section) {
+            return null;
+        }
+        section.fields.push(field);
+        return {
+            fields: section.fields,
+            index: section.fields.length - 1,
+            section
+        };
+    }
+    insertFieldAroundTreeSection(schema, field, sectionId, position) {
+        if (position === 'inside') {
+            return this.insertFieldIntoTreeSection(schema, field, sectionId);
+        }
+        const section = schema.sections.find(item => item.id === sectionId);
+        if (!section) {
+            return null;
+        }
+        schema.fields ??= [];
+        if (!schema.fields.some(item => item.id === field.id)) {
+            schema.fields.push(field);
+        }
+        const layout = this.normalizedLayout(schema).filter(item => !(item.kind === 'field' && item.id === field.id));
+        const sectionIndex = layout.findIndex(item => item.kind === 'section' && item.id === sectionId);
+        layout.splice(sectionIndex === -1 ? layout.length : sectionIndex + (position === 'after' ? 1 : 0), 0, {
+            kind: 'field',
+            id: field.id
+        });
+        schema.layout = layout;
+        return {
+            fields: schema.fields,
+            index: schema.fields.findIndex(item => item.id === field.id)
+        };
+    }
+    resolveTreeFieldInsertTarget(schema, targetFieldId, position) {
+        const targetLocation = this.findFieldLocation(schema, targetFieldId);
+        if (!targetLocation) {
+            return null;
+        }
+        if (position === 'inside' && this.isContainerField(targetLocation.field)) {
+            targetLocation.field.children ??= [];
+            return {
+                fields: targetLocation.field.children,
+                index: targetLocation.field.children.length,
+                section: targetLocation.section
+            };
+        }
+        const insertIndex = position === 'before' ? targetLocation.index : targetLocation.index + 1;
+        return {
+            fields: targetLocation.siblings,
+            index: insertIndex,
+            section: targetLocation.section
+        };
+    }
+    insertRootFieldIntoLayout(schema, field, targetFieldId, position) {
+        schema.fields ??= [];
+        if (!schema.fields.some(item => item.id === field.id)) {
+            schema.fields.push(field);
+        }
+        const layout = this.normalizedLayout(schema).filter(item => !(item.kind === 'field' && item.id === field.id));
+        const targetIndex = layout.findIndex(item => item.kind === 'field' && item.id === targetFieldId);
+        layout.splice(targetIndex === -1 ? layout.length : targetIndex + (position === 'before' ? 0 : 1), 0, {
+            kind: 'field',
+            id: field.id
+        });
+        schema.layout = layout;
+    }
+    clearSectionDragCollapse() {
+        if (this.dragCollapsedSectionIds().size) {
+            this.dragCollapsedSectionIds.set(new Set());
+        }
+    }
+    resetFieldTreeAfterRejectedDrop() {
+        this.schema.set(cloneSchema(this.schema()));
+        this.restoreFieldTreeExpansion();
+    }
+    canDropFieldTreeNode(source, target, position) {
+        if (source.id === target.id) {
+            return false;
+        }
+        if (source.kind === 'section') {
+            return position !== 'inside' && (target.kind === 'section' || this.isRootFieldTreeNode(target));
+        }
+        if (target.kind === 'field' && position === 'inside') {
+            return !!target.field && this.isContainerField(target.field);
+        }
+        return true;
+    }
+    dropFieldTreeSection(event) {
+        if (!this.canDropFieldTreeNode(event.source, event.target, event.position)) {
+            this.resetFieldTreeAfterRejectedDrop();
+            return;
+        }
+        const schema = cloneSchema(this.schema());
+        const layout = this.normalizedLayout(schema);
+        const sourceIndex = layout.findIndex(item => item.kind === 'section' && item.id === event.source.id);
+        const targetKind = event.target.kind === 'section' ? 'section' : 'field';
+        const targetIndex = layout.findIndex(item => item.kind === targetKind && item.id === event.target.id);
+        if (sourceIndex < 0 || targetIndex < 0) {
+            this.resetFieldTreeAfterRejectedDrop();
+            return;
+        }
+        const [sectionItem] = layout.splice(sourceIndex, 1);
+        const adjustedTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex;
+        layout.splice(adjustedTargetIndex + (event.position === 'after' ? 1 : 0), 0, sectionItem);
+        schema.layout = layout;
+        this.schema.set(schema);
+        this.restoreFieldTreeExpansion();
+    }
+    isRootFieldTreeNode(node) {
+        if (node.kind !== 'field') {
+            return false;
+        }
+        return this.resolveCanvasItems(this.schema()).some(item => item.kind === 'field' && item.id === node.id);
+    }
+    restoreFieldTreeExpansion() {
+        const expandedIds = this.expandedFieldTreeNodeIds();
+        if (!expandedIds.size) {
+            return;
+        }
+        this.afterNextPaint(() => {
+            this.afterNextPaint(() => {
+                const tree = this.actualFieldsTree();
+                if (!tree) {
+                    return;
+                }
+                for (const node of this.flattenFieldTree(this.fieldTree())) {
+                    if (node.children?.length && expandedIds.has(node.id)) {
+                        tree.expand(node);
+                    }
+                }
+            });
+        });
+    }
+    flattenFieldTree(nodes) {
+        return nodes.flatMap(node => [node, ...this.flattenFieldTree(node.children ?? [])]);
+    }
+    scrollCanvasFieldIntoView(fieldId) {
+        this.afterNextPaint(() => {
+            this.afterNextPaint(() => {
+                const target = this.findCanvasFieldElement(fieldId);
+                if (!target) {
+                    return;
+                }
+                const scrollableContent = target
+                    .closest('ngs-scrollbar-area')
+                    ?.querySelector('.scrollable-content');
+                if (!scrollableContent) {
+                    target.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+                    return;
+                }
+                this.scrollElementFullyIntoView(target, scrollableContent);
+            });
+        });
+    }
+    findCanvasFieldElement(fieldId) {
+        const fields = this.elementRef.nativeElement.querySelectorAll('.ngs-form-builder-canvas [data-form-builder-field-id]');
+        return Array.from(fields).find(field => field.dataset['formBuilderFieldId'] === fieldId) ?? null;
+    }
+    scrollElementFullyIntoView(target, scrollableContent) {
+        const padding = 16;
+        const containerRect = scrollableContent.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const availableHeight = Math.max(0, containerRect.height - padding * 2);
+        const availableWidth = Math.max(0, containerRect.width - padding * 2);
+        let top = scrollableContent.scrollTop;
+        let left = scrollableContent.scrollLeft;
+        if (targetRect.height > availableHeight || targetRect.top < containerRect.top + padding) {
+            top += targetRect.top - containerRect.top - padding;
+        }
+        else if (targetRect.bottom > containerRect.bottom - padding) {
+            top += targetRect.bottom - containerRect.bottom + padding;
+        }
+        if (targetRect.width > availableWidth || targetRect.left < containerRect.left + padding) {
+            left += targetRect.left - containerRect.left - padding;
+        }
+        else if (targetRect.right > containerRect.right - padding) {
+            left += targetRect.right - containerRect.right + padding;
+        }
+        scrollableContent.scrollTo({
+            top: Math.max(0, top),
+            left: Math.max(0, left),
+            behavior: 'smooth'
+        });
+    }
+    afterNextPaint(callback) {
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(callback);
+            return;
+        }
+        window.setTimeout(callback);
+    }
+    createFieldTreeNode(field, section) {
+        const definition = this.definitions().find(item => item.type === field.type);
+        return {
+            id: field.id,
+            label: field.label,
+            name: field.name,
+            type: field.type,
+            icon: definition?.icon || 'fluent:form-24-regular',
+            kind: 'field',
+            field,
+            section,
+            children: field.children?.map(child => this.createFieldTreeNode(child, section))
+        };
+    }
+    findContainerLocation(schema, containerId) {
+        if (containerId === ROOT_DROP_LIST_ID) {
+            return {
+                id: containerId,
+                fields: schema.fields ?? []
+            };
+        }
+        const rootNested = this.findFieldContainerLocation(schema.fields ?? [], undefined, containerId);
+        if (rootNested) {
+            return rootNested;
+        }
+        for (const section of schema.sections) {
+            if (this.sectionDropListId(section) === containerId) {
+                return {
+                    id: containerId,
+                    fields: section.fields,
+                    section
+                };
+            }
+            const nested = this.findFieldContainerLocation(section.fields, section, containerId);
+            if (nested) {
+                return nested;
+            }
+        }
+        return null;
+    }
+    findFieldContainerLocation(fields, section, containerId) {
+        for (const field of fields) {
+            if (this.isContainerField(field) && this.fieldDropListId(field) === containerId) {
+                field.children ??= [];
+                return {
+                    id: containerId,
+                    fields: field.children,
+                    section,
+                    owner: field
+                };
+            }
+            const nested = this.findFieldContainerLocation(field.children ?? [], section, containerId);
+            if (nested) {
+                return nested;
+            }
+        }
+        return null;
+    }
+    findFieldLocation(schema, fieldId) {
+        const rootLocation = findFieldLocationInFields(schema.fields ?? [], fieldId);
+        if (rootLocation) {
+            return rootLocation;
+        }
+        for (const section of schema.sections) {
+            const location = findFieldLocationInFields(section.fields, fieldId, section);
+            if (location) {
+                return location;
+            }
+        }
+        return null;
+    }
+    deletePreviewControls(field) {
+        this.previewControls.delete(field.id);
+        for (const child of field.children ?? []) {
+            this.deletePreviewControls(child);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilder, isStandalone: true, selector: "ngs-form-builder", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, paletteTitle: { classPropertyName: "paletteTitle", publicName: "paletteTitle", isSignal: true, isRequired: false, transformFunction: null }, inspectorTitle: { classPropertyName: "inspectorTitle", publicName: "inspectorTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schema: "schemaChange", fieldSelected: "fieldSelected", fieldAdded: "fieldAdded", fieldRemoved: "fieldRemoved" }, host: { classAttribute: "ngs-form-builder" }, viewQueries: [{ propertyName: "actualFieldsTree", first: true, predicate: ["actualFieldsTree"], descendants: true, isSignal: true }], exportAs: ["ngsFormBuilder"], ngImport: i0, template: "<ng-template #fieldCard let-field let-section=\"section\" let-dragData=\"dragData\">\n  <div\n    class=\"ngs-form-builder-field\"\n    cdkDrag\n    [cdkDragData]=\"dragData || field\"\n    [class.is-width-1]=\"(field.width ?? 12) === 1\"\n    [class.is-width-2]=\"field.width === 2\"\n    [class.is-width-3]=\"field.width === 3\"\n    [class.is-width-4]=\"field.width === 4\"\n    [class.is-width-5]=\"field.width === 5\"\n    [class.is-width-6]=\"field.width === 6\"\n    [class.is-width-7]=\"field.width === 7\"\n    [class.is-width-8]=\"field.width === 8\"\n    [class.is-width-9]=\"field.width === 9\"\n    [class.is-width-10]=\"field.width === 10\"\n    [class.is-width-11]=\"field.width === 11\"\n    [class.is-width-12]=\"(field.width ?? 12) === 12\"\n    [class.is-container]=\"isContainerField(field)\"\n    [class.is-selected]=\"selectedFieldId() === field.id\"\n    [attr.data-form-builder-field-id]=\"field.id\"\n    (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n    (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n    (drop)=\"nativeContainerFieldDrop($event, field)\"\n    (click)=\"$event.stopPropagation(); selectField(field, section)\">\n    <div class=\"ngs-form-builder-field-header\">\n      <div class=\"ngs-form-builder-field-label\">\n        <ngs-icon [name]=\"fieldIcon(field)\"/>\n        <span>{{ field.label }}</span>\n      </div>\n\n      <button ngsIconButton type=\"button\" class=\"ngs-form-builder-field-handle\" cdkDragHandle aria-label=\"Move field\">\n        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n      </button>\n    </div>\n\n    @if (isContainerField(field)) {\n      <div class=\"ngs-form-builder-grid-field\">\n        <ng-container\n          [ngTemplateOutlet]=\"fieldList\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: field.children ?? [],\n            containerId: fieldDropListId(field),\n            section\n          }\"/>\n      </div>\n    } @else {\n      <ngs-form-builder-field-host\n        [field]=\"field\"\n        [control]=\"previewControl(field)\"\n        [definitions]=\"definitions()\"\n        [readonly]=\"true\"\n        [editableCanvas]=\"true\"/>\n    }\n\n    <ng-template cdkDragPlaceholder>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-line-placeholder\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n      </div>\n    </ng-template>\n\n    <ng-template cdkDragPreview>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-drag-preview\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n        <div class=\"ngs-form-builder-field-header\">\n          <div class=\"ngs-form-builder-field-label\">\n            <ngs-icon [name]=\"fieldIcon(field)\"/>\n            <span>{{ field.label }}</span>\n          </div>\n          <span class=\"ngs-form-builder-drag-icon\">\n            <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n          </span>\n        </div>\n        <div class=\"ngs-form-builder-ghost-control\"></div>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    cdkDropList\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    [cdkDropListData]=\"fields\"\n    cdkDropListOrientation=\"mixed\"\n    [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n    [cdkDropListEnterPredicate]=\"fieldDropListEnterPredicate\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\"\n    (cdkDropListDropped)=\"dropField($event)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"fieldCard\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: field,\n          section\n        }\"/>\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\" cdkDropListGroup>\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-b-subtle px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-e-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <h3 class=\"text-base font-semibold\">{{ paletteTitle() }}</h3>\n\n        <ngs-tab-group animationDuration=\"0ms\" ngs-stretch-tabs=\"false\">\n          <ngs-tab label=\"Placeholders\">\n            <div class=\"flex flex-col gap-4 pt-4\">\n              <ngs-form-field>\n                <ngs-label>Search placeholder</ngs-label>\n                <input ngsInput\n                       [ngModel]=\"search()\"\n                       [ngModelOptions]=\"{standalone: true}\"\n                       (ngModelChange)=\"search.set($event)\">\n              </ngs-form-field>\n\n              <div class=\"flex flex-col gap-5\">\n                <section class=\"flex flex-col gap-2\">\n                  <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n                  <button\n                    type=\"button\"\n                    class=\"ngs-form-builder-palette-item\"\n                    draggable=\"true\"\n                    (dragstart)=\"sectionPaletteDragStarted($event)\"\n                    (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n                  </button>\n\n                  @for (definition of layoutDefinitions(); track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                    </button>\n                  }\n                </section>\n\n                @for (group of paletteGroups(); track group.name) {\n                  <section class=\"flex flex-col gap-2\">\n                    <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                    <div class=\"flex flex-col gap-2\">\n                      @for (definition of group.fields; track definition.type) {\n                        <button\n                          type=\"button\"\n                          class=\"ngs-form-builder-palette-item\"\n                          draggable=\"true\"\n                          (dragstart)=\"paletteDragStarted($event, definition)\"\n                          (dragend)=\"paletteDragEnded()\"\n                          (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                        </button>\n                      }\n                    </div>\n                  </section>\n                }\n              </div>\n            </div>\n          </ngs-tab>\n\n          <ngs-tab label=\"Actual fields\">\n            <div class=\"pt-4\">\n              <ngs-tree\n                #actualFieldsTree=\"ngsTree\"\n                [dataSource]=\"fieldTree()\"\n                [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n                [trackBy]=\"trackFieldTreeNode\"\n                [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n                [dropPredicate]=\"fieldTreeDropPredicate\"\n                [reorderOnDrop]=\"false\"\n                (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n                draggable>\n                <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                  <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                    <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                    <span>{{ source.label }}</span>\n                  </div>\n                </ng-template>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                               ngsTreeNodePadding\n                               [value]=\"node.id\"\n                               [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                  <button\n                    ngsIconButton\n                    class=\"ngs-form-builder-tree-toggle\"\n                    [attr.aria-label]=\"'Toggle ' + node.label\"\n                    (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                    <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                  </button>\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n              </ngs-tree>\n            </div>\n          </ngs-tab>\n        </ngs-tab-group>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          cdkDropList\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          [cdkDropListData]=\"canvasItems()\"\n          [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\"\n          (cdkDropListDropped)=\"dropCanvasItem($event)\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              <ng-container\n                [ngTemplateOutlet]=\"fieldCard\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: field,\n                  dragData: item\n                }\"/>\n            } @else if (item.section; as section) {\n            <ngs-card class=\"ngs-form-builder-section\"\n                      cdkDrag\n                      cdkDragLockAxis=\"y\"\n                      [cdkDragData]=\"item\"\n                      (cdkDragStarted)=\"sectionDragStarted(section)\"\n                      (cdkDragEnded)=\"sectionDragEnded(section)\"\n                      (dragover)=\"nativeSectionDragOver($event, section)\"\n                      (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                      (drop)=\"nativeSectionDrop($event, section)\">\n              <ngs-card-header>\n                <div class=\"ngs-form-builder-section-heading\">\n                  <button ngsIconButton type=\"button\" class=\"ngs-form-builder-section-handle\" cdkDragHandle aria-label=\"Move section\">\n                    <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                  </button>\n                  <input ngsInput\n                         class=\"ngs-form-builder-section-title\"\n                         [ngModel]=\"section.title\"\n                         [ngModelOptions]=\"{standalone: true}\"\n                         (ngModelChange)=\"updateSection(section, { title: $event })\"\n                         aria-label=\"Section title\">\n                </div>\n                @if (section.description) {\n                  <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                }\n\n                <ngs-card-aside>\n                  <div class=\"ngs-form-builder-section-actions\">\n                    <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                      <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                    </button>\n                    <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                      <ngs-icon name=\"fluent:delete-24-regular\"/>\n                    </button>\n                  </div>\n                </ngs-card-aside>\n              </ngs-card-header>\n\n              @if (!isSectionCollapsed(section)) {\n                <ngs-card-content>\n                  <ng-container\n                    [ngTemplateOutlet]=\"fieldList\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: section.fields,\n                      containerId: sectionDropListId(section),\n                      section\n                    }\"/>\n                </ngs-card-content>\n              } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                <ngs-card-content>\n                  <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                    <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                  </div>\n                </ngs-card-content>\n              }\n\n              <ng-template cdkDragPlaceholder>\n                <div class=\"ngs-form-builder-section-line-placeholder\"></div>\n              </ng-template>\n\n              <ng-template cdkDragPreview>\n                <ngs-card class=\"ngs-form-builder-section ngs-form-builder-section-drag-preview\">\n                  <ngs-card-header>\n                    <div class=\"ngs-form-builder-section-heading\">\n                      <span class=\"ngs-form-builder-section-handle\">\n                        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                      </span>\n                      <span class=\"ngs-form-builder-section-preview-title\">{{ section.title }}</span>\n                    </div>\n                    <ngs-card-aside>\n                      <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"size-5\"/>\n                    </ngs-card-aside>\n                  </ngs-card-header>\n                </ngs-card>\n              </ng-template>\n            </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-s-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-5\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"min-w-0\">\n            <h3 class=\"text-base font-semibold\">{{ inspectorTitle() }}</h3>\n            @if (selectedField()) {\n              <p class=\"truncate text-sm text-secondary\">{{ selectedField()?.label }}</p>\n            }\n          </div>\n          <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n\n        @if (selectedField(); as field) {\n          <ngs-basic-form-builder-field-settings\n            [field]=\"field\"\n            [update]=\"updateSelectedField\"/>\n\n          <ngs-form-builder-settings-host\n            [field]=\"field\"\n            [schema]=\"schema()\"\n            [definitions]=\"definitions()\"\n            [settingsDefinitions]=\"settingsDefinitions()\"\n            [update]=\"updateSelectedField\"/>\n\n          <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n            <ngs-icon name=\"fluent:delete-24-regular\"/>\n            Delete field\n          </button>\n        } @else {\n          <div class=\"ngs-form-builder-empty-inspector\">\n            Select a field on the canvas or in the fields tree to edit its settings.\n          </div>\n        }\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-builder-renderer\n      [schema]=\"schema()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-primary);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1);--ngs-tree-node-drop-line-color: var(--ngs-color-primary);--ngs-tree-node-drop-target-outline: 0;--ngs-tree-node-drop-target-bg: var(--ngs-color-primary-container)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{--ngs-button-height: calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-drag-preview{width:min(100%,900px);background:var(--ngs-color-surface)}:host .ngs-form-builder-native-ghost-section{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-list{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-handle{flex:none;color:var(--ngs-color-on-surface-variant);cursor:grab}:host .ngs-form-builder-section-handle:active{cursor:grabbing}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-handle{flex:none;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-empty-inspector{display:flex;min-height:calc(var(--spacing, .25rem) * 14);align-items:center;justify-content:center;border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-lg);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-empty-inspector{min-height:calc(var(--spacing, .25rem) * 28);border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .cdk-drag-preview{box-sizing:border-box;border-radius:var(--ngs-radius-lg);box-shadow:var(--ngs-shadow-lg)}:host .ngs-form-builder-field-placeholder{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 92%)}}:host .ngs-form-builder-field-line-placeholder{min-height:calc(var(--spacing, .25rem) * 6);justify-content:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-field-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .ngs-form-builder-field-drag-preview{width:min(360px,100vw - calc(var(--spacing, .25rem) * 8));min-height:calc(var(--spacing, .25rem) * 20);border-color:var(--ngs-color-primary);background:var(--ngs-color-surface);box-shadow:var(--ngs-shadow-lg);opacity:.94;pointer-events:none}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 18);border:1px dashed var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 6);border:0;background:transparent}:host .ngs-form-builder-section-line-placeholder{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-section-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .cdk-drag-placeholder{opacity:0}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder,:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder,:host .ngs-form-builder-canvas-list .ngs-form-builder-section-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-palette .cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-drop-list.cdk-drop-list-dragging .ngs-form-builder-field:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-canvas-list.cdk-drop-list-dragging .ngs-form-builder-section:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Card, selector: "ngs-card", inputs: ["appearance"], exportAs: ["ngsCard"] }, { kind: "component", type: CardAside, selector: "ngs-card-aside, [ngs-card-aside], ngsCardAside" }, { kind: "component", type: CardContent, selector: "ngs-card-content, [ngs-card-content], [ngsCardContent]", inputs: ["withoutPadding"], exportAs: ["ngsCardContent"] }, { kind: "component", type: CardHeader, selector: "ngs-card-header", exportAs: ["ngsCardHeader"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Tree, selector: "ngs-tree", inputs: ["checkable", "selectable", "draggable", "draggablePredicate", "dropPredicate", "reorderOnDrop", "dragPreview", "childrenKey", "filterValue", "filterPredicate", "filterMode"], outputs: ["checkedChange", "selectedChange", "nodeDrop"], exportAs: ["ngsTree"] }, { kind: "directive", type: TreeDragPlaceholder, selector: "ng-template[ngsTreeDragPlaceholder]" }, { kind: "component", type: TreeNode, selector: "ngs-tree-node", inputs: ["tabIndex", "value", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["ngsTreeNode"] }, { kind: "directive", type: TreeNodeDef, selector: "[ngsTreeNodeDef]", inputs: ["ngsTreeNodeDefWhen", "ngsTreeNode"] }, { kind: "directive", type: TreeNodePadding, selector: "[ngsTreeNodePadding]", inputs: ["ngsTreeNodePadding", "ngsTreeNodePaddingIndent"] }, { kind: "component", type: FormBuilderFieldHost, selector: "ngs-form-builder-field-host", inputs: ["field", "control", "definitions", "readonly", "editableCanvas"], exportAs: ["ngsFormBuilderFieldHost"] }, { kind: "component", type: FormBuilderRenderer, selector: "ngs-form-builder-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormBuilderRenderer"] }, { kind: "component", type: FormBuilderSettingsHost, selector: "ngs-form-builder-settings-host", inputs: ["field", "schema", "definitions", "settingsDefinitions", "update"], exportAs: ["ngsFormBuilderSettingsHost"] }, { kind: "component", type: BasicFormBuilderFieldSettings, selector: "ngs-basic-form-builder-field-settings", inputs: ["field", "update"], exportAs: ["ngsBasicFormBuilderFieldSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilder, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-builder', exportAs: 'ngsFormBuilder', imports: [
+                        NgTemplateOutlet,
+                        FormsModule,
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDragPlaceholder,
+                        CdkDragPreview,
+                        CdkDropList,
+                        CdkDropListGroup,
+                        Button,
+                        Card,
+                        CardAside,
+                        CardContent,
+                        CardHeader,
+                        DialogActions,
+                        DialogClose,
+                        DialogContent,
+                        DialogTitle,
+                        FormField,
+                        Icon,
+                        Input,
+                        Label,
+                        Panel,
+                        PanelAside,
+                        PanelContent,
+                        PanelHeader,
+                        PanelSidebar,
+                        ScrollbarArea,
+                        Tab,
+                        TabGroup,
+                        Tree,
+                        TreeDragPlaceholder,
+                        TreeNode,
+                        TreeNodeDef,
+                        TreeNodePadding,
+                        FormBuilderFieldHost,
+                        FormBuilderRenderer,
+                        FormBuilderSettingsHost,
+                        BasicFormBuilderFieldSettings
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-form-builder'
+                    }, template: "<ng-template #fieldCard let-field let-section=\"section\" let-dragData=\"dragData\">\n  <div\n    class=\"ngs-form-builder-field\"\n    cdkDrag\n    [cdkDragData]=\"dragData || field\"\n    [class.is-width-1]=\"(field.width ?? 12) === 1\"\n    [class.is-width-2]=\"field.width === 2\"\n    [class.is-width-3]=\"field.width === 3\"\n    [class.is-width-4]=\"field.width === 4\"\n    [class.is-width-5]=\"field.width === 5\"\n    [class.is-width-6]=\"field.width === 6\"\n    [class.is-width-7]=\"field.width === 7\"\n    [class.is-width-8]=\"field.width === 8\"\n    [class.is-width-9]=\"field.width === 9\"\n    [class.is-width-10]=\"field.width === 10\"\n    [class.is-width-11]=\"field.width === 11\"\n    [class.is-width-12]=\"(field.width ?? 12) === 12\"\n    [class.is-container]=\"isContainerField(field)\"\n    [class.is-selected]=\"selectedFieldId() === field.id\"\n    [attr.data-form-builder-field-id]=\"field.id\"\n    (dragover)=\"nativeContainerFieldDragOver($event, field)\"\n    (dragleave)=\"nativeContainerFieldDragLeave($event, field)\"\n    (drop)=\"nativeContainerFieldDrop($event, field)\"\n    (click)=\"$event.stopPropagation(); selectField(field, section)\">\n    <div class=\"ngs-form-builder-field-header\">\n      <div class=\"ngs-form-builder-field-label\">\n        <ngs-icon [name]=\"fieldIcon(field)\"/>\n        <span>{{ field.label }}</span>\n      </div>\n\n      <button ngsIconButton type=\"button\" class=\"ngs-form-builder-field-handle\" cdkDragHandle aria-label=\"Move field\">\n        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n      </button>\n    </div>\n\n    @if (isContainerField(field)) {\n      <div class=\"ngs-form-builder-grid-field\">\n        <ng-container\n          [ngTemplateOutlet]=\"fieldList\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: field.children ?? [],\n            containerId: fieldDropListId(field),\n            section\n          }\"/>\n      </div>\n    } @else {\n      <ngs-form-builder-field-host\n        [field]=\"field\"\n        [control]=\"previewControl(field)\"\n        [definitions]=\"definitions()\"\n        [readonly]=\"true\"\n        [editableCanvas]=\"true\"/>\n    }\n\n    <ng-template cdkDragPlaceholder>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-line-placeholder\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n      </div>\n    </ng-template>\n\n    <ng-template cdkDragPreview>\n      <div\n        class=\"ngs-form-builder-field ngs-form-builder-field-drag-preview\"\n        [class.is-width-1]=\"(field.width ?? 12) === 1\"\n        [class.is-width-2]=\"field.width === 2\"\n        [class.is-width-3]=\"field.width === 3\"\n        [class.is-width-4]=\"field.width === 4\"\n        [class.is-width-5]=\"field.width === 5\"\n        [class.is-width-6]=\"field.width === 6\"\n        [class.is-width-7]=\"field.width === 7\"\n        [class.is-width-8]=\"field.width === 8\"\n        [class.is-width-9]=\"field.width === 9\"\n        [class.is-width-10]=\"field.width === 10\"\n        [class.is-width-11]=\"field.width === 11\"\n        [class.is-width-12]=\"(field.width ?? 12) === 12\">\n        <div class=\"ngs-form-builder-field-header\">\n          <div class=\"ngs-form-builder-field-label\">\n            <ngs-icon [name]=\"fieldIcon(field)\"/>\n            <span>{{ field.label }}</span>\n          </div>\n          <span class=\"ngs-form-builder-drag-icon\">\n            <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n          </span>\n        </div>\n        <div class=\"ngs-form-builder-ghost-control\"></div>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #nativeFieldGhost>\n  @if (nativeDragFieldDefinition(); as definition) {\n    <div\n      class=\"ngs-form-builder-field ngs-form-builder-field-placeholder ngs-form-builder-native-ghost-field\"\n      [class.is-width-1]=\"definitionWidth(definition) === 1\"\n      [class.is-width-2]=\"definitionWidth(definition) === 2\"\n      [class.is-width-3]=\"definitionWidth(definition) === 3\"\n      [class.is-width-4]=\"definitionWidth(definition) === 4\"\n      [class.is-width-5]=\"definitionWidth(definition) === 5\"\n      [class.is-width-6]=\"definitionWidth(definition) === 6\"\n      [class.is-width-7]=\"definitionWidth(definition) === 7\"\n      [class.is-width-8]=\"definitionWidth(definition) === 8\"\n      [class.is-width-9]=\"definitionWidth(definition) === 9\"\n      [class.is-width-10]=\"definitionWidth(definition) === 10\"\n      [class.is-width-11]=\"definitionWidth(definition) === 11\"\n      [class.is-width-12]=\"definitionWidth(definition) === 12\">\n      <div class=\"ngs-form-builder-field-header\">\n        <div class=\"ngs-form-builder-field-label\">\n          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n          <span>{{ definition.defaults?.label || definition.label }}</span>\n        </div>\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:arrow-move-24-regular\"/>\n        </span>\n      </div>\n      <div class=\"ngs-form-builder-ghost-control\"></div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #nativeSectionGhost>\n  <ngs-card class=\"ngs-form-builder-section ngs-form-builder-native-ghost-section\">\n    <ngs-card-header>\n      <div class=\"ngs-form-builder-section-heading\">\n        <span class=\"ngs-form-builder-drag-icon\">\n          <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n        </span>\n        <span class=\"ngs-form-builder-section-title\">Section</span>\n      </div>\n    </ngs-card-header>\n  </ngs-card>\n</ng-template>\n\n<ng-template #fieldList let-fields let-containerId=\"containerId\" let-section=\"section\">\n  <div\n    cdkDropList\n    class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\"\n    [id]=\"containerId\"\n    [cdkDropListData]=\"fields\"\n    cdkDropListOrientation=\"mixed\"\n    [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n    [cdkDropListEnterPredicate]=\"fieldDropListEnterPredicate\"\n    (dragover)=\"nativeFieldDragOver($event, containerId)\"\n    (dragleave)=\"nativeDragLeave($event, containerId)\"\n    (drop)=\"nativeFieldDrop($event, containerId)\"\n    (cdkDropListDropped)=\"dropField($event)\">\n    @for (field of fields; track field.id; let fieldIndex = $index) {\n      @if (isNativeDropTarget(containerId, fieldIndex)) {\n        <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"fieldCard\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: field,\n          section\n        }\"/>\n    }\n\n    @if (isNativeDropTarget(containerId, fields.length)) {\n      <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n    }\n  </div>\n</ng-template>\n\n<ngs-panel class=\"ngs-form-builder-shell\" cdkDropListGroup>\n  <ngs-panel-header autoHeight class=\"flex items-center justify-between gap-4 border-b border-b-subtle px-5 py-3\">\n    <div class=\"min-w-0\">\n      <p class=\"text-sm text-secondary\">Form builder</p>\n      <h2 class=\"truncate text-lg font-semibold\">{{ schema().title || 'Untitled form' }}</h2>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <button ngsButton=\"outlined\" type=\"button\" (click)=\"openPreview(previewDialog)\">\n        <ngs-icon name=\"fluent:eye-24-regular\"/>\n        Preview\n      </button>\n\n    </div>\n  </ngs-panel-header>\n\n  <ngs-panel-sidebar class=\"ngs-form-builder-palette w-80 border-e border-e-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <h3 class=\"text-base font-semibold\">{{ paletteTitle() }}</h3>\n\n        <ngs-tab-group animationDuration=\"0ms\" ngs-stretch-tabs=\"false\">\n          <ngs-tab label=\"Placeholders\">\n            <div class=\"flex flex-col gap-4 pt-4\">\n              <ngs-form-field>\n                <ngs-label>Search placeholder</ngs-label>\n                <input ngsInput\n                       [ngModel]=\"search()\"\n                       [ngModelOptions]=\"{standalone: true}\"\n                       (ngModelChange)=\"search.set($event)\">\n              </ngs-form-field>\n\n              <div class=\"flex flex-col gap-5\">\n                <section class=\"flex flex-col gap-2\">\n                  <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">Layout</h4>\n                  <button\n                    type=\"button\"\n                    class=\"ngs-form-builder-palette-item\"\n                    draggable=\"true\"\n                    (dragstart)=\"sectionPaletteDragStarted($event)\"\n                    (dragend)=\"paletteDragEnded()\">\n                    <span class=\"ngs-form-builder-palette-item-content\">\n                      <span class=\"ngs-form-builder-palette-item-label\">\n                        <ngs-icon name=\"fluent:folder-add-24-regular\"/>\n                        <span>Section</span>\n                      </span>\n                    </span>\n                  </button>\n\n                  @for (definition of layoutDefinitions(); track definition.type) {\n                    <button\n                      type=\"button\"\n                      class=\"ngs-form-builder-palette-item\"\n                      draggable=\"true\"\n                      (dragstart)=\"paletteDragStarted($event, definition)\"\n                      (dragend)=\"paletteDragEnded()\"\n                      (click)=\"paletteClicked(definition)\">\n                      <span class=\"ngs-form-builder-palette-item-content\">\n                        <span class=\"ngs-form-builder-palette-item-label\">\n                          <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                          <span>{{ definition.label }}</span>\n                        </span>\n                      </span>\n                    </button>\n                  }\n                </section>\n\n                @for (group of paletteGroups(); track group.name) {\n                  <section class=\"flex flex-col gap-2\">\n                    <h4 class=\"text-xs font-semibold uppercase tracking-normal text-secondary\">{{ group.name }}</h4>\n                    <div class=\"flex flex-col gap-2\">\n                      @for (definition of group.fields; track definition.type) {\n                        <button\n                          type=\"button\"\n                          class=\"ngs-form-builder-palette-item\"\n                          draggable=\"true\"\n                          (dragstart)=\"paletteDragStarted($event, definition)\"\n                          (dragend)=\"paletteDragEnded()\"\n                          (click)=\"paletteClicked(definition)\">\n                          <span class=\"ngs-form-builder-palette-item-content\">\n                            <span class=\"ngs-form-builder-palette-item-label\">\n                              <ngs-icon [name]=\"definition.icon || 'fluent:form-24-regular'\"/>\n                              <span>{{ definition.label }}</span>\n                            </span>\n                          </span>\n                        </button>\n                      }\n                    </div>\n                  </section>\n                }\n              </div>\n            </div>\n          </ngs-tab>\n\n          <ngs-tab label=\"Actual fields\">\n            <div class=\"pt-4\">\n              <ngs-tree\n                #actualFieldsTree=\"ngsTree\"\n                [dataSource]=\"fieldTree()\"\n                [childrenAccessor]=\"fieldTreeChildrenAccessor\"\n                [trackBy]=\"trackFieldTreeNode\"\n                [draggablePredicate]=\"fieldTreeDraggablePredicate\"\n                [dropPredicate]=\"fieldTreeDropPredicate\"\n                [reorderOnDrop]=\"false\"\n                (nodeDrop)=\"fieldTreeNodeDropped($event)\"\n                draggable>\n                <ng-template ngsTreeDragPlaceholder let-source=\"source\">\n                  <div class=\"ngs-form-builder-tree-drag-placeholder\">\n                    <ngs-icon [name]=\"fieldTreePlaceholderIcon(source)\"/>\n                    <span>{{ source.label }}</span>\n                  </div>\n                </ng-template>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node\" ngsTreeNodePadding [value]=\"node.id\">\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n\n                <ngs-tree-node *ngsTreeNodeDef=\"let node; when: hasFieldTreeChildren\"\n                               ngsTreeNodePadding\n                               [value]=\"node.id\"\n                               [cdkTreeNodeTypeaheadLabel]=\"node.label\">\n                  <button\n                    ngsIconButton\n                    class=\"ngs-form-builder-tree-toggle\"\n                    [attr.aria-label]=\"'Toggle ' + node.label\"\n                    (click)=\"toggleFieldTreeNode(actualFieldsTree, node, $event)\">\n                    <ngs-icon [name]=\"isFieldTreeNodeExpanded(actualFieldsTree, node) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-right-24-regular'\" class=\"size-4\"/>\n                  </button>\n                  <button\n                    ngsButton=\"text\"\n                    type=\"button\"\n                    class=\"ngs-form-builder-tree-item\"\n                    [class.is-selected]=\"selectedFieldId() === node.id\"\n                    (click)=\"selectFieldTreeNode(node)\">\n                    <ngs-icon [name]=\"node.icon\"/>\n                    <span>{{ node.label }}</span>\n                    @if (node.name) {\n                      <small>{{ node.name }}</small>\n                    }\n                  </button>\n                </ngs-tree-node>\n              </ngs-tree>\n            </div>\n          </ngs-tab>\n        </ngs-tab-group>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-sidebar>\n\n  <ngs-panel-content>\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"ngs-form-builder-canvas flex flex-col gap-4 p-5\">\n        <div\n          cdkDropList\n          class=\"ngs-form-builder-canvas-list\"\n          [id]=\"rootDropListId()\"\n          [cdkDropListData]=\"canvasItems()\"\n          [cdkDropListConnectedTo]=\"fieldContainerDropListIds()\"\n          (dragover)=\"nativeCanvasDragOver($event)\"\n          (dragleave)=\"nativeDragLeave($event, rootDropListId())\"\n          (drop)=\"nativeFieldDrop($event, rootDropListId())\"\n          (cdkDropListDropped)=\"dropCanvasItem($event)\">\n          @for (item of canvasItems(); track item.kind + ':' + item.id; let itemIndex = $index) {\n            @if (isNativeDropTarget(rootDropListId(), itemIndex)) {\n              <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n            }\n            @if (item.field; as field) {\n              <ng-container\n                [ngTemplateOutlet]=\"fieldCard\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: field,\n                  dragData: item\n                }\"/>\n            } @else if (item.section; as section) {\n            <ngs-card class=\"ngs-form-builder-section\"\n                      cdkDrag\n                      cdkDragLockAxis=\"y\"\n                      [cdkDragData]=\"item\"\n                      (cdkDragStarted)=\"sectionDragStarted(section)\"\n                      (cdkDragEnded)=\"sectionDragEnded(section)\"\n                      (dragover)=\"nativeSectionDragOver($event, section)\"\n                      (dragleave)=\"nativeDragLeave($event, sectionDropListId(section))\"\n                      (drop)=\"nativeSectionDrop($event, section)\">\n              <ngs-card-header>\n                <div class=\"ngs-form-builder-section-heading\">\n                  <button ngsIconButton type=\"button\" class=\"ngs-form-builder-section-handle\" cdkDragHandle aria-label=\"Move section\">\n                    <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                  </button>\n                  <input ngsInput\n                         class=\"ngs-form-builder-section-title\"\n                         [ngModel]=\"section.title\"\n                         [ngModelOptions]=\"{standalone: true}\"\n                         (ngModelChange)=\"updateSection(section, { title: $event })\"\n                         aria-label=\"Section title\">\n                </div>\n                @if (section.description) {\n                  <p class=\"truncate text-sm text-secondary\">{{ section.description }}</p>\n                }\n\n                <ngs-card-aside>\n                  <div class=\"ngs-form-builder-section-actions\">\n                    <button ngsIconButton type=\"button\" aria-label=\"Collapse section\" (click)=\"updateSection(section, { collapsed: !section.collapsed })\">\n                      <ngs-icon [name]=\"isSectionCollapsed(section) ? 'fluent:chevron-down-24-regular' : 'fluent:chevron-up-24-regular'\"/>\n                    </button>\n                    <button ngsIconButton type=\"button\" aria-label=\"Delete section\" (click)=\"removeSection(section)\">\n                      <ngs-icon name=\"fluent:delete-24-regular\"/>\n                    </button>\n                  </div>\n                </ngs-card-aside>\n              </ngs-card-header>\n\n              @if (!isSectionCollapsed(section)) {\n                <ngs-card-content>\n                  <ng-container\n                    [ngTemplateOutlet]=\"fieldList\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: section.fields,\n                      containerId: sectionDropListId(section),\n                      section\n                    }\"/>\n                </ngs-card-content>\n              } @else if (isNativeDropTarget(sectionDropListId(section), section.fields.length)) {\n                <ngs-card-content>\n                  <div class=\"ngs-form-builder-drop-list ngs-form-builder-canvas-drop-list\">\n                    <ng-container [ngTemplateOutlet]=\"nativeFieldGhost\"/>\n                  </div>\n                </ngs-card-content>\n              }\n\n              <ng-template cdkDragPlaceholder>\n                <div class=\"ngs-form-builder-section-line-placeholder\"></div>\n              </ng-template>\n\n              <ng-template cdkDragPreview>\n                <ngs-card class=\"ngs-form-builder-section ngs-form-builder-section-drag-preview\">\n                  <ngs-card-header>\n                    <div class=\"ngs-form-builder-section-heading\">\n                      <span class=\"ngs-form-builder-section-handle\">\n                        <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n                      </span>\n                      <span class=\"ngs-form-builder-section-preview-title\">{{ section.title }}</span>\n                    </div>\n                    <ngs-card-aside>\n                      <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"size-5\"/>\n                    </ngs-card-aside>\n                  </ngs-card-header>\n                </ngs-card>\n              </ng-template>\n            </ngs-card>\n            }\n          }\n\n          @if (isNativeDropTarget(rootDropListId(), canvasItems().length)) {\n            <ng-container [ngTemplateOutlet]=\"nativeDragSection() ? nativeSectionGhost : nativeFieldGhost\"/>\n          }\n\n        </div>\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-content>\n\n  <ngs-panel-aside class=\"ngs-form-builder-inspector w-88 border-s border-s-subtle\">\n    <ngs-scrollbar-area [absolute]=\"true\">\n      <div class=\"flex flex-col gap-4 p-5\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"min-w-0\">\n            <h3 class=\"text-base font-semibold\">{{ inspectorTitle() }}</h3>\n            @if (selectedField()) {\n              <p class=\"truncate text-sm text-secondary\">{{ selectedField()?.label }}</p>\n            }\n          </div>\n          <button ngsIconButton type=\"button\" aria-label=\"Clear selection\" (click)=\"selectedFieldId.set(null)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n\n        @if (selectedField(); as field) {\n          <ngs-basic-form-builder-field-settings\n            [field]=\"field\"\n            [update]=\"updateSelectedField\"/>\n\n          <ngs-form-builder-settings-host\n            [field]=\"field\"\n            [schema]=\"schema()\"\n            [definitions]=\"definitions()\"\n            [settingsDefinitions]=\"settingsDefinitions()\"\n            [update]=\"updateSelectedField\"/>\n\n          <button ngsButton=\"text\" type=\"button\" class=\"ngs-form-builder-delete-button\" (click)=\"confirmRemoveField(field)\">\n            <ngs-icon name=\"fluent:delete-24-regular\"/>\n            Delete field\n          </button>\n        } @else {\n          <div class=\"ngs-form-builder-empty-inspector\">\n            Select a field on the canvas or in the fields tree to edit its settings.\n          </div>\n        }\n      </div>\n    </ngs-scrollbar-area>\n  </ngs-panel-aside>\n</ngs-panel>\n\n<ng-template #previewDialog>\n  <h3 ngs-dialog-title>{{ schema().title || 'Form preview' }}</h3>\n  <ngs-dialog-content class=\"ngs-form-builder-preview-dialog-content\">\n    <ngs-form-builder-renderer\n      [schema]=\"schema()\"\n      [showSubmit]=\"false\"/>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton=\"outlined\" type=\"button\" ngs-dialog-close>Close</button>\n  </ngs-dialog-actions>\n</ng-template>\n", styles: [":host{display:block;min-height:640px}:host .ngs-form-builder-shell{height:100%;min-height:640px;overflow:hidden}:host .ngs-form-builder-palette-item{display:flex;width:100%;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-lg);background:var(--ngs-color-surface);color:var(--ngs-color-primary);cursor:grab;font-size:var(--ngs-font-size-sm);font-weight:500;padding:0 calc(var(--spacing, .25rem) * 3);text-align:start;transition:background-color .16s cubic-bezier(0,0,.2,1),border-color .16s cubic-bezier(0,0,.2,1),box-shadow .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-palette-item:hover{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-palette-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host .ngs-form-builder-palette-item:active{cursor:grabbing}:host .ngs-form-builder-palette-item-preview{width:calc(var(--spacing, .25rem) * 64)}:host .ngs-form-builder-native-drag-image{position:fixed;inset-block-start:0;inset-inline-start:0;width:calc(var(--spacing, .25rem) * 64);pointer-events:none;transform:translate(-200vw,-200vh);z-index:-1}:host .ngs-form-builder-palette-item-placeholder{width:100%;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-palette{background:var(--ngs-color-surface-container-low)}:host .ngs-form-builder-palette-item-content{display:inline-flex;min-width:0;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-palette-item-label{display:inline-flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-palette-item-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ngs-tab-group{--ngs-tab-label-height: calc(var(--spacing, .25rem) * 10)}:host ngs-tree{--ngs-tree-node-gap: calc(var(--spacing, .25rem) * 1);--ngs-tree-node-drop-line-color: var(--ngs-color-primary);--ngs-tree-node-drop-target-outline: 0;--ngs-tree-node-drop-target-bg: var(--ngs-color-primary-container)}:host ngs-tree ngs-tree-node{cursor:grab}:host ngs-tree ngs-tree-node:active{cursor:grabbing}:host .ngs-form-builder-tree-toggle{--ngs-button-height: calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-tree-item{min-width:0;flex:1;justify-content:flex-start;overflow:hidden}:host .ngs-form-builder-tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-tree-item small{margin-inline-start:auto;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);font-weight:400}:host .ngs-form-builder-tree-item.is-selected{background:var(--ngs-color-primary-container);color:var(--ngs-color-on-primary-container)}:host .ngs-form-builder-tree-item.is-selected small{color:currentColor}:host .ngs-form-builder-tree-drag-placeholder{display:flex;min-width:0;width:100%;min-height:calc(var(--spacing, .25rem) * 10);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-md);background:var(--ngs-color-primary);color:var(--ngs-color-primary);font-size:var(--ngs-font-size-sm);font-weight:500;padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-tree-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-tree-drag-placeholder ngs-icon{flex:none}:host .ngs-form-builder-tree-drag-placeholder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drag-icon{display:inline-flex;flex:none;align-items:center;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-canvas{min-height:100%}:host .ngs-form-builder-section{--ngs-card-padding: calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-drag-preview{width:min(100%,900px);background:var(--ngs-color-surface)}:host .ngs-form-builder-native-ghost-section{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-native-ghost-section{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-list{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-section-heading{display:flex;min-width:0;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-section-handle{flex:none;color:var(--ngs-color-on-surface-variant);cursor:grab}:host .ngs-form-builder-section-handle:active{cursor:grabbing}:host .ngs-form-builder-section-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-section-title{width:100%;min-width:0;height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);outline:0}:host .ngs-form-builder-section-title:focus{outline:2px solid var(--ngs-color-primary);outline-offset:2px;border-radius:var(--ngs-radius-sm)}:host .ngs-form-builder-section-preview-title{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-base);font-weight:600;line-height:var(--ngs-line-height-base);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-drop-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 16)}:host .ngs-form-builder-field{position:relative;display:flex;flex-direction:column;grid-column:span 12;gap:calc(var(--spacing, .25rem) * 3);border:1px solid transparent;border-radius:var(--ngs-radius-lg);padding:calc(var(--spacing, .25rem) * 3);background:var(--ngs-color-surface);cursor:pointer}:host .ngs-form-builder-field.is-container{align-items:stretch;background:var(--ngs-color-surface-container-lowest)}:host .ngs-form-builder-field.is-width-1{grid-column:span 1}:host .ngs-form-builder-field.is-width-2{grid-column:span 2}:host .ngs-form-builder-field.is-width-3{grid-column:span 3}:host .ngs-form-builder-field.is-width-4{grid-column:span 4}:host .ngs-form-builder-field.is-width-5{grid-column:span 5}:host .ngs-form-builder-field.is-width-6{grid-column:span 6}:host .ngs-form-builder-field.is-width-7{grid-column:span 7}:host .ngs-form-builder-field.is-width-8{grid-column:span 8}:host .ngs-form-builder-field.is-width-9{grid-column:span 9}:host .ngs-form-builder-field.is-width-10{grid-column:span 10}:host .ngs-form-builder-field.is-width-11{grid-column:span 11}:host .ngs-form-builder-field.is-width-12{grid-column:span 12}:host .ngs-form-builder-field:hover{border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-field.is-selected{border-color:var(--ngs-color-primary);box-shadow:0 0 0 1px var(--ngs-color-primary)}:host .ngs-form-builder-field-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-field-label{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}:host .ngs-form-builder-field-label ngs-icon{flex:none;color:var(--ngs-color-primary)}:host .ngs-form-builder-field-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-field-handle{flex:none;color:var(--ngs-color-on-surface-variant)}:host .ngs-form-builder-field-host{min-width:0;width:100%;grid-column:auto}:host .ngs-form-builder-grid-field{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface);padding:calc(var(--spacing, .25rem) * 3)}:host .ngs-form-builder-grid-field-header p{overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-grid-field-header span{display:block;overflow:hidden;color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .ngs-form-builder-empty-inspector{display:flex;min-height:calc(var(--spacing, .25rem) * 14);align-items:center;justify-content:center;border:1px dashed var(--ngs-color-primary);border-radius:var(--ngs-radius-lg);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm);grid-column:1/-1;padding:calc(var(--spacing, .25rem) * 4);text-align:center}:host .ngs-form-builder-empty-inspector{min-height:calc(var(--spacing, .25rem) * 28);border-color:var(--ngs-color-outline-variant)}:host .ngs-form-builder-delete-button{justify-content:flex-start;color:var(--ngs-color-danger)}:host .ngs-form-builder-preview-dialog-content{width:min(100%,760px)}:host .cdk-drag-preview{box-sizing:border-box;border-radius:var(--ngs-radius-lg);box-shadow:var(--ngs-shadow-lg)}:host .ngs-form-builder-field-placeholder{border-color:var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-field-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 92%)}}:host .ngs-form-builder-field-line-placeholder{min-height:calc(var(--spacing, .25rem) * 6);justify-content:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-field-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .ngs-form-builder-field-drag-preview{width:min(360px,100vw - calc(var(--spacing, .25rem) * 8));min-height:calc(var(--spacing, .25rem) * 20);border-color:var(--ngs-color-primary);background:var(--ngs-color-surface);box-shadow:var(--ngs-shadow-lg);opacity:.94;pointer-events:none}:host .ngs-form-builder-ghost-control{height:calc(var(--spacing, .25rem) * 10);border:1px solid var(--ngs-color-outline-variant);border-radius:var(--ngs-radius-md);background:var(--ngs-color-surface)}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 18);border:1px dashed var(--ngs-color-primary);background:var(--ngs-color-primary);box-shadow:none;opacity:1;pointer-events:none}@supports (color: color-mix(in lab,red,red)){:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder{background:color-mix(in srgb,var(--ngs-color-primary),var(--ngs-color-surface) 94%)}}:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{min-height:calc(var(--spacing, .25rem) * 6);border:0;background:transparent}:host .ngs-form-builder-section-line-placeholder{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;padding:0;border:0;background:transparent;box-shadow:none;opacity:1;pointer-events:none}:host .ngs-form-builder-section-line-placeholder:before{content:\"\";display:block;width:100%;height:2px;border-radius:var(--ngs-radius-full);background:var(--ngs-color-primary)}:host .cdk-drag-placeholder{opacity:0}:host .ngs-form-builder-canvas-drop-list .cdk-drag-placeholder,:host .ngs-form-builder-canvas-drop-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-list .ngs-form-builder-field-line-placeholder.cdk-drag-placeholder,:host .ngs-form-builder-canvas-list .ngs-form-builder-section-line-placeholder.cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-palette .cdk-drag-placeholder{opacity:1}:host .ngs-form-builder-canvas-drop-list.cdk-drop-list-dragging .ngs-form-builder-field:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}:host .ngs-form-builder-canvas-list.cdk-drop-list-dragging .ngs-form-builder-section:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(0,0,.2,1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { actualFieldsTree: [{ type: i0.ViewChild, args: ['actualFieldsTree', { isSignal: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }, { type: i0.Output, args: ["schemaChange"] }], paletteTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "paletteTitle", required: false }] }], inspectorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorTitle", required: false }] }], fieldSelected: [{ type: i0.Output, args: ["fieldSelected"] }], fieldAdded: [{ type: i0.Output, args: ["fieldAdded"] }], fieldRemoved: [{ type: i0.Output, args: ["fieldRemoved"] }] } });
+function createDefaultFormBuilderSchema() {
+    const sectionId = uniqueId('section');
+    return {
+        title: 'New form',
+        fields: [],
+        layout: [{ kind: 'section', id: sectionId }],
+        sections: [
+            {
+                id: sectionId,
+                title: 'General information',
+                fields: []
+            }
+        ]
+    };
+}
+function uniqueId(prefix) {
+    return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function cloneSchema(schema) {
+    return {
+        ...schema,
+        fields: (schema.fields ?? []).map(cloneField),
+        layout: schema.layout?.map(item => ({ ...item })),
+        sections: schema.sections.map(section => ({
+            ...section,
+            fields: section.fields.map(cloneField)
+        }))
+    };
+}
+function cloneField(field) {
+    return {
+        ...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)
+    };
+}
+function isFormBuilderLayoutItem(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const item = value;
+    return (item.kind === 'field' || item.kind === 'section') && typeof item.id === 'string';
+}
+function isFormBuilderField(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const field = value;
+    return typeof field.id === 'string' && typeof field.type === 'string';
+}
+function clampIndex(index, length) {
+    return Math.max(0, Math.min(index, length));
+}
+function toFieldName(label) {
+    return label
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '') || 'field';
+}
+function uniqueFieldName(baseName, schema) {
+    const usedNames = new Set([
+        ...(schema.fields ?? []).flatMap(field => collectFieldNames(field)),
+        ...schema.sections.flatMap(section => section.fields.flatMap(field => collectFieldNames(field)))
+    ]);
+    if (!usedNames.has(baseName)) {
+        return baseName;
+    }
+    let index = 2;
+    let nextName = `${baseName}_${index}`;
+    while (usedNames.has(nextName)) {
+        index += 1;
+        nextName = `${baseName}_${index}`;
+    }
+    return nextName;
+}
+function collectFieldNames(field) {
+    return [field.name, ...(field.children ?? []).flatMap(collectFieldNames)];
+}
+function findFieldLocationInFields(fields, fieldId, section) {
+    const index = fields.findIndex(field => field.id === fieldId);
+    if (index !== -1) {
+        return {
+            field: fields[index],
+            section,
+            siblings: fields,
+            index
+        };
+    }
+    for (const field of fields) {
+        const location = findFieldLocationInFields(field.children ?? [], fieldId, section);
+        if (location) {
+            return location;
+        }
+    }
+    return null;
+}
+function containsField(field, fieldId) {
+    if (!fieldId) {
+        return false;
+    }
+    return (field.children ?? []).some(child => child.id === fieldId || containsField(child, fieldId));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BasicFormBuilderFieldSettings, DEFAULT_FORM_BUILDER_FIELDS, FORM_BUILDER_FIELDS, FORM_BUILDER_SETTINGS, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, FormBuilderRenderer as FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderSettings, provideFormBuilder, validatorsFromRules };
+//# sourceMappingURL=ngstarter-ui-components-form-builder.mjs.map