@kms-ngx-ui/presentational 20.1.13 → 20.1.14

package/fesm2022/kms-ngx-ui-presentational.mjs

@@ -3159,6 +3159,7 @@ class TextInputComponent {
         this.autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
         this.prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
         this.suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+        this.numericOnly = input(false, ...(ngDevMode ? [{ debugName: "numericOnly" }] : []));
         this.prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
         this.suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
         this.IconSizePx = IconSizePx;
@@ -3184,7 +3185,12 @@ class TextInputComponent {
         this.onTouched = () => { };
     }
     valueChanged(event) {
-        const { value } = event.target;
+        const input = event.target;
+        let { value } = input;
+        if (this.numericOnly()) {
+            value = value.replaceAll(/\D/g, '');
+            input.value = value;
+        }
         this.value.set(value);
         this.innerControl.setValue(value, { emitEvent: false });
         this.onChange(value);
@@ -3205,13 +3211,13 @@ class TextInputComponent {
         this.disabledByForm.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TextInputComponent, isStandalone: false, selector: "kms-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TextInputComponent, isStandalone: false, selector: "kms-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, numericOnly: { classPropertyName: "numericOnly", publicName: "numericOnly", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field class=\"kms-text-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (prefixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__prefix\"\n    matIconPrefix\n    [icon]=\"prefixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (prefix()) {\n  <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n  }\n  <input\n    [id]=\"inputId\"\n    [type]=\"type()\"\n    matInput\n    [formControl]=\"innerControl\"\n    (input)=\"valueChanged($event)\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (blur)=\"onTouched()\"\n  />\n  @if (suffixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__suffix\"\n    matIconSuffix\n    [icon]=\"suffixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (suffix()) {\n  <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n  } @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<mat-form-field class=\"kms-text-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (prefixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__prefix\"\n    matIconPrefix\n    [icon]=\"prefixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (prefix()) {\n  <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n  }\n  <input\n    [id]=\"inputId\"\n    [type]=\"type()\"\n    matInput\n    [formControl]=\"innerControl\"\n    (input)=\"valueChanged($event)\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [attr.inputmode]=\"numericOnly() ? 'numeric' : null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (blur)=\"onTouched()\"\n  />\n  @if (suffixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__suffix\"\n    matIconSuffix\n    [icon]=\"suffixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (suffix()) {\n  <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n  } @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -3221,8 +3227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => TextInputComponent),
                             multi: true,
                         },
-                    ], template: "<mat-form-field class=\"kms-text-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (prefixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__prefix\"\n    matIconPrefix\n    [icon]=\"prefixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (prefix()) {\n  <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n  }\n  <input\n    [id]=\"inputId\"\n    [type]=\"type()\"\n    matInput\n    [formControl]=\"innerControl\"\n    (input)=\"valueChanged($event)\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (blur)=\"onTouched()\"\n  />\n  @if (suffixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__suffix\"\n    matIconSuffix\n    [icon]=\"suffixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (suffix()) {\n  <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n  } @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n" }]
-        }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
+                    ], template: "<mat-form-field class=\"kms-text-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (prefixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__prefix\"\n    matIconPrefix\n    [icon]=\"prefixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (prefix()) {\n  <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n  }\n  <input\n    [id]=\"inputId\"\n    [type]=\"type()\"\n    matInput\n    [formControl]=\"innerControl\"\n    (input)=\"valueChanged($event)\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [attr.inputmode]=\"numericOnly() ? 'numeric' : null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (blur)=\"onTouched()\"\n  />\n  @if (suffixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__suffix\"\n    matIconSuffix\n    [icon]=\"suffixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (suffix()) {\n  <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n  } @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n" }]
+        }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], numericOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "numericOnly", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
 
 class TimeInputComponent {
     constructor() {
@@ -3439,6 +3445,7 @@ var FieldType;
     FieldType["SLIDE_TOGGLE"] = "slideToggle";
     FieldType["MULTI_SELECT"] = "multiSelect";
     FieldType["COLOR"] = "color";
+    FieldType["COUNTER"] = "counter";
     FieldType["MONTH_PICKER"] = "monthPicker";
     FieldType["TEMPLATE"] = "template";
     FieldType["OFFSET"] = "offset";
@@ -3695,7 +3702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 const DEFAULT_REGISTRY = new Map([
     [FieldType.PASSWORD, PasswordComponent],
-    [FieldType.NUMBER, NumericInputComponent],
+    [FieldType.COUNTER, NumericInputComponent],
     [FieldType.TIME, TimeInputComponent],
     [FieldType.SELECT, DropdownFromDataComponent],
     [FieldType.MULTI_SELECT, DropdownFromDataComponent],
@@ -3816,8 +3823,8 @@ class DynamicFieldDirective {
             case FieldType.MULTI_SELECT:
                 this.mapSelect(config, ref);
                 break;
-            case FieldType.NUMBER:
-                this.mapNumber(config, ref);
+            case FieldType.COUNTER:
+                this.mapCounter(config, ref);
                 break;
             case FieldType.PASSWORD:
                 this.mapPassword(config, ref);
@@ -3918,7 +3925,7 @@ class DynamicFieldDirective {
         if (opts?.withStrength)
             ref.setInput('withStrength', true);
     }
-    mapNumber(config, ref) {
+    mapCounter(config, ref) {
         this.trySetInput(ref, 'label', config.label ?? '');
         const opts = config.options;
         if (opts?.min !== undefined)
@@ -3951,6 +3958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 const NATIVE_TYPES = new Set([
     FieldType.TEXT,
+    FieldType.NUMBER,
     FieldType.TEXTAREA,
     FieldType.DATE,
     FieldType.DATE_RANGE,
@@ -4016,6 +4024,7 @@ class FormFieldComponent {
         this.isNativeType = computed(() => NATIVE_TYPES.has(this.fieldConfig().type), ...(ngDevMode ? [{ debugName: "isNativeType" }] : []));
         this.isGroupType = computed(() => GROUP_TYPES.has(this.fieldConfig().type), ...(ngDevMode ? [{ debugName: "isGroupType" }] : []));
         this.isTextInputType = computed(() => this.fieldConfig().type === FieldType.TEXT, ...(ngDevMode ? [{ debugName: "isTextInputType" }] : []));
+        this.isNumberInputType = computed(() => this.fieldConfig().type === FieldType.NUMBER, ...(ngDevMode ? [{ debugName: "isNumberInputType" }] : []));
         this.isDateType = computed(() => {
             const type = this.fieldConfig().type;
             return type === FieldType.DATE || type === FieldType.DATE_RANGE || type === FieldType.MONTH_PICKER;
@@ -4221,11 +4230,11 @@ class FormFieldComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldComponent, isStandalone: false, selector: "kms-form-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, formErrorDisplay: { classPropertyName: "formErrorDisplay", publicName: "formErrorDisplay", isSignal: true, isRequired: false, transformFunction: null }, formDisabledConfig: { classPropertyName: "formDisabledConfig", publicName: "formDisabledConfig", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kms-form-field\"\n     [attr.data-field-key]=\"fieldConfig().key\"\n     [attr.data-test-id]=\"fieldConfig().testId\"\n     [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n     [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n  @if (fieldConfig().type === FieldType.OFFSET) {\n    <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n  } @else if (isNativeType()) {\n    <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        @if (isTextInputType()) {\n          <!-- TEXT \u2014 delegates to kms-text-input CVA -->\n          <kms-text-input\n            [formControl]=\"control()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n            [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n            [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n            [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n            [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-text-input>\n        } @else if (isDateType()) {\n          <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n          <kms-date-input\n            [formControl]=\"control()\"\n            [mode]=\"dateMode()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [minDate]=\"dateMin()\"\n            [maxDate]=\"dateMax()\"\n            [monthPicker]=\"isMonthPicker()\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-date-input>\n        } @else {\n          <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n          <mat-form-field class=\"kms-form-field__mat-field\">\n            @if (fieldConfig().label) {\n              <mat-label>{{ fieldConfig().label }}</mat-label>\n            }\n\n            @switch (fieldConfig().type) {\n              @case (FieldType.TEXTAREA) {\n                <textarea matInput\n                          [formControl]=\"control()\"\n                          [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                          [rows]=\"textareaRows()\"\n                          [attr.autocomplete]=\"resolvedAutocomplete()\"\n                          [attr.aria-required]=\"isRequired() ? true : null\"\n                          [attr.aria-describedby]=\"ariaDescribedBy()\"\n                          [errorStateMatcher]=\"errorMatcher()\">\n                </textarea>\n              }\n              @case (FieldType.AUTOCOMPLETE) {\n                <input matInput\n                       [formControl]=\"control()\"\n                       [matAutocomplete]=\"autoPanel\"\n                       [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                       [attr.autocomplete]=\"resolvedAutocomplete()\"\n                       [attr.aria-required]=\"isRequired() ? true : null\"\n                       [attr.aria-describedby]=\"ariaDescribedBy()\"\n                       [errorStateMatcher]=\"errorMatcher()\">\n                <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n                  @for (opt of filteredAutoOptions(); track opt.Value) {\n                    <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n                  }\n                </mat-autocomplete>\n              }\n            }\n\n            <!-- Prefix -->\n            @if (fieldConfig().prefix) {\n              @if (fieldConfig().prefix!.type === 'text') {\n                <span matTextPrefix>{{ fieldConfig().prefix!.value }}&nbsp;</span>\n              } @else {\n                <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Suffix -->\n            @if (fieldConfig().suffix) {\n              @if (fieldConfig().suffix!.type === 'text') {\n                <span matTextSuffix>&nbsp;{{ fieldConfig().suffix!.value }}</span>\n              } @else {\n                <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Errors -->\n            @for (msg of errorMessages(); track msg) {\n              <mat-error>{{ msg }}</mat-error>\n            }\n          </mat-form-field>\n        }\n      </div>\n\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n  } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n    <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n        </ng-container>\n      </div>\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  } @else {\n    <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n    @if (isGroupType()) {\n      <div class=\"kms-form-field__label-row\">\n        <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n        @if (fieldConfig().tooltip) {\n          <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n        }\n      </div>\n    }\n\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container kmsDynamicField\n                      [fieldConfig]=\"fieldConfig()\"\n                      [control]=\"control()\"\n                      (fieldTouched)=\"onFieldTouched()\">\n        </ng-container>\n      </div>\n\n      @if (!isGroupType() && fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "component", type: DateInputComponent, selector: "kms-date-input", inputs: ["mode", "disabled", "label", "placeholder", "required", "hint", "errorMessage", "minDate", "maxDate", "monthPicker", "startView"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[kmsDynamicField]", inputs: ["fieldConfig", "control"], outputs: ["fieldTouched"] }, { kind: "component", type: TextInputComponent, selector: "kms-text-input", inputs: ["disabled", "label", "placeholder", "type", "required", "hint", "errorMessage", "autocomplete", "prefix", "suffix", "prefixIcon", "suffixIcon"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldComponent, isStandalone: false, selector: "kms-form-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, formErrorDisplay: { classPropertyName: "formErrorDisplay", publicName: "formErrorDisplay", isSignal: true, isRequired: false, transformFunction: null }, formDisabledConfig: { classPropertyName: "formDisabledConfig", publicName: "formDisabledConfig", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kms-form-field\"\n     [attr.data-field-key]=\"fieldConfig().key\"\n     [attr.data-test-id]=\"fieldConfig().testId\"\n     [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n     [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n  @if (fieldConfig().type === FieldType.OFFSET) {\n    <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n  } @else if (isNativeType()) {\n    <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        @if (isTextInputType() || isNumberInputType()) {\n          <!-- TEXT / NUMBER \u2014 delegates to kms-text-input CVA -->\n          <kms-text-input\n            [formControl]=\"control()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [numericOnly]=\"isNumberInputType()\"\n            [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n            [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n            [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n            [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n            [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-text-input>\n        } @else if (isDateType()) {\n          <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n          <kms-date-input\n            [formControl]=\"control()\"\n            [mode]=\"dateMode()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [minDate]=\"dateMin()\"\n            [maxDate]=\"dateMax()\"\n            [monthPicker]=\"isMonthPicker()\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-date-input>\n        } @else {\n          <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n          <mat-form-field class=\"kms-form-field__mat-field\">\n            @if (fieldConfig().label) {\n              <mat-label>{{ fieldConfig().label }}</mat-label>\n            }\n\n            @switch (fieldConfig().type) {\n              @case (FieldType.TEXTAREA) {\n                <textarea matInput\n                          [formControl]=\"control()\"\n                          [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                          [rows]=\"textareaRows()\"\n                          [attr.autocomplete]=\"resolvedAutocomplete()\"\n                          [attr.aria-required]=\"isRequired() ? true : null\"\n                          [attr.aria-describedby]=\"ariaDescribedBy()\"\n                          [errorStateMatcher]=\"errorMatcher()\">\n                </textarea>\n              }\n              @case (FieldType.AUTOCOMPLETE) {\n                <input matInput\n                       [formControl]=\"control()\"\n                       [matAutocomplete]=\"autoPanel\"\n                       [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                       [attr.autocomplete]=\"resolvedAutocomplete()\"\n                       [attr.aria-required]=\"isRequired() ? true : null\"\n                       [attr.aria-describedby]=\"ariaDescribedBy()\"\n                       [errorStateMatcher]=\"errorMatcher()\">\n                <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n                  @for (opt of filteredAutoOptions(); track opt.Value) {\n                    <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n                  }\n                </mat-autocomplete>\n              }\n            }\n\n            <!-- Prefix -->\n            @if (fieldConfig().prefix) {\n              @if (fieldConfig().prefix!.type === 'text') {\n                <span matTextPrefix>{{ fieldConfig().prefix!.value }}&nbsp;</span>\n              } @else {\n                <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Suffix -->\n            @if (fieldConfig().suffix) {\n              @if (fieldConfig().suffix!.type === 'text') {\n                <span matTextSuffix>&nbsp;{{ fieldConfig().suffix!.value }}</span>\n              } @else {\n                <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Errors -->\n            @for (msg of errorMessages(); track msg) {\n              <mat-error>{{ msg }}</mat-error>\n            }\n          </mat-form-field>\n        }\n      </div>\n\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n  } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n    <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n        </ng-container>\n      </div>\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  } @else {\n    <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n    @if (isGroupType()) {\n      <div class=\"kms-form-field__label-row\">\n        <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n        @if (fieldConfig().tooltip) {\n          <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n        }\n      </div>\n    }\n\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container kmsDynamicField\n                      [fieldConfig]=\"fieldConfig()\"\n                      [control]=\"control()\"\n                      (fieldTouched)=\"onFieldTouched()\">\n        </ng-container>\n      </div>\n\n      @if (!isGroupType() && fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "component", type: DateInputComponent, selector: "kms-date-input", inputs: ["mode", "disabled", "label", "placeholder", "required", "hint", "errorMessage", "minDate", "maxDate", "monthPicker", "startView"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[kmsDynamicField]", inputs: ["fieldConfig", "control"], outputs: ["fieldTouched"] }, { kind: "component", type: TextInputComponent, selector: "kms-text-input", inputs: ["disabled", "label", "placeholder", "type", "required", "hint", "errorMessage", "autocomplete", "prefix", "suffix", "numericOnly", "prefixIcon", "suffixIcon"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-form-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kms-form-field\"\n     [attr.data-field-key]=\"fieldConfig().key\"\n     [attr.data-test-id]=\"fieldConfig().testId\"\n     [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n     [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n  @if (fieldConfig().type === FieldType.OFFSET) {\n    <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n  } @else if (isNativeType()) {\n    <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        @if (isTextInputType()) {\n          <!-- TEXT \u2014 delegates to kms-text-input CVA -->\n          <kms-text-input\n            [formControl]=\"control()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n            [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n            [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n            [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n            [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-text-input>\n        } @else if (isDateType()) {\n          <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n          <kms-date-input\n            [formControl]=\"control()\"\n            [mode]=\"dateMode()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [minDate]=\"dateMin()\"\n            [maxDate]=\"dateMax()\"\n            [monthPicker]=\"isMonthPicker()\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-date-input>\n        } @else {\n          <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n          <mat-form-field class=\"kms-form-field__mat-field\">\n            @if (fieldConfig().label) {\n              <mat-label>{{ fieldConfig().label }}</mat-label>\n            }\n\n            @switch (fieldConfig().type) {\n              @case (FieldType.TEXTAREA) {\n                <textarea matInput\n                          [formControl]=\"control()\"\n                          [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                          [rows]=\"textareaRows()\"\n                          [attr.autocomplete]=\"resolvedAutocomplete()\"\n                          [attr.aria-required]=\"isRequired() ? true : null\"\n                          [attr.aria-describedby]=\"ariaDescribedBy()\"\n                          [errorStateMatcher]=\"errorMatcher()\">\n                </textarea>\n              }\n              @case (FieldType.AUTOCOMPLETE) {\n                <input matInput\n                       [formControl]=\"control()\"\n                       [matAutocomplete]=\"autoPanel\"\n                       [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                       [attr.autocomplete]=\"resolvedAutocomplete()\"\n                       [attr.aria-required]=\"isRequired() ? true : null\"\n                       [attr.aria-describedby]=\"ariaDescribedBy()\"\n                       [errorStateMatcher]=\"errorMatcher()\">\n                <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n                  @for (opt of filteredAutoOptions(); track opt.Value) {\n                    <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n                  }\n                </mat-autocomplete>\n              }\n            }\n\n            <!-- Prefix -->\n            @if (fieldConfig().prefix) {\n              @if (fieldConfig().prefix!.type === 'text') {\n                <span matTextPrefix>{{ fieldConfig().prefix!.value }}&nbsp;</span>\n              } @else {\n                <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Suffix -->\n            @if (fieldConfig().suffix) {\n              @if (fieldConfig().suffix!.type === 'text') {\n                <span matTextSuffix>&nbsp;{{ fieldConfig().suffix!.value }}</span>\n              } @else {\n                <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Errors -->\n            @for (msg of errorMessages(); track msg) {\n              <mat-error>{{ msg }}</mat-error>\n            }\n          </mat-form-field>\n        }\n      </div>\n\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n  } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n    <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n        </ng-container>\n      </div>\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  } @else {\n    <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n    @if (isGroupType()) {\n      <div class=\"kms-form-field__label-row\">\n        <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n        @if (fieldConfig().tooltip) {\n          <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n        }\n      </div>\n    }\n\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container kmsDynamicField\n                      [fieldConfig]=\"fieldConfig()\"\n                      [control]=\"control()\"\n                      (fieldTouched)=\"onFieldTouched()\">\n        </ng-container>\n      </div>\n\n      @if (!isGroupType() && fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"] }]
+            args: [{ selector: 'kms-form-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kms-form-field\"\n     [attr.data-field-key]=\"fieldConfig().key\"\n     [attr.data-test-id]=\"fieldConfig().testId\"\n     [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n     [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n  @if (fieldConfig().type === FieldType.OFFSET) {\n    <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n  } @else if (isNativeType()) {\n    <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        @if (isTextInputType() || isNumberInputType()) {\n          <!-- TEXT / NUMBER \u2014 delegates to kms-text-input CVA -->\n          <kms-text-input\n            [formControl]=\"control()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [numericOnly]=\"isNumberInputType()\"\n            [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n            [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n            [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n            [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n            [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-text-input>\n        } @else if (isDateType()) {\n          <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n          <kms-date-input\n            [formControl]=\"control()\"\n            [mode]=\"dateMode()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [minDate]=\"dateMin()\"\n            [maxDate]=\"dateMax()\"\n            [monthPicker]=\"isMonthPicker()\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-date-input>\n        } @else {\n          <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n          <mat-form-field class=\"kms-form-field__mat-field\">\n            @if (fieldConfig().label) {\n              <mat-label>{{ fieldConfig().label }}</mat-label>\n            }\n\n            @switch (fieldConfig().type) {\n              @case (FieldType.TEXTAREA) {\n                <textarea matInput\n                          [formControl]=\"control()\"\n                          [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                          [rows]=\"textareaRows()\"\n                          [attr.autocomplete]=\"resolvedAutocomplete()\"\n                          [attr.aria-required]=\"isRequired() ? true : null\"\n                          [attr.aria-describedby]=\"ariaDescribedBy()\"\n                          [errorStateMatcher]=\"errorMatcher()\">\n                </textarea>\n              }\n              @case (FieldType.AUTOCOMPLETE) {\n                <input matInput\n                       [formControl]=\"control()\"\n                       [matAutocomplete]=\"autoPanel\"\n                       [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                       [attr.autocomplete]=\"resolvedAutocomplete()\"\n                       [attr.aria-required]=\"isRequired() ? true : null\"\n                       [attr.aria-describedby]=\"ariaDescribedBy()\"\n                       [errorStateMatcher]=\"errorMatcher()\">\n                <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n                  @for (opt of filteredAutoOptions(); track opt.Value) {\n                    <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n                  }\n                </mat-autocomplete>\n              }\n            }\n\n            <!-- Prefix -->\n            @if (fieldConfig().prefix) {\n              @if (fieldConfig().prefix!.type === 'text') {\n                <span matTextPrefix>{{ fieldConfig().prefix!.value }}&nbsp;</span>\n              } @else {\n                <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Suffix -->\n            @if (fieldConfig().suffix) {\n              @if (fieldConfig().suffix!.type === 'text') {\n                <span matTextSuffix>&nbsp;{{ fieldConfig().suffix!.value }}</span>\n              } @else {\n                <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Errors -->\n            @for (msg of errorMessages(); track msg) {\n              <mat-error>{{ msg }}</mat-error>\n            }\n          </mat-form-field>\n        }\n      </div>\n\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n  } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n    <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n        </ng-container>\n      </div>\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  } @else {\n    <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n    @if (isGroupType()) {\n      <div class=\"kms-form-field__label-row\">\n        <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n        @if (fieldConfig().tooltip) {\n          <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n        }\n      </div>\n    }\n\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container kmsDynamicField\n                      [fieldConfig]=\"fieldConfig()\"\n                      [control]=\"control()\"\n                      (fieldTouched)=\"onFieldTouched()\">\n        </ng-container>\n      </div>\n\n      @if (!isGroupType() && fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], formErrorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorDisplay", required: false }] }], formDisabledConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDisabledConfig", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }] } });
 
 const ALIGN_MAP = { left: 'start', center: 'center', right: 'end', stretch: 'stretch' };
@@ -4265,7 +4274,7 @@ class FormSectionComponent {
             const c = this.sectionConfig();
             return {
                 'grid-template-columns': `repeat(${this.activeColumns()}, 1fr)`,
-                gap: c.gap ?? '16px',
+                gap: c.gap ?? '32px',
                 padding: c.padding ?? '0',
                 'justify-items': ALIGN_MAP[c.align ?? 'stretch'],
                 'align-items': VALIGN_MAP[c.verticalAlign ?? 'top'],