Angular 13

.browserslistrc

@@ -0,0 +1,12 @@
+# 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
+
+# You can see what browsers were selected by your queries by running:
+# npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

.eslintrc.json

@@ -0,0 +1,51 @@
+{
+ "root": true,
+ "ignorePatterns": [
+ "projects/**/*"
+ ],
+ "overrides": [
+ {
+ "files": [
+ "*.ts"
+ ],
+ "parserOptions": {
+ "project": [
+ "tsconfig.json",
+ "e2e/tsconfig.json"
+ ],
+ "createDefaultProgram": true
+ },
+ "extends": [
+ "plugin:@angular-eslint/recommended",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "prefix": "lib",
+ "style": "kebab-case",
+ "type": "element"
+ }
+ ],
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "prefix": "lib",
+ "style": "camelCase",
+ "type": "attribute"
+ }
+ ]
+ }
+ },
+ {
+ "files": [
+ "*.html"
+ ],
+ "extends": [
+ "plugin:@angular-eslint/template/recommended"
+ ],
+ "rules": {}
+ }
+ ]
+}

.gitignore

@@ -28,6 +28,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -42,5 +43,4 @@ testem.log
 .DS_Store
 Thumbs.db
 
-build.sh
-package-lock.json
+build.sh

angular.json

@@ -26,7 +26,12 @@
  "example/styles.css"
  ],
  "scripts": [],
- "es5BrowserSupport": true
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "buildOptimizer": false,
+ "sourceMap": true,
+ "optimization": false,
+ "namedChunks": true
  },
  "configurations": {
  "production": {
@@ -39,9 +44,7 @@
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
- "extractCss": true,
  "namedChunks": false,
- "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
@@ -50,10 +53,15 @@
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "6kb"
  }
  ]
  }
- }
+ },
+ "defaultConfiguration": ""
  },
  "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
@@ -88,18 +96,6 @@
  "example/assets"
  ]
  }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": [
- "example/tsconfig.app.json",
- "example/tsconfig.spec.json"
- ],
- "exclude": [
- "**/node_modules/**"
- ]
- }
  }
  }
  },
@@ -119,15 +115,6 @@
  "devServerTarget": "angular-mydatepicker-example:serve:production"
  }
  }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": "e2e/tsconfig.e2e.json",
- "exclude": [
- "**/node_modules/**"
- ]
- }
  }
  }
  },
@@ -138,10 +125,15 @@
  "prefix": "lib",
  "architect": {
  "build": {
- "builder": "@angular-devkit/build-ng-packagr:build",
+ "builder": "@angular-devkit/build-angular:ng-packagr",
  "options": {
  "tsConfig": "projects/angular-mydatepicker/tsconfig.lib.json",
  "project": "projects/angular-mydatepicker/ng-package.json"
+ },
+ "configurations": {
+ "production": {
+ "tsConfig": "projects/angular-mydatepicker/tsconfig.lib.prod.json"
+ }
  }
  },
  "test": {
@@ -153,20 +145,19 @@
  }
  },
  "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
+ "builder": "@angular-eslint/builder:lint",
  "options": {
- "tsConfig": [
- "projects/angular-mydatepicker/tsconfig.lib.json",
- "projects/angular-mydatepicker/tsconfig.spec.json"
- ],
- "exclude": [
- "**/node_modules/**",
- "**/*.spec.ts"
+ "lintFilePatterns": [
+ "projects/angular-mydatepicker/**/*.ts",
+ "projects/angular-mydatepicker/**/*.html"
  ]
  }
  }
  }
  }
  },
- "defaultProject": "angular-mydatepicker-example"
+ "defaultProject": "angular-mydatepicker-example",
+ "cli": {
+ "defaultCollection": "@angular-eslint/schematics"
+ }
 }

example/app/date-picker-ngmodel/date-picker-ngmodel.ts

@@ -54,7 +54,7 @@ export class DatePickerNgmodel implements OnInit {
  }
  };
 
- @ViewChild('dp') ngxdp: AngularMyDatePickerDirective;
+ @ViewChild('dp', { static: true }) ngxdp: AngularMyDatePickerDirective;
 
  public selectedTextNormal: string = '';
 

example/app/date-picker-reactive-forms/date-picker-reactive-forms.ts

@@ -17,7 +17,7 @@ export class DatePickerReactiveForms implements OnInit {
 
  public myForm: FormGroup;
 
- @ViewChild('dp') myDp: AngularMyDatePickerDirective;
+ @ViewChild('dp', { static: true }) myDp: AngularMyDatePickerDirective;
 
  constructor(private formBuilder: FormBuilder, private renderer: Renderer2, private cdr: ChangeDetectorRef) {
  }

example/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * 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.
+// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

example/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js'; // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -43,7 +33,7 @@
  *
  * (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__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (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
@@ -55,7 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 
 /***************************************************************************************************

example/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
  BrowserDynamicTestingModule,
@@ -12,7 +12,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
+ platformBrowserDynamicTesting(), {
+ teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

example/tsconfig.app.json

@@ -4,8 +4,11 @@
  "outDir": "../out-tsc/app",
  "types": []
  },
- "exclude": [
- "test.ts",
- "**/*.spec.ts"
+ "files": [
+ "main.ts",
+ "polyfills.ts"
+ ],
+ "include": [
+ "example/**/*.d.ts"
  ]
 }