@siemens/element-ng 48.10.0 → 49.0.0-rc.2

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

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, input, booleanAttribute, model, viewChild, signal, computed, inject, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, booleanAttribute, model, viewChild, signal, computed, inject } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
+import { elementStateExclamationMark, elementCircleFilled, elementCancel } from '@siemens/element-icons';
 import * as i1 from '@siemens/element-ng/avatar';
 import { SiAvatarBackgroundColorDirective } from '@siemens/element-ng/avatar';
-import { addIcons, elementStateExclamationMark, elementCircleFilled, elementCancel, SiIconComponent } from '@siemens/element-ng/icon';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { ImageCropperComponent } from 'ngx-image-cropper';
@@ -14,12 +15,12 @@ import { ImageCropperComponent } from 'ngx-image-cropper';
  * SPDX-License-Identifier: MIT
  */
 class SiImageCropperStyleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiImageCropperStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiImageCropperStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiImageCropperStyleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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"] }]
+            args: [{ selector: 'si-image-cropper-style', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 
 /**
@@ -40,13 +41,13 @@ class SiPhotoUploadComponent {
      *
      * @defaultValue false
      */
-    readonly = input(false, { transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
     /**
      * Optionally disable image cropping.
      *
      * @defaultValue false
      */
-    disabledCropping = input(false, { transform: booleanAttribute });
+    disabledCropping = input(false, { ...(ngDevMode ? { debugName: "disabledCropping" } : {}), transform: booleanAttribute });
     /**
      * Accepted image formats for the file selection dialog.
      *
@@ -56,13 +57,13 @@ class SiPhotoUploadComponent {
      *
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
      */
-    acceptedUploadFormats = input('.png, .jpg, .jpeg');
+    acceptedUploadFormats = input('.png, .jpg, .jpeg', ...(ngDevMode ? [{ debugName: "acceptedUploadFormats" }] : []));
     /**
      * Maximum allowed file size of the uploaded file in kilobytes.
      *
      * @defaultValue 2048
      */
-    maxFileSize = input(2048);
+    maxFileSize = input(2048, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
     /**
      * If the uploaded file is of an unsupported type, this
      * error message will be displayed to the user.
@@ -72,7 +73,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`)
      * ```
      */
-    uploadErrorWrongType = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`));
+    uploadErrorWrongType = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`), ...(ngDevMode ? [{ debugName: "uploadErrorWrongType" }] : []));
     /**
      * If the uploaded file exceeds the allowed upload size, this
      * error message will be displayed to the user.
@@ -82,20 +83,20 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`)
      * ```
      */
-    uploadErrorTooBig = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`));
+    uploadErrorTooBig = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`), ...(ngDevMode ? [{ debugName: "uploadErrorTooBig" }] : []));
     /**
      * Alternative text for the photo.
      *
      * @defaultValue ''
      */
-    photoAltText = input('');
+    photoAltText = input('', ...(ngDevMode ? [{ debugName: "photoAltText" }] : []));
     /**
      * Alternative text for the photo´s placeholder.
      * The value will be used to calculate the background color when `autoColor` is true.
      *
      * @defaultValue ''
      */
-    placeholderAltText = input('');
+    placeholderAltText = input('', ...(ngDevMode ? [{ debugName: "placeholderAltText" }] : []));
     /**
      * Text for the button changing the photo.
      *
@@ -104,7 +105,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`)
      * ```
      */
-    changePhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`));
+    changePhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`), ...(ngDevMode ? [{ debugName: "changePhotoText" }] : []));
     /**
      * Cropper frame aria label.
      *
@@ -113,7 +114,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`)
      * ```
      */
-    cropperFrameAriaLabel = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`));
+    cropperFrameAriaLabel = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`), ...(ngDevMode ? [{ debugName: "cropperFrameAriaLabel" }] : []));
     /**
      * Text for the button uploading a photo.
      *
@@ -122,7 +123,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)
      * ```
      */
