ngx-image-cropper 7.0.2 → 7.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 +8 -6
- package/esm2020/lib/component/image-cropper.component.mjs +35 -35
- package/esm2020/lib/interfaces/cropper.settings.mjs +2 -1
- package/esm2020/lib/services/crop.service.mjs +13 -15
- package/esm2020/lib/services/cropper-position.service.mjs +11 -12
- package/fesm2015/ngx-image-cropper.mjs +57 -59
- package/fesm2015/ngx-image-cropper.mjs.map +1 -1
- package/fesm2020/ngx-image-cropper.mjs +57 -59
- package/fesm2020/ngx-image-cropper.mjs.map +1 -1
- package/lib/component/image-cropper.component.d.ts +5 -3
- package/lib/interfaces/cropper.settings.d.ts +1 -0
- package/lib/services/crop.service.d.ts +3 -4
- package/lib/services/cropper-position.service.d.ts +1 -1
- package/package.json +2 -1
|
@@ -3,6 +3,7 @@ import * as i0 from '@angular/core';
|
|
|
3
3
|
import { Injectable, EventEmitter, isDevMode, Component, ChangeDetectionStrategy, Optional, Inject, ViewChild, Input, HostBinding, Output, HostListener, NgModule } from '@angular/core';
|
|
4
4
|
import * as i4 from '@angular/platform-browser';
|
|
5
5
|
import { HAMMER_LOADER } from '@angular/platform-browser';
|
|
6
|
+
import { merge, fromEvent, takeUntil, first } from 'rxjs';
|
|
6
7
|
import * as i5 from '@angular/common';
|
|
7
8
|
import { CommonModule } from '@angular/common';
|
|
8
9
|
|
|
@@ -33,6 +34,7 @@ class CropperSettings {
|
|
|
33
34
|
this.containWithinAspectRatio = false;
|
|
34
35
|
this.hideResizeSquares = false;
|
|
35
36
|
this.alignImage = 'center';
|
|
37
|
+
this.cropperFrameAriaLabel = 'Crop photo';
|
|
36
38
|
// Internal
|
|
37
39
|
this.cropperScaledMinWidth = 20;
|
|
38
40
|
this.cropperScaledMinHeight = 20;
|
|
@@ -187,8 +189,8 @@ function percentage(percent, totalValue) {
|
|
|
187
189
|
}
|
|
188
190
|
|
|
189
191
|
class CropService {
|
|
190
|
-
crop(
|
|
191
|
-
const imagePosition = this.getImagePosition(
|
|
192
|
+
crop(loadedImage, cropper, settings, output, maxSize) {
|
|
193
|
+
const imagePosition = this.getImagePosition(loadedImage, cropper, settings, maxSize);
|
|
192
194
|
const width = imagePosition.x2 - imagePosition.x1;
|
|
193
195
|
const height = imagePosition.y2 - imagePosition.y1;
|
|
194
196
|
const cropCanvas = document.createElement('canvas');
|
|
@@ -204,7 +206,7 @@ class CropService {
|
|
|
204
206
|
}
|
|
205
207
|
const scaleX = (settings.transform.scale || 1) * (settings.transform.flipH ? -1 : 1);
|
|
206
208
|
const scaleY = (settings.transform.scale || 1) * (settings.transform.flipV ? -1 : 1);
|
|
207
|
-
const { translateH, translateV } = this.getCanvasTranslate(
|
|
209
|
+
const { translateH, translateV } = this.getCanvasTranslate(loadedImage, settings, maxSize);
|
|
208
210
|
const transformedImage = loadedImage.transformed;
|
|
209
211
|
ctx.setTransform(scaleX, 0, 0, scaleY, transformedImage.size.width / 2 + translateH, transformedImage.size.height / 2 + translateV);
|
|
210
212
|
ctx.translate(-imagePosition.x1 / scaleX, -imagePosition.y1 / scaleY);
|
|
@@ -216,7 +218,7 @@ class CropService {
|
|
|
216
218
|
cropperPosition: Object.assign({}, cropper)
|
|
217
219
|
};
|
|
218
220
|
if (settings.containWithinAspectRatio) {
|
|
219
|
-
result.offsetImagePosition = this.getOffsetImagePosition(
|
|
221
|
+
result.offsetImagePosition = this.getOffsetImagePosition(loadedImage, cropper, settings, maxSize);
|
|
220
222
|
}
|
|
221
223
|
const resizeRatio = this.getResizeRatio(width, height, settings);
|
|
222
224
|
if (resizeRatio !== 1) {
|
|
@@ -243,9 +245,9 @@ class CropService {
|
|
|
243
245
|
return output;
|
|
244
246
|
});
|
|
245
247
|
}
|
|
246
|
-
getCanvasTranslate(
|
|
248
|
+
getCanvasTranslate(loadedImage, settings, maxSize) {
|
|
247
249
|
if (settings.transform.translateUnit === 'px') {
|
|
248
|
-
const ratio = this.getRatio(
|
|
250
|
+
const ratio = this.getRatio(loadedImage, maxSize);
|
|
249
251
|
return {
|
|
250
252
|
translateH: (settings.transform.translateH || 0) * ratio,
|
|
251
253
|
translateV: (settings.transform.translateV || 0) * ratio
|
|
@@ -258,12 +260,11 @@ class CropService {
|
|
|
258
260
|
};
|
|
259
261
|
}
|
|
260
262
|
}
|
|
261
|
-
getRatio(
|
|
262
|
-
|
|
263
|
-
return loadedImage.transformed.size.width / sourceImageElement.offsetWidth;
|
|
263
|
+
getRatio(loadedImage, maxSize) {
|
|
264
|
+
return loadedImage.transformed.size.width / maxSize.width;
|
|
264
265
|
}
|
|
265
|
-
getImagePosition(
|
|
266
|
-
const ratio = this.getRatio(
|
|
266
|
+
getImagePosition(loadedImage, cropper, settings, maxSize) {
|
|
267
|
+
const ratio = this.getRatio(loadedImage, maxSize);
|
|
267
268
|
const out = {
|
|
268
269
|
x1: Math.round(cropper.x1 * ratio),
|
|
269
270
|
y1: Math.round(cropper.y1 * ratio),
|
|
@@ -278,10 +279,9 @@ class CropService {
|
|
|
278
279
|
}
|
|
279
280
|
return out;
|
|
280
281
|
}
|
|
281
|
-
getOffsetImagePosition(
|
|
282
|
+
getOffsetImagePosition(loadedImage, cropper, settings, maxSize) {
|
|
282
283
|
const canvasRotation = settings.canvasRotation + loadedImage.exifTransform.rotate;
|
|
283
|
-
const
|
|
284
|
-
const ratio = loadedImage.transformed.size.width / sourceImageElement.offsetWidth;
|
|
284
|
+
const ratio = this.getRatio(loadedImage, maxSize);
|
|
285
285
|
let offsetX;
|
|
286
286
|
let offsetY;
|
|
287
287
|
if (canvasRotation % 2) {
|
|
@@ -334,40 +334,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
334
334
|
}] });
|
|
335
335
|
|
|
336
336
|
class CropperPositionService {
|
|
337
|
-
resetCropperPosition(sourceImage, cropperPosition, settings) {
|
|
337
|
+
resetCropperPosition(sourceImage, cropperPosition, settings, maxSize) {
|
|
338
338
|
if (!(sourceImage === null || sourceImage === void 0 ? void 0 : sourceImage.nativeElement)) {
|
|
339
339
|
return;
|
|
340
340
|
}
|
|
341
|
-
const sourceImageElement = sourceImage.nativeElement;
|
|
342
341
|
if (settings.cropperStaticHeight && settings.cropperStaticWidth) {
|
|
343
342
|
cropperPosition.x1 = 0;
|
|
344
|
-
cropperPosition.x2 =
|
|
345
|
-
settings.cropperStaticWidth :
|
|
343
|
+
cropperPosition.x2 = maxSize.width > settings.cropperStaticWidth ?
|
|
344
|
+
settings.cropperStaticWidth : maxSize.width;
|
|
346
345
|
cropperPosition.y1 = 0;
|
|
347
|
-
cropperPosition.y2 =
|
|
348
|
-
settings.cropperStaticHeight :
|
|
346
|
+
cropperPosition.y2 = maxSize.height > settings.cropperStaticHeight ?
|
|
347
|
+
settings.cropperStaticHeight : maxSize.height;
|
|
349
348
|
}
|
|
350
349
|
else {
|
|
351
|
-
const cropperWidth = Math.min(settings.cropperScaledMaxWidth,
|
|
352
|
-
const cropperHeight = Math.min(settings.cropperScaledMaxHeight,
|
|
350
|
+
const cropperWidth = Math.min(settings.cropperScaledMaxWidth, maxSize.width);
|
|
351
|
+
const cropperHeight = Math.min(settings.cropperScaledMaxHeight, maxSize.height);
|
|
353
352
|
if (!settings.maintainAspectRatio) {
|
|
354
353
|
cropperPosition.x1 = 0;
|
|
355
354
|
cropperPosition.x2 = cropperWidth;
|
|
356
355
|
cropperPosition.y1 = 0;
|
|
357
356
|
cropperPosition.y2 = cropperHeight;
|
|
358
357
|
}
|
|
359
|
-
else if (
|
|
358
|
+
else if (maxSize.width / settings.aspectRatio < maxSize.height) {
|
|
360
359
|
cropperPosition.x1 = 0;
|
|
361
360
|
cropperPosition.x2 = cropperWidth;
|
|
362
361
|
const cropperHeightWithAspectRatio = cropperWidth / settings.aspectRatio;
|
|
363
|
-
cropperPosition.y1 = (
|
|
362
|
+
cropperPosition.y1 = (maxSize.height - cropperHeightWithAspectRatio) / 2;
|
|
364
363
|
cropperPosition.y2 = cropperPosition.y1 + cropperHeightWithAspectRatio;
|
|
365
364
|
}
|
|
366
365
|
else {
|
|
367
366
|
cropperPosition.y1 = 0;
|
|
368
367
|
cropperPosition.y2 = cropperHeight;
|
|
369
368
|
const cropperWidthWithAspectRatio = cropperHeight * settings.aspectRatio;
|
|
370
|
-
cropperPosition.x1 = (
|
|
369
|
+
cropperPosition.x1 = (maxSize.width - cropperWidthWithAspectRatio) / 2;
|
|
371
370
|
cropperPosition.x2 = cropperPosition.x1 + cropperWidthWithAspectRatio;
|
|
372
371
|
}
|
|
373
372
|
}
|
|
@@ -803,6 +802,7 @@ class ImageCropperComponent {
|
|
|
803
802
|
};
|
|
804
803
|
this.moveTypes = MoveTypes;
|
|
805
804
|
this.imageVisible = false;
|
|
805
|
+
this.cropperFrameAriaLabel = this.settings.cropperFrameAriaLabel;
|
|
806
806
|
this.output = this.settings.output;
|
|
807
807
|
this.format = this.settings.format;
|
|
808
808
|
this.transform = {};
|
|
@@ -1017,8 +1017,9 @@ class ImageCropperComponent {
|
|
|
1017
1017
|
this.resizedWhileHidden = true;
|
|
1018
1018
|
}
|
|
1019
1019
|
else {
|
|
1020
|
-
this.
|
|
1020
|
+
const oldMaxSize = Object.assign({}, this.maxSize);
|
|
1021
1021
|
this.setMaxSize();
|
|
1022
|
+
this.resizeCropperPosition(oldMaxSize);
|
|
1022
1023
|
this.setCropperScaledMinSize();
|
|
1023
1024
|
this.setCropperScaledMaxSize();
|
|
1024
1025
|
}
|
|
@@ -1041,17 +1042,16 @@ class ImageCropperComponent {
|
|
|
1041
1042
|
}
|
|
1042
1043
|
});
|
|
1043
1044
|
}
|
|
1044
|
-
resizeCropperPosition() {
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
this.cropper.
|
|
1048
|
-
this.cropper.
|
|
1049
|
-
this.cropper.
|
|
1050
|
-
this.cropper.y2 = this.cropper.y2 * sourceImageElement.offsetHeight / this.maxSize.height;
|
|
1045
|
+
resizeCropperPosition(oldMaxSize) {
|
|
1046
|
+
if (oldMaxSize.width !== this.maxSize.width || oldMaxSize.height !== this.maxSize.height) {
|
|
1047
|
+
this.cropper.x1 = this.cropper.x1 * this.maxSize.width / oldMaxSize.width;
|
|
1048
|
+
this.cropper.x2 = this.cropper.x2 * this.maxSize.width / oldMaxSize.width;
|
|
1049
|
+
this.cropper.y1 = this.cropper.y1 * this.maxSize.height / oldMaxSize.height;
|
|
1050
|
+
this.cropper.y2 = this.cropper.y2 * this.maxSize.height / oldMaxSize.height;
|
|
1051
1051
|
}
|
|
1052
1052
|
}
|
|
1053
1053
|
resetCropperPosition() {
|
|
1054
|
-
this.cropperPositionService.resetCropperPosition(this.sourceImage, this.cropper, this.settings);
|
|
1054
|
+
this.cropperPositionService.resetCropperPosition(this.sourceImage, this.cropper, this.settings, this.maxSize);
|
|
1055
1055
|
this.doAutoCrop();
|
|
1056
1056
|
this.imageVisible = true;
|
|
1057
1057
|
}
|
|
@@ -1076,8 +1076,8 @@ class ImageCropperComponent {
|
|
|
1076
1076
|
event.preventDefault();
|
|
1077
1077
|
event.stopPropagation();
|
|
1078
1078
|
this.startMove({ clientX: 0, clientY: 0 }, moveType, position);
|
|
1079
|
-
this.
|
|
1080
|
-
this.
|
|
1079
|
+
this.handleMouseMove(moveEvent);
|
|
1080
|
+
this.handleMouseUp();
|
|
1081
1081
|
}
|
|
1082
1082
|
startMove(event, moveType, position = null) {
|
|
1083
1083
|
var _a, _b;
|
|
@@ -1090,6 +1090,14 @@ class ImageCropperComponent {
|
|
|
1090
1090
|
event.preventDefault();
|
|
1091
1091
|
}
|
|
1092
1092
|
this.moveStart = Object.assign({ active: true, type: moveType, position, transform: Object.assign({}, this.transform), clientX: this.cropperPositionService.getClientX(event), clientY: this.cropperPositionService.getClientY(event) }, this.cropper);
|
|
1093
|
+
this.initMouseMove();
|
|
1094
|
+
}
|
|
1095
|
+
initMouseMove() {
|
|
1096
|
+
merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).pipe(takeUntil(merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend')).pipe(first())))
|
|
1097
|
+
.subscribe({
|
|
1098
|
+
next: (event) => this.handleMouseMove(event),
|
|
1099
|
+
complete: () => this.handleMouseUp()
|
|
1100
|
+
});
|
|
1093
1101
|
}
|
|
1094
1102
|
startPinch(event) {
|
|
1095
1103
|
if (!this.safeImgDataUrl) {
|
|
@@ -1100,7 +1108,7 @@ class ImageCropperComponent {
|
|
|
1100
1108
|
}
|
|
1101
1109
|
this.moveStart = Object.assign({ active: true, type: MoveTypes.Pinch, position: 'center', clientX: this.cropper.x1 + (this.cropper.x2 - this.cropper.x1) / 2, clientY: this.cropper.y1 + (this.cropper.y2 - this.cropper.y1) / 2 }, this.cropper);
|
|
1102
1110
|
}
|
|
1103
|
-
|
|
1111
|
+
handleMouseMove(event) {
|
|
1104
1112
|
var _a, _b;
|
|
1105
1113
|
if (this.moveStart.active) {
|
|
1106
1114
|
if (event.stopPropagation) {
|
|
@@ -1125,7 +1133,7 @@ class ImageCropperComponent {
|
|
|
1125
1133
|
this.transform = Object.assign(Object.assign({}, this.transform), { translateH: (((_a = this.moveStart.transform) === null || _a === void 0 ? void 0 : _a.translateH) || 0) + diffX, translateV: (((_b = this.moveStart.transform) === null || _b === void 0 ? void 0 : _b.translateV) || 0) + diffY });
|
|
1126
1134
|
this.setCssTransform();
|
|
1127
1135
|
}
|
|
1128
|
-
this.cd.
|
|
1136
|
+
this.cd.markForCheck();
|
|
1129
1137
|
}
|
|
1130
1138
|
}
|
|
1131
1139
|
onPinch(event) {
|
|
@@ -1140,14 +1148,14 @@ class ImageCropperComponent {
|
|
|
1140
1148
|
this.cropperPositionService.resize(event, this.moveStart, this.cropper, this.maxSize, this.settings);
|
|
1141
1149
|
this.checkCropperPosition(false);
|
|
1142
1150
|
}
|
|
1143
|
-
this.cd.
|
|
1151
|
+
this.cd.markForCheck();
|
|
1144
1152
|
}
|
|
1145
1153
|
}
|
|
1146
1154
|
setMaxSize() {
|
|
1147
1155
|
if (this.sourceImage) {
|
|
1148
|
-
const
|
|
1149
|
-
this.maxSize.width =
|
|
1150
|
-
this.maxSize.height =
|
|
1156
|
+
const sourceImageStyle = getComputedStyle(this.sourceImage.nativeElement);
|
|
1157
|
+
this.maxSize.width = parseFloat(sourceImageStyle.width);
|
|
1158
|
+
this.maxSize.height = parseFloat(sourceImageStyle.height);
|
|
1151
1159
|
this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.maxSize.width / 2 + 'px)');
|
|
1152
1160
|
}
|
|
1153
1161
|
}
|
|
@@ -1216,7 +1224,7 @@ class ImageCropperComponent {
|
|
|
1216
1224
|
this.cropper.y2 = this.maxSize.height;
|
|
1217
1225
|
}
|
|
1218
1226
|
}
|
|
1219
|
-
|
|
1227
|
+
handleMouseUp() {
|
|
1220
1228
|
var _a;
|
|
1221
1229
|
if (this.moveStart.active) {
|
|
1222
1230
|
this.moveStart.active = false;
|
|
@@ -1253,7 +1261,7 @@ class ImageCropperComponent {
|
|
|
1253
1261
|
return null;
|
|
1254
1262
|
}
|
|
1255
1263
|
cropToBlob() {
|
|
1256
|
-
const result = this.cropService.crop(this.
|
|
1264
|
+
const result = this.cropService.crop(this.loadedImage, this.cropper, this.settings, 'blob', this.maxSize);
|
|
1257
1265
|
if (result) {
|
|
1258
1266
|
return Promise.resolve(result)
|
|
1259
1267
|
.then((output) => {
|
|
@@ -1264,7 +1272,7 @@ class ImageCropperComponent {
|
|
|
1264
1272
|
return null;
|
|
1265
1273
|
}
|
|
1266
1274
|
cropToBase64() {
|
|
1267
|
-
const result = this.cropService.crop(this.
|
|
1275
|
+
const result = this.cropService.crop(this.loadedImage, this.cropper, this.settings, 'base64', this.maxSize);
|
|
1268
1276
|
if (result) {
|
|
1269
1277
|
this.imageCropped.emit(result);
|
|
1270
1278
|
return result;
|
|
@@ -1277,10 +1285,10 @@ class ImageCropperComponent {
|
|
|
1277
1285
|
}
|
|
1278
1286
|
}
|
|
1279
1287
|
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 }, { token: HAMMER_LOADER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1280
|
-
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", imageAltText: "imageAltText", output: "output", 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 [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]=\"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 });
|
|
1288
|
+
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", imageAltText: "imageAltText", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", 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()" }, 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 role=\"presentation\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\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]=\"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 [attr.aria-label]=\"cropperFrameAriaLabel\"\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 role=\"presentation\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span 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 <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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 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: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 });
|
|
1281
1289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
1282
1290
|
type: Component,
|
|
1283
|
-
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 [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]=\"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"] }]
|
|
1291
|
+
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 role=\"presentation\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\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]=\"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 [attr.aria-label]=\"cropperFrameAriaLabel\"\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 role=\"presentation\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span 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 <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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 role=\"presentation\"\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 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: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"] }]
|
|
1284
1292
|
}], ctorParameters: function () {
|
|
1285
1293
|
return [{ type: CropService }, { type: CropperPositionService }, { type: LoadImageService }, { type: i4.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
1286
1294
|
type: Optional
|
|
@@ -1304,6 +1312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1304
1312
|
type: Input
|
|
1305
1313
|
}], imageAltText: [{
|
|
1306
1314
|
type: Input
|
|
1315
|
+
}], cropperFrameAriaLabel: [{
|
|
1316
|
+
type: Input
|
|
1307
1317
|
}], output: [{
|
|
1308
1318
|
type: Input
|
|
1309
1319
|
}], format: [{
|
|
@@ -1384,18 +1394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1384
1394
|
}], onResize: [{
|
|
1385
1395
|
type: HostListener,
|
|
1386
1396
|
args: ['window:resize']
|
|
1387
|
-
}], moveImg: [{
|
|
1388
|
-
type: HostListener,
|
|
1389
|
-
args: ['document:mousemove', ['$event']]
|
|
1390
|
-
}, {
|
|
1391
|
-
type: HostListener,
|
|
1392
|
-
args: ['document:touchmove', ['$event']]
|
|
1393
|
-
}], moveStop: [{
|
|
1394
|
-
type: HostListener,
|
|
1395
|
-
args: ['document:mouseup']
|
|
1396
|
-
}, {
|
|
1397
|
-
type: HostListener,
|
|
1398
|
-
args: ['document:touchend']
|
|
1399
1397
|
}] } });
|
|
1400
1398
|
|
|
1401
1399
|
class ImageCropperModule {
|