@ng-forge/dynamic-forms-bootstrap 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-forge/dynamic-forms-bootstrap",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Bootstrap 5 integration for @ng-forge/dynamic-forms. Pre-built Bootstrap form components.",
   "type": "module",
   "license": "MIT",
@@ -23,15 +23,15 @@
     "form-builder",
     "ng-forge"
   ],
-  "sideEffects": false,
+  "sideEffects": true,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "peerDependencies": {
-    "@angular/common": ">=21.0.7",
-    "@angular/core": ">=21.0.7",
-    "@angular/forms": ">=21.0.7",
-    "@ng-forge/dynamic-forms": "~0.3.0",
+    "@angular/common": "~21.1.0",
+    "@angular/core": "~21.1.0",
+    "@angular/forms": "~21.1.0",
+    "@ng-forge/dynamic-forms": "~0.4.0",
     "rxjs": ">=7.0.0"
   },
   "module": "fesm2022/ng-forge-dynamic-forms-bootstrap.mjs",

package/types/ng-forge-dynamic-forms-bootstrap.d.ts

@@ -1,4 +1,4 @@
-import { FormEvent, FieldDef, LogicConfig, FieldComponent, DynamicText, FormEventConstructor, ArrayItemContext, CheckedFieldComponent, ValidationMessages, FieldMeta, ValueFieldComponent, ValueType, FieldOption, FieldTypeDefinition } from '@ng-forge/dynamic-forms';
+import { FormEvent, FieldDef, LogicConfig, FieldComponent, DynamicText, FormEventConstructor, ArrayItemContext, CheckedFieldComponent, ValidationMessages, FieldMeta, ValueFieldComponent, ValueType, FieldOption, FieldTypeDefinition, NarrowFields, RegisteredFieldTypes, InferFormValue, FormConfig } from '@ng-forge/dynamic-forms';
 import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
 import { ButtonField, EventArgs, CheckboxField, DatepickerField, DatepickerProps, InputMeta, InputField, InputProps, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, TextareaField, TextareaProps, TextareaMeta, ToggleField } from '@ng-forge/dynamic-forms/integration';
 import * as _angular_core from '@angular/core';
@@ -114,7 +114,7 @@ interface BsCheckboxProps {
     inline?: boolean;
     reverse?: boolean;
     indeterminate?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
 }
 type BsCheckboxField = CheckboxField<BsCheckboxProps>;
 type BsCheckboxComponent = CheckedFieldComponent<BsCheckboxField>;
