diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..cafca89 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,50 @@ +{ + "root": true, + "ignorePatterns": [ + "projects/**/*" + ], + "overrides": [ + { + "files": [ + "*.ts" + ], + "parserOptions": { + "project": [ + "tsconfig.json" + ], + "createDefaultProgram": true + }, + "extends": [ + "plugin:@angular-eslint/recommended", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "app", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "app", + "style": "kebab-case" + } + ] + } + }, + { + "files": [ + "*.html" + ], + "extends": [ + "plugin:@angular-eslint/template/recommended" + ], + "rules": {} + } + ] +} diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..80c8e76 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,35 @@ +# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +# Using Ignite UI for Angular licensed packages via an access token: +# https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing#github-actions-configuration + +name: Node.js CI + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [18.x, 20.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + # cache: 'npm' # enable after committing lock file from first install + - run: npm i # replace with 'npm ci' after committing lock file from first install + - run: npm run lint + - run: npm run build + - run: npm run test -- --watch=false --browsers ChromeHeadless diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0711527 --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/README.md b/README.md new file mode 100644 index 0000000..743eea1 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# untitled-app + +This project was generated with [App Builder Code Gen](https://www.infragistics.com/products/appbuilder). + +## Development server + +Run `npm start` to build the application, start a web server and open the application in the default browser. The application will open in `http://localhost:4200/` by default. + +## Build + +Run `npm run build` to build the application into an output directory. + +## Running unit tests + +Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io). Runs all `.spec.ts` files under `./src` folder. + +## Running code style checks + +Run `npm run lint` to execute the code styling rules for the project. + +## Licensing + +See the [License FAQ and Installation documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing) for information on how to upgrade to the full licensed package, if the project is using a Trial version of Ignite UI for Angular, and how to setup your environment and CI to use our licensed npm feed. + +Alternatively run `npm run infragistics-login` for a guided login to our licensed feed. + +## Additional resources + +- Ignite UI Angular Schematics were used to generate this project and are available for additional commands within the project. For more details and how to use them, refer to [Angular Schematics & Ignite UI CLI](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview). + +- [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) - to learn more about the product or to dive into component specifics and showcases. diff --git a/angular.json b/angular.json new file mode 100644 index 0000000..c7cdf89 --- /dev/null +++ b/angular.json @@ -0,0 +1,113 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "untitled-app": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:application", + "options": { + "outputPath": "dist/untitled-app", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "5mb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "2mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "untitled-app:build:production" + }, + "development": { + "buildTarget": "untitled-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "untitled-app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + } + } +} diff --git a/ignite-ui-cli.json b/ignite-ui-cli.json new file mode 100644 index 0000000..eb9800c --- /dev/null +++ b/ignite-ui-cli.json @@ -0,0 +1,19 @@ +{ + "version": "17.2.1321", + "project": { + "defaultPort": 4200, + "framework": "angular", + "projectType": "igx-ts", + "projectTemplate": "base", + "theme": "Default", + "themePath": "node_modules/igniteui-angular/styles/igniteui-angular.css", + "isBundle": false, + "bundleFilePath": "", + "igniteuiSource": "", + "components": [], + "sourceFiles": [], + "isShowcase": false, + "version": "" + }, + "build": {} +} diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..764a5b9 --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,44 @@ +// 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'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + coverageReporter: { + dir: require('path').join(__dirname, './coverage/untitled-app'), + subdir: '.', + reporters: [ + { type: 'html' }, + { type: 'text-summary' } + ] + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..7de734b --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "untitled-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve -o", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "~17.2.0", + "@angular/common": "~17.2.0", + "@angular/compiler": "~17.2.0", + "@angular/core": "~17.2.0", + "@angular/forms": "~17.2.0", + "@angular/platform-browser": "~17.2.0", + "@angular/platform-browser-dynamic": "~17.2.0", + "@angular/router": "~17.2.0", + "hammerjs": "~2.0.8", + "igniteui-angular": "~17.2.0", + "minireset.css": "~0.0.7", + "rxjs": "~7.8.0", + "tslib": "~2.3.0", + "zone.js": "~0.14.2" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~17.2.0", + "@angular-eslint/builder": "~17.2.0", + "@angular-eslint/eslint-plugin": "~17.2.0", + "@angular-eslint/eslint-plugin-template": "~17.2.0", + "@angular-eslint/schematics": "~17.2.0", + "@angular-eslint/template-parser": "~17.2.0", + "@angular/cli": "~17.2.0", + "@angular/compiler-cli": "~17.2.0", + "@types/jasmine": "~5.1.1", + "@typescript-eslint/eslint-plugin": "6.9.1", + "@typescript-eslint/parser": "6.9.1", + "eslint": "~8.52.0", + "@igniteui/angular-schematics": "~17.2.1321", + "jasmine-core": "~5.1.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.3.2" + } +} diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000..0540e6b --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..65187e5 --- /dev/null +++ b/src/app/app.component.scss @@ -0,0 +1,5 @@ +.outer-wrapper { + display: flex; + justify-content: center; + height: 100%; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..658a98a --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterOutlet } from '@angular/router'; +import { MasterViewComponent } from './master-view/master-view.component'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [CommonModule, RouterOutlet], + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'Home - IgniteUI for Angular'; +} diff --git a/src/app/app.config.ts b/src/app/app.config.ts new file mode 100644 index 0000000..8f12ea6 --- /dev/null +++ b/src/app/app.config.ts @@ -0,0 +1,19 @@ +import { ApplicationConfig, importProvidersFrom } from '@angular/core'; +import { provideRouter, withComponentInputBinding } from '@angular/router'; +import { HammerModule } from '@angular/platform-browser'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { provideHttpClient } from '@angular/common/http'; + +import { routes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideRouter(routes, withComponentInputBinding()), + importProvidersFrom(HammerModule), + provideAnimations(), + provideHttpClient() + // provide the HAMMER_GESTURE_CONFIG token + // to override the default settings of the HammerModule + // { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig } + ] +}; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts new file mode 100644 index 0000000..11c4b29 --- /dev/null +++ b/src/app/app.routes.ts @@ -0,0 +1,11 @@ +import { Routes } from '@angular/router'; +import { PageNotFoundComponent } from './error-routing/not-found/not-found.component'; +import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component'; +import { MasterViewComponent } from './master-view/master-view.component'; + +export const routes: Routes = [ + { path: '', redirectTo: 'master-view', pathMatch: 'full' }, + { path: 'error', component: UncaughtErrorComponent }, + { path: 'master-view', component: MasterViewComponent, data: { text: 'Master View' } }, + { path: '**', component: PageNotFoundComponent } // must always be last +]; diff --git a/src/app/error-routing/error/global-error-handler.service.ts b/src/app/error-routing/error/global-error-handler.service.ts new file mode 100644 index 0000000..3aba881 --- /dev/null +++ b/src/app/error-routing/error/global-error-handler.service.ts @@ -0,0 +1,23 @@ +import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core'; +import { Router } from '@angular/router'; + +@Injectable() +export class GlobalErrorHandlerService implements ErrorHandler { + + constructor(private injector: Injector, private zone: NgZone) { } + + handleError(error: any) { + // handle and/or log error, for example: + console.error(error); + + // show error page + const router = this.injector.get(Router); + if (router) { + this.zone.run(() => { + router + .navigate(['error']) + .catch((err: any) => console.error(err)); + }); + } + } +} diff --git a/src/app/error-routing/error/uncaught-error.component.ts b/src/app/error-routing/error/uncaught-error.component.ts new file mode 100644 index 0000000..b1f7a64 --- /dev/null +++ b/src/app/error-routing/error/uncaught-error.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + standalone: true, + template: '

