Issue #SB-000 merge: Merge pull request #1 from swayangjit/master

Issue #SB-000 chore: Initial commit

.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

-# SunbirdEd-forms
-Common form elements for Sunbird-Ed apps
+# SunbirdEdForms
+
+Contains  Form component powered by angular. This component expects a configuration and renders form according to the view.
+
+# Getting Started
+
+## Step 1: Install the package
+
+    npm install common-form-elements --save
+
+## Step 2: Include the library selector in view( Eg .HTML file)
+   
+   <sb-form [config]='config'></sb-form>
+
+## step3: Form component emits values on every input , To get value include event callbacks
+ 
+  <sb-form (valueChanges)="function($event)" (statusChanges)="function($event)" ></sb-form>
+   
+
+    
+ 
\ No newline at end of file

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "common-form-elements": {
+      "root": "projects/common-form-elements",
+      "sourceRoot": "projects/common-form-elements/src",
+      "projectType": "library",
+      "prefix": "sb",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/common-form-elements/tsconfig.lib.json",
+            "project": "projects/common-form-elements/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/common-form-elements/src/test.ts",
+            "tsConfig": "projects/common-form-elements/tsconfig.spec.json",
+            "karmaConfig": "projects/common-form-elements/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/common-form-elements/tsconfig.lib.json",
+              "projects/common-form-elements/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "common-form-elements"
+}

package.json

+{
+  "name": "common-form-elements",
+  "version": "0.0.8",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "dependencies": {
+    "@angular/animations": "~7.1.0",
+    "@angular/common": "~7.1.0",
+    "@angular/compiler": "~7.1.0",
+    "@angular/core": "~7.1.0",
+    "@angular/forms": "~7.1.0",
+    "@angular/platform-browser": "~7.1.0",
+    "@angular/platform-browser-dynamic": "~7.1.0",
+    "@angular/router": "~7.1.0",
+    "common-consumption-styles": "0.0.17",
+    "core-js": "^2.5.4",
+    "rxjs": "^6.3.3",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.8.26"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.11.0",
+    "@angular-devkit/build-ng-packagr": "~0.11.0",
+    "@angular/cli": "~7.1.0",
+    "@angular/compiler-cli": "~7.1.0",
+    "@angular/language-service": "~7.1.0",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.5.0",
+    "immutable": "^4.0.0-rc.12",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~3.1.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "ng-packagr": "^4.2.0",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tsickle": ">=0.29.0",
+    "tslib": "^1.9.0",
+    "tslint": "^5.11.0",
+    "typescript": "~3.1.6"
+  }
+}

projects/common-form-elements/karma.conf.js

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

projects/common-form-elements/ng-package.json

+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/common-form-elements",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "whitelistedNonPeerDependencies": [
+    "immutable"
+  ]
+}

projects/common-form-elements/package.json

+{
+  "name": "common-form-elements",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^7.1.0",
+    "@angular/core": "^7.1.0",
+    "@angular/forms": "^7.1.0"
+  }
+}
\ No newline at end of file

projects/common-form-elements/src/lib/checkbox/checkbox.component.css

