@siemens/element-ng 47.7.0 → 48.0.0-next.1

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

@@ -6,7 +6,7 @@ import * as i1 from '@siemens/element-ng/avatar';
 import { SiAvatarBackgroundColorDirective } from '@siemens/element-ng/avatar';
 import { addIcons, elementStateExclamationMark, elementCircleFilled, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
 import { SiModalService } from '@siemens/element-ng/modal';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 
 /**
@@ -14,10 +14,10 @@ import { ImageCropperComponent } from 'ngx-image-cropper';
  * SPDX-License-Identifier: MIT
  */
 class SiImageCropperStyleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiImageCropperStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SiImageCropperStyleComponent, isStandalone: true, selector: "si-image-cropper-style", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host ::ng-deep image-cropper{max-block-size:70vh;--image-cropper-outline-color: var(--element-base-translucent-1);--cropper-outline-color: var(--image-cropper-outline-color);--cropper-overlay-color: var(--element-ui-5)}:host ::ng-deep image-cropper .ngx-ic-square{background:var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper{outline:2px solid var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper:after{z-index:0;border:unset;box-shadow:0 0 0 9999px var(--cropper-outline-color)}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper .ngx-ic-move.ngx-ic-move{position:relative;overflow:hidden;border:0}\n"] });
+    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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiImageCropperStyleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiImageCropperStyleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-image-cropper-style', template: '<ng-content />', styles: [":host ::ng-deep image-cropper{max-block-size:70vh;--image-cropper-outline-color: var(--element-base-translucent-1);--cropper-outline-color: var(--image-cropper-outline-color);--cropper-overlay-color: var(--element-ui-5)}:host ::ng-deep image-cropper .ngx-ic-square{background:var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper{outline:2px solid var(--element-ui-0)!important}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper:after{z-index:0;border:unset;box-shadow:0 0 0 9999px var(--cropper-outline-color)}:host ::ng-deep image-cropper .ngx-ic-cropper.ngx-ic-cropper .ngx-ic-move.ngx-ic-move{position:relative;overflow:hidden;border:0}\n"] }]
         }] });
@@ -69,20 +69,20 @@ class SiPhotoUploadComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`)
      * ```
      */
-    uploadErrorWrongType = input($localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`);
+    uploadErrorWrongType = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`));
     /**
      * If the uploaded file exceeds the allowed upload size, this
      * error message will be displayed to the user.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`)
      * ```
      */
-    uploadErrorTooBig = input($localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`);
+    uploadErrorTooBig = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`));
     /**
      * Alternative text for the photo.
      *
@@ -101,64 +101,64 @@ class SiPhotoUploadComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`)
      * ```
      */
-    changePhotoText = input($localize `:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`);
+    changePhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`));
     /**
      * Cropper frame aria label.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`)
      * ```
      */
-    cropperFrameAriaLabel = input($localize `:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`);
+    cropperFrameAriaLabel = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`));
     /**
      * Text for the button uploading a photo.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`)
      * ```
      */
-    uploadPhotoText = input($localize `:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`);
+    uploadPhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`));
     /**
      * Text for the button removing the photo.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`)
      * ```
      */
-    removePhotoText = input($localize `:@@SI_PHOTO_UPLOAD.REMOVE:Remove`);
+    removePhotoText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.REMOVE:Remove`));
     /**
      * Text for the button cancelling the editing process.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`)
      * ```
      */
-    cancelEditText = input($localize `:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`);
+    cancelEditText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`));
     /**
      * Text for the button applying the edited photo.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`)
      * ```
      */
-    applyEditText = input($localize `:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`);
+    applyEditText = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`));
     /**
      * Text displayed as header of the editing modal.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`
+     * t(() => $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`)
      * ```
      */
-    modalHeader = input($localize `:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`);
+    modalHeader = input(t(() => $localize `:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`));
     /**
      * Text displayed as description of the editing modal.
      */
