@ruc-lib/metaform 2.0.1 → 2.0.2

package/src/components/ruc-meta-select/ruc-meta-select.component.ts

@@ -1,45 +0,0 @@
-import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
-import { RucMetaFormService } from "../../services/ruc-meta-form.service"
-import {RucMetaFormValidationService} from  '../../services/ruc-meta-form-validation.service';
-
-@Component({
-  selector: 'ruc-meta-select',
-  templateUrl: './ruc-meta-select.component.html',
-  styleUrls: ['./ruc-meta-select.component.css']
-})
-export class RucMetaSelectComponent implements OnInit {
-  
-  @Input() rucInputData : any;
-  errorMessage: string | undefined
-  @Output() transferUserInput = new EventEmitter<any>();
-  constructor(public service: RucMetaFormService,public validationService:RucMetaFormValidationService) { }
-
-  ngOnInit(): void {
-    this.errorMessage = this.validationService.defaultErrorMessage;
-  }
-
-  modelChangeFn(e:any) {    
-    this.rucInputData.groupOptions.forEach((x: any)=>{
-      if(x.value == e.value){
-        this.rucInputData.selectedParentId = x.id;
-      }
-    });
-    if(this.rucInputData.dependentFields){
-      this.removDependentFieldParentIdFromOther(this.rucInputData.dependentFields);
-    }
-    this.service.currentFormElement = this.rucInputData;
-    this.transferUserInput.emit(this.rucInputData);
-  }
-
-  removDependentFieldParentIdFromOther(child: any){
-      child.forEach((x:any)=>{
-        if(x.selectedParentId){
-          delete(x.selectedParentId);
-          x.value = "";
-          if(x.dependentFields){
-            this.removDependentFieldParentIdFromOther(x.dependentFields);
-          }    
-        }             
-      })
-  }
-}

package/src/components/ruc-text-area/ruc-text-area.component.html

@@ -1,16 +0,0 @@
-<mat-form-field [ngStyle]="{ 'width.%': rucInputData?.width }" [appearance]="rucInputData?.appearance || 'fill'" class="{{customTheme}}">
-    <mat-label>{{rucInputData?.label}}</mat-label>
-    <textarea matInput
-              placeholder="{{rucInputData?.placeholder}}"
-              cdkTextareaAutosize
-              #autosize="cdkTextareaAutosize"
-              cdkAutosizeMinRows="{{rucInputData.min}}"
-              cdkAutosizeMaxRows="{{rucInputData.max}}"
-              [readonly]="rucInputData?.readonly"
-              [(ngModel)]="rucInputData.value" 
-              matTooltip="{{rucInputData?.tooltip}}"
-              (ngModelChange)="modelChangeFn($event.target)"></textarea>
-  </mat-form-field>
-  <div *ngIf="rucInputData?.errorMsg" class="form-error">
-    {{rucInputData?.customErrorMessage ? rucInputData?.customErrorMessage : errorMessage}}
-  </div>

package/src/components/ruc-text-area/ruc-text-area.component.spec.ts