+label {
+    font-size: 16px;
+}
+
+.sb-checkbox {
+    padding: 0px 0px 0px 8px;
+}
+
+.container {
+    position: relative;
+    cursor: pointer;
+    font-size: 22px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+/* Create a custom checkbox */
+.container .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 22px;
+    width: 22px;
+    border: 2px solid black;
+    border-radius: 4px;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked~.checkmark {
+    background-color: #2196F3;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked~.checkmark:after {
+    display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+    left: 7px;
+    top: 4px;
+    width: 5px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.checkbox-label {
+    padding: 2px 0 0 32px;
+}
+
+.checkbox-row {
+    display: grid;
+    grid-template-columns: 10% 90%;
+    grid-gap: 0rem;
+}
+
+.label-html{
+    font-size: 14px;
+}
\ No newline at end of file

projects/common-form-elements/src/lib/checkbox/checkbox.component.html

+<div class="sb-checkbox">
+    <div class="checkbox-row">
+        <label class="container">
+            <input type="checkbox" [formControl]="formControlRef" name="checkbox" value="value">
+            <span class="checkmark"></span>
+        </label>
+        <label *ngIf="label" class="checkbox-label">{{label}}</label>
+        <label class="label-html" *ngIf="labelHtml">
+            <div [innerHTML]="labelHtml | transposeHtml" (click)="handleLinkClick($event)"></div>
+        </label>
+    </div>
+</div>
\ No newline at end of file

projects/common-form-elements/src/lib/checkbox/checkbox.component.spec.ts

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

projects/common-form-elements/src/lib/checkbox/checkbox.component.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'sb-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.css']
+})
+export class CheckboxComponent implements OnInit {
+  @Input() label: any;
+  @Input() code: any;
+  @Input() value?: any;
+  @Input() formControlRef?: FormControl;
+  @Input() labelHtml?: any;
+  @Output() clickedLink = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log('label', this.label);
+    console.log('labelHtml', this.labelHtml);
+  }
+
+  handleLinkClick(event: MouseEvent) {
+    if (event.target && event.target['hasAttribute'] && (event.target as HTMLAnchorElement).hasAttribute('href')) {
+      this.clickedLink.emit((event.target as HTMLAnchorElement).getAttribute('href'));
+    }
+  }
+
+}

projects/common-form-elements/src/lib/common-form-config.ts

+import {Observable} from 'rxjs';
+import {AsyncValidatorFn, FormControl} from '@angular/forms';
+
+export enum FieldConfigInputType {
+  INPUT = 'input',
+  CHECKBOX = 'checkbox',
+  SELECT = 'select',
+  LABEL = 'label',
+  TEXTAREA = 'textarea',
+  NESTED_SELECT = 'nested_select',
+  NESTED_GROUP = 'nested_group',
+  MULTIPLE_SELECT = 'multiple_select'
+}
+
+export enum FieldConfigValidationType {
+  REQUIRED = 'required',
+  MAXLENGTH = 'maxLength',
+  REQUIRED_TRUE = 'required_true',
+  MINLENGTH = 'minLength',
+  PATTERN = 'pattern'
+}
+
+export type FieldConfigOptionsBuilder<T> =
+  (control: FormControl, context?: FormControl, notifyLoading?: () => void,
+    notifyLoaded?: () => void) => Observable<FieldConfigOption<T>[]> | Promise<FieldConfigOption<T>[]>;
+export type AsyncValidatorFactory = (marker: string, trigger: HTMLElement) => AsyncValidatorFn;
+
+export interface FieldConfigOption<T> {
+  label: string;
+  value: T;
+  extras?: T;
+}
+export interface FieldConfigOptionAssociations<T> {
+  [key: string]: FieldConfigOption<T>[];
+}
+export interface FieldConfigAsyncValidation {
+  marker: string;
+  message?: string;
+  trigger?: string;
+  asyncValidatorFactory?: AsyncValidatorFactory;
+}
+export interface FieldConfig<T> {
+  code: string;
+  type: FieldConfigInputType;
+  fieldName?: string;
+  default?: any;
+  context?: string;
+  children?: { [key: string]: FieldConfig<T>[] } | FieldConfig<T>[];
+  templateOptions: {
+    type?: string,
+    label?: string,
+    placeHolder?: string,
+    prefix?: string,
+    multiple?: boolean,
+    hidden?: boolean,
+    disabled?: boolean,
+    options?: FieldConfigOption<T>[] | FieldConfigOptionsBuilder<T> | FieldConfigOptionAssociations<T>,
+    labelHtml?: {
+      contents: string,
+      values?: { [key: string]: string }
+    }
+  };
+  validations?: {
+    type: FieldConfigValidationType,
+    value?: string | boolean | number | RegExp,
+    message?: string
+  }[];
+  asyncValidation?: FieldConfigAsyncValidation;
+}

projects/common-form-elements/src/lib/common-form-elements.component.spec.ts

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

