sample(EJ2-47773): Showcase sample updated with latest styles.
This commit is contained in:
Kanagambigai
Родитель
af316c4a66
Коммит
12f72c0738
|
|
@ -1,60 +0,0 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "ej2-ng-loan-calculator"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "css",
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major version
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# 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
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -9,4 +9,7 @@ node_modules/
|
|||
npm-debug.log
|
||||
*ngfactory.ts
|
||||
*metadata.json
|
||||
*ngsummary.json
|
||||
*ngsummary.json
|
||||
src/assets/index.css
|
||||
src/assets/*.css
|
||||
*.css
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
registry=https://registry.npmjs.org/
|
||||
@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-release
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"ej2-ng-loan-calculator": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/ej2-ng-loan-calculator",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "ej2-ng-loan-calculator:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "ej2-ng-loan-calculator:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "ej2-ng-loan-calculator:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "ej2-ng-loan-calculator:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "ej2-ng-loan-calculator:serve:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}},
|
||||
"defaultProject": "ej2-ng-loan-calculator"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"sasslint": ["./src/assets/**/*.scss"],
|
||||
"tslint": ["./src/app/**/*.ts", "!./src/app/**/*-model.d.ts", "!./src/app/**/**/*.d.ts", "!./src/app/**/**/*.ngfactory.ts"],
|
||||
"ts": ["./src/app/**/*.ts", "!./node_modules/**/*.ts"],
|
||||
"styleDependency":["ej2"],
|
||||
"isShowCase": true
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { AppPage } from './app.po';
|
||||
|
||||
describe('ej2-ng-loan-calculator App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to app!');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,14 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
require("@syncfusion/ej2-sample-helpers");
|
||||
|
||||
var fs = require('fs');
|
||||
var glob = require('glob');
|
||||
var runSequence = require('run-sequence');
|
||||
// var build = require("@syncfusion/ej2-build");
|
||||
var gulp = require("gulp");
|
||||
var webpack = require("webpack");
|
||||
|
||||
var shelljs = global.shelljs = global.shelljs || require('shelljs');
|
||||
// var common = require("./node_modules/@syncfusion/ej2-build/src/utils/common.js");
|
||||
// var isReleaseBranch = /^((release\/|hotfix\/))/g.test(process.env.BRANCH_NAME);
|
||||
|
||||
gulp.task('styles', function() {
|
||||
var sass = require('gulp-sass');
|
||||
return gulp.src(['./src/assets/**/*.scss'], { base: './' })
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded',
|
||||
includePaths: './node_modules/@syncfusion/'
|
||||
}))
|
||||
.pipe(gulp.dest('.'));
|
||||
});
|
||||
|
||||
gulp.task('build', function(done) {
|
||||
shelljs.exec('npm run build', function (exitCode) {
|
||||
done(exitCode);
|
||||
})
|
||||
runSequence('styles');
|
||||
});
|
||||
|
||||
gulp.task('serve', ['build'], function (done) {
|
||||
var browserSync = require('browser-sync');
|
||||
var bs = browserSync.create('Essential TypeScript');
|
||||
var options = {
|
||||
server: {
|
||||
baseDir: './src'
|
||||
},
|
||||
ui: false
|
||||
};
|
||||
bs.init(options, done);
|
||||
});
|
||||
|
||||
gulp.task('clear-all', function () {
|
||||
return gulp.src(['src/**/*.js.map', 'src/**/*.json', 'src/**/*.js', 'src/**/*.d.ts', 'src/**/*.ngfactory.ts', 'src/**/*.ngstyle.ts']).pipe(clean({
|
||||
force: true
|
||||
}))
|
||||
});
|
||||
|
|
@ -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/ej2-ng-loan-calculator'),
|
||||
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
|
||||
});
|
||||
};
|
||||
132
package.json
132
package.json
|
|
@ -1,73 +1,61 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-ng-loan-calculator",
|
||||
"version": "0.0.1",
|
||||
"description": "Essential JS 2 for Angular - Loan Calculator application",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"rxjs": "^5.0.1",
|
||||
"tslint": "4.0.2",
|
||||
"zone.js": "^0.8.4",
|
||||
"core-js": "^2.4.1",
|
||||
"systemjs": "^0.19.40",
|
||||
"gulp-print": "^2.0.1",
|
||||
"gulp-tslint": "^7.0.1",
|
||||
"browser-sync": "2.11.2",
|
||||
"gulp-sass-lint": "^1.1.1",
|
||||
"reflect-metadata": "^0.1.9",
|
||||
"tslint-microsoft-contrib": "^4.0.0",
|
||||
"@angular/core": "~5.0.0",
|
||||
"@angular/http": "~5.0.0",
|
||||
"@angular/forms": "~5.0.0",
|
||||
"@angular/router": "^5.0.0",
|
||||
"@angular/common": "~5.0.0",
|
||||
"@angular-devkit/core": "^0.4.5",
|
||||
"@angular/upgrade": "^5.0.0",
|
||||
"@angular/compiler": "~5.0.0",
|
||||
"@angular/platform-browser": "~5.0.0",
|
||||
"@angular/platform-browser-dynamic": "~5.0.0",
|
||||
"@syncfusion/ej2-ng-base": "*",
|
||||
"@syncfusion/ej2-ng-buttons": "*",
|
||||
"@syncfusion/ej2-ng-grids": "*",
|
||||
"@syncfusion/ej2-ng-inputs": "*",
|
||||
"@syncfusion/ej2-ng-charts": "*",
|
||||
"@syncfusion/ej2-ng-calendars": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.5.6",
|
||||
"@angular/compiler-cli": "5.0.0",
|
||||
"@angular/platform-server": "5.0.0",
|
||||
"@types/jasmine": "^2.2.29",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"@types/node": "^6.0.46",
|
||||
"gulp": "^3.9.0",
|
||||
"webpack": "2.5.1",
|
||||
"shelljs": "^0.7.0",
|
||||
"typescript": "~2.4.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-clean": "^0.3.2",
|
||||
"run-sequence": "2.2.0",
|
||||
"webpack-stream": "^3.2.0",
|
||||
"karma-systemjs": "^0.16.0",
|
||||
"gulp-typescript": "^2.13.0",
|
||||
"es6-module-loader": "^0.17.11",
|
||||
"systemjs-plugin-babel": "0.0.17"
|
||||
},
|
||||
"keywords": [
|
||||
"ej2",
|
||||
"samples",
|
||||
"loan-calculator",
|
||||
"syncfusion",
|
||||
"ej2-samples",
|
||||
"ej2-ng-loan-calculator",
|
||||
"ej2-showcase-samples",
|
||||
"syncfusion-samples",
|
||||
"syncfusion-loan-calculator"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "npm run scripts && gulp styles && gulp bundle",
|
||||
"scripts": "ngc -p tsconfig-aot.json",
|
||||
"bundle": "gulp bundle",
|
||||
"ci-publish": "gulp publish-samples"
|
||||
}
|
||||
}
|
||||
"name": "@syncfusion/ej2-ng-loan-calculator",
|
||||
"version": "0.0.1",
|
||||
"description": "Essential JS 2 for Angular - Loan Calculator application",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"scss": "gulp styles"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~10.0.0",
|
||||
"@angular/common": "~10.0.0",
|
||||
"@angular/compiler": "~10.0.0",
|
||||
"@angular/core": "~10.0.0",
|
||||
"@angular/forms": "~10.0.0",
|
||||
"@angular/platform-browser": "~10.0.0",
|
||||
"@angular/platform-browser-dynamic": "~10.0.0",
|
||||
"@angular/router": "~10.0.0",
|
||||
"@syncfusion/ej2-angular-base": "*",
|
||||
"@syncfusion/ej2-angular-buttons": "*",
|
||||
"@syncfusion/ej2-angular-calendars": "*",
|
||||
"@syncfusion/ej2-angular-charts": "*",
|
||||
"@syncfusion/ej2-angular-grids": "*",
|
||||
"@syncfusion/ej2-angular-inputs": "*",
|
||||
"@syncfusion/ej2-sample-helpers": "*",
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"run-sequence": "2.2.0",
|
||||
"shelljs": "^0.7.0",
|
||||
"rxjs": "~6.5.5",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1000.0",
|
||||
"@angular/cli": "~10.0.0",
|
||||
"@angular/compiler-cli": "~10.0.0",
|
||||
"@types/node": "^10.13.0",
|
||||
"@types/jasmine": "~3.5.0",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"codelyzer": "^6.0.0-next.1",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~5.0.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||
"karma-jasmine": "~3.3.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~3.9.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<h2 class="header-style">Loan Calculator</h2>
|
||||
<h1 class="header-style">Loan Calculator</h1>
|
||||
<div class="container main-content" id="content">
|
||||
<home-section #homeSection></home-section>
|
||||
<statement-section #statementSection></statement-section>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import { DataService } from './data-service';
|
|||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { NumericTextBoxModule, SliderModule } from '@syncfusion/ej2-ng-inputs';
|
||||
import { RadioButtonModule } from '@syncfusion/ej2-ng-buttons';
|
||||
import { AccumulationChartModule, ChartModule } from '@syncfusion/ej2-ng-charts';
|
||||
import { DatePickerModule } from '@syncfusion/ej2-ng-calendars';
|
||||
import { GridModule } from '@syncfusion/ej2-ng-grids';
|
||||
import { NumericTextBoxModule, SliderModule } from '@syncfusion/ej2-angular-inputs';
|
||||
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
|
||||
import { AccumulationChartModule, ChartModule } from '@syncfusion/ej2-angular-charts';
|
||||
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
|
||||
import { GridModule } from '@syncfusion/ej2-angular-grids';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export class DataService {
|
|||
public totalPrincipalYear: number = 0;
|
||||
public totalInterestYear: number = 0;
|
||||
public inter: number;
|
||||
public dataUnits: [Object] = <[Object]>[];
|
||||
public dataUnits: Object[] = [];
|
||||
public dateObj: Date = new Date();
|
||||
public totalInterest: number = 0;
|
||||
public totalAmount: number = 0;
|
||||
|
|
@ -47,7 +47,7 @@ export class DataService {
|
|||
public endBalance: number;
|
||||
public beginBalance: number;
|
||||
public yearTotal: number = 0;
|
||||
public monthNames: [string] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
|
||||
public monthNames: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
|
||||
public intl: Internationalization = new Internationalization();
|
||||
|
||||
public getCurrencyVal(value: number): string {
|
||||
|
|
@ -182,8 +182,8 @@ export class DataService {
|
|||
this.emi = this.calculateEMI();
|
||||
this.princ = this.principalValue;
|
||||
this.tent = this.yearTenure ? (this.loanValue * 12) : this.loanValue;
|
||||
this.dataUnits = <[Object]>[];
|
||||
this.yearWiseData = <[Object]>[];
|
||||
this.dataUnits = [];
|
||||
this.yearWiseData = [];
|
||||
this.dateObj = new Date(this.dateValue.getTime());
|
||||
this.totalInterest = 0;
|
||||
this.totalAmount = 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||
import { closest } from '@syncfusion/ej2-base';
|
||||
import { GridComponent } from '@syncfusion/ej2-ng-grids';
|
||||
import { GridComponent } from '@syncfusion/ej2-angular-grids';
|
||||
import { Grid, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { DataService } from '../data-service';
|
||||
Grid.Inject(DetailRow);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip,
|
|||
Chart, LineSeries, DateTime, Legend, Tooltip, IAccLoadedEventArgs, AccumulationTheme, IAccPointRenderEventArgs,
|
||||
StackingColumnSeries, Crosshair, DataLabel, ColumnSeries, IMouseEventArgs, Series
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { AccumulationChartComponent } from '@syncfusion/ej2-ng-charts';
|
||||
import { AccumulationChartComponent } from '@syncfusion/ej2-angular-charts';
|
||||
import { DataService } from '../../data-service';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||
import { NumericTextBoxComponent, SliderTickRenderedEventArgs } from '@syncfusion/ej2-ng-inputs';
|
||||
import { NumericTextBoxComponent, SliderTickRenderedEventArgs } from '@syncfusion/ej2-angular-inputs';
|
||||
import { ChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { DataService } from '../../data-service';
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ export class InputComponent implements OnInit {
|
|||
}
|
||||
|
||||
public principalRenderedTicks(args: SliderTickRenderedEventArgs): void {
|
||||
let li: NodeListOf<Element> = args.ticksWrapper.getElementsByClassName('e-large');
|
||||
let li: HTMLCollectionBase = args.ticksWrapper.getElementsByClassName('e-large');
|
||||
for (let i: number = 0; i < li.length; ++i) {
|
||||
let ele: HTMLElement = (li[i].querySelectorAll('.e-tick-value')[0] as HTMLElement);
|
||||
let num: number = parseInt(ele.innerText.substring(1).replace(/,/g , ''), 10) / 1000;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import { platformBrowser } from '@angular/platform-browser';
|
||||
import { AppModuleNgFactory } from './app.module.ngfactory';
|
||||
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
import { ChangedEventArgs } from '@syncfusion/ej2-ng-calendars';
|
||||
import { ChangedEventArgs } from '@syncfusion/ej2-angular-calendars';
|
||||
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
|
||||
import { DataService } from '../data-service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,803 +0,0 @@
|
|||
.content-space {
|
||||
display: block;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-space table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-space label {
|
||||
float: left;
|
||||
margin-top: 6px;
|
||||
color: #E7E7E7;
|
||||
font-size: 16px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.editor-space {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.form-space {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-space:not(:first-child) {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.component-content {
|
||||
border-radius: 3px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.parent {
|
||||
min-height: 85px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.child {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.top-space {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.top-space h6 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.emi-content {
|
||||
max-width: 634px;
|
||||
max-height: 660px;
|
||||
margin: 30px 0 25px 0;
|
||||
padding: 0 44px;
|
||||
}
|
||||
|
||||
.emi-content h6 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emi-content .emi-header {
|
||||
font-size: 20px;
|
||||
color: #E7E7E7;
|
||||
letter-spacing: 0.7px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.emi-content .emi-footer {
|
||||
font-size: 18px;
|
||||
color: #989CA9;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emi-content h1 {
|
||||
color: #F5F5F5;
|
||||
font-size: 32px;
|
||||
font-family: "Roboto";
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emi-content > div > h6 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.top-margin {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bottom-margin {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.pie-content {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pie-content p {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
color: #989CA9;
|
||||
}
|
||||
|
||||
.pie-content .pie-icon {
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
margin: 0 14px 0 0;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.pie-content .pie-icon.pie-principal {
|
||||
background: linear-gradient(#3AC8DC, #5B6BC0);
|
||||
}
|
||||
|
||||
.pie-content .pie-icon.pie-interest {
|
||||
background: linear-gradient(#F3A55B, #FB6589);
|
||||
}
|
||||
|
||||
.pie-content h5 {
|
||||
font-size: 18px;
|
||||
font-family: "Roboto";
|
||||
font-weight: 500;
|
||||
color: #F5F5F5;
|
||||
padding: 5px 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pie-content > div {
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.pie-content > div:first-child {
|
||||
margin-top: 43px;
|
||||
}
|
||||
|
||||
.pie-content > div.pie-total p:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pie-content > div.pie-total p + p {
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.center-heading {
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.border-set {
|
||||
border: 1px solid #e4e2e2;
|
||||
}
|
||||
|
||||
.tenure-value {
|
||||
display: flex;
|
||||
padding: 4px 5px 4px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tenure-value li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tenure-value .e-radio + label::before {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.tenure-value .e-radio + label::before, .tenure-value .e-radio + label:hover::before {
|
||||
border-color: #3B9ED4;
|
||||
background-color: #3A4360;
|
||||
}
|
||||
|
||||
.tenure-value .e-radio + label::after, .tenure-value .e-radio + label:hover::after {
|
||||
background-color: #3B9ED4;
|
||||
}
|
||||
|
||||
.tenure-value .e-radio + label .e-label {
|
||||
color: #E7E7E7;
|
||||
font-size: 16px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tenure-value .e-radio:focus + label::before {
|
||||
border-color: #3B9ED4;
|
||||
background-color: #3A4360;
|
||||
}
|
||||
|
||||
.tenure-value .e-radio:focus + label::after {
|
||||
background-color: #3B9ED4;
|
||||
}
|
||||
|
||||
.tenure-value > li {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.graph-container {
|
||||
height: 520px;
|
||||
padding: 0 33px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.border-unset-left {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.border-unset-right {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-top: 40px;
|
||||
max-width: 1300px;
|
||||
}
|
||||
|
||||
.main-content .loan-content {
|
||||
background-color: #27304c;
|
||||
color: #E7E7E7;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-scale {
|
||||
color: #ABABAB;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-scale .e-tick.e-large {
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-scale .e-tick .e-tick-value {
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-slider .e-slider-track {
|
||||
background: #20273E;
|
||||
border-color: #20273E;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-slider .e-handle {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
top: calc(50% - 13px);
|
||||
margin-left: -13px;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-slider .e-handle::before {
|
||||
content: '';
|
||||
background: #3B9ED4;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
border-radius: 16px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-slider .e-range {
|
||||
background-color: #3B9ED4;
|
||||
top: calc(50% - 5px);
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-slider .e-slider-track, .main-content .e-slider-container .e-slider .e-range {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.main-content .e-slider-container .e-slider .e-handle, .main-content .e-slider-container .e-slider .e-slider-track, .main-content .e-slider-container .e-slider .e-range {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.main-content .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
|
||||
border-color: #475274;
|
||||
background: #3A4360;
|
||||
}
|
||||
|
||||
.main-content .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-focus) {
|
||||
border-color: #404D75;
|
||||
}
|
||||
|
||||
.main-content .e-input-group.e-control-wrapper .e-input-group-icon {
|
||||
background: #3A4360;
|
||||
color: #95979c;
|
||||
border-color: #475274;
|
||||
}
|
||||
|
||||
.main-content .e-input-group.e-control-wrapper .e-input-group-icon:hover {
|
||||
background: #404D75;
|
||||
color: #95979c;
|
||||
}
|
||||
|
||||
.main-content .e-input-group.e-control-wrapper .e-spin-down {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.main-content .e-input-group.e-control-wrapper input.e-input {
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
height: 38px;
|
||||
background-color: #3A4360;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-content .graph-text {
|
||||
color: #E7E7E7;
|
||||
font-size: 20px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.7px;
|
||||
margin: 0 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.main-content .graph-input {
|
||||
display: inline-block;
|
||||
margin: 34px 22px;
|
||||
}
|
||||
|
||||
.main-content .e-grid {
|
||||
border-color: #27304c;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-gridheader {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-icon-grightarrow, .main-content .e-grid .e-icon-gdownarrow {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 1px solid #fff;
|
||||
margin: auto;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-icon-grightarrow::before, .main-content .e-grid .e-icon-gdownarrow::before {
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-icon-grightarrow::before {
|
||||
content: '+';
|
||||
margin: -4px 0 0 -4px;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-icon-gdownarrow::before {
|
||||
content: '-';
|
||||
margin: -6px 0 0 -2px;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-headercelldiv {
|
||||
font-size: 14px;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-columnheader {
|
||||
background: linear-gradient(-90deg, #5B6BC0, #3AC8DC);
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-headercell, .main-content .e-grid .e-detailheadercell {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-rowcell, .main-content .e-grid .e-detailrowcollapse, .main-content .e-grid .e-detailrowexpand, .main-content .e-grid .e-detailindentcell, .main-content .e-grid .e-detailrow .e-altrow .e-rowcell {
|
||||
background: #27304c;
|
||||
border-width: 0;
|
||||
font-size: 13px;
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-altrow .e-rowcell, .main-content .e-grid .e-altrow .e-detailrowcollapse, .main-content .e-grid .e-altrow .e-detailrowexpand {
|
||||
background: #313B5A;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-icons, .main-content .e-grid .e-rowcell, .main-content .e-grid .e-detailrowcollapse, .main-content .e-grid .e-detailrowexpand {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-detailcell {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.main-content .e-grid.e-gridhover tr[role='row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .main-content .e-grid.e-gridhover tr[role='row']:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .main-content .e-grid.e-gridhover tr[role='row']:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
|
||||
background: #404D75;
|
||||
}
|
||||
|
||||
.main-content .e-grid .e-grid .e-headercontent, .main-content .e-grid .e-grid .e-gridcontent .e-emptyrow, .main-content .e-grid .e-grid .e-spinner-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content .e-grid [aria-selected] + tr .e-detailindentcell {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
#principal_svg stop {
|
||||
stop-color: #3AC8DC;
|
||||
}
|
||||
|
||||
#principal_svg stop[offset="0"] {
|
||||
stop-color: #3AC8DC;
|
||||
}
|
||||
|
||||
#principal_svg stop[offset="1"] {
|
||||
stop-color: #5B6BC0;
|
||||
}
|
||||
|
||||
#interest_svg stop {
|
||||
stop-color: #F3A55B;
|
||||
}
|
||||
|
||||
#interest_svg stop[offset="0"] {
|
||||
stop-color: #e97c11;
|
||||
}
|
||||
|
||||
#interest_svg stop[offset="1"] {
|
||||
stop-color: #FB6589;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-container .col-lg-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.flex-container .col-lg-4 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #162036;
|
||||
color: #E7E7E7;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
background-color: #27304c;
|
||||
max-height: 660px;
|
||||
margin: 25px 0;
|
||||
padding: 0 44px;
|
||||
border-right: 1px solid #475274;
|
||||
}
|
||||
|
||||
.header-style {
|
||||
background: #27304c;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 26px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.margin-setter {
|
||||
margin: 35px;
|
||||
}
|
||||
|
||||
.start-setter {
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
.e-datepicker.e-popup-wrapper {
|
||||
border-color: #475274;
|
||||
}
|
||||
|
||||
.e-datepicker .e-calendar {
|
||||
background-color: #3A4360;
|
||||
}
|
||||
|
||||
.e-calendar .e-header .e-title, .e-calendar .e-content span, .e-calendar .e-header.e-decade .e-title,
|
||||
.e-calendar .e-header .e-title:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.e-calendar .e-header .e-icon-container span, .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
|
||||
.e-calendar .e-header button.e-prev:active span, .e-calendar .e-header button.e-next:active span {
|
||||
color: #95979c;
|
||||
}
|
||||
|
||||
.e-calendar .e-content td.e-selected span.e-day, .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active {
|
||||
background: #5B6BC0;
|
||||
}
|
||||
|
||||
.e-calendar .e-content.e-decade tr:first-child .e-cell:first-child span.e-day, .e-calendar .e-content.e-decade tr:last-child .e-cell:last-child span.e-day {
|
||||
color: #ABABAB;
|
||||
}
|
||||
|
||||
.e-calendar .e-header .e-prev:hover, .e-calendar .e-header .e-next:hover, .e-calendar .e-content td.e-focused-date span.e-day,
|
||||
.e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
|
||||
.e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
|
||||
background: #404D75;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 319px) {
|
||||
.container {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.header-style {
|
||||
font-size: 20px;
|
||||
padding: 13px 0;
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.container .e-slider-container .e-scale .e-tick .e-tick-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
.top-space {
|
||||
margin: 10px;
|
||||
}
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.left-content-wrap .loan-content:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.left-content {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
.left-content .col-lg-12 {
|
||||
padding: 12px 12px 18px 12px;
|
||||
}
|
||||
.left-content .content-space {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
.left-content .content-space td {
|
||||
display: block;
|
||||
}
|
||||
.left-content .content-space label {
|
||||
font-size: 15px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.left-content .content-space .tenure-value .e-radio + label {
|
||||
margin: 0;
|
||||
}
|
||||
.left-content .content-space .tenure-value .e-radio + label .e-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
.left-content .editor-space {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.left-content .form-space {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
.left-content .form-space:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.left-content .e-input-group {
|
||||
width: 100% !important;
|
||||
}
|
||||
.emi-content {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.emi-content .emi-header {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tenure-value {
|
||||
padding: 0;
|
||||
float: none;
|
||||
}
|
||||
.emi-content h6 {
|
||||
font-size: 23px;
|
||||
}
|
||||
.emi-content h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.emi-content .col-lg-7 {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.emi-content .col-lg-5 {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.pie-content div {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.pie-content div:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pie-content p {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
.pie-content h5 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
.pie-content .pie-total span {
|
||||
display: inline-block;
|
||||
}
|
||||
.pie-content .pie-total p {
|
||||
display: block;
|
||||
}
|
||||
.main-content .loan-content .graph-text {
|
||||
margin: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main-content .loan-content .graph-input {
|
||||
padding: 0 12px 12px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.center-heading {
|
||||
font-size: 18px;
|
||||
}
|
||||
.graph-container {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 991px) {
|
||||
.container {
|
||||
padding: 0 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.left-content-wrap .loan-content {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.left-content-wrap .loan-content + .loan-content {
|
||||
margin-top: 30px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.left-content {
|
||||
border-right-width: 0;
|
||||
}
|
||||
.emi-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
.emi-content .col-lg-7 {
|
||||
width: 60%;
|
||||
float: left;
|
||||
}
|
||||
.emi-content .col-lg-5 {
|
||||
width: 40%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.main-content .graph-text {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.main-content .graph-input {
|
||||
margin: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
padding: 0 35px;
|
||||
width: 100%;
|
||||
}
|
||||
.left-content-wrap .loan-content {
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.left-content-wrap .loan-content + .loan-content {
|
||||
margin: 0;
|
||||
}
|
||||
.left-content {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
.left-content {
|
||||
min-width: 450px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.emi-content {
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.emi-content .col-lg-7 {
|
||||
width: 60%;
|
||||
float: left;
|
||||
}
|
||||
.emi-content .col-lg-5 {
|
||||
width: 40%;
|
||||
float: left;
|
||||
}
|
||||
.emi-content .emi-footer {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.graph-container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1329px) {
|
||||
.container {
|
||||
padding: 0 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.container {
|
||||
width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
.e-grid#scheduleGrid > .e-gridheader .e-headercontent .e-table colgroup col:first-child,
|
||||
.e-grid .e-content .e-table#scheduleGrid_content_table > colgroup col:first-child {
|
||||
width: 0px !important;
|
||||
}
|
||||
|
||||
.e-grid .e-detailrowexpand > div,
|
||||
.e-grid .e-detailrowcollapse > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.e-grid .e-row .e-row-toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@ $tick-color: #ABABAB;
|
|||
|
||||
.component-content {
|
||||
border-radius: 3px;
|
||||
height: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.parent {
|
||||
|
|
@ -326,6 +326,7 @@ li {
|
|||
.e-tick-value {
|
||||
@include Roboto-400();
|
||||
font-size: 13px;
|
||||
color: $tick-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -500,17 +501,11 @@ li {
|
|||
|
||||
&:not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
|
||||
background: $hover-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.e-grid {
|
||||
|
||||
& .e-headercontent, & .e-gridcontent .e-emptyrow, & .e-spinner-pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& [aria-selected] + tr .e-detailindentcell {
|
||||
border-width: 0;
|
||||
}
|
||||
|
|
@ -899,3 +894,6 @@ body {
|
|||
.e-grid .e-row .e-row-toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
#payment_pieChartPointHover_Border {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
20982
src/assets/styles.css
20982
src/assets/styles.css
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,3 +1,7 @@
|
|||
//sass-lint:disable-all
|
||||
@import 'ej2-inputs/styles/bootstrap.scss';
|
||||
@import 'ej2-grids/styles/bootstrap.scss';
|
||||
@import 'ej2-buttons/styles/bootstrap.scss';
|
||||
@import 'ej2-base/styles/bootstrap.scss';
|
||||
@import 'ej2-calendars/styles/bootstrap.scss';
|
||||
@import 'ej2-popups/styles/bootstrap.scss';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || []; w[l].push({
|
||||
'gtm.start':
|
||||
new Date().getTime(), event: 'gtm.js'
|
||||
}); var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-WLQL39J');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<title>Essential JS 2 for Angular - Loan Calculator</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="Essential JS 2 for Angular - Loan Calculator">
|
||||
<meta name="description" content="Essential JS 2 for Angular - Loan Calculator - You can use this application to Calculates your loan payment based on your loan amount, interest and term">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:500,600" rel="stylesheet">
|
||||
<link href="./styles.css" rel="stylesheet" />
|
||||
<link href="./styles.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
|
@ -21,9 +32,15 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript>
|
||||
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
||||
</noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div hidden id="sync-analytics" data-queue="EJ2 - Showcase - Angular - Loan Calculator"></div>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
|
||||
<script src="./dist/common.js"></script>
|
||||
<!-- <script src="./dist/common.js"></script> -->
|
||||
|
||||
</html>
|
||||
|
|
@ -10,4 +10,3 @@ if (environment.production) {
|
|||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.log(err));
|
||||
|
||||
|
|
|
|||
|
|
@ -11,54 +11,51 @@
|
|||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
||||
// import 'core-js/es6/symbol';
|
||||
// import 'core-js/es6/object';
|
||||
// import 'core-js/es6/function';
|
||||
// import 'core-js/es6/parse-int';
|
||||
// import 'core-js/es6/parse-float';
|
||||
// import 'core-js/es6/number';
|
||||
// import 'core-js/es6/math';
|
||||
// import 'core-js/es6/string';
|
||||
// import 'core-js/es6/date';
|
||||
// import 'core-js/es6/array';
|
||||
// import 'core-js/es6/regexp';
|
||||
// import 'core-js/es6/map';
|
||||
// import 'core-js/es6/weak-map';
|
||||
// import 'core-js/es6/set';
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** IE10 and IE11 requires the following for the Reflect API. */
|
||||
// import 'core-js/es6/reflect';
|
||||
|
||||
|
||||
/** Evergreen browsers require these. **/
|
||||
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
|
||||
import 'core-js/es7/reflect';
|
||||
|
||||
|
||||
/**
|
||||
* Required to support Web Animations `@angular/platform-browser/animations`.
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
**/
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
//import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"baseUrl": "./",
|
||||
"module": "es2015",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"declaration": true,
|
||||
"lib": ["es2015", "dom"],
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"types": ["requirejs"]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
],
|
||||
"files": [
|
||||
"src/app/app.module.ts",
|
||||
"src/app/main.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"skipMetadataEmit": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"module": "es6",
|
||||
"lib": [
|
||||
"es2015",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "amd",
|
||||
"declaration": true,
|
||||
"removeComments": true,
|
||||
"noLib": false,
|
||||
"lib": ["es2015", "dom"],
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"sourceMap": true,
|
||||
"pretty": true,
|
||||
"allowUnreachableCode": false,
|
||||
"allowUnusedLabels": false,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitUseStrict": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"allowJs": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node",
|
||||
"types": ["requirejs"]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"target": "es2015",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"compileOnSave": false
|
||||
}
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/test.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rules": {
|
||||
"align": {
|
||||
"options": [
|
||||
"parameters",
|
||||
"statements"
|
||||
]
|
||||
},
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": true,
|
||||
"curly": true,
|
||||
"deprecation": {
|
||||
"severity": "warning"
|
||||
},
|
||||
"component-class-suffix": true,
|
||||
"contextual-lifecycle": true,
|
||||
"directive-class-suffix": true,
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
],
|
||||
"eofline": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": {
|
||||
"options": [
|
||||
"spaces"
|
||||
]
|
||||
},
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [
|
||||
true,
|
||||
"as-needed"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"semicolon": {
|
||||
"options": [
|
||||
"always"
|
||||
]
|
||||
},
|
||||
"space-before-function-paren": {
|
||||
"options": {
|
||||
"anonymous": "never",
|
||||
"asyncArrow": "always",
|
||||
"constructor": "never",
|
||||
"method": "never",
|
||||
"named": "never"
|
||||
}
|
||||
},
|
||||
"typedef": [
|
||||
true,
|
||||
"call-signature"
|
||||
],
|
||||
"typedef-whitespace": {
|
||||
"options": [
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
},
|
||||
{
|
||||
"call-signature": "onespace",
|
||||
"index-signature": "onespace",
|
||||
"parameter": "onespace",
|
||||
"property-declaration": "onespace",
|
||||
"variable-declaration": "onespace"
|
||||
}
|
||||
]
|
||||
},
|
||||
"variable-name": {
|
||||
"options": [
|
||||
"ban-keywords",
|
||||
"check-format",
|
||||
"allow-pascal-case"
|
||||
]
|
||||
},
|
||||
"whitespace": {
|
||||
"options": [
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-typecast"
|
||||
]
|
||||
},
|
||||
"no-conflicting-lifecycle": true,
|
||||
"no-host-metadata-property": true,
|
||||
"no-input-rename": true,
|
||||
"no-inputs-metadata-property": true,
|
||||
"no-output-native": true,
|
||||
"no-output-on-prefix": true,
|
||||
"no-output-rename": true,
|
||||
"no-outputs-metadata-property": true,
|
||||
"template-banana-in-box": true,
|
||||
"template-no-negated-async": true,
|
||||
"use-lifecycle-interface": true,
|
||||
"use-pipe-transform-interface": true
|
||||
},
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
]
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче