@seniorsistemas/angular-components 17.3.7 → 17.3.8

package/fesm5/seniorsistemas-angular-components.js

@@ -1,7 +1,7 @@
 import { __decorate, __extends, __spread, __assign, __awaiter, __generator, __param, __values, __rest, __read } from 'tslib';
 import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, HostBinding, Renderer2, InjectionToken, Inject, Pipe, ViewEncapsulation, TemplateRef, ViewContainerRef, ChangeDetectorRef, Optional, ContentChild } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
-import { Subject, ReplaySubject, of, from, throwError, forkJoin } from 'rxjs';
+import { Subject, ReplaySubject, of, from, throwError, forkJoin, Observable } from 'rxjs';
 import { takeUntil, filter, take, tap, map, switchMap, catchError, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup, NG_VALIDATORS, FormBuilder, Validators, FormArray, ControlContainer } from '@angular/forms';
@@ -12657,6 +12657,30 @@ var StructureModule = /** @class */ (function () {
     return StructureModule;
 }());
 
+var ImageUtils;
+(function (ImageUtils) {
+    function adjustAspectRatio(imageBase64) {
+        return new Observable(function (observer) {
+            var image = new Image();
+            image.src = imageBase64;
+            image.onload = function () {
+                var canvas = document.createElement('canvas');
+                var context = canvas.getContext('2d');
+                var size = Math.max(image.naturalWidth, image.naturalHeight);
+                canvas.width = size;
+                canvas.height = size;
+                context.fillStyle = 'rgba(0, 0, 0, 0)';
+                context.fillRect(0, 0, size, size);
+                context.drawImage(image, (size - image.naturalWidth) / 2, (size - image.naturalHeight) / 2);
+                var adjustedImageBase64 = canvas.toDataURL();
+                observer.next(adjustedImageBase64);
+                observer.complete();
+            };
+        });
+    }
+    ImageUtils.adjustAspectRatio = adjustAspectRatio;
+})(ImageUtils || (ImageUtils = {}));
+
 var ImageCropperComponent = /** @class */ (function () {
     function ImageCropperComponent() {
         this.id = "s-image-cropper-" + ImageCropperComponent_1.nextId++;
@@ -12692,16 +12716,20 @@ var ImageCropperComponent = /** @class */ (function () {
         }
     };
     ImageCropperComponent.prototype.initCropper = function () {
+        var _this = this;
         if (this.cropper)
             this.cropper.destroy();
-        this.image.nativeElement.src = this.imageSource;
-        this.cropper = new Cropper(this.image.nativeElement, {
-            aspectRatio: this.rounded ? 1 : this.aspectRatio,
-            guides: false,
-            dragMode: "move",
-            minCropBoxHeight: 2,
-            minCropBoxWidth: 2,
-            toggleDragModeOnDblclick: false,
+        ImageUtils.adjustAspectRatio(this.imageSource)
+            .subscribe(function (imageBase64) {
+            _this.image.nativeElement.src = imageBase64;
+            _this.cropper = new Cropper(_this.image.nativeElement, {
+                aspectRatio: _this.rounded ? 1 : _this.aspectRatio,
+                guides: false,
+                dragMode: "move",
+                minCropBoxHeight: 2,
+                minCropBoxWidth: 2,
+                toggleDragModeOnDblclick: false,
+            });
         });
     };
     ImageCropperComponent.prototype.getRoundedCanvas = function (sourceCanvas) {
@@ -12725,13 +12753,6 @@ var ImageCropperComponent = /** @class */ (function () {
             this.croppedCanvas.emit();
         }
         else {
-            //hack to fix images if canvas doesnt match image (for mobile, tablets, etc)
-            if (this.cropper.getCanvasData().height !== this.cropper.getImageData().height) {
-                this.cropper.getImageData().scaleY = this.cropper.getImageData().height / this.cropper.getCanvasData().height;
-            }
-            if (this.cropper.getCanvasData().width !== this.cropper.getImageData().width) {
-                this.cropper.getImageData().scaleX = this.cropper.getImageData().width / this.cropper.getCanvasData().width;
-            }
             var _croppedCanvas = this.rounded
                 ? this.getRoundedCanvas(this.cropper.getCroppedCanvas())
                 : this.cropper.getCroppedCanvas();