@siemens/element-ng 47.2.0 → 47.4.0

package/fesm2022/siemens-element-ng-photo-upload.mjs

@@ -0,0 +1,480 @@
+import * as i0 from '@angular/core';
+import { Component, input, booleanAttribute, model, viewChild, signal, computed, inject, ChangeDetectionStrategy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@siemens/element-ng/avatar';
+import { SiAvatarBackgroundColorDirective } from '@siemens/element-ng/avatar';
+import { addIcons, elementStateExclamationMark, elementCircleFilled, elementCancel, SiIconNextComponent, SiIconComponent } from '@siemens/element-ng/icon';
+import { SiModalService } from '@siemens/element-ng/modal';
+import * as i2 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { ImageCropperComponent } from 'ngx-image-cropper';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiImageCropperStyleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiImageCropperStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SiImageCropperStyleComponent, isStandalone: true, selector: "si-image-cropper-style", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host ::ng-deep image-cropper{max-block-size:70vh;--image-cropper-outline-color: var(--element-base-translucent-1);--cropper-outline-color: var(--image-cropper-outline-color);--cropper-overlay-color: var(--element-ui-5)}:host ::ng-deep image-cropper .ngx-ic-square{background:var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper{outline:2px solid var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper:after{z-index:0;border:unset;box-shadow:0 0 0 9999px var(--cropper-outline-color)}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper .ngx-ic-move.ngx-ic-move{position:relative;overflow:hidden;border:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiImageCropperStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-image-cropper-style', template: '<ng-content />', styles: [":host ::ng-deep image-cropper{max-block-size:70vh;--image-cropper-outline-color: var(--element-base-translucent-1);--cropper-outline-color: var(--image-cropper-outline-color);--cropper-overlay-color: var(--element-ui-5)}:host ::ng-deep image-cropper .ngx-ic-square{background:var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper{outline:2px solid var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper:after{z-index:0;border:unset;box-shadow:0 0 0 9999px var(--cropper-outline-color)}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper .ngx-ic-move.ngx-ic-move{position:relative;overflow:hidden;border:0}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 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.
+ */
+class SiPhotoUploadComponent {
+    static idCounter = 0;
+    /**
+     * Indicate that changing or uploads are disabled.
+     *
+     * @defaultValue false
+     */
+    readonly = input(false, { transform: booleanAttribute });
+    /**
+     * Optionally disable image cropping.
+     *
+     * @defaultValue false
+     */
+    disabledCropping = input(false, { transform: booleanAttribute });
+    /**
+     * 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
+     */
+    acceptedUploadFormats = input('.png, .jpg, .jpeg');
+    /**
+     * Maximum allowed file size of the uploaded file in kilobytes.
+     *
+     * @defaultValue 2048
+     */
+    maxFileSize = input(2048);
+    /**
+     * If the uploaded file is of an unsupported type, this
+     * error message will be displayed to the user.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`
+     * ```
+     */
+    uploadErrorWrongType = input($localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`);
+    /**
+     * If the uploaded file exceeds the allowed upload size, this
+     * error message will be displayed to the user.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`
+     * ```
+     */
+    uploadErrorTooBig = input($localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`);
+    /**
+     * Alternative text for the photo.
+     *
+     * @defaultValue ''
+     */
+    photoAltText = input('');
+    /**
+     * Alternative text for the photo´s placeholder.
+     * The value will be used to calculate the background color when `autoColor` is true.
+     *
+     * @defaultValue ''
+     */
+    placeholderAltText = input('');
+    /**
+     * Text for the button changing the photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`
+     * ```
+     */
+    changePhotoText = input($localize `:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`);
+    /**
+     * Cropper frame aria label.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`
+     * ```
+     */
+    cropperFrameAriaLabel = input($localize `:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`);
+    /**
+     * Text for the button uploading a photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`
+     * ```
+     */
+    uploadPhotoText = input($localize `:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`);
+    /**
+     * Text for the button removing the photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`
+     * ```
+     */
+    removePhotoText = input($localize `:@@SI_PHOTO_UPLOAD.REMOVE:Remove`);
+    /**
+     * Text for the button cancelling the editing process.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`
+     * ```
+     */
+    cancelEditText = input($localize `:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`);
+    /**
+     * Text for the button applying the edited photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`
+     * ```
+     */
+    applyEditText = input($localize `:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`);
+    /**
+     * Text displayed as header of the editing modal.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`
+     * ```
+     */
+    modalHeader = input($localize `:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`);
+    /**
+     * Text displayed as description of the editing modal.
+     */
+    modalDescription = input();
+    /**
+     * Output format of the edited image.
+     *
+     * @defaultValue 'jpeg'
+     */
+    cropperImageFormat = input('jpeg');
+    /**
+     * The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...).
+     *
+     * @defaultValue 1
+     */
+    cropperAspectRatio = input(1);
+    /**
+     * Whether to keep the width and height of the cropped image equal according
+     * to the aspectRatio.
+     *
+     * @defaultValue true
+     */
+    cropperMaintainAspectRatio = input(true, { transform: booleanAttribute });
+    /**
+     * 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
+     */
+    cropperContainWithinAspectRatio = input(false, { transform: booleanAttribute });
+    /**
+     * The cropper´s width cannot be made smaller than this number of pixels
+     * (relative to original image´s size). (0 = disabled).
+     *
+     * @defaultValue 50
+     */
+    cropperMinWidth = input(50);
+    /**
+     * 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
+     */
+    cropperMinHeight = input(50);
+    /**
+     * The cropper´s width cannot be made bigger than this number of pixels.
+     * Default is 0 (disabled).
+     *
+     * @defaultValue 0
+     */
+    cropperMaxWidth = input(0);
+    /**
+     * The cropper´s height cannot be made bigger than this number of pixels.
+     * Default is 0 (disabled).
+     *
+     * @defaultValue 0
+     */
+    cropperMaxHeight = input(0);
+    /**
+     * 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
+     */
+    roundImage = input(true, { transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    sourcePhoto = model();
+    /**
+     * URL to a photo to be used for cropping.
+     */
+    sourcePhotoUrl = input();
+    /**
+     * The photo to be displayed and edited (when not readonly).
+     */
+    croppedPhoto = model();
+    editPhotoTemplate = viewChild.required('editPhotoTemplate');
+    fileInput = viewChild.required('fileInput');
+    imageCropper = viewChild('imageCropper');
+    // used to label the dialog
+    titleId = `__si-photo-upload-${SiPhotoUploadComponent.idCounter++}`;
+    /**
+     * The trusted photo url string which is used to display the photo.
+     */
+    sanitizedPhotoUrl = signal(undefined);
+    /**
+     * The appropriate error message displayed to the user. Might be
+     * `uploadErrorWrongType` or `uploadErrorTooBig`.
+     */
+    uploadErrorMessage = signal(undefined);
+    editButtonText = computed(() => this.sanitizedPhotoUrl() ? this.changePhotoText() : this.uploadPhotoText());
+    currentFileSizeKilobytes = signal(-1);
+    currentFileSizeMegabytes = signal(-1);
+    maxSizeMb = computed(() => this.maxFileSize() / 1024);
+    /**
+     * 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.
+     */
+    imageCropperPhoto = signal(undefined);
+    icons = addIcons({
+        elementCancel,
+        elementCircleFilled,
+        elementStateExclamationMark
+    });
+    /**
+     * Reference to the modal displaying the photo to edit.
+     */
+    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.
+     */
+    imageCroppedEvent;
+    /**
+     * Applied cropper position necessary to restore the cropper position when the use press the Change button.
+     */
+    cropperPosition;
+    sanitizer = inject(DomSanitizer);
+    modalService = inject(SiModalService);
+    autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);
+    ngOnChanges(changes) {
+        if (changes.readonly) {
+            this.resetErrorMessage();
+            this.resetFileInputValue();
+        }
+        if (changes.sourcePhotoUrl) {
+            this.setPhoto(this.sourcePhotoUrl());
+            this.cropperPosition = undefined;
+            this.croppedPhoto.set(undefined);
+        }
+        if (changes.sourcePhoto && changes.sourcePhoto.currentValue !== this.imageCropperPhoto()) {
+            const sourcePhoto = this.sourcePhoto();
+            this.setPhoto(sourcePhoto);
+            this.cropperPosition = undefined;
+            this.croppedPhoto.set(undefined);
+            this.imageCropperPhoto.set(sourcePhoto);
+        }
+        if (changes.croppedPhoto &&
+            changes.croppedPhoto.previousValue?.length > 0 &&
+            changes.croppedPhoto.previousValue !== changes.croppedPhoto.currentValue) {
+            this.setPhoto(this.croppedPhoto());
+        }
+        if (changes.placeholderAltText) {
+            this.autoBackgroundColorDirective.calculateColorFromInitials(this.placeholderAltText());
+        }
+    }
+    ngOnDestroy() {
+        this.modalRef?.detach();
+    }
+    /**
+     * Opens a modal dialog with the cropping component.
+     */
+    showCroppingDialog() {
+        if (this.modalRef) {
+            return;
+        }
+        if (this.disabledCropping()) {
+            this.sourcePhoto.set(this.imageCropperPhoto());
+            const sourcePhoto = this.sourcePhoto();
+            this.updateCroppedPhoto(sourcePhoto ?? '');
+            return;
+        }
+        this.modalRef = this.modalService.show(this.editPhotoTemplate(), {
+            ignoreBackdropClick: false,
+            keyboard: true,
+            class: 'modal-dialog-centered',
+            ariaLabelledBy: this.titleId
+        }, 'cancel');
+        this.resetErrorMessage();
+        this.modalRef.hidden.subscribe(() => {
+            this.resetErrorMessage();
+            this.resetFileInputValue();
+            this.modalRef = undefined;
+        });
+    }
+    fileUpload(event) {
+        // Initially reset a possible error message
+        this.resetErrorMessage();
+        const files = event.target.files;
+        const file = files && files.length > 0 ? files[0] : undefined;
+        if (!file) {
+            return;
+        }
+        const fileType = file.type;
+        const allowedFileTypes = this.acceptedUploadFormats()
+            .split(',')
+            .map(type => type.trim().replace('.', 'image/'));
+        const fileTypeWrong = !allowedFileTypes.includes(fileType);
+        if (fileTypeWrong) {
+            this.uploadErrorMessage.set(this.uploadErrorWrongType());
+            return;
+        }
+        const sizeInKb = file.size / 1024;
+        this.currentFileSizeKilobytes.set(Math.round(sizeInKb * 10) / 10);
+        this.currentFileSizeMegabytes.set(Math.round((sizeInKb / 1024) * 1000) / 1000);
+        const fileSizeTooBig = sizeInKb > this.maxFileSize();
+        if (fileSizeTooBig) {
+            this.uploadErrorMessage.set(this.uploadErrorTooBig());
+            return;
+        }
+        const reader = new FileReader();
+        reader.addEventListener('loadend', () => {
+            if (typeof reader.result === 'string') {
+                this.cropperPosition = undefined;
+                this.imageCropperPhoto.set(reader.result);
+                // Bring up the editing modal if not already present
+                this.showCroppingDialog();
+            }
+        });
+        reader.readAsDataURL(file);
+    }
+    updateCroppedPhoto(croppedPhoto, position) {
+        this.croppedPhoto.set(croppedPhoto);
+        this.setPhoto(this.croppedPhoto());
+        this.cropperPosition = position;
+    }
+    removePhoto() {
+        // We emit undefined to notify consumers that the cropped
+        // images is removed. This is a kind of special crop event.
+        this.croppedPhoto.set(undefined);
+        this.imageCropperPhoto.set(undefined);
+        this.setPhoto(undefined);
+        this.cropperPosition = undefined;
+        this.resetFileInputValue();
+        this.sourcePhoto.set(undefined);
+    }
+    /**
+     * Invoked when user cropped the photo and pressed apply button.
+     * Updates the current photo by the selected cropped photo and
+     * closes the modal dialog.
+     */
+    imageCropperApplied() {
+        if (this.imageCroppedEvent) {
+            this.sourcePhoto.set(this.imageCropperPhoto());
+            this.updateCroppedPhoto(this.imageCroppedEvent.base64.toString(), this.imageCroppedEvent.cropperPosition);
+        }
+        this.modalRef?.hide();
+    }
+    imageCropperCanceled() {
+        this.imageCropperPhoto.set(this.sourcePhoto());
+        this.modalRef?.hide('cancel');
+    }
+    /**
+     * Callback from the image cropper on every mouse drag invoking a cropping.
+     *
+     * @param event - Event containing the cropped image and the image cropped position.
+     *
+     */
+    cropperImageCropped(event) {
+        this.imageCroppedEvent = event;
+    }
+    /**
+     * Lifecycle hook from the image cropper component. Informs
+     * us when initialized and ready.
+     */
+    cropperReady() {
+        // When the user opens cropper dialog multiple times we need to
+        // apply existing cropper position.
+        const imageCropper = this.imageCropper();
+        if (this.cropperPosition && imageCropper) {
+            imageCropper.cropper = { ...this.cropperPosition };
+            imageCropper.crop();
+        }
+    }
+    resetFileInputValue() {
+        if (this.fileInput()) {
+            // Remove fileInput value to allow for selecting the same
+            // file for being uploaded again.
+            this.fileInput().nativeElement.value = null;
+        }
+    }
+    resetErrorMessage() {
+        this.uploadErrorMessage.set(undefined);
+    }
+    setPhoto(photo) {
+        this.resetErrorMessage();
+        this.sanitizedPhotoUrl.set(photo ? this.sanitizer.bypassSecurityTrustResourceUrl(photo) : undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPhotoUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiPhotoUploadComponent, isStandalone: true, selector: "si-photo-upload", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabledCropping: { classPropertyName: "disabledCropping", publicName: "disabledCropping", isSignal: true, isRequired: false, transformFunction: null }, acceptedUploadFormats: { classPropertyName: "acceptedUploadFormats", publicName: "acceptedUploadFormats", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorWrongType: { classPropertyName: "uploadErrorWrongType", publicName: "uploadErrorWrongType", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorTooBig: { classPropertyName: "uploadErrorTooBig", publicName: "uploadErrorTooBig", isSignal: true, isRequired: false, transformFunction: null }, photoAltText: { classPropertyName: "photoAltText", publicName: "photoAltText", isSignal: true, isRequired: false, transformFunction: null }, placeholderAltText: { classPropertyName: "placeholderAltText", publicName: "placeholderAltText", isSignal: true, isRequired: false, transformFunction: null }, changePhotoText: { classPropertyName: "changePhotoText", publicName: "changePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cropperFrameAriaLabel: { classPropertyName: "cropperFrameAriaLabel", publicName: "cropperFrameAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadPhotoText: { classPropertyName: "uploadPhotoText", publicName: "uploadPhotoText", isSignal: true, isRequired: false, transformFunction: null }, removePhotoText: { classPropertyName: "removePhotoText", publicName: "removePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cancelEditText: { classPropertyName: "cancelEditText", publicName: "cancelEditText", isSignal: true, isRequired: false, transformFunction: null }, applyEditText: { classPropertyName: "applyEditText", publicName: "applyEditText", isSignal: true, isRequired: false, transformFunction: null }, modalHeader: { classPropertyName: "modalHeader", publicName: "modalHeader", isSignal: true, isRequired: false, transformFunction: null }, modalDescription: { classPropertyName: "modalDescription", publicName: "modalDescription", isSignal: true, isRequired: false, transformFunction: null }, cropperImageFormat: { classPropertyName: "cropperImageFormat", publicName: "cropperImageFormat", isSignal: true, isRequired: false, transformFunction: null }, cropperAspectRatio: { classPropertyName: "cropperAspectRatio", publicName: "cropperAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMaintainAspectRatio: { classPropertyName: "cropperMaintainAspectRatio", publicName: "cropperMaintainAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperContainWithinAspectRatio: { classPropertyName: "cropperContainWithinAspectRatio", publicName: "cropperContainWithinAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMinWidth: { classPropertyName: "cropperMinWidth", publicName: "cropperMinWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMinHeight: { classPropertyName: "cropperMinHeight", publicName: "cropperMinHeight", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxWidth: { classPropertyName: "cropperMaxWidth", publicName: "cropperMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxHeight: { classPropertyName: "cropperMaxHeight", publicName: "cropperMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, roundImage: { classPropertyName: "roundImage", publicName: "roundImage", isSignal: true, isRequired: false, transformFunction: null }, sourcePhoto: { classPropertyName: "sourcePhoto", publicName: "sourcePhoto", isSignal: true, isRequired: false, transformFunction: null }, sourcePhotoUrl: { classPropertyName: "sourcePhotoUrl", publicName: "sourcePhotoUrl", isSignal: true, isRequired: false, transformFunction: null }, croppedPhoto: { classPropertyName: "croppedPhoto", publicName: "croppedPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourcePhoto: "sourcePhotoChange", croppedPhoto: "croppedPhotoChange" }, viewQueries: [{ propertyName: "editPhotoTemplate", first: true, predicate: ["editPhotoTemplate"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "imageCropper", first: true, predicate: ["imageCropper"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:contain}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiImageCropperStyleComponent, selector: "si-image-cropper-style" }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPhotoUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-photo-upload', imports: [
+                        NgTemplateOutlet,
+                        ImageCropperComponent,
+                        SiIconComponent,
+                        SiIconNextComponent,
+                        SiImageCropperStyleComponent,
+                        SiTranslateModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: SiAvatarBackgroundColorDirective,
+                            inputs: ['color', 'autoColor']
+                        }
+                    ], template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:contain}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiImageCropperStyleComponent, SiPhotoUploadComponent };
+//# sourceMappingURL=siemens-element-ng-photo-upload.mjs.map

package/fesm2022/siemens-element-ng-photo-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-element-ng-photo-upload.mjs","sources":["../../../../projects/element-ng/photo-upload/si-image-cropper-style.component.ts","../../../../projects/element-ng/photo-upload/si-photo-upload.component.ts","../../../../projects/element-ng/photo-upload/si-photo-upload.component.html","../../../../projects/element-ng/photo-upload/index.ts","../../../../projects/element-ng/photo-upload/siemens-element-ng-photo-upload.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'si-image-cropper-style',\n  styleUrl: './si-image-cropper-style.component.scss',\n  template: '<ng-content />'\n})\nexport class SiImageCropperStyleComponent {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnChanges,\n  OnDestroy,\n  signal,\n  SimpleChanges,\n  TemplateRef,\n  viewChild\n} from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { SiAvatarBackgroundColorDirective } from '@siemens/element-ng/avatar';\nimport {\n  addIcons,\n  elementCancel,\n  elementCircleFilled,\n  elementStateExclamationMark,\n  SiIconComponent,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { ModalRef, SiModalService } from '@siemens/element-ng/modal';\nimport { SiTranslateModule, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { CropperPosition, ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';\n\nimport { SiImageCropperStyleComponent } from './si-image-cropper-style.component';\n\n/**\n * A component used to upload, edit, and delete a user's photo. The user can upload\n * a photo either via file browser or a URL to the photo. You can set the source\n * photo with the `sourcePhoto` Data URL input or the `sourcePhotoUrl` URL input.\n * If you already have a cropped image you can set it with the `croppedPhoto` input.\n * Cropping changes are emitted via the `croppedPhotoChange` output.\n */\n@Component({\n  selector: 'si-photo-upload',\n  styleUrl: './si-photo-upload.component.scss',\n  templateUrl: './si-photo-upload.component.html',\n  imports: [\n    NgTemplateOutlet,\n    ImageCropperComponent,\n    SiIconComponent,\n    SiIconNextComponent,\n    SiImageCropperStyleComponent,\n    SiTranslateModule\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: SiAvatarBackgroundColorDirective,\n      inputs: ['color', 'autoColor']\n    }\n  ]\n})\nexport class SiPhotoUploadComponent implements OnChanges, OnDestroy {\n  private static idCounter = 0;\n\n  /**\n   * Indicate that changing or uploads are disabled.\n   *\n   * @defaultValue false\n   */\n  readonly readonly = input(false, { transform: booleanAttribute });\n\n  /**\n   * Optionally disable image cropping.\n   *\n   * @defaultValue false\n   */\n  readonly disabledCropping = input(false, { transform: booleanAttribute });\n\n  /**\n   * Accepted image formats for the file selection dialog.\n   *\n   * @defaultValue '.png, .jpg, .jpeg'\n   *\n   * @see\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept\n   */\n  readonly acceptedUploadFormats = input('.png, .jpg, .jpeg');\n\n  /**\n   * Maximum allowed file size of the uploaded file in kilobytes.\n   *\n   * @defaultValue 2048\n   */\n  readonly maxFileSize = input(2048);\n\n  /**\n   * If the uploaded file is of an unsupported type, this\n   * error message will be displayed to the user.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`\n   * ```\n   */\n  readonly uploadErrorWrongType = input(\n    $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`\n  );\n\n  /**\n   * If the uploaded file exceeds the allowed upload size, this\n   * error message will be displayed to the user.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`\n   * ```\n   */\n  readonly uploadErrorTooBig = input(\n    $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`\n  );\n\n  /**\n   * Alternative text for the photo.\n   *\n   * @defaultValue ''\n   */\n  readonly photoAltText = input<TranslatableString>('');\n\n  /**\n   * Alternative text for the photo´s placeholder.\n   * The value will be used to calculate the background color when `autoColor` is true.\n   *\n   * @defaultValue ''\n   */\n  readonly placeholderAltText = input<TranslatableString>('');\n\n  /**\n   * Text for the button changing the photo.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`\n   * ```\n   */\n  readonly changePhotoText = input($localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`);\n\n  /**\n   * Cropper frame aria label.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`\n   * ```\n   */\n  readonly cropperFrameAriaLabel = input(\n    $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`\n  );\n\n  /**\n   * Text for the button uploading a photo.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`\n   * ```\n   */\n  readonly uploadPhotoText = input($localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`);\n\n  /**\n   * Text for the button removing the photo.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`\n   * ```\n   */\n  readonly removePhotoText = input($localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`);\n\n  /**\n   * Text for the button cancelling the editing process.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`\n   * ```\n   */\n  readonly cancelEditText = input($localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`);\n\n  /**\n   * Text for the button applying the edited photo.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`\n   * ```\n   */\n  readonly applyEditText = input($localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`);\n\n  /**\n   * Text displayed as header of the editing modal.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`\n   * ```\n   */\n  readonly modalHeader = input($localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`);\n\n  /**\n   * Text displayed as description of the editing modal.\n   */\n  readonly modalDescription = input<TranslatableString>();\n\n  /**\n   * Output format of the edited image.\n   *\n   * @defaultValue 'jpeg'\n   */\n  readonly cropperImageFormat = input<'png' | 'jpeg'>('jpeg');\n\n  /**\n   * The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...).\n   *\n   * @defaultValue 1\n   */\n  readonly cropperAspectRatio = input(1);\n\n  /**\n   * Whether to keep the width and height of the cropped image equal according\n   * to the aspectRatio.\n   *\n   * @defaultValue true\n   */\n  readonly cropperMaintainAspectRatio = input(true, { transform: booleanAttribute });\n\n  /**\n   * When set to true, padding will be added around the image to make it fit to\n   * the aspect ratio. Be aware that this transformation will cause the loaded\n   * image to be a png file with an increased base64 string payload.\n   *\n   * @defaultValue false\n   */\n  readonly cropperContainWithinAspectRatio = input(false, { transform: booleanAttribute });\n\n  /**\n   * The cropper´s width cannot be made smaller than this number of pixels\n   * (relative to original image´s size). (0 = disabled).\n   *\n   * @defaultValue 50\n   */\n  readonly cropperMinWidth = input(50);\n\n  /**\n   * The cropper´s height cannot be made smaller than this number of pixels\n   * (relative to original image´s size). Will be ignored if\n   * `cropperMaintainAspectRatio` is set. (0 = disabled).\n   *\n   * @defaultValue 50\n   */\n  readonly cropperMinHeight = input(50);\n\n  /**\n   * The cropper´s width cannot be made bigger than this number of pixels.\n   * Default is 0 (disabled).\n   *\n   * @defaultValue 0\n   */\n  readonly cropperMaxWidth = input(0);\n\n  /**\n   * The cropper´s height cannot be made bigger than this number of pixels.\n   * Default is 0 (disabled).\n   *\n   * @defaultValue 0\n   */\n  readonly cropperMaxHeight = input(0);\n\n  /**\n   * Set this to true for a round cropper. Resulting image will still\n   * be square, but visually clipped with a border-radius: 50% on the\n   * resulting image to show it as round.\n   *\n   * @defaultValue true\n   */\n  readonly roundImage = input(true, { transform: booleanAttribute });\n\n  /**\n   * 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\n   * with base64 encoding.\n   */\n  readonly sourcePhoto = model<string>();\n\n  /**\n   * URL to a photo to be used for cropping.\n   */\n  readonly sourcePhotoUrl = input<string>();\n\n  /**\n   * The photo to be displayed and edited (when not readonly).\n   */\n  readonly croppedPhoto = model<string>();\n\n  protected readonly editPhotoTemplate = viewChild.required<TemplateRef<any>>('editPhotoTemplate');\n  protected readonly fileInput = viewChild.required<ElementRef<any>>('fileInput');\n  protected readonly imageCropper = viewChild<ImageCropperComponent>('imageCropper');\n\n  // used to label the dialog\n  protected readonly titleId = `__si-photo-upload-${SiPhotoUploadComponent.idCounter++}`;\n\n  /**\n   * The trusted photo url string which is used to display the photo.\n   */\n  protected readonly sanitizedPhotoUrl = signal<SafeResourceUrl | undefined>(undefined);\n\n  /**\n   * The appropriate error message displayed to the user. Might be\n   * `uploadErrorWrongType` or `uploadErrorTooBig`.\n   */\n  protected readonly uploadErrorMessage = signal<string | undefined>(undefined);\n  protected readonly editButtonText = computed(() =>\n    this.sanitizedPhotoUrl() ? this.changePhotoText() : this.uploadPhotoText()\n  );\n  protected readonly currentFileSizeKilobytes = signal(-1);\n  protected readonly currentFileSizeMegabytes = signal(-1);\n  protected readonly maxSizeMb = computed(() => this.maxFileSize() / 1024);\n\n  /**\n   * The photo instance to be used in the image cropper. We need a different\n   * reference than `sourcePhoto` to support the cancel after uploading\n   * a new photo. While `sourcePhoto` is A and image cropper uploads B,\n   * we should not replace `sourcePhoto` A until user presses apply.\n   */\n  protected readonly imageCropperPhoto = signal<string | undefined>(undefined);\n\n  protected readonly icons = addIcons({\n    elementCancel,\n    elementCircleFilled,\n    elementStateExclamationMark\n  });\n  /**\n   * Reference to the modal displaying the photo to edit.\n   */\n  protected modalRef?: ModalRef;\n  /**\n   * The last cropped event of the image cropper component.\n   * Will be set on every mouse drag of the user. It contains\n   * the cropped image and the position. When user completes\n   * the cropping, the data from the last event is used.\n   */\n  private imageCroppedEvent?: ImageCroppedEvent;\n  /**\n   * Applied cropper position necessary to restore the cropper position when the use press the Change button.\n   */\n  private cropperPosition?: CropperPosition;\n\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly modalService = inject(SiModalService);\n  private readonly autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.readonly) {\n      this.resetErrorMessage();\n      this.resetFileInputValue();\n    }\n\n    if (changes.sourcePhotoUrl) {\n      this.setPhoto(this.sourcePhotoUrl());\n      this.cropperPosition = undefined;\n      this.croppedPhoto.set(undefined);\n    }\n    if (changes.sourcePhoto && changes.sourcePhoto.currentValue !== this.imageCropperPhoto()) {\n      const sourcePhoto = this.sourcePhoto();\n      this.setPhoto(sourcePhoto);\n      this.cropperPosition = undefined;\n      this.croppedPhoto.set(undefined);\n      this.imageCropperPhoto.set(sourcePhoto);\n    }\n    if (\n      changes.croppedPhoto &&\n      changes.croppedPhoto.previousValue?.length > 0 &&\n      changes.croppedPhoto.previousValue !== changes.croppedPhoto.currentValue\n    ) {\n      this.setPhoto(this.croppedPhoto());\n    }\n    if (changes.placeholderAltText) {\n      this.autoBackgroundColorDirective.calculateColorFromInitials(this.placeholderAltText());\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.modalRef?.detach();\n  }\n\n  /**\n   * Opens a modal dialog with the cropping component.\n   */\n  protected showCroppingDialog(): void {\n    if (this.modalRef) {\n      return;\n    }\n    if (this.disabledCropping()) {\n      this.sourcePhoto.set(this.imageCropperPhoto());\n      const sourcePhoto = this.sourcePhoto();\n      this.updateCroppedPhoto(sourcePhoto ?? '');\n      return;\n    }\n    this.modalRef = this.modalService.show(\n      this.editPhotoTemplate(),\n      {\n        ignoreBackdropClick: false,\n        keyboard: true,\n        class: 'modal-dialog-centered',\n        ariaLabelledBy: this.titleId\n      },\n      'cancel'\n    );\n    this.resetErrorMessage();\n    this.modalRef.hidden.subscribe(() => {\n      this.resetErrorMessage();\n      this.resetFileInputValue();\n      this.modalRef = undefined;\n    });\n  }\n\n  protected fileUpload(event: Event): void {\n    // Initially reset a possible error message\n    this.resetErrorMessage();\n    const files = (event.target as HTMLInputElement).files;\n    const file = files && files.length > 0 ? files[0] : undefined;\n    if (!file) {\n      return;\n    }\n    const fileType = file.type;\n    const allowedFileTypes = this.acceptedUploadFormats()\n      .split(',')\n      .map(type => type.trim().replace('.', 'image/'));\n    const fileTypeWrong = !allowedFileTypes.includes(fileType);\n    if (fileTypeWrong) {\n      this.uploadErrorMessage.set(this.uploadErrorWrongType());\n      return;\n    }\n    const sizeInKb = file.size / 1024;\n    this.currentFileSizeKilobytes.set(Math.round(sizeInKb * 10) / 10);\n    this.currentFileSizeMegabytes.set(Math.round((sizeInKb / 1024) * 1000) / 1000);\n    const fileSizeTooBig = sizeInKb > this.maxFileSize();\n    if (fileSizeTooBig) {\n      this.uploadErrorMessage.set(this.uploadErrorTooBig());\n      return;\n    }\n    const reader = new FileReader();\n    reader.addEventListener('loadend', () => {\n      if (typeof reader.result === 'string') {\n        this.cropperPosition = undefined;\n        this.imageCropperPhoto.set(reader.result);\n\n        // Bring up the editing modal if not already present\n        this.showCroppingDialog();\n      }\n    });\n    reader.readAsDataURL(file);\n  }\n\n  private updateCroppedPhoto(croppedPhoto: string, position?: CropperPosition): void {\n    this.croppedPhoto.set(croppedPhoto);\n    this.setPhoto(this.croppedPhoto());\n    this.cropperPosition = position;\n  }\n\n  protected removePhoto(): void {\n    // We emit undefined to notify consumers that the cropped\n    // images is removed. This is a kind of special crop event.\n    this.croppedPhoto.set(undefined);\n    this.imageCropperPhoto.set(undefined);\n    this.setPhoto(undefined);\n    this.cropperPosition = undefined;\n    this.resetFileInputValue();\n    this.sourcePhoto.set(undefined);\n  }\n\n  /**\n   * Invoked when user cropped the photo and pressed apply button.\n   * Updates the current photo by the selected cropped photo and\n   * closes the modal dialog.\n   */\n  protected imageCropperApplied(): void {\n    if (this.imageCroppedEvent) {\n      this.sourcePhoto.set(this.imageCropperPhoto());\n      this.updateCroppedPhoto(\n        this.imageCroppedEvent.base64!.toString(),\n        this.imageCroppedEvent.cropperPosition\n      );\n    }\n    this.modalRef?.hide();\n  }\n\n  protected imageCropperCanceled(): void {\n    this.imageCropperPhoto.set(this.sourcePhoto());\n    this.modalRef?.hide('cancel');\n  }\n\n  /**\n   * Callback from the image cropper on every mouse drag invoking a cropping.\n   *\n   * @param event - Event containing the cropped image and the image cropped position.\n   *\n   */\n  protected cropperImageCropped(event: ImageCroppedEvent): void {\n    this.imageCroppedEvent = event;\n  }\n\n  /**\n   * Lifecycle hook from the image cropper component. Informs\n   * us when initialized and ready.\n   */\n  protected cropperReady(): void {\n    // When the user opens cropper dialog multiple times we need to\n    // apply existing cropper position.\n    const imageCropper = this.imageCropper();\n    if (this.cropperPosition && imageCropper) {\n      imageCropper.cropper = { ...this.cropperPosition };\n      imageCropper.crop();\n    }\n  }\n\n  private resetFileInputValue(): void {\n    if (this.fileInput()) {\n      // Remove fileInput value to allow for selecting the same\n      // file for being uploaded again.\n      this.fileInput().nativeElement.value = null;\n    }\n  }\n\n  private resetErrorMessage(): void {\n    this.uploadErrorMessage.set(undefined);\n  }\n\n  private setPhoto(photo?: string): void {\n    this.resetErrorMessage();\n    this.sanitizedPhotoUrl.set(\n      photo ? this.sanitizer.bypassSecurityTrustResourceUrl(photo) : undefined\n    );\n  }\n}\n","<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-image-cropper-style.component';\nexport * from './si-photo-upload.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}