ngx-image-cropper 8.1.1 → 9.1.0
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 +17 -6
- package/esm2022/lib/component/cropper.state.mjs +21 -21
- package/esm2022/lib/component/image-cropper.component.mjs +49 -83
- package/esm2022/lib/interfaces/move-start.interface.mjs +1 -1
- package/esm2022/lib/services/crop.service.mjs +12 -10
- package/esm2022/lib/utils/cropper-position.utils.mjs +2 -2
- package/esm2022/lib/utils/exif.utils.mjs +3 -7
- package/fesm2022/ngx-image-cropper.mjs +81 -118
- package/fesm2022/ngx-image-cropper.mjs.map +1 -1
- package/lib/component/cropper.state.d.ts +2 -2
- package/lib/component/image-cropper.component.d.ts +12 -14
- package/lib/interfaces/move-start.interface.d.ts +0 -1
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal,
|
|
2
|
+
import { signal, output, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, HostListener } from '@angular/core';
|
|
3
3
|
import { takeUntil, first } from 'rxjs/operators';
|
|
4
4
|
import { Subject, merge, fromEvent } from 'rxjs';
|
|
5
5
|
import { NgIf } from '@angular/common';
|
|
@@ -82,7 +82,7 @@ function moveCropper(event, moveStart) {
|
|
|
82
82
|
};
|
|
83
83
|
}
|
|
84
84
|
function resizeCropper(event, moveStart, cropperState) {
|
|
85
|
-
const cropperPosition = { ...cropperState.cropper };
|
|
85
|
+
const cropperPosition = { ...cropperState.cropper() };
|
|
86
86
|
const moveX = getClientX(event) - moveStart.clientX;
|
|
87
87
|
const moveY = getClientY(event) - moveStart.clientY;
|
|
88
88
|
switch (moveStart.position) {
|
|
@@ -246,6 +246,8 @@ function getClientY(event) {
|
|
|
246
246
|
|
|
247
247
|
class CropperState {
|
|
248
248
|
constructor() {
|
|
249
|
+
this.cropper = signal({ x1: 0, x2: 0, y1: 0, y2: 0 });
|
|
250
|
+
this.transform = {};
|
|
249
251
|
this.options = {
|
|
250
252
|
format: 'png',
|
|
251
253
|
output: 'blob',
|
|
@@ -272,8 +274,6 @@ class CropperState {
|
|
|
272
274
|
cropperFrameAriaLabel: undefined,
|
|
273
275
|
checkImageType: true
|
|
274
276
|
};
|
|
275
|
-
this.cropper = { x1: 0, x2: 0, y1: 0, y2: 0 };
|
|
276
|
-
this.transform = {};
|
|
277
277
|
// Internal
|
|
278
278
|
this.cropperScaledMinWidth = 20;
|
|
279
279
|
this.cropperScaledMinHeight = 20;
|
|
@@ -309,7 +309,7 @@ class CropperState {
|
|
|
309
309
|
this.setCropperScaledMinSize();
|
|
310
310
|
this.setCropperScaledMaxSize();
|
|
311
311
|
if (this.options.maintainAspectRatio && (this.options.resetCropOnAspectRatioChange || !this.aspectRatioIsCorrect())) {
|
|
312
|
-
this.cropper
|
|
312
|
+
this.cropper.set(this.maxSizeCropperPosition());
|
|
313
313
|
positionPossiblyChanged = true;
|
|
314
314
|
}
|
|
315
315
|
}
|
|
@@ -327,7 +327,7 @@ class CropperState {
|
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
329
|
if (positionPossiblyChanged) {
|
|
330
|
-
this.cropper
|
|
330
|
+
this.cropper.update((cropper) => checkCropperPosition(cropper, this, false));
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
333
|
validateOptions() {
|
|
@@ -386,12 +386,13 @@ class CropperState {
|
|
|
386
386
|
}
|
|
387
387
|
}
|
|
388
388
|
equalsCropperPosition(cropper) {
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
&&
|
|
393
|
-
&&
|
|
394
|
-
&&
|
|
389
|
+
const localCropper = this.cropper();
|
|
390
|
+
return localCropper == null && cropper == null
|
|
391
|
+
|| localCropper != null && cropper != null
|
|
392
|
+
&& localCropper.x1.toFixed(3) === cropper.x1.toFixed(3)
|
|
393
|
+
&& localCropper.y1.toFixed(3) === cropper.y1.toFixed(3)
|
|
394
|
+
&& localCropper.x2.toFixed(3) === cropper.x2.toFixed(3)
|
|
395
|
+
&& localCropper.y2.toFixed(3) === cropper.y2.toFixed(3);
|
|
395
396
|
}
|
|
396
397
|
equalsTransformTranslate(transform) {
|
|
397
398
|
return (this.transform.translateH ?? 0) === (transform.translateH ?? 0)
|
|
@@ -405,20 +406,18 @@ class CropperState {
|
|
|
405
406
|
&& (this.transform.flipV ?? false) === (transform.flipV ?? false);
|
|
406
407
|
}
|
|
407
408
|
aspectRatioIsCorrect() {
|
|
408
|
-
const
|
|
409
|
+
const localCropper = this.cropper();
|
|
410
|
+
const currentCropAspectRatio = (localCropper.x2 - localCropper.x1) / (localCropper.y2 - localCropper.y1);
|
|
409
411
|
return currentCropAspectRatio === this.options.aspectRatio;
|
|
410
412
|
}
|
|
411
413
|
resizeCropperPosition(oldMaxSize) {
|
|
412
|
-
if (!this.cropper) {
|
|
413
|
-
return;
|
|
414
|
-
}
|
|
415
414
|
if (oldMaxSize.width !== this.maxSize.width || oldMaxSize.height !== this.maxSize.height) {
|
|
416
|
-
this.cropper
|
|
417
|
-
x1:
|
|
418
|
-
x2:
|
|
419
|
-
y1:
|
|
420
|
-
y2:
|
|
421
|
-
};
|
|
415
|
+
this.cropper.update(cropper => ({
|
|
416
|
+
x1: cropper.x1 * this.maxSize.width / oldMaxSize.width,
|
|
417
|
+
x2: cropper.x2 * this.maxSize.width / oldMaxSize.width,
|
|
418
|
+
y1: cropper.y1 * this.maxSize.height / oldMaxSize.height,
|
|
419
|
+
y2: cropper.y2 * this.maxSize.height / oldMaxSize.height
|
|
420
|
+
}));
|
|
422
421
|
}
|
|
423
422
|
}
|
|
424
423
|
maxSizeCropperPosition() {
|
|
@@ -545,7 +544,7 @@ class CropService {
|
|
|
545
544
|
const result = {
|
|
546
545
|
width, height,
|
|
547
546
|
imagePosition,
|
|
548
|
-
cropperPosition: { ...cropperState.cropper }
|
|
547
|
+
cropperPosition: { ...cropperState.cropper() }
|
|
549
548
|
};
|
|
550
549
|
if (cropperState.options.containWithinAspectRatio) {
|
|
551
550
|
result.offsetImagePosition = this.getOffsetImagePosition(cropperState);
|
|
@@ -593,11 +592,12 @@ class CropService {
|
|
|
593
592
|
}
|
|
594
593
|
getImagePosition(cropperState) {
|
|
595
594
|
const ratio = this.getRatio(cropperState);
|
|
595
|
+
const cropper = cropperState.cropper();
|
|
596
596
|
const out = {
|
|
597
|
-
x1: Math.round(
|
|
598
|
-
y1: Math.round(
|
|
599
|
-
x2: Math.round(
|
|
600
|
-
y2: Math.round(
|
|
597
|
+
x1: Math.round(cropper.x1 * ratio),
|
|
598
|
+
y1: Math.round(cropper.y1 * ratio),
|
|
599
|
+
x2: Math.round(cropper.x2 * ratio),
|
|
600
|
+
y2: Math.round(cropper.y2 * ratio)
|
|
601
601
|
};
|
|
602
602
|
if (!cropperState.options.containWithinAspectRatio) {
|
|
603
603
|
out.x1 = Math.max(out.x1, 0);
|
|
@@ -620,11 +620,12 @@ class CropService {
|
|
|
620
620
|
offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.width) / 2;
|
|
621
621
|
offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.height) / 2;
|
|
622
622
|
}
|
|
623
|
+
const cropper = cropperState.cropper();
|
|
623
624
|
const out = {
|
|
624
|
-
x1: Math.round(
|
|
625
|
-
y1: Math.round(
|
|
626
|
-
x2: Math.round(
|
|
627
|
-
y2: Math.round(
|
|
625
|
+
x1: Math.round(cropper.x1 * ratio) - offsetX,
|
|
626
|
+
y1: Math.round(cropper.y1 * ratio) - offsetY,
|
|
627
|
+
x2: Math.round(cropper.x2 * ratio) - offsetX,
|
|
628
|
+
y2: Math.round(cropper.y2 * ratio) - offsetY
|
|
628
629
|
};
|
|
629
630
|
if (!cropperState.options.containWithinAspectRatio) {
|
|
630
631
|
out.x1 = Math.max(out.x1, 0);
|
|
@@ -658,12 +659,8 @@ class CropService {
|
|
|
658
659
|
// Black 2x1 JPEG, with the following meta information set:
|
|
659
660
|
// - EXIF Orientation: 6 (Rotated 90° CCW)
|
|
660
661
|
// Source: https://github.com/blueimp/JavaScript-Load-Image
|
|
661
|
-
const
|
|
662
|
-
|
|
663
|
-
'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
|
|
664
|
-
'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
|
|
665
|
-
'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
|
|
666
|
-
'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==';
|
|
662
|
+
const testAutoOrientationImageByteArray = [new Uint8Array([255, 216, 255, 225, 0, 34, 69, 120, 105, 102, 0, 0, 77, 77, 0, 42, 0, 0, 0, 8, 0, 1, 1, 18, 0, 3, 0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 255, 219, 0, 132, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 255, 192, 0, 17, 8, 0, 1, 0, 2, 3, 1, 17, 0, 2, 17, 1, 3, 17, 1, 255, 196, 0, 74, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 11, 16, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 218, 0, 12, 3, 1, 0, 2, 17, 3, 17, 0, 63, 0, 63, 240, 127, 255, 217])];
|
|
663
|
+
const testAutoOrientationImageURL = URL.createObjectURL(new Blob(testAutoOrientationImageByteArray, { type: 'image/jpeg' }));
|
|
667
664
|
function supportsAutomaticRotation() {
|
|
668
665
|
return new Promise((resolve) => {
|
|
669
666
|
const img = new Image();
|
|
@@ -973,10 +970,8 @@ class ImageCropperComponent {
|
|
|
973
970
|
get alignImageStyle() {
|
|
974
971
|
return this.state.options.alignImage;
|
|
975
972
|
}
|
|
976
|
-
constructor(sanitizer
|
|
973
|
+
constructor(sanitizer) {
|
|
977
974
|
this.sanitizer = sanitizer;
|
|
978
|
-
this.cd = cd;
|
|
979
|
-
this.zone = zone;
|
|
980
975
|
this.pinchStart$ = new Subject();
|
|
981
976
|
this.cropService = new CropService();
|
|
982
977
|
this.loadImageService = new LoadImageService();
|
|
@@ -985,26 +980,27 @@ class ImageCropperComponent {
|
|
|
985
980
|
this.moveTypes = MoveTypes;
|
|
986
981
|
this.state = new CropperState();
|
|
987
982
|
this.safeImgDataUrl = signal(undefined);
|
|
983
|
+
this.safeTransformStyle = signal(undefined);
|
|
988
984
|
this.marginLeft = '0px';
|
|
989
985
|
this.imageVisible = false;
|
|
990
986
|
this.allowMoveImage = false;
|
|
991
987
|
this.checkImageType = true;
|
|
992
988
|
this.disabled = false;
|
|
993
989
|
this.hidden = false;
|
|
994
|
-
this.imageCropped =
|
|
995
|
-
this.startCropImage =
|
|
996
|
-
this.imageLoaded =
|
|
997
|
-
this.cropperReady =
|
|
998
|
-
this.loadImageFailed =
|
|
999
|
-
this.transformChange =
|
|
1000
|
-
this.cropperChange =
|
|
990
|
+
this.imageCropped = output();
|
|
991
|
+
this.startCropImage = output();
|
|
992
|
+
this.imageLoaded = output();
|
|
993
|
+
this.cropperReady = output();
|
|
994
|
+
this.loadImageFailed = output();
|
|
995
|
+
this.transformChange = output();
|
|
996
|
+
this.cropperChange = output();
|
|
1001
997
|
this.reset();
|
|
1002
998
|
}
|
|
1003
999
|
ngOnInit() {
|
|
1004
1000
|
this.state.stepSize = this.initialStepSize || this.state.stepSize;
|
|
1005
1001
|
}
|
|
1006
1002
|
ngOnChanges(changes) {
|
|
1007
|
-
const previousCropperPosition = this.state.cropper;
|
|
1003
|
+
const previousCropperPosition = this.state.cropper();
|
|
1008
1004
|
const previousTransform = this.state.transform;
|
|
1009
1005
|
const previousBackgroundColor = this.state.options.backgroundColor;
|
|
1010
1006
|
this.state.setOptionsFromChanges(changes);
|
|
@@ -1024,11 +1020,11 @@ class ImageCropperComponent {
|
|
|
1024
1020
|
return;
|
|
1025
1021
|
}
|
|
1026
1022
|
if (changes['cropper'] && this.cropper) {
|
|
1027
|
-
this.state.cropper
|
|
1023
|
+
this.state.cropper.set(checkCropperPosition(this.cropper, this.state, true));
|
|
1028
1024
|
}
|
|
1029
1025
|
const cropperChanged = !this.state.equalsCropperPosition(previousCropperPosition);
|
|
1030
1026
|
if (cropperChanged && (!this.cropper || !this.state.equalsCropperPosition(this.cropper))) {
|
|
1031
|
-
this.cropperChange.emit(this.state.cropper);
|
|
1027
|
+
this.cropperChange.emit(this.state.cropper());
|
|
1032
1028
|
}
|
|
1033
1029
|
if (cropperChanged
|
|
1034
1030
|
|| !this.state.equalsTransform(previousTransform)
|
|
@@ -1064,9 +1060,6 @@ class ImageCropperComponent {
|
|
|
1064
1060
|
return files instanceof FileList && files.length > 0;
|
|
1065
1061
|
}
|
|
1066
1062
|
reset() {
|
|
1067
|
-
this.safeImgDataUrl.set('data:image/png;base64,iVBORw0KGg'
|
|
1068
|
-
+ 'oAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAU'
|
|
1069
|
-
+ 'AAarVyFEAAAAASUVORK5CYII=');
|
|
1070
1063
|
this.state.loadedImage = undefined;
|
|
1071
1064
|
this.state.maxSize = undefined;
|
|
1072
1065
|
this.imageVisible = false;
|
|
@@ -1099,10 +1092,10 @@ class ImageCropperComponent {
|
|
|
1099
1092
|
}
|
|
1100
1093
|
setCssTransform() {
|
|
1101
1094
|
const translateUnit = this.state.transform?.translateUnit || '%';
|
|
1102
|
-
this.safeTransformStyle
|
|
1095
|
+
this.safeTransformStyle.set(this.sanitizer.bypassSecurityTrustStyle(`translate(${this.state.transform.translateH || 0}${translateUnit}, ${this.state.transform.translateV || 0}${translateUnit})` +
|
|
1103
1096
|
' scaleX(' + (this.state.transform.scale || 1) * (this.state.transform.flipH ? -1 : 1) + ')' +
|
|
1104
1097
|
' scaleY(' + (this.state.transform.scale || 1) * (this.state.transform.flipV ? -1 : 1) + ')' +
|
|
1105
|
-
' rotate(' + (this.state.transform.rotate || 0) + 'deg)');
|
|
1098
|
+
' rotate(' + (this.state.transform.rotate || 0) + 'deg)'));
|
|
1106
1099
|
}
|
|
1107
1100
|
imageLoadedInView() {
|
|
1108
1101
|
if (this.state.loadedImage != null) {
|
|
@@ -1118,17 +1111,16 @@ class ImageCropperComponent {
|
|
|
1118
1111
|
else if (this.sourceImageLoaded()) {
|
|
1119
1112
|
this.setMaxSize();
|
|
1120
1113
|
if (this.cropper && (!this.maintainAspectRatio || this.state.aspectRatioIsCorrect())) {
|
|
1121
|
-
this.state.cropper
|
|
1114
|
+
this.state.cropper.set(checkCropperPosition(this.cropper, this.state, true));
|
|
1122
1115
|
this.emitCropperPositionChange(this.cropper);
|
|
1123
1116
|
}
|
|
1124
1117
|
else {
|
|
1125
|
-
this.state.cropper
|
|
1126
|
-
this.cropperChange.emit(this.state.cropper);
|
|
1118
|
+
this.state.cropper.set(checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true));
|
|
1119
|
+
this.cropperChange.emit(this.state.cropper());
|
|
1127
1120
|
}
|
|
1128
1121
|
this.imageVisible = true;
|
|
1129
1122
|
this.cropperReady.emit({ ...this.state.maxSize });
|
|
1130
1123
|
this.doAutoCrop();
|
|
1131
|
-
this.cd.markForCheck();
|
|
1132
1124
|
}
|
|
1133
1125
|
else {
|
|
1134
1126
|
this.setImageMaxSizeRetries++;
|
|
@@ -1149,7 +1141,6 @@ class ImageCropperComponent {
|
|
|
1149
1141
|
const oldMaxSize = { ...this.state.maxSize };
|
|
1150
1142
|
this.setMaxSize();
|
|
1151
1143
|
this.state.resizeCropperPosition(oldMaxSize);
|
|
1152
|
-
this.cd.markForCheck();
|
|
1153
1144
|
}
|
|
1154
1145
|
}
|
|
1155
1146
|
keyboardAccess(event) {
|
|
@@ -1173,20 +1164,19 @@ class ImageCropperComponent {
|
|
|
1173
1164
|
event.preventDefault();
|
|
1174
1165
|
event.stopPropagation();
|
|
1175
1166
|
this.moveStart = {
|
|
1176
|
-
active: true,
|
|
1177
1167
|
type: moveType,
|
|
1178
1168
|
position,
|
|
1179
1169
|
clientX: 0,
|
|
1180
1170
|
clientY: 0,
|
|
1181
1171
|
transform: this.state.transform,
|
|
1182
|
-
cropper: this.state.cropper
|
|
1172
|
+
cropper: this.state.cropper()
|
|
1183
1173
|
};
|
|
1184
1174
|
this.handleMouseMove(moveEvent);
|
|
1185
1175
|
this.handleMouseUp();
|
|
1186
1176
|
}
|
|
1187
1177
|
startMove(event, moveType, position = null) {
|
|
1188
1178
|
if (this.disabled
|
|
1189
|
-
|| this.moveStart
|
|
1179
|
+
|| this.moveStart && this.moveStart.type === MoveTypes.Pinch
|
|
1190
1180
|
|| moveType === MoveTypes.Drag && !this.allowMoveImage) {
|
|
1191
1181
|
return;
|
|
1192
1182
|
}
|
|
@@ -1194,30 +1184,23 @@ class ImageCropperComponent {
|
|
|
1194
1184
|
event.preventDefault();
|
|
1195
1185
|
}
|
|
1196
1186
|
this.moveStart = {
|
|
1197
|
-
active: true,
|
|
1198
1187
|
type: moveType,
|
|
1199
1188
|
position,
|
|
1200
1189
|
clientX: getClientX(event),
|
|
1201
1190
|
clientY: getClientY(event),
|
|
1202
1191
|
transform: this.state.transform,
|
|
1203
|
-
cropper: this.state.cropper
|
|
1192
|
+
cropper: this.state.cropper()
|
|
1204
1193
|
};
|
|
1205
1194
|
this.initMouseMove();
|
|
1206
1195
|
}
|
|
1207
1196
|
initMouseMove() {
|
|
1208
1197
|
merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).pipe(takeUntil(merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend'), this.pinchStart$).pipe(first()))).subscribe({
|
|
1209
|
-
next: (event) => this.
|
|
1210
|
-
|
|
1211
|
-
this.cd.markForCheck();
|
|
1212
|
-
}),
|
|
1213
|
-
complete: () => this.zone.run(() => {
|
|
1214
|
-
this.handleMouseUp();
|
|
1215
|
-
this.cd.markForCheck();
|
|
1216
|
-
})
|
|
1198
|
+
next: (event) => this.handleMouseMove(event),
|
|
1199
|
+
complete: () => this.handleMouseUp()
|
|
1217
1200
|
});
|
|
1218
1201
|
}
|
|
1219
1202
|
handleMouseMove(event) {
|
|
1220
|
-
if (!this.moveStart
|
|
1203
|
+
if (!this.moveStart) {
|
|
1221
1204
|
return;
|
|
1222
1205
|
}
|
|
1223
1206
|
if ('stopPropagation' in event) {
|
|
@@ -1227,11 +1210,11 @@ class ImageCropperComponent {
|
|
|
1227
1210
|
event.preventDefault();
|
|
1228
1211
|
}
|
|
1229
1212
|
if (this.moveStart.type === MoveTypes.Move) {
|
|
1230
|
-
this.state.cropper
|
|
1213
|
+
this.state.cropper.set(checkCropperWithinMaxSizeBounds(moveCropper(event, this.moveStart), this.state, true));
|
|
1231
1214
|
}
|
|
1232
1215
|
else if (this.moveStart.type === MoveTypes.Resize) {
|
|
1233
1216
|
if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
|
|
1234
|
-
this.state.cropper
|
|
1217
|
+
this.state.cropper.set(checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false));
|
|
1235
1218
|
}
|
|
1236
1219
|
}
|
|
1237
1220
|
else if (this.moveStart.type === MoveTypes.Drag) {
|
|
@@ -1246,15 +1229,16 @@ class ImageCropperComponent {
|
|
|
1246
1229
|
}
|
|
1247
1230
|
}
|
|
1248
1231
|
handleMouseUp() {
|
|
1249
|
-
if (!this.moveStart
|
|
1232
|
+
if (!this.moveStart || this.moveStart.type === MoveTypes.Pinch) {
|
|
1250
1233
|
return;
|
|
1251
1234
|
}
|
|
1252
|
-
if (!this.state.equalsCropperPosition(this.moveStart.cropper)
|
|
1235
|
+
if (!this.state.equalsCropperPosition(this.moveStart.cropper)
|
|
1236
|
+
|| this.moveStart.transform && !this.state.equalsTransform(this.moveStart.transform)) {
|
|
1253
1237
|
if (this.moveStart.type === MoveTypes.Drag) {
|
|
1254
1238
|
this.transformChange.emit(this.state.transform);
|
|
1255
1239
|
}
|
|
1256
1240
|
else {
|
|
1257
|
-
this.cropperChange.emit(this.state.cropper);
|
|
1241
|
+
this.cropperChange.emit(this.state.cropper());
|
|
1258
1242
|
}
|
|
1259
1243
|
this.doAutoCrop();
|
|
1260
1244
|
}
|
|
@@ -1267,13 +1251,13 @@ class ImageCropperComponent {
|
|
|
1267
1251
|
if ('preventDefault' in event) {
|
|
1268
1252
|
event.preventDefault();
|
|
1269
1253
|
}
|
|
1254
|
+
const cropper = this.state.cropper();
|
|
1270
1255
|
this.moveStart = {
|
|
1271
|
-
active: true,
|
|
1272
1256
|
type: MoveTypes.Pinch,
|
|
1273
1257
|
position: 'center',
|
|
1274
|
-
clientX:
|
|
1275
|
-
clientY:
|
|
1276
|
-
cropper:
|
|
1258
|
+
clientX: cropper.x1 + (cropper.x2 - cropper.x1) / 2,
|
|
1259
|
+
clientY: cropper.y1 + (cropper.y2 - cropper.y1) / 2,
|
|
1260
|
+
cropper: cropper
|
|
1277
1261
|
};
|
|
1278
1262
|
this.initPinch();
|
|
1279
1263
|
}
|
|
@@ -1282,18 +1266,12 @@ class ImageCropperComponent {
|
|
|
1282
1266
|
fromEvent(document, 'touchmove')
|
|
1283
1267
|
.pipe(takeUntil(fromEvent(document, 'touchend')))
|
|
1284
1268
|
.subscribe({
|
|
1285
|
-
next: (event) => this.
|
|
1286
|
-
|
|
1287
|
-
this.cd.markForCheck();
|
|
1288
|
-
}),
|
|
1289
|
-
complete: () => this.zone.run(() => {
|
|
1290
|
-
this.handlePinchStop();
|
|
1291
|
-
this.cd.markForCheck();
|
|
1292
|
-
})
|
|
1269
|
+
next: (event) => this.handlePinchMove(event),
|
|
1270
|
+
complete: () => this.handlePinchStop()
|
|
1293
1271
|
});
|
|
1294
1272
|
}
|
|
1295
1273
|
handlePinchMove(event) {
|
|
1296
|
-
if (!this.moveStart
|
|
1274
|
+
if (!this.moveStart) {
|
|
1297
1275
|
return;
|
|
1298
1276
|
}
|
|
1299
1277
|
if (event.preventDefault) {
|
|
@@ -1301,13 +1279,12 @@ class ImageCropperComponent {
|
|
|
1301
1279
|
}
|
|
1302
1280
|
if (this.moveStart.type === MoveTypes.Pinch) {
|
|
1303
1281
|
if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
|
|
1304
|
-
this.state.cropper
|
|
1282
|
+
this.state.cropper.set(checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false));
|
|
1305
1283
|
}
|
|
1306
1284
|
}
|
|
1307
|
-
this.cd.markForCheck();
|
|
1308
1285
|
}
|
|
1309
1286
|
handlePinchStop() {
|
|
1310
|
-
if (!this.moveStart
|
|
1287
|
+
if (!this.moveStart) {
|
|
1311
1288
|
return;
|
|
1312
1289
|
}
|
|
1313
1290
|
if (!this.state.equalsCropperPosition(this.moveStart.cropper)) {
|
|
@@ -1325,7 +1302,7 @@ class ImageCropperComponent {
|
|
|
1325
1302
|
}
|
|
1326
1303
|
emitCropperPositionChange(previousPosition) {
|
|
1327
1304
|
if (!this.state.equalsCropperPosition(previousPosition)) {
|
|
1328
|
-
this.cropperChange.emit(this.state.cropper);
|
|
1305
|
+
this.cropperChange.emit(this.state.cropper());
|
|
1329
1306
|
}
|
|
1330
1307
|
}
|
|
1331
1308
|
doAutoCrop() {
|
|
@@ -1346,7 +1323,7 @@ class ImageCropperComponent {
|
|
|
1346
1323
|
return null;
|
|
1347
1324
|
}
|
|
1348
1325
|
cropToBlob() {
|
|
1349
|
-
return new Promise((resolve, reject) =>
|
|
1326
|
+
return new Promise(async (resolve, reject) => {
|
|
1350
1327
|
const result = await this.cropService.crop(this.state, 'blob');
|
|
1351
1328
|
if (result) {
|
|
1352
1329
|
this.imageCropped.emit(result);
|
|
@@ -1355,7 +1332,7 @@ class ImageCropperComponent {
|
|
|
1355
1332
|
else {
|
|
1356
1333
|
reject('Crop image failed');
|
|
1357
1334
|
}
|
|
1358
|
-
})
|
|
1335
|
+
});
|
|
1359
1336
|
}
|
|
1360
1337
|
cropToBase64() {
|
|
1361
1338
|
const result = this.cropService.crop(this.state, 'base64');
|
|
@@ -1366,19 +1343,19 @@ class ImageCropperComponent {
|
|
|
1366
1343
|
return null;
|
|
1367
1344
|
}
|
|
1368
1345
|
resetCropperPosition() {
|
|
1369
|
-
this.state.cropper
|
|
1370
|
-
this.cropperChange.emit(this.state.cropper);
|
|
1346
|
+
this.state.cropper.set(checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true));
|
|
1347
|
+
this.cropperChange.emit(this.state.cropper());
|
|
1371
1348
|
}
|
|
1372
1349
|
ngOnDestroy() {
|
|
1373
1350
|
this.pinchStart$.complete();
|
|
1374
1351
|
}
|
|
1375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1.DomSanitizer }
|
|
1376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageCropperComponent, isStandalone: true, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", imageAltText: "imageAltText", options: "options", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", format: "format", autoCrop: "autoCrop", cropper: "cropper", 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", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", checkImageType: "checkImageType", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange", cropperChange: "cropperChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.disabled": "this.disabled", "class.ngx-ic-hidden": "this.hidden", "style.text-align": "this.alignImageStyle" } }, 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 && state.options.backgroundColor\"\n (touchstart)=\"startPinch($event)\"\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n role=\"presentation\"\n *ngIf=\"safeImgDataUrl() as src\"\n [src]=\"src\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n [attr.alt]=\"imageAltText\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n (error)=\"loadImageError($event)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"state.maxSize?.width || 0\"\n [style.height.px]=\"state.maxSize?.height || 0\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div\n class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"state.options.roundCropper\"\n [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n [style.top.px]=\"state.cropper.y1\"\n [style.left.px]=\"state.cropper.x1\"\n [style.width.px]=\"state.cropper.x2 - state.cropper.x1\"\n [style.height.px]=\"state.cropper.y2 - state.cropper.y1\"\n [style.margin-left]=\"state.options.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 role=\"presentation\">\n </div>\n <ng-container\n *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n <span\n class=\"ngx-ic-resize ngx-ic-topleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n >\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\n class=\"ngx-ic-resize ngx-ic-topright\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n >\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\n class=\"ngx-ic-resize ngx-ic-bottomright\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n >\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\n class=\"ngx-ic-resize ngx-ic-bottomleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n >\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\n class=\"ngx-ic-resize-bar ngx-ic-top\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n ></span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-right\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n ></span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n ></span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-left\"\n role=\"presentation\"\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:var(--cropper-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-ic-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1353
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageCropperComponent, isStandalone: true, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", imageAltText: "imageAltText", options: "options", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", format: "format", autoCrop: "autoCrop", cropper: "cropper", 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", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", checkImageType: "checkImageType", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange", cropperChange: "cropperChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.disabled": "this.disabled", "class.ngx-ic-hidden": "this.hidden", "style.text-align": "this.alignImageStyle" } }, 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 && state.options.backgroundColor\"\n (touchstart)=\"startPinch($event)\"\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n role=\"presentation\"\n *ngIf=\"safeImgDataUrl() as src\"\n [src]=\"src\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle()\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n [attr.alt]=\"imageAltText\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n (error)=\"loadImageError($event)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"state.maxSize?.width || 0\"\n [style.height.px]=\"state.maxSize?.height || 0\"\n [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div\n class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"state.options.roundCropper\"\n [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n [style.top.px]=\"state.cropper().y1\"\n [style.left.px]=\"state.cropper().x1\"\n [style.width.px]=\"state.cropper().x2 - state.cropper().x1\"\n [style.height.px]=\"state.cropper().y2 - state.cropper().y1\"\n [style.margin-left]=\"state.options.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 role=\"presentation\">\n </div>\n <ng-container\n *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n <span\n class=\"ngx-ic-resize ngx-ic-topleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize ngx-ic-topright\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize ngx-ic-bottomright\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize ngx-ic-bottomleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-top\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n ></span>\n\n <span\n class=\"ngx-ic-resize ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-right\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n ></span>\n <span\n class=\"ngx-ic-resize ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n ></span>\n <span\n class=\"ngx-ic-resize ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-left\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n ></span>\n <span\n class=\"ngx-ic-resize ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n >\n <span class=\"ngx-ic-square\"></span>\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:var(--cropper-color, #53535C);background:transparent;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:var(--cropper-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:hover .ngx-ic-move{border:var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, .5)))}:host .ngx-ic-cropper:focus .ngx-ic-move{border:var(--cropper-focus-border, 2px solid dodgerblue)}:host .ngx-ic-cropper:focus .ngx-ic-resize .ngx-ic-square{background:var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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;width:6px;height:6px;box-sizing:content-box;background:var(--cropper-resize-square-bg, #53535C);border:var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper .ngx-ic-resize:hover .ngx-ic-square{background:var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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 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 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-ic-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1377
1354
|
}
|
|
1378
1355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
1379
1356
|
type: Component,
|
|
1380
|
-
args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n [style.background]=\"imageVisible && state.options.backgroundColor\"\n (touchstart)=\"startPinch($event)\"\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n role=\"presentation\"\n *ngIf=\"safeImgDataUrl() as src\"\n [src]=\"src\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n [attr.alt]=\"imageAltText\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n (error)=\"loadImageError($event)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"state.maxSize?.width || 0\"\n [style.height.px]=\"state.maxSize?.height || 0\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div\n class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"state.options.roundCropper\"\n [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n [style.top.px]=\"state.cropper.y1\"\n [style.left.px]=\"state.cropper.x1\"\n [style.width.px]=\"state.cropper.x2 - state.cropper.x1\"\n [style.height.px]=\"state.cropper.y2 - state.cropper.y1\"\n [style.margin-left]=\"state.options.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 role=\"presentation\">\n </div>\n <ng-container\n *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n <span\n class=\"ngx-ic-resize ngx-ic-topleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span
|
|
1381
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }
|
|
1357
|
+
args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n [style.background]=\"imageVisible && state.options.backgroundColor\"\n (touchstart)=\"startPinch($event)\"\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n role=\"presentation\"\n *ngIf=\"safeImgDataUrl() as src\"\n [src]=\"src\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle()\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n [attr.alt]=\"imageAltText\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n (error)=\"loadImageError($event)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"state.maxSize?.width || 0\"\n [style.height.px]=\"state.maxSize?.height || 0\"\n [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div\n class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"state.options.roundCropper\"\n [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n [style.top.px]=\"state.cropper().y1\"\n [style.left.px]=\"state.cropper().x1\"\n [style.width.px]=\"state.cropper().x2 - state.cropper().x1\"\n [style.height.px]=\"state.cropper().y2 - state.cropper().y1\"\n [style.margin-left]=\"state.options.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 role=\"presentation\">\n </div>\n <ng-container\n *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n <span\n class=\"ngx-ic-resize ngx-ic-topleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize ngx-ic-topright\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize ngx-ic-bottomright\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize ngx-ic-bottomleft\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-top\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n ></span>\n\n <span\n class=\"ngx-ic-resize ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-right\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n ></span>\n <span\n class=\"ngx-ic-resize ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n ></span>\n <span\n class=\"ngx-ic-resize ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n >\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span\n class=\"ngx-ic-resize-bar ngx-ic-left\"\n role=\"presentation\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n ></span>\n <span\n class=\"ngx-ic-resize ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n >\n <span class=\"ngx-ic-square\"></span>\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:var(--cropper-color, #53535C);background:transparent;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:var(--cropper-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:hover .ngx-ic-move{border:var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, .5)))}:host .ngx-ic-cropper:focus .ngx-ic-move{border:var(--cropper-focus-border, 2px solid dodgerblue)}:host .ngx-ic-cropper:focus .ngx-ic-resize .ngx-ic-square{background:var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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;width:6px;height:6px;box-sizing:content-box;background:var(--cropper-resize-square-bg, #53535C);border:var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper .ngx-ic-resize:hover .ngx-ic-square{background:var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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 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 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-ic-hidden{display:none}\n"] }]
|
|
1358
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { wrapper: [{
|
|
1382
1359
|
type: ViewChild,
|
|
1383
1360
|
args: ['wrapper', { static: true }]
|
|
1384
1361
|
}], sourceImage: [{
|
|
@@ -1462,20 +1439,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1462
1439
|
args: ['class.ngx-ic-hidden']
|
|
1463
1440
|
}, {
|
|
1464
1441
|
type: Input
|
|
1465
|
-
}], imageCropped: [{
|
|
1466
|
-
type: Output
|
|
1467
|
-
}], startCropImage: [{
|
|
1468
|
-
type: Output
|
|
1469
|
-
}], imageLoaded: [{
|
|
1470
|
-
type: Output
|
|
1471
|
-
}], cropperReady: [{
|
|
1472
|
-
type: Output
|
|
1473
|
-
}], loadImageFailed: [{
|
|
1474
|
-
type: Output
|
|
1475
|
-
}], transformChange: [{
|
|
1476
|
-
type: Output
|
|
1477
|
-
}], cropperChange: [{
|
|
1478
|
-
type: Output
|
|
1479
1442
|
}], alignImageStyle: [{
|
|
1480
1443
|
type: HostBinding,
|
|
1481
1444
|
args: ['style.text-align']
|