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

package/angular.json

@@ -1,64 +0,0 @@
-{
-  "$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"
-          }
-        },
-        "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  },
-  "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/karma.conf.js

@@ -1,43 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
-    plugins: [
-      require("karma-jasmine"),
-      require("karma-chrome-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage"),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    ccoverageReporter: {
-      dir: require("path").join(__dirname, "./coverage/<project-name>"),
-      subdir: ".",
-      reporters: [{ type: "html" }, { type: "text-summary" }],
-      check: {
-        global: {
-          statements: 80,
-          branches: 80,
-          functions: 80,
-          lines: 80,
-        },
-      },
-    },
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ["Chrome"],
-    customLaunchers: {
-      ChromeHeadlessCI: {
-        base: "ChromeHeadless",
-        flags: ["--no-sandbox"],
-      },
-    },
-    singleRun: true,
-  });
-};

package/ng-package.json

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

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

@@ -1,320 +0,0 @@
-import { CSP_NONCE, Injectable, inject } from '@angular/core';
-import { Subject } from 'rxjs';
-import { PrintOptions } from './print-options';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PrintBase {
-  private nonce = inject(CSP_NONCE, { optional: true });
-
-  private _printStyle: string[] = [];
-  private _styleSheetFile: string = '';
-  protected printComplete = new Subject<void>();
-
-  //#region Getters and Setters
-  /**
-   * Sets the print styles based on the provided values.
-   *
-   * @param {Object} values - Key-value pairs representing print styles.
-   * @protected
-   */
-  protected setPrintStyle(values: { [key: string]: { [key: string]: string } }) {
-    this._printStyle = [];
-    for (const key in values) {
-      if (Object.prototype.hasOwnProperty.call(values, key)) {
-        this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
-      }
-    }
-  }
-
-  /**
-   *
-   *
-   * @returns the string that create the stylesheet which will be injected
-   * later within <style></style> tag.
-   *
-   * -join/replace to transform an array objects to css-styled string
-   */
-  public returnStyleValues() {
-    const styleNonce = this.nonce ? ` nonce="${this.nonce}"` : '';
-    return `<style${styleNonce}> ${this._printStyle.join(' ').replace(/,/g, ';')} </style>`;
-  }
-
-  /**
-   * @returns string which contains the link tags containing the css which will
-   * be injected later within <head></head> tag.
-   *
-   */
-  private returnStyleSheetLinkTags() {
-    return this._styleSheetFile;
-  }
-
-  /**
-   * Sets the style sheet file based on the provided CSS list.
-   *
-   * @param {string} cssList - CSS file or list of CSS files.
-   * @protected
-   */
-  protected setStyleSheetFile(cssList: string) {
-    const linkTagFn = function (cssFileName: string) {
-      return `<link rel="stylesheet" type="text/css" href="${cssFileName}">`;
-    };
-
-    if (cssList.indexOf(',') !== -1) {
-      const valueArr = cssList.split(',');
-      this._styleSheetFile = valueArr.map(val => linkTagFn(val)).join('');
-    } else {
-      this._styleSheetFile = linkTagFn(cssList);
-    }
-  }
-
-  //#endregion
-
-  //#region Private methods used by PrintBase
-
-  /**
-   * Updates the default values for input elements.
-   *
-   * @param {HTMLCollectionOf<HTMLInputElement>} elements - Collection of input elements.
-   * @private
-   */
-  private updateInputDefaults(elements: HTMLCollectionOf<HTMLInputElement>): void {
-    for (let i = 0; i < elements.length; i++) {
-      const element = elements[i];
-      element['defaultValue'] = element.value;
-      if (element['checked']) element['defaultChecked'] = true;
-    }
-  }
-
-  /**
-   * Updates the default values for select elements.
-   *
-   * @param {HTMLCollectionOf<HTMLSelectElement>} elements - Collection of select elements.
-   * @private
-   */
-  private updateSelectDefaults(elements: HTMLCollectionOf<HTMLSelectElement>): void {
-    for (let i = 0; i < elements.length; i++) {
-      const element = elements[i];
-      const selectedIdx = element.selectedIndex;
-      const selectedOption: HTMLOptionElement = element.options[selectedIdx];
-
-      selectedOption.defaultSelected = true;
-    }
-  }
-
-  /**
-   * Updates the default values for textarea elements.
-   *
-   * @param {HTMLCollectionOf<HTMLTextAreaElement>} elements - Collection of textarea elements.
-   * @private
-   */
-  private updateTextAreaDefaults(elements: HTMLCollectionOf<HTMLTextAreaElement>): void {
-    for (let i = 0; i < elements.length; i++) {
-      const element = elements[i];
-      element['defaultValue'] = element.value;
-    }
-  }
-
-  /**
-   * Converts a canvas element to an image and returns its HTML string.
-   *
-   * @param {HTMLCanvasElement} element - The canvas element to convert.
-   * @returns {string} - HTML string of the image.
-   * @private
-   */
-  private canvasToImageHtml(element: HTMLCanvasElement): string {
-    const dataUrl = element.toDataURL();
-    return `<img src="${dataUrl}" style="max-width: 100%;">`;
-  }
-
-  /**
-   * Includes canvas contents in the print section via img tags.
-   *
-   * @param {HTMLCollectionOf<HTMLCanvasElement>} elements - Collection of canvas elements.
-   * @private
-   */
-  private updateCanvasToImage(elements: HTMLCollectionOf<HTMLCanvasElement>): void {
-    for (let i = 0; i < elements.length; i++) {
-      const element = this.canvasToImageHtml(elements[i]);
-      elements[i].insertAdjacentHTML('afterend', element);
-      elements[i].remove();
-    }
-  }
-
-  /**
-   * Retrieves the HTML content of a specified printing section.
-   *
-   * @param {string} printSectionId - Id of the printing section.
-   * @returns {string | null} - HTML content of the printing section, or null if not found.
-   * @private
-   */
-  private getHtmlContents(printSectionId: string): string | null {
-    const printContents = document.getElementById(printSectionId);
-    if (!printContents) return null;
-
-    const inputEls = printContents.getElementsByTagName('input');
-    const selectEls = printContents.getElementsByTagName('select');
-    const textAreaEls = printContents.getElementsByTagName('textarea');
-    const canvasEls = printContents.getElementsByTagName('canvas');
-
-    this.updateInputDefaults(inputEls);
-    this.updateSelectDefaults(selectEls);
-    this.updateTextAreaDefaults(textAreaEls);
-    this.updateCanvasToImage(canvasEls);
-
-    return printContents.innerHTML;
-  }
-
-  /**
-   * Retrieves the HTML content of elements with the specified tag.
-   *
-   * @param {keyof HTMLElementTagNameMap} tag - HTML tag name.
-   * @returns {string} - Concatenated outerHTML of elements with the specified tag.
-   * @private
-   */
-  private getElementTag(tag: keyof HTMLElementTagNameMap): string {
-    const html: string[] = [];
-    const elements = document.getElementsByTagName(tag);
-    for (let index = 0; index < elements.length; index++) {
-      html.push(elements[index].outerHTML);
-    }
-    return html.join('\r\n');
-  }
-  //#endregion
-
-  protected notifyPrintComplete() {
-    this.printComplete.next();
-  }
-
-  /**
-   * Prints the specified content using the provided print options.
-   *
-   * @param {PrintOptions} printOptions - Options for printing.
-   * @public
-   */
-  protected print(printOptions: PrintOptions): void {
-    let styles = '',
-      links = '',
-      popOut = 'top=0,left=0,height=auto,width=auto';
-    const baseTag = this.getElementTag('base');
-
-    if (printOptions.useExistingCss) {
-      styles = this.getElementTag('style');
-      links = this.getElementTag('link');
-    }
-
-    // If the openNewTab option is set to true, then set the popOut option to an empty string.
-    // This will cause the print dialog to open in a new tab.
-    if (printOptions.openNewTab) {
-      popOut = '';
-    }
-
-    const printContents = this.getHtmlContents(printOptions.printSectionId);
-    if (!printContents) {
-      // Handle the case where the specified print section is not found.
-      console.error(`Print section with id ${printOptions.printSectionId} not found.`);
-      return;
-    }
-
-    const popupWin = window.open('', '_blank', popOut);
-
-    if (!popupWin) {
-      // the popup window could not be opened.
-      console.error('Could not open print window.');
-      return;
-    }
-
-    popupWin.document.open();
-
-    // Create the HTML structure
-    const doc = popupWin.document;
-
-    // Set up the basic HTML structure
-    const html = doc.createElement('html');
-    const head = doc.createElement('head');
-    const body = doc.createElement('body');
-
-    // Set title
-    const title = doc.createElement('title');
-    title.textContent = printOptions.printTitle || '';
-    head.appendChild(title);
-
-    // Add base tag, styles, and links
-    if (baseTag) {
-      head.innerHTML += baseTag;
-    }
-    head.innerHTML += this.returnStyleValues();
-    head.innerHTML += this.returnStyleSheetLinkTags();
-    head.innerHTML += styles;
-    head.innerHTML += links;
-
-    // Set body class if provided
-    if (printOptions.bodyClass) {
-      body.className = printOptions.bodyClass;
-    }
-
-    // Insert print contents
-    body.innerHTML += printContents;
-
-    // Add script
-    const script = doc.createElement('script');
-    script.defer = true;
-
-    if (this.nonce) {
-      script.setAttribute('nonce', this.nonce);
-    }
-
-    script.textContent = `
-      function triggerPrint(event) {
-        window.removeEventListener('load', triggerPrint, false);
-        ${
-          printOptions.previewOnly
-            ? ''
-            : `setTimeout(function() {
-          closeWindow(window.print());
-        }, ${printOptions.printDelay});`
-        }
-      }
-      function closeWindow(){
-        ${printOptions.closeWindow ? 'window.close();' : ''}
-      }
-      window.addEventListener('load', triggerPrint, false);
-      window.addEventListener('afterprint', function () {
-        if (window.opener) {
-          window.opener.postMessage({ type: 'print-complete' }, '*');
-        }
-        closeWindow();
-      }, { once: true });
-    `;
-    body.appendChild(script);
-
-    // Assemble the document
-    html.appendChild(head);
-    html.appendChild(body);
-    doc.appendChild(html);
-
-    popupWin.document.close();
-
-    // Listen for the print-complete message
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === 'print-complete') {
-        this.notifyPrintComplete();
-        window.removeEventListener('message', handleMessage);
-      }
-    };
-    window.addEventListener('message', handleMessage);
-
-    // Post the print options to the new window after it loads
-    popupWin.addEventListener('load', () => {
-      // Send the options to the helper function in the child window
-      // The child window calls the function exposed by the library (bundle)
-      if ((popupWin as any).initPrintWindow) {
-        (popupWin as any).initPrintWindow(popupWin, printOptions);
-      } else {
-        // fallback: send via postMessage if the child will read it
-        popupWin.postMessage({ type: 'init-print', options: printOptions }, '*');
-      }
-    });
-  }
-}

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

