npm - ngx-print - Versions diffs - 21.2.0 → 22.1.0 - Mend

ngx-print 21.2.0 → 22.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/.editorconfig +13 -0
package/.eslintrc.json +50 -0
package/.github/ISSUE_TEMPLATE/bug_report.md +31 -0
package/.github/ISSUE_TEMPLATE/feature_request.md +19 -0
package/.github/dependabot.yml +17 -0
package/.github/workflows/PullRequest.yml +32 -0
package/.github/workflows/stale.yml +25 -0
package/.prettierignore +42 -0
package/.prettierrc.json +14 -0
package/CHANGELOG.md +126 -0
package/README.md +90 -52
package/_config.yml +1 -0
package/angular.json +132 -0
package/eslint.config.js +32 -0
package/ng-package.json +7 -0
package/package.json +60 -43
package/projects/demo/public/favicon.ico +0 -0
package/projects/demo/src/app/app.config.ts +11 -0
package/projects/demo/src/app/app.routes.ts +3 -0
package/projects/demo/src/app/demo.component.html +83 -0
package/projects/demo/src/app/demo.component.scss +54 -0
package/projects/demo/src/app/demo.component.ts +73 -0
package/projects/demo/src/index.html +13 -0
package/projects/demo/src/main.ts +5 -0
package/projects/demo/src/styles.scss +1 -0
package/projects/demo/tsconfig.app.json +19 -0
package/projects/demo/tsconfig.spec.json +15 -0
package/src/lib/ngx-print.base.ts +381 -0
package/src/lib/ngx-print.directive.spec.ts +232 -0
package/src/lib/ngx-print.directive.ts +72 -0
package/src/lib/ngx-print.module.ts +8 -0
package/src/lib/ngx-print.service.spec.ts +276 -0
package/src/lib/ngx-print.service.ts +50 -0
package/src/lib/print-options.ts +16 -0
package/src/public_api.ts +8 -0
package/tsconfig.json +38 -0
package/tsconfig.lib.json +19 -0
package/tsconfig.spec.json +10 -0
package/tslint.json +17 -0
package/fesm2022/ngx-print.mjs +0 -543
package/fesm2022/ngx-print.mjs.map +0 -1
package/types/ngx-print.d.ts +0 -228
package/types/ngx-print.d.ts.map +0 -1

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