@@ -136,7 +136,7 @@ declare class BsCheckboxFieldComponent implements BsCheckboxComponent {
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     readonly checkboxInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     constructor();
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
@@ -149,7 +149,7 @@ interface BsDatepickerProps extends DatepickerProps {
     useNgBootstrap?: boolean;
     size?: 'sm' | 'lg';
     floatingLabel?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
     validFeedback?: DynamicText;
     invalidFeedback?: DynamicText;
     displayMonths?: number;
@@ -181,7 +181,7 @@ declare class BsDatepickerFieldComponent implements BsDatepickerComponent {
     constructor();
     readonly minAsString: _angular_core.Signal<string | null>;
     readonly maxAsString: _angular_core.Signal<string | null>;
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
@@ -193,7 +193,7 @@ declare class BsDatepickerFieldComponent implements BsDatepickerComponent {
 interface BsInputProps extends InputProps {
     size?: 'sm' | 'lg';
     floatingLabel?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
     validFeedback?: DynamicText;
     invalidFeedback?: DynamicText;
     plaintext?: boolean;
@@ -240,56 +240,57 @@ declare class BsInputFieldComponent implements BsInputComponent {
     readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     readonly showErrors: _angular_core.Signal<boolean>;
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
-    /** Unique ID for the help text element, used for aria-describedby */
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    /** Unique ID for the hint element, used for aria-describedby */
+    protected readonly hintId: _angular_core.Signal<string>;
     /** Base ID for error elements, used for aria-describedby */
     protected readonly errorId: _angular_core.Signal<string>;
     /** aria-invalid: true when field is invalid AND touched, false otherwise */
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     /** aria-required: true if field is required, null otherwise (to remove attribute) */
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
-    /** aria-describedby: links to help text and error messages for screen readers */
+    /** aria-describedby: links to hint and error messages for screen readers */
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsInputFieldComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsInputFieldComponent, "df-bs-input", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-interface BsMultiCheckboxProps<T> {
+interface BsMultiCheckboxProps {
     switch?: boolean;
     inline?: boolean;
     reverse?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
 }
-type BsMultiCheckboxField<T> = MultiCheckboxField<T, BsMultiCheckboxProps<T>>;
-type BsMultiCheckboxComponent<T> = ValueFieldComponent<BsMultiCheckboxField<T>>;
+type BsMultiCheckboxField<T> = MultiCheckboxField<T, BsMultiCheckboxProps>;
+type BsMultiCheckboxComponent = ValueFieldComponent<BsMultiCheckboxField<ValueType>>;
 
-declare class BsMultiCheckboxFieldComponent<T extends ValueType> implements BsMultiCheckboxComponent<T> {
+declare class BsMultiCheckboxFieldComponent implements BsMultiCheckboxComponent {
     private readonly elementRef;
-    readonly field: _angular_core.InputSignal<FieldTree<T[]>>;
+    readonly field: _angular_core.InputSignal<FieldTree<ValueType[]>>;
     readonly key: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<DynamicText | undefined>;
     readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
     readonly className: _angular_core.InputSignal<string>;
     readonly tabIndex: _angular_core.InputSignal<number | undefined>;
-    readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
-    readonly props: _angular_core.InputSignal<BsMultiCheckboxProps<T> | undefined>;
+    readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
+    readonly props: _angular_core.InputSignal<BsMultiCheckboxProps | undefined>;
     readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
     readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     readonly showErrors: _angular_core.Signal<boolean>;
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
-    valueViewModel: _angular_core.WritableSignal<FieldOption<T>[]>;
+    /** Computed map of checked option values for O(1) lookup in template */
+    readonly checkedValuesMap: _angular_core.Signal<Record<string, boolean>>;
+    valueViewModel: _angular_core.WritableSignal<FieldOption<ValueType>[]>;
     constructor();
-    onCheckboxChange(option: FieldOption<T>, checked: boolean): void;
-    isChecked(option: FieldOption<T>): boolean;
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    onCheckboxChange(option: FieldOption<ValueType>, event: Event): void;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsMultiCheckboxFieldComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsMultiCheckboxFieldComponent<any>, "df-bs-multi-checkbox", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsMultiCheckboxFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsMultiCheckboxFieldComponent, "df-bs-multi-checkbox", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface BsRadioProps {
@@ -297,20 +298,20 @@ interface BsRadioProps {
     reverse?: boolean;
     buttonGroup?: boolean;
     buttonSize?: 'sm' | 'lg';
-    helpText?: DynamicText;
+    hint?: DynamicText;
 }
 type BsRadioField<T> = RadioField<T, BsRadioProps>;
-type BsRadioComponent<T> = ValueFieldComponent<BsRadioField<T>>;
+type BsRadioComponent = ValueFieldComponent<BsRadioField<ValueType>>;
 
-declare class BsRadioFieldComponent<T extends string> implements BsRadioComponent<T> {
+declare class BsRadioFieldComponent implements BsRadioComponent {
     private readonly elementRef;
-    readonly field: _angular_core.InputSignal<FieldTree<T>>;
+    readonly field: _angular_core.InputSignal<FieldTree<ValueType>>;
     readonly key: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<DynamicText | undefined>;
     readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
     readonly className: _angular_core.InputSignal<string>;
     readonly tabIndex: _angular_core.InputSignal<number | undefined>;
-    readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
+    readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
     readonly props: _angular_core.InputSignal<BsRadioProps | undefined>;
     readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
     readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
@@ -319,38 +320,43 @@ declare class BsRadioFieldComponent<T extends string> implements BsRadioComponen
     readonly showErrors: _angular_core.Signal<boolean>;
     constructor();
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsRadioFieldComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsRadioFieldComponent<any>, "df-bs-radio", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsRadioFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsRadioFieldComponent, "df-bs-radio", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-interface BsSelectProps<T> extends SelectProps {
+/**
+ * Bootstrap select uses native HTML <select> which only supports string values.
+ * The compareWith function signature uses string to match this constraint.
+ */
+interface BsSelectProps extends SelectProps {
     multiple?: boolean;
     size?: 'sm' | 'lg';
     htmlSize?: number;
     floatingLabel?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
     validFeedback?: DynamicText;
     invalidFeedback?: DynamicText;
-    compareWith?: (o1: T, o2: T) => boolean;
+    compareWith?: (o1: string, o2: string) => boolean;
 }
-type BsSelectField<T> = SelectField<T, BsSelectProps<T>>;
-type BsSelectComponent<T> = ValueFieldComponent<BsSelectField<T>>;
+type BsSelectField<T> = SelectField<T, BsSelectProps>;
+/** Bootstrap select only supports string values due to native HTML select limitations */
+type BsSelectComponent = ValueFieldComponent<BsSelectField<string>>;
 
-declare class BsSelectFieldComponent<T extends string = string> implements BsSelectComponent<T> {
+declare class BsSelectFieldComponent implements BsSelectComponent {
     private readonly elementRef;
-    readonly field: _angular_core.InputSignal<FieldTree<T>>;
+    readonly field: _angular_core.InputSignal<FieldTree<string>>;
     readonly key: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<DynamicText | undefined>;
     readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
     readonly className: _angular_core.InputSignal<string>;
     readonly tabIndex: _angular_core.InputSignal<number | undefined>;
-    readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
-    readonly props: _angular_core.InputSignal<BsSelectProps<T> | undefined>;
+    readonly options: _angular_core.InputSignal<FieldOption<string>[]>;
+    readonly props: _angular_core.InputSignal<BsSelectProps | undefined>;
     readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
@@ -359,21 +365,21 @@ declare class BsSelectFieldComponent<T extends string = string> implements BsSel
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     constructor();
     defaultCompare: (value1: any, value2: any) => boolean;
-    protected isSelected(optionValue: T, fieldValue: T | T[] | null): boolean;
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected isSelected(optionValue: string, fieldValue: string | string[] | null): boolean;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsSelectFieldComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsSelectFieldComponent<any>, "df-bs-select", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsSelectFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsSelectFieldComponent, "df-bs-select", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface BsSliderProps {
     showValue?: boolean;
     valuePrefix?: string;
     valueSuffix?: string;
-    helpText?: DynamicText;
+    hint?: DynamicText;
     min?: number;
     max?: number;
     step?: number;
@@ -400,7 +406,7 @@ declare class BsSliderFieldComponent implements BsSliderComponent {
     readonly showErrors: _angular_core.Signal<boolean>;
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     constructor();
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
@@ -413,7 +419,7 @@ interface BsTextareaProps extends TextareaProps {
     rows?: number;
     size?: 'sm' | 'lg';
     floatingLabel?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
     validFeedback?: DynamicText;
     invalidFeedback?: DynamicText;
 }
@@ -436,7 +442,7 @@ declare class BsTextareaFieldComponent implements BsTextareaComponent {
     readonly showErrors: _angular_core.Signal<boolean>;
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     constructor();
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
@@ -449,7 +455,7 @@ interface BsToggleProps {
     size?: 'sm' | 'lg';
     reverse?: boolean;
     inline?: boolean;
-    helpText?: DynamicText;
+    hint?: DynamicText;
 }
 type BsToggleField = ToggleField<BsToggleProps>;
 type BsToggleComponent = CheckedFieldComponent<BsToggleField>;
@@ -470,7 +476,7 @@ declare class BsToggleFieldComponent implements BsToggleComponent {
     readonly showErrors: _angular_core.Signal<boolean>;
     readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
     constructor();
-    protected readonly helpTextId: _angular_core.Signal<string>;
+    protected readonly hintId: _angular_core.Signal<string>;
     protected readonly errorId: _angular_core.Signal<string>;
     protected readonly ariaInvalid: _angular_core.Signal<boolean>;
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
@@ -483,8 +489,24 @@ declare const BOOTSTRAP_FIELD_TYPES: FieldTypeDefinition[];
 
 /**
  * Configuration options for Bootstrap form fields.
- * These settings will be applied as defaults to all Bootstrap form fields
- * unless overridden by individual field props.
+ *
+ * These settings can be applied at two levels:
+ * - **Library-level**: Via `withBootstrapFields({ ... })` - applies to all forms
+ * - **Form-level**: Via `defaultProps` in form config - applies to a specific form
+ *
+ * The cascade hierarchy is: Library-level → Form-level → Field-level
+ *
+ * @example
+ * ```typescript
+ * // Library-level (in app config)
+ * provideDynamicForms(withBootstrapFields({ size: 'sm', floatingLabel: true }))
+ *
+ * // Form-level (in form config)
+ * const config: BsFormConfig = {
+ *   defaultProps: { size: 'lg' },
+ *   fields: [...]
+ * };
+ * ```
  */
 interface BootstrapConfig {
     /**
@@ -560,6 +582,51 @@ declare const BsField: {
 };
 type BsFieldType = (typeof BsField)[keyof typeof BsField];
 
+/**
+ * Bootstrap-specific props that can be set at form level and cascade to all fields.
+ *
+ * This is the same type as `BootstrapConfig` used in `withBootstrapFields()`.
+ * Using a single type ensures consistency between library-level and form-level configuration.
+ *
+ * The cascade hierarchy is: Library-level → Form-level → Field-level
+ *
+ * @example
+ * ```typescript
+ * const config: BsFormConfig = {
+ *   defaultProps: {
+ *     size: 'sm',
+ *     floatingLabel: true,
+ *   },
+ *   fields: [
+ *     { type: 'bs-input', key: 'name', label: 'Name' },
+ *   ],
+ * };
+ * ```
+ */
+type BsFormProps = BootstrapConfig;
+/**
+ * Bootstrap-specific FormConfig with type-safe defaultProps.
+ *
+ * Use this type alias when defining form configurations with Bootstrap components
+ * to get IDE autocomplete and type checking for `defaultProps`.
+ *
+ * @example
+ * ```typescript
+ * const formConfig: BsFormConfig = {
+ *   defaultProps: {
+ *     size: 'sm',
+ *     floatingLabel: true,
+ *     variant: 'primary',
+ *   },
+ *   fields: [
+ *     { type: 'bs-input', key: 'name', label: 'Name' },  // Uses form defaultProps
+ *     { type: 'bs-input', key: 'email', props: { size: 'lg' } },  // Override
+ *   ],
+ * };
+ * ```
+ */
+type BsFormConfig<TFields extends NarrowFields | RegisteredFieldTypes[] = RegisteredFieldTypes[], TValue = InferFormValue<TFields extends readonly RegisteredFieldTypes[] ? TFields : RegisteredFieldTypes[]>> = FormConfig<TFields, TValue, BsFormProps>;
+
 /**
  * Module augmentation for @ng-forge/dynamic-form
  * This file augments the FieldRegistryLeaves interface to include
@@ -632,4 +699,4 @@ type FieldTypeDefinitionsWithConfig = FieldTypeDefinition[] & {
 declare function withBootstrapFields(config?: BootstrapConfig): FieldTypeDefinitionsWithConfig;
 
 export { BOOTSTRAP_CONFIG, BOOTSTRAP_FIELD_TYPES, BsButtonFieldComponent, BsCheckboxFieldComponent, BsDatepickerFieldComponent, BsField, BsInputFieldComponent, BsMultiCheckboxFieldComponent, BsRadioFieldComponent, BsSelectFieldComponent, BsSliderFieldComponent, BsTextareaFieldComponent, BsToggleFieldComponent, withBootstrapFields };
-export type { AddArrayItemButtonField, BootstrapConfig, BsButtonField, BsButtonProps, BsCheckboxComponent, BsCheckboxField, BsCheckboxProps, BsDatepickerComponent, BsDatepickerField, BsDatepickerProps, BsFieldType, BsInputComponent, BsInputField, BsInputProps, BsMultiCheckboxComponent, BsMultiCheckboxField, BsMultiCheckboxProps, BsNextButtonField, BsPreviousButtonField, BsRadioComponent, BsRadioField, BsRadioProps, BsSelectComponent, BsSelectField, BsSelectProps, BsSliderComponent, BsSliderField, BsSliderProps, BsSubmitButtonField, BsTextareaComponent, BsTextareaField, BsTextareaProps, BsToggleComponent, BsToggleField, BsToggleProps, RemoveArrayItemButtonField };
+export type { AddArrayItemButtonField, BootstrapConfig, BsButtonField, BsButtonProps, BsCheckboxComponent, BsCheckboxField, BsCheckboxProps, BsDatepickerComponent, BsDatepickerField, BsDatepickerProps, BsFieldType, BsFormConfig, BsFormProps, BsInputComponent, BsInputField, BsInputProps, BsMultiCheckboxComponent, BsMultiCheckboxField, BsMultiCheckboxProps, BsNextButtonField, BsPreviousButtonField, BsRadioComponent, BsRadioField, BsRadioProps, BsSelectComponent, BsSelectField, BsSelectProps, BsSliderComponent, BsSliderField, BsSliderProps, BsSubmitButtonField, BsTextareaComponent, BsTextareaField, BsTextareaProps, BsToggleComponent, BsToggleField, BsToggleProps, RemoveArrayItemButtonField };