@4science_ng-dynamic-forms/ui-ng-bootstrap 19.0.1 → 19.0.2

package/karma.conf.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/ng-dynamic-forms/ui-ng-bootstrap'),
+      subdir: '.',
+      reporters: [
+        {type: 'html'},
+        {type: 'json'},
+        {type: 'lcovonly'}
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['ChromeHeadless'],
+    singleRun: true,
+    restartOnFileChange: false
+  });
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/ng-dynamic-forms/ui-ng-bootstrap",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "flatModuleFile": "ui-ng-bootstrap"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4science_ng-dynamic-forms/ui-ng-bootstrap",
-  "version": "19.0.1",
+  "version": "19.0.2",
   "description": "NG Bootstrap UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -23,8 +23,8 @@
     "url": "https://github.com/udos86/ng-dynamic-forms"
   },
   "main": "./bundles/ui-ng-bootstrap.umd.js",
-  "module": "fesm2022/ui-ng-bootstrap.mjs",
-  "typings": "index.d.ts",
+  "module": "./fesm5/ui-ng-bootstrap.js",
+  "typings": "./ui-ng-bootstrap.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/udos86/ng-dynamic-forms.git"
@@ -43,16 +43,5 @@
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.0.0"
-  },
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ui-ng-bootstrap.mjs",
-      "esm": "./esm2022/ui-ng-bootstrap.mjs",
-      "default": "./fesm2022/ui-ng-bootstrap.mjs"
-    }
   }
-}
+}

package/src/lib/calendar/dynamic-ng-bootstrap-calendar.component.html

@@ -0,0 +1,33 @@
+<!--
+  ~ Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+  ~
+  ~ Permission to use, copy, modify, and/or distribute this software for any
+  ~ purpose with or without fee is hereby granted, provided that the above
+  ~ copyright notice and this permission notice appear in all copies.
+  ~
+  ~ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+  ~ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+  ~ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+  ~ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+  ~ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+  ~ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+  ~ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+  -->
+
+<ng-container [formGroup]="group">
+
+    <ngb-datepicker [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
+                    [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
+                    [formControlName]="model.id"
+                    [id]="id"
+                    [maxDate]="model.max"
+                    [minDate]="model.min"
+                    [navigation]="model.getAdditional('navigation', config['navigation'])"
+                    [ngClass]="getClass('element', 'control')"
+                    [outsideDays]="model.getAdditional('outsideDays', config['outsideDays'])"
+                    [showWeekNumbers]="model.getAdditional('showWeekNumbers', config['showWeekNumbers'])"
+                    [weekdays]="model.getAdditional('showWeekdays', config['weekdays'])"
+                    [startDate]="model.focusedDate"
+                    (select)="onChange($event)"></ngb-datepicker>
+
+</ng-container>

package/src/lib/calendar/dynamic-ng-bootstrap-calendar.component.spec.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import { TestBed, inject, ComponentFixture, waitForAsync } from "@angular/core/testing";
+import { DebugElement } from "@angular/core";
+import { UntypedFormGroup, UntypedFormControl } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { NgbDatepicker } from "@ng-bootstrap/ng-bootstrap";
+import { DynamicDatePickerModel, DynamicFormService } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapCalendarComponent } from "./dynamic-ng-bootstrap-calendar.component";
+
+describe("DynamicNGBootstrapCalendarComponent test suite", () => {
+    const testModel = new DynamicDatePickerModel({id: "calendar"});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapCalendarComponent>;
+    let component: DynamicNGBootstrapCalendarComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapCalendarComponent]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapCalendarComponent);
+
+            component = fixture.componentInstance;
+            debugElement = fixture.debugElement;
+        });
+    }));
+
+    beforeEach(inject([DynamicFormService], (service: DynamicFormService) => {
+        formGroup = service.createFormGroup(formModel);
+
+        component.group = formGroup;
+        component.model = testModel;
+
+        fixture.detectChanges();
+
+        testElement = debugElement.query(By.css(`ngb-datepicker[id="${testModel.id}"]`));
+    }));
+
+    it("should initialize correctly", () => {
+        expect(component.control instanceof UntypedFormControl).toBe(true);
+        expect(component.group instanceof UntypedFormGroup).toBe(true);
+        expect(component.model instanceof DynamicDatePickerModel).toBe(true);
+        expect(component.ngbCalendar instanceof NgbDatepicker).toBe(true);
+
+        expect(component.blur).toBeDefined();
+        expect(component.change).toBeDefined();
+        expect(component.focus).toBeDefined();
+
+        expect(component.onBlur).toBeDefined();
+        expect(component.onChange).toBeDefined();
+        expect(component.onFocus).toBeDefined();
+
+        expect(component.hasFocus).toBe(false);
+        expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
+        expect(component.showErrorMessages).toBe(false);
+    });
+
+    it("should have an ngb-datepicker element", () => {
+        expect(testElement instanceof DebugElement).toBe(true);
+    });
+
+    it("should emit blur event", () => {
+        spyOn(component.blur, "emit");
+
+        component.onBlur(null);
+
+        expect(component.blur.emit).toHaveBeenCalled();
+    });
+
+    it("should emit change event", () => {
+        spyOn(component.change, "emit");
+
+        component.onChange(null);
+
+        expect(component.change.emit).toHaveBeenCalled();
+    });
+
+    it("should emit focus event", () => {
+        spyOn(component.focus, "emit");
+
+        component.onFocus(null);
+
+        expect(component.focus.emit).toHaveBeenCalled();
+    });
+});

