@webilix/ngx-helper-m3 0.0.33 → 0.0.34

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.
@@ -31,7 +31,9 @@ import { trigger, transition, style, animate } from '@angular/animations';
31
31
  import * as i1$5 from '@angular/common/http';
32
32
  import { HttpHeaders, HttpEventType } from '@angular/common/http';
33
33
  import * as i1$4 from '@angular/platform-browser';
34
- import * as i1$6 from '@angular/cdk/drag-drop';
34
+ import * as i1$6 from 'ng2-pdf-viewer';
35
+ import { PdfViewerModule } from 'ng2-pdf-viewer';
36
+ import * as i1$7 from '@angular/cdk/drag-drop';
35
37
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
36
38
 
37
39
  const NGX_HELPER_CONFIG = new InjectionToken('NGX-HELPER-CONFIG');
@@ -1863,6 +1865,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
1863
1865
  args: ['style.bottom']
1864
1866
  }] } });
1865
1867
 
1868
+ class PdfComponent {
1869
+ className = 'ngx-helper-m3-pdf';
1870
+ uint8Array;
1871
+ close;
1872
+ checkEscape(event) {
1873
+ if (!(event instanceof KeyboardEvent))
1874
+ return;
1875
+ if (event.code === 'Escape') {
1876
+ event.preventDefault();
1877
+ this.close();
1878
+ }
1879
+ }
1880
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1881
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: PdfComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "pdf" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"background\"></div>\n<button class=\"close\" mat-icon-button (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n<pdf-viewer [src]=\"uint8Array\" [render-text]=\"true\" [original-size]=\"false\" [external-link-target]=\"'blank'\"></pdf-viewer>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: PdfViewerModule }, { kind: "component", type: i1$6.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }] });
1882
+ }
1883
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfComponent, decorators: [{
1884
+ type: Component,
1885
+ args: [{ host: { selector: 'pdf', '(window:keydown)': 'checkEscape($event)' }, imports: [MatIcon, MatIconButton, PdfViewerModule], template: "<div class=\"background\"></div>\n<button class=\"close\" mat-icon-button (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n<pdf-viewer [src]=\"uint8Array\" [render-text]=\"true\" [original-size]=\"false\" [external-link-target]=\"'blank'\"></pdf-viewer>\n" }]
1886
+ }], propDecorators: { className: [{
1887
+ type: HostBinding,
1888
+ args: ['className']
1889
+ }] } });
1890
+
1866
1891
  class UploadComponent {
1867
1892
  httpClient;
1868
1893
  host = true;
@@ -2052,17 +2077,45 @@ class NgxHelperHttpService {
2052
2077
  this.components.push({ id, componentRef });
2053
2078
  this.updatePositions();
2054
2079
  }
2055
- printPDF(data, config) {
2056
- const getPDF = () => {
2057
- return new Promise((resolve, reject) => {
2058
- if (typeof data !== 'string') {
2059
- resolve(new Blob([data], { type: 'application/pdf' }));
2060
- return;
2061
- }
2062
- this.getBuffer(data, 'دریافت فایل', config || {}).then((arrayBuffer) => resolve(new Blob([arrayBuffer], { type: 'application/pdf' })), () => reject());
2080
+ //#region PDF
2081
+ getPDF = (data, config) => {
2082
+ return new Promise((resolve, reject) => {
2083
+ if (typeof data !== 'string') {
2084
+ resolve(new Blob([data], { type: 'application/pdf' }));
2085
+ return;
2086
+ }
2087
+ this.getBuffer(data, 'دریافت فایل', config || {}).then((arrayBuffer) => resolve(new Blob([arrayBuffer], { type: 'application/pdf' })), () => reject());
2088
+ });
2089
+ };
2090
+ showPDF(data, config) {
2091
+ this.getPDF(data, config).then(async (blob) => {
2092
+ let uint8Array;
2093
+ try {
2094
+ uint8Array = new Uint8Array(await blob.arrayBuffer());
2095
+ }
2096
+ catch (error) {
2097
+ this.ngxHelperToastService.error('امکان نمایش فایل وجود ندارد.');
2098
+ return;
2099
+ }
2100
+ const componentRef = createComponent(PdfComponent, {
2101
+ environmentInjector: this.applicationRef.injector,
2102
+ elementInjector: this.injector,
2063
2103
  });
2064
- };
2065
- getPDF().then((blob) => {
2104
+ componentRef.instance.uint8Array = uint8Array;
2105
+ componentRef.instance.close = () => {
2106
+ this.applicationRef.detachView(componentRef.hostView);
2107
+ document.body.removeChild(htmlElement);
2108
+ componentRef.destroy();
2109
+ document.body.style.overflow = 'visible';
2110
+ };
2111
+ const htmlElement = componentRef.hostView.rootNodes[0];
2112
+ this.applicationRef.attachView(componentRef.hostView);
2113
+ document.body.appendChild(htmlElement);
2114
+ document.body.style.overflow = 'hidden';
2115
+ });
2116
+ }
2117
+ printPDF(data, config) {
2118
+ this.getPDF(data, config).then((blob) => {
2066
2119
  try {
2067
2120
  const prevIframe = document.getElementById('ngx-helper-http-pdf-download-iframe');
2068
2121
  if (prevIframe)
@@ -2337,7 +2390,7 @@ class GetComponent {
2337
2390
  }
2338
2391
  }
2339
2392
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2340
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "get" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div\n id=\"ngx-helper-m3-route-map\"\n class=\"map\"\n (dblclick)=\"setCoordinates($event)\"\n (contextmenu)=\"setCoordinates($event)\"\n></div>\n\n<div class=\"route\">\n <div class=\"header\">\n <div class=\"title\">ROUTE</div>\n <mat-icon (click)=\"close()\">close</mat-icon>\n </div>\n\n <div class=\"coordinates\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (item of route; track $index) {\n <div class=\"coordinate ngx-helper-m3-route-coordinate\" cdkDrag cdkDragLockAxis=\"y\" cdkDragBoundary=\".coordinates\">\n <!-- DRAG -->\n @if (route.length > 1) { <mat-icon cdkDragHandle>drag_indicator</mat-icon> }\n <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n <div class=\"value\" (click)=\"animate($index)\">{{ item.latitude.toFixed(5) }}</div>\n <div class=\"value\" (click)=\"animate($index)\">{{ item.longitude.toFixed(5) }}</div>\n <mat-icon class=\"delete\" (click)=\"delete($index)\">delete</mat-icon>\n </div>\n }\n </div>\n\n <div class=\"footer\">\n <div class=\"distance\">{{ distance.length | number }} M</div>\n <mat-icon [class.disabled]=\"route.length < 2\" (click)=\"selectRoute()\">done_all</mat-icon>\n </div>\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.coordinates.cdk-drop-list-dragging .coordinates:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
2393
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "get" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div\n id=\"ngx-helper-m3-route-map\"\n class=\"map\"\n (dblclick)=\"setCoordinates($event)\"\n (contextmenu)=\"setCoordinates($event)\"\n></div>\n\n<div class=\"route\">\n <div class=\"header\">\n <div class=\"title\">ROUTE</div>\n <mat-icon (click)=\"close()\">close</mat-icon>\n </div>\n\n <div class=\"coordinates\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (item of route; track $index) {\n <div class=\"coordinate ngx-helper-m3-route-coordinate\" cdkDrag cdkDragLockAxis=\"y\" cdkDragBoundary=\".coordinates\">\n <!-- DRAG -->\n @if (route.length > 1) { <mat-icon cdkDragHandle>drag_indicator</mat-icon> }\n <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n <div class=\"value\" (click)=\"animate($index)\">{{ item.latitude.toFixed(5) }}</div>\n <div class=\"value\" (click)=\"animate($index)\">{{ item.longitude.toFixed(5) }}</div>\n <mat-icon class=\"delete\" (click)=\"delete($index)\">delete</mat-icon>\n </div>\n }\n </div>\n\n <div class=\"footer\">\n <div class=\"distance\">{{ distance.length | number }} M</div>\n <mat-icon [class.disabled]=\"route.length < 2\" (click)=\"selectRoute()\">done_all</mat-icon>\n </div>\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.coordinates.cdk-drop-list-dragging .coordinates:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
2341
2394
  }
2342
2395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GetComponent, decorators: [{
2343
2396
  type: Component,