form-aurora-stefanini 0.1.1 → 0.1.4

package/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/form-aurora'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/form-aurora-stefanini",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,28 +1,17 @@
-{
-  "name": "form-aurora-stefanini",
-  "version": "0.1.1",
-  "license": "Stefanini Colombia",
-  "author": {
-    "name": "Stefanini Colombia",
-    "email": "stefanini.librerias@gmail.com"
-  },
-  "peerDependencies": {
-    "@angular/common": "^8.2.14",
-    "@angular/core": "^8.2.14",
-    "ng-recaptcha": "^5.0.0",
-    "moment": "^2.26.0"
-  },
-  "dependencies": {
-    "tslib": "^1.9.0"
-  },
-  "main": "bundles/form-aurora-stefanini.umd.js",
-  "module": "fesm5/form-aurora-stefanini.js",
-  "es2015": "fesm2015/form-aurora-stefanini.js",
-  "esm5": "esm5/form-aurora-stefanini.js",
-  "esm2015": "esm2015/form-aurora-stefanini.js",
-  "fesm5": "fesm5/form-aurora-stefanini.js",
-  "fesm2015": "fesm2015/form-aurora-stefanini.js",
-  "typings": "form-aurora-stefanini.d.ts",
-  "metadata": "form-aurora-stefanini.metadata.json",
-  "sideEffects": false
-}
+{
+  "name": "form-aurora-stefanini",
+  "version": "0.1.4",
+  "license": "Stefanini Colombia",
+  "author": {
+    "name": "Stefanini Colombia",
+    "email": "stefanini.librerias@gmail.com"
+  },
+  "peerDependencies": {
+    "@angular/common": "^8.2.0",
+    "@angular/core": "^8.2.0",
+    "ng-recaptcha": "^5.0.0",
+    "moment": "^2.26.0"
+  },
+  "dependencies": {
+  }
+}

package/src/lib/Components/from-aurora/form-aurora.component.css

@@ -0,0 +1,117 @@
+form {
+    font-size: 12px;
+  }
+  
+  form input,
+  form select {
+    border: 1px solid #e4e4e4;
+    height: 40px;
+    margin-bottom: 5px;
+  }
+  
+  .selectContainer select{
+    appearance: none;
+  }
+  .selectContainer::after {
+    content: "\025be";
+    display: table-cell;
+    text-align: center;
+    padding-top: 7px;
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 14px;
+    right: 20px;
+    pointer-events: none;
+  }
+  
+  form .error {
+    color: red;
+    font-size: 12px;
+    text-align: left;
+    margin: 0;
+    padding: 0;
+    /*display: flex;*/
+    width: 90%;
+    margin-top: -15px;
+    margin-bottom: 15px;
+  }
+  
+  .error:after {
+    content: " ";
+    display: block;
+  }
+  
+  .card {
+    width: 90%;
+    margin: 2% auto;
+    border-radius: 12px;
+  }
+  
+  /* Extra small devices (portrait phones, less than 576px) */
+  @media (max-width: 412px) {
+    .card {
+      width: 100%;
+    }
+  
+    .cnt-captcha {
+      transform: scale(0.77);
+      /*transform-origin: 0;*/
+    }
+  }
+  
+  /* Extra small devices (portrait phones, less than 576px) */
+  @media (max-width: 575.98px) {
+    .card {
+      width: 100%;
+    }
+  
+    .cnt-captcha {
+      transform: scale(0.77);
+      /*transform-origin: 0;*/
+    }
+  }
+  
+  @media (max-width: 880.98px) {
+    .cnt-captcha {
+      transform: scale(0.82);
+      /*transform-origin: 0;*/
+    }
+  }
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+  }
+  
+  form{
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #f5f5f5;
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #bdbdbd;
+  }
+  

package/src/lib/Components/from-aurora/form-aurora.component.html