package/src/lib/calendar/dynamic-ng-bootstrap-calendar.component.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
+import { UntypedFormGroup, ReactiveFormsModule } from "@angular/forms";
+import { NgbDatepicker, NgbDatepickerConfig, NgbDatepickerModule } from "@ng-bootstrap/ng-bootstrap";
+import {
+    DynamicDatePickerModel,
+    DynamicFormControlComponent,
+    DynamicFormControlLayout,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormValidationService
+} from "@ng-dynamic-forms/core";
+import { NgClass } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-calendar",
+    templateUrl: "./dynamic-ng-bootstrap-calendar.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgbDatepickerModule, NgClass]
+})
+export class DynamicNGBootstrapCalendarComponent extends DynamicFormControlComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicDatePickerModel;
+
+    @Output() blur: EventEmitter<any> = new EventEmitter();
+    @Output() change: EventEmitter<any> = new EventEmitter();
+    @Output() focus: EventEmitter<any> = new EventEmitter();
+
+    @ViewChild(NgbDatepicker, {static: true}) ngbCalendar!: NgbDatepicker;
+
+    constructor(protected layoutService: DynamicFormLayoutService,
+                protected validationService: DynamicFormValidationService,
+                public config: NgbDatepickerConfig) {
+        super(layoutService, validationService);
+    }
+}

package/src/lib/checkbox/dynamic-ng-bootstrap-checkbox.component.html