@@ -446,10 +446,10 @@ class SiPhotoUploadComponent {
         this.resetErrorMessage();
         this.sanitizedPhotoUrl.set(photo ? this.sanitizer.bypassSecurityTrustResourceUrl(photo) : undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPhotoUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiPhotoUploadComponent, isStandalone: true, selector: "si-photo-upload", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabledCropping: { classPropertyName: "disabledCropping", publicName: "disabledCropping", isSignal: true, isRequired: false, transformFunction: null }, acceptedUploadFormats: { classPropertyName: "acceptedUploadFormats", publicName: "acceptedUploadFormats", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorWrongType: { classPropertyName: "uploadErrorWrongType", publicName: "uploadErrorWrongType", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorTooBig: { classPropertyName: "uploadErrorTooBig", publicName: "uploadErrorTooBig", isSignal: true, isRequired: false, transformFunction: null }, photoAltText: { classPropertyName: "photoAltText", publicName: "photoAltText", isSignal: true, isRequired: false, transformFunction: null }, placeholderAltText: { classPropertyName: "placeholderAltText", publicName: "placeholderAltText", isSignal: true, isRequired: false, transformFunction: null }, changePhotoText: { classPropertyName: "changePhotoText", publicName: "changePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cropperFrameAriaLabel: { classPropertyName: "cropperFrameAriaLabel", publicName: "cropperFrameAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadPhotoText: { classPropertyName: "uploadPhotoText", publicName: "uploadPhotoText", isSignal: true, isRequired: false, transformFunction: null }, removePhotoText: { classPropertyName: "removePhotoText", publicName: "removePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cancelEditText: { classPropertyName: "cancelEditText", publicName: "cancelEditText", isSignal: true, isRequired: false, transformFunction: null }, applyEditText: { classPropertyName: "applyEditText", publicName: "applyEditText", isSignal: true, isRequired: false, transformFunction: null }, modalHeader: { classPropertyName: "modalHeader", publicName: "modalHeader", isSignal: true, isRequired: false, transformFunction: null }, modalDescription: { classPropertyName: "modalDescription", publicName: "modalDescription", isSignal: true, isRequired: false, transformFunction: null }, cropperImageFormat: { classPropertyName: "cropperImageFormat", publicName: "cropperImageFormat", isSignal: true, isRequired: false, transformFunction: null }, cropperAspectRatio: { classPropertyName: "cropperAspectRatio", publicName: "cropperAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMaintainAspectRatio: { classPropertyName: "cropperMaintainAspectRatio", publicName: "cropperMaintainAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperContainWithinAspectRatio: { classPropertyName: "cropperContainWithinAspectRatio", publicName: "cropperContainWithinAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMinWidth: { classPropertyName: "cropperMinWidth", publicName: "cropperMinWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMinHeight: { classPropertyName: "cropperMinHeight", publicName: "cropperMinHeight", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxWidth: { classPropertyName: "cropperMaxWidth", publicName: "cropperMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxHeight: { classPropertyName: "cropperMaxHeight", publicName: "cropperMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, roundImage: { classPropertyName: "roundImage", publicName: "roundImage", isSignal: true, isRequired: false, transformFunction: null }, sourcePhoto: { classPropertyName: "sourcePhoto", publicName: "sourcePhoto", isSignal: true, isRequired: false, transformFunction: null }, sourcePhotoUrl: { classPropertyName: "sourcePhotoUrl", publicName: "sourcePhotoUrl", isSignal: true, isRequired: false, transformFunction: null }, croppedPhoto: { classPropertyName: "croppedPhoto", publicName: "croppedPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourcePhoto: "sourcePhotoChange", croppedPhoto: "croppedPhotoChange" }, viewQueries: [{ propertyName: "editPhotoTemplate", first: true, predicate: ["editPhotoTemplate"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "imageCropper", first: true, predicate: ["imageCropper"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:contain}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiImageCropperStyleComponent, selector: "si-image-cropper-style" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit: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: SiIconNextComponent, selector: "si-icon-next", 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: "19.0.6", ngImport: i0, type: SiPhotoUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPhotoUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-photo-upload', imports: [
                         NgTemplateOutlet,
@@ -462,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:contain}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-small icon-stack d-inline-block my-n2 me-2\">\n      <si-icon-next class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon-next class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit: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"] }]
         }] });
 
 /**

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

package/fesm2022/siemens-element-ng-pills-input.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { output, input, Component, Directive, booleanAttribute, signal, computed, viewChild, inject, ChangeDetectorRef, ElementRef, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { addIcons, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
 
 /**
@@ -14,10 +14,10 @@ class SiInputPillComponent {
     /** @defaultValue false */
     hideClose = input(false);
     icons = addIcons({ elementCancel });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInputPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiInputPillComponent, isStandalone: true, selector: "si-input-pill", inputs: { hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deletePill: "deletePill" }, host: { properties: { "class.pe-4": "hideClose()" }, classAttribute: "pill pe-0" }, ngImport: i0, template: "<div class=\"text-truncate\">\n  <ng-content />\n</div>\n@if (!hideClose()) {\n  <span class=\"ms-2 btn btn-circle btn-xs btn-ghost\" aria-hidden=\"true\" (click)=\"deletePill.emit()\">\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </span>\n}\n", dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiInputPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiInputPillComponent, isStandalone: true, selector: "si-input-pill", inputs: { hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deletePill: "deletePill" }, host: { properties: { "class.pe-4": "hideClose()" }, classAttribute: "pill pe-0" }, ngImport: i0, template: "<div class=\"text-truncate\">\n  <ng-content />\n</div>\n@if (!hideClose()) {\n  <span class=\"ms-2 btn btn-circle btn-xs btn-ghost\" aria-hidden=\"true\" (click)=\"deletePill.emit()\">\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </span>\n}\n", dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInputPillComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiInputPillComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-input-pill', imports: [SiIconNextComponent], host: {
                         class: 'pill pe-0',
@@ -30,10 +30,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiPillsInputValueHandlerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputValueHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiPillsInputValueHandlerDirective, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputValueHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiPillsInputValueHandlerDirective, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputValueHandlerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputValueHandlerDirective, decorators: [{
             type: Directive
         }] });
 
@@ -57,10 +57,10 @@ class SiPillsInputComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL:Create item`
+     * t(() => $localize`:@@SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL:Create item`)
      * ```
      */
-    inputElementAriaLabel = input($localize `:@@SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL:Create item`);
+    inputElementAriaLabel = input(t(() => $localize `:@@SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL:Create item`));
     /**
      * Whether the pills-input is disabled.
      *
@@ -213,8 +213,8 @@ class SiPillsInputComponent {
     writeValue(value) {
         this.pills.set(value?.slice() ?? []);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiPillsInputComponent, isStandalone: true, selector: "si-pills-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputElementAriaLabel: { classPropertyName: "inputElementAriaLabel", publicName: "inputElementAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox", "aria-orientation": "horizontal" }, listeners: { "click": "click()", "keydown.arrowLeft": "arrowLeft()", "keydown.arrowRight": "arrowRight()", "keydown.backspace": "delete()", "keydown.delete": "delete()" }, properties: { "class.disabled": "disabled()", "attr.aria-disabled": "disabled()", "class.readonly": "readonly()", "attr.aria-readonly": "readonly()", "attr.tabindex": "tabindex()", "attr.aria-activedescendant": "activeDescendant()", "attr.aria-labelledby": "labelledby()", "attr.aria-describedby": "errormessageId" }, classAttribute: "form-control" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiPillsInputComponent, isStandalone: true, selector: "si-pills-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputElementAriaLabel: { classPropertyName: "inputElementAriaLabel", publicName: "inputElementAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox", "aria-orientation": "horizontal" }, listeners: { "click": "click()", "keydown.arrowLeft": "arrowLeft()", "keydown.arrowRight": "arrowRight()", "keydown.backspace": "delete()", "keydown.delete": "delete()" }, properties: { "class.disabled": "disabled()", "attr.aria-disabled": "disabled()", "class.readonly": "readonly()", "attr.aria-readonly": "readonly()", "attr.tabindex": "tabindex()", "attr.aria-activedescendant": "activeDescendant()", "attr.aria-labelledby": "labelledby()", "attr.aria-describedby": "errormessageId" }, classAttribute: "form-control" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SiPillsInputComponent,
@@ -226,9 +226,9 @@ class SiPillsInputComponent {
             }
         ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- aria-required-children is disabled here -->\n@for (chip of pills(); track $index) {\n  <si-input-pill\n    role=\"option\"\n    [id]=\"id() + '-pill-' + $index\"\n    [class.active]=\"$index === activePillIndex()\"\n    [hideClose]=\"disabled() || readonly()\"\n    (deletePill)=\"remove($index)\"\n  >\n    {{ chip }}\n  </si-input-pill>\n}\n@if (!readonly() && !disabled()) {\n  <div role=\"presentation\" class=\"flex-fill\">\n    <input\n      #inputElement\n      class=\"focus-none\"\n      [id]=\"inputId()\"\n      [attr.aria-label]=\"inputElementAriaLabel() | translate\"\n      [placeholder]=\"!pills().length ? placeholder() : ''\"\n      [value]=\"inputValue\"\n      (keydown.enter)=\"keydownEnter($event)\"\n      (keydown.backspace)=\"keydownBackspace($event)\"\n      (input)=\"input()\"\n      (blur)=\"blur()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:4px;padding-block:3px;block-size:auto!important;min-block-size:calc(1.143em + 16px)}:host:focus-within{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{padding-inline:0;padding-block:3px;margin-inline:4px;border:0;flex:1;background:transparent;color:inherit;inline-size:100%}input:focus{min-inline-size:100px}\n"], dependencies: [{ kind: "component", type: SiInputPillComponent, selector: "si-input-pill", inputs: ["hideClose"], outputs: ["deletePill"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-pills-input', imports: [SiInputPillComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'si-pills-input', imports: [SiInputPillComponent, SiTranslatePipe], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: SiPillsInputComponent,
@@ -238,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                             provide: SI_FORM_ITEM_CONTROL,
                             useExisting: SiPillsInputComponent
                         }
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'form-control',
                         role: 'listbox',
                         'aria-orientation': 'horizontal',
@@ -313,15 +313,15 @@ class SiPillsInputCsvDirective extends SiPillsInputPatternBase {
     /** @defaultValue undefined */
     // eslint-disable-next-line @angular-eslint/no-input-rename
     validationRegex = input(undefined, { alias: 'pillsInputCsvItemRegex' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputCsvDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiPillsInputCsvDirective, isStandalone: true, selector: "[siPillsInputCsv]", inputs: { validationRegex: { classPropertyName: "validationRegex", publicName: "pillsInputCsvItemRegex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputCsvDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiPillsInputCsvDirective, isStandalone: true, selector: "[siPillsInputCsv]", inputs: { validationRegex: { classPropertyName: "validationRegex", publicName: "pillsInputCsvItemRegex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: SiPillsInputValueHandlerDirective,
                 useExisting: SiPillsInputCsvDirective
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputCsvDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputCsvDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siPillsInputCsv]',
@@ -345,15 +345,15 @@ class SiPillsInputEmailDirective extends SiPillsInputPatternBase {
      * @defaultValue signal(EMAIL_REGEX).asReadonly()
      */
     validationRegex = signal(EMAIL_REGEX).asReadonly();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiPillsInputEmailDirective, isStandalone: true, selector: "[siPillsInputEmail]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputEmailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiPillsInputEmailDirective, isStandalone: true, selector: "[siPillsInputEmail]", providers: [
             {
                 provide: SiPillsInputValueHandlerDirective,
                 useExisting: SiPillsInputEmailDirective
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputEmailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputEmailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siPillsInputEmail]',
@@ -371,11 +371,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiPillsInputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputModule, imports: [SiPillsInputComponent, SiPillsInputCsvDirective, SiPillsInputEmailDirective], exports: [SiPillsInputComponent, SiPillsInputCsvDirective, SiPillsInputEmailDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputModule, imports: [SiPillsInputComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputModule, imports: [SiPillsInputComponent, SiPillsInputCsvDirective, SiPillsInputEmailDirective], exports: [SiPillsInputComponent, SiPillsInputCsvDirective, SiPillsInputEmailDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputModule, imports: [SiPillsInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiPillsInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPillsInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiPillsInputComponent, SiPillsInputCsvDirective, SiPillsInputEmailDirective],