Add possibility to set ng-templates between controls

angular.json

@@ -22,8 +22,13 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -77,16 +82,26 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.scss"],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -112,7 +127,9 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -141,12 +158,52 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["projects/dynamic-form/tsconfig.lib.json", "projects/dynamic-form/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "projects/dynamic-form/tsconfig.lib.json",
+              "projects/dynamic-form/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "bootstrap-controls": {
+      "root": "projects/bootstrap-controls",
+      "sourceRoot": "projects/bootstrap-controls/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/bootstrap-controls/tsconfig.lib.json",
+            "project": "projects/bootstrap-controls/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/bootstrap-controls/src/test.ts",
+            "tsConfig": "projects/bootstrap-controls/tsconfig.spec.json",
+            "karmaConfig": "projects/bootstrap-controls/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/bootstrap-controls/tsconfig.lib.json",
+              "projects/bootstrap-controls/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
     }
   },
   "defaultProject": "form-renderer-root"
-}
+}

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
     "@ng-bootstrap/ng-bootstrap": "^4.0.1",
+    "angular2-prettyjson": "^3.0.1",
     "bootstrap": "^4.2.1",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",

projects/bootstrap-controls/karma.conf.js

@@ -0,0 +1,31 @@
+// 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-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

projects/bootstrap-controls/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/bootstrap-controls",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

projects/bootstrap-controls/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "bootstrap-controls",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^7.0.0",
+    "@angular/core": "^7.0.0",
+    "bootstrap": "^4.2.1"
+  }
+}

projects/bootstrap-controls/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

projects/bootstrap-controls/src/lib/bootstrap-controls.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BootstrapDropdownComponent, BootstrapTextfieldComponent } from './components';
+
+const controlsComponents = [BootstrapDropdownComponent, BootstrapTextfieldComponent];
+
+@NgModule({
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  declarations: [...controlsComponents],
+  exports: [...controlsComponents],
+  entryComponents: [...controlsComponents]
+})
+export class BootstrapControlsModule {}

projects/bootstrap-controls/src/lib/components/common-styles.scss

@@ -0,0 +1,9 @@
+.label {
+  font-size: 1.25rem;
+}
+
+.asterik::before {
+  color: red;
+  content: '*';
+  margin-right: 8px;
+}

projects/bootstrap-controls/src/lib/components/dropdown/bootstrap-dropdown.component.html

@@ -0,0 +1,19 @@
+<header class="label" *ngIf="label && label !== ''">
+  <span *ngIf="required" class="asterik"></span> <span>{{ label }}</span>
+</header>
+<div (blur)="markAsDirty()" tabindex="0" class="dropdown">
+  <div (click)="toggleDropdown()" class="form-control title">
+    {{ !value ? placeholder : displayOptionValue(value) }}
+  </div>
+  <ul [class.is-opened]="isDropdownOpened" class="dropdown-menu is-closed">
+    <li
+      [class.active]="value === option"
+      (click)="selectOption(option)"
+      *ngFor="let option of options"
+      class="dropdown-item"
+      href="#"
+    >
+      {{ displayOptionValue(option) }}
+    </li>
+  </ul>
+</div>

projects/bootstrap-controls/src/lib/components/dropdown/bootstrap-dropdown.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.is-closed {
+  display: none;
+}
+
+.is-opened {
+  display: block;
+}
+
+.dropdown {
+  .title {
+    cursor: pointer;
+  }
+}
+
+.dropdown-menu {
+  width: 100%;
+  > * {
+    cursor: pointer;
+  }
+}
+
+.dropdown-item:hover {
+  background-color: rgb(192, 145, 145);
+}
+
+.card {
+  margin-bottom: 20px;
+}

projects/dynamic-form/src/lib/components/controls/dropdown/dropdown.component.ts → projects/bootstrap-controls/src/lib/components/dropdown/bootstrap-dropdown.component.ts

@@ -1,23 +1,13 @@
-import {
-  Component,
-  ComponentFactoryResolver,
-  ElementRef,
-  Injector,
-  Input,
-  OnInit,
-  Output,
-  EventEmitter
-} from '@angular/core';
-
-import { AbstractValueAccessor, MakeProvider } from '../../../abstractions';
+import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
+import { AbstractValueAccessor, MakeProvider } from 'dynamic-form';
 
 @Component({
-  selector: 'lib-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
-  providers: [MakeProvider(DropdownComponent)]
+  selector: 'lib-bootstrap-dropdown',
+  templateUrl: './bootstrap-dropdown.component.html',
+  styleUrls: ['./bootstrap-dropdown.component.scss', '../common-styles.scss'],
+  providers: [MakeProvider(BootstrapDropdownComponent)]
 })
