ngx-image-cropper
Version:
An image cropper for Angular
493 lines • 94.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, output, signal, ViewChild } from '@angular/core';
import { CropperState } from './cropper.state';
import { MoveTypes } from '../interfaces/move-start.interface';
import { CropService } from '../services/crop.service';
import { LoadImageService } from '../services/load-image.service';
import { getEventForKey, getInvertedPositionForKey, getPositionForKey } from '../utils/keyboard.utils';
import { first, takeUntil } from 'rxjs/operators';
import { fromEvent, merge, Subject } from 'rxjs';
import { NgIf } from '@angular/common';
import { checkCropperPosition, checkCropperWithinMaxSizeBounds, getClientX, getClientY, moveCropper, resizeCropper } from '../utils/cropper-position.utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
export class ImageCropperComponent {
get alignImageStyle() {
return this.state.options.alignImage;
}
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.pinchStart$ = new Subject();
this.cropService = new CropService();
this.loadImageService = new LoadImageService();
this.setImageMaxSizeRetries = 0;
this.resizedWhileHidden = false;
this.moveTypes = MoveTypes;
this.state = new CropperState();
this.safeImgDataUrl = signal(undefined);
this.safeTransformStyle = signal(undefined);
this.marginLeft = '0px';
this.imageVisible = false;
this.allowMoveImage = false;
this.checkImageType = true;
this.disabled = false;
this.hidden = false;
this.imageCropped = output();
this.startCropImage = output();
this.imageLoaded = output();
this.cropperReady = output();
this.loadImageFailed = output();
this.transformChange = output();
this.cropperChange = output();
this.reset();
}
ngOnInit() {
this.state.stepSize = this.initialStepSize || this.state.stepSize;
}
ngOnChanges(changes) {
const previousCropperPosition = this.state.cropper();
const previousTransform = this.state.transform;
const previousBackgroundColor = this.state.options.backgroundColor;
this.state.setOptionsFromChanges(changes);
this.onChangesInputImage(changes);
if (changes['transform'] && this.transform) {
this.state.transform = this.transform;
this.setCssTransform();
}
if (!this.state.loadedImage?.transformed.image.complete || !this.state.maxSize) {
return;
}
if ((this.containWithinAspectRatio && changes['aspectRatio']) || changes['containWithinAspectRatio'] || changes['canvasRotation']) {
this.loadImageService
.transformLoadedImage(this.state.loadedImage, this.state)
.then((res) => this.setLoadedImage(res))
.catch((err) => this.loadImageError(err));
return;
}
if (changes['cropper'] && this.cropper) {
this.state.cropper.set(checkCropperPosition(this.cropper, this.state, true));
}
const cropperChanged = !this.state.equalsCropperPosition(previousCropperPosition);
if (cropperChanged && (!this.cropper || !this.state.equalsCropperPosition(this.cropper))) {
this.cropperChange.emit(this.state.cropper());
}
if (cropperChanged
|| !this.state.equalsTransform(previousTransform)
|| this.state.options.backgroundColor !== previousBackgroundColor) {
this.doAutoCrop();
}
if (changes['hidden'] && this.resizedWhileHidden && !this.hidden) {
setTimeout(() => {
this.onResize();
this.resizedWhileHidden = false;
});
}
}
onChangesInputImage(changes) {
if (changes['imageChangedEvent'] || changes['imageURL'] || changes['imageBase64'] || changes['imageFile']) {
this.reset();
}
if (changes['imageChangedEvent'] && this.isValidImageChangedEvent()) {
this.loadImageFile(this.imageChangedEvent.target.files[0]);
}
if (changes['imageURL'] && this.imageURL) {
this.loadImageFromURL(this.imageURL);
}
if (changes['imageBase64'] && this.imageBase64) {
this.loadBase64Image(this.imageBase64);
}
if (changes['imageFile'] && this.imageFile) {
this.loadImageFile(this.imageFile);
}
}
isValidImageChangedEvent() {
const files = this.imageChangedEvent?.target?.files;
return files instanceof FileList && files.length > 0;
}
reset() {
this.state.loadedImage = undefined;
this.state.maxSize.set({ width: 0, height: 0 });
this.imageVisible = false;
}
loadImageFile(file) {
this.loadImageService
.loadImageFile(file, this.state)
.then((res) => this.setLoadedImage(res))
.catch((err) => this.loadImageError(err));
}
loadBase64Image(imageBase64) {
this.loadImageService
.loadBase64Image(imageBase64, this.state)
.then((res) => this.setLoadedImage(res))
.catch((err) => this.loadImageError(err));
}
loadImageFromURL(url) {
this.loadImageService
.loadImageFromURL(url, this.state)
.then((res) => this.setLoadedImage(res))
.catch((err) => this.loadImageError(err));
}
setLoadedImage(loadedImage) {
this.state.loadedImage = loadedImage;
this.safeImgDataUrl.set(this.sanitizer.bypassSecurityTrustResourceUrl(loadedImage.transformed.objectUrl));
}
loadImageError(error) {
console.error(error);
this.loadImageFailed.emit();
}
setCssTransform() {
const translateUnit = this.state.transform?.translateUnit || '%';
this.safeTransformStyle.set(this.sanitizer.bypassSecurityTrustStyle(`translate(${this.state.transform.translateH || 0}${translateUnit}, ${this.state.transform.translateV || 0}${translateUnit})` +
' scaleX(' + (this.state.transform.scale || 1) * (this.state.transform.flipH ? -1 : 1) + ')' +
' scaleY(' + (this.state.transform.scale || 1) * (this.state.transform.flipV ? -1 : 1) + ')' +
' rotate(' + (this.state.transform.rotate || 0) + 'deg)'));
}
imageLoadedInView() {
if (this.state.loadedImage != null) {
this.imageLoaded.emit(this.state.loadedImage);
this.setImageMaxSizeRetries = 0;
setTimeout(() => this.checkImageMaxSizeRecursively());
}
}
checkImageMaxSizeRecursively() {
if (this.setImageMaxSizeRetries > 40) {
this.loadImageFailed.emit();
}
else if (this.sourceImageLoaded()) {
this.setMaxSize();
if (this.cropper && (!this.maintainAspectRatio || this.state.aspectRatioIsCorrect())) {
this.state.cropper.set(checkCropperPosition(this.cropper, this.state, true));
this.emitCropperPositionChange(this.cropper);
}
else {
this.state.cropper.set(checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true));
this.cropperChange.emit(this.state.cropper());
}
this.imageVisible = true;
this.cropperReady.emit(this.state.maxSize());
this.doAutoCrop();
}
else {
this.setImageMaxSizeRetries++;
setTimeout(() => this.checkImageMaxSizeRecursively(), 50);
}
}
sourceImageLoaded() {
return this.sourceImage?.nativeElement?.offsetWidth > 1;
}
onResize() {
if (!this.state.loadedImage) {
return;
}
if (this.hidden) {
this.resizedWhileHidden = true;
}
else {
const oldMaxSize = this.state.maxSize();
this.setMaxSize();
this.state.resizeCropperPosition(oldMaxSize);
}
}
keyboardAccess(event) {
this.changeKeyboardStepSize(event);
this.keyboardMoveCropper(event);
}
changeKeyboardStepSize(event) {
const key = +event.key;
if (key >= 1 && key <= 9) {
this.state.stepSize = key;
}
}
keyboardMoveCropper(event) {
const keyboardWhiteList = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'];
if (!(keyboardWhiteList.includes(event.key))) {
return;
}
const moveType = event.shiftKey ? MoveTypes.Resize : MoveTypes.Move;
const position = event.altKey ? getInvertedPositionForKey(event.key) : getPositionForKey(event.key);
const moveEvent = getEventForKey(event.key, this.state.stepSize);
event.preventDefault();
event.stopPropagation();
this.moveStart = {
type: moveType,
position,
clientX: 0,
clientY: 0,
transform: this.state.transform,
cropper: this.state.cropper()
};
this.handleMouseMove(moveEvent);
this.handleMouseUp();
}
startMove(event, moveType, position = null) {
if (this.disabled
|| this.moveStart && this.moveStart.type === MoveTypes.Pinch
|| moveType === MoveTypes.Drag && !this.allowMoveImage) {
return;
}
if ('preventDefault' in event) {
event.preventDefault();
}
this.moveStart = {
type: moveType,
position,
clientX: getClientX(event),
clientY: getClientY(event),
transform: this.state.transform,
cropper: this.state.cropper()
};
this.initMouseMove();
}
initMouseMove() {
merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).pipe(takeUntil(merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend'), this.pinchStart$).pipe(first()))).subscribe({
next: (event) => this.handleMouseMove(event),
complete: () => this.handleMouseUp()
});
}
handleMouseMove(event) {
if (!this.moveStart) {
return;
}
if ('stopPropagation' in event) {
event.stopPropagation();
}
if ('preventDefault' in event) {
event.preventDefault();
}
if (this.moveStart.type === MoveTypes.Move) {
this.state.cropper.set(checkCropperWithinMaxSizeBounds(moveCropper(event, this.moveStart), this.state, true));
}
else if (this.moveStart.type === MoveTypes.Resize) {
if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
this.state.cropper.set(checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false));
}
}
else if (this.moveStart.type === MoveTypes.Drag) {
const diffX = getClientX(event) - this.moveStart.clientX;
const diffY = getClientY(event) - this.moveStart.clientY;
this.state.transform = {
...this.state.transform,
translateH: (this.moveStart.transform?.translateH || 0) + diffX,
translateV: (this.moveStart.transform?.translateV || 0) + diffY
};
this.setCssTransform();
}
}
handleMouseUp() {
if (!this.moveStart || this.moveStart.type === MoveTypes.Pinch) {
return;
}
if (!this.state.equalsCropperPosition(this.moveStart.cropper)
|| this.moveStart.transform && !this.state.equalsTransform(this.moveStart.transform)) {
if (this.moveStart.type === MoveTypes.Drag) {
this.transformChange.emit(this.state.transform);
}
else {
this.cropperChange.emit(this.state.cropper());
}
this.doAutoCrop();
}
this.moveStart = undefined;
}
startPinch(event) {
if (this.disabled || !this.sourceImageLoaded() || event.touches.length < 2) {
return;
}
if ('preventDefault' in event) {
event.preventDefault();
}
const cropper = this.state.cropper();
this.moveStart = {
type: MoveTypes.Pinch,
position: 'center',
clientX: cropper.x1 + (cropper.x2 - cropper.x1) / 2,
clientY: cropper.y1 + (cropper.y2 - cropper.y1) / 2,
cropper: cropper
};
this.initPinch();
}
initPinch() {
this.pinchStart$.next();
fromEvent(document, 'touchmove')
.pipe(takeUntil(fromEvent(document, 'touchend')))
.subscribe({
next: (event) => this.handlePinchMove(event),
complete: () => this.handlePinchStop()
});
}
handlePinchMove(event) {
if (!this.moveStart) {
return;
}
if (event.preventDefault) {
event.preventDefault();
}
if (this.moveStart.type === MoveTypes.Pinch) {
if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
this.state.cropper.set(checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false));
}
}
}
handlePinchStop() {
if (!this.moveStart) {
return;
}
if (!this.state.equalsCropperPosition(this.moveStart.cropper)) {
this.emitCropperPositionChange(this.moveStart.cropper);
this.doAutoCrop();
}
this.moveStart = undefined;
}
setMaxSize() {
if (this.sourceImage) {
const sourceImageStyle = getComputedStyle(this.sourceImage.nativeElement);
this.state.setMaxSize(parseFloat(sourceImageStyle.width), parseFloat(sourceImageStyle.height));
this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.state.maxSize().width / 2 + 'px)');
}
}
emitCropperPositionChange(previousPosition) {
if (!this.state.equalsCropperPosition(previousPosition)) {
this.cropperChange.emit(this.state.cropper());
}
}
doAutoCrop() {
if (this.state.options.autoCrop) {
void this.crop();
}
}
crop(output = this.state.options.output) {
if (this.state.loadedImage?.transformed?.image != null) {
this.startCropImage.emit();
if (output === 'blob') {
return this.cropToBlob();
}
else if (output === 'base64') {
return this.cropToBase64();
}
}
return null;
}
cropToBlob() {
return new Promise(async (resolve, reject) => {
const result = await this.cropService.crop(this.state.toCropInput(), 'blob');
if (result) {
this.imageCropped.emit(result);
resolve(result);
}
else {
reject('Crop image failed');
}
});
}
cropToBase64() {
const result = this.cropService.crop(this.state.toCropInput(), 'base64');
if (result) {
this.imageCropped.emit(result);
return result;
}
return null;
}
resetCropperPosition() {
this.state.cropper.set(checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true));
this.cropperChange.emit(this.state.cropper());
}
ngOnDestroy() {
this.pinchStart$.complete();
}
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 }); }
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{display:inline;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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageCropperComponent, decorators: [{
type: Component,
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{display:inline;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"] }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { wrapper: [{
type: ViewChild,
args: ['wrapper', { static: true }]
}], sourceImage: [{
type: ViewChild,
args: ['sourceImage', { static: false }]
}], imageChangedEvent: [{
type: Input
}], imageURL: [{
type: Input
}], imageBase64: [{
type: Input
}], imageFile: [{
type: Input
}], imageAltText: [{
type: Input
}], options: [{
type: Input
}], cropperFrameAriaLabel: [{
type: Input
}], output: [{
type: Input
}], format: [{
type: Input
}], autoCrop: [{
type: Input
}], cropper: [{
type: Input
}], transform: [{
type: Input
}], maintainAspectRatio: [{
type: Input
}], aspectRatio: [{
type: Input
}], resetCropOnAspectRatioChange: [{
type: Input
}], resizeToWidth: [{
type: Input
}], resizeToHeight: [{
type: Input
}], cropperMinWidth: [{
type: Input
}], cropperMinHeight: [{
type: Input
}], cropperMaxHeight: [{
type: Input
}], cropperMaxWidth: [{
type: Input
}], cropperStaticWidth: [{
type: Input
}], cropperStaticHeight: [{
type: Input
}], canvasRotation: [{
type: Input
}], initialStepSize: [{
type: Input
}], roundCropper: [{
type: Input
}], onlyScaleDown: [{
type: Input
}], imageQuality: [{
type: Input
}], backgroundColor: [{
type: Input
}], containWithinAspectRatio: [{
type: Input
}], hideResizeSquares: [{
type: Input
}], allowMoveImage: [{
type: Input
}], checkImageType: [{
type: Input
}], alignImage: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.disabled']
}, {
type: Input
}], hidden: [{
type: HostBinding,
args: ['class.ngx-ic-hidden']
}, {
type: Input
}], alignImageStyle: [{
type: HostBinding,
args: ['style.text-align']
}], onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtY3JvcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaW1hZ2UtY3JvcHBlci9zcmMvbGliL2NvbXBvbmVudC9pbWFnZS1jcm9wcGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1pbWFnZS1jcm9wcGVyL3NyYy9saWIvY29tcG9uZW50L2ltYWdlLWNyb3BwZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBSUwsTUFBTSxFQUNOLE1BQU0sRUFFTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFZdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQVksTUFBTSxvQ0FBb0MsQ0FBQztBQUN6RSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDbEUsT0FBTyxFQUFFLGNBQWMsRUFBRSx5QkFBeUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZHLE9BQU8sRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUV2QyxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3BCLCtCQUErQixFQUMvQixVQUFVLEVBQ1YsVUFBVSxFQUNWLFdBQVcsRUFDWCxhQUFhLEVBQ2QsTUFBTSxpQ0FBaUMsQ0FBQzs7O0FBVXpDLE1BQU0sT0FBTyxxQkFBcUI7SUFzRWhDLElBQ0ksZUFBZTtRQUNqQixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQztJQUN2QyxDQUFDO0lBRUQsWUFDVSxTQUF1QjtRQUF2QixjQUFTLEdBQVQsU0FBUyxDQUFjO1FBMUVoQixnQkFBVyxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFDbEMsZ0JBQVcsR0FBRyxJQUFJLFdBQVcsRUFBRSxDQUFDO1FBQ2hDLHFCQUFnQixHQUFHLElBQUksZ0JBQWdCLEVBQUUsQ0FBQztRQUVuRCwyQkFBc0IsR0FBRyxDQUFDLENBQUM7UUFFM0IsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBRWhCLGNBQVMsR0FBRyxTQUFTLENBQUM7UUFDdEIsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFckMsbUJBQWMsR0FBRyxNQUFNLENBQStCLFNBQVMsQ0FBQyxDQUFDO1FBQ2pFLHVCQUFrQixHQUFHLE1BQU0sQ0FBaUMsU0FBUyxDQUFDLENBQUM7UUFDaEYsZUFBVSxHQUF1QixLQUFLLENBQUM7UUFDdkMsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFxQ1osbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFDdkIsbUJBQWMsR0FBRyxJQUFJLENBQUM7UUFJdEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRWYsaUJBQVksR0FBRyxNQUFNLEVBQXFCLENBQUM7UUFDM0MsbUJBQWMsR0FBRyxNQUFNLEVBQVEsQ0FBQztRQUNoQyxnQkFBVyxHQUFHLE1BQU0sRUFBZSxDQUFDO1FBQ3BDLGlCQUFZLEdBQUcsTUFBTSxFQUFjLENBQUM7UUFDcEMsb0JBQWUsR0FBRyxNQUFNLEVBQVEsQ0FBQztRQUNqQyxvQkFBZSxHQUFHLE1BQU0sRUFBa0IsQ0FBQztRQUMzQyxrQkFBYSxHQUFHLE1BQU0sRUFBbUIsQ0FBQztRQVVqRCxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDZixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxlQUFlLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUM7SUFDcEUsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLHVCQUF1QixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDckQsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQztRQUMvQyxNQUFNLHVCQUF1QixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQztRQUVuRSxJQUFJLENBQUMsS0FBSyxDQUFDLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVsQyxJQUFJLE9BQU8sQ0FBQyxXQUFXLENBQUMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUN0QyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDekIsQ0FBQztRQUVELElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsS0FBSyxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDL0UsT0FBTztRQUNULENBQUM7UUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLHdCQUF3QixJQUFJLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFJLE9BQU8sQ0FBQywwQkFBMEIsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFLENBQUM7WUFDbEksSUFBSSxDQUFDLGdCQUFnQjtpQkFDbEIsb0JBQW9CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQztpQkFDeEQsSUFBSSxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxDQUFDO2lCQUN2QyxLQUFLLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztZQUM1QyxPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUN2QyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDL0UsQ0FBQztRQUNELE1BQU0sY0FBYyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxxQkFBcUIsQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDO1FBQ2xGLElBQUksY0FBYyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ3pGLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQztRQUNoRCxDQUFDO1FBQ0QsSUFBSSxjQUFjO2VBQ2IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQztlQUM5QyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxlQUFlLEtBQUssdUJBQXVCLEVBQUUsQ0FBQztZQUNwRSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDcEIsQ0FBQztRQUVELElBQUksT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLElBQUksQ0FBQyxrQkFBa0IsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNqRSxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztnQkFDaEIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLEtBQUssQ0FBQztZQUNsQyxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBRU8sbUJBQW1CLENBQUMsT0FBc0I7UUFDaEQsSUFBSSxPQUFPLENBQUMsbUJBQW1CLENBQUMsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLElBQUksT0FBTyxDQUFDLGFBQWEsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQzFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNmLENBQUM7UUFDRCxJQUFJLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxFQUFFLENBQUM7WUFDcEUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzdELENBQUM7UUFDRCxJQUFJLE9BQU8sQ0FBQyxVQUFVLENBQUMsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDekMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN2QyxDQUFDO1FBQ0QsSUFBSSxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQy9DLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3pDLENBQUM7UUFDRCxJQUFJLE9BQU8sQ0FBQyxXQUFXLENBQUMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDckMsQ0FBQztJQUNILENBQUM7SUFFTyx3QkFBd0I7UUFLOUIsTUFBTSxLQUFLLEdBQUksSUFBSSxDQUFDLGlCQUF5QixFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUM7UUFDN0QsT0FBTyxLQUFLLFlBQVksUUFBUSxJQUFJLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7SUFFTyxLQUFLO1FBQ1gsSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDO1FBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFLEtBQUssRUFBRSxDQUFDLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDaEQsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDNUIsQ0FBQztJQUVPLGFBQWEsQ0FBQyxJQUFVO1FBQzlCLElBQUksQ0FBQyxnQkFBZ0I7YUFDbEIsYUFBYSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO2FBQy9CLElBQUksQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUN2QyxLQUFLLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU8sZUFBZSxDQUFDLFdBQW1CO1FBQ3pDLElBQUksQ0FBQyxnQkFBZ0I7YUFDbEIsZUFBZSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO2FBQ3hDLElBQUksQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUN2QyxLQUFLLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU8sZ0JBQWdCLENBQUMsR0FBVztRQUNsQyxJQUFJLENBQUMsZ0JBQWdCO2FBQ2xCLGdCQUFnQixDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO2FBQ2pDLElBQUksQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUN2QyxLQUFLLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU8sY0FBYyxDQUFDLFdBQXdCO1FBQzdDLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztRQUNyQyxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLDhCQUE4QixDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUM1RyxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQWM7UUFDM0IsT0FBTyxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFTyxlQUFlO1FBQ3JCLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxFQUFFLGFBQWEsSUFBSSxHQUFHLENBQUM7UUFDakUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLHdCQUF3QixDQUNqRSxhQUFhLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFVBQVUsSUFBSSxDQUFDLEdBQUcsYUFBYSxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFVBQVUsSUFBSSxDQUFDLEdBQUcsYUFBYSxHQUFHO1lBQzdILFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLEtBQUssSUFBSSxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUc7WUFDNUYsVUFBVSxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsS0FBSyxJQUFJLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRztZQUM1RixVQUFVLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUN6RCxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsaUJBQWlCO1FBQ2YsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsSUFBSSxJQUFJLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQzlDLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxDQUFDLENBQUM7WUFDaEMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyw0QkFBNEIsRUFBRSxDQUFDLENBQUM7UUFDeEQsQ0FBQztJQUNILENBQUM7SUFFTyw0QkFBNEI7UUFDbEMsSUFBSSxJQUFJLENBQUMsc0JBQXNCLEdBQUcsRUFBRSxFQUFFLENBQUM7WUFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUM5QixDQUFDO2FBQU0sSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUUsRUFBRSxDQUFDO1lBQ3BDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNsQixJQUFJLElBQUksQ0FBQyxPQUFPLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsSUFBSSxJQUFJLENBQ