DURACOM-229 update ng-bootrap and bootstrap, fix dependencies, fix templates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-dynamic-forms",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "A rapid form development library for Angular",
   "repository": {
     "type": "git",
@@ -65,12 +65,12 @@
     "@angular/platform-browser-dynamic": "^16.1.3",
     "@angular/router": "^16.1.3",
     "@ionic/angular": "^7.1.1",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.1",
-    "bootstrap": "^4.6.2",
+    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
+    "bootstrap": "^5.3.2",
     "core-js": "^3.31.0",
     "foundation-sites": "^6.7.5",
-    "ngx-bootstrap": "^8.0.0",
-    "ngx-mask": "^16.2.0",
+    "ngx-bootstrap": "^11.0.0",
+    "ngx-mask": "^16.0.0",
     "primeicons": "^6.0.1",
     "primeng": "^16.0.2",
     "quill": "^1.3.7",

projects/ng-dynamic-forms/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/core",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "A rapid form development library for Angular",
   "keywords": [
     "angular",
@@ -43,4 +43,4 @@
   "dependencies": {
     "tslib": "^2.0.0"
   }
-}
+}

projects/ng-dynamic-forms/ui-basic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-basic",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Basic UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -28,8 +28,8 @@
     "url": "git+https://github.com/udos86/ng-dynamic-forms.git"
   },
   "peerDependencies": {
-    "@ng-dynamic-forms/core": "^18.0.0",
-    "ngx-mask": "^16.0.0"
+    "@ng-dynamic-forms/core": "^19.0.0",
+    "ngx-mask": "^16.4.2"
   },
   "es2015": "./fesm2015/ui-basic.js",
   "esm2015": "./esm2015/ui-basic.js",

projects/ng-dynamic-forms/ui-basic/src/lib/input/dynamic-basic-input.component.ts

@@ -9,15 +9,16 @@ import {
     DynamicInputModel,
     DynamicFormsCoreModule
 } from "@ng-dynamic-forms/core";
-import { NgxMaskDirective } from "ngx-mask";
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
 import { NgIf, NgClass, NgFor, AsyncPipe } from "@angular/common";
 
 @Component({
     selector: "dynamic-basic-input",
     templateUrl: "./dynamic-basic-input.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe]
+    imports: [FormsModule, ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe],
+    providers: [provideNgxMask()]
 })
 export class DynamicBasicInputComponent extends DynamicFormControlComponent {
     @Input() formLayout?: DynamicFormLayout;

projects/ng-dynamic-forms/ui-bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-bootstrap",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Bootstrap UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -30,10 +30,10 @@
     "url": "git+https://github.com/udos86/ng-dynamic-forms.git"
   },
   "peerDependencies": {
-    "@ng-dynamic-forms/core": "^18.0.0",
-    "bootstrap": "^3.3.7",
-    "ngx-bootstrap": "^6.0.0",
-    "ngx-mask": "^16.0.0"
+    "@ng-dynamic-forms/core": "^19.0.0",
+    "bootstrap": "^5.3.2",
+    "ngx-bootstrap": "^11.0.0",
+    "ngx-mask": "^16.4.2"
   },
   "es2015": "./fesm2015/ui-bootstrap.js",
   "esm2015": "./esm2015/ui-bootstrap.js",

projects/ng-dynamic-forms/ui-bootstrap/src/lib/dynamic-bootstrap-form-control-container.component.html

@@ -1,4 +1,4 @@
-<div [class.form-group]="asBootstrapFormGroup || getClass('element', 'container').includes('form-group')"
+<div [class.mb-3]="asBootstrapFormGroup || getClass('element', 'container').includes('form-group')"
      [class.has-error]="showErrorMessages"
      [formGroup]="group"
      [ngClass]="['ng-dynamic-forms-'+model.type.toLowerCase(), getClass('element', 'container'), getClass('grid', 'container')]">

projects/ng-dynamic-forms/ui-bootstrap/src/lib/input/dynamic-bootstrap-input.component.ts

@@ -9,15 +9,16 @@ import {
     DynamicInputModel,
     DynamicFormsCoreModule
 } from "@ng-dynamic-forms/core";
-import { NgxMaskDirective } from "ngx-mask";
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
 import { NgIf, NgClass, NgFor, AsyncPipe } from "@angular/common";
 
 @Component({
     selector: "dynamic-bootstrap-input",
     templateUrl: "./dynamic-bootstrap-input.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe]
+    imports: [ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe],
+    providers: [provideNgxMask()]
 })
 export class DynamicBootstrapInputComponent extends DynamicFormControlComponent {
     @Input() formLayout?: DynamicFormLayout;

projects/ng-dynamic-forms/ui-foundation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-foundation",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Foundation UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -29,9 +29,9 @@
     "url": "git+https://github.com/udos86/ng-dynamic-forms.git"
   },
   "peerDependencies": {
-    "@ng-dynamic-forms/core": "^18.0.0",
+    "@ng-dynamic-forms/core": "^19.0.0",
     "foundation-sites": "^6.3.1",
-    "ngx-mask": "^16.0.0"
+    "ngx-mask": "^16.4.2"
   },
   "es2015": "./fesm2015/ui-foundation.js",
   "esm2015": "./esm2015/ui-foundation.js",

