ngx-print 21.2.0 → 22.1.0

package/angular.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-print": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "tsConfig": "tsconfig.lib.json",
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "development": {}
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        }
+      }
+    },
+    "demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/demo",
+      "sourceRoot": "projects/demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/demo/src/main.ts",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/demo/public"
+              }
+            ],
+            "styles": [
+              "projects/demo/src/styles.scss"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false,
+    "schematicCollections": ["angular-eslint"]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}

package/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+
+module.exports = tseslint.config(
+  {
+    files: ['**/*.ts'],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      // our project thinks using renaming inputs is ok
+      '@angular-eslint/no-input-rename': 'off',
+    },
+  },
+  {
+    files: ['**/*.html'],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {
+      // our project thinks using negated async pipes is ok
+      '@angular-eslint/template/no-negated-async': 'off',
+    },
+  },
+);

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist/ngx-print",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

package/package.json

@@ -1,43 +1,60 @@
-{
-  "name": "ngx-print",
-  "version": "21.2.0",
-  "description": "Plug n' Play Angular (2++) directive to print your stuff",
-  "author": "https://github.com/ngx-print/ngx-print/graphs/contributors",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ngx-print/ngx-print.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ngx-print/ngx-print/issues"
-  },
-  "homepage": "https://github.com/ngx-print/ngx-print#readme",
-  "keywords": [
-    "print",
-    "angular",
-    "library",
-    "ng-print",
-    "ngx-print",
-    "directive",
-    "dependency",
-    "angular-print"
-  ],
-  "peerDependencies": {
-    "rxjs": "^7.4.0"
-  },
-  "module": "fesm2022/ngx-print.mjs",
-  "typings": "types/ngx-print.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngx-print.d.ts",
-      "default": "./fesm2022/ngx-print.mjs"
-    }
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+{
+  "name": "ngx-print",
+  "version": "22.1.0",
+  "description": "Plug n' Play Angular directive to print your stuff",
+  "author": "https://github.com/ngx-print/ngx-print/graphs/contributors",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ngx-print/ngx-print.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ngx-print/ngx-print/issues"
+  },
+  "homepage": "https://github.com/ngx-print/ngx-print#readme",
+  "keywords": [
+    "print",
+    "angular",
+    "library",
+    "ng-print",
+    "ngx-print",
+    "directive",
+    "dependency",
+    "angular-print"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build ngx-print",
+    "test": "ng test ngx-print --no-watch --coverage --no-progress",
+    "serve:demo": "ng serve demo",
+    "lint": "ng lint"
+  },
+  "devDependencies": {
+    "@angular/build": "^22.0.3",
+    "@angular/cli": "^22.0.3",
+    "@angular/common": "^22.0.2",
+    "@angular/compiler": "^22.0.2",
+    "@angular/compiler-cli": "^22.0.2",
+    "@angular/core": "^22.0.2",
+    "@angular/forms": "^22.0.2",
+    "@angular/localize": "^22.0.2",
+    "@angular/platform-browser": "^22.0.2",
+    "@angular/router": "^22.0.2",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.13.2",
+    "@vitest/coverage-v8": "^4.1.9",
+    "angular-eslint": "22.0.0",
+    "eslint": "^10.3.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jsdom": "^29.1.1",
+    "ng-packagr": "^22.0.0",
+    "prettier": "^3.8.4",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "8.62.0",
+    "vitest": "^4.0.8"
+  },
+  "peerDependencies": {
+    "rxjs": "^7.4.0"
+  }
+}

package/projects/demo/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes)
+  ]
+};

package/projects/demo/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/projects/demo/src/app/demo.component.html

