@colijnit/sharedcomponents 259.1.7 → 259.1.8

package/bundles/colijnit-sharedcomponents.umd.js

@@ -3790,22 +3790,17 @@
           this.additionalFileChangeEvent = new i0.EventEmitter();
           this.signaturePads = {};
           this.signatureCanvases = {};
+          this.fileBody = '';
+          this.fileStyle = '';
           this.showLoader = false;
+          // set to true if you want to skip email for debug purposes
+          this.enableLocalPreview = false;
       }
       CustomPdfDialogComponent.prototype.showClass = function () {
           return true;
       };
       CustomPdfDialogComponent.prototype.ngOnInit = function () {
-          if (this.additionalFileContents) {
-              var head = document.getElementsByTagName('head')[0];
-              var styles = this.extractStyleParts(this.additionalFileContents);
-              this.fileStyle = styles[0];
-              var style = document.createElement('style');
-              style.appendChild(document.createTextNode(this.fileStyle));
-              head.appendChild(style);
-              var body = this.extractBodyContents(this.additionalFileContents);
-              this.fileBody = this._sanitizer.bypassSecurityTrustHtml(body[0]);
-          }
+          this._processAdditionalFileContents();
       };
       CustomPdfDialogComponent.prototype.ngAfterViewInit = function () {
           var _this = this;
@@ -3848,108 +3843,180 @@
               }
           });
       };