-    uploadPhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`));
+    uploadPhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`), ...(ngDevMode ? [{ debugName: "uploadPhotoText" }] : []));
     /**
      * Text for the button removing the photo.
      *
@@ -131,7 +132,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`)
      * ```
      */
-    removePhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.REMOVE:Remove`));
+    removePhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.REMOVE:Remove`), ...(ngDevMode ? [{ debugName: "removePhotoText" }] : []));
     /**
      * Text for the button cancelling the editing process.
      *
@@ -140,7 +141,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`)
      * ```
      */
-    cancelEditText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`));
+    cancelEditText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`), ...(ngDevMode ? [{ debugName: "cancelEditText" }] : []));
     /**
      * Text for the button applying the edited photo.
      *
@@ -149,7 +150,7 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`)
      * ```
      */
-    applyEditText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`));
+    applyEditText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`), ...(ngDevMode ? [{ debugName: "applyEditText" }] : []));
     /**
      * Text displayed as header of the editing modal.
      *
@@ -158,30 +159,30 @@ class SiPhotoUploadComponent {
      * t(() => $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`)
      * ```
      */
-    modalHeader = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`));
+    modalHeader = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`), ...(ngDevMode ? [{ debugName: "modalHeader" }] : []));
     /**
      * Text displayed as description of the editing modal.
      */
-    modalDescription = input();
+    modalDescription = input(...(ngDevMode ? [undefined, { debugName: "modalDescription" }] : []));
     /**
      * Output format of the edited image.
      *
      * @defaultValue 'jpeg'
      */
-    cropperImageFormat = input('jpeg');
+    cropperImageFormat = input('jpeg', ...(ngDevMode ? [{ debugName: "cropperImageFormat" }] : []));
     /**
      * The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...).
      *
      * @defaultValue 1
      */
-    cropperAspectRatio = input(1);
+    cropperAspectRatio = input(1, ...(ngDevMode ? [{ debugName: "cropperAspectRatio" }] : []));
     /**
      * Whether to keep the width and height of the cropped image equal according
      * to the aspectRatio.
      *
      * @defaultValue true
      */
