ngx-image-cropper 6.2.2 → 6.3.1
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/README.md +4 -3
- package/esm2020/lib/component/image-cropper.component.mjs +37 -10
- package/esm2020/lib/image-cropper.module.mjs +5 -5
- package/esm2020/lib/interfaces/cropper-options.interface.mjs +1 -1
- package/esm2020/lib/interfaces/cropper.settings.mjs +2 -1
- package/esm2020/lib/services/crop.service.mjs +4 -4
- package/esm2020/lib/services/cropper-position.service.mjs +4 -4
- package/esm2020/lib/services/load-image.service.mjs +4 -4
- package/fesm2015/ngx-image-cropper.mjs +50 -22
- package/fesm2015/ngx-image-cropper.mjs.map +1 -1
- package/fesm2020/ngx-image-cropper.mjs +50 -22
- package/fesm2020/ngx-image-cropper.mjs.map +1 -1
- package/lib/component/image-cropper.component.d.ts +5 -1
- package/lib/interfaces/cropper-options.interface.d.ts +1 -0
- package/lib/interfaces/cropper.settings.d.ts +1 -0
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@ class CropperSettings {
|
|
|
11
11
|
this.maintainAspectRatio = true;
|
|
12
12
|
this.transform = {};
|
|
13
13
|
this.aspectRatio = 1;
|
|
14
|
+
this.resetCropOnAspectRatioChange = true;
|
|
14
15
|
this.resizeToWidth = 0;
|
|
15
16
|
this.resizeToHeight = 0;
|
|
16
17
|
this.cropperMinWidth = 0;
|
|
@@ -308,9 +309,9 @@ class CropService {
|
|
|
308
309
|
return Math.min(1, Math.max(0, settings.imageQuality / 100));
|
|
309
310
|
}
|
|
310
311
|
}
|
|
311
|
-
CropService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
312
|
-
CropService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.
|
|
313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
312
|
+
CropService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
313
|
+
CropService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CropService, providedIn: 'root' });
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CropService, decorators: [{
|
|
314
315
|
type: Injectable,
|
|
315
316
|
args: [{ providedIn: 'root' }]
|
|
316
317
|
}] });
|
|
@@ -507,9 +508,9 @@ class CropperPositionService {
|
|
|
507
508
|
return event.touches?.[0].clientY || event.clientY || 0;
|
|
508
509
|
}
|
|
509
510
|
}
|
|
510
|
-
CropperPositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
511
|
-
CropperPositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.
|
|
512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
511
|
+
CropperPositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CropperPositionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
512
|
+
CropperPositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CropperPositionService, providedIn: 'root' });
|
|
513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CropperPositionService, decorators: [{
|
|
513
514
|
type: Injectable,
|
|
514
515
|
args: [{ providedIn: 'root' }]
|
|
515
516
|
}] });
|
|
@@ -761,9 +762,9 @@ class LoadImageService {
|
|
|
761
762
|
};
|
|
762
763
|
}
|
|
763
764
|
}
|
|
764
|
-
LoadImageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
765
|
-
LoadImageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.
|
|
766
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
765
|
+
LoadImageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
766
|
+
LoadImageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadImageService, providedIn: 'root' });
|
|
767
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadImageService, decorators: [{
|
|
767
768
|
type: Injectable,
|
|
768
769
|
args: [{ providedIn: 'root' }]
|
|
769
770
|
}] });
|
|
@@ -778,6 +779,7 @@ class ImageCropperComponent {
|
|
|
778
779
|
this.Hammer = window?.['Hammer'] || null;
|
|
779
780
|
this.settings = new CropperSettings();
|
|
780
781
|
this.setImageMaxSizeRetries = 0;
|
|
782
|
+
this.resizedWhileHidden = false;
|
|
781
783
|
this.marginLeft = '0px';
|
|
782
784
|
this.maxSize = {
|
|
783
785
|
width: 0,
|
|
@@ -789,6 +791,7 @@ class ImageCropperComponent {
|
|
|
789
791
|
this.transform = {};
|
|
790
792
|
this.maintainAspectRatio = this.settings.maintainAspectRatio;
|
|
791
793
|
this.aspectRatio = this.settings.aspectRatio;
|
|
794
|
+
this.resetCropOnAspectRatioChange = this.settings.resetCropOnAspectRatioChange;
|
|
792
795
|
this.resizeToWidth = this.settings.resizeToWidth;
|
|
793
796
|
this.resizeToHeight = this.settings.resizeToHeight;
|
|
794
797
|
this.cropperMinWidth = this.settings.cropperMinWidth;
|
|
@@ -815,6 +818,7 @@ class ImageCropperComponent {
|
|
|
815
818
|
};
|
|
816
819
|
this.alignImage = this.settings.alignImage;
|
|
817
820
|
this.disabled = false;
|
|
821
|
+
this.hidden = false;
|
|
818
822
|
this.imageCropped = new EventEmitter();
|
|
819
823
|
this.startCropImage = new EventEmitter();
|
|
820
824
|
this.imageLoaded = new EventEmitter();
|
|
@@ -836,7 +840,9 @@ class ImageCropperComponent {
|
|
|
836
840
|
this.setMaxSize();
|
|
837
841
|
this.setCropperScaledMinSize();
|
|
838
842
|
this.setCropperScaledMaxSize();
|
|
839
|
-
if (this.maintainAspectRatio &&
|
|
843
|
+
if (this.maintainAspectRatio &&
|
|
844
|
+
(this.resetCropOnAspectRatioChange || !this.aspectRatioIsCorrect()) &&
|
|
845
|
+
(changes['maintainAspectRatio'] || changes['aspectRatio'])) {
|
|
840
846
|
this.resetCropperPosition();
|
|
841
847
|
}
|
|
842
848
|
else if (changes['cropper']) {
|
|
@@ -851,6 +857,12 @@ class ImageCropperComponent {
|
|
|
851
857
|
this.doAutoCrop();
|
|
852
858
|
this.cd.markForCheck();
|
|
853
859
|
}
|
|
860
|
+
if (changes['hidden'] && this.resizedWhileHidden && !this.hidden) {
|
|
861
|
+
setTimeout(() => {
|
|
862
|
+
this.onResize();
|
|
863
|
+
this.resizedWhileHidden = false;
|
|
864
|
+
});
|
|
865
|
+
}
|
|
854
866
|
}
|
|
855
867
|
onChangesUpdateSettings(changes) {
|
|
856
868
|
this.settings.setOptionsFromChanges(changes);
|
|
@@ -980,10 +992,15 @@ class ImageCropperComponent {
|
|
|
980
992
|
if (!this.loadedImage) {
|
|
981
993
|
return;
|
|
982
994
|
}
|
|
983
|
-
this.
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
995
|
+
if (this.hidden) {
|
|
996
|
+
this.resizedWhileHidden = true;
|
|
997
|
+
}
|
|
998
|
+
else {
|
|
999
|
+
this.resizeCropperPosition();
|
|
1000
|
+
this.setMaxSize();
|
|
1001
|
+
this.setCropperScaledMinSize();
|
|
1002
|
+
this.setCropperScaledMaxSize();
|
|
1003
|
+
}
|
|
987
1004
|
}
|
|
988
1005
|
activatePinchGesture() {
|
|
989
1006
|
if (this.Hammer) {
|
|
@@ -1220,12 +1237,16 @@ class ImageCropperComponent {
|
|
|
1220
1237
|
}
|
|
1221
1238
|
return null;
|
|
1222
1239
|
}
|
|
1240
|
+
aspectRatioIsCorrect() {
|
|
1241
|
+
const currentCropAspectRatio = (this.cropper.x2 - this.cropper.x1) / (this.cropper.y2 - this.cropper.y1);
|
|
1242
|
+
return currentCropAspectRatio === this.aspectRatio;
|
|
1243
|
+
}
|
|
1223
1244
|
}
|
|
1224
|
-
ImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
1225
|
-
ImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
1226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
1245
|
+
ImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperComponent, deps: [{ token: CropService }, { token: CropperPositionService }, { token: LoadImageService }, { token: i4.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1246
|
+
ImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageCropperComponent, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", format: "format", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resetCropOnAspectRatioChange: "resetCropOnAspectRatioChange", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", autoCrop: "autoCrop", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", cropper: "cropper", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange" }, host: { listeners: { "window:resize": "onResize()", "document:mousemove": "moveImg($event)", "document:touchmove": "moveImg($event)", "document:mouseup": "moveStop()", "document:touchend": "moveStop()" }, properties: { "style.text-align": "this.alignImage", "class.disabled": "this.disabled", "class.ngx-ix-hidden": "this.hidden" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [style.background]=\"imageVisible && backgroundColor\"\n #wrapper\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"maxSize.width\"\n [style.height.px]=\"maxSize.height\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"roundCropper\"\n [style.top.px]=\"cropper.y1\"\n [style.left.px]=\"cropper.x1\"\n [style.width.px]=\"cropper.x2 - cropper.x1\"\n [style.height.px]=\"cropper.y2 - cropper.y1\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n (keydown)=\"keyboardAccess($event)\"\n tabindex=\"0\"\n >\n <div\n (mousedown)=\"startMove($event, moveTypes.Move)\"\n (touchstart)=\"startMove($event, moveTypes.Move)\"\n class=\"ngx-ic-move\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span class=\"ngx-ic-resize ngx-ic-topleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-top\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-topright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-right\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottom\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-left\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n </span>\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535C;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ix-hidden{display:none}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
1227
1248
|
type: Component,
|
|
1228
|
-
args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.background]=\"imageVisible && backgroundColor\"\n #wrapper\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"maxSize.width\"\n [style.height.px]=\"maxSize.height\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"roundCropper\"\n [style.top.px]=\"cropper.y1\"\n [style.left.px]=\"cropper.x1\"\n [style.width.px]=\"cropper.x2 - cropper.x1\"\n [style.height.px]=\"cropper.y2 - cropper.y1\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n (keydown)=\"keyboardAccess($event)\"\n tabindex=\"0\"\n >\n <div\n (mousedown)=\"startMove($event, moveTypes.Move)\"\n (touchstart)=\"startMove($event, moveTypes.Move)\"\n class=\"ngx-ic-move\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span class=\"ngx-ic-resize ngx-ic-topleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-top\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-topright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-right\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottom\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-left\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n </span>\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";
|
|
1249
|
+
args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.background]=\"imageVisible && backgroundColor\"\n #wrapper\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"maxSize.width\"\n [style.height.px]=\"maxSize.height\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"roundCropper\"\n [style.top.px]=\"cropper.y1\"\n [style.left.px]=\"cropper.x1\"\n [style.width.px]=\"cropper.x2 - cropper.x1\"\n [style.height.px]=\"cropper.y2 - cropper.y1\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n (keydown)=\"keyboardAccess($event)\"\n tabindex=\"0\"\n >\n <div\n (mousedown)=\"startMove($event, moveTypes.Move)\"\n (touchstart)=\"startMove($event, moveTypes.Move)\"\n class=\"ngx-ic-move\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span class=\"ngx-ic-resize ngx-ic-topleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-top\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-topright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-right\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottom\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-left\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n </span>\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535C;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ix-hidden{display:none}\n"] }]
|
|
1229
1250
|
}], ctorParameters: function () { return [{ type: CropService }, { type: CropperPositionService }, { type: LoadImageService }, { type: i4.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { wrapper: [{
|
|
1230
1251
|
type: ViewChild,
|
|
1231
1252
|
args: ['wrapper', { static: true }]
|
|
@@ -1248,6 +1269,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1248
1269
|
type: Input
|
|
1249
1270
|
}], aspectRatio: [{
|
|
1250
1271
|
type: Input
|
|
1272
|
+
}], resetCropOnAspectRatioChange: [{
|
|
1273
|
+
type: Input
|
|
1251
1274
|
}], resizeToWidth: [{
|
|
1252
1275
|
type: Input
|
|
1253
1276
|
}], resizeToHeight: [{
|
|
@@ -1296,6 +1319,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1296
1319
|
args: ['class.disabled']
|
|
1297
1320
|
}, {
|
|
1298
1321
|
type: Input
|
|
1322
|
+
}], hidden: [{
|
|
1323
|
+
type: HostBinding,
|
|
1324
|
+
args: ['class.ngx-ix-hidden']
|
|
1325
|
+
}, {
|
|
1326
|
+
type: Input
|
|
1299
1327
|
}], imageCropped: [{
|
|
1300
1328
|
type: Output
|
|
1301
1329
|
}], startCropImage: [{
|
|
@@ -1327,12 +1355,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1327
1355
|
|
|
1328
1356
|
class ImageCropperModule {
|
|
1329
1357
|
}
|
|
1330
|
-
ImageCropperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
1331
|
-
ImageCropperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
1332
|
-
ImageCropperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
1358
|
+
ImageCropperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1359
|
+
ImageCropperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperModule, declarations: [ImageCropperComponent], imports: [CommonModule], exports: [ImageCropperComponent] });
|
|
1360
|
+
ImageCropperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperModule, imports: [[
|
|
1333
1361
|
CommonModule
|
|
1334
1362
|
]] });
|
|
1335
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
1363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperModule, decorators: [{
|
|
1336
1364
|
type: NgModule,
|
|
1337
1365
|
args: [{
|
|
1338
1366
|
imports: [
|