ngx-print 21.2.0 → 22.1.0

package/.editorconfig

@@ -0,0 +1,13 @@
+# 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
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-expressions": "off",
+        "@angular-eslint/directive-selector": [
+          "off",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "excludedFiles": ["*inline-template-*.component.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
+      "rules": {
+        "prettier/prettier": [
+          "error",
+          {
+            "parser": "angular"
+          }
+        ]
+      }
+    }
+  ]
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Ngx-Print Version**
+Include the current affected version.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/dependabot.yml

@@ -0,0 +1,17 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+      day: 'monday'
+      time: '10:00'
+      timezone: 'America/New_York'
+    open-pull-requests-limit: 5
+    groups:
+      npm-dependencies:
+        patterns:
+          - '*'
+    ignore:
+      - dependency-name: '*'
+        update-types: ['version-update:semver-major']

package/.github/workflows/PullRequest.yml

@@ -0,0 +1,32 @@
+name: Pull Request Checker
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{github.repository_id}}-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-npm:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.17.0
+
+      - name: Install npm dependencies
+        run: npm ci
+
+        # Run linting
+      - name: Run lint
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test

package/.github/workflows/stale.yml

@@ -0,0 +1,25 @@
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+    - cron: '0 2 * * *'
+  workflow_dispatch:
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: 'This issue has been automatically marked as stale due to inactivity. Please comment if you want to keep it open.'
+          stale-pr-message: 'This pull request has been automatically marked as stale due to inactivity.'
+          close-issue-message: 'Closing this issue due to prolonged inactivity.'
+          close-pr-message: 'Closing this pull request due to inactivity.'
+          days-before-stale: 30
+          days-before-close: 7
+          exempt-issue-labels: 'inspecting'

package/.prettierignore

@@ -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

package/.prettierrc.json

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "printWidth": 150,
+  "endOfLine": "auto",
+  "htmlWhitespaceSensitivity": "ignore",
+  "quoteProps": "preserve"
+}

package/CHANGELOG.md

