Added commits proceeding 6c2d06e

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 1.4.0 (2023-11-29)
+*  Now supports Angular 16
+
 # 1.3.0 (2022-12-20)
 ### New features
 *  Supports previewOnly tag, allowing for the print preview to show without the print dialog

README.md

@@ -8,6 +8,7 @@ This directive makes printing your HTML sections smooth and easy in your Angular
 | ------------ | ------------ |
 | 1.2.1        | 7.0.0 - 14.1.0   |
 | 1.3.x        | 15.0.0       |
+| 1.4.x        | 16.0.0       |
 ## Setup
 
  **1-** In your root application folder run:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-print",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Plug n' Play Angular (2++) directive to print your stuff",
   "author": "https://github.com/selemxmn/ngx-print/graphs/contributors",
   "repository": {
@@ -33,6 +33,9 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.10",
     "@angular/cli": "~16.2.10",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/common": "^16.2.12",
     "@angular/compiler-cli": "^16.2.12",
     "@angular/platform-browser": "16.2.12",
     "@angular/platform-browser-dynamic": "16.2.12",

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

@@ -1,8 +1,8 @@
-import {Component, DebugElement}    from "@angular/core";
-import {TestBed, ComponentFixture}  from '@angular/core/testing';
-import {By}                         from "@angular/platform-browser";
+import { Component, DebugElement } from "@angular/core";
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from "@angular/platform-browser";
 
-import { NgxPrintDirective }        from './ngx-print.directive';
+import { NgxPrintDirective } from './ngx-print.directive';
 
 @Component({
   template: `
@@ -42,22 +42,23 @@ class TestNgxPrintComponent {
 
 describe('NgxPrintDirective', () => {
 
-  let buttonEl:   DebugElement;
-  let component:  TestNgxPrintComponent;
-  let fixture:    ComponentFixture<TestNgxPrintComponent>;
+  let buttonEl: DebugElement;
+  let component: TestNgxPrintComponent;
+  let fixture: ComponentFixture<TestNgxPrintComponent>;
 
   // To change this later, so it'll depend on TestNgxPrintComponent
-  let styleSheet: {[key: string]: {[key: string]: string}}
-                   = {
-                     'h2' : {'border': 'solid 1px'},
-                     'h1' : {'color': 'red', 'border': '1px solid'}
-                    };
+  let 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({
-      declarations: [TestNgxPrintComponent, NgxPrintDirective]
+      declarations: [TestNgxPrintComponent],
+      imports: [NgxPrintDirective]
     });
 
     // Create a fixture object (that is going to allows us to create an instance of that component)
@@ -67,7 +68,7 @@ describe('NgxPrintDirective', () => {
     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));
+    buttonEl = fixture.debugElement.query(By.directive(NgxPrintDirective));
 
     fixture.detectChanges();
   });
@@ -77,39 +78,49 @@ describe('NgxPrintDirective', () => {
     expect(directive).toBeTruthy();
   });
 
-  // it('should test the @Input printStyle', () => {
-  //   const directive = new NgxPrintDirective();
-  //   directive.printStyle = styleSheet;
-  //   for (var key in directive.printStyle) {
-  //     if (directive.printStyle.hasOwnProperty(key)) {
-  //       directive._printStyle.push((key + JSON.stringify(directive.printStyle[key])).replace(/['"]+/g, ''));
-  //     }
-  //   }
-  //   directive.returnStyleValues();
-
-  //   expect(directive.returnStyleValues).toHaveBeenCalled();
-  // });
-
-  // it('should returns a string from array of objects', () => {
-  //   const directive = new NgxPrintDirective();
-  //   directive._printStyle = [
-  //     "h2{border:solid 1px}",
-  //     "h1{color:red,border:1px solid}"
-  //   ];
-  //   // let returnedString = directive.returnStyleValues();
-
-  //   // immediately invoked arrow function, else you can uncomment `returnedString` and use it instead
-  //   expect((() => {return directive.returnStyleValues()})()).toEqual('h2{border:solid 1px} h1{color:red,border:1px solid}');
-  // });
-
-  it(`should popup a new window`, ()=> {
+  it('should test the @Input printStyle', () => {
+    const directive = new NgxPrintDirective();
+
+    // Define styleSheet before using it
+
+    directive.printStyle = styleSheet;
+
+    // Iterate through printStyle and push values to _printStyle
+    for (const key in directive.printStyle) {
+      if (directive.printStyle.hasOwnProperty(key)) {
+        directive._printStyle.push((key + JSON.stringify(directive.printStyle[key])).replace(/['"]+/g, ''));
+      }
+    }
+
+    // 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 = new NgxPrintDirective();
+    directive._printStyle = [
+      "h2{border:solid 1px}",
+      "h1{color:red,border:1px solid}"
+    ];
+
+    expect((() => { return 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`, ()=> {
+  it(`should apply class list to body element in new window`, () => {
     const windowOpenSpy = spyOn(window, 'open').and.callThrough();
     // simulate click
     buttonEl.triggerEventHandler('click', {});

src/lib/ngx-print.directive.ts

@@ -63,24 +63,24 @@ export class NgxPrintDirective {
   set printStyle(values: { [key: string]: { [key: string]: string } }) {
     for (let key in values) {
       if (values.hasOwnProperty(key)) {
-      this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
+        this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
       }
     }
     this.returnStyleValues();
   }
 
-/**
- *
- *
- * @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
- *
- * @memberof NgxPrintDirective
- */
-public returnStyleValues() {
-  return `<style> ${this._printStyle.join(' ').replace(/,/g,';')} </style>`;
+  /**
+   *
+   *
+   * @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
+   *
+   * @memberof NgxPrintDirective
+   */
+  public returnStyleValues() {
+    return `<style> ${this._printStyle.join(' ').replace(/,/g, ';')} </style>`;
   }
 
   /**
@@ -98,7 +98,7 @@ public returnStyleValues() {
    */
   @Input()
   set styleSheetFile(cssList: string) {
-    let linkTagFn = function(cssFileName) {
+    let linkTagFn = function (cssFileName) {
       return `<link rel="stylesheet" type="text/css" href="${cssFileName}">`;
     }
     if (cssList.indexOf(',') !== -1) {
@@ -128,14 +128,14 @@ public returnStyleValues() {
     return html.join('\r\n');
   }
 
-    /**
-   *
-   * @description When printing, the default option of form elements are printed.
-   * Here we update what that default is to print the current values.
-   *
-   * @param elements the html element collection to save defaults to
-   *
-   */
+  /**
+ *
+ * @description When printing, the default option of form elements are printed.
+ * Here we update what that default is to print the current values.
+ *
+ * @param elements the html element collection to save defaults to
+ *
+ */
   private updateInputDefaults(elements: HTMLCollectionOf<HTMLInputElement>): void {
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
@@ -191,7 +191,7 @@ public returnStyleValues() {
     let printContents, popupWin, styles = '', links = '';
     const baseTag = this.getElementTag('base');
 
-    if(this.useExistingCss) {
+    if (this.useExistingCss) {
       styles = this.getElementTag('style');
       links = this.getElementTag('link');
     }
@@ -225,6 +225,6 @@ public returnStyleValues() {
           </script>
         </body>
       </html>`);
-      popupWin.document.close();
+    popupWin.document.close();
   }
 }

yarn.lock

@@ -145,7 +145,7 @@
     symbol-observable "4.0.0"
     yargs "17.7.2"
 
-"@angular/common@16.2.12":
+"@angular/common@^16.2.12", "@angular/common@16.2.12":
   version "16.2.12"
   resolved "https://registry.npmjs.org/@angular/common/-/common-16.2.12.tgz"
   integrity sha512-B+WY/cT2VgEaz9HfJitBmgdk4I333XG/ybC98CMC4Wz8E49T8yzivmmxXB3OD6qvjcOB6ftuicl6WBqLbZNg2w==
@@ -166,14 +166,14 @@
     tslib "^2.3.0"
     yargs "^17.2.1"
 
-"@angular/compiler@16.2.12":
+"@angular/compiler@^16.2.12", "@angular/compiler@16.2.12":
   version "16.2.12"
   resolved "https://registry.npmjs.org/@angular/compiler/-/compiler-16.2.12.tgz"
   integrity sha512-6SMXUgSVekGM7R6l1Z9rCtUGtlg58GFmgbpMCsGf+VXxP468Njw8rjT2YZkf5aEPxEuRpSHhDYjqz7n14cwCXQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/core@16.2.12":
+"@angular/core@^16.2.12", "@angular/core@16.2.12":
   version "16.2.12"
   resolved "https://registry.npmjs.org/@angular/core/-/core-16.2.12.tgz"
   integrity sha512-GLLlDeke/NjroaLYOks0uyzFVo6HyLl7VOm0K1QpLXnYvW63W9Ql/T3yguRZa7tRkOAeFZ3jw+1wnBD4O8MoUA==