BBSF Controls package is part of BBSF 3 packages. It has all the form controls that we use to build our application forms.
npm install @bnsights/bbsf-controlstypescript
// Example 1: Basic form with text inputs only (~30 KB)
import { BBSFFormsBasicModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFFormsBasicModule]
})
export class SimpleFormModule { }
`
`typescript
// Example 2: Form with dropdown (~160 KB - 75% smaller than BBSFCoreModule!)
import {
BBSFFormsBasicModule, // ~30 KB
BBSFDropdownModule // ~130 KB
} from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFFormsBasicModule, BBSFDropdownModule]
})
export class FormWithDropdownModule { }
`
`typescript
// Example 3: Form with date picker (~250 KB - 60% smaller!)
import {
BBSFFormsBasicModule, // ~30 KB
BBSFDateTimeModule // ~220 KB
} from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFFormsBasicModule, BBSFDateTimeModule]
})
export class FormWithDateModule { }
`
`typescript
// Example 4: Complex form with multiple controls (~565 KB - 13% smaller)
import {
BBSFFormsBasicModule, // ~30 KB - TextBox, CheckBox, etc.
BBSFDropdownModule, // ~130 KB - Dropdown
BBSFDateTimeModule, // ~220 KB - Date/Time
BBSFPhoneModule, // ~90 KB - Phone
BBSFUtilityModule, // ~80 KB - Form, Modals, Paging
BBSFMultilingualModule // ~15 KB - Multilingual
} from '@bnsights/bbsf-controls';
@NgModule({
imports: [
BBSFFormsBasicModule,
BBSFDropdownModule,
BBSFDateTimeModule,
BBSFPhoneModule,
BBSFUtilityModule,
BBSFMultilingualModule
]
})
export class FullFormModule { }
`
`typescript
// Example 5: Form with rich text editor (~830 KB)
import {
BBSFFormsBasicModule,
BBSFEditorsModule // Rich text editors
} from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFFormsBasicModule, BBSFEditorsModule]
})
export class ContentFormModule { }
`
#### ā ļø Legacy: Old Module Imports (Not Recommended)
`typescript
// ā Old way 1: Loads ALL controls (~2+ MB)
import { BBSFControlsModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFControlsModule] // Don't use this!
})
`
`typescript
// ā ļø Old way 2: Still loads too much (~650 KB even if you use 1 control)
import { BBSFCoreModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFCoreModule] // Use granular modules instead!
})
`
---
$3
#### Real-World Bundle Size Comparison
| Use Case | Old (BBSFCoreModule) | New (Granular) | Savings |
|----------|---------------------|----------------|---------|
| Basic form only | 650 KB | 30 KB | 95% ā¬ļø |
| Form + Dropdown | 650 KB | 160 KB | 75% ā¬ļø |
| Form + Date picker | 650 KB | 250 KB | 60% ā¬ļø |
| Form + Phone | 650 KB | 120 KB | 82% ā¬ļø |
| All core controls | 650 KB | 565 KB | 13% ā¬ļø |
| + Rich text editor | 1450 KB | 830 KB | 43% ā¬ļø |
#### Example: Typical Application Impact
`
Before (using BBSFCoreModule):
āāā TextBox ā
āāā Dropdown ā
āāā Unused: DateTimePicker ā (~200 KB wasted)
Phone ā (~80 KB wasted)
Paging ā (~30 KB wasted)
Modals ā (~50 KB wasted)
... (~290 KB wasted)
Total: 650 KB
After (using granular modules):
āāā BBSFFormsBasicModule (~30 KB)
āāā BBSFDropdownModule (~130 KB)
Total: 160 KB (490 KB saved! 75% reduction)
`
---
$3
#### Step 1: Identify Your Controls
Audit your application to see which controls you're actually using:
`bash
Search for control usage in your codebase
grep -r "bbsf-textbox\|bbsf-dropdown\|bbsf-datepicker" src/
`
#### Step 2: Map Controls to Granular Modules
| If you use... | Import this module | Size |
|--------------|-------------------|------|
| TextBox, TextArea, CheckBox, Radio, Toggle | BBSFFormsBasicModule | ~30 KB |
| DropdownList | BBSFDropdownModule | ~130 KB |
| DateTimePicker | BBSFDateTimeModule | ~220 KB |
| Phone | BBSFPhoneModule | ~90 KB |
| Form, Modals, Paging, PageHeader | BBSFUtilityModule | ~80 KB |
| MultiLingualTextBox/TextArea | BBSFMultilingualModule | ~15 KB |
| HtmlEditor, MarkdownEditor | BBSFEditorsModule | ~800 KB |
| FileUpload, ImageUpload | BBSFUploadsModule | ~360 KB |
| Calendar, Maps, TagsInput, Repeater | BBSFSpecializedModule | ~300 KB |
#### Step 3: Replace Imports
Migration Example 1: From BBSFControlsModule
`typescript
// ā Before: Loading ALL controls (~2+ MB)
import { BBSFControlsModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFControlsModule]
})
export class UserFormModule { }
// ā
After: Only load what you need (~160 KB - 92% smaller!)
import {
BBSFFormsBasicModule, // You use TextBox, CheckBox
BBSFDropdownModule // You use Dropdown
} from '@bnsights/bbsf-controls';
@NgModule({
imports: [
BBSFFormsBasicModule,
BBSFDropdownModule
]
})
export class UserFormModule { }
`
Migration Example 2: From BBSFCoreModule
`typescript
// ā ļø Before: Loading all core controls (~650 KB)
import { BBSFCoreModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFCoreModule]
})
export class SimpleFormModule { }
// ā
After: Only basic forms (~30 KB - 95% smaller!)
import { BBSFFormsBasicModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFFormsBasicModule]
})
export class SimpleFormModule { }
`
Migration Example 3: Complex Form
`typescript
// ā Before: BBSFCoreModule (~650 KB) + BBSFEditorsModule (~800 KB) = 1.45 MB
import { BBSFCoreModule, BBSFEditorsModule } from '@bnsights/bbsf-controls';
@NgModule({
imports: [BBSFCoreModule, BBSFEditorsModule]
})
export class ArticleFormModule { }
// ā
After: Only what you need (~410 KB - 72% smaller!)
import {
BBSFFormsBasicModule, // ~30 KB - TextBox, CheckBox
BBSFDropdownModule, // ~130 KB - Dropdown
BBSFDateTimeModule, // ~220 KB - DatePicker
BBSFFormsBasicModule // ~30 KB - Basic forms
} from '@bnsights/bbsf-controls';
@NgModule({
imports: [
BBSFFormsBasicModule,
BBSFDropdownModule,
BBSFDateTimeModule
]
})
export class ArticleFormModule { }
`
#### Step 4: Verify Bundle Size
After migration, build your app and check the bundle size:
`bash
Build with stats
npm run build -- --stats-json
Analyze bundle (install if needed: npm i -g webpack-bundle-analyzer)
npx webpack-bundle-analyzer dist/your-app/stats.json
`
Look for @bnsights/bbsf-controls in the bundle analyzer to see your savings!
#### Step 5: Update All Modules
Search and replace across your codebase:
`bash
Find all BBSFControlsModule imports
grep -r "BBSFControlsModule" src/
Find all BBSFCoreModule imports
grep -r "BBSFCoreModule" src/
`
Then update each file based on which controls it actually uses.
---
$3
Most Common Combinations:
`typescript
// Basic form (~30 KB)
import { BBSFFormsBasicModule } from '@bnsights/bbsf-controls';
// Form with dropdown (~160 KB)
import { BBSFFormsBasicModule, BBSFDropdownModule } from '@bnsights/bbsf-controls';
// Form with date picker (~250 KB)
import { BBSFFormsBasicModule, BBSFDateTimeModule } from '@bnsights/bbsf-controls';
// Complete form (~565 KB)
import {
BBSFFormsBasicModule,
BBSFDropdownModule,
BBSFDateTimeModule,
BBSFPhoneModule,
BBSFUtilityModule
} from '@bnsights/bbsf-controls';
// Content management (~830 KB)
import { BBSFFormsBasicModule, BBSFEditorsModule } from '@bnsights/bbsf-controls';
// Media management (~390 KB)
import { BBSFFormsBasicModule, BBSFUploadsModule } from '@bnsights/bbsf-controls';
`
---
š§ Troubleshooting
$3
Problem: This error occurs when using Angular 19+ with the BBSFEditorsModule (which uses @kolkov/angular-editor). Angular 19's build system tries to process the @kolkov/angular-editor package and encounters compatibility issues.
Solution 1: Install @kolkov/angular-editor in your consuming app (Recommended)
Add @kolkov/angular-editor to your consuming app's package.json dependencies:
`bash
npm install @kolkov/angular-editor@^3.0.0-beta.2
`
This ensures the package is resolved correctly during the build process.
Solution 2: Use patch-package to fix the import
If Solution 1 doesn't work, you can patch the @kolkov/angular-editor package:
1. Install patch-package in your consuming app:
`bash
npm install --save-dev patch-package postinstall-postinstall
`
2. Create a patch file:
- Navigate to node_modules/@kolkov/angular-editor/fesm2020/kolkov-angular-editor.mjs
- Verify that line 4 already has: import { DOCUMENT, CommonModule } from '@angular/common';
- If the issue persists, it may be a bundling issue with Angular 19
3. If needed, manually patch the file and create a patch:
`bash
npx patch-package @kolkov/angular-editor
`
4. Add a postinstall script to your package.json:
`json
{
"scripts": {
"postinstall": "patch-package"
}
}
`
Solution 3: Configure your build to externalize @kolkov/angular-editor
If you're using a custom webpack configuration, you can configure it to externalize the package:
`javascript
// webpack.config.js or angular.json custom webpack config
externals: {
'@kolkov/angular-editor': '@kolkov/angular-editor'
}
`
Solution 4: Use a different HTML editor
If the issue persists, consider using a different HTML editor component that's compatible with Angular 19, or wait for an updated version of @kolkov/angular-editor.
Note: The library maintainers are aware of this issue. The @kolkov/angular-editor package version 3.0.0-beta.2 was built for Angular 13-15, and Angular 19 has stricter module resolution. The recommended workaround is Solution 1.
---
Change Log
1.2.12 / 18-01-2026
=====================
- Update bbsf-utilities package to 1.2.6
1.2.11 / 18-01-2026
=====================
- refactored repeater-field-builder component (reduced from 1,468 to 115 lines)
- created field-config-factory service for centralized field configuration
- created field-option-builders with reusable builder functions
- fixed MultiFile variable reference bug
- eliminated code duplication in lifecycle methods
1.2.10 / 05-01-2026
=====================
- upgrade utilities package 1.2.4
1.2.9 / 05-01-2026
=====================
- upgrade utilities package 1.2.4
1.2.8 / 25-12-2025
=====================
- upgrade utilities package
1.2.7 / 08-12-2025
=====================
- upgrade to angular 19 starting from (v 1.2.0)
- Enhancement in file-upload-component
1.0.194 / 16-10-2025
=====================
- Implement standalone components
1.0.193 / 16-10-2025
=====================
- Fix Format for displayValues in Tags, multiSelect
1.0.192 / 15-10-2025
=====================
- Fix Repeater URL Validation
- Fix Clear singleSelection DropdownComponent
- Remove Swal cancelButton style
1.0.191 / 23/9/2025
=====================
- Initialize repeater control when custom validation
- Handle attach image in HTML Editor Component
- Validate files count when drag and drop file in single upload
1.0.190 / 21/9/2025
=====================
- Add option to add buttons to hide in HTML Editor Component
- Remove options from Html Editor component
1.0.189 / 15/9/2025
=====================
- Add option to show password requirements
1.0.188 / 15/9/2025
=====================
- Update utilities package to 1.0.68
- Add Password Validation disclaimer
1.0.187 / 15/9/2025
=====================
- Update utilities package to 1.0.67
1.0.186 11-09-2025
====================
- Fixing password validation issue in TextBoxComponent
1.0.185 07-09-2025
====================
- DropdownList Enable Select all.
1.0.184 03-09-2025
====================
- dropdownlist place error message outside input style
1.0.183 03-09-2025
====================
- Fix FileUpload issues
- Fix TextArea SpeechRecognition issue.
1.0.182 28-08-2025
====================
- Update utilities package to 1.0.66
- Fix FileUpload issues
- Enhancement for textarea, multi lingual textbox
1.0.181 26-08-2025
====================
- Update utilities package to 1.0.64
1.0.178 20-08-2025 (deprecated)
====================
- Fileupload component
- fix accepted types issue.
- fix error display issue.
1.0.177 18-08-2025 (deprecated)
====================
- Enhance File-Upload Component
- Fix FileUplaod typo to be FileUpload
1.0.176 11-08-2025
====================
- Updating utilities package version.
1.0.173 06-08-2025
====================
- Add desplayValue getter in all controls to handle selected values
- Fix some issue in file upload
1.0.172 06-08-2025
====================
- Add desplayValue in all controls to handle selected values
1.0.171 04-08-2025
====================
- add PreventDoubleClickDirective to handle double click issues
1.0.168 03-08-2025
====================
- Fix mic in text-area.
- Handle navigation event in paging enableBrowserNavigation.
1.0.167 29-07-2025
=====================
- add fixes to date-picker, and dropdownlist components for pageFilter popup
1.0.170 / 23-7-2024 (Using Angular 19)
=====================
- Update BBSF to use Angular 19
- Update utilities package
1.0.166 / 6/5/2025
=====================
Added extra options to MapAutoCompleteOptions advanced view mode
- Sets the zoom level for the map > zoom
- Finding a location by a specific address > address
- Boolean to enable fallback behavior if the address lookup fails > enableFallbackAddress
- Option to validates that the selected location is within a specific city boundary > validateLocationWithinCity
- Added componentRestrictions Geo Restriction option > country`