import * as _angular_core from '@angular/core';
import { OnChanges, OnDestroy, TemplateRef, ElementRef, SimpleChanges } from '@angular/core';
import { SafeResourceUrl } from '@angular/platform-browser';
import { ModalRef } from '@siemens/element-ng/modal';
import { TranslatableString } from '@siemens/element-translate-ng/translate';
import { ImageCropperComponent, ImageCroppedEvent } from 'ngx-image-cropper';
import * as i1 from '@siemens/element-ng/avatar';

declare class SiImageCropperStyleComponent {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiImageCropperStyleComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiImageCropperStyleComponent, "si-image-cropper-style", never, {}, {}, never, ["*"], true, never>;
}

/**
 * A component used to upload, edit, and delete a user's photo. The user can upload
 * a photo either via file browser or a URL to the photo. You can set the source
 * photo with the `sourcePhoto` Data URL input or the `sourcePhotoUrl` URL input.
 * If you already have a cropped image you can set it with the `croppedPhoto` input.
 * Cropping changes are emitted via the `croppedPhotoChange` output.
 */
declare class SiPhotoUploadComponent implements OnChanges, OnDestroy {
    private static idCounter;
    /**
     * Indicate that changing or uploads are disabled.
     *
     * @defaultValue false
     */
    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Optionally disable image cropping.
     *
     * @defaultValue false
     */
    readonly disabledCropping: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Accepted image formats for the file selection dialog.
     *
     * @defaultValue '.png, .jpg, .jpeg'
     *
     * @see
     *
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
     */
    readonly acceptedUploadFormats: _angular_core.InputSignal<string>;
    /**
     * Maximum allowed file size of the uploaded file in kilobytes.
     *
     * @defaultValue 2048
     */
    readonly maxFileSize: _angular_core.InputSignal<number>;
    /**
     * If the uploaded file is of an unsupported type, this
     * error message will be displayed to the user.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`)
     * ```
     */
    readonly uploadErrorWrongType: _angular_core.InputSignal<TranslatableString>;
    /**
     * If the uploaded file exceeds the allowed upload size, this
     * error message will be displayed to the user.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`)
     * ```
     */
    readonly uploadErrorTooBig: _angular_core.InputSignal<TranslatableString>;
    /**
     * Alternative text for the photo.
     *
     * @defaultValue ''
     */
    readonly photoAltText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Alternative text for the photo´s placeholder.
     * The value will be used to calculate the background color when `autoColor` is true.
     *
     * @defaultValue ''
     */
    readonly placeholderAltText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text for the button changing the photo.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`)
     * ```
     */
    readonly changePhotoText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Cropper frame aria label.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`)
     * ```
     */
    readonly cropperFrameAriaLabel: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text for the button uploading a photo.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)
     * ```
     */
    readonly uploadPhotoText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text for the button removing the photo.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`)
     * ```
     */
    readonly removePhotoText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text for the button cancelling the editing process.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`)
     * ```
     */
    readonly cancelEditText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text for the button applying the edited photo.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`)
     * ```
     */
    readonly applyEditText: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text displayed as header of the editing modal.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`)
     * ```
     */
    readonly modalHeader: _angular_core.InputSignal<TranslatableString>;
    /**
     * Text displayed as description of the editing modal.
     */
    readonly modalDescription: _angular_core.InputSignal<TranslatableString | undefined>;
    /**
     * Output format of the edited image.
     *
     * @defaultValue 'jpeg'
     */
    readonly cropperImageFormat: _angular_core.InputSignal<"png" | "jpeg">;
    /**
     * The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...).
     *
     * @defaultValue 1
     */
    readonly cropperAspectRatio: _angular_core.InputSignal<number>;
    /**
     * Whether to keep the width and height of the cropped image equal according
     * to the aspectRatio.
     *
     * @defaultValue true
     */
    readonly cropperMaintainAspectRatio: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * When set to true, padding will be added around the image to make it fit to
     * the aspect ratio. Be aware that this transformation will cause the loaded
     * image to be a png file with an increased base64 string payload.
     *
     * @defaultValue false
     */
    readonly cropperContainWithinAspectRatio: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * The cropper´s width cannot be made smaller than this number of pixels
     * (relative to original image´s size). (0 = disabled).
     *
     * @defaultValue 50
     */
    readonly cropperMinWidth: _angular_core.InputSignal<number>;
    /**
     * The cropper´s height cannot be made smaller than this number of pixels
     * (relative to original image´s size). Will be ignored if
     * `cropperMaintainAspectRatio` is set. (0 = disabled).
     *
     * @defaultValue 50
     */
    readonly cropperMinHeight: _angular_core.InputSignal<number>;
    /**
     * The cropper´s width cannot be made bigger than this number of pixels.
     * Default is 0 (disabled).
     *
     * @defaultValue 0
     */
    readonly cropperMaxWidth: _angular_core.InputSignal<number>;
    /**
     * The cropper´s height cannot be made bigger than this number of pixels.
     * Default is 0 (disabled).
     *
     * @defaultValue 0
     */
    readonly cropperMaxHeight: _angular_core.InputSignal<number>;
    /**
     * Set this to true for a round cropper. Resulting image will still
     * be square, but visually clipped with a border-radius: 50% on the
     * resulting image to show it as round.
     *
     * @defaultValue true
     */
    readonly roundImage: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * The input photo to be used for cropping. A string in [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) format
     * with base64 encoding.
     */
    readonly sourcePhoto: _angular_core.ModelSignal<string | undefined>;
    /**
     * URL to a photo to be used for cropping.
     */
    readonly sourcePhotoUrl: _angular_core.InputSignal<string | undefined>;
    /**
     * The photo to be displayed and edited (when not readonly).
     */
    readonly croppedPhoto: _angular_core.ModelSignal<string | undefined>;
    protected readonly editPhotoTemplate: _angular_core.Signal<TemplateRef<any>>;
    protected readonly fileInput: _angular_core.Signal<ElementRef<any>>;
    protected readonly imageCropper: _angular_core.Signal<ImageCropperComponent | undefined>;
    protected readonly titleId: string;
    /**
     * The trusted photo url string which is used to display the photo.
     */
    protected readonly sanitizedPhotoUrl: _angular_core.WritableSignal<SafeResourceUrl | undefined>;
    /**
     * The appropriate error message displayed to the user. Might be
     * `uploadErrorWrongType` or `uploadErrorTooBig`.
     */
    protected readonly uploadErrorMessage: _angular_core.WritableSignal<string | undefined>;
    protected readonly editButtonText: _angular_core.Signal<TranslatableString>;
    protected readonly currentFileSizeKilobytes: _angular_core.WritableSignal<number>;
    protected readonly currentFileSizeMegabytes: _angular_core.WritableSignal<number>;
    protected readonly maxSizeMb: _angular_core.Signal<number>;
    /**
     * The photo instance to be used in the image cropper. We need a different
     * reference than `sourcePhoto` to support the cancel after uploading
     * a new photo. While `sourcePhoto` is A and image cropper uploads B,
     * we should not replace `sourcePhoto` A until user presses apply.
     */
    protected readonly imageCropperPhoto: _angular_core.WritableSignal<string | undefined>;
    protected readonly icons: Record<"elementCancel" | "elementCircleFilled" | "elementStateExclamationMark", string>;
    /**
     * Reference to the modal displaying the photo to edit.
     */
    protected modalRef?: ModalRef;
    /**
     * The last cropped event of the image cropper component.
     * Will be set on every mouse drag of the user. It contains
     * the cropped image and the position. When user completes
     * the cropping, the data from the last event is used.
     */
    private imageCroppedEvent?;
    /**
     * Applied cropper position necessary to restore the cropper position when the use press the Change button.
     */
    private cropperPosition?;
    private readonly sanitizer;
    private readonly modalService;
    private readonly autoBackgroundColorDirective;
    ngOnChanges(changes: SimpleChanges<this>): void;
    ngOnDestroy(): void;
    /**
     * Opens a modal dialog with the cropping component.
     */
    protected showCroppingDialog(): void;
    protected fileUpload(event: Event): void;
    private updateCroppedPhoto;
    protected removePhoto(): void;
    /**
     * Invoked when user cropped the photo and pressed apply button.
     * Updates the current photo by the selected cropped photo and
     * closes the modal dialog.
     */
    protected imageCropperApplied(): void;
    protected imageCropperCanceled(): void;
    /**
     * Callback from the image cropper on every mouse drag invoking a cropping.
     *
     * @param event - Event containing the cropped image and the image cropped position.
     *
     */
    protected cropperImageCropped(event: ImageCroppedEvent): void;
    /**
     * Lifecycle hook from the image cropper component. Informs
     * us when initialized and ready.
     */
    protected cropperReady(): void;
    private resetFileInputValue;
    private resetErrorMessage;
    private setPhoto;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiPhotoUploadComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiPhotoUploadComponent, "si-photo-upload", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabledCropping": { "alias": "disabledCropping"; "required": false; "isSignal": true; }; "acceptedUploadFormats": { "alias": "acceptedUploadFormats"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "uploadErrorWrongType": { "alias": "uploadErrorWrongType"; "required": false; "isSignal": true; }; "uploadErrorTooBig": { "alias": "uploadErrorTooBig"; "required": false; "isSignal": true; }; "photoAltText": { "alias": "photoAltText"; "required": false; "isSignal": true; }; "placeholderAltText": { "alias": "placeholderAltText"; "required": false; "isSignal": true; }; "changePhotoText": { "alias": "changePhotoText"; "required": false; "isSignal": true; }; "cropperFrameAriaLabel": { "alias": "cropperFrameAriaLabel"; "required": false; "isSignal": true; }; "uploadPhotoText": { "alias": "uploadPhotoText"; "required": false; "isSignal": true; }; "removePhotoText": { "alias": "removePhotoText"; "required": false; "isSignal": true; }; "cancelEditText": { "alias": "cancelEditText"; "required": false; "isSignal": true; }; "applyEditText": { "alias": "applyEditText"; "required": false; "isSignal": true; }; "modalHeader": { "alias": "modalHeader"; "required": false; "isSignal": true; }; "modalDescription": { "alias": "modalDescription"; "required": false; "isSignal": true; }; "cropperImageFormat": { "alias": "cropperImageFormat"; "required": false; "isSignal": true; }; "cropperAspectRatio": { "alias": "cropperAspectRatio"; "required": false; "isSignal": true; }; "cropperMaintainAspectRatio": { "alias": "cropperMaintainAspectRatio"; "required": false; "isSignal": true; }; "cropperContainWithinAspectRatio": { "alias": "cropperContainWithinAspectRatio"; "required": false; "isSignal": true; }; "cropperMinWidth": { "alias": "cropperMinWidth"; "required": false; "isSignal": true; }; "cropperMinHeight": { "alias": "cropperMinHeight"; "required": false; "isSignal": true; }; "cropperMaxWidth": { "alias": "cropperMaxWidth"; "required": false; "isSignal": true; }; "cropperMaxHeight": { "alias": "cropperMaxHeight"; "required": false; "isSignal": true; }; "roundImage": { "alias": "roundImage"; "required": false; "isSignal": true; }; "sourcePhoto": { "alias": "sourcePhoto"; "required": false; "isSignal": true; }; "sourcePhotoUrl": { "alias": "sourcePhotoUrl"; "required": false; "isSignal": true; }; "croppedPhoto": { "alias": "croppedPhoto"; "required": false; "isSignal": true; }; }, { "sourcePhoto": "sourcePhotoChange"; "croppedPhoto": "croppedPhotoChange"; }, never, never, true, [{ directive: typeof i1.SiAvatarBackgroundColorDirective; inputs: { "color": "color"; "autoColor": "autoColor"; }; outputs: {}; }]>;
}

export { SiImageCropperStyleComponent, SiPhotoUploadComponent };