+      CustomPdfDialogComponent.prototype._processAdditionalFileContents = function () {
+          var _a;
+          if (!this.additionalFileContents)
+              return;
+          var styles = this.extractStyleParts(this.additionalFileContents);
+          this.fileStyle = styles.join('\n').trim();
+          if (this.fileStyle) {
+              var head = document.getElementsByTagName('head')[0];
+              var styleEl = document.createElement('style');
+              styleEl.appendChild(document.createTextNode(this.fileStyle));
+              head.appendChild(styleEl);
+          }
+          var bodyParts = this.extractBodyContents(this.additionalFileContents);
+          var bodyHtml = ((_a = bodyParts[0]) !== null && _a !== void 0 ? _a : this.removeStyleAndScriptTags(this.additionalFileContents)).trim();
+          this.fileBody = this._sanitizer.bypassSecurityTrustHtml(bodyHtml);
+      };
       CustomPdfDialogComponent.prototype.extractStyleParts = function (html) {
+          var _a;
           var stylePattern = /<style[^>]*>([\s\S]*?)<\/style>/gi;
           var matches = [];
           var match;
           while ((match = stylePattern.exec(html)) !== null) {
-              matches.push(match[1].trim());
+              matches.push(((_a = match[1]) !== null && _a !== void 0 ? _a : '').trim());
           }
           return matches;
       };
       CustomPdfDialogComponent.prototype.removeStyleAndScriptTags = function (html) {
           var styleTagPattern = /<style[^>]*>[\s\S]*?<\/style>/gi;
           var scriptTagPattern = /<script[^>]*>[\s\S]*?<\/script>/gi;
-          return html.replace(styleTagPattern, '').replace(scriptTagPattern, '');
+          return (html || '').replace(styleTagPattern, '').replace(scriptTagPattern, '');
       };
       CustomPdfDialogComponent.prototype.extractBodyContents = function (html) {
+          var _a;
           html = this.removeStyleAndScriptTags(html);
-          var stylePattern = /<body[^>]*>([\s\S]*?)<\/body>/gi;
+          var bodyPattern = /<body[^>]*>([\s\S]*?)<\/body>/gi;
           var matches = [];
           var match;
-          while ((match = stylePattern.exec(html)) !== null) {
-              matches.push(match[1].trim());
+          while ((match = bodyPattern.exec(html)) !== null) {
+              matches.push(((_a = match[1]) !== null && _a !== void 0 ? _a : '').trim());
           }
           return matches;
       };
+      CustomPdfDialogComponent.prototype._isLocalhost = function () {
+          return ['localhost', '127.0.0.1', '::1'].includes(location.hostname);
+      };
       CustomPdfDialogComponent.prototype.handleSaveClicked = function () {
+          var _a, _b;
           return __awaiter(this, void 0, void 0, function () {
-              var clearButton, doc, htmlDocument, documentSection, sectionsCount, _loop_1, i, tempFile, file, fileAsCoDocument;
-              return __generator(this, function (_a) {
-                  switch (_a.label) {
+              var clearButton, doc, createdTemp, root, html, parsed, allSections, leafSections, nodesToRender, pageWidth, pageHeight, _loop_1, i, blob, url, tempFile, file, fileAsCoDocument, e_1;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
                       case 0:
                           this.showLoader = true;
                           clearButton = document.getElementById('clearButton');
-                          clearButton.hidden = true;
-                          doc = new jspdf.jsPDF();
-                          htmlDocument = document.querySelector("#pdfBody");
-                          documentSection = htmlDocument.getElementsByTagName('section');
-                          sectionsCount = documentSection.length;
+                          if (clearButton)
+                              clearButton.hidden = true;
+                          doc = new jspdf.jsPDF({ unit: 'mm', format: 'a4' });
+                          createdTemp = false;
+                          root = ((_a = this.pdfBody) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
+                              document.querySelector('#pdfBody');
+                          if (!root) {
+                              root = document.createElement('div');
+                              root.id = 'pdfBody';
+                              root.style.position = 'fixed';
+                              root.style.left = '-99999px';
+                              root.style.top = '0';
+                              root.style.width = '794px';
+                              root.style.pointerEvents = 'none';
+                              document.body.appendChild(root);
+                              createdTemp = true;
+                          }
+                          if (this.additionalFileContents && !root.hasChildNodes()) {
+                              html = String(this.additionalFileContents);
+                              if (html.includes('<html')) {
+                                  parsed = new DOMParser().parseFromString(html, 'text/html');
+                                  root.innerHTML = ((_b = parsed.body) === null || _b === void 0 ? void 0 : _b.innerHTML) || html;
+                              }
+                              else {
+                                  root.innerHTML = html;
+                              }
+                          }
+                          allSections = Array.from(root.querySelectorAll('section'));
+                          leafSections = allSections.filter(function (s) { return !s.querySelector('section'); });
+                          nodesToRender = leafSections.length ? leafSections : (allSections.length ? allSections : [root]);
+                          pageWidth = doc.internal.pageSize.getWidth();
+                          pageHeight = doc.internal.pageSize.getHeight();
                           _loop_1 = function (i) {
-                              var html, dataUrl_1, img_1, error_1;
-                              return __generator(this, function (_b) {
-                                  switch (_b.label) {
+                              var el, dataUrl_1, err_1;
+                              return __generator(this, function (_d) {
+                                  switch (_d.label) {
                                       case 0:
-                                          html = documentSection[i];
-                                          _b.label = 1;
+                                          el = nodesToRender[i];
+                                          _d.label = 1;
                                       case 1:
-                                          _b.trys.push([1, 4, , 5]);
-                                          return [4 /*yield*/, htmlToImage.toJpeg(html, {
-                                                  quality: 1,
-                                                  backgroundColor: 'white'
-                                              })];
+                                          _d.trys.push([1, 4, , 5]);
+                                          return [4 /*yield*/, htmlToImage.toJpeg(el, { quality: 1, backgroundColor: 'white' })];
                                       case 2:
-                                          dataUrl_1 = _b.sent();
-                                          img_1 = new Image();
-                                          img_1.src = dataUrl_1;
+                                          dataUrl_1 = _d.sent();
                                           return [4 /*yield*/, new Promise(function (resolve) {
-                                                  img_1.onload = function () {
-                                                      var imgWidth = 218;
-                                                      var imgHeight = (img_1.height * imgWidth) / img_1.width;
-                                                      doc.addImage(dataUrl_1, 'JPG', -4, 0, imgWidth, imgHeight);
-                                                      if (i < sectionsCount - 1) {
+                                                  var img = new Image();
+                                                  img.onload = function () {
+                                                      var w = img.width;
+                                                      var h = img.height;
+                                                      var scale = Math.min(pageWidth / w, pageHeight / h);
+                                                      var renderW = w * scale;
+                                                      var renderH = h * scale;
+                                                      doc.addImage(dataUrl_1, 'JPG', 0, 0, renderW, renderH);
+                                                      if (i < nodesToRender.length - 1)
                                                           doc.addPage();
-                                                      }
                                                       resolve();
                                                   };
+                                                  img.src = dataUrl_1;
                                               })];
                                       case 3:
-                                          _b.sent();
+                                          _d.sent();
                                           return [3 /*break*/, 5];
                                       case 4:
-                                          error_1 = _b.sent();
-                                          console.error('Error generating image:', error_1);
+                                          err_1 = _d.sent();
+                                          console.error('Error generating image:', err_1);
                                           return [3 /*break*/, 5];
                                       case 5: return [2 /*return*/];
                                   }
                               });
                           };
                           i = 0;
-                          _a.label = 1;
+                          _c.label = 1;
                       case 1:
-                          if (!(i < sectionsCount)) return [3 /*break*/, 4];
+                          if (!(i < nodesToRender.length)) return [3 /*break*/, 4];
                           return [5 /*yield**/, _loop_1(i)];
                       case 2:
-                          _a.sent();
-                          _a.label = 3;
+                          _c.sent();
+                          _c.label = 3;
                       case 3:
                           i++;
                           return [3 /*break*/, 1];
                       case 4:
+                          if (createdTemp && root && root.parentNode) {
+                              root.parentNode.removeChild(root);
+                          }
+                          // enableLocalPreview can be enabled to see the output without sending email
+                          if (this.enableLocalPreview && this._isLocalhost()) {
+                              blob = doc.output('blob');
+                              url = URL.createObjectURL(blob);
+                              window.open(url, '_blank');
+                              this.showLoader = false;
+                              if (clearButton)
+                                  clearButton.hidden = false;
+                              return [2 /*return*/];
+                          }
+                          _c.label = 5;
+                      case 5:
+                          _c.trys.push([5, 7, 8, 9]);
                           tempFile = doc.output('datauristring');
                           file = this.dataURItoBlob(tempFile);
                           return [4 /*yield*/, fileUtils.FileUtils.ReadFileAsNewCoDocument(file)];
-                      case 5:
-                          fileAsCoDocument = _a.sent();
+                      case 6:
+                          fileAsCoDocument = _c.sent();
                           fileAsCoDocument.fileType = fileUtils.FileUtils.IsImageFile(file) ? fileType_enum.FileType.Image : fileType_enum.FileType.Document;
                           fileAsCoDocument.creationDate = new Date();
                           fileAsCoDocument.modifiedDate = new Date();
                           fileAsCoDocument.reports = 1;
                           this.additionalFileChangeEvent.emit(fileAsCoDocument);
+                          return [3 /*break*/, 9];
+                      case 7:
+                          e_1 = _c.sent();
+                          console.error('PDF packaging failed:', e_1);
+                          return [3 /*break*/, 9];
+                      case 8:
                           this.showLoader = false;
                           this.closePDFDialog.emit();
-                          clearButton.hidden = false;
-                          return [2 /*return*/];
+                          if (clearButton)
+                              clearButton.hidden = false;
+                          return [7 /*endfinally*/];
+                      case 9: return [2 /*return*/];
                   }
               });
           });
@@ -3981,7 +4048,7 @@
   CustomPdfDialogComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'co-custom-pdf-dialog',
-                  template: "\n    <co-dialog\n      [footerTemplate]=\"footerTemplate\"\n      id=\"custom-pdf-dialog\"\n      (closeClick)=\"closePDFDialog.emit()\">\n      <!-- create a nice container for loader so it is not random in the corner somewhere -->\n      <div *ngIf=\"showLoader\" class=\"loader-container\">\n        <co-loader *ngIf=\"showLoader\"></co-loader>\n      </div>\n      \n      <div #pdfBody id=\"pdfBody\">\n        <section [innerHTML]=\"fileBody\"></section>\n      </div>\n      <ng-template #footerTemplate>\n        <div class=\"co-dialog-footer-button-wrapper\">\n          <co-button class=\"save-button\"\n                     [iconData]=\"iconCacheService.getIcon(icons.CheckDuotone)\"\n                     (click)=\"handleSaveClicked()\"></co-button>\n          <co-button class=\"close-button\"\n                     [iconData]=\"iconCacheService.getIcon(icons.CrossSkinny)\"\n                     (click)=\"closePDFDialog.emit()\"></co-button>\n        </div>\n      </ng-template>\n    </co-dialog>\n  ",
+                  template: "\n    <co-dialog\n      [footerTemplate]=\"footerTemplate\"\n      id=\"custom-pdf-dialog\"\n      (closeClick)=\"closePDFDialog.emit()\">\n      <!-- create a nice container for loader so it is not random in the corner somewhere -->\n      <div *ngIf=\"showLoader\" class=\"loader-container\">\n        <co-loader *ngIf=\"showLoader\"></co-loader>\n      </div>\n\n      <div #pdfBody id=\"pdfBody\">\n        <section [innerHTML]=\"fileBody\"></section>\n      </div>\n      <ng-template #footerTemplate>\n        <div class=\"co-dialog-footer-button-wrapper\">\n          <co-button class=\"save-button\"\n                     [iconData]=\"iconCacheService.getIcon(icons.CheckDuotone)\"\n                     (click)=\"handleSaveClicked()\"></co-button>\n          <co-button class=\"close-button\"\n                     [iconData]=\"iconCacheService.getIcon(icons.CrossSkinny)\"\n                     (click)=\"closePDFDialog.emit()\"></co-button>\n        </div>\n      </ng-template>\n    </co-dialog>\n  ",
                   encapsulation: i0.ViewEncapsulation.None
               },] }
   ];