@@ -0,0 +1,83 @@
+<h1>Print Library Demo</h1>
+
+<p>
+  Fill out the form and draw on the canvas below, then click print.
+  The library will capture the current state of all fields and the canvas.
+</p>
+
+<form class="option-form" [formGroup]="optionForm">
+  <fieldset>
+    <legend>Print options:</legend>
+    <div class="form-group">
+      @for (method of printMethods; track method) {
+        <div>
+          <label>
+            <input [formControlName]="'printMethod'"
+                   [value]="method"
+                   type="radio"
+                   id="print-method-{{ $index }}"
+                   name="printMethod"
+            />
+            {{ method }}
+          </label>
+        </div>
+      }
+    </div>
+
+      <div class="form-group">
+        <label for="fullName">printTitle</label>
+        <input id="fullName" type="text" formControlName="printTitle" />
+      </div>
+
+    <div class="form-group">
+      <label>Checkbox (Input)</label>
+      <div>
+        <input type="checkbox" id="agree" formControlName="useExistingCss" />
+        <label for="agree" style="display:inline;">useExistingCss</label>
+      </div>
+    </div>
+  </fieldset>
+</form>
+
+<button type="button" (click)="onPrint()">Print Section</button>
+
+<!-- This is the section targeted by the ID -->
+<div id="print-demo-section" class="print-container">
+  <h3>printable-section</h3>
+
+  <form [formGroup]="demoform">
+    <div class="form-group">
+      <label for="fullName">Full Name (Input)</label>
+      <input id="fullName" type="text" formControlName="name" placeholder="Enter your name" />
+    </div>
+
+    <div class="form-group">
+      <label for="role">Role (Select)</label>
+      <select id="role" formControlName="role">
+        <option value="developer">Developer</option>
+        <option value="designer">Designer</option>
+        <option value="manager">Manager</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="bio">Biography (Textarea)</label>
+      <textarea id="bio" formControlName="bio" rows="4"></textarea>
+    </div>
+
+    <div class="form-group">
+      <label>Checkbox (Input)</label>
+      <div>
+        <input type="checkbox" id="agree" formControlName="agree" />
+        <label for="agree" style="display:inline;">I agree to the terms</label>
+      </div>
+    </div>
+  </form>
+
+  <div class="form-group">
+    <label>Signature / Drawing (Canvas)</label>
+    <canvas #drawingCanvas width="400" height="150"></canvas>
+  </div>
+
+  <p>Swedish: Åå, Japanese: ひらがな, Chinese: 你好, Korean: 안녕하세요</p>
+</div>

package/projects/demo/src/app/demo.component.scss

@@ -0,0 +1,54 @@
+:host {
+  display: block;
+  padding: 2rem;
+  font-family: sans-serif;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+}
+
+.option-form {
+  max-width: 600px;
+  margin-bottom: 2rem;
+}
+
+button {
+  padding: 0.75rem 1.5rem;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+
+  &:hover {
+    background: #0056b3;
+  }
+}
+
+.print-container {
+  border: 2px dashed #ccc;
+  padding: 2rem;
+  margin: 1rem 0;
+  max-width: 600px;
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  canvas {
+    border: 1px solid #000;
+    background: #f0f0f0;
+  }
+}

package/projects/demo/src/app/demo.component.ts

@@ -0,0 +1,73 @@
+import { afterNextRender, Component, ElementRef, inject, viewChild } from '@angular/core';
+import { NgxPrintService } from '../../../../src/lib/ngx-print.service';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { PrintOptions } from '../../../../src/public_api';
+
+@Component({
+  selector: 'app-root',
+  imports: [ReactiveFormsModule],
+  templateUrl: './demo.component.html',
+  styleUrl: './demo.component.scss',
+})
+export class DemoComponent {
+  private _printService = inject(NgxPrintService);
+  private _fb = inject(FormBuilder);
+
+  protected readonly printMethods = ['iframe', 'window', 'tab'] as const;
+
+  canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('drawingCanvas');
+
+  optionForm = this._fb.group({
+    printMethod: this._fb.nonNullable.control<typeof PrintOptions.prototype.printMethod>('iframe'),
+    printTitle: this._fb.nonNullable.control<string>('Demo Component Print'),
+    useExistingCss: this._fb.nonNullable.control<boolean>(true),
+  });
+
+  demoform = this._fb.group({
+    name: ['Angular Developer'],
+    role: ['developer'],
+    bio: ['This text will be preserved in the print view.'],
+    agree: [true],
+  });
+
+  constructor() {
+    // Draw on canvas once it is ready (SSR safe)
+    afterNextRender(() => {
+      this.initCanvas();
+    });
+  }
+
+  onPrint() {
+    this._printService.print({
+      printSectionId: 'print-demo-section',
+      printTitle: this.optionForm.controls.printTitle.value!,
+      printMethod: this.optionForm.controls.printMethod.value,
+      useExistingCss: this.optionForm.controls.useExistingCss.value,
+    });
+  }
+
+  private initCanvas() {
+    const canvas = this.canvasRef().nativeElement;
+    const ctx = canvas.getContext('2d');
+
+    if (ctx) {
+      // Draw a background and some shapes to prove canvas printing works
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.beginPath();
+      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+      ctx.moveTo(110, 75);
+      ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
+      ctx.moveTo(65, 65);
+      ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
+      ctx.moveTo(95, 65);
+      ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
+      ctx.stroke();
+
+      ctx.font = '20px Arial';
+      ctx.fillStyle = 'blue';
+      ctx.fillText('Canvas Content', 150, 85);
+    }
+  }
+}

package/projects/demo/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Demo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/demo/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { DemoComponent } from './app/demo.component';
+
+bootstrapApplication(DemoComponent, appConfig).catch(err => console.error(err));

package/projects/demo/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/projects/demo/tsconfig.app.json

@@ -0,0 +1,19 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}

package/projects/demo/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}