Carga de componentes dinamicos, estructura formulario por pasos en propuestas de inversion

angular.json

@@ -23,16 +23,14 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": false,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
               "src/assets/scss/material-dashboard.scss",
-              "src/styles.scss",
-              "node_modules/bootstrap-select/dist/css/bootstrap-select.css"
+              "node_modules/bootstrap-select/dist/css/bootstrap-select.css",
+              "node_modules/angular-archwizard/archwizard.css",
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
@@ -100,17 +98,14 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "node_modules/font-awesome/scss/font-awesome.scss",
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
               "src/assets/scss/material-dashboard.scss",
-              "src/styles.scss",
-              "node_modules/bootstrap-select/dist/css/bootstrap-select.css"
+              "node_modules/bootstrap-select/dist/css/bootstrap-select.css",
+              "node_modules/angular-archwizard/archwizard.css",
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
@@ -131,9 +126,7 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         },
         "e2e": {
@@ -149,6 +142,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "frontend-inversiones"
-}
+}

package-lock.json

@@ -2329,6 +2329,14 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-archwizard": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/angular-archwizard/-/angular-archwizard-5.0.0.tgz",
+      "integrity": "sha512-bj+cshnEHKghGXgjiSdyG+Qs3+gp+5/GMzXm3F2QzIESC7kd8KxaXASwTdo4mbXx8UthT43m3gfWrKUD+GPXOQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "angular-bootstrap-md": {
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/angular-bootstrap-md/-/angular-bootstrap-md-8.8.1.tgz",
@@ -6941,8 +6949,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -6953,8 +6960,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7071,8 +7077,7 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7084,7 +7089,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7114,7 +7118,6 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7133,7 +7136,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7223,8 +7225,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7236,7 +7237,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7358,7 +7358,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8357,7 +8356,8 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -8460,7 +8460,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -8490,11 +8491,13 @@
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -8511,6 +8514,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -8602,6 +8606,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -8677,7 +8682,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -8707,6 +8713,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8763,11 +8770,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
@@ -12634,7 +12643,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -12677,7 +12687,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -12688,7 +12699,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -12805,7 +12817,8 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -12817,6 +12830,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -12846,6 +12860,7 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12864,6 +12879,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -12966,6 +12982,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13051,7 +13068,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -13087,6 +13105,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -13106,6 +13125,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -13149,12 +13169,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-inversiones",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,6 +26,7 @@
     "@fortawesome/fontawesome-free": "^5.12.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@types/crypto-js": "^3.1.43",
+    "angular-archwizard": "^5.0.0",
     "angular-bootstrap-md": "^8.8.1",
     "angular-datatables": "^8.0.0",
     "angular-mydatepicker": "^0.3.4",

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { LoginComponent } from "./components/login/login.component";
 import { AuthGuard } from "./services/auth.guard";
 import { Role } from "./models/role";
 import { ConfirmAccountComponent } from "./components/confirm-account/confirm-account.component";
+import { WorkflowGuard } from "./services/investment-proposal-workflow.guard";
 
 const routes: Routes = [
   {
@@ -38,9 +39,10 @@ const routes: Routes = [
     BrowserModule,
     RouterModule.forRoot(routes, {
       useHash: true,
-      onSameUrlNavigation: "reload"
+      //onSameUrlNavigation: "reload"
     })
   ],
-  exports: []
+  exports: [],
+  //providers: [WorkflowGuard]
 })
 export class AppRoutingModule {}

src/app/components/instruments/anc/anc.component.html

@@ -0,0 +1 @@
+ACCIONES NACIONALES

src/app/components/instruments/anc/anc.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-anc",
+  templateUrl: "./anc.component.html"
+})
+export class ANCComponent implements InstrumentComponent {
+  title: string = "Acciones nacionales comunes";
+  @Input() data: any;
+  form: any;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    console.log("init");
+
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_rendencion: ["", Validators.required]
+    });
+  }
+}

src/app/components/instruments/apn/apn.component.html

@@ -0,0 +1 @@
+ACCIONES PREFERENTES NACIONALES

src/app/components/instruments/apn/apn.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-apn",
+  templateUrl: "./apn.component.html"
+})
+export class APNComponent implements InstrumentComponent {
+  title: string = "Acciones preferentes nacionales";
+  @Input() data: any;
+  form: any;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    console.log("init");
+
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_rendencion: ["", Validators.required]
+    });
+  }
+}

src/app/components/instruments/bonos/bonos.component.html

@@ -0,0 +1 @@
+BONOS FORM

src/app/components/instruments/bonos/bonos.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-bonos",
+  templateUrl: "./bonos.component.html"
+})
+export class BonosComponent implements InstrumentComponent {
+  title: string = "Bonos";
+  @Input() data: any;
+  form: any;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    console.log("init");
+
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_rendencion: ["", Validators.required]
+    });
+  }
+}

src/app/components/instruments/cete/cete.component.html

@@ -0,0 +1 @@
+CETE

src/app/components/instruments/cete/cete.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-cete",
+  templateUrl: "./cete.component.html"
+})
+export class CeteComponent implements InstrumentComponent {
+  title: string = "Letes";
+  @Input() data: any;
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log("init");
+  }
+}

src/app/components/instruments/depositos/depositos.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-depositos",
+  templateUrl: "./depositos.component.html"
+})
+export class DepositosComponent implements InstrumentComponent {
+  title: string = "Depósitos a plazos";
+  @Input() data: any;
+  form: any;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    console.log("init");
+
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_rendencion: ["", Validators.required]
+    });
+  }
+}

src/app/components/instruments/lete/lete.component.html

@@ -0,0 +1,209 @@
+<h4 class="card-title">
+  Lete
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="valor_nominal">Valor nominal: </label>
+        <input
+          type="text"
+          formControlName="valor_nominal"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.valor_nominal.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.valor_nominal.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.valor_nominal.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="plazo_dias">Plazo inversión: </label>
+        <input
+          type="text"
+          formControlName="plazo_dias"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.plazo_dias.errors
+          }"
+        />
+        <div *ngIf="submitted && f.plazo_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.plazo_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="casa">Casa: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="casa"
+          [ngClass]="{
+            'is-invalid': submitted && f.cod_tarifa.errors
+          }"
+        >
+          <option *ngFor="let item of casa" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div *ngIf="submitted && f.casa.errors" class="invalid-feedback">
+          <div *ngIf="f.casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="base_dias">Año base: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="base_dias"
+          [ngClass]="{
+            'is-invalid': submitted && f.cod_tarifa.errors
+          }"
+        >
+          <option *ngFor="let item of base_dias" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div *ngIf="submitted && f.base_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.base_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_operacion">Fecha operación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_operacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_operacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_operacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_operacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="fecha_liquidacion">Fecha liquidación: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_liquidacion"
+              (click)="dp1.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp1="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_liquidacion.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_liquidacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_liquidacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_rendencion">Fecha redención: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_rendencion"
+              (click)="dp.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_rendencion.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_rendencion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_rendencion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                    <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

src/app/components/instruments/lete/lete.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-lete",
+  templateUrl: "./lete.component.html"
+})
+export class LeteComponent implements InstrumentComponent {
+  title: string = "Letes";
+  @Input() data: any;
+  form: any;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    console.log("init");
+
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_rendencion: ["", Validators.required]
+    });
+  }
+}

src/app/components/instruments/vcn/vcn.component.html

@@ -0,0 +1 @@
+VCN Form

src/app/components/instruments/vcn/vcn.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+
+@Component({
+  selector: "app-vcn",
+  templateUrl: "./vcn.component.html"
+})
+export class VCNComponent implements InstrumentComponent {
+  title: string = "Valores comerciales negociables";
+  @Input() data: any;
+  form: any;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    console.log("init");
+
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_rendencion: ["", Validators.required]
+    });
+  }
+}

src/app/components/investment-proposals/address/address.component.html

