@guajiritos/image-picker 0.0.14 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2022/lib/guachos-image-picker.component.mjs +31 -33
  2. package/esm2022/utils/pipes/calculate-size/calculate-size.pipe.mjs +4 -4
  3. package/esm2022/utils/pipes/i18n/i18n.pipe.mjs +3 -3
  4. package/esm2022/utils/pipes/pipes.module.mjs +4 -4
  5. package/fesm2022/guajiritos-image-picker.mjs +40 -42
  6. package/fesm2022/guajiritos-image-picker.mjs.map +1 -1
  7. package/lib/guachos-image-picker.component.d.ts +2 -2
  8. package/package.json +6 -6
package/esm2022/utils/pipes/calculate-size/calculate-size.pipe.mjs CHANGED
@@ -12,13 +12,13 @@ export class CalculateSizePipe {
12
12
  return 0;
13
13
  }
14
14
  }
15
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
16
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
15
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
16
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
17
17
  }
18
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, decorators: [{
18
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalculateSizePipe, decorators: [{
19
19
  type: Pipe,
20
20
  args: [{
21
21
  name: 'calculateSize'
22
22
  }]
23
23
  }] });
24
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsY3VsYXRlLXNpemUucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2d1YWNob3MtaW1hZ2UtcGlja2VyL3NyYy91dGlscy9waXBlcy9jYWxjdWxhdGUtc2l6ZS9jYWxjdWxhdGUtc2l6ZS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUtwRCxNQUFNLE9BQU8saUJBQWlCO0lBRTVCLFNBQVMsQ0FBQyxXQUFtQjtRQUMzQixJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ2hCLE9BQU8sQ0FBQyxDQUFDO1NBQ1Y7UUFFRCxJQUFJLFdBQVcsRUFBRTtZQUNmLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLFdBQVcsQ0FBQyxHQUFHLElBQUksQ0FBQyxDQUFDO1NBQ2xEO2FBQU07WUFDTCxPQUFPLENBQUMsQ0FBQztTQUNWO0lBQ0gsQ0FBQzt1R0FaVSxpQkFBaUI7cUdBQWpCLGlCQUFpQjs7MkZBQWpCLGlCQUFpQjtrQkFIN0IsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsZUFBZTtpQkFDdEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ2NhbGN1bGF0ZVNpemUnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDYWxjdWxhdGVTaXplUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG5cclxuICB0cmFuc2Zvcm0oaW1hZ2VMZW5ndGg6IG51bWJlcik6IG51bWJlciB7XHJcbiAgICBpZiAoIWltYWdlTGVuZ3RoKSB7XHJcbiAgICAgIHJldHVybiAwO1xyXG4gICAgfVxyXG5cclxuICAgIGlmIChpbWFnZUxlbmd0aCkge1xyXG4gICAgICByZXR1cm4gTWF0aC5jZWlsKCgoMyAvIDQpICogaW1hZ2VMZW5ndGgpIC8gMTAyNCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gMDtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19
24
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsY3VsYXRlLXNpemUucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2d1YWNob3MtaW1hZ2UtcGlja2VyL3NyYy91dGlscy9waXBlcy9jYWxjdWxhdGUtc2l6ZS9jYWxjdWxhdGUtc2l6ZS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUtwRCxNQUFNLE9BQU8saUJBQWlCO0lBRTVCLFNBQVMsQ0FBQyxXQUFtQjtRQUMzQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDakIsT0FBTyxDQUFDLENBQUM7UUFDWCxDQUFDO1FBRUQsSUFBSSxXQUFXLEVBQUUsQ0FBQztZQUNoQixPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxXQUFXLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUNuRCxDQUFDO2FBQU0sQ0FBQztZQUNOLE9BQU8sQ0FBQyxDQUFDO1FBQ1gsQ0FBQztJQUNILENBQUM7dUdBWlUsaUJBQWlCO3FHQUFqQixpQkFBaUI7OzJGQUFqQixpQkFBaUI7a0JBSDdCLElBQUk7bUJBQUM7b0JBQ0osSUFBSSxFQUFFLGVBQWU7aUJBQ3RCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQFBpcGUoe1xyXG4gIG5hbWU6ICdjYWxjdWxhdGVTaXplJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2FsY3VsYXRlU2l6ZVBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuXHJcbiAgdHJhbnNmb3JtKGltYWdlTGVuZ3RoOiBudW1iZXIpOiBudW1iZXIge1xyXG4gICAgaWYgKCFpbWFnZUxlbmd0aCkge1xyXG4gICAgICByZXR1cm4gMDtcclxuICAgIH1cclxuXHJcbiAgICBpZiAoaW1hZ2VMZW5ndGgpIHtcclxuICAgICAgcmV0dXJuIE1hdGguY2VpbCgoKDMgLyA0KSAqIGltYWdlTGVuZ3RoKSAvIDEwMjQpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgcmV0dXJuIDA7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==
package/esm2022/utils/pipes/i18n/i18n.pipe.mjs CHANGED
@@ -44,10 +44,10 @@ export class I18nPipe {
44
44
  transform(key, language) {
45
45
  return language === 'en' ? this.en?.[key] : this.es?.[key];
46
46
  }
47
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
48
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, name: "i18n" });
47
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
48
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: I18nPipe, name: "i18n" });
49
49
  }