-    cropperMaintainAspectRatio = input(true, { transform: booleanAttribute });
+    cropperMaintainAspectRatio = input(true, { ...(ngDevMode ? { debugName: "cropperMaintainAspectRatio" } : {}), 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
@@ -189,14 +190,14 @@ class SiPhotoUploadComponent {
      *
      * @defaultValue false
      */
-    cropperContainWithinAspectRatio = input(false, { transform: booleanAttribute });
+    cropperContainWithinAspectRatio = input(false, { ...(ngDevMode ? { debugName: "cropperContainWithinAspectRatio" } : {}), 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);
+    cropperMinWidth = input(50, ...(ngDevMode ? [{ debugName: "cropperMinWidth" }] : []));
     /**
      * The cropper´s height cannot be made smaller than this number of pixels
      * (relative to original image´s size). Will be ignored if
@@ -204,21 +205,21 @@ class SiPhotoUploadComponent {
      *
      * @defaultValue 50
      */
-    cropperMinHeight = input(50);
+    cropperMinHeight = input(50, ...(ngDevMode ? [{ debugName: "cropperMinHeight" }] : []));
     /**
      * The cropper´s width cannot be made bigger than this number of pixels.
      * Default is 0 (disabled).
      *
      * @defaultValue 0
      */
-    cropperMaxWidth = input(0);
+    cropperMaxWidth = input(0, ...(ngDevMode ? [{ debugName: "cropperMaxWidth" }] : []));
     /**
      * The cropper´s height cannot be made bigger than this number of pixels.
      * Default is 0 (disabled).
      *
      * @defaultValue 0
      */
-    cropperMaxHeight = input(0);
+    cropperMaxHeight = input(0, ...(ngDevMode ? [{ debugName: "cropperMaxHeight" }] : []));
     /**
      * Set this to true for a round cropper. Resulting image will still
      * be square, but visually clipped with a border-radius: 50% on the
@@ -226,45 +227,45 @@ class SiPhotoUploadComponent {
      *
      * @defaultValue true
      */
-    roundImage = input(true, { transform: booleanAttribute });
+    roundImage = input(true, { ...(ngDevMode ? { debugName: "roundImage" } : {}), 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();
+    sourcePhoto = model(...(ngDevMode ? [undefined, { debugName: "sourcePhoto" }] : []));
     /**
      * URL to a photo to be used for cropping.
      */
-    sourcePhotoUrl = input();
+    sourcePhotoUrl = input(...(ngDevMode ? [undefined, { debugName: "sourcePhotoUrl" }] : []));
     /**
      * The photo to be displayed and edited (when not readonly).
      */
-    croppedPhoto = model();
+    croppedPhoto = model(...(ngDevMode ? [undefined, { debugName: "croppedPhoto" }] : []));
     editPhotoTemplate = viewChild.required('editPhotoTemplate');
     fileInput = viewChild.required('fileInput');
-    imageCropper = viewChild('imageCropper');
+    imageCropper = viewChild('imageCropper', ...(ngDevMode ? [{ debugName: "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);
+    sanitizedPhotoUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "sanitizedPhotoUrl" }] : []));
     /**
      * 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);
+    uploadErrorMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadErrorMessage" }] : []));
+    editButtonText = computed(() => this.sanitizedPhotoUrl() ? this.changePhotoText() : this.uploadPhotoText(), ...(ngDevMode ? [{ debugName: "editButtonText" }] : []));
+    currentFileSizeKilobytes = signal(-1, ...(ngDevMode ? [{ debugName: "currentFileSizeKilobytes" }] : []));
+    currentFileSizeMegabytes = signal(-1, ...(ngDevMode ? [{ debugName: "currentFileSizeMegabytes" }] : []));
+    maxSizeMb = computed(() => this.maxFileSize() / 1024, ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : []));
     /**
      * 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);
+    imageCropperPhoto = signal(undefined, ...(ngDevMode ? [{ debugName: "imageCropperPhoto" }] : []));
     icons = addIcons({
         elementCancel,
         elementCircleFilled,
@@ -446,10 +447,10 @@ class SiPhotoUploadComponent {
         this.resetErrorMessage();
         this.sanitizedPhotoUrl.set(photo ? this.sanitizer.bypassSecurityTrustResourceUrl(photo) : undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPhotoUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 [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 class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon 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:cover}.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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiImageCropperStyleComponent, selector: "si-image-cropper-style" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhotoUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [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-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon 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:cover}.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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiImageCropperStyleComponent, selector: "si-image-cropper-style" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPhotoUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhotoUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-photo-upload', imports: [
                         NgTemplateOutlet,
@@ -462,8 +463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             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 [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 class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon 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:cover}.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"] }]
-        }] });
+                    ], 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-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [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-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon 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:cover}.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"] }]
+        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabledCropping: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledCropping", required: false }] }], acceptedUploadFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedUploadFormats", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], uploadErrorWrongType: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadErrorWrongType", required: false }] }], uploadErrorTooBig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadErrorTooBig", required: false }] }], photoAltText: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoAltText", required: false }] }], placeholderAltText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderAltText", required: false }] }], changePhotoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoText", required: false }] }], cropperFrameAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperFrameAriaLabel", required: false }] }], uploadPhotoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhotoText", required: false }] }], removePhotoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removePhotoText", required: false }] }], cancelEditText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelEditText", required: false }] }], applyEditText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyEditText", required: false }] }], modalHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalHeader", required: false }] }], modalDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalDescription", required: false }] }], cropperImageFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperImageFormat", required: false }] }], cropperAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperAspectRatio", required: false }] }], cropperMaintainAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMaintainAspectRatio", required: false }] }], cropperContainWithinAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperContainWithinAspectRatio", required: false }] }], cropperMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMinWidth", required: false }] }], cropperMinHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMinHeight", required: false }] }], cropperMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMaxWidth", required: false }] }], cropperMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMaxHeight", required: false }] }], roundImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundImage", required: false }] }], sourcePhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePhoto", required: false }] }, { type: i0.Output, args: ["sourcePhotoChange"] }], sourcePhotoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePhotoUrl", required: false }] }], croppedPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "croppedPhoto", required: false }] }, { type: i0.Output, args: ["croppedPhotoChange"] }], editPhotoTemplate: [{ type: i0.ViewChild, args: ['editPhotoTemplate', { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], imageCropper: [{ type: i0.ViewChild, args: ['imageCropper', { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025

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

@@ -1 +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 (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'si-image-cropper-style',\n  template: '<ng-content />',\n  styleUrl: './si-image-cropper-style.component.scss'\n})\nexport class SiImageCropperStyleComponent {}\n","/**\n * Copyright (c) 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} from '@siemens/element-ng/icon';\nimport { ModalRef, SiModalService } from '@siemens/element-ng/modal';\nimport { SiTranslatePipe, t, 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  imports: [\n    NgTemplateOutlet,\n    ImageCropperComponent,\n    SiIconComponent,\n    SiImageCropperStyleComponent,\n    SiTranslatePipe\n  ],\n  templateUrl: './si-photo-upload.component.html',\n  styleUrl: './si-photo-upload.component.scss',\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   * t(() => $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    t(\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\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   * t(() => $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    t(\n      () =>\n        $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`\n    )\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   * t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`)\n   * ```\n   */\n  readonly changePhotoText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`));\n\n  /**\n   * Cropper frame aria label.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`)\n   * ```\n   */\n  readonly cropperFrameAriaLabel = input(\n    t(() => $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   * t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)\n   * ```\n   */\n  readonly uploadPhotoText = input(\n    t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)\n  );\n\n  /**\n   * Text for the button removing the photo.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`)\n   * ```\n   */\n  readonly removePhotoText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`));\n\n  /**\n   * Text for the button cancelling the editing process.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`)\n   * ```\n   */\n  readonly cancelEditText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`));\n\n  /**\n   * Text for the button applying the edited photo.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`)\n   * ```\n   */\n  readonly applyEditText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`));\n\n  /**\n   * Text displayed as header of the editing modal.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`)\n   * ```\n   */\n  readonly modalHeader = input(t(() => $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?.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 [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 class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon 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 (c) 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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"}
+{"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 (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'si-image-cropper-style',\n  template: '<ng-content />',\n  styleUrl: './si-image-cropper-style.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiImageCropperStyleComponent {}\n","/**\n * Copyright (c) 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 {\n  elementCancel,\n  elementCircleFilled,\n  elementStateExclamationMark\n} from '@siemens/element-icons';\nimport { SiAvatarBackgroundColorDirective } from '@siemens/element-ng/avatar';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { ModalRef, SiModalService } from '@siemens/element-ng/modal';\nimport { SiTranslatePipe, t, 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  imports: [\n    NgTemplateOutlet,\n    ImageCropperComponent,\n    SiIconComponent,\n    SiImageCropperStyleComponent,\n    SiTranslatePipe\n  ],\n  templateUrl: './si-photo-upload.component.html',\n  styleUrl: './si-photo-upload.component.scss',\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   * t(() => $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    t(\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\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   * t(() => $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    t(\n      () =>\n        $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`\n    )\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   * t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`)\n   * ```\n   */\n  readonly changePhotoText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`));\n\n  /**\n   * Cropper frame aria label.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`)\n   * ```\n   */\n  readonly cropperFrameAriaLabel = input(\n    t(() => $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   * t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)\n   * ```\n   */\n  readonly uploadPhotoText = input(\n    t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)\n  );\n\n  /**\n   * Text for the button removing the photo.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`)\n   * ```\n   */\n  readonly removePhotoText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`));\n\n  /**\n   * Text for the button cancelling the editing process.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`)\n   * ```\n   */\n  readonly cancelEditText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`));\n\n  /**\n   * Text for the button applying the edited photo.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`)\n   * ```\n   */\n  readonly applyEditText = input(t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`));\n\n  /**\n   * Text displayed as header of the editing modal.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`)\n   * ```\n   */\n  readonly modalHeader = input(t(() => $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?.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-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [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-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon 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 (c) 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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"}