@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
110 lines (109 loc) • 6.99 kB
TypeScript
import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeStyle, SafeUrl } from '@angular/platform-browser';
import { CropperOptions, CropperPosition, Dimensions, ImageCroppedEvent, ImageTransform, LoadedImage } from '../interfaces';
import { OutputFormat } from '../interfaces/cropper-options.interface';
import { CropperState } from './cropper.state';
import { MoveTypes, Position } from '../interfaces/move-start.interface';
import { BasicEvent } from '../interfaces/basic-event.interface';
import * as i0 from "@angular/core";
export declare class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
private sanitizer;
private cd;
private zone;
private readonly pinchStart$;
private readonly cropService;
private readonly loadImageService;
private setImageMaxSizeRetries;
private moveStart?;
private resizedWhileHidden;
protected readonly moveTypes: typeof MoveTypes;
protected readonly state: CropperState;
readonly safeImgDataUrl: import("@angular/core").WritableSignal<string | SafeUrl>;
safeTransformStyle?: SafeStyle | string;
marginLeft: SafeStyle | string;
imageVisible: boolean;
wrapper: ElementRef<HTMLDivElement>;
sourceImage: ElementRef<HTMLDivElement>;
imageChangedEvent?: Event | null;
imageURL?: string;
imageBase64?: string;
imageFile?: File;
imageAltText?: string;
options?: Partial<CropperOptions>;
cropperFrameAriaLabel?: string;
output?: 'blob' | 'base64';
format?: OutputFormat;
autoCrop?: boolean;
cropper?: CropperPosition;
transform?: ImageTransform;
maintainAspectRatio?: boolean;
aspectRatio?: number;
resetCropOnAspectRatioChange?: boolean;
resizeToWidth?: number;
resizeToHeight?: number;
cropperMinWidth?: number;
cropperMinHeight?: number;
cropperMaxHeight?: number;
cropperMaxWidth?: number;
cropperStaticWidth?: number;
cropperStaticHeight?: number;
canvasRotation?: number;
initialStepSize?: number;
roundCropper?: boolean;
onlyScaleDown?: boolean;
imageQuality?: number;
backgroundColor?: string;
containWithinAspectRatio?: boolean;
hideResizeSquares?: boolean;
allowMoveImage: boolean;
checkImageType: boolean;
alignImage?: 'left' | 'center';
disabled: boolean;
hidden: boolean;
imageCropped: EventEmitter<ImageCroppedEvent>;
startCropImage: EventEmitter<void>;
imageLoaded: EventEmitter<LoadedImage>;
cropperReady: EventEmitter<Dimensions>;
loadImageFailed: EventEmitter<void>;
transformChange: EventEmitter<ImageTransform>;
cropperChange: EventEmitter<CropperPosition>;
get alignImageStyle(): "center" | "left";
constructor(sanitizer: DomSanitizer, cd: ChangeDetectorRef, zone: NgZone);
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
private onChangesInputImage;
private isValidImageChangedEvent;
private reset;
private loadImageFile;
private loadBase64Image;
private loadImageFromURL;
private setLoadedImage;
loadImageError(error: unknown): void;
private setCssTransform;
imageLoadedInView(): void;
private checkImageMaxSizeRecursively;
private sourceImageLoaded;
onResize(): void;
keyboardAccess(event: KeyboardEvent): void;
private changeKeyboardStepSize;
private keyboardMoveCropper;
startMove(event: Event | BasicEvent, moveType: MoveTypes, position?: Position | null): void;
private initMouseMove;
private handleMouseMove;
private handleMouseUp;
startPinch(event: TouchEvent): void;
private initPinch;
handlePinchMove(event: TouchEvent): void;
handlePinchStop(): void;
private setMaxSize;
private emitCropperPositionChange;
private doAutoCrop;
crop(): ImageCroppedEvent | null;
crop(output: 'base64'): ImageCroppedEvent | null;
crop(output: 'blob'): Promise<ImageCroppedEvent> | null;
private cropToBlob;
private cropToBase64;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ImageCropperComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ImageCropperComponent, "image-cropper", never, { "imageChangedEvent": { "alias": "imageChangedEvent"; "required": false; }; "imageURL": { "alias": "imageURL"; "required": false; }; "imageBase64": { "alias": "imageBase64"; "required": false; }; "imageFile": { "alias": "imageFile"; "required": false; }; "imageAltText": { "alias": "imageAltText"; "required": false; }; "options": { "alias": "options"; "required": false; }; "cropperFrameAriaLabel": { "alias": "cropperFrameAriaLabel"; "required": false; }; "output": { "alias": "output"; "required": false; }; "format": { "alias": "format"; "required": false; }; "autoCrop": { "alias": "autoCrop"; "required": false; }; "cropper": { "alias": "cropper"; "required": false; }; "transform": { "alias": "transform"; "required": false; }; "maintainAspectRatio": { "alias": "maintainAspectRatio"; "required": false; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "resetCropOnAspectRatioChange": { "alias": "resetCropOnAspectRatioChange"; "required": false; }; "resizeToWidth": { "alias": "resizeToWidth"; "required": false; }; "resizeToHeight": { "alias": "resizeToHeight"; "required": false; }; "cropperMinWidth": { "alias": "cropperMinWidth"; "required": false; }; "cropperMinHeight": { "alias": "cropperMinHeight"; "required": false; }; "cropperMaxHeight": { "alias": "cropperMaxHeight"; "required": false; }; "cropperMaxWidth": { "alias": "cropperMaxWidth"; "required": false; }; "cropperStaticWidth": { "alias": "cropperStaticWidth"; "required": false; }; "cropperStaticHeight": { "alias": "cropperStaticHeight"; "required": false; }; "canvasRotation": { "alias": "canvasRotation"; "required": false; }; "initialStepSize": { "alias": "initialStepSize"; "required": false; }; "roundCropper": { "alias": "roundCropper"; "required": false; }; "onlyScaleDown": { "alias": "onlyScaleDown"; "required": false; }; "imageQuality": { "alias": "imageQuality"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "containWithinAspectRatio": { "alias": "containWithinAspectRatio"; "required": false; }; "hideResizeSquares": { "alias": "hideResizeSquares"; "required": false; }; "allowMoveImage": { "alias": "allowMoveImage"; "required": false; }; "checkImageType": { "alias": "checkImageType"; "required": false; }; "alignImage": { "alias": "alignImage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; }, { "imageCropped": "imageCropped"; "startCropImage": "startCropImage"; "imageLoaded": "imageLoaded"; "cropperReady": "cropperReady"; "loadImageFailed": "loadImageFailed"; "transformChange": "transformChange"; "cropperChange": "cropperChange"; }, never, never, true, never>;
}