diff --git a/package.json b/package.json index a63fa16..f45a98e 100644 --- a/package.json +++ b/package.json @@ -11,40 +11,39 @@ }, "private": true, "dependencies": { - "@angular/animations": "~7.1.0", - "@angular/common": "~7.1.0", - "@angular/compiler": "~7.1.0", - "@angular/core": "~7.1.0", - "@angular/forms": "~7.1.0", - "@angular/platform-browser": "~7.1.0", - "@angular/platform-browser-dynamic": "~7.1.0", - "@angular/router": "~7.1.0", - "@syncfusion/ej2-angular-circulargauge": "^16.4.45", - "@syncfusion/ej2-ng-circulargauge": "^16.2.50", - "core-js": "^2.5.4", - "rxjs": "~6.3.3", - "tslib": "^1.9.0", - "zone.js": "~0.8.26" + "@angular/animations": "~10.2.5", + "@angular/common": "~10.2.5", + "@angular/compiler": "~10.2.5", + "@angular/core": "~10.2.5", + "@angular/forms": "~10.2.5", + "@angular/platform-browser": "~10.2.5", + "@angular/platform-browser-dynamic": "~10.2.5", + "@angular/router": "~10.2.5", + "@syncfusion/ej2-angular-circulargauge": "^18.4.30", + "core-js": "^3.6.5", + "rxjs": "~6.6.0", + "tslib": "^2.0.0", + "zone.js": "~0.10.2" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.11.0", - "@angular/cli": "~7.1.4", - "@angular/compiler-cli": "~7.1.0", - "@angular/language-service": "~7.1.0", - "@types/node": "~8.9.4", - "@types/jasmine": "~2.8.8", + "@angular-devkit/build-angular": "~0.1002.3", + "@angular/cli": "~10.2.3", + "@angular/compiler-cli": "~10.2.5", + "@angular/language-service": "~10.2.5", + "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", - "codelyzer": "~4.5.0", - "jasmine-core": "~2.99.1", - "jasmine-spec-reporter": "~4.2.1", + "@types/node": "^12.11.1", + "codelyzer": "^6.0.0", + "jasmine-core": "~3.8.0", + "jasmine-spec-reporter": "~5.0.0", "karma": "6.3.16", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.1", - "karma-jasmine": "~1.1.2", - "karma-jasmine-html-reporter": "^0.2.2", - "protractor": "~5.4.0", - "ts-node": "~7.0.0", - "tslint": "~5.11.0", - "typescript": "~3.1.6" + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~3.0.2", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "^1.4.0", + "protractor": "~7.0.0", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.0.2" } } diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..f0cb903 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,179 @@ +/* Global Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Main Container */ +.main-container { + min-height: 100vh; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + padding: 20px; +} + +/* Header Section */ +.header-section { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 40px 20px; + margin-bottom: 30px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.header-section h1 { + color: #333; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 20px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); +} + +.header-section img { + width: 200px; + height: auto; + filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2)); + transition: transform 0.3s ease; +} + +.header-section img:hover { + transform: scale(1.05) rotate(5deg); +} + +/* Navigation Section */ +.nav-section { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-radius: 15px; + padding: 30px; + margin-bottom: 30px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); +} + +.nav-section h2 { + color: #444; + font-size: 1.8rem; + font-weight: 600; + margin-bottom: 20px; + text-align: center; +} + +.nav-section ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 15px; + max-width: 600px; + margin: 0 auto; +} + +.nav-section li { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + border-radius: 12px; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3); +} + +.nav-section li:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4); +} + +.nav-section li h2 { + margin: 0; + padding: 15px 20px; + font-size: 1.2rem; +} + +.nav-section li a { + color: white; + text-decoration: none; + display: block; + width: 100%; + height: 100%; + transition: color 0.3s ease; +} + +.nav-section li a:hover { + color: #e0f7ff; +} + +/* Content Section */ +.content-section { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 15px; + padding: 30px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); + min-height: 300px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .main-container { + padding: 15px; + } + + .header-section h1 { + font-size: 2rem; + } + + .header-section img { + width: 150px; + } + + .nav-section ul { + flex-direction: column; + } + + .nav-section li h2 { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .header-section { + padding: 25px 15px; + } + + .header-section h1 { + font-size: 1.5rem; + } + + .nav-section { + padding: 20px; + } + + .content-section { + padding: 20px; + } +} + +/* Animation for loading */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.header-section, +.nav-section, +.content-section { + animation: fadeInUp 0.8s ease-out; +} + +.nav-section { + animation-delay: 0.2s; +} + +.content-section { + animation-delay: 0.4s; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index d65f598..1cc765f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,23 +1,30 @@ -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- +
+
+

+ Welcome to {{ title }}! +

+ Angular Logo +
+ +
+

Here are some links to help you start:

+ +
- - - +
+ + + +
+
diff --git a/src/app/circulargauge/circulargauge.component.ts b/src/app/circulargauge/circulargauge.component.ts index ba0a80d..f227d28 100644 --- a/src/app/circulargauge/circulargauge.component.ts +++ b/src/app/circulargauge/circulargauge.component.ts @@ -9,14 +9,14 @@ import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angula }) export class CirculargaugeComponent implements OnInit { @ViewChild('range') - public circulargauge: CircularGaugeComponent; - public lineStyle: object; - public labelStyle: object; - public majorTicks: object; - public minorTicks: object; - public tail: object; - public pointerCap: object; - public annotaions: object; + public circulargauge!: CircularGaugeComponent; + public lineStyle!: object; + public labelStyle!: object; + public majorTicks!: object; + public minorTicks!: object; + public tail!: object; + public pointerCap!: object; + public annotaions!: object; constructor() { } ngOnInit() { this.lineStyle = { diff --git a/tsconfig.json b/tsconfig.json index b271fd9..f1e72b4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,20 +3,27 @@ "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, - "module": "es2015", - "moduleResolution": "node", - "emitDecoratorMetadata": true, + "downlevelIteration": true, "experimentalDecorators": true, + "moduleResolution": "node", "importHelpers": true, - "target": "es5", - "typeRoots": [ - "node_modules/@types" - ], + "target": "es2015", + "module": "es2020", "lib": [ "es2018", "dom" ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true } }