@@ -1,139 +0,0 @@
-import { Component, DebugElement, provideZonelessChangeDetection } from '@angular/core';
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NgxPrintDirective } from './ngx-print.directive';
-
-@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>
-    <button printSectionId="print-section" ngxPrint bodyClass="theme-dark"></button>
-  `,
-  imports: [NgxPrintDirective],
-})
-class TestNgxPrintComponent {}
-
-describe('NgxPrintDirective', () => {
-  let buttonEl: DebugElement;
-  let component: TestNgxPrintComponent;
-  let fixture: ComponentFixture<TestNgxPrintComponent>;
-
-  // To change this later, so it'll depend on TestNgxPrintComponent
-  const styleSheet: { [key: string]: { [key: string]: string } } = {
-    'h2': { 'border': 'solid 1px' },
-    'h1': { 'color': 'red', 'border': '1px solid' },
-  };
-
-  beforeEach(() => {
-    // Configure a NgModule-like decorator metadata
-    TestBed.configureTestingModule({
-      providers: [provideZonelessChangeDetection()],
-      imports: [TestNgxPrintComponent],
-    });
-
-    // Create a fixture object (that is going to allows us to create an instance of that component)
-    fixture = TestBed.createComponent(TestNgxPrintComponent);
-
-    // Create a component instance ( ~ new Component)
-    component = fixture.componentInstance;
-
-    // Get the button element (on which we tag the directive) to simulate clicks on it
-    buttonEl = fixture.debugElement.query(By.directive(NgxPrintDirective));
-
-    fixture.detectChanges();
-  });
-
-  it('should create an instance', () => {
-    const directive = buttonEl.injector.get(NgxPrintDirective);
-    expect(directive).toBeTruthy();
-  });
-
-  it('should test the @Input printStyle', () => {
-    const directive = buttonEl.injector.get(NgxPrintDirective);
-
-    // Create a spy on the instance's method
-    spyOn(directive, 'returnStyleValues').and.callThrough();
-
-    // Call the function before checking if it has been called
-    directive.returnStyleValues();
-
-    // Check if returnStyleValues has been called
-    expect(directive.returnStyleValues).toHaveBeenCalled();
-  });
-
-  it('should returns a string from array of objects', () => {
-    const directive = buttonEl.injector.get(NgxPrintDirective);
-    directive.printStyle = styleSheet;
-
-    // Ensure the print styles are correctly formatted in the document
-    expect(directive.returnStyleValues()).toEqual('<style> h2{border:solid 1px} h1{color:red;border:1px solid} </style>');
-  });
-
-  it(`should popup a new window`, () => {
-    spyOn(window, 'open').and.callThrough();
-    // simulate click
-    buttonEl.triggerEventHandler('click', {});
-    expect(window.open).toHaveBeenCalled();
-  });
-
-  it('should apply class list to body element in new window', () => {
-    const windowOpenSpy = spyOn(window, 'open').and.callThrough();
-
-    // Simulate click
-    buttonEl.triggerEventHandler('click', {});
-
-    const newWindow = windowOpenSpy.calls.mostRecent().returnValue;
-
-    // Ensure newWindow is not null before accessing properties
-    if (newWindow && newWindow.document && newWindow.document.body) {
-      expect(newWindow.document.body.classList.contains('theme-dark')).toBeTrue();
-    } else {
-      fail('Window was not opened or document/body is not accessible.');
-    }
-  });
-
-  it('should emit printComplete when printing finishes', done => {
-    let emitted = false;
-
-    const directive = buttonEl.injector.get(NgxPrintDirective);
-
-    directive.printCompleted.subscribe(() => {
-      emitted = true;
-      expect(emitted).toBeTrue();
-      done();
-    });
-
-    // Trigger the print
-    buttonEl.triggerEventHandler('click', null);
-
-    // Simulate popup posting "print-complete" message back to opener
-    window.dispatchEvent(new MessageEvent('message', { data: { type: 'print-complete' } }));
-  });
-});

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

@@ -1,113 +0,0 @@
-import { Directive, HostListener, Input, output } from '@angular/core';
-import { PrintBase } from './ngx-print.base';
-import { PrintOptions } from './print-options';
-import { take } from 'rxjs';
-@Directive({
-  selector: '[ngxPrint]',
-  standalone: true,
-})
-export class NgxPrintDirective extends PrintBase {
-  private printOptions = new PrintOptions();
-  /**
-   * Prevents the print dialog from opening on the window
-   *
-   * @memberof NgxPrintDirective
-   */
-  @Input() set previewOnly(value: boolean) {
-    this.printOptions = { ...this.printOptions, previewOnly: value };
-  }
-
-  /**
-   *
-   *
-   * @memberof NgxPrintDirective
-   */
-  @Input() set printSectionId(value: string) {
-    this.printOptions = { ...this.printOptions, printSectionId: value };
-  }
-
-  /**
-   *
-   *
-   * @memberof NgxPrintDirective
-   */
-  @Input() set printTitle(value: string) {
-    this.printOptions = { ...this.printOptions, printTitle: value };
-  }
-
-  /**
-   *
-   *
-   * @memberof NgxPrintDirective
-   */
-  @Input() set useExistingCss(value: boolean) {
-    this.printOptions = { ...this.printOptions, useExistingCss: value };
-  }
-
-  /**
-   * A delay in milliseconds to force the print dialog to wait before opened. Default: 0
-   *
-   * @memberof NgxPrintDirective
-   */
-  @Input() set printDelay(value: number) {
-    this.printOptions = { ...this.printOptions, printDelay: value };
-  }
-
-  /**
-   * Whether to close the window after print() returns.
-   *
-   */
-  @Input() set closeWindow(value: boolean) {
-    this.printOptions = { ...this.printOptions, closeWindow: value };
-  }
-
-  /**
-   * Class attribute to apply to the body element.
-   *
-   */
-  @Input() set bodyClass(value: string) {
-    this.printOptions = { ...this.printOptions, bodyClass: value };
-  }
-
-  /**
-   * Whether to open a new window or default to new window.
-   *
-   */
-  @Input() set openNewTab(value: boolean) {
-    this.printOptions = { ...this.printOptions, openNewTab: value };
-  }
-
-  /**
-   *
-   *
-   * @memberof NgxPrintDirective
-   */
-  @Input()
-  set printStyle(values: { [key: string]: { [key: string]: string } }) {
-    super.setPrintStyle(values);
-  }
-
-  /**
-   * @memberof NgxPrintDirective
-   * @param cssList
-   */
-  @Input()
-  set styleSheetFile(cssList: string) {
-    super.setStyleSheetFile(cssList);
-  }
-
-  /**
-   *
-   *
-   * @memberof NgxPrintDirective
-   */
-  @HostListener('click')
-  public print(): void {
-    super.print(this.printOptions);
-    this.printComplete.pipe(take(1)).subscribe(() => {
-      this.printCompleted.emit(undefined);
-    });
-  }
-
-  readonly printCompleted = output<void>();
-}

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

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NgxPrintDirective } from './ngx-print.directive';
-
-@NgModule({
-  imports: [NgxPrintDirective],
-  exports: [NgxPrintDirective],
-})
-export class NgxPrintModule {}