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

package/src/lib/dynamic-ng-bootstrap-form-control-container.component.ts

@@ -0,0 +1,214 @@
+/*
+ * 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,
+    ChangeDetectorRef,
+    Component,
+    ComponentFactoryResolver,
+    ContentChildren,
+    EventEmitter,
+    HostBinding,
+    Input,
+    Output,
+    QueryList,
+    Type,
+    ViewChild,
+    ViewChildren,
+    ViewContainerRef
+} from "@angular/core";
+import { UntypedFormGroup, ReactiveFormsModule } from "@angular/forms";
+import {
+    DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
+    DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX,
+    DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP,
+    DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER,
+    DYNAMIC_FORM_CONTROL_TYPE_GROUP,
+    DYNAMIC_FORM_CONTROL_TYPE_INPUT,
+    DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
+    DYNAMIC_FORM_CONTROL_TYPE_RATING,
+    DYNAMIC_FORM_CONTROL_TYPE_SELECT,
+    DYNAMIC_FORM_CONTROL_TYPE_SWITCH,
+    DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
+    DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER,
+    DynamicDatePickerModel,
+    DynamicFormArrayComponent,
+    DynamicFormArrayGroupModel,
+    DynamicFormArrayModel,
+    DynamicFormComponentService,
+    DynamicFormControl,
+    DynamicFormControlContainerComponent,
+    DynamicFormControlCustomEvent,
+    DynamicFormControlEvent,
+    DynamicFormControlLayout,
+    DynamicFormControlModel,
+    DynamicFormGroupComponent,
+    DynamicFormGroupModel,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormRelationService,
+    DynamicFormValidationService,
+    DynamicTemplateDirective
+} from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapCheckboxComponent } from "./checkbox/dynamic-ng-bootstrap-checkbox.component";
+import { DynamicNGBootstrapCheckboxGroupComponent } from "./checkbox-group/dynamic-ng-bootstrap-checkbox-group.component";
+import { DynamicNGBootstrapCalendarComponent } from "./calendar/dynamic-ng-bootstrap-calendar.component";
+import { DynamicNGBootstrapDatePickerComponent } from "./datepicker/dynamic-ng-bootstrap-datepicker.component";
+import { DynamicNGBootstrapInputComponent } from "./input/dynamic-ng-bootstrap-input.component";
+import { DynamicNGBootstrapRadioGroupComponent } from "./radio-group/dynamic-ng-bootstrap-radio-group.component";
+import { DynamicNGBootstrapRatingComponent } from "./rating/dynamic-ng-bootstrap-rating.component";
+import { DynamicNGBootstrapSelectComponent } from "./select/dynamic-ng-bootstrap-select.component";
+import { DynamicNGBootstrapSwitchComponent } from "./switch/dynamic-ng-bootstrap-switch.component";
+import { DynamicNGBootstrapTextAreaComponent } from "./textarea/dynamic-ng-bootstrap-textarea.component";
+import { DynamicNGBootstrapTimePickerComponent } from "./timepicker/dynamic-ng-bootstrap-timepicker.component";
+import { NgClass, NgFor, NgTemplateOutlet, NgIf } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-form-control",
+    templateUrl: "./dynamic-ng-bootstrap-form-control-container.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgClass, NgIf, NgTemplateOutlet, NgFor]
+})
+export class DynamicNGBootstrapFormControlContainerComponent extends DynamicFormControlContainerComponent {
+    @ContentChildren(DynamicTemplateDirective) contentTemplateList!: QueryList<DynamicTemplateDirective>;
+
+    @HostBinding("class") klass?: string;
+
+    @Input() asBootstrapFormGroup = true;
+    @Input() context: DynamicFormArrayGroupModel | null = null;
+    @Input() group!: UntypedFormGroup;
+    @Input() hostClass?: string[];
+    // tslint:disable-next-line:no-input-rename
+    @Input("templates") inputTemplateList?: QueryList<DynamicTemplateDirective>;
+    @Input() layout?: DynamicFormLayout;
+    @Input() model!: DynamicFormControlModel;
+
+    @Output() blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+    @Output() change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+    @Output() focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+    // tslint:disable-next-line:no-output-rename
+    @Output("ngbEvent") customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+
+    @ViewChild("componentViewContainer", {read: ViewContainerRef, static: true}) componentViewContainerRef!: ViewContainerRef;
+
+    constructor(protected changeDetectorRef: ChangeDetectorRef,
+                protected componentFactoryResolver: ComponentFactoryResolver,
+                protected layoutService: DynamicFormLayoutService,
+                protected validationService: DynamicFormValidationService,
+                protected componentService: DynamicFormComponentService,
+                protected relationService: DynamicFormRelationService) {
+        super(changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService);
+    }
+
+    get componentType(): Type<DynamicFormControl> | null {
+        return this.componentService.getCustomComponentType(this.model) || ngBootstrapUIFormControlMapFn(this.model);
+    }
+}
+
+export function ngBootstrapUIFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
+    switch (model.type) {
+        case DYNAMIC_FORM_CONTROL_TYPE_ARRAY:
+            return DynamicNGBootstrapFormArrayComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX:
+            return DynamicNGBootstrapCheckboxComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP:
+            return DynamicNGBootstrapCheckboxGroupComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER:
+            const datePickerModel = model as DynamicDatePickerModel;
+            return datePickerModel.inline ? DynamicNGBootstrapCalendarComponent : DynamicNGBootstrapDatePickerComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_GROUP:
+            return DynamicNGBootstrapFormGroupComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_INPUT:
+            return DynamicNGBootstrapInputComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP:
+            return DynamicNGBootstrapRadioGroupComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_RATING:
+            return DynamicNGBootstrapRatingComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_SELECT:
+            return DynamicNGBootstrapSelectComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_SWITCH:
+            return DynamicNGBootstrapSwitchComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA:
+            return DynamicNGBootstrapTextAreaComponent;
+
+        case DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER:
+            return DynamicNGBootstrapTimePickerComponent;
+
+        default:
+            return null;
+    }
+}
+
+@Component({
+    selector: "dynamic-ng-bootstrap-form-array",
+    templateUrl: "./dynamic-ng-bootstrap-form-array.component.html",
+    standalone: true,
+    imports: [ReactiveFormsModule, NgClass, NgFor, NgTemplateOutlet, DynamicNGBootstrapFormControlContainerComponent]
+})
+export class DynamicNGBootstrapFormArrayComponent extends DynamicFormArrayComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicFormArrayModel;
+    @Input() templates?: QueryList<DynamicTemplateDirective>;
+
+    @Output() blur: EventEmitter<any> = new EventEmitter();
+    @Output() change: EventEmitter<any> = new EventEmitter();
+    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();
+    @Output() focus: EventEmitter<any> = new EventEmitter();
+
+    @ViewChildren(DynamicNGBootstrapFormControlContainerComponent) components!: QueryList<DynamicNGBootstrapFormControlContainerComponent>;
+
+    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {
+        super(layoutService, validationService);
+    }
+}
+
+@Component({
+    selector: "dynamic-ng-bootstrap-form-group",
+    templateUrl: "./dynamic-ng-bootstrap-form-group.component.html",
+    standalone: true,
+    imports: [ReactiveFormsModule, NgClass, NgFor, DynamicNGBootstrapFormControlContainerComponent]
+})
+export class DynamicNGBootstrapFormGroupComponent extends DynamicFormGroupComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicFormGroupModel;
+    @Input() templates?: QueryList<DynamicTemplateDirective> | DynamicTemplateDirective[];
+
+    @Output() blur: EventEmitter<any> = new EventEmitter();
+    @Output() change: EventEmitter<any> = new EventEmitter();
+    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();
+    @Output() focus: EventEmitter<any> = new EventEmitter();
+
+    @ViewChildren(DynamicNGBootstrapFormControlContainerComponent) components!: QueryList<DynamicNGBootstrapFormControlContainerComponent>;
+
+    constructor(protected layoutService: DynamicFormLayoutService, protected validationService: DynamicFormValidationService) {
+        super(layoutService, validationService);
+    }
+}

package/src/lib/dynamic-ng-bootstrap-form-group.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.
+  -->
+
+<ng-container [formGroup]="group">
+
+    <div role="group" [formGroupName]="model.id" [id]="id" [ngClass]="getClass('element','control')">
+
+        <dynamic-ng-bootstrap-form-control *ngFor="let _model of model.group"
+                                           [asBootstrapFormGroup]="true"
+                                           [group]="control"
+                                           [hidden]="_model.hidden"
+                                           [layout]="formLayout"
+                                           [model]="_model"
+                                           [templates]="templates"
+                                           [hostClass]="[getClass('element','children'), getClass('grid','children')]"
+                                           (blur)="onBlur($event)"
+                                           (change)="onChange($event)"
+                                           (focus)="onFocus($event)"
+                                           (ngbEvent)="onCustomEvent($event, null, true)"></dynamic-ng-bootstrap-form-control>
+    </div>
+
+</ng-container>

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

@@ -0,0 +1,26 @@
+<!--
+  ~ 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.
+  -->
+
+<dynamic-ng-bootstrap-form-control *ngFor="let controlModel of model; trackBy: trackByFn"
+                                   [group]="group"
+                                   [hidden]="controlModel.hidden"
+                                   [layout]="layout"
+                                   [model]="controlModel"
+                                   [templates]="templates"
+                                   (blur)="onBlur($event)"
+                                   (change)="onChange($event)"
+                                   (focus)="onFocus($event)"
+                                   (ngbEvent)="onCustomEvent($event, ngbEvent)"></dynamic-ng-bootstrap-form-control>

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

@@ -0,0 +1,65 @@
+/*
+ * 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,
+    ChangeDetectorRef,
+    Component,
+    ContentChildren,
+    EventEmitter,
+    Input,
+    Output,
+    QueryList,
+    ViewChildren
+} from "@angular/core";
+import { UntypedFormGroup } from "@angular/forms";
+import {
+    DynamicFormComponent,
+    DynamicFormComponentService,
+    DynamicFormControlEvent,
+    DynamicFormLayout,
+    DynamicFormModel,
+    DynamicTemplateDirective
+} from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapFormControlContainerComponent } from "./dynamic-ng-bootstrap-form-control-container.component";
+import { NgFor } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-form",
+    templateUrl: "./dynamic-ng-bootstrap-form.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgFor, DynamicNGBootstrapFormControlContainerComponent]
+})
+export class DynamicNGBootstrapFormComponent extends DynamicFormComponent {
+    @Input() group!: UntypedFormGroup;
+    @Input() model!: DynamicFormModel;
+    @Input() layout?: DynamicFormLayout;
+
+    @Output() blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+    @Output() change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+    @Output() focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+
+    @Output() ngbEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+
+    @ContentChildren(DynamicTemplateDirective) templates!: QueryList<DynamicTemplateDirective>;
+
+    @ViewChildren(DynamicNGBootstrapFormControlContainerComponent) components!: QueryList<DynamicNGBootstrapFormControlContainerComponent>;
+
+    constructor(protected changeDetectorRef: ChangeDetectorRef, protected componentService: DynamicFormComponentService) {
+        super(changeDetectorRef, componentService);
+    }
+}

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

@@ -0,0 +1,101 @@
+<!--
+  ~ 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.input-group]="model.prefix || model.suffix">
+
+    <span *ngIf="model.prefix" class="input-group-text" [innerHTML]="model.prefix"></span>
+
+    <input *ngIf="model.inputType === 'file'; else maskedInput" class="form-control"
+           [attr.accept]="model.accept"
+           [attr.max]="model.max"
+           [attr.min]="model.min"
+           [attr.multiple]="model.multiple"
+           [attr.step]="model.step"
+           [autocomplete]="model.autoComplete"
+           [autofocus]="model.autoFocus"
+           [class.is-invalid]="showErrorMessages"
+           [dynamicList]="model.listId"
+           [formControlName]="model.id"
+           [id]="id"
+           [maxlength]="model.maxLength"
+           [minlength]="model.minLength"
+           [name]="model.name"
+           [ngClass]="getClass('element', 'control')"
+           [pattern]="model.pattern"
+           [placeholder]="model.placeholder"
+           [readonly]="model.readOnly"
+           [required]="model.required"
+           [spellcheck]="model.spellCheck"
+           [tabindex]="model.tabIndex"
+           [type]="model.inputType"
+           (blur)="onBlur($event)"
+           (change)="onChange($event)"
+           (focus)="onFocus($event)"/>
+
+    <ng-template #maskedInput>
+        <input class="form-control"
+               [attr.accept]="model.accept"
+               [attr.max]="model.max"
+               [attr.min]="model.min"
+               [attr.multiple]="model.multiple"
+               [attr.step]="model.step"
+               [autocomplete]="model.autoComplete"
+               [autofocus]="model.autoFocus"
+               [class.is-invalid]="showErrorMessages"
+               [dynamicList]="model.listId"
+               [formControlName]="model.id"
+               [id]="id"
+               [maxlength]="model.maxLength"
+               [minlength]="model.minLength"
+               [name]="model.name"
+               [ngClass]="getClass('element', 'control')"
+               [pattern]="model.pattern"
+               [placeholder]="model.placeholder"
+               [readonly]="model.readOnly"
+               [required]="model.required"
+               [spellcheck]="model.spellCheck"
+               [tabindex]="model.tabIndex"
+               [mask]="model.mask"
+               [specialCharacters]="model.maskConfig?.specialCharacters"
+               [patterns]="model.maskConfig?.patterns"
+               [prefix]="model.maskConfig?.prefix"
+               [suffix]="model.maskConfig?.suffix"
+               [thousandSeparator]="model.maskConfig?.thousandSeparator"
+               [decimalMarker]="model.maskConfig?.decimalMarker"
+               [dropSpecialCharacters]="model.maskConfig?.dropSpecialCharacters"
+               [hiddenInput]="model.maskConfig?.hiddenInput"
+               [showMaskTyped]="model.maskConfig?.showMaskTyped"
+               [placeHolderCharacter]="model.maskConfig?.placeHolderCharacter"
+               [shownMaskExpression]="model.maskConfig?.shownMaskExpression"
+               [showTemplate]="model.maskConfig?.showTemplate"
+               [clearIfNotMatch]="model.maskConfig.clearIfNotMatch"
+               [validation]="model.maskConfig.validation"
+               [separatorLimit]="model.maskConfig.separatorLimit"
+               [allowNegativeNumbers]="model.maskConfig.allowNegativeNumbers"
+               [leadZeroDateTime]="model.maskConfig.leadZeroDateTime"
+               [type]="model.inputType"
+               (blur)="onBlur($event)"
+               (change)="onChange($event)"
+               (focus)="onFocus($event)"/>
+    </ng-template>
+
+    <span *ngIf="model.suffix" class="input-group-text" [innerHTML]="model.suffix"></span>
+
+    <datalist *ngIf="model.hasList" [id]="model.listId">
+        <option *ngFor="let option of model.list$ | async" [value]="option">
+    </datalist>
+
+</div>

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

@@ -0,0 +1,107 @@
+/*
+ * 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, DynamicInputModel } from "@ng-dynamic-forms/core";
+import { DynamicNGBootstrapInputComponent } from "./dynamic-ng-bootstrap-input.component";
+import { provideNgxMask } from "ngx-mask";
+
+describe("DynamicNGBootstrapInputComponent test suite", () => {
+    const testModel = new DynamicInputModel({id: "input"});
+    const formModel = [testModel];
+
+    let formGroup: UntypedFormGroup;
+    let fixture: ComponentFixture<DynamicNGBootstrapInputComponent>;
+    let component: DynamicNGBootstrapInputComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [DynamicNGBootstrapInputComponent],
+            providers: [provideNgxMask()]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(DynamicNGBootstrapInputComponent);
+
+            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[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 DynamicInputModel).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 input 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);
+        testElement.triggerEventHandler("change", 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/input/dynamic-ng-bootstrap-input.component.ts

@@ -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.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
+import { UntypedFormGroup, ReactiveFormsModule } from "@angular/forms";
+import {
+    DynamicFormControlComponent,
+    DynamicFormControlLayout,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormValidationService,
+    DynamicInputModel,
+    DynamicFormsCoreModule
+} from "@ng-dynamic-forms/core";
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
+import { NgIf, NgClass, NgFor, AsyncPipe } from "@angular/common";
+
+@Component({
+    selector: "dynamic-ng-bootstrap-input",
+    templateUrl: "./dynamic-ng-bootstrap-input.component.html",
+    changeDetection: ChangeDetectionStrategy.Default,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe],
+    providers: [provideNgxMask()]
+})
+export class DynamicNGBootstrapInputComponent extends DynamicFormControlComponent {
+    @Input() formLayout?: DynamicFormLayout;
+    @Input() group!: UntypedFormGroup;
+    @Input() layout?: DynamicFormControlLayout;
+    @Input() model!: DynamicInputModel;
+
+    @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/radio-group/dynamic-ng-bootstrap-radio-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" role="group"
+         ngDefaultControl
+         [formControlName]="model.id"
+         [id]="id"
+         [ngClass]="getClass('element', 'control')"
+         [tabindex]="model.tabIndex"
+         (change)="onChange($event)">
+
+        <legend *ngIf="model.legend" [innerHTML]="model.legend"></legend>
+
+        <label *ngFor="let option of model.options$ | async"
+               [ngClass]="[getClass('element', 'option'), getClass('grid', 'option')]">
+
+            <input type="radio"
+                   [disabled]="option.disabled"
+                   [name]="model.name"
+                   [value]="option.value"
+                   (blur)="onBlur($event)"
+                   (focus)="onFocus($event)"/><span [innerHTML]="option.label"></span>
+        </label>
+
+    </div>
+
+</ng-container>