-export class DropdownComponent extends AbstractValueAccessor implements OnInit {
+export class BootstrapDropdownComponent extends AbstractValueAccessor implements OnInit {
   private _options = [];
 
   isDropdownOpened = false;
@@ -47,9 +37,7 @@ export class DropdownComponent extends AbstractValueAccessor implements OnInit {
   @Input()
   placeholder: string;
 
-  constructor(
-    injector: Injector,
-  ) {
+  constructor(injector: Injector) {
     super(injector);
   }
 

projects/bootstrap-controls/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './dropdown/bootstrap-dropdown.component';
+export * from './textfield/bootstrap-textfield.component';

projects/bootstrap-controls/src/lib/components/textfield/bootstrap-textfield.component.html

@@ -0,0 +1,28 @@
+<header class="label" *ngIf="label && label !== ''">
+  <span *ngIf="required" class="asterik"></span> <span>{{ label }}</span>
+</header>
+<div class="ms-TextField">
+  <input
+    *ngIf="!multiline"
+    [disabled]="isDisabled"
+    type="text"
+    class="form-control"
+    [(ngModel)]="value"
+    [placeholder]="placeholder"
+    (blur)="markAsDirty()"
+    [disabled]="isDisabled"
+  />
+  <textarea
+    *ngIf="multiline"
+    [disabled]="isDisabled"
+    type="text"
+    class="form-control"
+    [(ngModel)]="value"
+    [placeholder]="placeholder"
+    (blur)="markAsDirty()"
+    [disabled]="isDisabled"
+  ></textarea>
+</div>
+<div class="errorText">
+  <span *ngIf="errorTexts && dirty">{{ buildErrorText() }}</span>
+</div>

projects/bootstrap-controls/src/lib/components/textfield/bootstrap-textfield.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin-bottom: 10px;
+}

projects/bootstrap-controls/src/lib/components/textfield/bootstrap-textfield.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { MakeProvider, AbstractValueAccessor } from 'dynamic-form';
+
+@Component({
+  selector: 'lib-bootstrap-textfield',
+  templateUrl: './bootstrap-textfield.component.html',
+  styleUrls: ['./bootstrap-textfield.component.scss', '../common-styles.scss'],
+  providers: [MakeProvider(BootstrapTextfieldComponent)]
+})
+export class BootstrapTextfieldComponent extends AbstractValueAccessor {
+  @Input()
+  placeholder = '';
+  @Input()
+  type = 'text';
+  @Input()
+  multiline = false;
+
+  setDisabledState(isDisabled: boolean) {
+    console.log(isDisabled);
+    this.isDisabled = isDisabled;
+  }
+}

projects/dynamic-form/src/lib/models/controls/interfaces/base-control.interface.ts → projects/bootstrap-controls/src/lib/interfaces/base-bootstrap-control.interface.ts

@@ -1,6 +1,6 @@
 import { ValidatorFn } from '@angular/forms';
 
-export interface IBaseControl<TValue> {
+export interface IBaseBootstrapControl<TValue> {
   label?: string;
   placeholder?: string;
   required?: boolean;

projects/bootstrap-controls/src/lib/interfaces/bootstrap-dropdown-control.interface.ts

@@ -0,0 +1,6 @@
+import { IBaseBootstrapControl } from './base-bootstrap-control.interface';
+
+export interface IBootstrapDropdownControl<TValue> extends IBaseBootstrapControl<TValue> {
+  options?: TValue[];
+  displayedProperty?: string;
+}

projects/bootstrap-controls/src/lib/interfaces/bootstrap-textfield-control.interface.ts

@@ -0,0 +1,6 @@
+import { IBaseBootstrapControl } from './base-bootstrap-control.interface';
+
+export interface IBootstrapTextfieldControl extends IBaseBootstrapControl<string> {
+  type?: 'text' | 'number';
+  multiline?: boolean;
+}

projects/bootstrap-controls/src/lib/interfaces/index.ts

@@ -0,0 +1,3 @@
+export * from './base-bootstrap-control.interface';
+export * from './bootstrap-dropdown-control.interface';
+export * from './bootstrap-textfield-control.interface';