feat: enhance ngx-spinner component and add print options for improved functionality and usability

Author: pavankjadda

angular.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-kit": {
+      "projectType": "library",
+      "root": "projects/ng-kit",
+      "sourceRoot": "projects/ng-kit/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ng-kit/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ng-kit/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ng-kit/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:jest",
+          "options": {
+            "tsConfig": "projects/ng-kit/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    },
+    "ng-kit-demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ng-kit-demo",
+      "sourceRoot": "projects/ng-kit-demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/ng-kit-demo",
+            "index": "projects/ng-kit-demo/src/index.html",
+            "browser": "projects/ng-kit-demo/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/ng-kit-demo/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/ng-kit-demo/src/favicon.ico",
+              "projects/ng-kit-demo/src/assets"
+            ],
+            "styles": [
+              "projects/ng-kit-demo/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "5kb",
+                  "maximumError": "10kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "ng-kit-demo:build:production"
+            },
+            "development": {
+              "buildTarget": "ng-kit-demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "ng-kit-demo:build"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "09d8c19e-c136-407c-a909-b3593d1ceda7"
+  }
+}

eslint.config.js

@@ -9,7 +9,6 @@ module.exports = tseslint.config(
 		extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended],
 		processor: angular.processInlineTemplates,
 		rules: {
-			'prefer-inject-function': 'warn',
 			'id-blacklist': ['off'],
 			'@typescript-eslint/ban-ts-comment': ['off'],
 			'@typescript-eslint/no-explicit-any': ['off'],

projects/ng-kit/src/lib/components/ngx-spinner/ngx-spinner.component.html

@@ -1,7 +1,7 @@
 @if (spinner.show) {
 	<div
 		#overlay
-		[@.disabled]="disableAnimation"
+		[@.disabled]="disableAnimation()"
 		[@fadeIn]="'in'"
 		[style.background-color]="spinner.bdColor"
 		[style.position]="spinner.fullScreen ? 'fixed' : 'absolute'"
@@ -14,8 +14,8 @@
 				}
 			</div>
 		}