projects/common-form-elements/src/lib/common-form-elements.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'sb-common-form-elements',
+  template: `
+    <p>
+      common-form-elements works!
+    </p>
+  `,
+  styles: []
+})
+export class CommonFormElementsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/common-form-elements/src/lib/common-form-elements.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CommonFormElementsComponent } from './common-form-elements.component';
+import { DropdownComponent } from './dropdown/dropdown.component';
+import { TextboxComponent } from './textbox/textbox.component';
+import { TextareaComponent } from './textarea/textarea.component';
+import { CheckboxComponent } from './checkbox/checkbox.component';
+import { FormComponent } from './form/form.component';
+import { OptionGroupComponent } from './option-group/option-group.component';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { DropdownIconComponent } from './icon/dropdown/dropdownIcon.component';
+import { MultipleDropdownComponent } from './multiple-dropdown/multiple-dropdown.component';
+import { CaretDownComponent } from './icon/caret-down/caret-down.component';
+import { PipesModule } from './pipes/pipes.module';
+import { RedExclamationComponent } from './icon/red-exclamation/red-exclamation.component';
+import { GreenTickComponent } from './icon/green-tick/green-tick.component';
+import { EmptyCircleComponent } from './icon/empty-circle/empty-circle.component';
+
+@NgModule({
+   declarations: [
+      CommonFormElementsComponent,
+      DropdownComponent,
+      TextboxComponent,
+      TextareaComponent,
+      CheckboxComponent,
+      FormComponent,
+      OptionGroupComponent,
+      DropdownIconComponent,
+      MultipleDropdownComponent,
+      CaretDownComponent,
+      RedExclamationComponent,
+      GreenTickComponent,
+      EmptyCircleComponent
+   ],
+   imports: [
+      CommonModule,
+      ReactiveFormsModule,
+      FormsModule,
+      PipesModule
+   ],
+   exports: [
+      CommonFormElementsComponent,
+      DropdownComponent,
+      CaretDownComponent,
+      TextboxComponent,
+      TextareaComponent,
+      CheckboxComponent,
+      FormComponent,
+      OptionGroupComponent,
+      DropdownIconComponent,
+      RedExclamationComponent,
+      GreenTickComponent,
+      EmptyCircleComponent,
+      MultipleDropdownComponent
+   ]
+})
+export class CommonFormElementsModule { }

projects/common-form-elements/src/lib/common-form-elements.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { CommonFormElementsService } from './common-form-elements.service';
+
+describe('CommonFormElementsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: CommonFormElementsService = TestBed.get(CommonFormElementsService);
+    expect(service).toBeTruthy();
+  });
+});

projects/common-form-elements/src/lib/common-form-elements.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommonFormElementsService {
+
+  constructor() { }
+}

projects/common-form-elements/src/lib/dropdown/dropdown.component.css

+label {
+    display: block;
+    padding: 10px;
+    font-size: 1rem;
+}
+
+.dropdown-icon {
+    position: absolute;
+    top: 0.5rem;
+    right: 18px;
+    z-index: 1;
+}
+.dropdown-container{
+  position: relative;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  text-indent: 1px;
+  text-overflow: '';
+}
+
+select[disabled] {
+  opacity: 0.3;
+}
+
+.sb-dropdown-select {
+  opacity: 0.99;
+  color: #333333;
+  font-family: "Noto Sans";
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0;
+  line-height: 17px;
+}
+
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    text-indent: 1px;
+    text-overflow: '';
+}
+
+.sb-dropdown-select {
+    opacity: 0.99;
+    color: #333333;
+    font-family: "Noto Sans";
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 0;
+    line-height: 17px;
+}
+
+.sb-dropdown {
+    margin-bottom: 8px;
+}
+
+.placeholder select option:first-child {
+    color: #999999;
+}
+
+.option-default {
+    color: #333333;
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.sb-dropdown select {
+    background-color: white;
+    padding: 10px 20px 10px 20px;
+    font-size: 14px;
+    width: 100%;
+    border: 0.5px solid #333333;
+}