@@ -0,0 +1,38 @@
+<!--
+  ~ Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+  ~
+  ~ Permission to use, copy, modify, and/or distribute this software for any
+  ~ purpose with or without fee is hereby granted, provided that the above
+  ~ copyright notice and this permission notice appear in all copies.
+  ~
+  ~ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+  ~ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+  ~ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+  ~ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+  ~ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+  ~ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+  ~ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+  -->
+
+<div [formGroup]="group" class="form-check" [class.disabled]="model.disabled">
+
+    <label class="form-check-label">
+
+        <input type="checkbox" class="form-check-input"
+               [checked]="model.checked"
+               [class.is-invalid]="showErrorMessages"
+               [formControlName]="model.id"
+               [id]="id"
+               [indeterminate]="model.indeterminate"
+               [name]="model.name"
+               [ngClass]="getClass('element', 'control')"
+               [required]="model.required"
+               [tabindex]="model.tabIndex"
+               [value]="model.value"
+               (blur)="onBlur($event)"
+               (change)="onChange($event)"
+               (focus)="onFocus($event)"/><span [innerHTML]="model.label"
+                                                [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></span>
+    </label>
+
+</div>

package/src/lib/checkbox/dynamic-ng-bootstrap-checkbox.component.spec.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import { TestBed, inject, ComponentFixture, waitForAsync } from "@angular/core/testing";
+import { DebugElement } from "@angular/core";
+import { UntypedFormGroup, UntypedFormControl } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { DynamicCheckboxModel, DynamicFormService } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapCheckboxComponent } from "./dynamic-ng-bootstrap-checkbox.component";
+
+describe("DynamicNGBootstrapCheckboxComponent test suite", () => {
+    const testModel = new DynamicCheckboxModel({id: "checkbox"});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapCheckboxComponent>;
+    let component: DynamicNGBootstrapCheckboxComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapCheckboxComponent]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapCheckboxComponent);
+
+            component = fixture.componentInstance;
+            debugElement = fixture.debugElement;
+        });
+    }));
+
+    beforeEach(inject([DynamicFormService], (service: DynamicFormService) => {
+        formGroup = service.createFormGroup(formModel);
+
+        component.group = formGroup;
+        component.model = testModel;
+
+        fixture.detectChanges();
+
+        testElement = debugElement.query(By.css(`input[type="checkbox"][id="${testModel.id}"]`));
+    }));
+
+    it("should initialize correctly", () => {
+        expect(component.control instanceof UntypedFormControl).toBe(true);
+        expect(component.group instanceof UntypedFormGroup).toBe(true);
+        expect(component.model instanceof DynamicCheckboxModel).toBe(true);
+
+        expect(component.blur).toBeDefined();
+        expect(component.change).toBeDefined();
+        expect(component.focus).toBeDefined();
+
+        expect(component.onBlur).toBeDefined();
+        expect(component.onChange).toBeDefined();
+        expect(component.onFocus).toBeDefined();
+
+        expect(component.hasFocus).toBe(false);
+        expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
+        expect(component.showErrorMessages).toBe(false);
+    });
+
+    it("should have an checkbox element", () => {
+        expect(testElement instanceof DebugElement).toBe(true);
+    });
+
+    it("should listen to and emit blur event", () => {
+        spyOn(component.blur, "emit");
+
+        component.onBlur(null);
+        testElement.triggerEventHandler("blur", null);
+
+        expect(component.blur.emit).toHaveBeenCalledTimes(2);
+    });
+
+    it("should emit change event", () => {
+        spyOn(component.change, "emit");
+
+        component.onChange(null);
+
+        expect(component.change.emit).toHaveBeenCalled();
+    });
+
+    it("should listen to and emit focus event", () => {
+        spyOn(component.focus, "emit");
+
+        component.onFocus(null);
+        testElement.triggerEventHandler("focus", null);
+
+        expect(component.focus.emit).toHaveBeenCalledTimes(2);
+    });
+});

package/src/lib/checkbox/dynamic-ng-bootstrap-checkbox.component.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
+import { UntypedFormGroup, ReactiveFormsModule } from "@angular/forms";
+import {
+    DynamicCheckboxModel,
+    DynamicFormControlComponent,
+    DynamicFormControlLayout,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormValidationService
+} from "@ng-dynamic-forms/core";
+import { NgClass } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-checkbox",
+    templateUrl: "./dynamic-ng-bootstrap-checkbox.component.html",
+    changeDetection: ChangeDetectionStrategy.Default,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgClass]
+})
+export class DynamicNGBootstrapCheckboxComponent extends DynamicFormControlComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicCheckboxModel;
+
+    @Output() blur: EventEmitter<any> = new EventEmitter();
+    @Output() change: EventEmitter<any> = new EventEmitter();
+    @Output() focus: EventEmitter<any> = new EventEmitter();
+
+    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {
+        super(layoutService, validationService);
+    }
+}

package/src/lib/checkbox-group/dynamic-ng-bootstrap-checkbox-group.component.html