50
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, decorators: [{
50
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: I18nPipe, decorators: [{
51
51
  type: Pipe,
52
52
  args: [{
53
53
  name: 'i18n'
package/esm2022/utils/pipes/pipes.module.mjs CHANGED
@@ -3,11 +3,11 @@ import { I18nPipe } from './i18n/i18n.pipe';
3
3
  import { CalculateSizePipe } from './calculate-size/calculate-size.pipe';
4
4
  import * as i0 from "@angular/core";
5
5
  export class PipesModule {
6
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
7
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
8
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule });
6
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
7
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
8
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PipesModule });
9
9
  }
10
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, decorators: [{
10
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PipesModule, decorators: [{
11
11
  type: NgModule,
12
12
  args: [{
13
13
  declarations: [I18nPipe, CalculateSizePipe],
package/fesm2022/guajiritos-image-picker.mjs CHANGED
@@ -20,7 +20,7 @@ import * as i9 from '@angular/material/input';
20
20
  import { MatInputModule } from '@angular/material/input';
21
21
  import * as i10 from '@angular/material/select';
22
22
  import { MatSelectModule } from '@angular/material/select';
23
- import { NgIf, NgStyle, NgForOf } from '@angular/common';
23
+ import { NgStyle } from '@angular/common';
24
24
  import * as i11 from '@angular/material/core';
25
25
 
26
26
  class I18nPipe {
@@ -67,10 +67,10 @@ class I18nPipe {
67
67
  transform(key, language) {
68
68
  return language === 'en' ? this.en?.[key] : this.es?.[key];
69
69
  }
70
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
71
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, name: "i18n" });
70
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
71
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: I18nPipe, name: "i18n" });
72
72
  }
73
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, decorators: [{
73
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: I18nPipe, decorators: [{
74
74
  type: Pipe,
75
75
  args: [{
76
76
  name: 'i18n'
@@ -89,10 +89,10 @@ class CalculateSizePipe {
89
89
  return 0;
90
90
  }
91
91
  }
92
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
93
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
92
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
93
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
94
94
  }
95
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, decorators: [{
95
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CalculateSizePipe, decorators: [{
96
96
  type: Pipe,
97
97
  args: [{
98
98
  name: 'calculateSize'
@@ -100,11 +100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
100
100
  }] });
101
101
 
102
102
  class PipesModule {
103
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
104
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
105
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule });
103
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
104
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
105
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PipesModule });
106
106
  }
107
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, decorators: [{
107
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PipesModule, decorators: [{
108
108
  type: NgModule,
109
109
  args: [{
110
110
  declarations: [I18nPipe, CalculateSizePipe],
@@ -140,8 +140,8 @@ class GuajiritosImagePicker {
140
140
  maintainAspectRatio = new UntypedFormControl({ value: true, disabled: false });
141
141
  quality = new UntypedFormControl({ value: 70, disabled: false });
142
142
  format = new UntypedFormControl({ value: 'webp', disabled: false });
143
- maxHeight = 2000;
144
- maxWidth = 2000;
143
+ maxHeight = signal(2000);
144
+ maxWidth = signal(2000);
145
145
  cropHeight = new UntypedFormControl({ value: 150, disabled: false });
146
146
  cropWidth = new UntypedFormControl({ value: 150, disabled: false });
147
147
  imageName = signal('download');
@@ -177,8 +177,8 @@ class GuajiritosImagePicker {
177
177
  this.lastOriginSrc = null;
178
178
  this.$imageOriginal.next(null);
179
179
  this.format.setValue('jpeg');
180
- this.maxHeight = 2000;
181
- this.maxWidth = 2000;
180
+ this.maxHeight.set(2000);
181
+ this.maxWidth.set(2000);
182
182
  this.cropHeight.setValue(150);
183
183
  this.cropWidth.setValue(150);
184
184
  this.maintainAspectRatio.setValue(true);
@@ -212,8 +212,8 @@ class GuajiritosImagePicker {
212
212
  this.arrayCopiedImages = [];
213
213
  this.arrayCopiedImages.push({
214
214
  lastImage: this.imageSrc(),
215
- width: this.maxWidth,
216
- height: this.maxHeight,
215
+ width: this.maxWidth(),
216
+ height: this.maxHeight(),
217
217
  quality: this.quality.value,
218
218
  });
219
219
  this.$imageOriginal.next(this.imageSrc());
@@ -356,13 +356,13 @@ class GuajiritosImagePicker {
356
356
  }
357
357
  async onChangeQuality() {
358
358
  const qualityItem = this.quality.value / 100;
359
- this.maxHeight = this.maxHeight ?? 2000;
360
- this.maxWidth = this.maxWidth ?? 2000;
359
+ this.maxHeight.set(this.maxHeight() ?? 2000);
360
+ this.maxWidth.set(this.maxWidth() ?? 2000);
361
361
  await this.wait(250);
362
362
  try {
363
363
  const input = {
364
- height: this.maxHeight,
365
- width: this.maxWidth,
364
+ height: this.maxHeight(),
365
+ width: this.maxWidth(),
366
366
  dataType: this.format.value,
367
367
  quality: qualityItem,
368
368
  maintainRatio: this.maintainAspectRatio.value,
@@ -377,13 +377,13 @@ class GuajiritosImagePicker {
377
377
  }
378
378
  async onChangeFormat() {
379
379
  let qualityItem = this.quality.value / 100;
380
- this.maxHeight = this.maxHeight ?? 2000;
381
- this.maxWidth = this.maxWidth ?? 2000;
380
+ this.maxHeight.set(this.maxHeight() ?? 2000);
381
+ this.maxWidth.set(this.maxWidth() ?? 2000);
382
382
  await this.wait(250);
383
383
  try {
384
384
  let input = {
385
- height: this.maxHeight,
386
- width: this.maxWidth,
385
+ height: this.maxHeight(),
386
+ width: this.maxWidth(),
387
387
  dataType: this.format.value,
388
388
  quality: qualityItem,
389
389
  maintainRatio: this.maintainAspectRatio.value,
@@ -398,13 +398,13 @@ class GuajiritosImagePicker {
398
398
  }
399
399
  async onChangeSize(changeWidth, changeHeight) {
400
400
  let qualityItem = this.quality.value / 100;
401
- this.maxHeight = this.maxHeight ?? 2000;
402
- this.maxWidth = this.maxWidth ?? 2000;
401
+ this.maxHeight.set(this.maxHeight() ?? 2000);
402
+ this.maxWidth.set(this.maxWidth() ?? 2000);
403
403
  await this.wait(500);
404
404
  try {
405
405
  let input = {
406
- height: this.maxHeight,
407
- width: this.maxWidth,
406
+ height: this.maxHeight(),
407
+ width: this.maxWidth(),
408
408
  dataType: this.format.value,
409
409
  quality: qualityItem,
410
410
  maintainRatio: this.maintainAspectRatio.value,
@@ -512,8 +512,8 @@ class GuajiritosImagePicker {
512
512
  this.imageSrc.set(dataUri);
513
513
  this.showCrop.setValue(false);
514
514
  this.onCropStateChange();
515
- this.maxWidth = canvas?.width;
516
- this.maxHeight = canvas?.height;
515
+ this.maxWidth.set(canvas?.width);
516
+ this.maxHeight.set(canvas?.height);
517
517
  this.lastOriginSrc = this.originImageSrc + '';
518
518
  this.originImageSrc = dataUri;
519
519
  this.$imageChanged.next(this.imageSrc());
@@ -526,8 +526,8 @@ class GuajiritosImagePicker {
526
526
  if (this.arrayCopiedImages.length) {
527
527
  let lastState = this.arrayCopiedImages.pop();
528
528
  this.imageSrc.set(lastState.lastImage);
529
- this.maxWidth = lastState?.width;
530
- this.maxHeight = lastState?.height;
529
+ this.maxWidth.set(lastState.width);
530
+ this.maxHeight.set(lastState.height);
531
531
  this.originImageSrc = this.lastOriginSrc + '';
532
532
  this.noEdit.set(false);
533
533
  }
@@ -547,8 +547,8 @@ class GuajiritosImagePicker {
547
547
  this.$imageOriginal.next(null);
548
548
  this.$imageChanged.next(null);
549
549
  this.format.setValue('jpeg');
550
- this.maxHeight = 2000;
551
- this.maxWidth = 2000;
550
+ this.maxHeight.set(2000);
551
+ this.maxWidth.set(2000);
552
552
  this.cropHeight.setValue(150);
553
553
  this.cropWidth.setValue(150);
554
554
  this.maintainAspectRatio.setValue(true);
@@ -559,13 +559,12 @@ class GuajiritosImagePicker {
559
559
  this.unsubscribeAll$.next();
560
560
  this.unsubscribeAll$.complete();
561
561
  }
562
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: GuajiritosImagePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
563
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: GuajiritosImagePicker, isStandalone: true, selector: "guajiritos-image-picker", inputs: { appearance: "appearance", color: "color", imagesAllowed: "imagesAllowed", _imageSrc: "_imageSrc", _config: "_config" }, outputs: { $imageChanged: "$imageChanged", $imageOriginal: "$imageOriginal" }, viewQueries: [{ propertyName: "imagePicker", first: true, predicate: ["imagePicker"], descendants: true }], ngImport: i0, template: "<div *ngIf='!loadImage()' class='place-image'>\r\n <div class='image-holder'\r\n [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\r\n (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf='loadImage()' class='place-image'>\r\n <div class='image-holder-loaded'\r\n [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\r\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n </p>\r\n\r\n <div class='editing-bar-btn'>\r\n <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\r\n [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\r\n [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\r\n <mat-icon class='mat-18'>edit</mat-icon>\r\n </button>\r\n <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\r\n [href]='imageSrc()' mat-icon-button [download]='imageName'>\r\n <mat-icon class='mat-18'>cloud_download</mat-icon>\r\n </a>\r\n <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\r\n [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\r\n <mat-icon class='mat-18'>delete</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\r\n <div class='popup-clear'>\r\n <button mat-icon-button (click)='onCloseEditPanel()'>\r\n <mat-icon class='mat-18'>clear</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class='image-container'>\r\n <div class='image-holder-full'>\r\n <img id='image-full' [src]='imageSrc()' alt=''>\r\n <div id='image-cropper' class='image-cropper'>\r\n <div id='image-cropper-header'>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class='control-panel'>\r\n <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\r\n <div class='quality-container'>\r\n <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\r\n [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\r\n <input matSliderThumb [formControl]='quality'>\r\n </mat-slider>\r\n </div>\r\n\r\n <div class='item-panel'>\r\n <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\r\n <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\r\n <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div class='max-dimension-container'>\r\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\r\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n\r\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\r\n [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n\r\n <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\r\n <div class='formats-selection'>\r\n <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\r\n <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\r\n <mat-option *ngFor='let format of allFormats' [value]='format'>\r\n {{ format }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class='refresh-container'>\r\n <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\r\n <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\r\n </mat-checkbox>\r\n <div class='d-flex '>\r\n <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n <p *ngIf='showCrop.value'>\r\n <button mat-icon-button [color]='color' (click)='onCrop()'>\r\n <mat-icon>crop</mat-icon>\r\n </button>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf='showCrop.value'>\r\n <div class='dimension-container'>\r\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\r\n [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\r\n [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <div class='save-container'>\r\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\r\n {{ 'SAVE' | i18n: config()?.language}}\r\n </button>\r\n\r\n <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\r\n [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i12.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i12.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
562
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GuajiritosImagePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
563
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: GuajiritosImagePicker, isStandalone: true, selector: "guajiritos-image-picker", inputs: { appearance: "appearance", color: "color", imagesAllowed: "imagesAllowed", _imageSrc: "_imageSrc", _config: "_config" }, outputs: { $imageChanged: "$imageChanged", $imageOriginal: "$imageOriginal" }, viewQueries: [{ propertyName: "imagePicker", first: true, predicate: ["imagePicker"], descendants: true }], ngImport: i0, template: "@if (!loadImage()) {\n <div class='place-image'>\n <div class='image-holder'\n [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\n (click)='onUpload($event)'>\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\n </button>\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n </div>\n </div>\n}\n\n@if (loadImage()) {\n <div class='place-image'>\n <div class='image-holder-loaded'\n [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n </div>\n @if (imageSrc()?.length) {\n <p class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n {{ \"SIZE\" | i18n: currentLanguage() }}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n </p>\n }\n <div class='editing-bar-btn'>\n @if (!config()?.hideAddBtn) {\n <button id='upload-img' mat-icon-button (click)='onUpload($event)'\n [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\n </button>\n }\n @if (!config()?.hideEditBtn && !noEdit()) {\n <button id='edit-img' mat-icon-button (click)='showEditPanel.set(true)'\n [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\n <mat-icon class='mat-18'>edit</mat-icon>\n </button>\n }\n @if (!config()?.hideDownloadBtn) {\n <a id='download-img' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\n [href]='imageSrc()' mat-icon-button [download]='imageName'>\n <mat-icon class='mat-18'>cloud_download</mat-icon>\n </a>\n }\n @if (!config()?.hideDeleteBtn) {\n <button id='delete-img' mat-icon-button (click)='onRemove()'\n [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\n <mat-icon class='mat-18'>delete</mat-icon>\n </button>\n }\n </div>\n </div>\n}\n\n@if (showEditPanel()) {\n <div id='popup' class='popup'>\n <div class='popup-clear'>\n <button mat-icon-button (click)='onCloseEditPanel()'>\n <mat-icon class='mat-18'>clear</mat-icon>\n </button>\n </div>\n <div class='image-container'>\n <div class='image-holder-full'>\n <img id='image-full' [src]='imageSrc()' alt=''>\n <div id='image-cropper' class='image-cropper'>\n <div id='image-cropper-header'>\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </div>\n <div class='control-panel'>\n <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\n <div class='quality-container'>\n <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\n [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n <input matSliderThumb [formControl]='quality'>\n </mat-slider>\n </div>\n <div class='item-panel'>\n <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\n <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\n <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\n </mat-checkbox>\n </div>\n <div class='max-dimension-container'>\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeSize(true, false)' matInput\n [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeSize(false, true)' matInput\n [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\n [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n </div>\n <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\n <div class='formats-selection'>\n <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\n <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\n @for (format of allFormats; track format) {\n <mat-option [value]='format'>\n {{ format }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n <div class='refresh-container'>\n <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\n <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\n </mat-checkbox>\n <div class='d-flex '>\n <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\n <mat-icon>refresh</mat-icon>\n </button>\n @if (showCrop.value) {\n <p>\n <button mat-icon-button [color]='color' (click)='onCrop()'>\n <mat-icon>crop</mat-icon>\n </button>\n </p>\n }\n </div>\n </div>\n @if (showCrop.value) {\n <div class='dimension-container'>\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\n [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\n [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n </div>\n }\n <div class='save-container'>\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\n {{ 'SAVE' | i18n: config()?.language }}\n </button>\n @if (imageSrc()?.length) {\n <p class='mat-caption image-caption'\n [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n {{ \"SIZE\" | i18n: currentLanguage() }}: {{ (imageSrc()?.length | calculateSize) }}Kb\n &nbsp; {{ format.value }}\n </p>\n }\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:#fff!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i12.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i12.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
564
564
  }
565
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
565
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
566
566
  type: Component,
567
567
  args: [{ selector: 'guajiritos-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
568
- NgIf,
569
568
  NgStyle,
570
569
  MatTooltipModule,
571
570
  MatIconModule,
@@ -577,9 +576,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
577
576
  MatInputModule,
578
577
  MatSelectModule,
579
578
  FormsModule,
580
- ReactiveFormsModule,
581
- NgForOf,
582
- ], template: "<div *ngIf='!loadImage()' class='place-image'>\r\n <div class='image-holder'\r\n [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\r\n (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf='loadImage()' class='place-image'>\r\n <div class='image-holder-loaded'\r\n [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\r\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n </p>\r\n\r\n <div class='editing-bar-btn'>\r\n <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\r\n [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\r\n [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\r\n <mat-icon class='mat-18'>edit</mat-icon>\r\n </button>\r\n <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\r\n [href]='imageSrc()' mat-icon-button [download]='imageName'>\r\n <mat-icon class='mat-18'>cloud_download</mat-icon>\r\n </a>\r\n <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\r\n [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\r\n <mat-icon class='mat-18'>delete</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\r\n <div class='popup-clear'>\r\n <button mat-icon-button (click)='onCloseEditPanel()'>\r\n <mat-icon class='mat-18'>clear</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class='image-container'>\r\n <div class='image-holder-full'>\r\n <img id='image-full' [src]='imageSrc()' alt=''>\r\n <div id='image-cropper' class='image-cropper'>\r\n <div id='image-cropper-header'>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class='control-panel'>\r\n <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\r\n <div class='quality-container'>\r\n <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\r\n [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\r\n <input matSliderThumb [formControl]='quality'>\r\n </mat-slider>\r\n </div>\r\n\r\n <div class='item-panel'>\r\n <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\r\n <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\r\n <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div class='max-dimension-container'>\r\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\r\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n\r\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\r\n [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n\r\n <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\r\n <div class='formats-selection'>\r\n <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\r\n <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\r\n <mat-option *ngFor='let format of allFormats' [value]='format'>\r\n {{ format }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class='refresh-container'>\r\n <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\r\n <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\r\n </mat-checkbox>\r\n <div class='d-flex '>\r\n <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n <p *ngIf='showCrop.value'>\r\n <button mat-icon-button [color]='color' (click)='onCrop()'>\r\n <mat-icon>crop</mat-icon>\r\n </button>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf='showCrop.value'>\r\n <div class='dimension-container'>\r\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\r\n [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\r\n [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n <div class='save-container'>\r\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\r\n {{ 'SAVE' | i18n: config()?.language}}\r\n </button>\r\n\r\n <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\r\n [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"] }]
579
+ ReactiveFormsModule
580
+ ], template: "@if (!loadImage()) {\n <div class='place-image'>\n <div class='image-holder'\n [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\n (click)='onUpload($event)'>\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\n </button>\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n </div>\n </div>\n}\n\n@if (loadImage()) {\n <div class='place-image'>\n <div class='image-holder-loaded'\n [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\n <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n </div>\n @if (imageSrc()?.length) {\n <p class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n {{ \"SIZE\" | i18n: currentLanguage() }}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n </p>\n }\n <div class='editing-bar-btn'>\n @if (!config()?.hideAddBtn) {\n <button id='upload-img' mat-icon-button (click)='onUpload($event)'\n [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\n </button>\n }\n @if (!config()?.hideEditBtn && !noEdit()) {\n <button id='edit-img' mat-icon-button (click)='showEditPanel.set(true)'\n [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\n <mat-icon class='mat-18'>edit</mat-icon>\n </button>\n }\n @if (!config()?.hideDownloadBtn) {\n <a id='download-img' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\n [href]='imageSrc()' mat-icon-button [download]='imageName'>\n <mat-icon class='mat-18'>cloud_download</mat-icon>\n </a>\n }\n @if (!config()?.hideDeleteBtn) {\n <button id='delete-img' mat-icon-button (click)='onRemove()'\n [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\n <mat-icon class='mat-18'>delete</mat-icon>\n </button>\n }\n </div>\n </div>\n}\n\n@if (showEditPanel()) {\n <div id='popup' class='popup'>\n <div class='popup-clear'>\n <button mat-icon-button (click)='onCloseEditPanel()'>\n <mat-icon class='mat-18'>clear</mat-icon>\n </button>\n </div>\n <div class='image-container'>\n <div class='image-holder-full'>\n <img id='image-full' [src]='imageSrc()' alt=''>\n <div id='image-cropper' class='image-cropper'>\n <div id='image-cropper-header'>\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </div>\n <div class='control-panel'>\n <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\n <div class='quality-container'>\n <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\n [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n <input matSliderThumb [formControl]='quality'>\n </mat-slider>\n </div>\n <div class='item-panel'>\n <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\n <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\n <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\n </mat-checkbox>\n </div>\n <div class='max-dimension-container'>\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeSize(true, false)' matInput\n [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeSize(false, true)' matInput\n [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\n [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n </div>\n <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\n <div class='formats-selection'>\n <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\n <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\n @for (format of allFormats; track format) {\n <mat-option [value]='format'>\n {{ format }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n <div class='refresh-container'>\n <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\n <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\n </mat-checkbox>\n <div class='d-flex '>\n <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\n <mat-icon>refresh</mat-icon>\n </button>\n @if (showCrop.value) {\n <p>\n <button mat-icon-button [color]='color' (click)='onCrop()'>\n <mat-icon>crop</mat-icon>\n </button>\n </p>\n }\n </div>\n </div>\n @if (showCrop.value) {\n <div class='dimension-container'>\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\n [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\n [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\n </mat-form-field>\n </div>\n }\n <div class='save-container'>\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\n {{ 'SAVE' | i18n: config()?.language }}\n </button>\n @if (imageSrc()?.length) {\n <p class='mat-caption image-caption'\n [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n {{ \"SIZE\" | i18n: currentLanguage() }}: {{ (imageSrc()?.length | calculateSize) }}Kb\n &nbsp; {{ format.value }}\n </p>\n }\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:#fff!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"] }]
583
581
  }], propDecorators: { appearance: [{
584
582
  type: Input
585
583
  }], color: [{