@@ -0,0 +1,381 @@
+import { CSP_NONCE, DOCUMENT, inject, Service } from '@angular/core';
+import { Subject } from 'rxjs';
+import { PrintOptions } from './print-options';
+/** For example:
+ * {
+ *     'h2': { 'border': 'solid 1px' },
+ *     'h1': { 'color': 'red', 'border': '1px solid' },
+ *   */
+export type PrintStyle = Record<string, Record<string, string>>;
+/**
+ * Either a {@link PrintStyle} object, or a raw CSS string (e.g. `'h1 { color: red; }'`)
+ * to be injected into the print document's <style> tag as-is.
+ */
+export type PrintStyleInput = PrintStyle | string;
+@Service()
+export class PrintBase {
+  private document = inject(DOCUMENT);
+  private nonce = inject(CSP_NONCE, { optional: true });
+  private _iframeElement: HTMLIFrameElement | undefined;
+  private _printStyle: string[] = [];
+  private _styleSheetFile = '';
+  protected printComplete = new Subject<void>();
+  //#region Getters and Setters
+  /**
+   * Sets the print styles based on the provided values.
+   *
+   * @param values - Either a key-value pairs object representing print styles, or a raw CSS string.
+   * @protected
+   */
+  protected setPrintStyle(values: PrintStyleInput) {
+    if (typeof values === 'string') {
+      this._printStyle = values ? [values] : [];
+      return;
+    }
+    this._printStyle = [];
+    for (const [selector, declarations] of Object.entries(values)) {
+      // Built declaration-by-declaration (rather than via JSON.stringify + a quote-stripping
+      // regex) so that quotes and commas that are part of a CSS value (e.g. quoted font names,
+      // comma-separated font-family fallback lists) survive instead of being stripped/mangled.
+      const body = Object.entries(declarations)
+        .map(([property, value]) => `${property}:${value}`)
+        .join(';');
+      this._printStyle.push(`${selector}{${body}}`);
+    }
+  }
+  /**
+   * @returns the string that create the stylesheet which will be injected
+   * later within <style></style> tag.
+   */
+  public returnStyleValues(): string {
+    const styleNonce = this.nonce ? ` nonce="${this.nonce}"` : '';
+    return `<style${styleNonce}> ${this._printStyle.join(' ')} </style>`;
+  }
+  /**
+   * @returns string which contains the link tags containing the css which will
+   * be injected later within <head></head> tag.
+   *
+   */
+  private returnStyleSheetLinkTags(): string {
+    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
+   */
+  // prettier-ignore
+  protected setStyleSheetFile(cssList: string): void {
+    if (!cssList) {
+      this._styleSheetFile = '';
+      return;
+    }
+    const files = cssList.split(',').map(f => f.trim());
+    const nonceAttr = this.nonce ? ` nonce="${this.nonce}"` : '';
+    this._styleSheetFile = files
+      .map(url => `<link${nonceAttr} rel="stylesheet" type="text/css" href="${url}">`)
+      .join('');
+  }
+  //#endregion
+  //#region Private methods used by PrintBase
+  private syncFormValues(source: HTMLElement, clone: HTMLElement): void {
+    // Select all form elements
+    const selector = 'input, select, textarea';
+    const sourceEls = source.querySelectorAll(selector);
+    const cloneEls = clone.querySelectorAll(selector);
+    for (let i = 0; i < sourceEls.length; i++) {
+      const srcNode = sourceEls[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      const cloneNode = cloneEls[i] as typeof srcNode;
+      if (srcNode instanceof HTMLInputElement) {
+        if (srcNode.type === 'checkbox' || srcNode.type === 'radio') {
+          if (srcNode.checked) cloneNode.setAttribute('checked', '');
+          else cloneNode.removeAttribute('checked'); // Remove if unchecked
+        } else if (srcNode.type === 'file') {
+          // File inputs can't be set programmatically for security
+          continue;
+        } else {
+          cloneNode.setAttribute('value', srcNode.value);
+        }
+      } else if (srcNode instanceof HTMLTextAreaElement) {
+        cloneNode.textContent = srcNode.value; // Use textContent, not innerHTML
+      } else if (srcNode instanceof HTMLSelectElement) {
+        Array.from((cloneNode as HTMLSelectElement).options).forEach((opt, idx) => {
+          if (idx === srcNode.selectedIndex) {
+            opt.setAttribute('selected', '');
+          } else {
+            opt.removeAttribute('selected'); // Remove from non-selected
+          }
+        });
+      }
+    }
+  }
+  /**
+   * Converts a canvas element to an image and returns its HTML string.
+   *
+   * @param {HTMLCanvasElement} canvasElm - The canvas element to convert.
+   * @returns {HTMLImageElement | null} - HTML Element of the image.
+   * @private
+   */
+  private canvasToImageHtml(canvasElm: HTMLCanvasElement): HTMLImageElement | null {
+    try {
+      const dataUrl = canvasElm.toDataURL(); // may throw if canvas is tainted
+      const img = this.document.createElement('img');
+      img.src = dataUrl;
+      img.style.maxWidth = '100%';
+      // Preserve displayed size (not just bitmap size)
+      const rect = canvasElm.getBoundingClientRect();
+      if (rect.width) img.style.width = `${rect.width}px`;
+      if (rect.height) img.style.height = `${rect.height}px`;
+      return img;
+    } catch (err) {
+      console.warn(`Canvas conversion failed for ${canvasElm}. Likely the canvas is tainted:`, err);
+      // If toDataURL() fails (e.g., tainted canvas), keep canvas as-is in print output
+      return null;
+    }
+  }
+  /**
+   * Includes canvas contents in the print section via img tags.
+   *
+   * @private
+   * @param source
+   * @param clone
+   */
+  private updateCanvasToImage(source: HTMLElement, clone: HTMLElement): void {
+    const sourceCanvases = source.querySelectorAll('canvas');
+    const cloneCanvases = clone.querySelectorAll('canvas');
+    for (let i = 0; i < sourceCanvases.length; i++) {
+      const srcCanvas = sourceCanvases[i];
+      const cloneCanvas = cloneCanvases[i];
+      const img = this.canvasToImageHtml(srcCanvas);
+      if (img) {
+        cloneCanvas.replaceWith(img);
+      }
+    }
+  }
+  /**
+   * 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 sourceElm = this.document.getElementById(printSectionId);
+    if (!sourceElm) return null;
+    const cloneElm = sourceElm.cloneNode(true) as HTMLElement; // cloneNode(true) deep clones subtree
+    this.syncFormValues(sourceElm, cloneElm);
+    this.updateCanvasToImage(sourceElm, cloneElm);
+    return cloneElm.outerHTML;
+  }
+  /**
+   * 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 = this.document.getElementsByTagName(tag);
+    for (const el of Array.from(elements)) {
+      html.push((el as Element).outerHTML);
+    }
+    return html.join('\r\n');
+  }
+  //#endregion
+  protected notifyPrintComplete() {
+    this.printComplete.next();
+  }
+  /**
+   * Prints the specified content using the provided print options.
+   *
+   * @public
+   * @param printOptionInput - Options for printing.
+   */
+  protected print(printOptionInput?: Partial<PrintOptions>): void {
+    const printOptions = new PrintOptions(printOptionInput);
+    if (printOptions.printMethod === 'iframe') {
+      this.printWithIframe(printOptions);
+    } else {
+      this.printWithWindow(printOptions);
+    }
+  }
+  protected printWithWindow(printOptions: PrintOptions) {
+    // 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.
+    const popOut = printOptions.printMethod === 'tab' ? '' : 'top=0,left=0,height=auto,width=auto';
+    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
+    this.buildPrintDocument(popupWin.document, printOptions);
+    popupWin.document.close();
+    // Listen for the window closing
+    const checkClosedInterval = setInterval(() => {
+      if (popupWin.closed) {
+        clearInterval(checkClosedInterval);
+        this.notifyPrintComplete();
+      }
+    }, 500);
+    popupWin.addEventListener('load', () => {
+      if (!printOptions.previewOnly) {
+        setTimeout(() => {
+          popupWin.print();
+          if (printOptions.closeWindow) popupWin.close();
+        }, printOptions.printDelay || 0);
+      }
+    });
+  }
+  private printWithIframe(printOptions: PrintOptions): void {
+    if (this._iframeElement) {
+      this._iframeElement.remove();
+    }
+    this._iframeElement = this.document.createElement('iframe');
+    const iframe = this._iframeElement;
+    iframe.id = 'print-iframe-' + new Date().getTime();
+    iframe.style.position = 'absolute';
+    iframe.style.left = '-9999px';
+    iframe.style.top = '-9999px';
+    iframe.style.width = '0px';
+    iframe.style.height = '0px';
+    iframe.ariaHidden = 'true';
+    this.document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+    if (!iframeDoc) {
+      console.error('Could not access iframe document.');
+      this.document.body.removeChild(iframe);
+      return;
+    }
+    iframeDoc.open();
+    const success = this.buildPrintDocument(iframeDoc, printOptions);
+    if (!success) {
+      iframeDoc.close();
+      this.document.body.removeChild(iframe);
+      return;
+    }
+    iframeDoc.close();
+    iframe.onload = () => {
+      const printWindow = iframe.contentWindow;
+      if (!printWindow) {
+        console.error('Could not access iframe window.');
+        this.document.body.removeChild(iframe);
+        return;
+      }
+      setTimeout(() => {
+        if (printOptions.previewOnly) {
+          return;
+        }
+        printWindow.focus();
+        printWindow.print();
+        const mediaQueryList = printWindow.matchMedia('print');
+        const listener = (mql: MediaQueryListEvent) => {
+          if (!mql.matches) {
+            this.notifyPrintComplete();
+            mediaQueryList.removeEventListener('change', listener);
+          }
+        };
+        mediaQueryList.addEventListener('change', listener);
+      }, printOptions.printDelay || 0);
+    };
+  }
+  private prepareDocumentComponents(printOptions: PrintOptions) {
+    let styles = '';
+    let links = '';
+    const baseTag = this.getElementTag('base');
+    if (printOptions.useExistingCss) {
+      styles = this.getElementTag('style');
+      links = this.getElementTag('link');
+    }
+    const printContents = this.getHtmlContents(printOptions.printSectionId);
+    return { styles, links, baseTag, printContents };
+  }
+  private buildPrintDocument(doc: Document, printOptions: PrintOptions): boolean {
+    const components = this.prepareDocumentComponents(printOptions);
+    if (!components.printContents) {
+      console.error(`Print section with id "${printOptions.printSectionId}" not found.`);
+      return false;
+    }
+    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 all head content
+    if (components.baseTag) {
+      head.innerHTML += components.baseTag;
+    }
+    head.innerHTML += this.returnStyleValues();
+    head.innerHTML += this.returnStyleSheetLinkTags();
+    head.innerHTML += components.styles;
+    head.innerHTML += components.links;
+    // Set body class and content
+    if (printOptions.bodyClass) body.className = printOptions.bodyClass;
+    body.innerHTML += components.printContents;
+    // Assemble document
+    html.appendChild(head);
+    html.appendChild(body);
+    doc.appendChild(html);
+    return true;
+  }
+}

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

@@ -0,0 +1,232 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Component, DebugElement, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgxPrintDirective } from './ngx-print.directive';
+import { PrintStyle, PrintStyleInput } from './ngx-print.base';
+@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>
+    <button [printStyle]="printStyle()" printSectionId="print-section" ngxPrint bodyClass="theme-dark">Print</button>
+  `,
+  imports: [NgxPrintDirective],
+})
+class TestNgxPrintComponent {
+  readonly printStyle = signal<PrintStyleInput>({});
+}
+describe('NgxPrintDirective', () => {
+  let buttonEl: DebugElement;
+  let component: TestNgxPrintComponent;
+  let fixture: ComponentFixture<TestNgxPrintComponent>;
+  // To change this later, so it'll depend on TestNgxPrintComponent
+  const styleSheet: PrintStyle = {
+    '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();
+    expect(component).toBeTruthy();
+  });
+  it('should test the @Input printStyle', () => {
+    const directive = buttonEl.injector.get(NgxPrintDirective);
+    // Create a spy on the instance's method
+    vi.spyOn(directive, 'returnStyleValues');
+    // 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', async () => {
+    vi.spyOn(window, 'open');
+    component.printStyle.set(styleSheet);
+    await fixture.whenStable();
+    const directive = buttonEl.injector.get(NgxPrintDirective);
+    buttonEl.triggerEventHandler('click', {});
+    // 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 preserve quotes and commas within style values', async () => {
+    vi.spyOn(window, 'open');
+    component.printStyle.set({
+      'li::before': { content: '"→"' },
+      'p': { 'font-family': '"Helvetica Neue", Arial, sans-serif', color: 'red' },
+    });
+    await fixture.whenStable();
+    const directive = buttonEl.injector.get(NgxPrintDirective);
+    buttonEl.triggerEventHandler('click', {});
+    expect(directive.returnStyleValues()).toEqual(
+      '<style> li::before{content:"→"} p{font-family:"Helvetica Neue", Arial, sans-serif;color:red} </style>',
+    );
+  });
+  it('should accept a raw CSS string for printStyle', async () => {
+    vi.spyOn(window, 'open');
+    component.printStyle.set('h1, h2 { color: red; }');
+    await fixture.whenStable();
+    const directive = buttonEl.injector.get(NgxPrintDirective);
+    buttonEl.triggerEventHandler('click', {});
+    expect(directive.returnStyleValues()).toEqual('<style> h1, h2 { color: red; } </style>');
+  });
+  it(`should popup a new window`, () => {
+    vi.spyOn(window, 'open');
+    // simulate click
+    buttonEl.triggerEventHandler('click', {});
+    expect(window.open).toHaveBeenCalled();
+  });
+  it('should apply class list to body element in new window', () => {
+    const body = {
+      className: '',
+      classList: { contains: (c: string) => body.className.split(' ').includes(c) },
+      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);
+    buttonEl.triggerEventHandler('click', {});
+    expect(mockDocument.body.classList.contains('theme-dark')).toBe(true);
+  });
+  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);
+    buttonEl.triggerEventHandler('click', {});
+    // 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 printComplete when printing finishes', () => {
+    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 => {
+      const directive = buttonEl.injector.get(NgxPrintDirective);
+      directive.printCompleted.subscribe(() => {
+        expect(true).toBe(true);
+        vi.useRealTimers();
+        resolve();
+      });
+      buttonEl.triggerEventHandler('click', null);
+      vi.advanceTimersByTime(600);
+    });
+  });
+});

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

@@ -0,0 +1,72 @@
+import { Directive, input, output } from '@angular/core';
+import { PrintBase, PrintStyleInput } from './ngx-print.base';
+import { PrintOptions } from './print-options';
+import { take } from 'rxjs';
+@Directive({
+  selector: '[ngxPrint]',
+  standalone: true,
+  host: {
+    '(click)': 'print()',
+  },
+})
+export class NgxPrintDirective extends PrintBase {
+  /**
+   * Prevents the print dialog from opening on the window
+   */
+  readonly previewOnly = input(false);
+  readonly printSectionId = input('');
+  readonly printTitle = input('');
+  readonly useExistingCss = input(false);
+  /**
+   * A delay in milliseconds to force the print dialog to wait before opened. Default: 0
+   */
+  readonly printDelay = input(0);
+  /**
+   * Whether to close the window after print() returns.
+   */
+  readonly closeWindow = input(true);
+  /**
+   * Class attribute to apply to the body element.
+   */
+  readonly bodyClass = input('');
+  /**
+   * Which PrintMethod (iframe/window/tab) to use.
+   */
+  readonly printMethod = input<PrintOptions['printMethod']>('window');
+  readonly printStyle = input<PrintStyleInput>({});
+  readonly styleSheetFile = input('');
+  readonly printCompleted = output<void>();
+  public override print(): void {
+    // Inputs carry side effects on PrintBase's internal style state, so they're applied
+    // synchronously here rather than via effect() (effects shouldn't propagate state).
+    super.setPrintStyle(this.printStyle());
+    super.setStyleSheetFile(this.styleSheetFile());
+    super.print({
+      printSectionId: this.printSectionId(),
+      printTitle: this.printTitle(),
+      useExistingCss: this.useExistingCss(),
+      bodyClass: this.bodyClass(),
+      printMethod: this.printMethod(),
+      previewOnly: this.previewOnly(),
+      closeWindow: this.closeWindow(),
+      printDelay: this.printDelay(),
+    });
+    this.printComplete.pipe(take(1)).subscribe(() => {
+      this.printCompleted.emit();
+    });
+  }
+}

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

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