@@ -0,0 +1,234 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-proposals']">
+                  Propuestas de inversión
+                </a>
+              </li>
+              <li class="breadcrumb-item">Nueva</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <br />
+    </div>
+    <br />
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <inv-proposal-navbar></inv-proposal-navbar>
+
+          <div class="card borderless">
+            <div class="card-header card-header-icon card-header-rose">
+              <h4 class="card-title">
+                Información adicional
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <form
+                  class="form-auth-small ng-untouched ng-pristine ng-valid"
+                  [formGroup]="investmentProposalForm"
+                >
+                  <div class="row">
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="categoria_tarifaria"
+                          >Tipo de mercado:
+                        </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="categoria_tarifaria"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.cod_tarifa.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of categoria_tarifaria"
+                            [value]="item.key"
+                          >
+                            {{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.categoria_tarifaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.categoria_tarifaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="form-group">
+                        <label for="categoria_tarifaria">Emisores: </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="categoria_tarifaria"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.cod_tarifa.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of categoria_tarifaria"
+                            [value]="item.key"
+                          >
+                            {{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.categoria_tarifaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.categoria_tarifaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="categoria_tarifaria"
+                          >Calificadora de riesgo:
+                        </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="categoria_tarifaria"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.cod_tarifa.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of categoria_tarifaria"
+                            [value]="item.key"
+                          >
+                            {{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.categoria_tarifaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.categoria_tarifaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <label for="categoria_tarifaria"
+                          >Calificación de riesgo:
+                        </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="categoria_tarifaria"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.cod_tarifa.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of categoria_tarifaria"
+                            [value]="item.key"
+                          >
+                            {{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.categoria_tarifaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.categoria_tarifaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="row">
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="categoria_tarifaria">Tipo Tasa: </label>
+
+                        <textarea
+                          rows="2"
+                          class="form-control"
+                          name="categoria_tarifaria"
+                        ></textarea>
+                        <div
+                          *ngIf="submitted && f.categoria_tarifaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.categoria_tarifaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="categoria_tarifaria">Tipo Tasa: </label>
+
+                        <textarea
+                          rows="2"
+                          class="form-control"
+                          name="categoria_tarifaria"
+                        ></textarea>
+                        <div
+                          *ngIf="submitted && f.categoria_tarifaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.categoria_tarifaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div #testOutlet></div>
+                  </div>
+                  <br />
+                  <div class="form-group text-center space-20">
+                    <button
+                      class="btn btn-default center-component margin-right"
+                      (click)="goToPrevious(workForm)"
+                    >
+                      Anterior
+                    </button>
+                    <button
+                      class="btn btn-primary center-component margin-right"
+                      (click)="goToNext(personalForm)"
+                    >
+                      Siguiente
+                    </button>
+                  </div>
+
+                  <!-- [disabled]="!investmentProposalForm.valid"
+                    <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/address/address.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { Address } from "@app/models/investment-proposal-form";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+@Component({
+  selector: "mt-wizard-address",
+  templateUrl: "./address.component.html"
+})
+export class AddressComponent implements OnInit {
+  title: string = "Formulario propuesta de inversión";
+  address: Address;
+  form: any;
+
+  investmentProposalForm: FormGroup;
+  submitted: boolean = false;
+  role_number: any;
+
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private formDataService: FormInvestmentProposalService
+  ) {}
+
+  ngOnInit() {
+    this.address = this.formDataService.getAddress();
+    console.log("Address feature loaded!");
+    this.investmentProposalForm = this.formBuilder.group({
+      name: ["", Validators.required],
+      address: ["", Validators.required],
+      city: ["", Validators.required],
+      country: ["", Validators.required],
+      contactName: ["", Validators.required],
+      contactNumber: ["", Validators.required],
+      categoria_tarifaria: []
+    });
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setAddress(this.address);
+    return true;
+  }
+
+  goToPrevious(form: any) {
+    if (this.save(form)) {
+      // Navigate to the work page
+      this.router.navigate(["/work"]);
+    }
+  }
+
+  goToNext(form: any) {
+    if (this.save(form)) {
+      // Navigate to the result page
+      this.router.navigate(["/result"]);
+    }
+  }
+}

src/app/components/investment-proposals/general-info/general-info.component.html

@@ -0,0 +1,290 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-proposals']">
+                  Propuestas de inversión
+                </a>
+              </li>
+              <li class="breadcrumb-item">Nueva</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <br />
+    </div>
+    <br />
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <inv-proposal-navbar [activeLink]="general"></inv-proposal-navbar>
+
+          <div class="card borderless">
+            <div class="card-header card-header-icon card-header-rose">
+              <h4 class="card-title">
+                Propuesta de inversión
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <form
+                  class="form-auth-small ng-untouched ng-pristine ng-valid"
+                  [formGroup]="investmentProposalForm"
+                >
+                  <div class="row">
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="asunto">Asunto: </label>
+                        <input
+                          type="text"
+                          formControlName="asunto"
+                          class="form-control"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.asunto.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.asunto.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.asunto.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="form-group">
+                        <label for="codigo">Codigo: </label>
+                        <input
+                          type="text"
+                          formControlName="codigo"
+                          class="form-control"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.codigo.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.codigo.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.codigo.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="name">Nombre: </label>
+                        <input
+                          type="text"
+                          formControlName="name"
+                          class="form-control"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.name.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.name.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.name.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <label for="date">Fecha: </label>
+                        <input
+                          type="text"
+                          formControlName="date"
+                          class="form-control"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.date.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.date.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.date.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="tipo_tasa">Tipo Tasa: </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="tipo_tasa"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.cod_tarifa.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of instruments"
+                            [value]="item.key"
+                            >{{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.tipo_tasa.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.tipo_tasa.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="form-group">
+                        <label for="tipo_renta">Tipo Renta: </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="tipo_renta"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.tipo_renta.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of instruments"
+                            [value]="item.key"
+                            >{{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.tipo_renta.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.tipo_renta.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="form-group">
+                        <label for="instrumentos">Instrumentos: </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="instrumentos"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.instrumentos.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of instruments"
+                            [value]="item.key"
+                            >{{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.instrumentos.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.instrumentos.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="col-lg-6 col-sm-12 pr-xl-5">
+                      <div class="form-group">
+                        <label for="empresa">Empresa: </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="empresa"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.empresa.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of instruments"
+                            [value]="item.key"
+                            >{{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.empresa.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.empresa.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="form-group">
+                        <label for="pais">País: </label>
+
+                        <select
+                          (change)="onInstrumentChange($event)"
+                          class="custom-select"
+                          formControlName="pais"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.pais.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of instruments"
+                            [value]="item.key"
+                            [selected]="item.key == general.pais"
+                            >{{ item.value }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.pais.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.pais.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div #testOutlet></div>
+                  </div>
+                  <br />
+                  <div class="form-group text-center space-20">
+                    <button
+                      class="btn btn-primary center-component margin-right"
+                      [disabled]="!investmentProposalForm.valid"
+                      (click)="goToNext(investmentProposalForm)"
+                    >
+                      Siguiente
+                    </button>
+                  </div>
+
+                  <!-- 
+                    <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/general-info/general-info.component.scss

@@ -0,0 +1 @@
+

src/app/components/investment-proposals/general-info/general-info.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { InvestmentProposalGeneralInfoComponent } from "./general-info.component";
+
+describe("InvestmentProposalGeneralInfoComponent", () => {
+  let component: InvestmentProposalGeneralInfoComponent;
+  let fixture: ComponentFixture<InvestmentProposalGeneralInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [InvestmentProposalGeneralInfoComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InvestmentProposalGeneralInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/investment-proposals/general-info/general-info.component.ts

@@ -0,0 +1,137 @@
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentRef,
+  Type
+} from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import Swal from "sweetalert2";
+import * as CryptoJS from "crypto-js";
+import { LeteComponent } from "@app/components/instruments/lete/lete.component";
+
+import { GeneralInfo } from "@app/models/investment-proposal-form";
+import { Router } from "@angular/router";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+
+@Component({
+  selector: "app-new-investment-proposal",
+  templateUrl: "./general-info.component.html",
+  styleUrls: ["./general-info.component.scss"]
+})
+export class InvestmentProposalGeneralInfoComponent implements OnInit {
+  @ViewChild("testOutlet", { read: ViewContainerRef, static: true })
+  testOutlet: ViewContainerRef | undefined;
+  general: GeneralInfo;
+  form: any;
+
+  title: string = "Formulario propuesta de inversión";
+  investmentProposalForm: FormGroup;
+  submitted: boolean = false;
+  role_number: any;
+
+  instruments = [
+    //{ key: "AI", value: "Acciones internacionales" },
+    { key: "ANC", value: "Acciones nacionales comunes" },
+    { key: "AP", value: "Acciones preferentes nacionales" },
+    { key: "BONO", value: "Bonos" },
+    { key: "LETE", value: "Letes" },
+    //{ key: "CETE", value: "Cete" },
+    //{ key: "CDI", value: "Certificados de inversión" },
+    //{ key: "ETF", value: "ETF" },
+    { key: "DP", value: "Depósitos a plazo" },
+    //{ key: "EB", value: "Euro bonos" },
+    //{ key: "FI", value: "Fondos de inversión" },
+    //{ key: "FU", value: "Futuros" },
+    //{ key: "NCTP", value: "NCTP" },
+    //{ key: "NE", value: "Nota estructurada" },
+    //{ key: "OP", value: "Opciones" },
+    //{ key: "PB", value: "Papel bursátil" },
+    //{ key: "PE", value: "Préstamo empresarial" },
+    //{ key: "PP", value: "Préstamo personal" },
+    //{ key: "RV", value: "Reporto de ventas" },
+    //{ key: "RC", value: "Reporto de compras" },
+    { key: "VCN", value: "Valores comerciales negociables" }
+    //{ key: "TI", value: "Titulización" }
+  ];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private formDataService: FormInvestmentProposalService
+  ) {}
+
+  ngOnInit() {
+    this.general = this.formDataService.getPersonal();
+
+    if (Object.values(this.general).every(x => x === null || x === "")) {
+      this.investmentProposalForm = this.formBuilder.group({
+        asunto: ["", Validators.required],
+        codigo: ["", Validators.required],
+        name: ["", Validators.required],
+        date: ["", Validators.required],
+        tipo_tasa: ["", Validators.required],
+        tipo_renta: ["", Validators.required],
+        empresa: ["", Validators.required],
+        pais: ["", Validators.required],
+        instrumentos: ["", Validators.required]
+      });
+    } else {
+      this.investmentProposalForm = this.formBuilder.group({
+        asunto: this.general.asunto,
+        codigo: this.general.codigo,
+        name: this.general.name,
+        date: this.general.date,
+        tipo_tasa: this.general.tipo_tasa,
+        tipo_renta: this.general.tipo_renta,
+        empresa: this.general.empresa,
+        pais: this.general.pais,
+        instrumentos: this.general.instrumentos
+      });
+    }
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+    console.log(this.investmentProposalForm.value);
+    this.formDataService.setGeneralInfo(this.investmentProposalForm.value);
+    return true;
+  }
+
+  goToNext(form: any) {
+    if (this.save(form)) {
+      console.log("all good");
+      // Navigate to the work page
+      this.router.navigate(["/work"]);
+    }
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  onInstrumentChange(event: any) {
+    let instrumentComponent = event.target.value + "Component";
+    //console.log(instrumentComponent);
+    //https://stackblitz.com/angular/kbayapnxprb?file=src%2Fapp%2Fapp.component.ts
+    /*this.dynamicComponentLoader.getComponentFactory <
+      instrumentComponent >
+      event.target.value.subscribe({
+        next: componentFactory => {
+          this.testOutlet.remove();
+          if (!this.testOutlet) {
+            return;
+          }
+
+          const ref = this.testOutlet.createComponent(componentFactory);
+          ref.changeDetectorRef.detectChanges();
+        },
+        error: err => {
+          console.warn(err);
+        }
+      });*/
+  }
+}

src/app/components/investment-proposals/instrument/instrument.component.ts

@@ -0,0 +1,3 @@
+export interface InstrumentComponent {
+  data: any;
+}

src/app/components/investment-proposals/instrument/instrument.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, ViewContainerRef } from "@angular/core";
+
+@Directive({
+  selector: "[instrument-host]"
+})
+export class InstrumentDirective {
+  constructor(public viewContainerRef: ViewContainerRef) {}
+}

src/app/components/investment-proposals/investment-proposals.component.html

@@ -15,7 +15,7 @@
           </nav>
           <a
             class="btn btn-primary"
-            [routerLink]="['/investment-proposals/new']"
+            [routerLink]="['/investment-proposals/general-info']"
           >
             Nuevo registro
           </a>

src/app/components/investment-proposals/new-investment-proposal/new-investment-proposal.component.html

@@ -1,222 +0,0 @@
-<h2 class="floating-title">{{ title }}</h2>
-
-<div class="main-content">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-12 align-right">
-        <div class="align-container">
-          <nav aria-label="breadcrumb">
-            <ol class="breadcrumb">
-              <li class="breadcrumb-item">
-                <a [routerLink]="['/']">Dashboard</a>
-              </li>
-              <li class="breadcrumb-item">
-                <a [routerLink]="['/investment-proposals']">
-                  Propuestas de inversión
-                </a>
-              </li>
-              <li class="breadcrumb-item">Nueva</li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-      <br />
-    </div>
-    <br />
-    <div class="row justify-content-center">
-      <div class="col-12">
-        <div class="align-container">
-          <div class="card">
-            <div class="card-header card-header-icon card-header-rose">
-              <div class="card-icon"><i class="material-icons">map</i></div>
-              <h4 class="card-title">
-                Nueva propuesta de inversión -
-                <small class="category">Complete la información</small>
-              </h4>
-            </div>
-            <div class="card-body">
-              <div class="align-container">
-                <form
-                  class="form-auth-small ng-untouched ng-pristine ng-valid"
-                  [formGroup]="investmentProposalForm"
-                  (ngSubmit)="createOrganization()"
-                >
-                  <div class="row">
-                    <div class="col-xl-4 col-lg-6 col-sm-12 pr-xl-5">
-                      <div class="form-group">
-                        <label for="name">Asunto: </label>
-                        <input
-                          type="text"
-                          formControlName="name"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.name.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.name.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.name.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-
-                      <div class="form-group">
-                        <label for="country">Monto inversión: </label>
-                        <input
-                          type="text"
-                          formControlName="country"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.country.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.country.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.country.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-
-                      <div class="form-group">
-                        <label for="city">Ingresos esperados: </label>
-                        <input
-                          type="text"
-                          formControlName="city"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.city.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.city.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.city.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-xl-4 col-lg-6 col-sm-12 pr-xl-5">
-                      <div class="form-group">
-                        <label for="contactName">Precio: </label>
-                        <input
-                          type="text"
-                          formControlName="contactName"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.contactName.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.contactName.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.contactName.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-
-                      <div class="form-group">
-                        <label for="contactNumber">Nombre: </label>
-                        <input
-                          type="text"
-                          formControlName="contactNumber"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.contactNumber.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.contactNumber.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.contactNumber.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-
-                      <div class="form-group">
-                        <label for="name">Rendimiento: </label>
-                        <input
-                          type="text"
-                          formControlName="name"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.name.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.name.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.name.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-xl-4 col-lg-6 col-sm-12">
-                      <div class="form-group">
-                        <label for="country">Fecha: </label>
-                        <input
-                          type="text"
-                          formControlName="country"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.country.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.country.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.country.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-
-                      <div class="form-group">
-                        <label for="city">Plazo: </label>
-                        <input
-                          type="text"
-                          formControlName="city"
-                          class="form-control"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.city.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.city.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.city.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <br />
-                  <button class="btn btn-primary">
-                    Guardar propuesta de inversión
-                  </button>
-                  <!--<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

src/app/components/investment-proposals/new-investment-proposal/new-investment-proposal.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewInvestmentProposalComponent } from './new-investment-proposal.component';
-
-describe('NewInvestmentProposalComponent', () => {
-  let component: NewInvestmentProposalComponent;
-  let fixture: ComponentFixture<NewInvestmentProposalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NewInvestmentProposalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NewInvestmentProposalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/investment-proposals/new-investment-proposal/new-investment-proposal.component.ts

@@ -1,69 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
-import Swal from "sweetalert2";
-import * as CryptoJS from "crypto-js";
-
-@Component({
-  selector: "app-new-investment-proposal",
-  templateUrl: "./new-investment-proposal.component.html",
-  styleUrls: ["./new-investment-proposal.component.scss"]
-})
-export class NewInvestmentProposalComponent implements OnInit {
-  title: string = "Nueva propuesta de inversión";
-  investmentProposalForm: FormGroup;
-  submitted: boolean = false;
-  role_number: any;
-
-  constructor(private formBuilder: FormBuilder) {}
-
-  ngOnInit() {
-    this.investmentProposalForm = this.formBuilder.group({
-      name: ["", Validators.required],
-      address: ["", Validators.required],
-      city: ["", Validators.required],
-      country: ["", Validators.required],
-      contactName: ["", Validators.required],
-      contactNumber: ["", Validators.required]
-    });
-  }
-
-  get f() {
-    return this.investmentProposalForm.controls;
-  }
-
-  createOrganization() {
-    this.submitted = true;
-
-    // stop here if form is invalid
-    if (this.investmentProposalForm.invalid) {
-      return;
-    }
-
-    /*this.orgService.createOrganization(
-      {
-        name: this.f.name.value,
-        address: this.f.address.value,
-        city: this.f.city.value,
-        country: this.f.country.value,
-        contactName: this.f.contactName.value,
-        contactNumber: this.f.contactNumber.value,
-        assets: [""],
-      }
-    )
-      .subscribe(success => {
-        if (success) {
-          Swal.fire({
-            allowOutsideClick: false,
-            type: 'success',
-            showCancelButton: false,
-            title: 'Exito',
-            confirmButtonText: 'El registro ha sido guardado'
-          }).then((result) => {
-            if (result.value) {
-              window.location.href = "#/organizations";
-            }
-          });
-        }
-      });*/
-  }
-}

src/app/components/investment-proposals/personal/personal.component.html

@@ -0,0 +1,35 @@
+<form #personalForm="ngForm" class="editForm" novalidate>
+    <div class="tab-pane fade in active">
+        <h4 class="head text-center">{{title}}</h4>
+        <br/>
+        <div class='row'>
+            <div class='col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8'>
+                <div class="row">
+                    <div class='col-xs-12 col-sm-6'>
+                        <div class="form-group">
+                            <label class="control-label" for="firstname">First Name</label>  
+                            <input class="form-control input-md" #firstname="ngModel" required id="firstname" name="firstname" type="text" placeholder="First Name" [(ngModel)]="personal.firstName">   
+                            <div class="alert alert-danger" [hidden]="firstname.valid">First Name is required</div>
+                        </div>
+                    </div>
+                    <div class='col-xs-12 col-sm-6'>
+                        <div class="form-group">
+                            <label class="control-label" for="lastname">Last Name</label>  
+                            <input class="form-control input-md" #lastname="ngModel" required id="lastname" name="lastname" type="text" placeholder="Last Name" [(ngModel)]="personal.lastName">
+                            <div class="alert alert-danger" [hidden]="lastname.valid">Last Name is required</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label" for="email">Email</label>
+                    <input class="form-control input-md" #email="ngModel" required pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$" id="email" name="email" type="text" placeholder="Email" [(ngModel)]="personal.email">
+                    <div class="alert alert-danger" [hidden]="email.valid">Email is required and must be valid</div>
+                </div>
+                    
+                <div class="form-group text-center">
+                    <button class="btn btn-success btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="goToNext(personalForm)"> Next <span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span></button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/components/investment-proposals/personal/personal.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+
+//import { Personal } from "@app/models/investment-proposal-form";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+
+@Component({
+  selector: "mt-wizard-personal",
+  templateUrl: "./personal.component.html"
+})
+export class PersonalComponent implements OnInit {
+  title = "Please tell us about yourself.";
+  //personal: Personal;
+  form: any;
+
+  constructor(
+    private router: Router,
+    private formDataService: FormInvestmentProposalService
+  ) {}
+
+  ngOnInit() {
+    //this.personal = this.formDataService.getPersonal();
+    console.log("Personal feature loaded!");
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    //this.formDataService.setPersonal(this.personal);
+    return true;
+  }
+
+  goToNext(form: any) {
+    //if (this.save(form)) {
+    if (true) {
+      // Navigate to the work page
+      this.router.navigate(["/work"]);
+    }
+  }
+}

src/app/components/investment-proposals/result/result.component.html

@@ -0,0 +1,56 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-proposals']">
+                  Propuestas de inversión
+                </a>
+              </li>
+              <li class="breadcrumb-item">Nueva</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <br />
+    </div>
+    <br />
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <inv-proposal-navbar></inv-proposal-navbar>
+
+          <div class="card borderless">
+            <div class="card-header card-header-icon card-header-rose">
+              <h4 class="card-title">
+                Resumen de la propuesta
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <div class="text-center">
+                  <button
+                    class="btn btn-success center-component"
+                    [disabled]="!isFormValid"
+                    (click)="submit()"
+                  >
+                    Guardar propuesta
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/result/result.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input } from "@angular/core";
+
+import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+
+@Component({
+  selector: "mt-wizard-result",
+  templateUrl: "./result.component.html"
+})
+export class ResultComponent implements OnInit {
+  title = "Thanks for staying tuned!";
+  @Input() formData: InvestmentProposalForm;
+  isFormValid: boolean = false;
+
+  constructor(private formDataService: FormInvestmentProposalService) {}
+
+  ngOnInit() {
+    this.formData = this.formDataService.getFormData();
+    this.isFormValid = this.formDataService.isFormValid();
+    console.log("Result feature loaded!");
+  }
+
+  submit() {
+    alert("Excellent Job!");
+    this.formData = this.formDataService.resetFormData();
+    this.isFormValid = false;
+  }
+}

src/app/components/investment-proposals/work/work.component.html

@@ -0,0 +1,48 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-proposals']">
+                  Propuestas de inversión
+                </a>
+              </li>
+              <li class="breadcrumb-item">Nueva</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <br />
+    </div>
+    <br />
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <inv-proposal-navbar></inv-proposal-navbar>
+
+          <div class="card borderless">
+            <div class="card-header card-header-icon card-header-rose">
+              <h4 class="card-title">
+                Instrumento
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <ng-template instrument-host></ng-template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/work/work.component.ts

@@ -0,0 +1,91 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  ViewChild,
+  ComponentFactoryResolver
+} from "@angular/core";
+import { Router } from "@angular/router";
+
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Instrument } from "@app/models/instrument";
+import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
+import { InstrumentDirective } from "../instrument/instrument.directive";
+import { InstrumentComponent } from "../instrument/instrument.component";
+import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
+
+@Component({
+  selector: "mt-wizard-work",
+  templateUrl: "./work.component.html"
+  /*template: `
+    <div>
+      <h2>TEST</h2>
+      
+    </div>
+  `*/
+})
+export class WorkComponent implements OnInit {
+  title = "Formulario propuesta de inversión";
+  workType: string;
+  form: any;
+  @Input() ads: Instrument[];
+  currentAdIndex = -1;
+  @ViewChild(InstrumentDirective, { static: true })
+  adHost: InstrumentDirective;
+  interval: any;
+  @Input() formData: InvestmentProposalForm;
+
+  constructor(
+    private router: Router,
+    private formDataService: FormInvestmentProposalService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private instrumentService: InvestmentProposalWorkflowService
+  ) {}
+
+  ngOnInit() {
+    this.formData = this.formDataService.getFormData();
+    console.log("form data:");
+    console.log(this.formData);
+    this.ads = this.instrumentService.getInstruments();
+    this.loadComponent();
+    //this.workType = this.formDataService.getWork();
+  }
+
+  loadComponent() {
+    this.currentAdIndex = (this.currentAdIndex + 2) % this.ads.length;
+    const adItem = this.ads[this.currentAdIndex];
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+      adItem.component
+    );
+    console.log(adItem.component);
+
+    const viewContainerRef = this.adHost.viewContainerRef;
+    viewContainerRef.clear();
+
+    const componentRef = viewContainerRef.createComponent(componentFactory);
+    (<InstrumentComponent>componentRef.instance).data = adItem.data;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.workType);
+    return true;
+  }
+
+  goToPrevious(form: any) {
+    if (this.save(form)) {
+      // Navigate to the personal page
+      this.router.navigate(["/investment-proposals/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    if (this.save(form)) {
+      // Navigate to the address page
+      this.router.navigate(["/address"]);
+    }
+  }
+}

src/app/components/investments/investments.component.html

@@ -13,10 +13,6 @@
               <li class="breadcrumb-item">Inversiones</li>
             </ol>
           </nav>
-
-          <a class="btn btn-primary" href="#">
-            Nuevo registro
-          </a>
         </div>
       </div>
 

src/app/components/login/login.component.ts

@@ -1,29 +1,34 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-import { AuthService } from '@app/services/auth2.service';
-import Swal from 'sweetalert2';
+import { Component, OnInit } from "@angular/core";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { Router } from "@angular/router";
+import { AuthService } from "@app/services/auth2.service";
+import Swal from "sweetalert2";
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  selector: "app-login",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.scss"]
 })
 export class LoginComponent implements OnInit {
-
   loginForm: FormGroup;
-  submitted:boolean = false;
+  submitted: boolean = false;
 
-  constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router) { }
+  constructor(
+    private authService: AuthService,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {}
 
   ngOnInit() {
     this.loginForm = this.formBuilder.group({
-      email: ['', [Validators.required, Validators.email]],
-      password: ['', Validators.required]
+      email: ["", [Validators.required, Validators.email]],
+      password: ["", Validators.required]
     });
   }
 
-  get f() { return this.loginForm.controls; }
+  get f() {
+    return this.loginForm.controls;
+  }
 
   login() {
     this.submitted = true;
@@ -34,32 +39,38 @@ export class LoginComponent implements OnInit {
     }
 
     Swal.fire({
-      
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
     });
     Swal.showLoading();
 
-    this.authService.login(
-      {
+    this.authService
+      .login({
         email: this.f.email.value,
         password: this.f.password.value
-      }
-    )
-    .subscribe(success => {
-      if (success) {
-        window.location.href="#/dashboard";
-      }
-      else {
-        Swal.fire({
-      
-        })  
-      }
-    },(err) => {
-      Swal.fire({
-      
-      });
-    });
+      })
+      .subscribe(
+        success => {
+          if (success) {
+            window.location.href = "#/dashboard";
+          } else {
+            Swal.fire({
+              icon: "warning",
+              title: "No se pudo auntenticar",
+              text: "Email o contraseña incorrecta"
+            });
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al autenticar",
+            text: err.message
+          });
+        }
+      );
   }
-
 }
 
 /* import { Component, OnInit } from '@angular/core';
@@ -150,4 +161,4 @@ export class LoginComponent implements OnInit {
   }
 
 }
-*/
+*/

src/app/components/plugins/dynamic-component-loader/dynamic-component-loader.module.ts

@@ -0,0 +1,68 @@
+import {
+  ANALYZE_FOR_ENTRY_COMPONENTS,
+  ModuleWithProviders,
+  NgModule,
+  NgModuleFactoryLoader,
+  SystemJsNgModuleLoader,
+  Type
+} from '@angular/core';
+import { ROUTES } from '@angular/router';
+
+import { DynamicComponentLoader } from './dynamic-component-loader.service';
+import {
+  DYNAMIC_COMPONENT,
+  DYNAMIC_COMPONENT_MANIFESTS,
+  DYNAMIC_MODULE,
+  DynamicComponentManifest
+} from './dynamic-component-manifest';
+
+@NgModule()
+export class DynamicComponentLoaderModule {
+  static forRoot(manifests: DynamicComponentManifest[]): ModuleWithProviders {
+    return {
+      ngModule: DynamicComponentLoaderModule,
+      providers: [
+        DynamicComponentLoader,
+        { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
+        // provider for Angular CLI to analyze
+        { provide: ROUTES, useValue: manifests, multi: true },
+        // provider for DynamicComponentLoader to analyze
+        { provide: DYNAMIC_COMPONENT_MANIFESTS, useValue: manifests }
+      ]
+    };
+  }
+  static forModule(manifest: DynamicComponentManifest): ModuleWithProviders {
+    return {
+      ngModule: DynamicComponentLoaderModule,
+      providers: [
+        {
+          provide: ANALYZE_FOR_ENTRY_COMPONENTS,
+          useValue: manifest,
+          multi: true
+        },
+        // provider for @angular/router to parse
+        { provide: ROUTES, useValue: manifest, multi: true },
+        // provider for DynamicComponentLoader to analyze
+        { provide: DYNAMIC_MODULE, useValue: manifest }
+      ]
+    };
+  }
+  static forChild(component: Type<any>): ModuleWithProviders {
+    return {
+      ngModule: DynamicComponentLoaderModule,
+      providers: [
+        {
+          provide: ANALYZE_FOR_ENTRY_COMPONENTS,
+          useValue: component,
+          multi: true
+        },
+        // provider for @angular/router to parse
+        { provide: ROUTES, useValue: [], multi: true },
+        // provider for DynamicComponentLoader to analyze
+        { provide: DYNAMIC_COMPONENT, useValue: component }
+      ]
+    };
+  }
+}
+
+export { DynamicComponentManifest } from './dynamic-component-manifest';

src/app/components/plugins/dynamic-component-loader/dynamic-component-loader.service.ts

@@ -0,0 +1,172 @@
+import {
+  ComponentFactory,
+  Inject,
+  Injectable,
+  Injector,
+  NgModuleFactory,
+  NgModuleFactoryLoader,
+  Compiler
+} from '@angular/core';
+import { from, Observable, throwError, of,  } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
+import {
+  DynamicComponentManifest,
+  DYNAMIC_COMPONENT,
+  DYNAMIC_COMPONENT_MANIFESTS,
+  DYNAMIC_MODULE
+} from './dynamic-component-manifest';
+
+@Injectable()
+export class DynamicComponentLoader {
+  constructor(
+    @Inject(DYNAMIC_COMPONENT_MANIFESTS)
+    private manifests: DynamicComponentManifest[],
+    private loader: NgModuleFactoryLoader,
+    private injector: Injector,
+    private compiler: Compiler
+  ) {}
+
+  /**
+   * Get the value as an observable
+   *
+   * @template T
+   * @param {(T | NgModuleFactory<T> | Promise<T> | Observable<T>)} value
+   * @returns
+   * @memberof LibConfigService
+   */
+  private _wrapIntoObservable<T>(value: T | NgModuleFactory<T> | Promise<T> | Observable<T>) {
+    if (value instanceof Observable) {
+      return value;
+    } else if (value instanceof Promise) {
+      return from(value);
+    } else {
+      return of(value);
+    }
+  }
+
+  /**
+   *  Retrieve a ComponentFactory, based on the specified componentId
+   *  (defined in the DynamicComponentManifest array).
+   *
+   * @template T
+   * @param {string} componentId
+   * @param {Injector} [injector]
+   * @returns {Observable<ComponentFactory<T>>}
+   * @memberof DynamicComponentLoader
+   */
+  getComponentFactory<T>(
+    componentId: string,
+    injector?: Injector
+  ): Observable<ComponentFactory<T>> {
+    const manifest = this.manifests.find(m => m.componentId === componentId);
+    if (!manifest) {
+      return throwError(
+        `DynamicComponentLoader: Unknown componentId "${componentId}"`
+      );
+    }
+
+    const path = manifest.loadChildren;
+
+    if (!path) {
+      throw new Error(`${componentId} unknown!`);
+    }
+
+    // Check the path type
+    if (path instanceof Function) {
+      return this._wrapIntoObservable(path()).pipe(mergeMap((t: any) => {
+        let moduleFactory = null;
+        const offlineMode = this.compiler instanceof Compiler;
+        //  true means AOT enalbed compiler (Prod build), false means JIT enabled compiler (Dev build)
+        moduleFactory = offlineMode ? t : this.compiler.compileModuleSync(t);
+        return this.loadFactory<T>(moduleFactory, componentId, injector);
+      }));
+    } else {
+      return from(this.load<T>(path, componentId, injector));
+    }
+  }
+
+  /**
+   * Get the instance of the component factory
+   *
+   * @template T
+   * @param {string} path
+   * @param {string} componentId
+   * @param {Injector} [injector]
+   * @returns {Promise<ComponentFactory<T>>}
+   * @memberof DynamicComponentLoader
+   */
+  async load<T>(
+    path: string,
+    componentId: string,
+    injector?: Injector
+  ): Promise<ComponentFactory<T>> {
+    const ngModuleFactory = await this.loader.load(path);
+    return await this.loadFactory<T>(ngModuleFactory, componentId, injector);
+  }
+
+  /**
+   * Load the factory object
+   *
+   * @template T
+   * @param {NgModuleFactory<any>} ngModuleFactory
+   * @param {string} componentId
+   * @param {Injector} [injector]
+   * @returns {Promise<ComponentFactory<T>>}
+   * @memberof DynamicComponentLoader
+   */
+  loadFactory<T>(
+    ngModuleFactory: NgModuleFactory<any>,
+    componentId: string,
+    injector?: Injector
+  ): Promise<ComponentFactory<T>> {
+    const moduleRef = ngModuleFactory.create(injector || this.injector);
+    const dynamicComponentType = moduleRef.injector.get(
+      DYNAMIC_COMPONENT,
+      null
+    );
+    if (!dynamicComponentType) {
+      const dynamicModule: DynamicComponentManifest = moduleRef.injector.get(
+        DYNAMIC_MODULE,
+        null
+      );
+
+      if (!dynamicModule) {
+        throw new Error(
+          'DynamicComponentLoader: Dynamic module for' +
+            ` componentId "${componentId}" does not contain` +
+            ' DYNAMIC_COMPONENT or DYNAMIC_MODULE as a provider.'
+        );
+      }
+      if (dynamicModule.componentId !== componentId) {
+        throw new Error(
+          'DynamicComponentLoader: Dynamic module for' +
+            `${componentId} does not match manifest.`
+        );
+      }
+
+      const path = dynamicModule.loadChildren;
+
+      if (!path) {
+        throw new Error(`${componentId} unknown!`);
+      }
+
+      if (path instanceof Function) {
+        return this._wrapIntoObservable(path()).pipe(mergeMap((t: any) => {
+          let moduleFactory = null;
+          const offlineMode = this.compiler instanceof Compiler;
+          //  true means AOT enalbed compiler (Prod build), false means JIT enabled compiler (Dev build)
+          moduleFactory = offlineMode ? t : this.compiler.compileModuleSync(t);
+          return this.loadFactory<T>(moduleFactory, componentId, injector);
+        })).toPromise();
+      } else {
+        return this.load<T>(path, componentId, injector);
+      }
+    }
+
+    return Promise.resolve(
+      moduleRef.componentFactoryResolver.resolveComponentFactory<T>(
+        dynamicComponentType
+      )
+    );
+  }
+}

src/app/components/plugins/dynamic-component-loader/dynamic-component-manifest.ts

@@ -0,0 +1,20 @@
+import { InjectionToken } from '@angular/core';
+
+export const DYNAMIC_COMPONENT = new InjectionToken<any>('DYNAMIC_COMPONENT');
+
+export const DYNAMIC_MODULE = new InjectionToken<any>('DYNAMIC_MODULE');
+
+export const DYNAMIC_COMPONENT_MANIFESTS = new InjectionToken<any>(
+  'DYNAMIC_COMPONENT_MANIFESTS'
+);
+
+export interface DynamicComponentManifest {
+  /** Unique identifier, used in the application to retrieve a ComponentFactory. */
+  componentId: string;
+
+  /** Unique identifier, used internally by Angular. */
+  path: string;
+
+  /** Path to component module. */
+  loadChildren: string | any; // Support for angular 8 style module imports
+}

src/app/components/plugins/navbar-inv-proposals/navbar-inv-proposals.html

@@ -0,0 +1,47 @@
+<div class="board-inner" id="status-buttons">
+  <ul class="nav nav-tabs" id="myTab">
+    <div class="liner"></div>
+
+    <!-- circular user icon -->
+    <li>
+      <a
+        routerLink="/investment-proposals/general-info"
+        data-toggle="tab"
+        title="general"
+        [ngClass]="activeLink == 'general' ? 'active' : ''"
+      >
+        <span class="round-tabs one">
+          <i class="material-icons">post_add</i>
+        </span>
+      </a>
+    </li>
+
+    <!-- circular tasks icon -->
+    <li>
+      <a routerLink="/work" data-toggle="tab" title="work">
+        <span class="round-tabs two">
+          <i class="material-icons">business_center</i>
+        </span>
+      </a>
+    </li>
+
+    <!-- circular home icon -->
+    <li>
+      <a routerLink="/address" data-toggle="tab" title="address">
+        <span class="round-tabs three">
+          <i class="material-icons">library_books</i>
+        </span>
+      </a>
+    </li>
+
+    <!-- circular ok icon -->
+    <li>
+      <a routerLink="/result" data-toggle="tab" title="completed">
+        <span class="round-tabs four">
+          <i class="material-icons">check_box</i>
+        </span>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+</div>

src/app/components/plugins/navbar-inv-proposals/navbar-inv-proposals.scss

@@ -0,0 +1,212 @@
+@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 700");
+/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
+.nav-tabs {
+  position: relative;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+div.board-inner {
+  background: #fff;
+}
+
+p.narrow {
+  width: 60%;
+  margin: 10px auto;
+}
+
+.liner {
+  height: 2px;
+  background: #ddd;
+  position: absolute;
+  width: 75%;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  top: 50%;
+  z-index: 1;
+}
+
+.nav-tabs > li.active > a {
+  color: #555555;
+  cursor: default;
+  /* background-color: #ffffff; */
+  border: 0;
+  border-bottom-color: transparent;
+}
+
+span.round-tabs {
+  width: 70px;
+  height: 70px;
+  line-height: 65px;
+  display: inline-block;
+  border-radius: 100px;
+  background: white;
+  z-index: 2;
+  position: absolute;
+  text-align: center;
+  font-size: 25px;
+}
+
+span.round-tabs.one {
+  color: rgb(34, 194, 34);
+  border: 2px solid rgb(34, 194, 34);
+}
+
+a.active span.round-tabs.one {
+  border: 2px solid #00a000;
+  background-color: #22c222;
+  color: #fff;
+}
+
+span.round-tabs.two {
+  color: #febe29;
+  border: 2px solid #febe29;
+}
+
+a.active span.round-tabs.two {
+  border: 2px solid #fece19;
+  background-color: #febe29;
+  color: #fff;
+}
+
+span.round-tabs.three {
+  color: #3e5e9a;
+  border: 2px solid #3e5e9a;
+}
+
+a.active span.round-tabs.three {
+  border: 2px solid #3e5e9a;
+  background-color: #3f5e9a;
+  color: #fff;
+}
+
+span.round-tabs.four {
+  color: #f1685e;
+  border: 2px solid #f1685e;
+}
+
+a.active span.round-tabs.four {
+  border: 2px solid #f0685e;
+  background-color: #f1685e;
+  color: #fff;
+}
+
+span.round-tabs.five {
+  color: #999;
+  border: 2px solid #999;
+}
+
+a.active span.round-tabs.five {
+  color: #fff;
+}
+
+.nav-tabs > li.active > a span.round-tabs {
+  background: #fafafa;
+}
+.nav-tabs > li {
+  /*width: 20%;*/
+  width: 25%;
+  float: left;
+  margin-bottom: -1px;
+  display: block;
+  position: relative;
+}
+/*li.active:before {
+    content: " ";
+    position: absolute;
+    left: 45%;
+    opacity:0;
+    margin: 0 auto;
+    bottom: -2px;
+    border: 10px solid transparent;
+    border-bottom-color: #fff;
+    z-index: 1;
+    transition:0.2s ease-in-out;
+}*/
+.nav-tabs > li:after {
+  content: " ";
+  position: absolute;
+  left: 45%;
+  opacity: 0;
+  margin: 0 auto;
+  bottom: 0px;
+  border: 5px solid transparent;
+  border-bottom-color: #ddd;
+  transition: 0.1s ease-in-out;
+}
+.nav-tabs > li.active:after {
+  content: " ";
+  position: absolute;
+  left: 45%;
+  opacity: 1;
+  margin: 0 auto;
+  bottom: 0px;
+  border: 10px solid transparent;
+  border-bottom-color: #ddd;
+}
+.nav-tabs > li a {
+  width: 70px;
+  height: 70px;
+  margin: 20px auto;
+  border-radius: 100%;
+  padding: 0;
+  display: block;
+}
+.nav-tabs > li a:hover {
+  background: transparent;
+}
+
+.tab-content .tab-pane {
+  position: relative;
+  padding-top: 50px;
+}
+.tab-content .head {
+  font-family: "Roboto Condensed", sans-serif;
+  font-size: 25px;
+  text-transform: uppercase;
+  padding-bottom: 10px;
+}
+.btn-outline-rounded {
+  padding: 10px 40px;
+  margin: 20px 0;
+  border: 2px solid transparent;
+  border-radius: 25px;
+}
+
+.btn.green {
+  background-color: #5cb85c;
+  /*border: 2px solid #5cb85c;*/
+  color: #ffffff;
+}
+
+@media (max-width: 585px) {
+  .board {
+    width: 90%;
+    height: auto !important;
+  }
+  span.round-tabs {
+    font-size: 16px;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+  }
+  .tab-content .head {
+    font-size: 20px;
+  }
+  .nav-tabs > li a {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .nav-tabs > li.active:after {
+    content: " ";
+    position: absolute;
+    left: 35%;
+  }
+
+  .btn-outline-rounded {
+    padding: 12px 20px;
+  }
+}

src/app/components/plugins/navbar-inv-proposals/navbar-inv-proposals.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit, OnChanges } from "@angular/core";
+
+@Component({
+  selector: "inv-proposal-navbar",
+  templateUrl: "./navbar-inv-proposals.html",
+  styleUrls: ["./navbar-inv-proposals.scss"]
+})
+export class NavbarInvProposalComponent implements OnInit, OnChanges {
+  @Input() activeLink: string;
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log(this.activeLink);
+  }
+  ngOnChanges() {
+    console.log(this.activeLink);
+  }
+}

src/app/components/users/users.component.ts

@@ -32,7 +32,11 @@ export class UsersComponent implements OnInit {
   role_number: any;
 
   constructor(private userService: UserService) {
-    Swal.fire({});
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
     Swal.showLoading();
   }
 
@@ -45,7 +49,11 @@ export class UsersComponent implements OnInit {
         this.dataSource.sort = this.sort;
       },
       err => {
-        Swal.fire({});
+        Swal.fire({
+          icon: "error",
+          title: "Error en el servidor",
+          text: err.message
+        });
       }
     );
 

src/app/layouts/admin/admin.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from "@angular/router";
 import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { AngularMyDatePickerModule } from "angular-mydatepicker";
+import { HttpClientModule, HttpClient } from "@angular/common/http";
 
 import { AdminLayoutRoutes } from "./admin.routing";
 import { DashboardComponent } from "../../components/dashboard/dashboard.component";
@@ -11,13 +12,16 @@ import { ProfileComponent } from "../../components/profile/profile.component";
 
 import { PluginsModule } from "../../components/plugins/plugins.module";
 
+import { MatDialogModule } from "@angular/material";
+import { BrowserModule } from "@angular/platform-browser";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+
 import { MatTableExporterModule } from "mat-table-exporter";
 import {
   MatButtonModule,
   MatInputModule,
   MatRippleModule,
   MatFormFieldModule,
-  MatTooltipModule,
   MatSelectModule,
   MatExpansionModule,
   MatTableModule,
@@ -29,25 +33,45 @@ import { MatPasswordStrengthModule } from "@angular-material-extensions/password
 import { BreadcrumbModule, IconsModule } from "angular-bootstrap-md";
 import { TermsComponent } from "@app/components/terms/terms.component";
 import { InvestmentProposalsComponent } from "@app/components/investment-proposals/investment-proposals.component";
-import { NewInvestmentProposalComponent } from "@app/components/investment-proposals/new-investment-proposal/new-investment-proposal.component";
+import { InvestmentProposalGeneralInfoComponent } from "@app/components/investment-proposals/general-info/general-info.component";
 
 import { InvestmentsComponent } from "@app/components/investments/investments.component";
 import { ArbitrationsComponent } from "@app/components/arbitrations/arbitrations.component";
 import { PerformancesComponent } from "@app/components/performances/performances.component";
 
+import { ArchwizardModule } from "angular-archwizard";
+
+/*
 import { UsersComponent } from "@app/components/users/users.component";
 import { NewUserComponent } from "@app/components/users/new-user/new-user.component";
 import { CountriesComponent } from "@app/components/catalogs/countries/countries.component";
 import { CompaniesComponent } from "@app/components/catalogs/companies/companies.component";
-import { NewCompanyComponent } from "@app/components/catalogs/companies/new-company/new-company.component";
-import { EmittersComponent } from "../../components/catalogs/emitters/emitters.component";
-import { NewEmitterComponent } from "../../components/catalogs/emitters/new-emitter/new-emitter.component";
-import { NewCountryComponent } from "../../components/catalogs/countries/new-country/new-country.component";
+import { NewCompanyComponent } from "@app/components/catalogs/companies/new-company/new-company.component"; */
+/* Shared Service */
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
+import { PersonalComponent } from "@app/components/investment-proposals/personal/personal.component";
+import { AddressComponent } from "@app/components/investment-proposals/address/address.component";
+import { WorkComponent } from "@app/components/investment-proposals/work/work.component";
+import { ResultComponent } from "@app/components/investment-proposals/result/result.component";
+import { NavbarInvProposalComponent } from "@app/components/plugins/navbar-inv-proposals/navbar-inv-proposals";
+import { LeteComponent } from "@app/components/instruments/lete/lete.component";
+import { CeteComponent } from "@app/components/instruments/cete/cete.component";
+import { VCNComponent } from "@app/components/instruments/vcn/vcn.component";
+import { BonosComponent } from "@app/components/instruments/bonos/bonos.component";
+import { DepositosComponent } from "@app/components/instruments/depositos/depositos.component";
+import { ANCComponent } from "@app/components/instruments/anc/anc.component";
+import { APNComponent } from "@app/components/instruments/apn/apn.component";
+
+import { InstrumentDirective } from "@app/components/investment-proposals/instrument/instrument.directive";
+import { WorkflowGuard } from "@app/services/investment-proposal-workflow.guard";
+// This array defines which "componentId" maps to which lazy-loaded module.
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule.forChild(AdminLayoutRoutes),
+
     FormsModule,
     ReactiveFormsModule,
     MatButtonModule,
@@ -55,7 +79,6 @@ import { NewCountryComponent } from "../../components/catalogs/countries/new-cou
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
-    MatTooltipModule,
     MatExpansionModule,
     MatTableModule,
     MatPaginatorModule,
@@ -64,25 +87,52 @@ import { NewCountryComponent } from "../../components/catalogs/countries/new-cou
     MatTableExporterModule,
     PluginsModule,
     AngularMyDatePickerModule,
-    MatPasswordStrengthModule
+    MatPasswordStrengthModule,
+    HttpClientModule,
+    ArchwizardModule
+  ],
+  providers: [
+    WorkflowGuard,
+    {
+      provide: FormInvestmentProposalService,
+      useClass: FormInvestmentProposalService
+    },
+    {
+      provide: InvestmentProposalWorkflowService,
+      useClass: InvestmentProposalWorkflowService
+    }
   ],
   declarations: [
     DashboardComponent,
     ProfileComponent,
     TermsComponent,
     InvestmentProposalsComponent,
-    NewInvestmentProposalComponent,
+    InvestmentProposalGeneralInfoComponent,
     InvestmentsComponent,
     ArbitrationsComponent,
     PerformancesComponent,
-    UsersComponent,
-    NewUserComponent,
-    CountriesComponent,
-    CompaniesComponent,
-    NewCompanyComponent,
-    EmittersComponent,
-    NewEmitterComponent,
-    NewCountryComponent
+    PersonalComponent,
+    AddressComponent,
+    WorkComponent,
+    ResultComponent,
+    NavbarInvProposalComponent,
+    LeteComponent,
+    CeteComponent,
+    VCNComponent,
+    BonosComponent,
+    DepositosComponent,
+    ANCComponent,
+    APNComponent,
+    InstrumentDirective
+  ],
+  entryComponents: [
+    LeteComponent,
+    CeteComponent,
+    VCNComponent,
+    BonosComponent,
+    DepositosComponent,
+    ANCComponent,
+    APNComponent
   ]
 })
 export class AdminModule {}

src/app/layouts/admin/admin.routing.ts

@@ -7,20 +7,17 @@ import { AuthGuard } from "@app/services/auth.guard";
 import { TermsComponent } from "@app/components/terms/terms.component";
 import { InvestmentsComponent } from "@app/components/investments/investments.component";
 import { InvestmentProposalsComponent } from "@app/components/investment-proposals/investment-proposals.component";
-import { NewInvestmentProposalComponent } from "@app/components/investment-proposals/new-investment-proposal/new-investment-proposal.component";
+import { InvestmentProposalGeneralInfoComponent } from "@app/components/investment-proposals/general-info/general-info.component";
 
 import { ArbitrationsComponent } from "@app/components/arbitrations/arbitrations.component";
 import { PerformancesComponent } from "@app/components/performances/performances.component";
 
-import { UsersComponent } from "@app/components/users/users.component";
-import { NewUserComponent } from "@app/components/users/new-user/new-user.component";
-import { CountriesComponent } from "@app/components/catalogs/countries/countries.component";
-import { CompaniesComponent } from "@app/components/catalogs/companies/companies.component";
-import { NewCompanyComponent } from "@app/components/catalogs/companies/new-company/new-company.component";
-import { EmittersComponent } from '@app/components/catalogs/emitters/emitters.component';
-import { NewEmitterComponent } from '@app/components/catalogs/emitters/new-emitter/new-emitter.component';
-import { NewCountryComponent } from '@app/components/catalogs/countries/new-country/new-country.component';
-
+import { PersonalComponent } from "@app/components/investment-proposals/personal/personal.component";
+import { WorkComponent } from "@app/components/investment-proposals/work/work.component";
+import { AddressComponent } from "@app/components/investment-proposals/address/address.component";
+import { ResultComponent } from "@app/components/investment-proposals/result/result.component";
+import { WorkflowGuard } from "@app/services/investment-proposal-workflow.guard";
+import { NgModule } from "@angular/core";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -44,8 +41,8 @@ export const AdminLayoutRoutes: Routes = [
     }
   },
   {
-    path: "investment-proposals/new",
-    component: NewInvestmentProposalComponent,
+    path: "investment-proposals/general-info",
+    component: InvestmentProposalGeneralInfoComponent,
     //canActivate: [AuthGuard],
     data: {
       title: "Nueva propuestas de inversión",
@@ -83,6 +80,7 @@ export const AdminLayoutRoutes: Routes = [
       roles: [2, 3]
     }
   },
+  /*
   {
     path: "users",
     component: UsersComponent,
@@ -123,45 +121,24 @@ export const AdminLayoutRoutes: Routes = [
       breadcrumb: "Nueva empresa",
       roles: [3]
     }
-  },
+  },*/
   {
-    path: "emitters",
-    component: EmittersComponent,
-    //canActivate: [AuthGuard],
-    data: {
-      title: "Emisores",
-      breadcrumb: "Emisores",
-      roles: [3]
-    }
+    path: "personal",
+    component: PersonalComponent
   },
   {
-    path: "emitters/new",
-    component: NewEmitterComponent,
-    //canActivate: [AuthGuard],
-    data: {
-      title: "Nuevo Emisor",
-      breadcrumb: "Nuevo Emisor",
-      roles: [3]
-    }
+    path: "work",
+    component: WorkComponent,
+    canActivate: [WorkflowGuard]
   },
   {
-    path: "countries",
-    component: CountriesComponent,
-    //canActivate: [AuthGuard],
-    data: {
-      title: "Paises",
-      breadcrumb: "Paises",
-      roles: [3]
-    }
+    path: "address",
+    component: AddressComponent,
+    canActivate: [WorkflowGuard]
   },
   {
-    path: "countries/new",
-    component:  NewCountryComponent,
-    //canActivate: [AuthGuard],
-    data: {
-      title: "Nuevo País",
-      breadcrumb: "Nuevo País",
-      roles: [3]
-    }
-  },
+    path: "result",
+    component: ResultComponent,
+    canActivate: [WorkflowGuard]
+  }
 ];

src/app/models/instrument.ts

@@ -0,0 +1,5 @@
+import { Type } from "@angular/core";
+
+export class Instrument {
+  constructor(public component: Type<any>, public data: any) {}
+}

src/app/models/investment-proposal-form.ts

@@ -0,0 +1,52 @@
+export class InvestmentProposalForm {
+  asunto: string = "";
+  codigo: string = "";
+  name: string = "";
+  date: string = "";
+  tipo_tasa: string = "";
+  tipo_renta: string = "";
+  empresa: string = "";
+  pais: string = "";
+  instrumentos: string = "";
+  work: string = "";
+  street: string = "";
+  city: string = "";
+  state: string = "";
+  zip: string = "";
+
+  clear() {
+    this.asunto = "";
+    this.codigo = "";
+    this.name = "";
+    this.date = "";
+    this.tipo_tasa = "";
+    this.tipo_renta = "";
+    this.empresa = "";
+    this.pais = "";
+    this.instrumentos = "";
+    this.work = "";
+    this.street = "";
+    this.city = "";
+    this.state = "";
+    this.zip = "";
+  }
+}
+
+export class GeneralInfo {
+  asunto: string = "";
+  codigo: string = "";
+  name: string = "";
+  date: string = "";
+  tipo_tasa: string = "";
+  tipo_renta: string = "";
+  empresa: string = "";
+  pais: string = "";
+  instrumentos: string = "";
+}
+
+export class Address {
+  street: string = "";
+  city: string = "";
+  state: string = "";
+  zip: string = "";
+}

src/app/models/investment-proposal-workflow.ts

@@ -0,0 +1,6 @@
+export const STEPS = {
+  general: "investment-proposals/general-info",
+  work: "work",
+  address: "address",
+  result: "result"
+};

src/app/services/form-investment-proposal.service.ts

@@ -0,0 +1,112 @@
+import { Injectable } from "@angular/core";
+
+import {
+  InvestmentProposalForm,
+  GeneralInfo,
+  Address
+} from "@app/models/investment-proposal-form";
+import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
+import { STEPS } from "@app/models/investment-proposal-workflow";
+
+@Injectable({
+  providedIn: "root"
+})
+export class FormInvestmentProposalService {
+  private formData: InvestmentProposalForm = new InvestmentProposalForm();
+  private isPersonalFormValid: boolean = false;
+  private isWorkFormValid: boolean = false;
+  private isAddressFormValid: boolean = false;
+
+  constructor(private workflowService: InvestmentProposalWorkflowService) {}
+
+  getPersonal(): GeneralInfo {
+    // Return the GeneralInfo data
+    var personal: GeneralInfo = {
+      asunto: this.formData.asunto,
+      codigo: this.formData.codigo,
+      name: this.formData.name,
+      date: this.formData.date,
+      tipo_tasa: this.formData.tipo_tasa,
+      tipo_renta: this.formData.tipo_renta,
+      empresa: this.formData.empresa,
+      pais: this.formData.pais,
+      instrumentos: this.formData.instrumentos
+    };
+    return personal;
+  }
+
+  setGeneralInfo(data: GeneralInfo) {
+    // Update the Personal data only when the Personal Form had been validated successfully
+    this.isPersonalFormValid = true;
+    this.formData.asunto = data.asunto;
+    this.formData.codigo = data.codigo;
+    this.formData.name = data.name;
+    this.formData.date = data.date;
+    this.formData.tipo_tasa = data.tipo_tasa;
+    this.formData.tipo_renta = data.tipo_renta;
+    this.formData.empresa = data.empresa;
+    this.formData.pais = data.pais;
+    this.formData.instrumentos = data.instrumentos;
+
+    // Validate Personal Step in Workflow
+    this.workflowService.validateStep(STEPS.general);
+  }
+
+  getWork(): string {
+    // Return the work type
+    return this.formData.work;
+  }
+
+  setWork(data: string) {
+    // Update the work type only when the Work Form had been validated successfully
+    this.isWorkFormValid = true;
+    this.formData.work = data;
+    // Validate Work Step in Workflow
+    this.workflowService.validateStep(STEPS.work);
+  }
+
+  getAddress(): Address {
+    // Return the Address data
+    var address: Address = {
+      street: this.formData.street,
+      city: this.formData.city,
+      state: this.formData.state,
+      zip: this.formData.zip
+    };
+    return address;
+  }
+
+  setAddress(data: Address) {
+    // Update the Address data only when the Address Form had been validated successfully
+    this.isAddressFormValid = true;
+    this.formData.street = data.street;
+    this.formData.city = data.city;
+    this.formData.state = data.state;
+    this.formData.zip = data.zip;
+    // Validate Address Step in Workflow
+    this.workflowService.validateStep(STEPS.address);
+  }
+
+  getFormData(): InvestmentProposalForm {
+    // Return the entire Form Data
+    return this.formData;
+  }
+
+  resetFormData(): InvestmentProposalForm {
+    // Reset the workflow
+    this.workflowService.resetSteps();
+    // Return the form data after all this.* members had been reset
+    this.formData.clear();
+    this.isPersonalFormValid = this.isWorkFormValid = this.isAddressFormValid = false;
+    return this.formData;
+  }
+
+  isFormValid() {
+    // Return true if all forms had been validated successfully; otherwise, return false
+    return (
+      this.isPersonalFormValid &&
+      this.isWorkFormValid &&
+      this.isAddressFormValid
+    );
+  }
+}

src/app/services/investment-proposal-workflow.guard.ts

@@ -0,0 +1,56 @@
+import { Injectable, Input } from "@angular/core";
+import {
+  CanActivate,
+  Router,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  CanLoad,
+  Route
+} from "@angular/router";
+import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
+import { InvestmentProposalWorkflowService } from "./investment-proposal-workflow.service";
+import { FormInvestmentProposalService } from "./form-investment-proposal.service";
+
+@Injectable({
+  providedIn: "root"
+})
+export class WorkflowGuard implements CanActivate {
+  @Input() formData: InvestmentProposalForm;
+
+  constructor(
+    private router: Router,
+    private workflowService: InvestmentProposalWorkflowService,
+    private formService: FormInvestmentProposalService
+  ) {
+    this.formData = this.formService.getFormData();
+
+    console.log(this.formData);
+  }
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): boolean {
+    let path: string = route.routeConfig.path;
+
+    return this.verifyWorkFlow(path);
+  }
+
+  verifyWorkFlow(path): boolean {
+    console.log("Entered '" + path + "' path.");
+    // If any of the previous steps is invalid, go back to the first invalid step
+    let firstPath = this.workflowService.getFirstInvalidStep(path);
+    if (firstPath.length > 0) {
+      console.log(
+        "Redirected to '" +
+          firstPath +
+          "' path which it is the first invalid step."
+      );
+      let url = `/${firstPath}`;
+      this.router.navigate([url]);
+      return false;
+    }
+
+    return true;
+  }
+}

src/app/services/investment-proposal-workflow.service.ts

@@ -0,0 +1,91 @@
+import { Injectable } from "@angular/core";
+
+import { STEPS } from "@app/models/investment-proposal-workflow";
+import { Instrument } from "@app/models/instrument";
+import { LeteComponent } from "@app/components/instruments/lete/lete.component";
+import { CeteComponent } from "@app/components/instruments/cete/cete.component";
+import { VCNComponent } from "@app/components/instruments/vcn/vcn.component";
+import { BonosComponent } from "@app/components/instruments/bonos/bonos.component";
+import { DepositosComponent } from "@app/components/instruments/depositos/depositos.component";
+import { ANCComponent } from "@app/components/instruments/anc/anc.component";
+import { APNComponent } from "@app/components/instruments/apn/apn.component";
+
+@Injectable({
+  providedIn: "root"
+})
+export class InvestmentProposalWorkflowService {
+  workflow = [
+    { step: STEPS.general, valid: true }, // test purposes
+    { step: STEPS.work, valid: false },
+    { step: STEPS.address, valid: false },
+    { step: STEPS.result, valid: false }
+  ];
+
+  getInstruments() {
+    return [
+      new Instrument(LeteComponent, { key: "LETE", name: "Lete" }),
+      new Instrument(CeteComponent, { key: "CETE", name: "Cete" }),
+      new Instrument(VCNComponent, {
+        key: "VCN",
+        name: "Valores comerciales negociables"
+      }),
+      new Instrument(BonosComponent, { key: "BONOS", name: "Bonos" }),
+      new Instrument(DepositosComponent, {
+        key: "DAP",
+        name: "Depósitos a plazo"
+      }),
+      new Instrument(ANCComponent, {
+        key: "ANC",
+        name: "Acciones nacionales comunes"
+      }),
+      new Instrument(APNComponent, {
+        key: "APN",
+        name: "Acciones preferentes nacionales"
+      })
+    ];
+  }
+
+  validateStep(step: string) {
+    // If the state is found, set the valid field to true
+    var found = false;
+    console.log("validateStep");
+
+    for (var i = 0; i < this.workflow.length && !found; i++) {
+      console.log(i);
+      console.log(this.workflow[i]);
+      if (this.workflow[i].step === step) {
+        console.log("enter this");
+        found = this.workflow[i].valid = true;
+      }
+    }
+    console.log(this.workflow);
+  }
+
+  resetSteps() {
+    console.log("reset steps");
+    // Reset all the steps in the Workflow to be invalid
+    this.workflow.forEach(element => {
+      element.valid = false;
+    });
+  }
+
+  getFirstInvalidStep(step: string): string {
+    // If all the previous steps are validated, return blank
+    // Otherwise, return the first invalid step
+    console.log(this.workflow);
+    var found = false;
+    var valid = true;
+    var redirectToStep = "";
+    for (var i = 0; i < this.workflow.length && !found && valid; i++) {
+      let item = this.workflow[i];
+      if (item.step === step) {
+        found = true;
+        redirectToStep = "";
+      } else {
+        valid = item.valid;
+        redirectToStep = item.step;
+      }
+    }
+    return redirectToStep;
+  }
+}

src/assets/scss/core/variables/_bootstrap-material-design.scss

@@ -13,8 +13,8 @@ $icon-color: rgba($black, 0.5) !default;
 
 // --------------------
 // inputs
-$mdb-input-placeholder-color: #AAAAAA !default;
-$mdb-input-underline-color: #D2D2D2 !default;
+$mdb-input-placeholder-color: #aaaaaa !default;
+$mdb-input-underline-color: #d2d2d2 !default;
 
 $mdb-input-font-size-base: 14px !default;
 $mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
@@ -24,7 +24,7 @@ $bmd-bmd-label-static-size-ratio: 75 / 100 !default;
 $bmd-help-size-ratio: 75 / 100 !default;
 
 $bmd-form-control-bg-repeat-y: no-repeat !default;
-$bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default;
+$bmd-form-control-bg-position: center bottom, center calc(100% - 0px) !default;
 $bmd-form-control-bg-size: 0 100%, 100% 100% !default;
 $bmd-form-control-bg-size-active: 100% 100%, 100% 100% !default;
 
@@ -39,23 +39,22 @@ $bmd-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is
 $bmd-label-top-margin-lg: 1rem !default; // 16px
 
 $bmd-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
-$bmd-label-top-margin-sm: .75rem !default; // 12px
+$bmd-label-top-margin-sm: 0.75rem !default; // 12px
 
 $text-disabled: #a8a8a8 !default;
 $background-disabled: #eaeaea !default;
 
-$margin-base:               1.071rem !default;
-
+$margin-base: 1.071rem !default;
 
 // Checkboxes
 $bmd-checkbox-size: 1.25rem !default;
 $bmd-checkbox-animation-ripple: 500ms !default;
 $bmd-checkbox-animation-check: 0.3s !default;
 $bmd-checkbox-checked-color: $white !default;
-$bmd-checkbox-label-padding: .3125rem !default; // 5px
+$bmd-checkbox-label-padding: 0.3125rem !default; // 5px
 $checkboxes-text-color: $mdb-input-placeholder-color !default;
 
-$bmd-checkbox-border-size: .0625rem !default;
+$bmd-checkbox-border-size: 0.0625rem !default;
 $bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;
 $bmd-checkbox-border-color-disabled: $gray-lighter !default; //#bdbdbd !default;
 
@@ -63,12 +62,11 @@ $bmd-checkbox-border-color-disabled: $gray-lighter !default; //#bdbdbd !default;
 $mdb-toggle-label-color: $mdb-label-color !default;
 
 // Variables for datetimepicker //
-$padding-default-vertical:     10px !default;
-$medium-pale-bg:             #F1EAE0 !default;
-$pale-bg:                    #F9F7F3 !default;
-
+$padding-default-vertical: 10px !default;
+$medium-pale-bg: #f1eae0 !default;
+$pale-bg: #f9f7f3 !default;
 
-$font-color:                 #66615b !default;
+$font-color: #66615b !default;
 
 // $brand-default:     #cecece !default;
 // $brand-primary:     $purple !default;
@@ -78,21 +76,21 @@ $font-color:                 #66615b !default;
 // $brand-info:        $cyan !default;
 // $brand-rose:        $pink !default;
 
-$black-color:           #3C4858 !default;
+$black-color: #3c4858 !default;
 
 // Dropdowns
 
-$dropdown-item-padding-y: .625rem;
+$dropdown-item-padding-y: 0.625rem;
 $dropdown-item-padding-x: 1.25rem;
 $dropdown-header-padding-y: 0.1875rem;
-$bmd-dropdown-margin-y: .3125rem !default;
+$bmd-dropdown-margin-y: 0.3125rem !default;
 $bmd-dropdown-header-color: #777 !default;
 $bmd-dropdown-link-color: #333 !default;
 
 // Switches
-$bmd-switch-label-padding: .3125rem !default; // 5px
+$bmd-switch-label-padding: 0.3125rem !default; // 5px
 $bmd-switch-width: 2.125rem !default; // 34px
-$bmd-switch-height: .875rem !default; // 14px
+$bmd-switch-height: 0.875rem !default; // 14px
 $bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px)
 
 $bmd-switch-handle-checked-bg: $brand-primary !default;
@@ -110,25 +108,25 @@ $bmd-popover-background: rgba(101, 101, 101, 0.9) !default;
 $bmd-popover-color: #ececec !default;
 
 // Radio:
-$bmd-radio-border: .0625rem !default; // 1px
+$bmd-radio-border: 0.0625rem !default; // 1px
 $bmd-radio-size: 1rem !default;
 $bmd-radio-ripple-offset: 1em !default;
-$bmd-radio-label-padding: .3125rem !default; // 5px
+$bmd-radio-label-padding: 0.3125rem !default; // 5px
 
 $bmd-radio-color-off: $bmd-label-color-inner-focus !default;
 $bmd-radio-color-on: $brand-primary !default;
 $bmd-radio-color-disabled: $gray-lighter; //
 $bmd-radio-color-disabled-inverse: rgba(
   $white,
-  0.30
+  0.3
 ); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
 
 $white-color: #fff !default;
 $navbar-color: #555 !default;
 $pills-color: $navbar-color !default;
-$black-color: #3C4858 !default;
+$black-color: #3c4858 !default;
 $link-color: $brand-primary;
-$white-transparent: rgba($white-color, .8);
+$white-transparent: rgba($white-color, 0.8);
 $transparent: transparent;
 
 //Popovers
@@ -173,7 +171,7 @@ $btn-lg-line-height: 1.3333333 !default;
 //Font-weight
 $font-weight-light: 300 !default;
 $font-weight-default: 400 !default;
-$font-weight-bold:    500 !default;
+$font-weight-bold: 500 !default;
 $font-weight-extra-bold: 700 !default;
 $font-weight-ultra-bold: 900 !default;
 
@@ -191,30 +189,29 @@ $bmd-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
 $bmd-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
 $bmd-animation-curve-default: $bmd-animation-curve-fast-out-slow-in !default;
 $bmd-animation-dropdown-caret: 150ms !default;
-$general-transition-time:  300ms !default;
+$general-transition-time: 300ms !default;
 
-$slow-transition-time:           370ms !default;
-$fast-transition-time:           150ms !default;
+$slow-transition-time: 370ms !default;
+$fast-transition-time: 150ms !default;
 
-$transition-linear:                                   linear !default;
-$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
-$transition-bezier-rotating-card:         cubic-bezier(0.34, 1.45, 0.7, 1) !default;
-$transition-ease:           ease 0s;
+$transition-linear: linear !default;
+$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-bezier-rotating-card: cubic-bezier(0.34, 1.45, 0.7, 1) !default;
+$transition-ease: ease 0s;
 
 //variables for social
-$social-facebook: 			#3b5998;
-$social-twitter: 			#55acee;
-$social-pinterest: 			#cc2127;
-$social-google: 			#dd4b39;
-$social-linkedin: 			#0976b4;
-$social-dribbble: 			#ea4c89;
-$social-github: 			#333333;
-$social-youtube: 			#e52d27;
-$social-instagram: 		    #125688;
-$social-reddit: 			#ff4500;
-$social-tumblr: 			#35465c;
-$social-behance: 			#1769ff;
-
+$social-facebook: #3b5998;
+$social-twitter: #55acee;
+$social-pinterest: #cc2127;
+$social-google: #dd4b39;
+$social-linkedin: #0976b4;
+$social-dribbble: #ea4c89;
+$social-github: #333333;
+$social-youtube: #e52d27;
+$social-instagram: #125688;
+$social-reddit: #ff4500;
+$social-tumblr: #35465c;
+$social-behance: #1769ff;
 
 // Variables for checkboxes
 

src/assets/scss/material-dashboard.scss

@@ -15,47 +15,43 @@
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 */
- @import "~@angular/material/prebuilt-themes/indigo-pink.css";
-
- @import "core/variables";
- @import "core/mixins";
- @import "~bootstrap/scss/bootstrap";
-
-
- @import "core/buttons";
- @import "core/checkboxes";
- @import "core/radios";
- @import "core/forms";
- @import "core/input-group";
-
-
- // Core Components
- @import "core/images";
- @import "core/navbar";
- @import "core/alerts";
- @import "core/type";
- @import "core/tabs";
- @import "core/tooltip";
- @import "core/popover";
- @import "core/dropdown";
- @import "core/togglebutton";
- @import "core/ripples";
- @import "core/footers";
- @import "core/sidebar-and-main-panel";
- @import "core/fixed-plugin";
- @import "core/tables";
- @import "core/misc";
-
-
- //plugin scss
- @import "core/plugins/animate";
- @import "core/plugins/chartist";
- @import "core/plugins/perfect-scrollbar";
- @import "core/responsive";
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+@import "core/variables";
+@import "core/mixins";
+@import "~bootstrap/scss/bootstrap";
+
+@import "core/buttons";
+@import "core/checkboxes";
+@import "core/radios";
+@import "core/forms";
+@import "core/input-group";
+
+// Core Components
+@import "core/images";
+@import "core/navbar";
+@import "core/alerts";
+@import "core/type";
+@import "core/tabs";
+@import "core/tooltip";
+@import "core/popover";
+@import "core/dropdown";
+@import "core/togglebutton";
+@import "core/ripples";
+@import "core/footers";
+@import "core/sidebar-and-main-panel";
+@import "core/fixed-plugin";
+@import "core/tables";
+@import "core/misc";
+
+//plugin scss
+@import "core/plugins/animate";
+@import "core/plugins/chartist";
+@import "core/plugins/perfect-scrollbar";
+@import "core/responsive";
 
 @import "core/angular-modal.scss";
 
-
 // Defaults
 
 .sky-skin {
@@ -89,8 +85,10 @@
 
 .custom-select {
   background-color: #fff;
-  padding-left: 20px;
+  padding: 5px;
   background-position: right 20px center;
+  height: calc(1.3em + 0.875rem + 2px);
+  font-size: 0.8rem;
 }
 
 .card-img-absolute {
@@ -170,13 +168,19 @@ table {
   text-align: right;
 }
 
+.form-control {
+  height: 30px;
+}
 
-.was-validated .form-control:invalid, .form-control.is-invalid {
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
   border-bottom: 1px solid #f44336;
 }
 
-
-.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid, input.form-control:invalid, input.form-control.is-invalid {
+.was-validated textarea.form-control:invalid,
+textarea.form-control.is-invalid,
+input.form-control:invalid,
+input.form-control.is-invalid {
   background-size: 18px;
 }
 
@@ -192,7 +196,6 @@ table {
   }
 }
 
-
 .form-check .form-check-input {
   opacity: 1;
   height: 20px;
@@ -202,4 +205,3 @@ table {
   color: black;
   z-index: 1;
 }
-

src/index.html

@@ -1,24 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-    <base href=''>
+  <head>
+    <base href="" />
     <meta charset="utf-8" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
     <title>INVERSIONES</title>
 
-    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+    <meta
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      name="viewport"
+    />
     <meta name="viewport" content="width=device-width" />
-
+    <script
+      src="https://kit.fontawesome.com/22ac039de1.js"
+      crossorigin="anonymous"
+    ></script>
     <!--     Fonts and icons     -->
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body>
-  <app-root>
-  </app-root>
-</body>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root> </app-root>
+  </body>
 </html>

src/styles.scss

@@ -10,3 +10,50 @@ body {
 .align-container {
   padding: 0 14px;
 }
+
+.borderless {
+  border: 0;
+  border-radius: 0;
+}
+
+label {
+  color: #666;
+}
+
+.center-component {
+  display: inline-block;
+  margin: 0 auto;
+  font-size: 0.9rem;
+}
+
+.margin-right {
+  margin-right: 25px;
+}
+
+textarea.form-control {
+  border: 1px solid #ddd;
+}
+
+.input-box-container {
+  display: block;
+  margin: 0;
+  position: relative;
+  border-collapse: separate;
+  max-width: auto;
+
+  input {
+    font-family: inherit;
+    line-height: inherit;
+    padding-left: 25px;
+    max-width: inherit;
+  }
+
+  p {
+    position: absolute;
+    margin-left: 5px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    left: -5px;
+  }
+}

tsconfig.json

@@ -12,13 +12,8 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ],
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
     "paths": {
       "@app/*": ["src/app/*"],
       "@environments/*": ["src/environments/*"],