-		@if (template) {
-			<div [innerHTML]="template | safeHtml"></div>
+		@if (template()) {
+			<div [innerHTML]="template() | safeHtml"></div>
 		}
 		<div [style.z-index]="spinner.zIndex" class="loading-text">
 			<ng-content></ng-content>

projects/ng-kit/src/lib/components/ngx-spinner/ngx-spinner.component.ts

@@ -59,11 +59,10 @@ export class NgxSpinnerComponent implements OnDestroy, OnInit {
 	/**
 	 * Custom template for spinner/loader
 	 */
-	template = input<string | undefined>(undefined);
+	template = input<string>('');
 
 	/**
 	 * Show/Hide the spinner
-	 * @type {boolean}
 	 */
 	showSpinner = input<boolean>(false);
 
@@ -107,13 +106,13 @@ export class NgxSpinnerComponent implements OnDestroy, OnInit {
 	 * Creates an instance of NgxSpinnerComponent.
 	 */
 	constructor(
-		private spinnerService: NgxSpinnerService,
-		private changeDetector: ChangeDetectorRef,
+		private readonly spinnerService: NgxSpinnerService,
+		private readonly changeDetector: ChangeDetectorRef,
 	) {}
 
 	@HostListener('document:keydown', ['$event'])
-	handleKeyboardEvent(event: KeyboardEvent) {
-		if (this.spinnerDOM && this.spinnerDOM.nativeElement) {
+	handleKeyboardEvent(event: KeyboardEvent): void {
+		if (this.spinnerDOM?.nativeElement) {
 			event.returnValue = false;
 			event.preventDefault();
 		}
@@ -122,7 +121,7 @@ export class NgxSpinnerComponent implements OnDestroy, OnInit {
 	/**
 	 * Initialization method
 	 */
-	ngOnInit() {
+	ngOnInit(): void {
 		this.setDefaultOptions();
 		this.spinnerService
 			.getSpinner(this.name())
@@ -140,7 +139,7 @@ export class NgxSpinnerComponent implements OnDestroy, OnInit {
 	/**
 	 * To set default ngx-spinner options
 	 */
-	setDefaultOptions = () => {
+	setDefaultOptions = (): void => {
 		this.spinner = new NgxSpinner({
 			name: this.name(),
 			bdColor: this.bdColor(),
@@ -165,7 +164,7 @@ export class NgxSpinnerComponent implements OnDestroy, OnInit {
 		this.spinner.divCount = LOADERS[type];
 		this.spinner.divArray = Array(this.spinner.divCount)
 			.fill(0)
-			.map((x, i) => i);
+			.map((_x, i) => i);
 		let sizeClass = '';
 		switch (size.toLowerCase()) {
 			case 'small':
@@ -186,14 +185,14 @@ export class NgxSpinnerComponent implements OnDestroy, OnInit {
 	/**
 	 * Check if input variables have changed
 	 */
-	onInputChange() {
+	onInputChange(): void {
 		this.spinner.class = this.getClass(this.spinner.type ?? DEFAULTS.SPINNER_TYPE, this.spinner.size ?? 'default');
 	}
 
 	/**
 	 * Component destroy event
 	 */
-	ngOnDestroy() {
+	ngOnDestroy(): void {
 		this.ngUnsubscribe.next();
 		this.ngUnsubscribe.complete();
 	}

projects/ng-kit/src/lib/directives/ngx-print.directive.ts renamed to projects/ng-kit/src/lib/directives/ngx-print/ngx-print.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, HostListener, Input } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
+import { PrintOptions } from './print-options';
 
 /**
  * Reusable Angular directory that prints given contents of HTML element
@@ -20,80 +21,73 @@ export class NgxPrintDirective {
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() printSectionId: string | undefined;
-
 	/**
 	 * Title of the HTML element those contents need to be printed
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() printTitle: string | undefined;
-
 	/**
 	 * If `true`, uses CSS of HTMl element, otherwise no CSS applied
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() useExistingCss = false;
-
 	/**
 	 * A delay in milliseconds to force the print dialog to wait before opened. Default: 0
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() printDelay = 0;
-
 	/**
 	 * Instance of the Mat Table Data Source
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() matTableDataSource!: MatTableDataSource<any>;
-
 	/**
 	 * Instance of the Mat Paginator
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() paginator!: MatPaginator;
-
 	/**
 	 * ID of the Mat Paginator
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() paginatorId = '';
-
 	/**
 	 * HTML tag ID of the Mat-Table Input Filter
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() inputFilterId = '';
-
 	/**
 	 * If `true`, referenced table is Mat-Table
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() isMatTable = false;
-
 	/**
 	 * If `true` Mat-Table paginator will be hidden
 	 *
 	 * @since 12.0.0
 	 * @author Pavan Kumar Jadda
 	 */
 	@Input() hideMatTablePaginator = false;
-
+	
 	public printStyleArray = [];
+	printOptions = new PrintOptions();
+
 	/**
 	 * List of Style sheet files
 	 *
@@ -102,6 +96,15 @@ export class NgxPrintDirective {
 	 */
 	private styleSheetFileArray = '';
 
+	/**
+	 * Prevents the print dialog from opening on the window
+	 *
+	 * @memberof NgxPrintDirective
+	 */
+	@Input() set previewOnly(value: boolean) {
+		this.printOptions = { ...this.printOptions, previewOnly: value };
+	}
+
 	/**
 	 * List of CSS properties that needs to be applied while printing the document
 	 *

projects/ng-kit/src/lib/directives/ngx-print/print-options.ts

@@ -0,0 +1,16 @@
+export class PrintOptions {
+	printSectionId = '';
+	printTitle = '';
+	useExistingCss = false;
+	bodyClass = '';
+	openNewTab = false;
+	previewOnly = false;
+	closeWindow = true;
+	printDelay = 0;
+
+	constructor(options?: Partial<PrintOptions>) {
+		if (options) {
+			Object.assign(this, options);
+		}
+	}
+}

projects/ng-kit/src/lib/directives/prevent-multiple-clicks.directive.spec.ts renamed to projects/ng-kit/src/lib/directives/prevent-multiple-clicks/prevent-multiple-clicks.directive.spec.ts

@@ -9,8 +9,8 @@ export * from './lib/components/ngx-spinner/ngx-spinner.component';
 export * from './lib/components/autocomplete/autocomplete.component';
 
 // Export directives
-export * from './lib/directives/ngx-print.directive';
-export * from './lib/directives/prevent-multiple-clicks.directive';
+export * from './lib/directives/ngx-print/ngx-print.directive';
+export * from './lib/directives/prevent-multiple-clicks/prevent-multiple-clicks.directive';
 
 // Export buttons
 export * from './lib/components/buttons/bs-link-button/bs-link-button.component';