ngx-print 21.2.0 → 22.1.0

package/src/lib/ngx-print.service.spec.ts

@@ -0,0 +1,276 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxPrintService } from './ngx-print.service';
+import { Component, CSP_NONCE, inject, provideZonelessChangeDetection } from '@angular/core';
+import { PrintOptions } from './print-options';
+import { PrintStyle } from './ngx-print.base';
+
+const testNonce = 'dummy-nonce-value';
+
+@Component({
+  template: `
+    <div id="print-section" style="border: 2px solid red;">
+      <h1>Welcome to ngx-print</h1>
+      <img
+        width="300"
+        alt="Angular Logo"
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />
+      <h2>Here are some links to help you start:</h2>
+      <ul>
+        <li>
+          <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+        </li>
+        <li>
+          <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+        </li>
+        <li>
+          <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+        </li>
+      </ul>
+      <table border="1">
+        <tr>
+          <td>Row 1, Column 1</td>
+          <td>Row 1, Column 2</td>
+        </tr>
+        <tr>
+          <td>Row 2, Column 1</td>
+          <td>Row 2, Column 2</td>
+        </tr>
+      </table>
+    </div>
+  `,
+})
+class TestNgxPrintServiceComponent {
+  private printService = inject(NgxPrintService);
+
+  printMe(printOptions: PrintOptions) {
+    this.printService.print(printOptions);
+  }
+}
+
+describe('NgxPrintService', () => {
+  let service: NgxPrintService;
+  let component: TestNgxPrintServiceComponent;
+  let fixture: ComponentFixture<TestNgxPrintServiceComponent>;
+
+  const styleSheet: PrintStyle = {
+    'h2': { 'border': 'solid 1px' },
+    'h1': { 'color': 'red', 'border': '1px solid' },
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestNgxPrintServiceComponent],
+      providers: [{ provide: CSP_NONCE, useValue: testNonce }, NgxPrintService, provideZonelessChangeDetection()],
+    });
+    service = TestBed.inject(NgxPrintService);
+    // Create a fixture object (that is going to allows us to create an instance of that component)
+    fixture = TestBed.createComponent(TestNgxPrintServiceComponent);
+
+    // Create a component instance ( ~ new Component)
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should print', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should print with title', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      printTitle: 'Test Title',
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should print with existing css', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      useExistingCss: true,
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should print with delay', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      printDelay: 2000,
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should print with previewOnly', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      previewOnly: true,
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should not close', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      closeWindow: false,
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should open new tab', () => {
+    vi.spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      printMethod: 'tab',
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should test the printStyle', () => {
+    // Create a spy on the instance's method
+    vi.spyOn(service, 'returnStyleValues');
+
+    // Call the function before checking if it has been called
+    service.returnStyleValues();
+
+    // Check if returnStyleValues has been called
+    expect(service.returnStyleValues).toHaveBeenCalled();
+  });
+
+  it('should return a string from array of objects', () => {
+    service.printStyle = styleSheet;
+
+    // Ensure the print styles are correctly formatted in the document
+    expect(service.returnStyleValues()).toEqual('<style nonce="' + testNonce + '"> h2{border:solid 1px} h1{color:red;border:1px solid} </style>');
+  });
+
+  it('should preserve quotes and commas within style values', () => {
+    service.printStyle = {
+      'li::before': { content: '"→"' },
+      'p': { 'font-family': '"Helvetica Neue", Arial, sans-serif', color: 'red' },
+    };
+
+    expect(service.returnStyleValues()).toEqual(
+      '<style nonce="' + testNonce + '"> li::before{content:"→"} p{font-family:"Helvetica Neue", Arial, sans-serif;color:red} </style>',
+    );
+  });
+
+  it('should accept a raw CSS string for printStyle', () => {
+    service.printStyle = 'h1, h2 { color: red; }';
+
+    expect(service.returnStyleValues()).toEqual('<style nonce="' + testNonce + '"> h1, h2 { color: red; } </style>');
+  });
+
+  it('should clear the style when printStyle is set to an empty string', () => {
+    service.printStyle = 'h1 { color: red; }';
+    service.printStyle = '';
+
+    expect(service.returnStyleValues()).toEqual('<style nonce="' + testNonce + '">  </style>');
+  });
+
+  it('should preserve the print section root element attributes (e.g. style)', () => {
+    const body = {
+      className: '',
+      classList: { contains: () => false },
+      innerHTML: '',
+      appendChild: vi.fn(),
+    };
+    const mockDocument = {
+      body,
+      open: vi.fn(),
+      close: vi.fn(),
+      head: { appendChild: vi.fn(), innerHTML: '' },
+      appendChild: vi.fn(),
+      createElement: (tag: string) => (tag === 'body' ? body : { innerHTML: '', appendChild: vi.fn(), textContent: '' }),
+    };
+    const mockWindow = {
+      document: mockDocument,
+      closed: true,
+      addEventListener: vi.fn(),
+    };
+    vi.spyOn(window, 'open').mockReturnValue(mockWindow as unknown as Window);
+
+    component.printMe(new PrintOptions({ printSectionId: 'print-section' }));
+
+    // The print section's own id and inline style must survive (not just its children's).
+    expect(mockDocument.body.innerHTML).toContain('id="print-section"');
+    expect(mockDocument.body.innerHTML).toContain('border: 2px solid red');
+  });
+
+  it('should emit on print completion (void)', () => {
+    vi.useFakeTimers();
+    const body = {
+      className: '',
+      classList: { contains: () => false },
+      innerHTML: '',
+      appendChild: vi.fn(),
+    };
+    const mockDocument = {
+      body,
+      open: vi.fn(),
+      close: vi.fn(),
+      head: { appendChild: vi.fn(), innerHTML: '' },
+      appendChild: vi.fn(),
+      createElement: (tag: string) => (tag === 'body' ? body : { innerHTML: '', appendChild: vi.fn(), textContent: '' }),
+    };
+    const mockWindow = {
+      document: mockDocument,
+      closed: true,
+      addEventListener: vi.fn(),
+    };
+    vi.spyOn(window, 'open').mockReturnValue(mockWindow as unknown as Window);
+
+    return new Promise<void>(resolve => {
+      service.printComplete$.subscribe(() => {
+        expect(true).toBe(true);
+        vi.useRealTimers();
+        resolve();
+      });
+      const customPrintOptions: PrintOptions = new PrintOptions({
+        printSectionId: 'print-section',
+      });
+      component.printMe(customPrintOptions);
+      vi.advanceTimersByTime(600);
+    });
+  });
+});

package/src/lib/ngx-print.service.ts

@@ -0,0 +1,50 @@
+import { Service } from '@angular/core';
+import { PrintBase, PrintStyleInput } from './ngx-print.base';
+import { PrintOptions } from './print-options';
+
+/**
+ * Service for handling printing functionality in Angular applications.
+ * Extends the base printing class (PrintBase).
+ *
+ * @export
+ * @class NgxPrintService
+ * @extends {PrintBase}
+ */
+@Service()
+export class NgxPrintService extends PrintBase {
+  printComplete$ = this.printComplete.asObservable();
+
+  /**
+   * Initiates the printing process using the provided print options.
+   *
+   * @param {PrintOptions} printOptions - Options for configuring the printing process.
+   * @memberof NgxPrintService
+   * @returns {void}
+   */
+  public override print(printOptions?: Partial<PrintOptions>): void {
+    // Call the print method in the parent class
+    super.print(printOptions);
+  }
+
+  /**
+   * Sets the print style for the printing process.
+   *
+   * @param values - Either a dictionary representing the print styles, or a raw CSS string.
+   * @memberof NgxPrintService
+   * @setter
+   */
+  set printStyle(values: PrintStyleInput) {
+    super.setPrintStyle(values);
+  }
+
+  /**
+   * Sets the stylesheet file for the printing process.
+   *
+   * @param {string} cssList - A string representing the path to the stylesheet file.
+   * @memberof NgxPrintService
+   * @setter
+   */
+  set styleSheetFile(cssList: string) {
+    super.setStyleSheetFile(cssList);
+  }
+}

package/src/lib/print-options.ts

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

package/src/public_api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of ngx-print
+ */
+export { NgxPrintDirective } from './lib/ngx-print.directive';
+export { NgxPrintModule } from './lib/ngx-print.module';
+export { NgxPrintService } from './lib/ngx-print.service';
+export { PrintOptions } from './lib/print-options';
+export { PrintStyle, PrintStyleInput } from './lib/ngx-print.base';

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "declaration": false,
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "ES2022",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "paths": {
+      "ngx-print": [
+        "./dist/ngx-print"
+      ],
+      "ngx-print/*": [
+        "./dist/ngx-print/*"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  },
+  "references": [
+    {
+      "path": "./projects/demo/tsconfig.app.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["node"],
+    "skipLibCheck": true
+  },
+  "files": [],
+  "include": ["**/*.spec.ts", "**/*.d.ts", "**/*.ts"]
+}

package/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      false,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}