ngx-print 20.1.0-beta.3 → 20.1.0-beta.4

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

@@ -0,0 +1,201 @@
+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';
+
+const testNonce = 'dummy-nonce-value';
+
+@Component({
+  template: `
+    <div id="print-section">
+      <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: { [key: string]: { [key: string]: string } } = {
+    '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', () => {
+    spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should print with title', () => {
+    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', () => {
+    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', () => {
+    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', () => {
+    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', () => {
+    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', () => {
+    spyOn(service, 'print');
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+      openNewTab: true,
+    });
+
+    component.printMe(customPrintOptions);
+
+    expect(service.print).toHaveBeenCalledWith(customPrintOptions);
+  });
+
+  it('should test the printStyle', () => {
+    // Create a spy on the instance's method
+    spyOn(service, 'returnStyleValues').and.callThrough();
+
+    // 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 emit on print completion (void)', done => {
+    // Subscribe to the observable
+    service.printComplete$.subscribe(() => {
+      expect(true).toBeTrue(); // Just ensure it emits
+      done();
+    });
+
+    const customPrintOptions: PrintOptions = new PrintOptions({
+      printSectionId: 'print-section',
+    });
+
+    component.printMe(customPrintOptions);
+
+    // Simulate the popup sending the print complete message
+    window.dispatchEvent(new MessageEvent('message', { data: { type: 'print-complete' } }));
+  });
+});

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

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { PrintBase } 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}
+ */
+@Injectable({
+  providedIn: 'root',
+})
+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 print(printOptions: PrintOptions): void {
+    // Call the print method in the parent class
+    super.print(printOptions);
+  }
+
+  /**
+   * Sets the print style for the printing process.
+   *
+   * @param {{ [key: string]: { [key: string]: string } }} values - A dictionary representing the print styles.
+   * @memberof NgxPrintService
+   * @setter
+   */
+  set printStyle(values: { [key: string]: { [key: string]: string } }) {
+    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-helper.ts

@@ -0,0 +1,24 @@
+import { PrintOptions } from './print-options';
+
+// src/lib/print-helper.ts
+export function initPrintWindow(windowRef: Window, printOptions: PrintOptions) {
+  function triggerPrint() {
+    windowRef.removeEventListener('load', triggerPrint, false);
+    if (!printOptions.previewOnly) {
+      setTimeout(() => {
+        windowRef.print();
+        if (printOptions.closeWindow) windowRef.close();
+      }, printOptions.printDelay || 0);
+    }
+  }
+
+  function afterPrint() {
+    if (windowRef.opener) {
+      windowRef.opener.postMessage({ type: 'print-complete' }, '*');
+    }
+    if (printOptions.closeWindow) windowRef.close();
+  }
+
+  windowRef.addEventListener('load', triggerPrint, false);
+  windowRef.addEventListener('afterprint', afterPrint, { once: true });
+}

package/src/lib/print-options.ts

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

package/src/public_api.ts

@@ -0,0 +1,18 @@
+/*
+ * 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';
+import { initPrintWindow } from './lib/print-helper';
+
+// Expose globally for popup windows
+(window as any).initPrintWindow = initPrintWindow;
+
+// Optional: listen for postMessage from child window
+window.addEventListener('message', (event: MessageEvent) => {
+  if (event.data?.type === 'init-print') {
+    initPrintWindow(window, event.data.options);
+  }
+});

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "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"
+    ],
+    "lib": [
+      "ES2022",
+      "dom"
+    ],
+    "paths": {
+      "ngx-print": [
+        "dist/ngx-print"
+      ],
+      "ngx-print/*": [
+        "dist/ngx-print/*"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.lib.json

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

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "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"
+    ]
+  }
+}