@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+  ~
+  ~ Permission to use, copy, modify, and/or distribute this software for any
+  ~ purpose with or without fee is hereby granted, provided that the above
+  ~ copyright notice and this permission notice appear in all copies.
+  ~
+  ~ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+  ~ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+  ~ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+  ~ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+  ~ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+  ~ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+  ~ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+  -->
+
+<ng-container [formGroup]="group">
+
+    <div class="btn-group btn-group-toggle" data-bs-toggle="buttons"
+         [formGroupName]="model.id"
+         [id]="id"
+         [ngClass]="getClass('element', 'control')">
+
+        <label *ngFor="let checkboxModel of model.group"
+               [hidden]="checkboxModel.hidden"
+               [ngClass]="getClass('element', 'control', checkboxModel)">
+
+            <input type="checkbox"
+                   [checked]="checkboxModel.checked"
+                   [formControlName]="checkboxModel.id"
+                   [id]="getCheckboxId(checkboxModel)"
+                   [name]="checkboxModel.name"
+                   [required]="checkboxModel.required"
+                   [tabindex]="checkboxModel.tabIndex"
+                   [value]="checkboxModel.value"
+                   (blur)="onBlur($event)"
+                   (change)="onCheckboxChange($event, checkboxModel)"
+                   (focus)="onFocus($event)"/><span [ngClass]="getClass('element', 'label', checkboxModel)"
+                                                    [innerHTML]="checkboxModel.label"></span></label>
+    </div>
+
+</ng-container>

package/src/lib/checkbox-group/dynamic-ng-bootstrap-checkbox-group.component.spec.ts

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2016-2021, Udo Schöfer http://www.udos86.de
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import { TestBed, inject, ComponentFixture, waitForAsync } from "@angular/core/testing";
+import { DebugElement } from "@angular/core";
+import { ReactiveFormsModule, UntypedFormGroup } from "@angular/forms";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { By } from "@angular/platform-browser";
+import { DynamicCheckboxGroupModel, DynamicFormsCoreModule, DynamicFormService } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapCheckboxGroupComponent } from "./dynamic-ng-bootstrap-checkbox-group.component";
+
+describe("DynamicNGBootstrapCheckboxGroupComponent test suite", () => {
+    const testModel = new DynamicCheckboxGroupModel({id: "checkboxGroup", group: []});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapCheckboxGroupComponent>;
+    let component: DynamicNGBootstrapCheckboxGroupComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+    imports: [
+        ReactiveFormsModule,
+        NoopAnimationsModule,
+        DynamicFormsCoreModule,
+        DynamicNGBootstrapCheckboxGroupComponent
+    ]
+}).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapCheckboxGroupComponent);
+
+            component = fixture.componentInstance;
+            debugElement = fixture.debugElement;
+        });
+    }));
+
+    beforeEach(inject([DynamicFormService], (service: DynamicFormService) => {
+        formGroup = service.createFormGroup(formModel);
+
+        component.group = formGroup;
+        component.model = testModel;
+
+        fixture.detectChanges();
+
+        testElement = debugElement.query(By.css(`div.btn-group`));
+    }));
+
+    it("should initialize correctly", () => {
+        expect(component.control instanceof UntypedFormGroup).toBe(true);
+        expect(component.group instanceof UntypedFormGroup).toBe(true);
+        expect(component.model instanceof DynamicCheckboxGroupModel).toBe(true);
+
+        expect(component.blur).toBeDefined();
+        expect(component.change).toBeDefined();
+        expect(component.focus).toBeDefined();
+
+        expect(component.onBlur).toBeDefined();
+        expect(component.onChange).toBeDefined();
+        expect(component.onFocus).toBeDefined();
+
+        expect(component.hasFocus).toBe(false);
+        expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
+        expect(component.showErrorMessages).toBe(false);
+    });
+
+    it("should have an div.btn-group element", () => {
+        expect(testElement instanceof DebugElement).toBe(true);
+    });
+
+    it("should emit blur event", () => {
+        spyOn(component.blur, "emit");
+
+        component.onBlur(null);
+
+        expect(component.blur.emit).toHaveBeenCalled();
+    });
+
+    it("should emit change event", () => {
+        spyOn(component.change, "emit");
+
+        component.onChange(null);
+
+        expect(component.change.emit).toHaveBeenCalled();
+    });
+
+    it("should emit focus event", () => {
+        spyOn(component.focus, "emit");
+
+        component.onFocus(null);
+
+        expect(component.focus.emit).toHaveBeenCalled();
+    });
+});