@@ -0,0 +1,343 @@
+<div class="card">
+    <span class="text-center mt-2 d-none d-sm-block" *ngIf="!isSimpleFlow">
+        <img style="width: 115px; height:96px;" [class]="dataClassCss.logo" id="logo">
+      </span>
+      <div class="text-center mt-2 d-none d-sm-block" *ngIf="isSimpleFlow" style="margin-top: 4%!important;">
+      </div>
+  <div class="card-body pt-0">
+      <ng-container *ngIf="schedule">
+          <h4 class="card-title text-center mb-0" [class]="dataClassCss.bienvenida2" style="color: #EE7E0E;">
+              Horarios de atención
+          </h4>
+          <small class="text-center d-block">{{schedule}}</small>
+      </ng-container>
+      <form #formDynamic="ngForm">
+          <div *ngFor="let control of dataForm?.formQuestions; let index = index; trackBy: trackByIndex">
+              <div
+                  *ngIf="(index > 0 && (dataForm.formQuestions[index - 1].question.questionType.id == 3 && dataForm.formQuestions[index].question.questionType.id == 2)) || (index < dataForm.formQuestions.length && dataForm.formQuestions[index].question.questionType.id == 3 && dataForm.formQuestions[index + 1].question.questionType.id == 2); else switchTemp">
+                  <div class="row"
+                      *ngIf="(index > 0 && (dataForm.formQuestions[index - 1].question.questionType.id == 3 && dataForm.formQuestions[index].question.questionType.id == 2))">
+                      <div class="col-lg-6 col-xs-12">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index - 1].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left;">
+                                  <span class="h6 small bg-white text-muted">{{dataForm.formQuestions[index -
+                                      1].question.label}}</span>
+                              </label>
+                              <div class="selectContainer">
+                                  <select [name]="dataForm.formQuestions[index - 1].question.value"
+                                      [required]="dataForm.formQuestions[index - 1].question.required"
+                                      [class]="dataClassCss.formcontrol"
+                                      id="{{dataForm.formQuestions[index - 1].question.value}}"
+                                      style="margin-top: -1rem !important;"
+                                      [(ngModel)]="defaultDocType !== '' ? defaultDocType : dataForm.formQuestions[index - 1].question.registred">
+                                      <option value="" selected disabled hidden>Selecciona</option>
+                                      <ng-container
+                                          *ngFor="let item of dataForm.formQuestions[index - 1].question.questionAnswers">
+                                          <option *ngIf="item.answer.state.id == 1" [value]="item.answer.value">
+                                              {{ item.answer.field }}
+                                          </option>
+                                      </ng-container>
+                                  </select>
+                              </div>
+                          </div>
+                          <div style="margin-left: 15px;"
+                              *ngIf="dataForm.formQuestions[index].question.questionType.id != 5 && dataForm.formQuestions[index].question.questionType.id != 6">
+                              <span class="error" [id]="'char'+dataForm.formQuestions[index-1].question.value"
+                                  hidden></span>
+                          </div>
+                      </div>
+                      <div class="col-lg-6 col-xs-12">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}"
+                                  class="col-sm-12 p-sm-0 px-sm-1" style="display: block; text-align: left;">
+                                  <span
+                                      class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <input type="text" pattern="\d*" inputmode="numeric"
+                                  id="{{dataForm.formQuestions[index].question.value}}"
+                                  style="margin-top: -1rem !important;"
+                                  [name]="dataForm.formQuestions[index].question.value" placeholder="Escribe"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  (change)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (blur)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (keyup)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  onkeypress="onkeypress($event)"
+                                  onkeyup="(this.value=(value.replace(/[.]*/g,'')))"
+                                  maxlength="dataForm.formQuestions[index].question.maxLength"
+                                  [minLength]="dataForm.formQuestions[index].question.minLength"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  [class]="dataClassCss.formcontrol" />
+
+                          </div>
+
+                          <div style="margin-left: 15px;"
+                              *ngIf="dataForm.formQuestions[index].question.questionType.id != 5 && dataForm.formQuestions[index].question.questionType.id != 6">
+                              <span class="error" [id]="'rq'+dataForm.formQuestions[index].question.value"
+                                  *ngIf="validRequired(formDynamic,dataForm.formQuestions[index].question) && watchValid">
+                                  Este campo es obligatorio</span>
+                              <span class="error" [id]="'ml'+dataForm.formQuestions[index].question.value" hidden>
+                                  Debe ser mínimo de
+                                  {{ dataForm.formQuestions[index].question.minLength }} caracteres</span>
+                              <span class="error" [id]="'mxl'+dataForm.formQuestions[index].question.value" hidden>
+                                  Debe ser maximo de
+                                  {{ dataForm.formQuestions[index].question.maxLength }} caracteres</span>
+                              <span class="error" [id]="'char'+dataForm.formQuestions[index].question.value"
+                                  hidden></span>
+                              <span *ngIf="patternNotValidDcto === true" class="error">Formato no valido</span>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+
+              <ng-template #switchTemp>
+                  <div [ngSwitch]="dataForm.formQuestions[index].question.questionType.id">
+                      <div *ngSwitchCase="1">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left; ">
+                                  <span
+                                      class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <input type="text" id="{{dataForm.formQuestions[index].question.value}}"
+                                  [class]="dataClassCss.formcontrol" placeholder="Escribe"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  [maxlength]="dataForm.formQuestions[index].question.maxLength"
+                                  [name]="dataForm.formQuestions[index].question.value"
+                                  (keydown)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (change)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (blur)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  style="margin-top: -1rem !important;" />
+                          </div>
+                      </div>
+                      <div *ngSwitchCase="2">
+
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left;">
+                                  <span
+                                      class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <input type="text" pattern="\d*" inputmode="numeric"
+                                  id="{{dataForm.formQuestions[index].question.value}}"
+                                  style="margin-top: -1rem !important;"
+                                  [name]="dataForm.formQuestions[index].question.value" placeholder="Escribe"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  (keydown)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (change)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (blur)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  onkeypress="onkeypress($event)"
+                                  onkeyup="(this.value=(value.replace(/[.]*/g,'')))"
+                                  maxlength="dataForm.formQuestions[index].question.maxLength"
+                                  [minLength]="dataForm.formQuestions[index].question.minLength"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  [class]="dataClassCss.formcontrol" />
+                                  <span *ngIf="patternNotValidCel === true" class="error">Formato no valido</span>
+                          </div>
+                          
+                      </div>
+                      <div *ngSwitchCase="3">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left;">
+                                  <span
+                                      class="h6 small bg-white text-muted">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <select [name]="dataForm.formQuestions[index].question.value"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  [class]="dataClassCss.formcontrol"
+                                  id="{{dataForm.formQuestions[index].question.value}}"
+                                  style="margin-top: -1rem !important;"
+                                  [(ngModel)]="defaultDocType !== '' ? defaultDocType : dataForm.formQuestions[index].question.registred">
+                                  <option value="" selected disabled hidden>Selecciona</option>
+                                  <ng-container
+                                      *ngFor="let item of dataForm.formQuestions[index].question.questionAnswers">
+                                      <option *ngIf="item.answer.state.id == 1" [value]="item.answer.value">
+                                          {{ item.answer.field }}
+                                      </option>
+                                  </ng-container>
+                              </select>
+                          </div>
+                      </div>
+                      <div *ngSwitchCase="4">
+                          <select class="{{ dataClassCss.formcontrol }} select-checkbox"
+                              style="overflow: hidden; border-style: hidden;"
+                              [style.height.px]="dataForm.formQuestions[index].question.questionAnswers.length * 24"
+                              [name]="dataForm.formQuestions[index].question.value"
+                              [required]="dataForm.formQuestions[index].question.required" ngModel multiple>
+                              <option                                  
+                                  (mousemove)="$event.preventDefault()"
+                                  *ngFor="let item of dataForm.formQuestions[index].question.questionAnswers"
+                                  [value]="item.answer.value">
+                                  {{ item.answer.field }}
+                              </option>
+                          </select>
+                      </div>
+                      <div *ngSwitchCase="5">
+                          <a (click)="rediretoutside($event,dataForm.formQuestions[index].question)" href="">
+                              <span>{{ dataForm.formQuestions[index].question.label }}</span>
+                          </a>
+                      </div>
+                      <div *ngSwitchCase="6">
+                          <div [class]="dataClassCss.cl12" [id]="'reCaptcha'">
+                              <div class="cnt-captcha">
+                                  <re-captcha (resolved)="resolvedCaptcha($event)"
+                                      siteKey="6LfQisEZAAAAAARuuKFEAgS-x4qJse5uBA_QCA7v"></re-captcha>
+                                  <input hidden type="text" [name]="dataForm.formQuestions[index].question.value"
+                                      [required]="dataForm.formQuestions[index].question.required"
+                                      [(ngModel)]="dataForm.formQuestions[index].question.registred">
+                              </div>
+                              <span class="error" *ngIf="watchValid && !captchaValid" style="margin-top: 0;">
+                                  Debe resolver la captcha para continuar
+                              </span>
+                          </div>
+                      </div>
+                      <div *ngSwitchCase="7">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left; margin-bottom: 0 ;">
+                                  <span
+                                      class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <input placeholder="dd/mm/aaaa" style="margin-top: -0.4rem !important;"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  [name]="dataForm.formQuestions[index].question.value" type="date" min="{{minDate}}"
+                                  max="{{maxDate}}" [maxlength]="10" (paste)="false"
+                                  id="{{dataForm.formQuestions[index].question.value}}"
+                                  [class]="dataClassCss.txtCalendar"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  (keydown)="cancellKeypress()"
+                                  (change)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (blur)="onChangeValidPatter($event, dataForm.formQuestions[index].question)">
+
+                              <button class="btn" id="{{dataForm.formQuestions[index].question.value}}" type="button"
+                                  style="width: 46px;
+                                  top: 12px;
+                                  color: white;
+                                  right: 15px;
+                                  position: absolute;
+                                  background: #D25D42;
+                                  pointer-events: none;">
+                                  <i class="fa fa-calendar"></i>
+                              </button>
+
+                          </div>
+                      </div>
+                      <div *ngSwitchCase="8">
+                          <div [class]="dataClassCss.cl12" style="text-align: left; margin-bottom: 10px;">
+                              <input style="width: 4% !important; height: auto !important; display: inline !important;" type="checkbox"
+                                  [name]="dataForm.formQuestions[index].question.value"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  [class]="dataClassCss.formcontrol">
+                                  <!-- (change)="checkTermsAndConditions(dataForm.formQuestions[index].question.registred)" -->
+                                 
+                              <!-- <a href="{{urlPdf}}" target="_blank" style="text-decoration: underline;"
+                                  id="txtPoliticas" (click)="tycSelection()">
+                                  {{dataForm.formQuestions[index].question.label}}
+                              </a> -->
+                              <a target="_blank" style="text-decoration: underline;color:blue;cursor: pointer;"
+                                  id="txtPoliticas" (click)="tycSelection($event)">
+                                  {{dataForm.formQuestions[index].question.label}}
+                              </a>
+                          </div>
+                      </div>
+                      <div *ngSwitchCase="9">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left; ">
+                                  <span
+                                      class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <input type="text" id="{{dataForm.formQuestions[index].question.value}}"
+                                  [class]="dataClassCss.formcontrol" placeholder="Escribe"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  [maxlength]="dataForm.formQuestions[index].question.maxLength"
+                                  [name]="dataForm.formQuestions[index].question.value"
+                                  (keydown)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (change)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (blur)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (keypress)="validOnlyText($event)"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  style="margin-top: -1rem !important;" />
+                          </div>
+                      </div>
+                      <div *ngSwitchCase="10">
+                        <div [class]="dataClassCss.cl12" style="text-align: left; margin-bottom: 10px;">
+                          <input style="width: 4% !important; height: auto !important; display: inline !important;"
+                            type="checkbox" [name]="dataForm.formQuestions[index].question.value"
+                            [required]="dataForm.formQuestions[index].question.required"
+                            [(ngModel)]="dataForm.formQuestions[index].question.registred">
+                          <a target="_blank" style="text-decoration: underline;color:blue;cursor: pointer;"
+                            id="check{{dataForm.formQuestions[index].question.id}}"
+                            (click)="openLabelUrl($event,dataForm.formQuestions[index].question)">
+                            {{dataForm.formQuestions[index].question.label}}
+                          </a>
+                        </div>
+                      </div>
+                      <div *ngSwitchCase="11">
+                          <div [class]="dataClassCss.cl12">
+                              <label for="{{dataForm.formQuestions[index].question.value}}" class="col-sm-12"
+                                  style="display: block; text-align: left; ">
+                                  <span
+                                      class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{dataForm.formQuestions[index].question.label}}</span>
+                              </label>
+                              <input type="text" id="{{dataForm.formQuestions[index].question.value}}"
+                                  [class]="dataClassCss.formcontrol" placeholder="Escribe"
+                                  [required]="dataForm.formQuestions[index].question.required"
+                                  [maxlength]="dataForm.formQuestions[index].question.maxLength"
+                                  [name]="dataForm.formQuestions[index].question.value"
+                                  (keydown)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (change)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (blur)="onChangeValidPatter($event, dataForm.formQuestions[index].question)"
+                                  (keypress)="validateNotSpace($event)"
+                                  [(ngModel)]="dataForm.formQuestions[index].question.registred"
+                                  style="margin-top: -1rem !important;" />
+                          </div>
+                      </div>
+                      <div *ngSwitchDefault>Tipo de control no detectado</div>
+                      <div style="margin-left: 15px;"
+                          *ngIf="dataForm.formQuestions[index].question.questionType.id != 5 && dataForm.formQuestions[index].question.questionType.id != 6">
+                          <span class="error" [id]="'rq'+dataForm.formQuestions[index].question.value"
+                              *ngIf="validRequired(formDynamic,dataForm.formQuestions[index].question) && watchValid">
+                              Este campo es obligatorio</span>
+                          <span class="error" [id]="'ml'+dataForm.formQuestions[index].question.value" hidden>
+                              Debe ser mínimo de
+                              {{ dataForm.formQuestions[index].question.minLength }} caracteres</span>
+                          <span class="error" [id]="'mxl'+dataForm.formQuestions[index].question.value" hidden>
+                              Debe ser maximo de
+                              {{ dataForm.formQuestions[index].question.maxLength }} caracteres</span>
+                          <span class="error" [id]="'char'+dataForm.formQuestions[index].question.value"
+                              hidden></span>
+                          <span class="error" [id]="dataForm.formQuestions[index].question.id" hidden></span>
+                      </div>
+                  </div>
+              </ng-template>
+          </div>
+          <section *ngIf="isSimpleFlow">
+            <div *ngFor="let step of steps let index = index; trackBy: trackByIndex">
+              <div [class]="dataClassCss.cl12" *ngIf="step.viewData">
+                <label for="{{step.id}}" class="col-sm-12" style="display: block; text-align: left;">
+                  <span class="h6 small bg-white text-muted">{{step.step}}</span>
+                </label>
+                <select [name]="step.step" [required]="true" [class]="dataClassCss.formcontrol" id="{{step.step}}"
+                  style="margin-top: -1rem !important;" [(ngModel)]="step.value"
+                  (ngModelChange)="onChangeStep(step,steps[index+1],$event)">
+                  <option value="" selected disabled hidden>Selecciona</option>
+                  <ng-container *ngFor="let subitem of step.viewData">
+                    <option [value]="subitem.id">
+                      {{ subitem.description }}
+                    </option>
+                  </ng-container>
+                </select>
+              </div>
+            </div>
+          </section>
+          <div class="mt-3 text-center">
+              <button type="button" [class]="dataClassCss.btn" (click)="onSubmit()" [disabled]="!formDynamic.valid"
+                  id="btnIng">Ingresar</button>
+          </div>
+      </form>
+  </div>
+</div>

package/src/lib/Components/from-aurora/form-aurora.component.spec.ts

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