@@ -1,100 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RucTextAreaComponent } from './ruc-text-area.component';
-import {TextFieldModule} from '@angular/cdk/text-field';
-import { MetaFormConfig } from '../../interfaces/metaFormsDefault';
-describe('RucTextAreaComponent', () => {
-  let component: RucTextAreaComponent;
-  let fixture: ComponentFixture<RucTextAreaComponent>;
-  const mockFormData: MetaFormConfig = {
-    "formType": "simple",
-    "fieldType": "textarea",
-    "inputType": "text",
-    "id": "firstName",
-    "name": "firstName",
-    "errorMsg": false,
-    "label": "First Name",
-    "className": "firstName",
-    "value": "",
-    "alt": "na",
-    "appearance": "outline",
-    "min": "4",
-    "max": "20",
-    "width": "100",
-    "height": "20",
-    "checked": false,
-    "disabled": false,
-    "maxlength": "100",
-    "readonly": false,
-    "required": false,
-    "size": "100",
-    "step": "100",
-    "sameRow": true,
-    "sameRowColumnWidth": "25",
-    "tooltip": "First Name",
-    "tooltipPosition": "right",
-    "pattern": "any",
-    "placeholder": "First Name",
-    "autofocus": true,
-    "autocomplete": ["amar", "bharat", "charan"],
-    "customComponentName": "none",
-    "rucDialogInput": {},
-    "hasDependentFields": false,
-    "dependentFieldParentId": "any",
-    "toolTipDescription": "none",
-    "showErrorOnPopUp": true,
-    "groupOptions": [
-      {
-        "id": "Winter",
-        "name": "Winter",
-        "value": ""
-      },
-      {
-        "id": "Spring",
-        "name": "Spring",
-        "value": ""
-      },
-      {
-        "id": "Summer",
-        "name": "Summer",
-        "value": ""
-      },
-      {
-        "id": "Autumn",
-        "name": "Autumn",
-        "value": ""
-      }
-    ],
-    "dependentFields": []
-  } 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TextFieldModule],
-      declarations: [ RucTextAreaComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RucTextAreaComponent);
-    component = fixture.componentInstance;
-    component.rucInputData = mockFormData;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    component.rucInputData = mockFormData;
-    expect(component).toBeTruthy();
-  });
-
-  it('should called modelChangeFn ', () => {
-    component.rucInputData = mockFormData;
-    const event = {
-      value: "Winter"
-    }
-    const spy = spyOn(component.transferUserInput, 'emit');
-    component.modelChangeFn(event);
-    
-    expect(spy).toHaveBeenCalled();
-  })
-});

package/src/components/ruc-text-area/ruc-text-area.component.ts

@@ -1,30 +0,0 @@
-import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
-import {RucMetaFormValidationService} from  '../../services/ruc-meta-form-validation.service';
-
-@Component({
-  selector: 'ruc-text-area',
-  templateUrl: './ruc-text-area.component.html',
-  styleUrls: ['./ruc-text-area.component.css']
-})
-export class RucTextAreaComponent implements OnInit {
-  @Input() rucInputData : any;
-  @Output() transferUserInput = new EventEmitter<any>();
-  @Input() customTheme: string | undefined;
-  errorMessage: string | undefined
-
-  constructor(public validationService:RucMetaFormValidationService) { 
-    
-  }
-
-  ngOnInit(): void {
-    this.errorMessage = this.validationService.defaultErrorMessage;
-  }
-  /**
-   * 
-   * @param e 
-   */
-  modelChangeFn(e:any) {
-    this.transferUserInput.emit(this.rucInputData);
-  }
-
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './lib/ruclib-metaform.module';
-export * from './lib/ruclib-metaform/ruclib-metaform.component';

package/src/interfaces/metaFormsDefault.ts

@@ -1,71 +0,0 @@
-
-export interface MetaFormConfig {
-    formType?: 'simple' | 'stepper' // less priority    
-    inputType: 'text' | 'password' | 'button' | 'checkbox' | 'email' | 'color' | 'date' | 'file' | 'hidden' | 'image' | 'radio' | 'number' | 'range'    | 'reset' | 'search' | 'submit' | 'time' | 'tel' | 'url' | 'week' | 'month' | 'number' | 'custom' | 'select' | 'rucMultiFileUpload' | 'rucMultiSelect',
-    fieldType: string,
-    id?: string,
-    errorMsg? : boolean,
-    name?: string,
-    label?: string,
-    value?: any,
-    className?: string, // to be check    value?: string, //Specifies the default value for an input field    src?: string,
-    alt?: string,
-    appearance?: string,
-    min?: string, //Specifies the minimum value for an input field    
-    max?: string, //Specifies the maximum value for an input field    
-    width?: string, // like for image    
-    height?: string, // like for image    
-    checked?: boolean, //Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")    
-    disabled?: boolean, //Specifies that an input field should be disabled    
-    maxlength?: string, //Specifies the maximum number of character for an input field    
-    readonly?: boolean, //Specifies that an input field is read only (cannot be changed)    
-    required?: boolean, //Specifies that an input field is required (must be filled out)    
-    size?: string, //Specifies the width (in characters) of an input field    
-    step?: string, //Specifies the legal number intervals for an input field   
-    sameRow? : boolean, 
-    sameRowColumnWidth? : string, 
-    tooltip? : string,
-    tooltipPosition? : string, //'after', 'before', 'above', 'below', 'left', 'right'
-    pattern? : any, // The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.    
-    placeholder?: any,
-    autofocus?: any, //The input autofocus attribute specifies that an input field should automatically get focus when the page loads.   
-    autocomplete?: any,
-    customComponentName?: 'dialog' | 'multiselect' | 'none',
-    rucDialogInput? : any,    
-    rucMultiselectInput? : {
-      rucInputData? : any,
-      dataSource? : any
-    }, // multiselect interface   
-    rucMultiFileUpload? : {rucInputData? : any}
-    hasDependentFields?: boolean,
-    dependentFieldParentId?: any,
-    dependentFields?: MetaFormConfig[];
-    selectedParentId?: any;
-    toolTipDescription?: string,
-    customErrorMessage?: string,
-    showErrorOnPopUp?: boolean, //need to be discuss more. as a enhancement    
-    groupOptions?: groupOptions[] // Or like [''],
-    stepperForm?: boolean;
-    stepper?: Stepper[],
-    rucMultiFileUploadInput?:{
-      rucInputData? : any,
-    }
-}
-  export interface FormAttributes {
-    action: any,
-    target?: any,
-    method?:any,
-    novalidate?: boolean,
-    showFormProgress?: boolean // need to spend time on it  
-}
-  export interface groupOptions{
-    id: string,
-    name: string,
-    value?: string, // compulsary if its select option part    selected?: boolean 
-    disable? : boolean
- }
- export interface Stepper{
-  stepControl?: string;
-  stepperlabel?: string;
-  stepperFormData?: MetaFormConfig[];  
- }

package/src/lib/ruclib-metaform/ruclib-metaform.component.html

@@ -1,99 +0,0 @@
-<form novalidate>
-    <ng-container *ngFor="let dynamicField of formData; let j = index;" [ngSwitch]="dynamicField?.fieldType">
-        <div [ngStyle] = "{ 'width.%': dynamicField.sameRowColumnWidth - 2 }"  [ngClass]="dynamicField.sameRow === true ? 'margin-5 column-in-same-row' : 'margin-5 column-in-new-row'" 
-        *ngIf="dynamicField.formType != 'stepper'">
-       
-        <ng-template [ngSwitchCase]="'input'">
-            <div *ngIf="(!selectedParentId && !dynamicField.hasDependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId)">
-                <ruc-meta-inputs [customTheme] = "customTheme" [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-inputs>
-            </div>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'radio'">
-            <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
-                <ruc-meta-radio-group [customTheme] = "customTheme" [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-radio-group>
-            </div>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'checkbox'">
-            <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
-                <ruc-meta-checkbox-group [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-checkbox-group>
-            </div>
-        </ng-template>
-        <ng-template class="" [ngSwitchCase]="'select'">
-            <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
-                <ruc-meta-select [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-select>
-            </div>
-        </ng-template>
-        <ng-template class="" [ngSwitchCase]="'textarea'">
-            <ruc-text-area [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-text-area>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'rucMultiSelect'">
-            <uxp-ruclib-multi-select [rucInputData]="dynamicField?.rucMultiselectInput?.rucInputData"
-            [dataSource]="dynamicField?.rucMultiselectInput?.dataSource" [customTheme]="customTheme"
-                (rucEvent)="passEvent($event)"></uxp-ruclib-multi-select>
-        </ng-template>
-        <ng-template [ngSwitchCase]="'rucMultiFileUpload'">
-            <uxp-ruclib-multi-file-upload
-                [rucInputData]="dynamicField?.rucMultiFileUploadInput?.rucInputData" [customTheme]="customTheme"
-                (rucEvent)="passEvent($event,dynamicField)"></uxp-ruclib-multi-file-upload>
-        </ng-template>
-        <div *ngIf="dynamicField.hasDependentFields && dynamicField.value">
-            <uxp-ruclib-metaform #dynamicField.id [rucInputData]="formData" [childForm] ="dynamicField.dependentFields"
-                     [isChild]="true" [selectedParentId] = "dynamicField.selectedParentId" (rucEvent)="passEvent($event,dynamicField.id)"></uxp-ruclib-metaform>
-        </div>
-        
-    </div>
-    <div *ngIf="dynamicField.formType == 'stepper'">
-            <mat-stepper linear #stepper>
-                <div *ngFor="let stapperField of dynamicField.stepper; let s = index;"  [ngSwitch]="stapperField?.fieldType">
-                    <mat-step [stepControl]="stapperField.stepControl" *ngIf="stapperField.stepControl != 'done'">
-                        <ng-template matStepLabel>{{stapperField.stepperlabel}}</ng-template>
-                        <ng-container *ngFor="let stepperFormData of stapperField.stepperFormData; let j = index;" [ngSwitch]="stepperFormData?.fieldType">
-                            <div [ngStyle] = "{ 'width.%': dynamicField.sameRowColumnWidth - 2 }"  [ngClass]="dynamicField.sameRow === true ? 'margin-5 column-in-same-row' : 'margin-5 column-in-new-row'" 
-                            >
-                            <ng-template [ngSwitchCase]="'input'">
-                                <div>
-                                    <ruc-meta-inputs [customTheme] = "customTheme" [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-meta-inputs>
-                                </div>
-                            </ng-template>
-                            <ng-template class="" [ngSwitchCase]="'textarea'">
-                                <ruc-text-area [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-text-area>
-                            </ng-template>
-                            <ng-template [ngSwitchCase]="'radio'">
-                                <div>
-                                    <ruc-meta-radio-group [customTheme] = "customTheme" [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-meta-radio-group>
-                                </div>
-                            </ng-template>
-                            <ng-template [ngSwitchCase]="'checkbox'">
-                                <div >
-                                    <ruc-meta-checkbox-group [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-meta-checkbox-group>
-                                </div>
-                            </ng-template>
-                            <ng-template class="" [ngSwitchCase]="'select'">
-                                <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
-                                    <ruc-meta-select [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-select>
-                                </div>
-                            </ng-template>
-                        </div>
-                        </ng-container>
-                        <div>
-                            <button mat-button matStepperPrevious *ngIf="s > 0">Back</button>
-                            <button mat-button matStepperNext *ngIf="s< dynamicField.stepper.length">Next</button>
-                          </div>
-                    </mat-step>
-                    <mat-step *ngIf="stapperField.stepControl == 'done'">
-                        <ng-template matStepLabel>{{stapperField.stepControl}}</ng-template>
-                        <p>{{stapperField.stepperlabel}}</p>
-                        <div>
-                          <button mat-button matStepperPrevious>Back</button>
-                          <button mat-button (click)="stepper.reset()">Reset</button>
-                        </div>
-                    </mat-step>
-                </div>
-            </mat-stepper>
-        </div>
-    </ng-container>
-    <ng-container>
-        <button mat-raised-button color="primary" (click)="clearForm()" *ngIf="!isChild">Clear Form</button>
-    </ng-container>
-    
-</form>

package/src/lib/ruclib-metaform/ruclib-metaform.component.scss

@@ -1,15 +0,0 @@
-.form-error{
-    color:red;
-}
-
-.column-in-same-row {
-    float: left;
-}
-
-.column-in-new-row {
-    clear: left;
-}
-
-.margin-5 {
-    margin: 1%;
-}