Error 500: Internal Server Error

', +}) +export class UncaughtErrorComponent { } diff --git a/src/app/error-routing/not-found/not-found.component.ts b/src/app/error-routing/not-found/not-found.component.ts new file mode 100644 index 0000000..36f0bd4 --- /dev/null +++ b/src/app/error-routing/not-found/not-found.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + template: '

Error 404: Page not found

', + standalone: true +}) +export class PageNotFoundComponent { } diff --git a/src/app/master-view/master-view.component.html b/src/app/master-view/master-view.component.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/master-view/master-view.component.scss b/src/app/master-view/master-view.component.scss new file mode 100644 index 0000000..7d56670 --- /dev/null +++ b/src/app/master-view/master-view.component.scss @@ -0,0 +1,7 @@ +:host { + height: 100%; + display: flex; + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; +} diff --git a/src/app/master-view/master-view.component.spec.ts b/src/app/master-view/master-view.component.spec.ts new file mode 100644 index 0000000..b29ab61 --- /dev/null +++ b/src/app/master-view/master-view.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MasterViewComponent } from './master-view.component'; + +describe('MasterViewComponent', () => { + let component: MasterViewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MasterViewComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MasterViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/master-view/master-view.component.ts b/src/app/master-view/master-view.component.ts new file mode 100644 index 0000000..e0328ad --- /dev/null +++ b/src/app/master-view/master-view.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-master-view', + standalone: true, + imports: [], + templateUrl: './master-view.component.html', + styleUrls: ['./master-view.component.scss'] +}) +export class MasterViewComponent {} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..7b4f817 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000..c965986 Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e95d494 --- /dev/null +++ b/src/index.html @@ -0,0 +1,17 @@ + + + + + untitled-app + + + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..88b06b3 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,13 @@ +import { enableProdMode } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; + +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..2b68a54 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,28 @@ +/* You can add global styles to this file, and also import other style files */ + +// Standard CSS normalize, comment out if not required or using a different module +@use "minireset.css/minireset"; +@use "igniteui-angular/theming" as *; + +@include core(); +@include typography(); +@include light-theme($light-material-palette); + +body { + background: hsla(var(--ig-surface-500)); + color: var(--ig-surface-500-contrast); +} + +html, body { + height: 100%; +} + +.ig-typography { + h1, h2, h3, h4, h5, h6, p, .ig-typography__body-1 { + margin: 0; + } +} + +.outer-wrapper > *:not(router-outlet) { + width: 100%; +} diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..374cc9d --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..678336b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,32 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "esModuleInterop": true, + "sourceMap": true, + "declaration": false, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..be7e9da --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}