@guajiritos/image-picker 0.0.2 → 0.0.4

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 (7) hide show
  1. package/esm2020/lib/guachos-image-picker.component.mjs +43 -44
  2. package/fesm2015/guajiritos-image-picker.mjs +48 -44
  3. package/fesm2015/guajiritos-image-picker.mjs.map +1 -1
  4. package/fesm2020/guajiritos-image-picker.mjs +42 -43
  5. package/fesm2020/guajiritos-image-picker.mjs.map +1 -1
  6. package/lib/guachos-image-picker.component.d.ts +2 -2
  7. package/package.json +5 -5
package/fesm2015/guajiritos-image-picker.mjs CHANGED
@@ -72,6 +72,7 @@ class GuajiritosImagePicker {
72
72
  'Download the image': 'Download the image',
73
73
  'Control Panel': 'Control Panel',
74
74
  Quality: 'Quality',
75
+ save: 'Save',
75
76
  'Max dimensions': 'Max dimensions',
76
77
  'aspect-ratio': 'aspect-ratio',
77
78
  'max-width(px)': 'max-width(px)',
@@ -90,6 +91,7 @@ class GuajiritosImagePicker {
90
91
  'Download the image': 'Descargue la imagen',
91
92
  'Control Panel': 'Panel de control',
92
93
  Remove: 'Quitar',
94
+ save: 'Guardar',
93
95
  Quality: 'Calidad',
94
96
  'Max dimensions': 'Dimensiones',
95
97
  'aspect-ratio': 'relación-aspecto',
@@ -100,24 +102,6 @@ class GuajiritosImagePicker {
100
102
  'width(px)': 'ancho(px)',
101
103
  'height(px)': 'altura(px)',
102
104
  };
103
- this.labelFr = {
104
- 'Upload a image': 'Charger une image',
105
- 'You must edit the image in order to resize it': 'Vous devez éditer l\'image pour changer sa taille',
106
- 'too large': 'Trop grande',
107
- 'Open the editor panel': 'Ouvrir le panneau d\'édition',
108
- 'Download the image': 'Télécharger l\'image',
109
- 'Control Panel': 'Panneau de commande',
110
- Remove: 'Supprimer',
111
- Quality: 'Qualité',
112
- 'Max dimensions': 'Dimensions maximales',
113
- 'aspect-ratio': 'rapport de forme',
114
- 'max-width(px)': 'largeur max.',
115
- 'max-height(px)': 'hauteur max',
116
- Format: 'Format',
117
- Crop: 'Recadrer',
118
- 'width(px)': 'largeur(px)',
119
- 'height(px)': 'hauteur(px)',
120
- };
121
105
  this.arrayCopiedImages = [];
122
106
  this.config = {
123
107
  height: '240px',
@@ -132,6 +116,7 @@ class GuajiritosImagePicker {
132
116
  };
133
117
  this.showCrop = false;
134
118
  this.loadImage = false;
119
+ this.noEdit = false;
135
120
  this.uuidFilePicker = Date.now().toString(20);
136
121
  this.showEditPanel = false;
137
122
  this.quality = 92;
@@ -143,12 +128,12 @@ class GuajiritosImagePicker {
143
128
  this.cropWidth = 150;
144
129
  this.maintainAspectRatio = true;
145
130
  this.imageName = 'download';
131
+ this.labels = this.labelEn;
146
132
  this.appearance = 'outline';
147
133
  this.color = 'primary';
148
134
  this.imagesAllowed = 'image/*';
149
135
  this.$imageChanged = new EventEmitter();
150
136
  this.$imageOriginal = new EventEmitter();
151
- this.labels = this.labelEn;
152
137
  }
153
138
  set _imageSrc(image) {
154
139
  if (image) {
@@ -164,12 +149,14 @@ class GuajiritosImagePicker {
164
149
  this.lastOriginSrc = image;
165
150
  this.$imageOriginal.next(this.originImageSrc);
166
151
  this.loadImage = true;
167
- this._cdRef.markForCheck();
152
+ this.noEdit = true;
153
+ this._cdRef.detectChanges();
168
154
  }
169
155
  else {
170
156
  this.imageSrc = null;
171
157
  this.originImageSrc = null;
172
158
  this.loadImage = false;
159
+ this.noEdit = false;
173
160
  this.arrayCopiedImages = [];
174
161
  this.lastOriginSrc = null;
175
162
  this.$imageOriginal.next(null);
@@ -180,21 +167,18 @@ class GuajiritosImagePicker {
180
167
  this.cropWidth = 150;
181
168
  this.maintainAspectRatio = true;
182
169
  this.showEditPanel = false;
183
- this._cdRef.markForCheck();
170
+ this._cdRef.detectChanges();
184
171
  }
185
172
  }
186
173
  set _config(value) {
187
174
  if (value && value.constructor == Object) {
188
175
  this.config = Object.assign(Object.assign({}, this.config), value);
189
176
  if ((value === null || value === void 0 ? void 0 : value.language) !== undefined) {
190
- if (value.language === 'en') {
191
- this.labels = Object.assign({}, this.labelEn);
192
- }
193
177
  if (value.language === 'es') {
194
178
  this.labels = Object.assign({}, this.labelEs);
195
179
  }
196
- if (value.language === 'fr') {
197
- this.labels = Object.assign({}, this.labelFr);
180
+ if (value.language === 'en') {
181
+ this.labels = Object.assign({}, this.labelEn);
198
182
  }
199
183
  }
200
184
  }
@@ -228,23 +212,26 @@ class GuajiritosImagePicker {
228
212
  }
229
213
  this.$imageChanged.next(this.imageSrc);
230
214
  this.loadImage = true;
215
+ this._cdRef.detectChanges();
231
216
  });
232
217
  }
233
218
  resizeDataURL(datas, input) {
234
219
  return __awaiter(this, void 0, void 0, function* () {
235
220
  return yield new Promise(function (resolve) {
221
+ var _a;
236
222
  return __awaiter(this, void 0, void 0, function* () {
237
223
  let img = document.createElement('img');
238
224
  img.src = datas + '';
239
225
  img.crossOrigin = 'Anonymous';
240
- let quality = input.quality ? input.quality : 1.0;
241
- let maintainRatio = input.maintainRatio != undefined ? input.maintainRatio : true;
226
+ let quality = (_a = input === null || input === void 0 ? void 0 : input.quality) !== null && _a !== void 0 ? _a : 1.0;
227
+ let maintainRatio = input.maintainRatio !== undefined ? input.maintainRatio : true;
242
228
  img.onload = function () {
229
+ var _a, _b;
243
230
  const canvas = document.createElement('canvas');
244
231
  const ctx = canvas.getContext('2d');
245
232
  let ratio = img.width / img.height;
246
- let width = input.width ? input.width : img.width;
247
- let height = input.height ? input.height : img.height;
233
+ let width = (_a = input === null || input === void 0 ? void 0 : input.width) !== null && _a !== void 0 ? _a : img.width;
234
+ let height = (_b = input === null || input === void 0 ? void 0 : input.height) !== null && _b !== void 0 ? _b : img.height;
248
235
  if (maintainRatio) {
249
236
  if (input.changeHeight) {
250
237
  canvas.width = height * ratio;
@@ -346,13 +333,15 @@ class GuajiritosImagePicker {
346
333
  (_a = this.imagePicker) === null || _a === void 0 ? void 0 : _a.nativeElement.click();
347
334
  }
348
335
  handleFileSelect(evt) {
349
- var _a;
350
- const files = (_a = evt.target) === null || _a === void 0 ? void 0 : _a.files;
336
+ var _a, _b;
337
+ const files = (_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.files;
351
338
  if (files) {
352
339
  const file = files[0];
353
- this.imageName = file.name.split('.')[0];
354
- this.fileType = file.type;
355
- this.urlImage = `data:${file.type};base64,`;
340
+ this.imageName = (_b = file === null || file === void 0 ? void 0 : file.name) === null || _b === void 0 ? void 0 : _b.split('.')[0];
341
+ this.fileType = file === null || file === void 0 ? void 0 : file.type;
342
+ this.urlImage = `data:${file === null || file === void 0 ? void 0 : file.type};base64,`;
343
+ this.noEdit = false;
344
+ this._cdRef.detectChanges();
356
345
  if (files && file) {
357
346
  const reader = new FileReader();
358
347
  reader.onload = this.handleReaderLoaded.bind(this);
@@ -371,10 +360,11 @@ class GuajiritosImagePicker {
371
360
  this.showEditPanel = false;
372
361
  }
373
362
  onChangeQuality() {
363
+ var _a, _b;
374
364
  return __awaiter(this, void 0, void 0, function* () {
375
365
  const qualityItem = this.quality / 100;
376
- this.maxHeight = this.maxHeight && +this.maxHeight ? this.maxHeight : 2000;
377
- this.maxWidth = this.maxWidth && +this.maxWidth ? this.maxWidth : 2000;
366
+ this.maxHeight = (_a = this.maxHeight) !== null && _a !== void 0 ? _a : 2000;
367
+ this.maxWidth = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : 2000;
378
368
  yield this.wait(250);
379
369
  try {
380
370
  const input = {
@@ -387,17 +377,20 @@ class GuajiritosImagePicker {
387
377
  this.imageSrc = yield this.resizeDataURL(this.originImageSrc, input);
388
378
  this.$imageChanged.next(this.imageSrc);
389
379
  this.loadImage = true;
380
+ this._cdRef.detectChanges();
390
381
  }
391
382
  catch (error) {
392
383
  this.loadImage = true;
384
+ this._cdRef.detectChanges();
393
385
  }
394
386
  });
395
387
  }
396
388
  onChangeFormat() {
389
+ var _a, _b;
397
390
  return __awaiter(this, void 0, void 0, function* () {
398
391
  let qualityItem = this.quality / 100;
399
- this.maxHeight = this.maxHeight && +this.maxHeight ? this.maxHeight : 2000;
400
- this.maxWidth = this.maxWidth && +this.maxWidth ? this.maxWidth : 2000;
392
+ this.maxHeight = (_a = this.maxHeight) !== null && _a !== void 0 ? _a : 2000;
393
+ this.maxWidth = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : 2000;
401
394
  yield this.wait(250);
402
395
  try {
403
396
  let input = {
@@ -410,17 +403,20 @@ class GuajiritosImagePicker {
410
403
  this.imageSrc = yield this.resizeDataURL(this.originImageSrc, input);
411
404
  this.$imageChanged.next(this.imageSrc);
412
405
  this.loadImage = true;
406
+ this._cdRef.detectChanges();
413
407
  }
414
408
  catch (error) {
415
409
  this.loadImage = true;
410
+ this._cdRef.detectChanges();
416
411
  }
417
412
  });
418
413
  }
419
414
  onChangeSize(changeWidth, changeHeight) {
415
+ var _a, _b;
420
416
  return __awaiter(this, void 0, void 0, function* () {
421
417
  let qualityItem = this.quality / 100;
422
- this.maxHeight = this.maxHeight && +this.maxHeight ? this.maxHeight : 2000;
423
- this.maxWidth = this.maxWidth && +this.maxWidth ? this.maxWidth : 2000;
418
+ this.maxHeight = (_a = this.maxHeight) !== null && _a !== void 0 ? _a : 2000;
419
+ this.maxWidth = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : 2000;
424
420
  yield this.wait(500);
425
421
  try {
426
422
  let input = {
@@ -435,9 +431,11 @@ class GuajiritosImagePicker {
435
431
  this.imageSrc = yield this.resizeDataURL(this.originImageSrc, input);
436
432
  this.$imageChanged.next(this.imageSrc);
437
433
  this.loadImage = true;
434
+ this._cdRef.detectChanges();
438
435
  }
439
436
  catch (error) {
440
437
  this.loadImage = true;
438
+ this._cdRef.detectChanges();
441
439
  }
442
440
  });
443
441
  }
@@ -487,7 +485,7 @@ class GuajiritosImagePicker {
487
485
  }
488
486
  }
489
487
  onCrop(type) {
490
- type = type ? type : this.format;
488
+ type = type !== null && type !== void 0 ? type : this.format;
491
489
  const cropper = document.getElementById('image-cropper');
492
490
  const elementFull = document.getElementById('image-full');
493
491
  const rectCropper = cropper.getBoundingClientRect();
@@ -532,10 +530,14 @@ class GuajiritosImagePicker {
532
530
  this.maxWidth = lastState.width;
533
531
  this.maxHeight = lastState.height;
534
532
  this.originImageSrc = this.lastOriginSrc + '';
533
+ this.noEdit = false;
534
+ this._cdRef.detectChanges();
535
535
  }
536
536
  else {
537
537
  this.imageSrc = this.lastOriginSrc;
538
538
  this.originImageSrc = this.lastOriginSrc + '';
539
+ this.noEdit = false;
540
+ this._cdRef.detectChanges();
539
541
  }
540
542
  this.$imageChanged.next(this.imageSrc);
541
543
  }
@@ -554,6 +556,8 @@ class GuajiritosImagePicker {
554
556
  this.cropWidth = 150;
555
557
  this.maintainAspectRatio = true;
556
558
  this.showEditPanel = false;
559
+ this.noEdit = false;
560
+ this._cdRef.detectChanges();
557
561
  }
558
562
  ngOnDestroy() {
559
563
  this.unsubscribeAll$.next();
@@ -561,7 +565,7 @@ class GuajiritosImagePicker {
561
565
  }
562
566
  }
563
567
  GuajiritosImagePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GuajiritosImagePicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
564
- GuajiritosImagePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n</div>\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' style='display: 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'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n\r\n <div class='editing-bar-btn'\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\r\n (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <button id='edit-img' *ngIf='!config.hideEditBtn' mat-icon-button [matTooltip]=\"labels['Open the editor panel']\"\r\n (click)='showEditPanel = true'>\r\n <mat-icon class='mat-18'>edit</mat-icon>\r\n </button>\r\n <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\r\n (click)='onRemove()'>\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\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\r\n\r\n <p class='item-panel'>{{ labels['Quality'] }}</p>\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-slider [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\r\n [(ngModel)]='quality' [min]='0' [max]='100' [step]='1'>\r\n </mat-slider>\r\n </div>\r\n\r\n <p class='item-panel'>\r\n {{ labels['Max dimensions'] }}\r\n <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\r\n <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\r\n </mat-checkbox>\r\n </p>\r\n <div\r\n style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['max-width(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\r\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['max-height(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\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'>{{ labels['Format'] }}</p>\r\n <div\r\n style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-form-field class='no-input-style' style='max-width: 100%; width: 100%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-select [(ngModel)]='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>\r\n <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\r\n <p class='item-panel'>{{ labels['Crop'] }}</p>\r\n </mat-checkbox>\r\n <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-container *ngIf='showCrop'>\r\n <div\r\n style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['width(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\r\n [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['height(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput\r\n [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n\r\n <p style='margin-bottom: 4px !important'>\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 </ng-container>\r\n\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\r\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\r\n style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\r\n Guardar\r\n </button>\r\n\r\n <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["guajiritos-image-picker p{margin:0!important;padding:0!important}guajiritos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guajiritos-image-picker .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;border:2px rgba(0,0,0,.3) solid;background-color:#fcfcfc}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guajiritos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .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}guajiritos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guajiritos-image-picker .place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:cover;object-position:center}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn{margin-top:2px}guajiritos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guajiritos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guajiritos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#000c;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guajiritos-image-picker .popup .image-container{margin-top:50px;margin-bottom:50px;height:100%;min-height:100%;min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}guajiritos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guajiritos-image-picker .popup img{max-height:600px;max-width:100%;object-fit:cover;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){guajiritos-image-picker .popup{background-color:#000000d9;padding:8px}guajiritos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guajiritos-image-picker .popup img{margin:0}}guajiritos-image-picker .popup .control-panel{color:#fff;background-color:#000000eb;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){guajiritos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guajiritos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guajiritos-image-picker .popup .control-panel .item-panel{padding:0 4px;font-size:14px;font-weight:500}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guajiritos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guajiritos-image-picker .mat-select-panel{background:#fafafa!important}guajiritos-image-picker input.mat-input-element{color:#000000d9}guajiritos-image-picker .mat-checkbox-background{background-color:#fff}guajiritos-image-picker .image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid #fafafa;box-sizing:border-box;resize:both;overflow:auto;opacity:0}guajiritos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guajiritos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guajiritos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guajiritos-image-picker .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: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CalculateSizeModule }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i5.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.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: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.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: i11.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i11.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
568
+ GuajiritosImagePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n</div>\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' style='display: 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'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n\r\n <div class='editing-bar-btn'\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\r\n (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <button id='edit-img' *ngIf='!config.hideEditBtn' mat-icon-button [matTooltip]=\"labels['Open the editor panel']\"\r\n (click)='showEditPanel = true'>\r\n <mat-icon class='mat-18'>edit</mat-icon>\r\n </button>\r\n <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\r\n (click)='onRemove()'>\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\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\r\n\r\n <p class='item-panel'>{{ labels['Quality'] }}</p>\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-slider ngDefaultControl [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\r\n [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\r\n <input matSliderThumb [(ngModel)]='quality'>\r\n </mat-slider>\r\n </div>\r\n\r\n <div class='item-panel'>\r\n <span>{{ labels['Max dimensions'] }}</span>\r\n <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\r\n <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div\r\n style='margin-top: 16px !important; flex-flow: row; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field style='width: 48%' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ labels['max-width(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\r\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n\r\n <mat-form-field style='width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['max-height(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\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'>{{ labels['Format'] }}</p>\r\n <div\r\n style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-form-field style='max-width: 100%; width: 100%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-select [(ngModel)]='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>\r\n <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\r\n <p class='item-panel'>{{ labels['Crop'] }}</p>\r\n </mat-checkbox>\r\n <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-container *ngIf='showCrop'>\r\n <div\r\n style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['width(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\r\n [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['height(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput\r\n [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n\r\n <p style='margin-bottom: 4px !important'>\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 </ng-container>\r\n\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\r\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\r\n style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\r\n {{labels['save']}}\r\n </button>\r\n\r\n <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["guajiritos-image-picker p{margin:0!important;padding:0!important}guajiritos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guajiritos-image-picker .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;border:2px rgba(0,0,0,.3) solid;background-color:#fcfcfc}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guajiritos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .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}guajiritos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guajiritos-image-picker .place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:cover;object-position:center}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn{margin-top:2px}guajiritos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guajiritos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guajiritos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#616161;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guajiritos-image-picker .popup .image-container{margin-top:50px;margin-bottom:50px;height:100%;min-height:100%;min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}guajiritos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guajiritos-image-picker .popup img{max-height:600px;max-width:100%;object-fit:cover;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){guajiritos-image-picker .popup{background-color:#000000d9;padding:8px}guajiritos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guajiritos-image-picker .popup img{margin:0}}guajiritos-image-picker .popup .control-panel{color:#fff;background-color:#000000eb;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){guajiritos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guajiritos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guajiritos-image-picker .popup .control-panel .item-panel{padding:0 4px!important;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guajiritos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guajiritos-image-picker .mat-select-panel{background:#fafafa!important}guajiritos-image-picker input.mat-input-element{color:#000000d9}guajiritos-image-picker .mat-checkbox-background{background-color:#fff}guajiritos-image-picker .image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid #fafafa;box-sizing:border-box;resize:both;overflow:auto;opacity:0}guajiritos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guajiritos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guajiritos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guajiritos-image-picker .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: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CalculateSizeModule }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i5.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.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: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.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: i11.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i11.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
565
569
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
566
570
  type: Component,
567
571
  args: [{ selector: 'guajiritos-image-picker', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -578,7 +582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
578
582
  MatSelectModule,
579
583
  FormsModule,
580
584
  NgForOf,
581
- ], 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n</div>\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' style='display: 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'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n\r\n <div class='editing-bar-btn'\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\r\n (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <button id='edit-img' *ngIf='!config.hideEditBtn' mat-icon-button [matTooltip]=\"labels['Open the editor panel']\"\r\n (click)='showEditPanel = true'>\r\n <mat-icon class='mat-18'>edit</mat-icon>\r\n </button>\r\n <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\r\n (click)='onRemove()'>\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\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\r\n\r\n <p class='item-panel'>{{ labels['Quality'] }}</p>\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-slider [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\r\n [(ngModel)]='quality' [min]='0' [max]='100' [step]='1'>\r\n </mat-slider>\r\n </div>\r\n\r\n <p class='item-panel'>\r\n {{ labels['Max dimensions'] }}\r\n <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\r\n <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\r\n </mat-checkbox>\r\n </p>\r\n <div\r\n style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['max-width(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\r\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['max-height(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\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'>{{ labels['Format'] }}</p>\r\n <div\r\n style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-form-field class='no-input-style' style='max-width: 100%; width: 100%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-select [(ngModel)]='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>\r\n <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\r\n <p class='item-panel'>{{ labels['Crop'] }}</p>\r\n </mat-checkbox>\r\n <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-container *ngIf='showCrop'>\r\n <div\r\n style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['width(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\r\n [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['height(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput\r\n [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n\r\n <p style='margin-bottom: 4px !important'>\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 </ng-container>\r\n\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\r\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\r\n style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\r\n Guardar\r\n </button>\r\n\r\n <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["guajiritos-image-picker p{margin:0!important;padding:0!important}guajiritos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guajiritos-image-picker .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;border:2px rgba(0,0,0,.3) solid;background-color:#fcfcfc}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guajiritos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .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}guajiritos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guajiritos-image-picker .place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:cover;object-position:center}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn{margin-top:2px}guajiritos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guajiritos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guajiritos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#000c;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guajiritos-image-picker .popup .image-container{margin-top:50px;margin-bottom:50px;height:100%;min-height:100%;min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}guajiritos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guajiritos-image-picker .popup img{max-height:600px;max-width:100%;object-fit:cover;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){guajiritos-image-picker .popup{background-color:#000000d9;padding:8px}guajiritos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guajiritos-image-picker .popup img{margin:0}}guajiritos-image-picker .popup .control-panel{color:#fff;background-color:#000000eb;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){guajiritos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guajiritos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guajiritos-image-picker .popup .control-panel .item-panel{padding:0 4px;font-size:14px;font-weight:500}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guajiritos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guajiritos-image-picker .mat-select-panel{background:#fafafa!important}guajiritos-image-picker input.mat-input-element{color:#000000d9}guajiritos-image-picker .mat-checkbox-background{background-color:#fff}guajiritos-image-picker .image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid #fafafa;box-sizing:border-box;resize:both;overflow:auto;opacity:0}guajiritos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guajiritos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guajiritos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guajiritos-image-picker .btn mat-icon{color:#000000d1}\n"] }]
585
+ ], 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n </div>\r\n</div>\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' style='display: 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'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n\r\n <div class='editing-bar-btn'\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\r\n (click)='onUpload($event)'>\r\n <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n </button>\r\n <button id='edit-img' *ngIf='!config.hideEditBtn' mat-icon-button [matTooltip]=\"labels['Open the editor panel']\"\r\n (click)='showEditPanel = true'>\r\n <mat-icon class='mat-18'>edit</mat-icon>\r\n </button>\r\n <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\r\n (click)='onRemove()'>\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\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\r\n\r\n <p class='item-panel'>{{ labels['Quality'] }}</p>\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-slider ngDefaultControl [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\r\n [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\r\n <input matSliderThumb [(ngModel)]='quality'>\r\n </mat-slider>\r\n </div>\r\n\r\n <div class='item-panel'>\r\n <span>{{ labels['Max dimensions'] }}</span>\r\n <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\r\n <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div\r\n style='margin-top: 16px !important; flex-flow: row; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field style='width: 48%' [appearance]='appearance' [color]='color'>\r\n <mat-label>{{ labels['max-width(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\r\n [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n\r\n <mat-form-field style='width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['max-height(px)'] }}</mat-label>\r\n <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\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'>{{ labels['Format'] }}</p>\r\n <div\r\n style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n <mat-form-field style='max-width: 100%; width: 100%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-select [(ngModel)]='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>\r\n <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\r\n <p class='item-panel'>{{ labels['Crop'] }}</p>\r\n </mat-checkbox>\r\n <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-container *ngIf='showCrop'>\r\n <div\r\n style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['width(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\r\n [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n [color]='color'>\r\n <mat-label>{{ labels['height(px)'] }}</mat-label>\r\n <input (change)='onChangeCrop()' matInput\r\n [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n </mat-form-field>\r\n </div>\r\n\r\n <p style='margin-bottom: 4px !important'>\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 </ng-container>\r\n\r\n <div\r\n style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\r\n <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\r\n style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\r\n {{labels['save']}}\r\n </button>\r\n\r\n <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\r\n [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["guajiritos-image-picker p{margin:0!important;padding:0!important}guajiritos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guajiritos-image-picker .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;border:2px rgba(0,0,0,.3) solid;background-color:#fcfcfc}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guajiritos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .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}guajiritos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guajiritos-image-picker .place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:cover;object-position:center}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn{margin-top:2px}guajiritos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guajiritos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guajiritos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#616161;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guajiritos-image-picker .popup .image-container{margin-top:50px;margin-bottom:50px;height:100%;min-height:100%;min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}guajiritos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guajiritos-image-picker .popup img{max-height:600px;max-width:100%;object-fit:cover;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){guajiritos-image-picker .popup{background-color:#000000d9;padding:8px}guajiritos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guajiritos-image-picker .popup img{margin:0}}guajiritos-image-picker .popup .control-panel{color:#fff;background-color:#000000eb;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){guajiritos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guajiritos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guajiritos-image-picker .popup .control-panel .item-panel{padding:0 4px!important;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guajiritos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guajiritos-image-picker .mat-select-panel{background:#fafafa!important}guajiritos-image-picker input.mat-input-element{color:#000000d9}guajiritos-image-picker .mat-checkbox-background{background-color:#fff}guajiritos-image-picker .image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid #fafafa;box-sizing:border-box;resize:both;overflow:auto;opacity:0}guajiritos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guajiritos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guajiritos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guajiritos-image-picker .btn mat-icon{color:#000000d1}\n"] }]
582
586
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
583
587
  type: Input
584
588
  }], color: [{