@ngstarter-ui/components 21.0.49 → 21.0.50

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, input, signal, computed, viewChild, ViewContainerRef, effect, ChangeDetectionStrategy, Component, model, output, ElementRef, numberAttribute, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, FormArray, FormGroup, FormsModule } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
+import { NgComponentOutlet, 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';
@@ -16,11 +16,12 @@ import { Toolbar, ToolbarItem, ToolbarSpacer, ToolbarTitle, ToolbarSubtitle } fr
 import { Tree, TreeDragPlaceholder, TreeNode, TreeNodeDef, TreeNodePadding } from '@ngstarter-ui/components/tree';
 import { DateRange, Datepicker, DatepickerInput, DatepickerToggle, DateRangeInput, DateRangePicker, StartDate, EndDate, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';
 import { FormField, Hint, IconButtonSuffix, Label, Error } from '@ngstarter-ui/components/form-field';
-import { Select } from '@ngstarter-ui/components/select';
+import { Select, SelectOptionContentDef, SelectValueDef } from '@ngstarter-ui/components/select';
 import { Option } from '@ngstarter-ui/components/option';
 import { Checkbox } from '@ngstarter-ui/components/checkbox';
 import { SlideToggle, SlideToggleGroup } from '@ngstarter-ui/components/slide-toggle';
 import { RadioButton, RadioGroup } from '@ngstarter-ui/components/radio';
+import { Segmented, SegmentedButton } from '@ngstarter-ui/components/segmented';
 import { CountrySelect } from '@ngstarter-ui/components/country-select';
 import { CurrencySelect } from '@ngstarter-ui/components/currency-select';
 import { TimezoneSelect } from '@ngstarter-ui/components/timezone-select';
@@ -32,6 +33,7 @@ const FORM_BUILDER_ITEMS = new InjectionToken('FORM_BUILDER_ITEMS');
 const FORM_BUILDER_FIELDS = new InjectionToken('FORM_BUILDER_FIELDS');
 const FORM_BUILDER_SETTINGS = new InjectionToken('FORM_BUILDER_SETTINGS');
 const FORM_BUILDER_UPLOAD_CALLBACK = new InjectionToken('FORM_BUILDER_UPLOAD_CALLBACK');
+const FORM_BUILDER_SELECT_DATA_SOURCES = new InjectionToken('FORM_BUILDER_SELECT_DATA_SOURCES');
 function formBuilderField(definition) {
     return definition;
 }
@@ -51,6 +53,16 @@ function provideFormBuilderField(definition) {
 function provideFormBuilderFields(definitions) {
     return definitions.map(definition => provideFormBuilderField(definition));
 }
+function provideFormBuilderSelectDataSource(definition) {
+    return {
+        provide: FORM_BUILDER_SELECT_DATA_SOURCES,
+        useValue: definition,
+        multi: true
+    };
+}
+function provideFormBuilderSelectDataSources(definitions) {
+    return definitions.map(definition => provideFormBuilderSelectDataSource(definition));
+}
 function provideFormBuilder(config = {}) {
     return makeEnvironmentProviders([
         ...(config.uploadCallback ? [{
@@ -71,6 +83,11 @@ function provideFormBuilder(config = {}) {
             provide: FORM_BUILDER_SETTINGS,
             useValue: settings,
             multi: true
+        })),
+        ...(config.selectDataSources ?? []).map(dataSource => ({
+            provide: FORM_BUILDER_SELECT_DATA_SOURCES,
+            useValue: dataSource,
+            multi: true
         }))
     ]);
 }
@@ -82,6 +99,10 @@ const ORIENTATION_OPTIONS = [
     { label: 'Vertical', value: 'vertical' },
     { label: 'Horizontal', value: 'horizontal' }
 ];
+const SELECT_OPTIONS_SOURCE_OPTIONS = [
+    { label: 'Custom options', value: 'static' },
+    { label: 'Data source', value: 'dataSource' }
+];
 const FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA = {
     sections: [
         {
@@ -198,6 +219,50 @@ const OPTIONS_SETTINGS_SCHEMA = {
         }
     ]
 };
+function selectSettingsSchema(field) {
+    const optionsSource = field.optionsSource ?? (field.dataSource ? 'dataSource' : 'static');
+    const sourceSection = {
+        id: 'select-options-source-settings',
+        title: 'Options',
+        fields: [
+            {
+                id: 'select-options-source',
+                name: 'optionsSource',
+                type: 'segmented',
+                label: 'Options source',
+                defaultValue: 'static',
+                options: SELECT_OPTIONS_SOURCE_OPTIONS,
+                settings: {
+                    valueAdapter: 'selectOptionsSource'
+                }
+            }
+        ]
+    };
+    const dataSourceSection = {
+        id: 'select-data-source-settings',
+        title: 'Data source',
+        fields: [
+            {
+                id: 'select-data-source',
+                name: 'dataSource',
+                type: 'select',
+                label: 'Data source',
+                hint: 'Choose a registered data source.',
+                settings: {
+                    valueAdapter: 'selectDataSource'
+                }
+            }
+        ]
+    };
+    return {
+        sections: [
+            sourceSection,
+            ...(optionsSource === 'dataSource'
+                ? [dataSourceSection]
+                : OPTIONS_SETTINGS_SCHEMA.sections)
+        ]
+    };
+}
 const HIDDEN_SETTINGS_SCHEMA = {
     sections: [
         {
@@ -386,6 +451,7 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
             label: 'Select',
             placeholder: 'Choose an option',
             clearable: true,
+            optionsSource: 'static',
             options: [
                 { label: 'Option 1', value: 'option_1' },
                 { label: 'Option 2', value: 'option_2' }
@@ -393,7 +459,7 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
         },
         settings: {
             extends: 'input-field',
-            schema: {
+            schema: context => ({
                 sections: [
                     {
                         id: 'select-behavior-settings',
@@ -412,9 +478,9 @@ const DEFAULT_FORM_BUILDER_FIELDS = [
                             { id: 'select-clearable', name: 'clearable', type: 'toggle', label: 'Clearable', defaultValue: true }
                         ]
                     },
-                    ...OPTIONS_SETTINGS_SCHEMA.sections
+                    ...selectSettingsSchema(context.item).sections
                 ]
-            }
+            })
         }
     },
     {
@@ -670,6 +736,7 @@ function validatorsFromRules(rules = [], field) {
 
 class FormBuilderFieldHost {
     providedUploadCallback = inject(FORM_BUILDER_UPLOAD_CALLBACK, { optional: true });
+    selectDataSources = inject(FORM_BUILDER_SELECT_DATA_SOURCES, { optional: true }) ?? [];
     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 */ []));
@@ -707,6 +774,28 @@ class FormBuilderFieldHost {
     }, ...(ngDevMode ? [{ debugName: "spacerHeight" }] : /* istanbul ignore next */ []));
     dateRangeStartValue = computed(() => this.formatDateRangePart(this.controlValue()?.start), ...(ngDevMode ? [{ debugName: "dateRangeStartValue" }] : /* istanbul ignore next */ []));
     dateRangeEndValue = computed(() => this.formatDateRangePart(this.controlValue()?.end), ...(ngDevMode ? [{ debugName: "dateRangeEndValue" }] : /* istanbul ignore next */ []));
+    selectUsesDataSource = computed(() => {
+        const field = this.field();
+        return field.optionsSource === 'dataSource' || (!field.optionsSource && !!field.dataSource);
+    }, ...(ngDevMode ? [{ debugName: "selectUsesDataSource" }] : /* istanbul ignore next */ []));
+    selectDataSourceDefinition = computed(() => {
+        if (!this.selectUsesDataSource()) {
+            return null;
+        }
+        const dataSourceId = this.field().dataSource;
+        if (!dataSourceId) {
+            return null;
+        }
+        return this.selectDataSources.find(dataSource => dataSource.id === dataSourceId) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectDataSourceDefinition" }] : /* istanbul ignore next */ []));
+    selectDataSource = computed(() => this.selectDataSourceDefinition()?.dataSource ?? null, ...(ngDevMode ? [{ debugName: "selectDataSource" }] : /* istanbul ignore next */ []));
+    selectOptionContentComponent = computed(() => this.selectDataSourceDefinition()?.optionContentComponent ?? null, ...(ngDevMode ? [{ debugName: "selectOptionContentComponent" }] : /* istanbul ignore next */ []));
+    selectValueComponent = computed(() => this.selectDataSourceDefinition()?.valueComponent ?? null, ...(ngDevMode ? [{ debugName: "selectValueComponent" }] : /* istanbul ignore next */ []));
+    selectPageSize = computed(() => this.field().dataSourceOptions?.pageSize ?? 20, ...(ngDevMode ? [{ debugName: "selectPageSize" }] : /* istanbul ignore next */ []));
+    selectSearchable = computed(() => this.field().dataSourceOptions?.searchable ?? true, ...(ngDevMode ? [{ debugName: "selectSearchable" }] : /* istanbul ignore next */ []));
+    selectSearchDebounce = computed(() => this.field().dataSourceOptions?.searchDebounce ?? 250, ...(ngDevMode ? [{ debugName: "selectSearchDebounce" }] : /* istanbul ignore next */ []));
+    selectMinSearchLength = computed(() => this.field().dataSourceOptions?.minSearchLength ?? 1, ...(ngDevMode ? [{ debugName: "selectMinSearchLength" }] : /* istanbul ignore next */ []));
+    selectLoadOnOpen = computed(() => this.field().dataSourceOptions?.loadOnOpen ?? true, ...(ngDevMode ? [{ debugName: "selectLoadOnOpen" }] : /* istanbul ignore next */ []));
     anchor = viewChild.required('anchor', { read: ViewContainerRef });
     constructor() {
         effect(onCleanup => {
@@ -765,6 +854,54 @@ class FormBuilderFieldHost {
         this.control().markAsTouched();
         this.control().updateValueAndValidity();
     }
+    selectOptionContentInputs(data, option, value, label, selected, disabled, multiple) {
+        const context = {
+            $implicit: data,
+            data,
+            option,
+            value,
+            label,
+            selected,
+            disabled,
+            multiple
+        };
+        return {
+            context,
+            field: this.field(),
+            control: this.control(),
+            data,
+            option,
+            value,
+            label,
+            selected,
+            disabled,
+            multiple
+        };
+    }
+    selectValueInputs(data, option, value, label, labels, count, multiple) {
+        const context = {
+            $implicit: data,
+            data,
+            option,
+            value,
+            label,
+            labels,
+            count,
+            multiple
+        };
+        return {
+            context,
+            field: this.field(),
+            control: this.control(),
+            data,
+            option,
+            value,
+            label,
+            labels,
+            count,
+            multiple
+        };
+    }
     onDateRangeChanged(rangeInput) {
         queueMicrotask(() => {
             const range = rangeInput.value;
@@ -786,7 +923,7 @@ class FormBuilderFieldHost {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderFieldHost, isStandalone: true, selector: "ngs-form-builder-field-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, editableCanvas: { classPropertyName: "editableCanvas", publicName: "editableCanvas", isSignal: true, isRequired: false, transformFunction: null }, uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-custom": "customLoaded()", "class.is-width-1": "!editableCanvas() && field().width === 1", "class.is-width-2": "!editableCanvas() && field().width === 2", "class.is-width-3": "!editableCanvas() && field().width === 3", "class.is-width-4": "!editableCanvas() && field().width === 4", "class.is-width-5": "!editableCanvas() && field().width === 5", "class.is-width-6": "!editableCanvas() && field().width === 6", "class.is-width-7": "!editableCanvas() && field().width === 7", "class.is-width-8": "!editableCanvas() && field().width === 8", "class.is-width-9": "!editableCanvas() && field().width === 9", "class.is-width-10": "!editableCanvas() && field().width === 10", "class.is-width-11": "!editableCanvas() && field().width === 11", "class.is-width-12": "!editableCanvas() && (field().width ?? 12) === 12", "class.is-hidden-field": "!editableCanvas() && field().type === \"hidden\"" }, classAttribute: "ngs-form-builder-field-host" }, providers: [
             provideNativeDateAdapter()
-        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderFieldHost"], ngImport: i0, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('hidden') {\n      <input type=\"hidden\" [formControl]=\"control()\">\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\"\n                    [placeholder]=\"field().placeholder || ''\"\n                    [multiple]=\"field().multiple ?? false\"\n                    [clearable]=\"field().clearable ?? false\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('radio') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-radio-group [formControl]=\"control()\"\n                         [name]=\"field().name\"\n                         [orientation]=\"radioOrientation()\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n          }\n        </ngs-radio-group>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\n    }\n\n    @case ('timezone-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-timezone-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-currency-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('country-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-country-select [formControl]=\"control()\"\n                            [placeholder]=\"field().placeholder || ''\"\n                            [clearable]=\"field().clearable ?? false\"\n                            [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-hidden-field{display:none}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-choice-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}:host .ngs-form-builder-choice-label{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-builder-choice-hint{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"], exportAs: ["ngsDatepickerInput"] }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: DateRangeInput, selector: "ngs-date-range-input", inputs: ["rangePicker", "separator"], exportAs: ["ngsDateRangeInput"] }, { kind: "component", type: DateRangePicker, selector: "ngs-date-range-picker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets", "calendarCount", "extended"], exportAs: ["ngsDateRangePicker"] }, { kind: "directive", type: StartDate, selector: "input[ngsStartDate]" }, { kind: "directive", type: EndDate, selector: "input[ngsEndDate]" }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: RadioButton, selector: "ngs-radio-button", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["checkedChange", "change"] }, { kind: "component", type: RadioGroup, selector: "ngs-radio-group", inputs: ["disabled", "name", "orientation", "value"], outputs: ["disabledChange", "valueChange", "change"], exportAs: ["ngsRadioGroup"] }, { kind: "component", type: CountrySelect, selector: "ngs-country-select", inputs: ["searchTerm", "value", "id", "placeholder", "required", "disabled", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "showCountryCode"], outputs: ["searchTermChange", "valueChange", "requiredChange", "disabledChange", "opened", "closed", "selectionChange"], exportAs: ["ngsCountrySelect"] }, { kind: "component", type: CurrencySelect, selector: "ngs-currency-select", inputs: ["searchTerm", "placeholder", "required", "disabled", "showCountryName"], outputs: ["searchTermChange", "requiredChange", "disabledChange", "opened", "closed"], exportAs: ["ngsCurrencySelect"] }, { kind: "component", type: TimezoneSelect, selector: "ngs-timezone-select", inputs: ["aria-describedby", "locale", "placeholder", "required", "disabled", "value", "searchTerm"], outputs: ["valueChange", "searchTermChange", "opened", "closed"], exportAs: ["ngsTimezoneSelect"] }, { kind: "component", type: Timepicker, selector: "ngs-timepicker", inputs: ["disabled", "interval"], outputs: ["opened", "closed"], exportAs: ["ngsTimepicker"] }, { kind: "directive", type: TimepickerInput, selector: "input[ngsTimepicker]", inputs: ["disabled", "max", "min", "openOnClick", "ngsTimepicker"] }, { kind: "component", type: TimepickerToggle, selector: "ngs-timepicker-toggle", inputs: ["for", "disabled"], exportAs: ["ngsTimepickerToggle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: UploadArea, selector: "ngs-upload-area", inputs: ["accept", "allowHover", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadArea"] }, { kind: "directive", type: UploadAreaIconDirective, selector: "[ngsUploadAreaIcon]" }, { kind: "directive", type: UploadAreaMainStateDirective, selector: "[ngsUploadAreaMainState]" }, { kind: "directive", type: UploadAreaDropStateDirective, selector: "[ngsUploadAreaDropState]" }, { kind: "directive", type: UploadAreaInvalidStateDirective, selector: "[ngsUploadAreaInvalidState]" }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderFieldHost"], ngImport: i0, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('hidden') {\n      <input type=\"hidden\" [formControl]=\"control()\">\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\"\n                    [placeholder]=\"field().placeholder || ''\"\n                    [multiple]=\"field().multiple ?? false\"\n                    [clearable]=\"field().clearable ?? false\"\n                    [dataSource]=\"selectDataSource()\"\n                    [pageSize]=\"selectPageSize()\"\n                    [searchable]=\"selectSearchable()\"\n                    [searchDebounce]=\"selectSearchDebounce()\"\n                    [minSearchLength]=\"selectMinSearchLength()\"\n                    [loadOnOpen]=\"selectLoadOnOpen()\">\n          @if (selectOptionContentComponent(); as optionComponent) {\n            <ng-template ngsOptionContentDef\n                         let-data\n                         let-option=\"option\"\n                         let-value=\"value\"\n                         let-label=\"label\"\n                         let-selected=\"selected\"\n                         let-disabled=\"disabled\"\n                         let-multiple=\"multiple\">\n              <ng-container\n                [ngComponentOutlet]=\"optionComponent\"\n                [ngComponentOutletInputs]=\"selectOptionContentInputs(data, option, value, label, selected, disabled, multiple)\"/>\n            </ng-template>\n          }\n\n          @if (selectValueComponent(); as valueComponent) {\n            <ng-template ngsSelectValueDef\n                         let-data\n                         let-option=\"option\"\n                         let-value=\"value\"\n                         let-label=\"label\"\n                         let-labels=\"labels\"\n                         let-count=\"count\"\n                         let-multiple=\"multiple\">\n              <ng-container\n                [ngComponentOutlet]=\"valueComponent\"\n                [ngComponentOutletInputs]=\"selectValueInputs(data, option, value, label, labels, count, multiple)\"/>\n            </ng-template>\n          }\n\n          @if (!selectUsesDataSource()) {\n            @for (option of field().options ?? []; track option.value) {\n              <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n            }\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('radio') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-radio-group [formControl]=\"control()\"\n                         [name]=\"field().name\"\n                         [orientation]=\"radioOrientation()\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n          }\n        </ngs-radio-group>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('segmented') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-segmented [formControl]=\"control()\"\n                       [disabled]=\"readonly() || !!field().readonly || !!field().disabled\">\n          @for (option of field().options ?? []; track option.value) {\n            <button ngs-segmented-button type=\"button\" [value]=\"option.value\">{{ option.label }}</button>\n          }\n        </ngs-segmented>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\n    }\n\n    @case ('timezone-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-timezone-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-currency-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('country-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-country-select [formControl]=\"control()\"\n                            [placeholder]=\"field().placeholder || ''\"\n                            [clearable]=\"field().clearable ?? false\"\n                            [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-hidden-field{display:none}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-choice-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}:host .ngs-form-builder-choice-label{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-builder-choice-hint{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"], exportAs: ["ngsDatepickerInput"] }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: DateRangeInput, selector: "ngs-date-range-input", inputs: ["rangePicker", "separator"], exportAs: ["ngsDateRangeInput"] }, { kind: "component", type: DateRangePicker, selector: "ngs-date-range-picker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets", "calendarCount", "extended"], exportAs: ["ngsDateRangePicker"] }, { kind: "directive", type: StartDate, selector: "input[ngsStartDate]" }, { kind: "directive", type: EndDate, selector: "input[ngsEndDate]" }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "dataSource", "pageSize", "searchable", "searchDebounce", "minSearchLength", "loadOnOpen", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "directive", type: SelectOptionContentDef, selector: "ng-template[ngsOptionContentDef]" }, { kind: "directive", type: SelectValueDef, selector: "ng-template[ngsSelectValueDef]" }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: RadioButton, selector: "ngs-radio-button", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["checkedChange", "change"] }, { kind: "component", type: RadioGroup, selector: "ngs-radio-group", inputs: ["disabled", "name", "orientation", "value"], outputs: ["disabledChange", "valueChange", "change"], exportAs: ["ngsRadioGroup"] }, { kind: "component", type: Segmented, selector: "ngs-segmented", inputs: ["value", "disabled", "size"], outputs: ["valueChange"], exportAs: ["ngsSegmented"] }, { kind: "component", type: SegmentedButton, selector: "ngs-segmented-button,[ngs-segmented-button]", inputs: ["value", "disabled", "iconOnly"], exportAs: ["ngsSegmentedButton"] }, { kind: "component", type: CountrySelect, selector: "ngs-country-select", inputs: ["searchTerm", "value", "id", "placeholder", "required", "disabled", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "showCountryCode"], outputs: ["searchTermChange", "valueChange", "requiredChange", "disabledChange", "opened", "closed", "selectionChange"], exportAs: ["ngsCountrySelect"] }, { kind: "component", type: CurrencySelect, selector: "ngs-currency-select", inputs: ["searchTerm", "placeholder", "required", "disabled", "showCountryName"], outputs: ["searchTermChange", "requiredChange", "disabledChange", "opened", "closed"], exportAs: ["ngsCurrencySelect"] }, { kind: "component", type: TimezoneSelect, selector: "ngs-timezone-select", inputs: ["aria-describedby", "locale", "placeholder", "required", "disabled", "value", "searchTerm"], outputs: ["valueChange", "searchTermChange", "opened", "closed"], exportAs: ["ngsTimezoneSelect"] }, { kind: "component", type: Timepicker, selector: "ngs-timepicker", inputs: ["disabled", "interval"], outputs: ["opened", "closed"], exportAs: ["ngsTimepicker"] }, { kind: "directive", type: TimepickerInput, selector: "input[ngsTimepicker]", inputs: ["disabled", "max", "min", "openOnClick", "ngsTimepicker"] }, { kind: "component", type: TimepickerToggle, selector: "ngs-timepicker-toggle", inputs: ["for", "disabled"], exportAs: ["ngsTimepickerToggle"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: UploadArea, selector: "ngs-upload-area", inputs: ["accept", "allowHover", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadArea"] }, { kind: "directive", type: UploadAreaIconDirective, selector: "[ngsUploadAreaIcon]" }, { kind: "directive", type: UploadAreaMainStateDirective, selector: "[ngsUploadAreaMainState]" }, { kind: "directive", type: UploadAreaDropStateDirective, selector: "[ngsUploadAreaDropState]" }, { kind: "directive", type: UploadAreaInvalidStateDirective, selector: "[ngsUploadAreaInvalidState]" }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderFieldHost, decorators: [{
             type: Component,
@@ -804,12 +941,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         IconButtonSuffix,
                         Label,
                         Input,
+                        NgComponentOutlet,
                         Select,
+                        SelectOptionContentDef,
+                        SelectValueDef,
                         Option,
                         Checkbox,
                         SlideToggle,
                         RadioButton,
                         RadioGroup,
+                        Segmented,
+                        SegmentedButton,
                         CountrySelect,
                         CurrencySelect,
                         TimezoneSelect,
@@ -841,7 +983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[class.is-width-11]': '!editableCanvas() && field().width === 11',
                         '[class.is-width-12]': '!editableCanvas() && (field().width ?? 12) === 12',
                         '[class.is-hidden-field]': '!editableCanvas() && field().type === "hidden"'
-                    }, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('hidden') {\n      <input type=\"hidden\" [formControl]=\"control()\">\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\"\n                    [placeholder]=\"field().placeholder || ''\"\n                    [multiple]=\"field().multiple ?? false\"\n                    [clearable]=\"field().clearable ?? false\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('radio') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-radio-group [formControl]=\"control()\"\n                         [name]=\"field().name\"\n                         [orientation]=\"radioOrientation()\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n          }\n        </ngs-radio-group>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\n    }\n\n    @case ('timezone-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-timezone-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-currency-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('country-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-country-select [formControl]=\"control()\"\n                            [placeholder]=\"field().placeholder || ''\"\n                            [clearable]=\"field().clearable ?? false\"\n                            [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-hidden-field{display:none}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-choice-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}:host .ngs-form-builder-choice-label{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-builder-choice-hint{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-container #anchor/>\n\n@if (!customLoaded()) {\n  @switch (field().type) {\n    @case ('textarea') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <textarea ngsInput\n                  rows=\"3\"\n                  [formControl]=\"control()\"\n                  [placeholder]=\"field().placeholder || ''\"\n                  [readonly]=\"readonly() || field().readonly\"></textarea>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('hidden') {\n      <input type=\"hidden\" [formControl]=\"control()\">\n    }\n\n    @case ('select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-select [formControl]=\"control()\"\n                    [placeholder]=\"field().placeholder || ''\"\n                    [multiple]=\"field().multiple ?? false\"\n                    [clearable]=\"field().clearable ?? false\"\n                    [dataSource]=\"selectDataSource()\"\n                    [pageSize]=\"selectPageSize()\"\n                    [searchable]=\"selectSearchable()\"\n                    [searchDebounce]=\"selectSearchDebounce()\"\n                    [minSearchLength]=\"selectMinSearchLength()\"\n                    [loadOnOpen]=\"selectLoadOnOpen()\">\n          @if (selectOptionContentComponent(); as optionComponent) {\n            <ng-template ngsOptionContentDef\n                         let-data\n                         let-option=\"option\"\n                         let-value=\"value\"\n                         let-label=\"label\"\n                         let-selected=\"selected\"\n                         let-disabled=\"disabled\"\n                         let-multiple=\"multiple\">\n              <ng-container\n                [ngComponentOutlet]=\"optionComponent\"\n                [ngComponentOutletInputs]=\"selectOptionContentInputs(data, option, value, label, selected, disabled, multiple)\"/>\n            </ng-template>\n          }\n\n          @if (selectValueComponent(); as valueComponent) {\n            <ng-template ngsSelectValueDef\n                         let-data\n                         let-option=\"option\"\n                         let-value=\"value\"\n                         let-label=\"label\"\n                         let-labels=\"labels\"\n                         let-count=\"count\"\n                         let-multiple=\"multiple\">\n              <ng-container\n                [ngComponentOutlet]=\"valueComponent\"\n                [ngComponentOutletInputs]=\"selectValueInputs(data, option, value, label, labels, count, multiple)\"/>\n            </ng-template>\n          }\n\n          @if (!selectUsesDataSource()) {\n            @for (option of field().options ?? []; track option.value) {\n              <ngs-option [value]=\"option.value\">{{ option.label }}</ngs-option>\n            }\n          }\n        </ngs-select>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('radio') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-radio-group [formControl]=\"control()\"\n                         [name]=\"field().name\"\n                         [orientation]=\"radioOrientation()\">\n          @for (option of field().options ?? []; track option.value) {\n            <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n          }\n        </ngs-radio-group>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('segmented') {\n      <div class=\"ngs-form-builder-choice-field\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-segmented [formControl]=\"control()\"\n                       [disabled]=\"readonly() || !!field().readonly || !!field().disabled\">\n          @for (option of field().options ?? []; track option.value) {\n            <button ngs-segmented-button type=\"button\" [value]=\"option.value\">{{ option.label }}</button>\n          }\n        </ngs-segmented>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('checkbox') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-checkbox [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-checkbox>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('toggle') {\n      <div class=\"ngs-form-builder-check-field\">\n        <ngs-slide-toggle [formControl]=\"control()\">\n          {{ field().label }}\n        </ngs-slide-toggle>\n        @if (field().hint) {\n          <span>{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('date') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsDatepicker]=\"picker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"picker\"/>\n        <ngs-datepicker #picker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('time') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [ngsTimepicker]=\"timePicker\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        <ngs-timepicker-toggle ngsIconButtonSuffix [for]=\"timePicker\"/>\n        <ngs-timepicker #timePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('date-range') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-date-range-input #rangeInput [rangePicker]=\"rangePicker\">\n          <input ngsStartDate\n                 [value]=\"dateRangeStartValue()\"\n                 [placeholder]=\"field().placeholder || 'Start date'\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n          <input ngsEndDate\n                 [value]=\"dateRangeEndValue()\"\n                 placeholder=\"End date\"\n                 [readonly]=\"readonly() || field().readonly\"\n                 [disabled]=\"dateRangeDisabled()\"\n                 (input)=\"onDateRangeChanged(rangeInput)\">\n        </ngs-date-range-input>\n        <ngs-datepicker-toggle ngsIconButtonSuffix [for]=\"rangePicker\"/>\n        <ngs-date-range-picker #rangePicker/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('upload') {\n      <div class=\"ngs-form-builder-upload-field\"\n           [class.is-disabled]=\"uploadDisabled()\">\n        <span class=\"ngs-form-builder-choice-label\">{{ field().label }}</span>\n        <ngs-upload-area ngsUploadTrigger\n                         [accept]=\"uploadAccept()\"\n                         [multiple]=\"field().multiple ?? false\"\n                         (fileSelected)=\"onUploadFilesSelected($event)\">\n          <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsUploadAreaIcon/>\n          <ng-container ngsUploadAreaMainState>\n            {{ uploadSelectedText() }}\n          </ng-container>\n          <ng-container ngsUploadAreaDropState>\n            Drop files here\n          </ng-container>\n          <ng-container ngsUploadAreaInvalidState>\n            Invalid file type\n          </ng-container>\n        </ngs-upload-area>\n        @if (field().hint) {\n          <span class=\"ngs-form-builder-choice-hint\">{{ field().hint }}</span>\n        }\n      </div>\n    }\n\n    @case ('spacer') {\n      <div class=\"ngs-form-builder-spacer\"\n           [class.is-height-8]=\"spacerHeight() === 8\"\n           [class.is-height-16]=\"spacerHeight() === 16\"\n           [class.is-height-24]=\"spacerHeight() === 24\"\n           [class.is-height-32]=\"spacerHeight() === 32\"\n           [class.is-height-48]=\"spacerHeight() === 48\"\n           [class.is-height-64]=\"spacerHeight() === 64\"\n           aria-hidden=\"true\"></div>\n    }\n\n    @case ('timezone-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-timezone-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               type=\"number\"\n               inputmode=\"decimal\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('currency-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-currency-select [formControl]=\"control()\"\n                             [placeholder]=\"field().placeholder || ''\"\n                             [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @case ('country-select') {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <ngs-country-select [formControl]=\"control()\"\n                            [placeholder]=\"field().placeholder || ''\"\n                            [clearable]=\"field().clearable ?? false\"\n                            [required]=\"field().required ?? false\"/>\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n\n    @default {\n      <ngs-form-field>\n        <ngs-label>{{ field().label }}</ngs-label>\n        <input ngsInput\n               [type]=\"textInputType()\"\n               [formControl]=\"control()\"\n               [placeholder]=\"field().placeholder || ''\"\n               [readonly]=\"readonly() || field().readonly\">\n        @if (field().hint) {\n          <ngs-hint>{{ field().hint }}</ngs-hint>\n        }\n      </ngs-form-field>\n    }\n  }\n}\n", styles: [":host{display:block;min-width:0}:host.is-hidden-field{display:none}:host.is-width-1{grid-column:span 1}:host.is-width-2{grid-column:span 2}:host.is-width-3{grid-column:span 3}:host.is-width-4{grid-column:span 4}:host.is-width-5{grid-column:span 5}:host.is-width-6{grid-column:span 6}:host.is-width-7{grid-column:span 7}:host.is-width-8{grid-column:span 8}:host.is-width-9{grid-column:span 9}:host.is-width-10{grid-column:span 10}:host.is-width-11{grid-column:span 11}:host.is-width-12{grid-column:span 12}:host .ngs-form-builder-check-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:host .ngs-form-builder-check-field span{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-choice-field{display:flex;min-height:calc(var(--spacing, .25rem) * 11);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-upload-field.is-disabled{pointer-events:none;opacity:.7}:host .ngs-form-builder-upload-field ngs-upload-area{--ngs-upload-area-padding: calc(var(--spacing, .25rem) * 6);--ngs-upload-area-border-radius: var(--ngs-field-radius)}:host .ngs-form-builder-choice-label{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:500}:host .ngs-form-builder-choice-hint{color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-xs)}:host .ngs-form-builder-spacer{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-8{min-height:calc(var(--spacing, .25rem) * 2)}:host .ngs-form-builder-spacer.is-height-16{min-height:calc(var(--spacing, .25rem) * 4)}:host .ngs-form-builder-spacer.is-height-24{min-height:calc(var(--spacing, .25rem) * 6)}:host .ngs-form-builder-spacer.is-height-32{min-height:calc(var(--spacing, .25rem) * 8)}:host .ngs-form-builder-spacer.is-height-48{min-height:calc(var(--spacing, .25rem) * 12)}:host .ngs-form-builder-spacer.is-height-64{min-height:calc(var(--spacing, .25rem) * 16)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], editableCanvas: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableCanvas", required: false }] }], uploadCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCallback", required: false }] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class FormRenderer {
@@ -1122,6 +1264,7 @@ function normalizedLayout(schema) {
 }
 
 class FormBuilderSettingsHost {
+    selectDataSources = inject(FORM_BUILDER_SELECT_DATA_SOURCES, { optional: true }) ?? [];
     field = input(null, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     section = input(null, ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
     schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
@@ -1145,7 +1288,7 @@ class FormBuilderSettingsHost {
             this.baseSettingsSchema(inheritance),
             this.resolveOwnSettingsSchema(config, definition)
         ].filter((schema) => !!schema);
-        return mergeSettingsSchemas(schemas);
+        return this.withRegisteredSelectDataSources(mergeSettingsSchemas(schemas));
     }, ...(ngDevMode ? [{ debugName: "settingsSchema" }] : /* istanbul ignore next */ []));
     settingsValue = computed(() => {
         const item = this.section() ?? this.field();
@@ -1219,6 +1362,17 @@ class FormBuilderSettingsHost {
     createSettingsPatch(item, schema, value) {
         const patch = {};
         for (const settingField of flattenSettingsFields(schema)) {
+            if (settingField.settings?.['valueAdapter'] === 'selectOptionsSource' && isFormBuilderField(item)) {
+                const nextSource = value[settingField.name] === 'dataSource' ? 'dataSource' : 'static';
+                if (nextSource === this.readSettingValue(item, settingField)) {
+                    continue;
+                }
+                patch['optionsSource'] = nextSource;
+                patch['defaultValue'] = nextSource === 'dataSource'
+                    ? item.multiple ? [] : null
+                    : resolveSelectedDefaultValue(item.options ?? [], item);
+                continue;
+            }
             if (settingField.settings?.['valueAdapter'] === 'optionsText' && isFormBuilderField(item)) {
                 if (value[settingField.name] === this.readSettingValue(item, settingField)) {
                     continue;
@@ -1258,6 +1412,9 @@ class FormBuilderSettingsHost {
         return patch;
     }
     readSettingValue(item, settingField) {
+        if (settingField.settings?.['valueAdapter'] === 'selectOptionsSource' && isFormBuilderField(item)) {
+            return item.optionsSource ?? (item.dataSource ? 'dataSource' : 'static');
+        }
         if (settingField.settings?.['valueAdapter'] === 'optionsText' && isFormBuilderField(item)) {
             return optionsToText(item.options ?? [], item.defaultValue);
         }
@@ -1336,6 +1493,34 @@ class FormBuilderSettingsHost {
                 return null;
         }
     }
+    withRegisteredSelectDataSources(schema) {
+        if (!schema) {
+            return null;
+        }
+        const dataSourceOptions = this.selectDataSources.map(dataSource => ({
+            label: dataSource.name,
+            value: dataSource.id
+        }));
+        return {
+            ...schema,
+            fields: schema.fields?.map(field => this.withSelectDataSourceOptions(field, dataSourceOptions)),
+            sections: schema.sections.map(section => ({
+                ...section,
+                fields: section.fields.map(field => this.withSelectDataSourceOptions(field, dataSourceOptions))
+            }))
+        };
+    }
+    withSelectDataSourceOptions(field, options) {
+        const children = field.children?.map(child => this.withSelectDataSourceOptions(child, options));
+        if (field.settings?.['valueAdapter'] !== 'selectDataSource') {
+            return children ? { ...field, children } : field;
+        }
+        return {
+            ...field,
+            children,
+            options
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormBuilderSettingsHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormBuilderSettingsHost, isStandalone: true, selector: "ngs-form-builder-settings-host", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, settingsDefinitions: { classPropertyName: "settingsDefinitions", publicName: "settingsDefinitions", isSignal: true, isRequired: false, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: false, transformFunction: null }, updateSection: { classPropertyName: "updateSection", publicName: "updateSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-empty": "!settingsSchema() && !legacyLoaded()" }, classAttribute: "ngs-form-builder-settings-host" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], exportAs: ["ngsFormBuilderSettingsHost"], ngImport: i0, template: "@if (settingsSchema(); as schema) {\n  <ngs-form-renderer\n    [schema]=\"schema\"\n    [value]=\"settingsValue()\"\n    [showSubmit]=\"false\"\n    (valueChange)=\"applySettingsValue($event)\"/>\n}\n\n<ng-container #anchor/>\n", dependencies: [{ kind: "component", type: FormRenderer, selector: "ngs-form-renderer", inputs: ["schema", "readonly", "showSubmit", "submitLabel", "uploadCallback", "value"], outputs: ["valueChange", "formSubmit", "formReady"], exportAs: ["ngsFormRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2960,7 +3145,7 @@ class BasicFormBuilderFieldSettings {
             : defaultValue === option.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderFieldSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderFieldSettings, isStandalone: true, selector: "ngs-basic-form-builder-field-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-field-settings" }, exportAs: ["ngsBasicFormBuilderFieldSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  @if (!isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Field ID</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().name\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ name: $event })\">\n    </ngs-form-field>\n  }\n\n  @if (hasPlaceholder()) {\n    <ngs-form-field>\n      <ngs-label>Placeholder</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().placeholder || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ placeholder: $event })\">\n    </ngs-form-field>\n  }\n\n  @if (!isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Hint</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().hint || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ hint: $event })\">\n    </ngs-form-field>\n  }\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  @if (hasBehaviorToggles()) {\n    <ngs-slide-toggle-group class=\"mb-4\">\n      <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ required: $event })\">\n        Required field\n      </ngs-slide-toggle>\n\n      <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ readonly: $event })\">\n        Readonly\n      </ngs-slide-toggle>\n\n      <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ disabled: $event })\">\n        Disabled\n      </ngs-slide-toggle>\n\n      @if (hasCheckedState()) {\n        <ngs-slide-toggle [ngModel]=\"field().defaultValue === true\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patch({ defaultValue: $event })\">\n          Checked\n        </ngs-slide-toggle>\n      }\n\n      @if (hasMultiple()) {\n        <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patchMultiple($event)\">\n          Multiple\n        </ngs-slide-toggle>\n      }\n\n      @if (hasClearable()) {\n        <ngs-slide-toggle [ngModel]=\"field().clearable ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patch({ clearable: $event })\">\n          Clearable\n        </ngs-slide-toggle>\n      }\n    </ngs-slide-toggle-group>\n  }\n\n  @if (isUpload()) {\n    <ngs-form-field>\n      <ngs-label>Accepted file types</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().settings?.['accept'] || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patchSettings({ accept: $event })\">\n      <ngs-hint>Use MIME types separated by commas, for example image/*,application/pdf.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  @if (isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Height</ngs-label>\n      <ngs-select [ngModel]=\"field().settings?.['height'] ?? 24\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchSettings({ height: $event })\">\n        @for (height of spacerHeightOptions; track height) {\n          <ngs-option [value]=\"height\">{{ height }}px</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\n\n  @if (isRadio()) {\n    <ngs-form-field>\n      <ngs-label>Orientation</ngs-label>\n      <ngs-select [ngModel]=\"radioOrientation()\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchRadioOrientation($event)\">\n        @for (orientation of radioOrientationOptions; track orientation) {\n          <ngs-option [value]=\"orientation\">{{ orientation }}</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [formControl]=\"optionsControl\"></textarea>\n      @if (optionsControl.hasError('formBuilderOptionsFormat')) {\n        <ngs-error>Use Label:value or Label:value:selected.</ngs-error>\n      }\n      <ngs-hint>One option per line. Use Label:value or Label:value:selected.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: SlideToggleGroup, selector: "ngs-slide-toggle-group", exportAs: ["ngsSlideToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderFieldSettings, isStandalone: true, selector: "ngs-basic-form-builder-field-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-field-settings" }, exportAs: ["ngsBasicFormBuilderFieldSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  @if (!isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Field ID</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().name\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ name: $event })\">\n    </ngs-form-field>\n  }\n\n  @if (hasPlaceholder()) {\n    <ngs-form-field>\n      <ngs-label>Placeholder</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().placeholder || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ placeholder: $event })\">\n    </ngs-form-field>\n  }\n\n  @if (!isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Hint</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().hint || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ hint: $event })\">\n    </ngs-form-field>\n  }\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n\n  @if (hasBehaviorToggles()) {\n    <ngs-slide-toggle-group class=\"mb-4\">\n      <ngs-slide-toggle [ngModel]=\"field().required ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ required: $event })\">\n        Required field\n      </ngs-slide-toggle>\n\n      <ngs-slide-toggle [ngModel]=\"field().readonly ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ readonly: $event })\">\n        Readonly\n      </ngs-slide-toggle>\n\n      <ngs-slide-toggle [ngModel]=\"field().disabled ?? false\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        (ngModelChange)=\"patch({ disabled: $event })\">\n        Disabled\n      </ngs-slide-toggle>\n\n      @if (hasCheckedState()) {\n        <ngs-slide-toggle [ngModel]=\"field().defaultValue === true\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patch({ defaultValue: $event })\">\n          Checked\n        </ngs-slide-toggle>\n      }\n\n      @if (hasMultiple()) {\n        <ngs-slide-toggle [ngModel]=\"field().multiple ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patchMultiple($event)\">\n          Multiple\n        </ngs-slide-toggle>\n      }\n\n      @if (hasClearable()) {\n        <ngs-slide-toggle [ngModel]=\"field().clearable ?? false\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          (ngModelChange)=\"patch({ clearable: $event })\">\n          Clearable\n        </ngs-slide-toggle>\n      }\n    </ngs-slide-toggle-group>\n  }\n\n  @if (isUpload()) {\n    <ngs-form-field>\n      <ngs-label>Accepted file types</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().settings?.['accept'] || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patchSettings({ accept: $event })\">\n      <ngs-hint>Use MIME types separated by commas, for example image/*,application/pdf.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  @if (isSpacer()) {\n    <ngs-form-field>\n      <ngs-label>Height</ngs-label>\n      <ngs-select [ngModel]=\"field().settings?.['height'] ?? 24\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchSettings({ height: $event })\">\n        @for (height of spacerHeightOptions; track height) {\n          <ngs-option [value]=\"height\">{{ height }}px</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\n\n  @if (isRadio()) {\n    <ngs-form-field>\n      <ngs-label>Orientation</ngs-label>\n      <ngs-select [ngModel]=\"radioOrientation()\"\n                  [ngModelOptions]=\"{standalone: true}\"\n                  (ngModelChange)=\"patchRadioOrientation($event)\">\n        @for (orientation of radioOrientationOptions; track orientation) {\n          <ngs-option [value]=\"orientation\">{{ orientation }}</ngs-option>\n        }\n      </ngs-select>\n    </ngs-form-field>\n  }\n\n  @if (hasOptions()) {\n    <ngs-form-field>\n      <ngs-label>Options</ngs-label>\n      <textarea ngsInput\n                rows=\"4\"\n                [formControl]=\"optionsControl\"></textarea>\n      @if (optionsControl.hasError('formBuilderOptionsFormat')) {\n        <ngs-error>Use Label:value or Label:value:selected.</ngs-error>\n      }\n      <ngs-hint>One option per line. Use Label:value or Label:value:selected.</ngs-hint>\n    </ngs-form-field>\n  }\n</div>\n", styles: [":host{display:block}:host .settings-section{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-outline-variant);padding-top:calc(var(--spacing, .25rem) * 4)}:host .settings-section h4{color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-sm);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "dataSource", "pageSize", "searchable", "searchDebounce", "minSearchLength", "loadOnOpen", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: SlideToggleGroup, selector: "ngs-slide-toggle-group", exportAs: ["ngsSlideToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderFieldSettings, decorators: [{
             type: Component,
@@ -3016,7 +3201,7 @@ class BasicFormBuilderLayoutSettings {
         this.update()(changes);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderLayoutSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderLayoutSettings, isStandalone: true, selector: "ngs-basic-form-builder-layout-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-layout-settings" }, exportAs: ["ngsBasicFormBuilderLayoutSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  @if (showHintSetting()) {\n    <ngs-form-field>\n      <ngs-label>Hint</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().hint || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ hint: $event })\">\n      <ngs-hint>Shown below the layout title in preview and renderer.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n</div>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BasicFormBuilderLayoutSettings, isStandalone: true, selector: "ngs-basic-form-builder-layout-settings", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-basic-form-builder-layout-settings" }, exportAs: ["ngsBasicFormBuilderLayoutSettings"], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <ngs-form-field>\n    <ngs-label>Label</ngs-label>\n    <input ngsInput\n           [ngModel]=\"field().label\"\n           [ngModelOptions]=\"{standalone: true}\"\n           (ngModelChange)=\"patch({ label: $event })\">\n  </ngs-form-field>\n\n  @if (showHintSetting()) {\n    <ngs-form-field>\n      <ngs-label>Hint</ngs-label>\n      <input ngsInput\n             [ngModel]=\"field().hint || ''\"\n             [ngModelOptions]=\"{standalone: true}\"\n             (ngModelChange)=\"patch({ hint: $event })\">\n      <ngs-hint>Shown below the layout title in preview and renderer.</ngs-hint>\n    </ngs-form-field>\n  }\n\n  <ngs-form-field>\n    <ngs-label>Width</ngs-label>\n    <ngs-select [ngModel]=\"field().width ?? 12\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"patch({ width: $event })\">\n      @for (width of fieldWidthOptions; track width) {\n        <ngs-option [value]=\"width\">{{ width }}/12</ngs-option>\n      }\n    </ngs-select>\n  </ngs-form-field>\n</div>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "dataSource", "pageSize", "searchable", "searchDebounce", "minSearchLength", "loadOnOpen", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BasicFormBuilderLayoutSettings, decorators: [{
             type: Component,
@@ -3060,5 +3245,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA, FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA, FORM_BUILDER_ITEMS, FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA, FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA, FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA, FORM_BUILDER_SETTINGS, FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA, FORM_BUILDER_UPLOAD_CALLBACK, FormBuilder, FormBuilderFieldHost, FormBuilderSettingsHost, FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, provideFormBuilderField, provideFormBuilderFields, validatorsFromRules };
+export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA, FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA, FORM_BUILDER_ITEMS, FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA, FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA, FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA, FORM_BUILDER_SELECT_DATA_SOURCES, FORM_BUILDER_SETTINGS, FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA, FORM_BUILDER_UPLOAD_CALLBACK, FormBuilder, FormBuilderFieldHost, FormBuilderSettingsHost, FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, provideFormBuilderField, provideFormBuilderFields, provideFormBuilderSelectDataSource, provideFormBuilderSelectDataSources, validatorsFromRules };
 //# sourceMappingURL=ngstarter-ui-components-form-builder.mjs.map