@@ -0,0 +1,126 @@
+# 22.0.0 (2026-06-22)
+
+- Support for Angular 22.
+
+# 21.1.0 (2026-01-07)
+
+### New features
+
+- iFrame printing
+
+### New features
+
+- Support for Angular 21.
+
+### Bug fixes
+
+- nullpointer defaultSelected
+
+# 20.1.0 (2025-09-01)
+
+### New features
+
+- Can now use `ngx-print` without nonces for inline script.
+
+### Maintenance
+
+- Updated npm dependencies (multiple Dependabot updates).
+- Removed unsafe inline script.
+
+# 20.0.0 (2025-07-15)
+
+### New features
+
+- Support for Angular 20.
+- Aligned major versions with Angular release versions (library major matches Angular major).
+
+### Maintenance
+
+- Implemented various feature requests and updated npm dependencies.
+
+# 3.1.0 (2025-06-12)
+
+### New features
+
+- Now supports printing on any HTML element, not only button elements.
+- Replaced `document.write` usage with DOM manipulation for rendering print content.
+
+### Bug fixes
+
+- Fixed issues related to printing from specific button elements.
+
+# 3.0.0 (2025-05-21)
+
+### New features
+
+- Support for Angular 19.
+
+# 2.0.0 (2024-12-04)
+
+### New features
+
+- Added support for Content-Security-Policy via nonce injection.
+- Support for Angular 18.
+
+### Contributors
+
+- Contributions by EpicVoyage and Core121.
+
+# 1.5.1 (2024-01-05)
+
+### New features
+
+- Added support for printing canvas contents.
+- Added option to open the print view in a new tab.
+
+### Bug fixes
+
+- Fixed `printTitle` property issue.
+
+### Maintenance
+
+- Documentation updates.
+
+# 1.5.0 (2023-12-03)
+
+- Now supports Angular 17.
+- Added printService.
+
+# 1.4.0 (2023-12-03)
+
+- Now supports Angular 16.
+- Added functionality to handle select form fields.
+- Added standalone support.
+- Added `closeWindow` and `bodyClass` options and fixed tests.
+
+# 1.3.1 (2023-01-04)
+
+### Bug fixes
+
+- Fixed build by allowing the package to run in partial Ivy mode due to npm not supporting full Ivy mode, deprecating
+  v1.3.0.
+
+# 1.3.0 (2022-12-20)
+
+### New features
+
+- Supports `previewOnly` tag, allowing for the print preview to show without the print dialog.
+
+### Dependency Updates
+
+- Angular Ivy support with Angular 15.
+
+# 1.2.1 (2021-05-10)
+
+### Bug fixes
+
+- Working build for non‑beta releases.
+
+# 1.1.0 (2018-12-04)
+
+### New features
+
+- Support styles (
+  CSS) ([#5](https://github.com/selemxmn/ngx-print/issues/5)) ([71cefdf](https://github.com/selemxmn/ngx-print/commit/71cefdf)).
+- Permit a dynamic title of printing window instead of the old static
+  `Print tab` ([2098f3e](https://github.com/selemxmn/ngx-print/commit/2098f3e)).

package/README.md

@@ -1,12 +1,15 @@
 [![](https://badgen.net/npm/dt/ngx-print)](https://www.npmjs.com/package/ngx-print) [![](https://travis-ci.org/selemxmn/ngx-print.svg?branch=master)](https://travis-ci.org/selemxmn/ngx-print) [![Coverage Status](https://coveralls.io/repos/github/selemxmn/ngx-print/badge.svg?branch=unit-tests)](https://coveralls.io/github/selemxmn/ngx-print?branch=unit-tests)
 
-# ngx-print : *plug n' play Angular (2++) directive to print your stuff*
-This directive makes printing your HTML sections smooth and easy in your Angular application. It is inspired from the old [AngularJS ngPrint](https://github.com/gilf/ngPrint) directive, thus it is intendend to be used with the new Angular -2/4/5/6/7-... ***Enjoy ! contributions are so welcomed :)***
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/i7vymeqf-anasgtzf?file=src%2Fmain.ts)
+
+# ngx-print : *plug n' play Angular directive to print your stuff*
+This directive makes printing your HTML sections smooth and easy in your Angular application. It is inspired from the old [AngularJS ngPrint](https://github.com/gilf/ngPrint) directive.
+***Enjoy! Contributions are so welcomed :)***
 
 ## Dependencies
 
 | ngx-print | Angular        |
-|-----------|----------------|
+| --------- | -------------- |
 | 1.2.1     | 7.0.0 - 14.1.0 |
 | 1.3.x     | 15.0.0         |
 | 1.4.x     | 16.0.0         |
@@ -15,6 +18,7 @@ This directive makes printing your HTML sections smooth and easy in your Angular
 | 3.x.x     | 19.0.0         |
 | 20.x.x    | 20.0.0         |
 | 21.x.x    | 21.0.0         |
+| 22.x.x    | 22.0.0         |
 
 ## Version Alignment Notice
 
@@ -53,7 +57,7 @@ export class PrintExampleComponent {}
 <button>print</button> <!--Your relevant print button-->
 ```
 
- - Now, what you have to do is tagging your *wanted-to-print* section by an `id` attribute, then link that `id` to a directive parameter in your button :
+- Now, what you have to do is tagging your *wanted-to-print* section by an `id` attribute, then link that `id` to a directive parameter in your button:
 
 ```html
  <!--
@@ -68,16 +72,14 @@ export class PrintExampleComponent {}
    3)- Affect your ID to printSectionId
  -->
 <button printSectionId="print-section" ngxPrint>print</button> 
-
 ```
 
 ## Optional properties
 
-- You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button `printTitle`:
-
+- You want a customized title for your printing window? Add `printTitle`:
 
 ```html
-<div  id="print-section">
+<div id="print-section">
   <!-- ... -->
 </div>
 
@@ -86,11 +88,10 @@ export class PrintExampleComponent {}
         ngxPrint>print</button>
 ```
 
-  
-- Also, would you like to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite styles to another attribute called `printStyle`:
-  
+- Customize the printing stylesheet (CSS) by adding styles to `printStyle`:
+
 ```html
-<div  id="print-section">
+<div id="print-section">
   <!-- ... -->
 </div>
 
@@ -100,11 +101,19 @@ export class PrintExampleComponent {}
 ```
 
 Here some simple styles were added to every `h1` & `h2` tags within the `div` where `print-section` is tagged to its `id` attribute.
-  
+
+`printStyle` also accepts a raw CSS string, which is injected into the print document's `<style>` tag as-is. This is useful for anything the object form can't express well, such as multiple selectors per rule, media queries, or `!important`:
+
+```html
+<button printStyle="h1, h2 { color: red; } @media print { .no-print { display: none; } }"
+        printSectionId="print-section"
+        ngxPrint>print</button>
+```
+
 - If you would like to use your existing CSS with media print you can add the `useExistingCss` attribute:
 
 ```html
-<div  id="print-section">
+<div id="print-section">
   <!-- ... -->
 </div>
 
@@ -113,10 +122,10 @@ Here some simple styles were added to every `h1` & `h2` tags within the `div` wh
         ngxPrint>print</button>
 ```
 
-- If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css use `styleSheetFile`:
+- Import external stylesheets with `styleSheetFile` (comma-separated list):
 
 ```html
-<div  id="print-section">
+<div id="print-section">
   <!-- ... -->
 </div>
 
@@ -124,54 +133,63 @@ Here some simple styles were added to every `h1` & `h2` tags within the `div` wh
         printSectionId="print-section"
         ngxPrint>print</button>
 ```
-  
-- If you would like to show a preview without a print dialog use `previewOnly`:
+
+- Show a preview without opening the print dialog using `previewOnly`:
 
 ```html
-<div  id="print-section">
+<div id="print-section">
   <!-- ... -->
 </div>
 
 <button [previewOnly]="true"
         printSectionId="print-section"
         ngxPrint>print</button>
-
 ```
 
 - Some print operations open a second dialog, and automatically closing the popup window happens before the second dialog opens. Set `closeWindow` to false to handle print operations that open a second dialog, like "Microsoft Print to PDF", or "Print using system dialog...":
 
 ```html
-
-<div  id="print-section">
+<div id="print-section">
   <!-- ... -->
 </div>
 
 <button [closeWindow]="false"
         printSectionId="print-section"
         ngxPrint>print</button>
-
 ```
 
-- Set `bodyClass` to whatever class values are needed for some of your css rules that expect an ancestor to have a certain class. For example, a theme selector:
+- Set `bodyClass` to whatever class values are needed for some of your CSS rules that expect an ancestor to have a certain class. For example, a theme selector:
 
 ```html
-<div  id="print-section">
-<!-- ... -->
+<div id="print-section">
+  <!-- ... -->
 </div>
 
-<button [bodyClass]="theme-dark"
+<button bodyClass="theme-dark"
         printSectionId="print-section"
         ngxPrint>print</button>
 ```
 
-- To print in a new tab rather than a new window set the property  `openNewTab` to true. By default `openNewTab` is false and ngxPrint will open a new print window.
+- Use `printMethod` to control how the print window is opened. The default is `'window'` (a new popup window). Set it to `'tab'` to open a new browser tab instead, or to `'iframe'` to print silently in the background using a hidden iframe (no popup at all):
 
 ```html
-<button [openNewTab]="true"
+<!-- Default: opens a new popup window -->
+<button printMethod="window"
+        printSectionId="print-section"
+        ngxPrint>print</button>
+
+<!-- Opens a new browser tab -->
+<button printMethod="tab"
+        printSectionId="print-section"
+        ngxPrint>print</button>
+
+<!-- Prints silently via a hidden iframe (no popup) -->
+<button printMethod="iframe"
+        printSectionId="print-section"
         ngxPrint>print</button>
 ```
 
-- To run a function after printing completes, subscribe to the `printCompleted` event. Please note it is impossible to differentiate between the Cancel or Print buttong being clicked on the print window. This event will fire regardless of which button was clicked:
+- To run a function after printing completes, subscribe to the `printCompleted` event. Please note it is impossible to differentiate between the Cancel or Print button being clicked on the print window. This event will fire regardless of which button was clicked:
 
 ```html
 <button (printCompleted)="onPrintComplete()"
@@ -182,66 +200,86 @@ Here some simple styles were added to every `h1` & `h2` tags within the `div` wh
 
 ## Using NgxPrint as a service (v1.5+)
 
-Inject the NgxPrintService into your component or service:
+Inject the `NgxPrintService` into your component or service:
 
 ```ts
+import { inject } from '@angular/core';
+import { NgxPrintService, PrintOptions } from 'ngx-print';
+
 private readonly printService = inject(NgxPrintService);
 ```
 
 ### Printing a Section
 
-```typescript
-import { PrintOptions } from './path-to-your/print-options.model';
+```ts
+import { PrintOptions } from 'ngx-print';
 
 printMe(): void {
-  const customPrintOptions: PrintOptions = new PrintOptions({
-      printSectionId: 'print-section',
-      // add any other print options as needed
+  const customPrintOptions = new PrintOptions({
+    printSectionId: 'print-section',
+    // add any other print options as needed
   });
-  this.printService.print(customPrintOptions)
+  this.printService.print(customPrintOptions);
 }
 ```
 
 ### Print Options Object
-The print options object allows you to specify how the print job should be handled. All of which have default values that you can optionally override, although printSectionId is required. It contains the following properties:
+
+The `PrintOptions` object allows you to specify how the print job should be handled. All properties have default values and are optional, although `printSectionId` is required. It contains the following properties:
+
 ```typescript
-  printSectionId: string = null;
-printTitle: string = null;
+printSectionId: string = '';
+printTitle: string = '';
 useExistingCss: boolean = false;
 bodyClass: string = '';
-openNewTab: boolean = false;
+printMethod: 'window' | 'tab' | 'iframe' = 'window';
 previewOnly: boolean = false;
 closeWindow: boolean = true;
 printDelay: number = 0;
 ```
 
+| Property         | Type                            | Default    | Description                                                                  |
+| ---------------- | ------------------------------- | ---------- | ---------------------------------------------------------------------------- |
+| `printSectionId` | `string`                        | `''`       | **Required.** The `id` of the element to print.                              |
+| `printTitle`     | `string`                        | `''`       | Title shown in the print document.                                           |
+| `useExistingCss` | `boolean`                       | `false`    | Copies `<style>` and `<link>` tags from the host page.                       |
+| `bodyClass`      | `string`                        | `''`       | CSS class(es) applied to the print `<body>`.                                 |
+| `printMethod`    | `'window' \| 'tab' \| 'iframe'` | `'window'` | Controls how printing is triggered: popup window, new tab, or silent iframe. |
+| `previewOnly`    | `boolean`                       | `false`    | Opens the print target without triggering the print dialog.                  |
+| `closeWindow`    | `boolean`                       | `true`     | Closes the popup window after printing (ignored for `iframe`).               |
+| `printDelay`     | `number`                        | `0`        | Delay in milliseconds before the print dialog is opened.                     |
+
 ### Setting PrintStyles or StyleSheets
 
-```typescript
-// Optional property for css as a key-value pair
+```ts
+// Optional: CSS as a key-value pair
 this.printService.printStyle = styleSheet;
 
-// Optional property for a css file location
+// Optional: CSS as a raw string
+this.printService.printStyle = 'h1, h2 { color: red; }';
+
+// Optional: path to a CSS file
 this.printService.styleSheetFile = fileLocation;
 ```
 
-### Subscribing to print event
+### Subscribing to the print event
 
-```typescript
- this.printService.printComplete$.pipe(take(1)).subscribe(() => {
-   console.log('Print completed!');
- });
+```ts
+this.printService.printComplete$.pipe(take(1)).subscribe(() => {
+  console.log('Print completed!');
+});
 ```
 
 ## Content-Security-Policy (CSP) Support
-If Angular is configured to use a [CSP Nonce](https://angular.io/api/core/CSP_NONCE), ngx-print will automatically inject the `[printStyle]` CSS rules with this Nonce authorization.
+
+If Angular is configured to use a [CSP Nonce](https://angular.io/api/core/CSP_NONCE), ngx-print will automatically inject the `[printStyle]` CSS rules and stylesheet `<link>` tags with this nonce so they are permitted by the browser's Content Security Policy.
 
 ## Contributors :1st_place_medal:
 
-Huge thanks to: [deeplotia](https://github.com/deeplotia) , [Ben L](https://github.com/broem) , [Gavyn McKenzie](https://github.com/gavmck) , [silenceway](https://github.com/silenceway), [Muhammad Ahsan Ayaz](https://github.com/AhsanAyaz), [Core121](https://github.com/Core121) and to all  `ngx-print` users 
+Huge thanks to: [deeplotia](https://github.com/deeplotia), [Ben L](https://github.com/broem), [Gavyn McKenzie](https://github.com/gavmck), [silenceway](https://github.com/silenceway), [Muhammad Ahsan Ayaz](https://github.com/AhsanAyaz), [Core121](https://github.com/Core121), [Andreas Dorner](https://github.com/endlacer) and to all `ngx-print` users
 
 ## Donation
 
-Did this project help you reducing time? I won't say no to a cup of coffee 🍵 :)
+Did this project help you reduce time? I won't say no to a cup of coffee 🍵 :)
 
 [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/selemxmn/2)

package/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman