@sd-angular/core 0.0.864 → 0.0.865
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.
- package/bundles/sd-angular-core-image-preview.umd.js +121 -0
- package/bundles/sd-angular-core-image-preview.umd.js.map +1 -0
- package/bundles/sd-angular-core-image-preview.umd.min.js +2 -0
- package/bundles/sd-angular-core-image-preview.umd.min.js.map +1 -0
- package/bundles/sd-angular-core-upload-file.umd.js +8 -7
- package/bundles/sd-angular-core-upload-file.umd.js.map +1 -1
- package/bundles/sd-angular-core-upload-file.umd.min.js +2 -2
- package/bundles/sd-angular-core-upload-file.umd.min.js.map +1 -1
- package/bundles/sd-angular-core.umd.js +4 -4
- package/bundles/sd-angular-core.umd.js.map +1 -1
- package/bundles/sd-angular-core.umd.min.js +1 -1
- package/bundles/sd-angular-core.umd.min.js.map +1 -1
- package/esm2015/image-preview/index.js +2 -0
- package/esm2015/image-preview/sd-angular-core-image-preview.js +7 -0
- package/esm2015/image-preview/src/lib/directives/image-preview.directive.js +41 -0
- package/esm2015/image-preview/src/lib/image-preview/image-preview.component.js +41 -0
- package/esm2015/image-preview/src/lib/image-preview/image-preview.module.js +21 -0
- package/esm2015/image-preview/src/public-api.js +5 -0
- package/esm2015/public-api.js +2 -1
- package/esm2015/upload-file/src/lib/upload-file.component.js +3 -3
- package/esm2015/upload-file/src/lib/upload-file.module.js +4 -2
- package/fesm2015/sd-angular-core-image-preview.js +107 -0
- package/fesm2015/sd-angular-core-image-preview.js.map +1 -0
- package/fesm2015/sd-angular-core-upload-file.js +5 -3
- package/fesm2015/sd-angular-core-upload-file.js.map +1 -1
- package/fesm2015/sd-angular-core.js +1 -0
- package/fesm2015/sd-angular-core.js.map +1 -1
- package/image-preview/index.d.ts +1 -0
- package/image-preview/package.json +12 -0
- package/image-preview/sd-angular-core-image-preview.d.ts +6 -0
- package/image-preview/sd-angular-core-image-preview.metadata.json +1 -0
- package/image-preview/src/lib/directives/image-preview.directive.d.ts +17 -0
- package/image-preview/src/lib/image-preview/image-preview.component.d.ts +22 -0
- package/image-preview/src/lib/image-preview/image-preview.module.d.ts +2 -0
- package/image-preview/src/public-api.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/{sd-angular-core-0.0.864.tgz → sd-angular-core-0.0.865.tgz} +0 -0
- package/upload-file/sd-angular-core-upload-file.metadata.json +1 -1
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/dialog'), require('@angular/material/icon')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@sd-angular/core/image-preview', ['exports', '@angular/core', '@angular/common', '@angular/material/dialog', '@angular/material/icon'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core['image-preview'] = {}), global.ng.core, global.ng.common, global.ng.material.dialog, global.ng.material.icon));
|
|
5
|
+
}(this, (function (exports, core, common, dialog, icon) { 'use strict';
|
|
6
|
+
|
|
7
|
+
var ImagePreviewComponent = /** @class */ (function () {
|
|
8
|
+
function ImagePreviewComponent(dialogRef, data) {
|
|
9
|
+
this.dialogRef = dialogRef;
|
|
10
|
+
this.data = data;
|
|
11
|
+
}
|
|
12
|
+
ImagePreviewComponent.prototype.ngOnInit = function () {
|
|
13
|
+
this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;
|
|
14
|
+
};
|
|
15
|
+
ImagePreviewComponent.prototype.next = function () {
|
|
16
|
+
var _this = this;
|
|
17
|
+
var currentIdx = this.data.images.findIndex(function (image) { return (image.previewSrc || image.src) === _this.currentImageUrl; });
|
|
18
|
+
if (currentIdx === this.data.images.length - 1) {
|
|
19
|
+
this.currentImageUrl = this.data.images[0].previewSrc || this.data.images[0].src;
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
this.currentImageUrl = this.data.images[currentIdx + 1].previewSrc || this.data.images[currentIdx + 1].src;
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
ImagePreviewComponent.prototype.prev = function () {
|
|
26
|
+
var _this = this;
|
|
27
|
+
var currentIdx = this.data.images.findIndex(function (image) { return (image.previewSrc || image.src) === _this.currentImageUrl; });
|
|
28
|
+
if (currentIdx === 0) {
|
|
29
|
+
this.currentImageUrl = this.data.images[this.data.images.length - 1].previewSrc || this.data.images[this.data.images.length - 1].src;
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
this.currentImageUrl = this.data.images[currentIdx - 1].previewSrc || this.data.images[currentIdx - 1].src;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
return ImagePreviewComponent;
|
|
36
|
+
}());
|
|
37
|
+
ImagePreviewComponent.decorators = [
|
|
38
|
+
{ type: core.Component, args: [{
|
|
39
|
+
selector: 'app-image-preview',
|
|
40
|
+
template: "<h1 mat-dialog-title class=\"d-flex\">\r\n <mat-icon\r\n mat-dialog-close\r\n role=\"img\"\r\n class=\"mat-icon notranslate material-icons mat-icon-no-color ml-auto\"\r\n >close</mat-icon\r\n >\r\n</h1>\r\n<div mat-dialog-content class=\"h-100 position-relative\">\r\n <ng-container *ngIf=\"data?.images?.length\">\r\n <span class=\"material-icons-outlined position-absolute prev\" (click)=\"prev()\">\r\n arrow_back_ios\r\n </span>\r\n <span class=\"material-icons-outlined position-absolute next\" (click)=\"next()\">\r\n arrow_forward_ios\r\n </span>\r\n </ng-container>\r\n <img\r\n [src]=\"currentImageUrl\"\r\n class=\"image-preview_image\"\r\n />\r\n</div>\r\n",
|
|
41
|
+
styles: [".image-prevew-panel .mat-dialog-container{padding:0}:host{display:flex;flex-direction:column;height:100%}.image-preview_image{-o-object-fit:contain;display:block;height:100%;margin:0 auto;object-fit:contain;width:90%}.material-icons-outlined{cursor:pointer}.material-icons-outlined.prev{left:5px;top:50%;transform:translateY(-50%)}.material-icons-outlined.next{right:5px;top:50%;transform:translateY(-50%)}"]
|
|
42
|
+
},] }
|
|
43
|
+
];
|
|
44
|
+
ImagePreviewComponent.ctorParameters = function () { return [
|
|
45
|
+
{ type: dialog.MatDialogRef },
|
|
46
|
+
{ type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
|
|
47
|
+
]; };
|
|
48
|
+
|
|
49
|
+
var ImagePreviewDirective = /** @class */ (function () {
|
|
50
|
+
function ImagePreviewDirective(el, dialog) {
|
|
51
|
+
this.el = el;
|
|
52
|
+
this.dialog = dialog;
|
|
53
|
+
this.images = [];
|
|
54
|
+
}
|
|
55
|
+
ImagePreviewDirective.prototype.onClick = function () {
|
|
56
|
+
var currentImage;
|
|
57
|
+
currentImage = this.el.nativeElement.src;
|
|
58
|
+
if (this.images.length && this.sdPreviewCurrentIdx >= 0) {
|
|
59
|
+
currentImage = this.images[this.sdPreviewCurrentIdx];
|
|
60
|
+
}
|
|
61
|
+
this.dialog.open(ImagePreviewComponent, {
|
|
62
|
+
data: { currentImage: currentImage, images: this.images },
|
|
63
|
+
backdropClass: ["image-prevew-backdrop"],
|
|
64
|
+
panelClass: "image-prevew-panel",
|
|
65
|
+
width: "600px",
|
|
66
|
+
maxWidth: "90%",
|
|
67
|
+
height: "600px",
|
|
68
|
+
maxHeight: "90%",
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
return ImagePreviewDirective;
|
|
72
|
+
}());
|
|
73
|
+
ImagePreviewDirective.decorators = [
|
|
74
|
+
{ type: core.Directive, args: [{
|
|
75
|
+
selector: "[sdImagePreview]",
|
|
76
|
+
},] }
|
|
77
|
+
];
|
|
78
|
+
ImagePreviewDirective.ctorParameters = function () { return [
|
|
79
|
+
{ type: core.ElementRef },
|
|
80
|
+
{ type: dialog.MatDialog }
|
|
81
|
+
]; };
|
|
82
|
+
ImagePreviewDirective.propDecorators = {
|
|
83
|
+
images: [{ type: core.Input, args: ["sdImagePreview",] }],
|
|
84
|
+
sdPreviewCurrentIdx: [{ type: core.Input }],
|
|
85
|
+
onClick: [{ type: core.HostListener, args: ["click",] }]
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
var SdImagePreviewModule = /** @class */ (function () {
|
|
89
|
+
function SdImagePreviewModule() {
|
|
90
|
+
}
|
|
91
|
+
return SdImagePreviewModule;
|
|
92
|
+
}());
|
|
93
|
+
SdImagePreviewModule.decorators = [
|
|
94
|
+
{ type: core.NgModule, args: [{
|
|
95
|
+
declarations: [ImagePreviewComponent, ImagePreviewDirective],
|
|
96
|
+
exports: [ImagePreviewDirective],
|
|
97
|
+
imports: [
|
|
98
|
+
common.CommonModule,
|
|
99
|
+
dialog.MatDialogModule,
|
|
100
|
+
icon.MatIconModule
|
|
101
|
+
],
|
|
102
|
+
entryComponents: [ImagePreviewComponent]
|
|
103
|
+
},] }
|
|
104
|
+
];
|
|
105
|
+
|
|
106
|
+
/*
|
|
107
|
+
* Public API Surface of superdev-angular-core
|
|
108
|
+
*/
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Generated bundle index. Do not edit.
|
|
112
|
+
*/
|
|
113
|
+
|
|
114
|
+
exports.SdImagePreviewModule = SdImagePreviewModule;
|
|
115
|
+
exports.ɵa = ImagePreviewComponent;
|
|
116
|
+
exports.ɵb = ImagePreviewDirective;
|
|
117
|
+
|
|
118
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
119
|
+
|
|
120
|
+
})));
|
|
121
|
+
//# sourceMappingURL=sd-angular-core-image-preview.umd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sd-angular-core-image-preview.umd.js","sources":["../../../../projects/sd-core/image-preview/src/lib/image-preview/image-preview.component.ts","../../../../projects/sd-core/image-preview/src/lib/directives/image-preview.directive.ts","../../../../projects/sd-core/image-preview/src/lib/image-preview/image-preview.module.ts","../../../../projects/sd-core/image-preview/src/public-api.ts","../../../../projects/sd-core/image-preview/sd-angular-core-image-preview.ts"],"sourcesContent":["import { Component, Inject, OnInit } from '@angular/core';\r\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\r\n\r\nexport interface Data {\r\n currentImage: ImagePreview | string;\r\n images: Array<ImagePreview | string>\r\n}\r\n\r\nexport interface ImagePreview {\r\n extension: string;\r\n file: File;\r\n fileName: string;\r\n previewSrc?: string;\r\n src?: string;\r\n}\r\n\r\n@Component({\r\n selector: 'app-image-preview',\r\n templateUrl: './image-preview.component.html',\r\n styleUrls: ['./image-preview.component.scss']\r\n})\r\nexport class ImagePreviewComponent implements OnInit {\r\n currentImageUrl: string;\r\n\r\n constructor(\r\n public dialogRef: MatDialogRef<ImagePreviewComponent>,\r\n @Inject(MAT_DIALOG_DATA) public data: Data\r\n ) { }\r\n\r\n ngOnInit(): void {\r\n this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;\r\n }\r\n\r\n next(): void {\r\n const currentIdx = this.data.images.findIndex((image: ImagePreview )=> (image.previewSrc || image.src) === this.currentImageUrl);\r\n if(currentIdx === this.data.images.length - 1) {\r\n this.currentImageUrl = (this.data.images[0] as ImagePreview).previewSrc || (this.data.images[0] as ImagePreview).src\r\n } else {\r\n this.currentImageUrl = (this.data.images[currentIdx + 1] as ImagePreview).previewSrc || (this.data.images[currentIdx + 1] as ImagePreview).src;\r\n }\r\n }\r\n\r\n prev(): void {\r\n const currentIdx = this.data.images.findIndex((image: ImagePreview )=> (image.previewSrc || image.src) === this.currentImageUrl);\r\n if(currentIdx === 0) {\r\n this.currentImageUrl = (this.data.images[this.data.images.length - 1] as ImagePreview).previewSrc || (this.data.images[this.data.images.length - 1] as ImagePreview).src\r\n } else {\r\n this.currentImageUrl = (this.data.images[currentIdx - 1] as ImagePreview).previewSrc || (this.data.images[currentIdx - 1] as ImagePreview).src;\r\n }\r\n }\r\n\r\n}\r\n","import { Directive, ElementRef, HostListener, Input } from \"@angular/core\";\r\nimport { MatDialog } from \"@angular/material/dialog\";\r\nimport { ImagePreviewComponent } from \"../image-preview/image-preview.component\";\r\n\r\nexport interface ImagePreview {\r\n extension: string;\r\n file: File;\r\n fileName: string;\r\n previewSrc?: string;\r\n src?: string;\r\n}\r\n\r\n@Directive({\r\n selector: \"[sdImagePreview]\",\r\n})\r\nexport class ImagePreviewDirective {\r\n @Input(\"sdImagePreview\") images: Array<ImagePreview | string> = [];\r\n @Input() sdPreviewCurrentIdx: number;\r\n\r\n constructor(private el: ElementRef, public dialog: MatDialog) {}\r\n\r\n @HostListener(\"click\") onClick() {\r\n let currentImage: string | ImagePreview;\r\n currentImage = this.el.nativeElement.src;\r\n if (this.images.length && this.sdPreviewCurrentIdx >= 0) {\r\n currentImage = this.images[this.sdPreviewCurrentIdx];\r\n }\r\n this.dialog.open(ImagePreviewComponent, {\r\n data: { currentImage, images: this.images },\r\n backdropClass: [\"image-prevew-backdrop\"],\r\n panelClass: \"image-prevew-panel\",\r\n width: \"600px\",\r\n maxWidth: \"90%\",\r\n height: \"600px\",\r\n maxHeight: \"90%\",\r\n });\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ImagePreviewComponent } from './image-preview.component';\r\nimport { ImagePreviewDirective } from '../directives/image-preview.directive';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\n\r\n@NgModule({\r\n declarations: [ImagePreviewComponent, ImagePreviewDirective],\r\n exports: [ImagePreviewDirective],\r\n imports: [\r\n CommonModule,\r\n MatDialogModule,\r\n MatIconModule\r\n ],\r\n entryComponents: [ImagePreviewComponent]\r\n})\r\nexport class SdImagePreviewModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/image-preview/image-preview.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ImagePreviewDirective as ɵb} from './src/lib/directives/image-preview.directive';\nexport {ImagePreviewComponent as ɵa} from './src/lib/image-preview/image-preview.component';"],"names":["Component","MatDialogRef","Inject","MAT_DIALOG_DATA","Directive","ElementRef","MatDialog","Input","HostListener","NgModule","CommonModule","MatDialogModule","MatIconModule"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/dialog"),require("@angular/material/icon")):"function"==typeof define&&define.amd?define("@sd-angular/core/image-preview",["exports","@angular/core","@angular/common","@angular/material/dialog","@angular/material/icon"],a):a(((e="undefined"!=typeof globalThis?globalThis:e||self)["sd-angular"]=e["sd-angular"]||{},e["sd-angular"].core=e["sd-angular"].core||{},e["sd-angular"].core["image-preview"]={}),e.ng.core,e.ng.common,e.ng.material.dialog,e.ng.material.icon)}(this,(function(e,a,t,r,i){"use strict";var n=function(){function e(e,a){this.dialogRef=e,this.data=a}return e.prototype.ngOnInit=function(){this.currentImageUrl="string"==typeof this.data.currentImage?this.data.currentImage:this.data.currentImage.previewSrc||this.data.currentImage.src},e.prototype.next=function(){var e=this,a=this.data.images.findIndex((function(a){return(a.previewSrc||a.src)===e.currentImageUrl}));a===this.data.images.length-1?this.currentImageUrl=this.data.images[0].previewSrc||this.data.images[0].src:this.currentImageUrl=this.data.images[a+1].previewSrc||this.data.images[a+1].src},e.prototype.prev=function(){var e=this,a=this.data.images.findIndex((function(a){return(a.previewSrc||a.src)===e.currentImageUrl}));this.currentImageUrl=0===a?this.data.images[this.data.images.length-1].previewSrc||this.data.images[this.data.images.length-1].src:this.data.images[a-1].previewSrc||this.data.images[a-1].src},e}();n.decorators=[{type:a.Component,args:[{selector:"app-image-preview",template:'<h1 mat-dialog-title class="d-flex">\r\n <mat-icon\r\n mat-dialog-close\r\n role="img"\r\n class="mat-icon notranslate material-icons mat-icon-no-color ml-auto"\r\n >close</mat-icon\r\n >\r\n</h1>\r\n<div mat-dialog-content class="h-100 position-relative">\r\n <ng-container *ngIf="data?.images?.length">\r\n <span class="material-icons-outlined position-absolute prev" (click)="prev()">\r\n arrow_back_ios\r\n </span>\r\n <span class="material-icons-outlined position-absolute next" (click)="next()">\r\n arrow_forward_ios\r\n </span>\r\n </ng-container>\r\n <img\r\n [src]="currentImageUrl"\r\n class="image-preview_image"\r\n />\r\n</div>\r\n',styles:[".image-prevew-panel .mat-dialog-container{padding:0}:host{display:flex;flex-direction:column;height:100%}.image-preview_image{-o-object-fit:contain;display:block;height:100%;margin:0 auto;object-fit:contain;width:90%}.material-icons-outlined{cursor:pointer}.material-icons-outlined.prev{left:5px;top:50%;transform:translateY(-50%)}.material-icons-outlined.next{right:5px;top:50%;transform:translateY(-50%)}"]}]}],n.ctorParameters=function(){return[{type:r.MatDialogRef},{type:void 0,decorators:[{type:a.Inject,args:[r.MAT_DIALOG_DATA]}]}]};var o=function(){function e(e,a){this.el=e,this.dialog=a,this.images=[]}return e.prototype.onClick=function(){var e;e=this.el.nativeElement.src,this.images.length&&this.sdPreviewCurrentIdx>=0&&(e=this.images[this.sdPreviewCurrentIdx]),this.dialog.open(n,{data:{currentImage:e,images:this.images},backdropClass:["image-prevew-backdrop"],panelClass:"image-prevew-panel",width:"600px",maxWidth:"90%",height:"600px",maxHeight:"90%"})},e}();o.decorators=[{type:a.Directive,args:[{selector:"[sdImagePreview]"}]}],o.ctorParameters=function(){return[{type:a.ElementRef},{type:r.MatDialog}]},o.propDecorators={images:[{type:a.Input,args:["sdImagePreview"]}],sdPreviewCurrentIdx:[{type:a.Input}],onClick:[{type:a.HostListener,args:["click"]}]};var s=function(){};s.decorators=[{type:a.NgModule,args:[{declarations:[n,o],exports:[o],imports:[t.CommonModule,r.MatDialogModule,i.MatIconModule],entryComponents:[n]}]}],e.SdImagePreviewModule=s,e.ɵa=n,e.ɵb=o,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
2
|
+
//# sourceMappingURL=sd-angular-core-image-preview.umd.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../projects/sd-core/image-preview/src/lib/image-preview/image-preview.component.ts","../../../../projects/sd-core/image-preview/src/lib/directives/image-preview.directive.ts","../../../../projects/sd-core/image-preview/src/lib/image-preview/image-preview.module.ts"],"names":["ImagePreviewComponent","dialogRef","data","this","prototype","ngOnInit","currentImageUrl","currentImage","previewSrc","src","next","_this","currentIdx","images","findIndex","image","length","prev","Component","args","selector","template","MatDialogRef","Inject","MAT_DIALOG_DATA","ImagePreviewDirective","el","dialog","onClick","nativeElement","sdPreviewCurrentIdx","open","backdropClass","panelClass","width","maxWidth","height","maxHeight","Directive","ElementRef","MatDialog","Input","HostListener","NgModule","declarations","exports","imports","CommonModule","MatDialogModule","MatIconModule","entryComponents"],"mappings":"uqBAwBE,SAAAA,EACSC,EACyBC,GADzBC,KAAAF,UAAAA,EACyBE,KAAAD,KAAAA,SAGlCF,EAAAI,UAAAC,SAAA,WACEF,KAAKG,gBAAoD,iBAA3BH,KAAKD,KAAKK,aAA4BJ,KAAKD,KAAKK,aAAeJ,KAAKD,KAAKK,aAAaC,YAAcL,KAAKD,KAAKK,aAAaE,KAG3JT,EAAAI,UAAAM,KAAA,WAAA,IAAAC,EAAAR,KACQS,EAAaT,KAAKD,KAAKW,OAAOC,WAAU,SAACC,GAAwB,OAACA,EAAMP,YAAcO,EAAMN,OAASE,EAAKL,mBAC7GM,IAAeT,KAAKD,KAAKW,OAAOG,OAAS,EAC1Cb,KAAKG,gBAAmBH,KAAKD,KAAKW,OAAO,GAAoBL,YAAgBL,KAAKD,KAAKW,OAAO,GAAoBJ,IAElHN,KAAKG,gBAAmBH,KAAKD,KAAKW,OAAOD,EAAa,GAAoBJ,YAAeL,KAAKD,KAAKW,OAAOD,EAAa,GAAoBH,KAI/IT,EAAAI,UAAAa,KAAA,WAAA,IAAAN,EAAAR,KACQS,EAAaT,KAAKD,KAAKW,OAAOC,WAAU,SAACC,GAAwB,OAACA,EAAMP,YAAcO,EAAMN,OAASE,EAAKL,mBAE9GH,KAAKG,gBADW,IAAfM,EACuBT,KAAKD,KAAKW,OAAOV,KAAKD,KAAKW,OAAOG,OAAS,GAAoBR,YAAeL,KAAKD,KAAKW,OAAOV,KAAKD,KAAKW,OAAOG,OAAS,GAAoBP,IAE7IN,KAAKD,KAAKW,OAAOD,EAAa,GAAoBJ,YAAeL,KAAKD,KAAKW,OAAOD,EAAa,GAAoBH,8BA/BhJS,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,oBACVC,SAAA,moCAjBOC,EAAAA,6CAyBJC,EAAAA,OAAMJ,KAAA,CAACK,EAAAA,uCCPV,SAAAC,EAAoBC,EAAuBC,GAAvBxB,KAAAuB,GAAAA,EAAuBvB,KAAAwB,OAAAA,EAHlBxB,KAAAU,OAAuC,UAKzCY,EAAArB,UAAAwB,QAAA,WACrB,IAAIrB,EACFA,EAAeJ,KAAKuB,GAAGG,cAAcpB,IACjCN,KAAKU,OAAOG,QAAUb,KAAK2B,qBAAuB,IACpDvB,EAAeJ,KAAKU,OAAOV,KAAK2B,sBAElC3B,KAAKwB,OAAOI,KAAK/B,EAAuB,CACtCE,KAAM,CAAEK,aAAYA,EAAEM,OAAQV,KAAKU,QACnCmB,cAAe,CAAC,yBAChBC,WAAY,qBACZC,MAAO,QACPC,SAAU,MACVC,OAAQ,QACRC,UAAW,kCAtBlBC,EAAAA,UAASnB,KAAA,CAAC,CACTC,SAAU,gEAbQmB,EAAAA,kBACXC,EAAAA,6CAeNC,EAAAA,MAAKtB,KAAA,CAAC,+CACNsB,EAAAA,uBAIAC,EAAAA,aAAYvB,KAAA,CAAC,kBCHhB,iCAVCwB,EAAAA,SAAQxB,KAAA,CAAC,CACRyB,aAAc,CAAC5C,EAAuByB,GACtCoB,QAAS,CAACpB,GACVqB,QAAS,CACPC,EAAAA,aACAC,EAAAA,gBACAC,EAAAA,eAEFC,gBAAiB,CAAClD","sourcesContent":["import { Component, Inject, OnInit } from '@angular/core';\r\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\r\n\r\nexport interface Data {\r\n currentImage: ImagePreview | string;\r\n images: Array<ImagePreview | string>\r\n}\r\n\r\nexport interface ImagePreview {\r\n extension: string;\r\n file: File;\r\n fileName: string;\r\n previewSrc?: string;\r\n src?: string;\r\n}\r\n\r\n@Component({\r\n selector: 'app-image-preview',\r\n templateUrl: './image-preview.component.html',\r\n styleUrls: ['./image-preview.component.scss']\r\n})\r\nexport class ImagePreviewComponent implements OnInit {\r\n currentImageUrl: string;\r\n\r\n constructor(\r\n public dialogRef: MatDialogRef<ImagePreviewComponent>,\r\n @Inject(MAT_DIALOG_DATA) public data: Data\r\n ) { }\r\n\r\n ngOnInit(): void {\r\n this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;\r\n }\r\n\r\n next(): void {\r\n const currentIdx = this.data.images.findIndex((image: ImagePreview )=> (image.previewSrc || image.src) === this.currentImageUrl);\r\n if(currentIdx === this.data.images.length - 1) {\r\n this.currentImageUrl = (this.data.images[0] as ImagePreview).previewSrc || (this.data.images[0] as ImagePreview).src\r\n } else {\r\n this.currentImageUrl = (this.data.images[currentIdx + 1] as ImagePreview).previewSrc || (this.data.images[currentIdx + 1] as ImagePreview).src;\r\n }\r\n }\r\n\r\n prev(): void {\r\n const currentIdx = this.data.images.findIndex((image: ImagePreview )=> (image.previewSrc || image.src) === this.currentImageUrl);\r\n if(currentIdx === 0) {\r\n this.currentImageUrl = (this.data.images[this.data.images.length - 1] as ImagePreview).previewSrc || (this.data.images[this.data.images.length - 1] as ImagePreview).src\r\n } else {\r\n this.currentImageUrl = (this.data.images[currentIdx - 1] as ImagePreview).previewSrc || (this.data.images[currentIdx - 1] as ImagePreview).src;\r\n }\r\n }\r\n\r\n}\r\n","import { Directive, ElementRef, HostListener, Input } from \"@angular/core\";\r\nimport { MatDialog } from \"@angular/material/dialog\";\r\nimport { ImagePreviewComponent } from \"../image-preview/image-preview.component\";\r\n\r\nexport interface ImagePreview {\r\n extension: string;\r\n file: File;\r\n fileName: string;\r\n previewSrc?: string;\r\n src?: string;\r\n}\r\n\r\n@Directive({\r\n selector: \"[sdImagePreview]\",\r\n})\r\nexport class ImagePreviewDirective {\r\n @Input(\"sdImagePreview\") images: Array<ImagePreview | string> = [];\r\n @Input() sdPreviewCurrentIdx: number;\r\n\r\n constructor(private el: ElementRef, public dialog: MatDialog) {}\r\n\r\n @HostListener(\"click\") onClick() {\r\n let currentImage: string | ImagePreview;\r\n currentImage = this.el.nativeElement.src;\r\n if (this.images.length && this.sdPreviewCurrentIdx >= 0) {\r\n currentImage = this.images[this.sdPreviewCurrentIdx];\r\n }\r\n this.dialog.open(ImagePreviewComponent, {\r\n data: { currentImage, images: this.images },\r\n backdropClass: [\"image-prevew-backdrop\"],\r\n panelClass: \"image-prevew-panel\",\r\n width: \"600px\",\r\n maxWidth: \"90%\",\r\n height: \"600px\",\r\n maxHeight: \"90%\",\r\n });\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ImagePreviewComponent } from './image-preview.component';\r\nimport { ImagePreviewDirective } from '../directives/image-preview.directive';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\n\r\n@NgModule({\r\n declarations: [ImagePreviewComponent, ImagePreviewDirective],\r\n exports: [ImagePreviewDirective],\r\n imports: [\r\n CommonModule,\r\n MatDialogModule,\r\n MatIconModule\r\n ],\r\n entryComponents: [ImagePreviewComponent]\r\n})\r\nexport class SdImagePreviewModule { }\r\n"]}
|