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
|
npm-debug.log
|
||||||
*ngfactory.ts
|
*ngfactory.ts
|
||||||
*metadata.json
|
*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",
|
"extends": "../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "../out-tsc/spec",
|
"outDir": "../out-tsc/e2e",
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
"types": [
|
"types": [
|
||||||
"jasmine",
|
"jasmine",
|
||||||
|
"jasminewd2",
|
||||||
"node"
|
"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",
|
"name": "@syncfusion/ej2-ng-loan-calculator",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "Essential JS 2 for Angular - Loan Calculator application",
|
"description": "Essential JS 2 for Angular - Loan Calculator application",
|
||||||
"author": "Syncfusion Inc.",
|
"author": "Syncfusion Inc.",
|
||||||
"license": "SEE LICENSE IN license",
|
"license": "SEE LICENSE IN license",
|
||||||
"dependencies": {
|
"scripts": {
|
||||||
"rxjs": "^5.0.1",
|
"ng": "ng",
|
||||||
"tslint": "4.0.2",
|
"start": "ng serve",
|
||||||
"zone.js": "^0.8.4",
|
"build": "ng build",
|
||||||
"core-js": "^2.4.1",
|
"test": "ng test",
|
||||||
"systemjs": "^0.19.40",
|
"lint": "ng lint",
|
||||||
"gulp-print": "^2.0.1",
|
"e2e": "ng e2e",
|
||||||
"gulp-tslint": "^7.0.1",
|
"scss": "gulp styles"
|
||||||
"browser-sync": "2.11.2",
|
},
|
||||||
"gulp-sass-lint": "^1.1.1",
|
"private": true,
|
||||||
"reflect-metadata": "^0.1.9",
|
"dependencies": {
|
||||||
"tslint-microsoft-contrib": "^4.0.0",
|
"@angular/animations": "~10.0.0",
|
||||||
"@angular/core": "~5.0.0",
|
"@angular/common": "~10.0.0",
|
||||||
"@angular/http": "~5.0.0",
|
"@angular/compiler": "~10.0.0",
|
||||||
"@angular/forms": "~5.0.0",
|
"@angular/core": "~10.0.0",
|
||||||
"@angular/router": "^5.0.0",
|
"@angular/forms": "~10.0.0",
|
||||||
"@angular/common": "~5.0.0",
|
"@angular/platform-browser": "~10.0.0",
|
||||||
"@angular-devkit/core": "^0.4.5",
|
"@angular/platform-browser-dynamic": "~10.0.0",
|
||||||
"@angular/upgrade": "^5.0.0",
|
"@angular/router": "~10.0.0",
|
||||||
"@angular/compiler": "~5.0.0",
|
"@syncfusion/ej2-angular-base": "*",
|
||||||
"@angular/platform-browser": "~5.0.0",
|
"@syncfusion/ej2-angular-buttons": "*",
|
||||||
"@angular/platform-browser-dynamic": "~5.0.0",
|
"@syncfusion/ej2-angular-calendars": "*",
|
||||||
"@syncfusion/ej2-ng-base": "*",
|
"@syncfusion/ej2-angular-charts": "*",
|
||||||
"@syncfusion/ej2-ng-buttons": "*",
|
"@syncfusion/ej2-angular-grids": "*",
|
||||||
"@syncfusion/ej2-ng-grids": "*",
|
"@syncfusion/ej2-angular-inputs": "*",
|
||||||
"@syncfusion/ej2-ng-inputs": "*",
|
"@syncfusion/ej2-sample-helpers": "*",
|
||||||
"@syncfusion/ej2-ng-charts": "*",
|
"gulp": "^3.9.0",
|
||||||
"@syncfusion/ej2-ng-calendars": "*"
|
"gulp-sass": "^3.1.0",
|
||||||
},
|
"run-sequence": "2.2.0",
|
||||||
"devDependencies": {
|
"shelljs": "^0.7.0",
|
||||||
"@angular/cli": "1.5.6",
|
"rxjs": "~6.5.5",
|
||||||
"@angular/compiler-cli": "5.0.0",
|
"tslib": "^2.0.0",
|
||||||
"@angular/platform-server": "5.0.0",
|
"zone.js": "~0.10.3"
|
||||||
"@types/jasmine": "^2.2.29",
|
},
|
||||||
"@types/requirejs": "^2.1.26",
|
"devDependencies": {
|
||||||
"@types/node": "^6.0.46",
|
"@angular-devkit/build-angular": "~0.1000.0",
|
||||||
"gulp": "^3.9.0",
|
"@angular/cli": "~10.0.0",
|
||||||
"webpack": "2.5.1",
|
"@angular/compiler-cli": "~10.0.0",
|
||||||
"shelljs": "^0.7.0",
|
"@types/node": "^10.13.0",
|
||||||
"typescript": "~2.4.2",
|
"@types/jasmine": "~3.5.0",
|
||||||
"gulp-sass": "^3.1.0",
|
"@types/jasminewd2": "~2.0.3",
|
||||||
"gulp-clean": "^0.3.2",
|
"codelyzer": "^6.0.0-next.1",
|
||||||
"run-sequence": "2.2.0",
|
"jasmine-core": "~3.5.0",
|
||||||
"webpack-stream": "^3.2.0",
|
"jasmine-spec-reporter": "~5.0.0",
|
||||||
"karma-systemjs": "^0.16.0",
|
"karma": "~5.0.0",
|
||||||
"gulp-typescript": "^2.13.0",
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
"es6-module-loader": "^0.17.11",
|
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||||
"systemjs-plugin-babel": "0.0.17"
|
"karma-jasmine": "~3.3.0",
|
||||||
},
|
"karma-jasmine-html-reporter": "^1.5.0",
|
||||||
"keywords": [
|
"protractor": "~7.0.0",
|
||||||
"ej2",
|
"ts-node": "~8.3.0",
|
||||||
"samples",
|
"tslint": "~6.1.0",
|
||||||
"loan-calculator",
|
"typescript": "~3.9.5"
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<div class="container main-content" id="content">
|
||||||
<home-section #homeSection></home-section>
|
<home-section #homeSection></home-section>
|
||||||
<statement-section #statementSection></statement-section>
|
<statement-section #statementSection></statement-section>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,8 @@ import { DataService } from './data-service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
templateUrl: './app.component.html'
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.css']
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
import { NumericTextBoxModule, SliderModule } from '@syncfusion/ej2-ng-inputs';
|
import { NumericTextBoxModule, SliderModule } from '@syncfusion/ej2-angular-inputs';
|
||||||
import { RadioButtonModule } from '@syncfusion/ej2-ng-buttons';
|
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
|
||||||
import { AccumulationChartModule, ChartModule } from '@syncfusion/ej2-ng-charts';
|
import { AccumulationChartModule, ChartModule } from '@syncfusion/ej2-angular-charts';
|
||||||
import { DatePickerModule } from '@syncfusion/ej2-ng-calendars';
|
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
|
||||||
import { GridModule } from '@syncfusion/ej2-ng-grids';
|
import { GridModule } from '@syncfusion/ej2-angular-grids';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { HomeComponent } from './home/home.component';
|
import { HomeComponent } from './home/home.component';
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export class DataService {
|
||||||
public totalPrincipalYear: number = 0;
|
public totalPrincipalYear: number = 0;
|
||||||
public totalInterestYear: number = 0;
|
public totalInterestYear: number = 0;
|
||||||
public inter: number;
|
public inter: number;
|
||||||
public dataUnits: [Object] = <[Object]>[];
|
public dataUnits: Object[] = [];
|
||||||
public dateObj: Date = new Date();
|
public dateObj: Date = new Date();
|
||||||
public totalInterest: number = 0;
|
public totalInterest: number = 0;
|
||||||
public totalAmount: number = 0;
|
public totalAmount: number = 0;
|
||||||
|
|
@ -47,7 +47,7 @@ export class DataService {
|
||||||
public endBalance: number;
|
public endBalance: number;
|
||||||
public beginBalance: number;
|
public beginBalance: number;
|
||||||
public yearTotal: number = 0;
|
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 intl: Internationalization = new Internationalization();
|
||||||
|
|
||||||
public getCurrencyVal(value: number): string {
|
public getCurrencyVal(value: number): string {
|
||||||
|
|
@ -182,8 +182,8 @@ export class DataService {
|
||||||
this.emi = this.calculateEMI();
|
this.emi = this.calculateEMI();
|
||||||
this.princ = this.principalValue;
|
this.princ = this.principalValue;
|
||||||
this.tent = this.yearTenure ? (this.loanValue * 12) : this.loanValue;
|
this.tent = this.yearTenure ? (this.loanValue * 12) : this.loanValue;
|
||||||
this.dataUnits = <[Object]>[];
|
this.dataUnits = [];
|
||||||
this.yearWiseData = <[Object]>[];
|
this.yearWiseData = [];
|
||||||
this.dateObj = new Date(this.dateValue.getTime());
|
this.dateObj = new Date(this.dateValue.getTime());
|
||||||
this.totalInterest = 0;
|
this.totalInterest = 0;
|
||||||
this.totalAmount = 0;
|
this.totalAmount = 0;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||||
import { closest } from '@syncfusion/ej2-base';
|
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 { Grid, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
|
||||||
import { DataService } from '../data-service';
|
import { DataService } from '../data-service';
|
||||||
Grid.Inject(DetailRow);
|
Grid.Inject(DetailRow);
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip,
|
||||||
Chart, LineSeries, DateTime, Legend, Tooltip, IAccLoadedEventArgs, AccumulationTheme, IAccPointRenderEventArgs,
|
Chart, LineSeries, DateTime, Legend, Tooltip, IAccLoadedEventArgs, AccumulationTheme, IAccPointRenderEventArgs,
|
||||||
StackingColumnSeries, Crosshair, DataLabel, ColumnSeries, IMouseEventArgs, Series
|
StackingColumnSeries, Crosshair, DataLabel, ColumnSeries, IMouseEventArgs, Series
|
||||||
} from '@syncfusion/ej2-charts';
|
} from '@syncfusion/ej2-charts';
|
||||||
import { AccumulationChartComponent } from '@syncfusion/ej2-ng-charts';
|
import { AccumulationChartComponent } from '@syncfusion/ej2-angular-charts';
|
||||||
import { DataService } from '../../data-service';
|
import { DataService } from '../../data-service';
|
||||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
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 { ChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||||
import { DataService } from '../../data-service';
|
import { DataService } from '../../data-service';
|
||||||
|
|
||||||
|
|
@ -79,7 +79,7 @@ export class InputComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
public principalRenderedTicks(args: SliderTickRenderedEventArgs): void {
|
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) {
|
for (let i: number = 0; i < li.length; ++i) {
|
||||||
let ele: HTMLElement = (li[i].querySelectorAll('.e-tick-value')[0] as HTMLElement);
|
let ele: HTMLElement = (li[i].querySelectorAll('.e-tick-value')[0] as HTMLElement);
|
||||||
let num: number = parseInt(ele.innerText.substring(1).replace(/,/g , ''), 10) / 1000;
|
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 { 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 { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
|
||||||
import { DataService } from '../data-service';
|
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 {
|
.component-content {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
height: 300px;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent {
|
.parent {
|
||||||
|
|
@ -326,6 +326,7 @@ li {
|
||||||
.e-tick-value {
|
.e-tick-value {
|
||||||
@include Roboto-400();
|
@include Roboto-400();
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
color: $tick-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -500,17 +501,11 @@ li {
|
||||||
|
|
||||||
&:not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
|
&:not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
|
||||||
background: $hover-color;
|
background: $hover-color;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-grid {
|
|
||||||
|
|
||||||
& .e-headercontent, & .e-gridcontent .e-emptyrow, & .e-spinner-pane {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& [aria-selected] + tr .e-detailindentcell {
|
& [aria-selected] + tr .e-detailindentcell {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -899,3 +894,6 @@ body {
|
||||||
.e-grid .e-row .e-row-toggle {
|
.e-grid .e-row .e-row-toggle {
|
||||||
display: inline-block;
|
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
|
//sass-lint:disable-all
|
||||||
@import 'ej2-inputs/styles/bootstrap.scss';
|
@import 'ej2-inputs/styles/bootstrap.scss';
|
||||||
@import 'ej2-grids/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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<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>
|
<title>Essential JS 2 for Angular - Loan Calculator</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||||
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
<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="//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=Roboto" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Raleway:500,600" 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/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 src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
@ -21,9 +32,15 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
<app-root></app-root>
|
||||||
</body>
|
</body>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
|
<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>
|
</html>
|
||||||
|
|
@ -10,4 +10,3 @@ if (environment.production) {
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||||
.catch(err => console.log(err));
|
.catch(err => console.log(err));
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,54 +11,51 @@
|
||||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
* 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
|
* 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 */
|
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
// 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`.
|
* Web Animations `@angular/platform-browser/animations`
|
||||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
* 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`.
|
// 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.
|
* 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": {
|
"compileOnSave": false,
|
||||||
"target": "es5",
|
"compilerOptions": {
|
||||||
"module": "amd",
|
"baseUrl": "./",
|
||||||
"declaration": true,
|
"outDir": "./dist/out-tsc",
|
||||||
"removeComments": true,
|
"sourceMap": true,
|
||||||
"noLib": false,
|
"declaration": false,
|
||||||
"lib": ["es2015", "dom"],
|
"module": "es2015",
|
||||||
"experimentalDecorators": true,
|
"moduleResolution": "node",
|
||||||
"emitDecoratorMetadata": true,
|
"emitDecoratorMetadata": true,
|
||||||
"sourceMap": true,
|
"experimentalDecorators": true,
|
||||||
"pretty": true,
|
"target": "es2015",
|
||||||
"allowUnreachableCode": false,
|
"typeRoots": [
|
||||||
"allowUnusedLabels": false,
|
"node_modules/@types"
|
||||||
"noImplicitAny": true,
|
|
||||||
"noImplicitReturns": true,
|
|
||||||
"noImplicitUseStrict": false,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"allowJs": false,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"types": ["requirejs"]
|
|
||||||
},
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
],
|
],
|
||||||
"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"
|
||||||
|
]
|
||||||
|
}
|
||||||
Загрузка…
Ссылка в новой задаче