projects/ng-dynamic-forms/ui-foundation/src/lib/input/dynamic-foundation-input.component.ts

@@ -9,15 +9,16 @@ import {
     DynamicInputModel,
     DynamicFormsCoreModule
 } from "@ng-dynamic-forms/core";
-import { NgxMaskDirective } from "ngx-mask";
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
 import { NgIf, NgClass, NgFor, AsyncPipe } from "@angular/common";
 
 @Component({
     selector: "dynamic-foundation-input",
     templateUrl: "./dynamic-foundation-input.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe]
+    imports: [ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe],
+    providers: [provideNgxMask()]
 })
 export class DynamicFoundationInputComponent extends DynamicFormControlComponent {
     @Input() formLayout?: DynamicFormLayout;

projects/ng-dynamic-forms/ui-ionic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-ionic",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Ionic UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@ionic/angular": "^7.0.0",
-    "@ng-dynamic-forms/core": "^18.0.0"
+    "@ng-dynamic-forms/core": "^19.0.0"
   },
   "es2015": "./fesm2015/ui-ionic.js",
   "esm2015": "./esm2015/ui-ionic.js",

projects/ng-dynamic-forms/ui-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-material",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Material UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@angular/material": "^16.0.0",
-    "@ng-dynamic-forms/core": "^18.0.0"
+    "@ng-dynamic-forms/core": "^19.0.0"
   },
   "es2015": "./fesm2015/ui-material.js",
   "esm2015": "./esm2015/ui-material.js",

projects/ng-dynamic-forms/ui-ng-bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-ng-bootstrap",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "NG Bootstrap UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -30,10 +30,10 @@
     "url": "git+https://github.com/udos86/ng-dynamic-forms.git"
   },
   "peerDependencies": {
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
-    "@ng-dynamic-forms/core": "^18.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
+    "@ng-dynamic-forms/core": "^19.0.0",
     "ngx-mask": "^13.0.0",
-    "bootstrap": "^4.0.0"
+    "bootstrap": "^5.3.2"
   },
   "es2015": "./fesm2015/ui-ng-bootstrap.js",
   "esm2015": "./esm2015/ui-ng-bootstrap.js",

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/checkbox-group/dynamic-ng-bootstrap-checkbox-group.component.html

@@ -1,15 +1,15 @@
 <ng-container [formGroup]="group">
 
-    <div class="btn-group btn-group-toggle" data-toggle="buttons"
+    <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" ngbButtonLabel
+        <label *ngFor="let checkboxModel of model.group"
                [hidden]="checkboxModel.hidden"
                [ngClass]="getClass('element', 'control', checkboxModel)">
 
-            <input type="checkbox" ngbButton
+            <input type="checkbox"
                    [checked]="checkboxModel.checked"
                    [formControlName]="checkboxModel.id"
                    [id]="getCheckboxId(checkboxModel)"

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/checkbox-group/dynamic-ng-bootstrap-checkbox-group.component.spec.ts

@@ -3,7 +3,6 @@ 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 { NgbButtonsModule } from "@ng-bootstrap/ng-bootstrap";
 import { DynamicCheckboxGroupModel, DynamicFormsCoreModule, DynamicFormService } from "@ng-dynamic-forms/core";
 import { DynamicNGBootstrapCheckboxGroupComponent } from "./dynamic-ng-bootstrap-checkbox-group.component";
 
@@ -22,7 +21,6 @@ describe("DynamicNGBootstrapCheckboxGroupComponent test suite", () => {
     imports: [
         ReactiveFormsModule,
         NoopAnimationsModule,
-        NgbButtonsModule,
         DynamicFormsCoreModule,
         DynamicNGBootstrapCheckboxGroupComponent
     ]

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/checkbox-group/dynamic-ng-bootstrap-checkbox-group.component.ts

@@ -9,15 +9,14 @@ import {
     DynamicFormLayoutService,
     DynamicFormValidationService
 } from "@ng-dynamic-forms/core";
-import { NgbButtonsModule } from "@ng-bootstrap/ng-bootstrap";
 import { NgClass, NgFor } from "@angular/common";
 
 @Component({
     selector: "dynamic-ng-bootstrap-checkbox-group",
     templateUrl: "./dynamic-ng-bootstrap-checkbox-group.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ReactiveFormsModule, NgClass, NgFor, NgbButtonsModule]
+    imports: [ReactiveFormsModule, NgClass, NgFor]
 })
 export class DynamicNGBootstrapCheckboxGroupComponent extends DynamicFormControlComponent {
     @Input() formLayout?: DynamicFormLayout;

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/datepicker/dynamic-ng-bootstrap-datepicker.component.html

@@ -23,7 +23,6 @@
            (change)="onChange($event)"
            (focus)="onFocus($event)">
 
-    <div class="input-group-append">
 
         <button class="btn btn-outline-secondary" type="button" (click)="datepicker.toggle()">
 
@@ -32,6 +31,5 @@
 
         </button>
 
-    </div>
 
 </div>

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/dynamic-ng-bootstrap-form-control-container.component.html

@@ -1,4 +1,4 @@
-<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
+<div [class.mb-3]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
      [formGroup]="group"
      [ngClass]="['ng-dynamic-forms-'+model.type.toLowerCase(), getClass('element', 'container'), getClass('grid', 'container')]">
 

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/input/dynamic-ng-bootstrap-input.component.html

@@ -1,10 +1,8 @@
 <div [formGroup]="group" [class.input-group]="model.prefix || model.suffix">
 
-    <div *ngIf="model.prefix" class="input-group-prepend">
-        <span class="input-group-text" [innerHTML]="model.prefix"></span>
-    </div>
+    <span *ngIf="model.prefix" class="input-group-text" [innerHTML]="model.prefix"></span>
 
-    <input *ngIf="model.inputType === 'file'; else maskedInput" class="form-control-file"
+    <input *ngIf="model.inputType === 'file'; else maskedInput" class="form-control"
            [attr.accept]="model.accept"
            [attr.max]="model.max"
            [attr.min]="model.min"
@@ -78,9 +76,7 @@
                (focus)="onFocus($event)"/>
     </ng-template>
 
-    <div *ngIf="model.suffix" class="input-group-append">
-        <span class="input-group-text" [innerHTML]="model.suffix"></span>
-    </div>
+    <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">

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/input/dynamic-ng-bootstrap-input.component.ts

@@ -9,15 +9,16 @@ import {
     DynamicInputModel,
     DynamicFormsCoreModule
 } from "@ng-dynamic-forms/core";
-import { NgxMaskDirective } from "ngx-mask";
+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]
+    imports: [ReactiveFormsModule, NgIf, DynamicFormsCoreModule, NgClass, NgxMaskDirective, NgFor, AsyncPipe],
+    providers: [provideNgxMask()]
 })
 export class DynamicNGBootstrapInputComponent extends DynamicFormControlComponent {
     @Input() formLayout?: DynamicFormLayout;

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/radio-group/dynamic-ng-bootstrap-radio-group.component.html

@@ -1,6 +1,7 @@
 <ng-container [formGroup]="group">
 
-    <div ngbRadioGroup class="btn-group btn-group-toggle" role="radiogroup"
+    <div class="btn-group" role="group"
+         ngDefaultControl
          [formControlName]="model.id"
          [id]="id"
          [ngClass]="getClass('element', 'control')"
@@ -9,10 +10,10 @@
 
         <legend *ngIf="model.legend" [innerHTML]="model.legend"></legend>
 
-        <label *ngFor="let option of model.options$ | async" ngbButtonLabel
+        <label *ngFor="let option of model.options$ | async"
                [ngClass]="[getClass('element', 'option'), getClass('grid', 'option')]">
 
-            <input type="radio" ngbButton
+            <input type="radio"
                    [disabled]="option.disabled"
                    [name]="model.name"
                    [value]="option.value"

projects/ng-dynamic-forms/ui-ng-bootstrap/src/lib/radio-group/dynamic-ng-bootstrap-radio-group.component.ts

@@ -9,14 +9,13 @@ import {
     DynamicRadioGroupModel
 } from "@ng-dynamic-forms/core";
 import { NgClass, NgIf, NgFor, AsyncPipe } from "@angular/common";
-import { NgbButtonsModule } from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
     selector: "dynamic-ng-bootstrap-radio-group",
     templateUrl: "./dynamic-ng-bootstrap-radio-group.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ReactiveFormsModule, NgbButtonsModule, NgClass, NgIf, NgFor, AsyncPipe]
+    imports: [ReactiveFormsModule, NgClass, NgIf, NgFor, AsyncPipe]
 })
 export class DynamicNGBootstrapRadioGroupComponent extends DynamicFormControlComponent {
     @Input() formLayout?: DynamicFormLayout;

projects/ng-dynamic-forms/ui-ngx-bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-dynamic-forms/ui-ngx-bootstrap",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "ngx-bootstrap UI package for NG Dynamic Forms",
   "keywords": [
     "angular",
@@ -30,10 +30,10 @@
     "url": "git+https://github.com/udos86/ng-dynamic-forms.git"
   },
   "peerDependencies": {
-    "@ng-dynamic-forms/core": "^18.0.0",
-    "ngx-mask": "^13.0.0",
-    "bootstrap": "^4.0.0",
-    "ngx-bootstrap": "^8.0.0"
+    "@ng-dynamic-forms/core": "^19.0.0",
+    "ngx-mask": "^16.0.0",
+    "bootstrap": "^5.3.2",
+    "ngx-bootstrap": "^11.0.0"
   },
   "es2015": "./fesm2015/ui-ngx-bootstrap.js",
   "esm2015": "./esm2015/ui-ngx-bootstrap.js",