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

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

@@ -0,0 +1,106 @@
+/*
+ * 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 { DynamicFormService, DynamicRadioGroupModel } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapRadioGroupComponent } from "./dynamic-ng-bootstrap-radio-group.component";
+
+describe("DynamicNGBootstrapRadioGroupComponent test suite", () => {
+    const testModel = new DynamicRadioGroupModel({
+        id: "radioGroup",
+        options: [{value: "One"}, {value: "Two"}],
+        value: "One"
+    });
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapRadioGroupComponent>;
+    let component: DynamicNGBootstrapRadioGroupComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapRadioGroupComponent]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapRadioGroupComponent);
+
+            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[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 DynamicRadioGroupModel).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 radio 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();
+    });
+});

package/src/lib/radio-group/dynamic-ng-bootstrap-radio-group.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 {
+    DynamicFormControlComponent,
+    DynamicFormControlLayout,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormValidationService,
+    DynamicRadioGroupModel
+} from "@ng-dynamic-forms/core";
+import { NgClass, NgIf, NgFor, AsyncPipe } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-radio-group",
+    templateUrl: "./dynamic-ng-bootstrap-radio-group.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgClass, NgIf, NgFor, AsyncPipe]
+})
+export class DynamicNGBootstrapRadioGroupComponent extends DynamicFormControlComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicRadioGroupModel<string>;
+
+    @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/rating/dynamic-ng-bootstrap-rating.component.html

@@ -0,0 +1,28 @@
+<!--
+  ~ 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-rating [formControlName]="model.id"
+                [id]="id"
+                [max]="model.max"
+                [ngClass]="getClass('element', 'control')"
+                [resettable]="model.getAdditional('resettable', config['resettable'])"
+                (hover)="onCustomEvent($event, 'hover')"
+                (leave)="onCustomEvent($event, 'leave')"
+                (rateChange)="onChange($event)"></ngb-rating>
+
+</ng-container>

package/src/lib/rating/dynamic-ng-bootstrap-rating.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 { DynamicFormService, DynamicRatingModel } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapRatingComponent } from "./dynamic-ng-bootstrap-rating.component";
+import { NgbRating } from "@ng-bootstrap/ng-bootstrap";
+
+describe("DynamicNGBootstrapRatingComponent test suite", () => {
+    const testModel = new DynamicRatingModel({id: "rating"});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapRatingComponent>;
+    let component: DynamicNGBootstrapRatingComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapRatingComponent]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapRatingComponent);
+
+            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-rating[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 DynamicRatingModel).toBe(true);
+        expect(component.ngbRating instanceof NgbRating).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-rating element", () => {
+        expect(testElement instanceof DebugElement).toBe(true);
+    });
+
+    it("should listen to and 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 listen to and emit focus event", () => {
+        spyOn(component.focus, "emit");
+
+        component.onFocus(null);
+
+        expect(component.focus.emit).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,56 @@
+/*
+ * 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 { NgbRating, NgbRatingConfig, NgbRatingModule } from "@ng-bootstrap/ng-bootstrap";
+import {
+    DynamicFormControlComponent,
+    DynamicFormControlCustomEvent,
+    DynamicFormControlLayout,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormValidationService,
+    DynamicRatingModel
+} from "@ng-dynamic-forms/core";
+import { NgClass } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-rating",
+    templateUrl: "./dynamic-ng-bootstrap-rating.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgbRatingModule, NgClass]
+})
+export class DynamicNGBootstrapRatingComponent extends DynamicFormControlComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicRatingModel;
+
+    @Output() blur: EventEmitter<any> = new EventEmitter();
+    @Output() change: EventEmitter<any> = new EventEmitter();
+    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();
+    @Output() focus: EventEmitter<any> = new EventEmitter();
+
+    @ViewChild(NgbRating, {static: true}) ngbRating!: NgbRating;
+
+    constructor(protected layoutService: DynamicFormLayoutService,
+                protected validationService: DynamicFormValidationService,
+                public config: NgbRatingConfig) {
+        super(layoutService, validationService);
+    }
+}

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

@@ -0,0 +1,39 @@
+<!--
+  ~ 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">
+
+    <select class="form-control"
+            [class.is-invalid]="showErrorMessages"
+            [compareWith]="model.compareWithFn"
+            [formControlName]="model.id"
+            [id]="id"
+            [attr.aria-label]="model.label"
+            [name]="model.name"
+            [ngClass]="getClass('element', 'control')"
+            [required]="model.required"
+            [tabindex]="model.tabIndex"
+            (blur)="onBlur($event)"
+            (change)="onChange($event)"
+            (focus)="onFocus($event)">
+
+        <option *ngFor="let option of model.options$ | async"
+                [disabled]="option.disabled"
+                [ngValue]="option.value">{{ option.label }}</option>
+
+    </select>
+
+</ng-container>

package/src/lib/select/dynamic-ng-bootstrap-select.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 { DynamicFormService, DynamicSelectModel } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapSelectComponent } from "./dynamic-ng-bootstrap-select.component";
+
+describe("DynamicNGBootstrapSelectComponent test suite", () => {
+    const testModel = new DynamicSelectModel({id: "select", options: [{value: "One"}, {value: "Two"}], value: "One"});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapSelectComponent>;
+    let component: DynamicNGBootstrapSelectComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapSelectComponent]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapSelectComponent);
+
+            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(`select[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 DynamicSelectModel).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 select 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/select/dynamic-ng-bootstrap-select.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 {
+    DynamicFormControlComponent,
+    DynamicFormControlLayout,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormValidationService,
+    DynamicSelectModel
+} from "@ng-dynamic-forms/core";
+import { NgClass, NgFor, AsyncPipe } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-select",
+    templateUrl: "./dynamic-ng-bootstrap-select.component.html",
+    changeDetection: ChangeDetectionStrategy.Default,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgClass, NgFor, AsyncPipe]
+})
+export class DynamicNGBootstrapSelectComponent extends DynamicFormControlComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicSelectModel<string>;
+
+    @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/switch/dynamic-ng-bootstrap-switch.component.html

@@ -0,0 +1,35 @@
+<!--
+  ~ 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="custom-control custom-switch">
+
+    <input type="checkbox" class="custom-control-input"
+           [class.is-invalid]="showErrorMessages"
+           [formControlName]="model.id"
+           [id]="id"
+           [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)">
+
+    <label class="custom-control-label" [for]="id" [innerHTML]="model.label"></label>
+
+</div>
+

package/src/lib/switch/dynamic-ng-bootstrap-switch.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 { DynamicFormService, DynamicSwitchModel } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapSwitchComponent } from "./dynamic-ng-bootstrap-switch.component";
+
+describe("DynamicNGBootstrapSwitchComponent test suite", () => {
+    const testModel = new DynamicSwitchModel({id: "switch"});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapSwitchComponent>;
+    let component: DynamicNGBootstrapSwitchComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapSwitchComponent]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapSwitchComponent);
+
+            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 DynamicSwitchModel).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 switch 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);
+    });
+});