@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.
- package/esm2020/lib/guachos-image-picker.component.mjs +43 -44
- package/fesm2015/guajiritos-image-picker.mjs +48 -44
- package/fesm2015/guajiritos-image-picker.mjs.map +1 -1
- package/fesm2020/guajiritos-image-picker.mjs +42 -43
- package/fesm2020/guajiritos-image-picker.mjs.map +1 -1
- package/lib/guachos-image-picker.component.d.ts +2 -2
- package/package.json +5 -5
|
@@ -71,6 +71,7 @@ class GuajiritosImagePicker {
|
|
|
71
71
|
'Download the image': 'Download the image',
|
|
72
72
|
'Control Panel': 'Control Panel',
|
|
73
73
|
Quality: 'Quality',
|
|
74
|
+
save: 'Save',
|
|
74
75
|
'Max dimensions': 'Max dimensions',
|
|
75
76
|
'aspect-ratio': 'aspect-ratio',
|
|
76
77
|
'max-width(px)': 'max-width(px)',
|
|
@@ -89,6 +90,7 @@ class GuajiritosImagePicker {
|
|
|
89
90
|
'Download the image': 'Descargue la imagen',
|
|
90
91
|
'Control Panel': 'Panel de control',
|
|
91
92
|
Remove: 'Quitar',
|
|
93
|
+
save: 'Guardar',
|
|
92
94
|
Quality: 'Calidad',
|
|
93
95
|
'Max dimensions': 'Dimensiones',
|
|
94
96
|
'aspect-ratio': 'relación-aspecto',
|
|
@@ -99,24 +101,6 @@ class GuajiritosImagePicker {
|
|
|
99
101
|
'width(px)': 'ancho(px)',
|
|
100
102
|
'height(px)': 'altura(px)',
|
|
101
103
|
};
|
|
102
|
-
this.labelFr = {
|
|
103
|
-
'Upload a image': 'Charger une image',
|
|
104
|
-
'You must edit the image in order to resize it': 'Vous devez éditer l\'image pour changer sa taille',
|
|
105
|
-
'too large': 'Trop grande',
|
|
106
|
-
'Open the editor panel': 'Ouvrir le panneau d\'édition',
|
|
107
|
-
'Download the image': 'Télécharger l\'image',
|
|
108
|
-
'Control Panel': 'Panneau de commande',
|
|
109
|
-
Remove: 'Supprimer',
|
|
110
|
-
Quality: 'Qualité',
|
|
111
|
-
'Max dimensions': 'Dimensions maximales',
|
|
112
|
-
'aspect-ratio': 'rapport de forme',
|
|
113
|
-
'max-width(px)': 'largeur max.',
|
|
114
|
-
'max-height(px)': 'hauteur max',
|
|
115
|
-
Format: 'Format',
|
|
116
|
-
Crop: 'Recadrer',
|
|
117
|
-
'width(px)': 'largeur(px)',
|
|
118
|
-
'height(px)': 'hauteur(px)',
|
|
119
|
-
};
|
|
120
104
|
this.arrayCopiedImages = [];
|
|
121
105
|
this.config = {
|
|
122
106
|
height: '240px',
|
|
@@ -131,6 +115,7 @@ class GuajiritosImagePicker {
|
|
|
131
115
|
};
|
|
132
116
|
this.showCrop = false;
|
|
133
117
|
this.loadImage = false;
|
|
118
|
+
this.noEdit = false;
|
|
134
119
|
this.uuidFilePicker = Date.now().toString(20);
|
|
135
120
|
this.showEditPanel = false;
|
|
136
121
|
this.quality = 92;
|
|
@@ -142,12 +127,12 @@ class GuajiritosImagePicker {
|
|
|
142
127
|
this.cropWidth = 150;
|
|
143
128
|
this.maintainAspectRatio = true;
|
|
144
129
|
this.imageName = 'download';
|
|
130
|
+
this.labels = this.labelEn;
|
|
145
131
|
this.appearance = 'outline';
|
|
146
132
|
this.color = 'primary';
|
|
147
133
|
this.imagesAllowed = 'image/*';
|
|
148
134
|
this.$imageChanged = new EventEmitter();
|
|
149
135
|
this.$imageOriginal = new EventEmitter();
|
|
150
|
-
this.labels = this.labelEn;
|
|
151
136
|
}
|
|
152
137
|
set _imageSrc(image) {
|
|
153
138
|
if (image) {
|
|
@@ -163,12 +148,14 @@ class GuajiritosImagePicker {
|
|
|
163
148
|
this.lastOriginSrc = image;
|
|
164
149
|
this.$imageOriginal.next(this.originImageSrc);
|
|
165
150
|
this.loadImage = true;
|
|
166
|
-
this.
|
|
151
|
+
this.noEdit = true;
|
|
152
|
+
this._cdRef.detectChanges();
|
|
167
153
|
}
|
|
168
154
|
else {
|
|
169
155
|
this.imageSrc = null;
|
|
170
156
|
this.originImageSrc = null;
|
|
171
157
|
this.loadImage = false;
|
|
158
|
+
this.noEdit = false;
|
|
172
159
|
this.arrayCopiedImages = [];
|
|
173
160
|
this.lastOriginSrc = null;
|
|
174
161
|
this.$imageOriginal.next(null);
|
|
@@ -179,21 +166,18 @@ class GuajiritosImagePicker {
|
|
|
179
166
|
this.cropWidth = 150;
|
|
180
167
|
this.maintainAspectRatio = true;
|
|
181
168
|
this.showEditPanel = false;
|
|
182
|
-
this._cdRef.
|
|
169
|
+
this._cdRef.detectChanges();
|
|
183
170
|
}
|
|
184
171
|
}
|
|
185
172
|
set _config(value) {
|
|
186
173
|
if (value && value.constructor == Object) {
|
|
187
174
|
this.config = { ...this.config, ...value };
|
|
188
175
|
if (value?.language !== undefined) {
|
|
189
|
-
if (value.language === 'en') {
|
|
190
|
-
this.labels = { ...this.labelEn };
|
|
191
|
-
}
|
|
192
176
|
if (value.language === 'es') {
|
|
193
177
|
this.labels = { ...this.labelEs };
|
|
194
178
|
}
|
|
195
|
-
if (value.language === '
|
|
196
|
-
this.labels = { ...this.
|
|
179
|
+
if (value.language === 'en') {
|
|
180
|
+
this.labels = { ...this.labelEn };
|
|
197
181
|
}
|
|
198
182
|
}
|
|
199
183
|
}
|
|
@@ -225,20 +209,21 @@ class GuajiritosImagePicker {
|
|
|
225
209
|
}
|
|
226
210
|
this.$imageChanged.next(this.imageSrc);
|
|
227
211
|
this.loadImage = true;
|
|
212
|
+
this._cdRef.detectChanges();
|
|
228
213
|
}
|
|
229
214
|
async resizeDataURL(datas, input) {
|
|
230
215
|
return await new Promise(async function (resolve) {
|
|
231
216
|
let img = document.createElement('img');
|
|
232
217
|
img.src = datas + '';
|
|
233
218
|
img.crossOrigin = 'Anonymous';
|
|
234
|
-
let quality = input
|
|
235
|
-
let maintainRatio = input.maintainRatio
|
|
219
|
+
let quality = input?.quality ?? 1.0;
|
|
220
|
+
let maintainRatio = input.maintainRatio !== undefined ? input.maintainRatio : true;
|
|
236
221
|
img.onload = function () {
|
|
237
222
|
const canvas = document.createElement('canvas');
|
|
238
223
|
const ctx = canvas.getContext('2d');
|
|
239
224
|
let ratio = img.width / img.height;
|
|
240
|
-
let width = input
|
|
241
|
-
let height = input
|
|
225
|
+
let width = input?.width ?? img.width;
|
|
226
|
+
let height = input?.height ?? img.height;
|
|
242
227
|
if (maintainRatio) {
|
|
243
228
|
if (input.changeHeight) {
|
|
244
229
|
canvas.width = height * ratio;
|
|
@@ -336,12 +321,14 @@ class GuajiritosImagePicker {
|
|
|
336
321
|
this.imagePicker?.nativeElement.click();
|
|
337
322
|
}
|
|
338
323
|
handleFileSelect(evt) {
|
|
339
|
-
const files = evt
|
|
324
|
+
const files = evt?.target?.files;
|
|
340
325
|
if (files) {
|
|
341
326
|
const file = files[0];
|
|
342
|
-
this.imageName = file
|
|
343
|
-
this.fileType = file
|
|
344
|
-
this.urlImage = `data:${file
|
|
327
|
+
this.imageName = file?.name?.split('.')[0];
|
|
328
|
+
this.fileType = file?.type;
|
|
329
|
+
this.urlImage = `data:${file?.type};base64,`;
|
|
330
|
+
this.noEdit = false;
|
|
331
|
+
this._cdRef.detectChanges();
|
|
345
332
|
if (files && file) {
|
|
346
333
|
const reader = new FileReader();
|
|
347
334
|
reader.onload = this.handleReaderLoaded.bind(this);
|
|
@@ -361,8 +348,8 @@ class GuajiritosImagePicker {
|
|
|
361
348
|
}
|
|
362
349
|
async onChangeQuality() {
|
|
363
350
|
const qualityItem = this.quality / 100;
|
|
364
|
-
this.maxHeight = this.maxHeight
|
|
365
|
-
this.maxWidth = this.maxWidth
|
|
351
|
+
this.maxHeight = this.maxHeight ?? 2000;
|
|
352
|
+
this.maxWidth = this.maxWidth ?? 2000;
|
|
366
353
|
await this.wait(250);
|
|
367
354
|
try {
|
|
368
355
|
const input = {
|
|
@@ -375,15 +362,17 @@ class GuajiritosImagePicker {
|
|
|
375
362
|
this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
|
|
376
363
|
this.$imageChanged.next(this.imageSrc);
|
|
377
364
|
this.loadImage = true;
|
|
365
|
+
this._cdRef.detectChanges();
|
|
378
366
|
}
|
|
379
367
|
catch (error) {
|
|
380
368
|
this.loadImage = true;
|
|
369
|
+
this._cdRef.detectChanges();
|
|
381
370
|
}
|
|
382
371
|
}
|
|
383
372
|
async onChangeFormat() {
|
|
384
373
|
let qualityItem = this.quality / 100;
|
|
385
|
-
this.maxHeight = this.maxHeight
|
|
386
|
-
this.maxWidth = this.maxWidth
|
|
374
|
+
this.maxHeight = this.maxHeight ?? 2000;
|
|
375
|
+
this.maxWidth = this.maxWidth ?? 2000;
|
|
387
376
|
await this.wait(250);
|
|
388
377
|
try {
|
|
389
378
|
let input = {
|
|
@@ -396,15 +385,17 @@ class GuajiritosImagePicker {
|
|
|
396
385
|
this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
|
|
397
386
|
this.$imageChanged.next(this.imageSrc);
|
|
398
387
|
this.loadImage = true;
|
|
388
|
+
this._cdRef.detectChanges();
|
|
399
389
|
}
|
|
400
390
|
catch (error) {
|
|
401
391
|
this.loadImage = true;
|
|
392
|
+
this._cdRef.detectChanges();
|
|
402
393
|
}
|
|
403
394
|
}
|
|
404
395
|
async onChangeSize(changeWidth, changeHeight) {
|
|
405
396
|
let qualityItem = this.quality / 100;
|
|
406
|
-
this.maxHeight = this.maxHeight
|
|
407
|
-
this.maxWidth = this.maxWidth
|
|
397
|
+
this.maxHeight = this.maxHeight ?? 2000;
|
|
398
|
+
this.maxWidth = this.maxWidth ?? 2000;
|
|
408
399
|
await this.wait(500);
|
|
409
400
|
try {
|
|
410
401
|
let input = {
|
|
@@ -419,9 +410,11 @@ class GuajiritosImagePicker {
|
|
|
419
410
|
this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
|
|
420
411
|
this.$imageChanged.next(this.imageSrc);
|
|
421
412
|
this.loadImage = true;
|
|
413
|
+
this._cdRef.detectChanges();
|
|
422
414
|
}
|
|
423
415
|
catch (error) {
|
|
424
416
|
this.loadImage = true;
|
|
417
|
+
this._cdRef.detectChanges();
|
|
425
418
|
}
|
|
426
419
|
}
|
|
427
420
|
onChangeCrop() {
|
|
@@ -470,7 +463,7 @@ class GuajiritosImagePicker {
|
|
|
470
463
|
}
|
|
471
464
|
}
|
|
472
465
|
onCrop(type) {
|
|
473
|
-
type = type
|
|
466
|
+
type = type ?? this.format;
|
|
474
467
|
const cropper = document.getElementById('image-cropper');
|
|
475
468
|
const elementFull = document.getElementById('image-full');
|
|
476
469
|
const rectCropper = cropper.getBoundingClientRect();
|
|
@@ -515,10 +508,14 @@ class GuajiritosImagePicker {
|
|
|
515
508
|
this.maxWidth = lastState.width;
|
|
516
509
|
this.maxHeight = lastState.height;
|
|
517
510
|
this.originImageSrc = this.lastOriginSrc + '';
|
|
511
|
+
this.noEdit = false;
|
|
512
|
+
this._cdRef.detectChanges();
|
|
518
513
|
}
|
|
519
514
|
else {
|
|
520
515
|
this.imageSrc = this.lastOriginSrc;
|
|
521
516
|
this.originImageSrc = this.lastOriginSrc + '';
|
|
517
|
+
this.noEdit = false;
|
|
518
|
+
this._cdRef.detectChanges();
|
|
522
519
|
}
|
|
523
520
|
this.$imageChanged.next(this.imageSrc);
|
|
524
521
|
}
|
|
@@ -537,6 +534,8 @@ class GuajiritosImagePicker {
|
|
|
537
534
|
this.cropWidth = 150;
|
|
538
535
|
this.maintainAspectRatio = true;
|
|
539
536
|
this.showEditPanel = false;
|
|
537
|
+
this.noEdit = false;
|
|
538
|
+
this._cdRef.detectChanges();
|
|
540
539
|
}
|
|
541
540
|
ngOnDestroy() {
|
|
542
541
|
this.unsubscribeAll$.next();
|
|
@@ -544,7 +543,7 @@ class GuajiritosImagePicker {
|
|
|
544
543
|
}
|
|
545
544
|
}
|
|
546
545
|
GuajiritosImagePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GuajiritosImagePicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
547
|
-
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 {{ 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 {{ 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 });
|
|
546
|
+
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 {{ 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 {{ 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 });
|
|
548
547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
|
|
549
548
|
type: Component,
|
|
550
549
|
args: [{ selector: 'guajiritos-image-picker', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -561,7 +560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
|
|
|
561
560
|
MatSelectModule,
|
|
562
561
|
FormsModule,
|
|
563
562
|
NgForOf,
|
|
564
|
-
], 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 {{ 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 {{ 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"] }]
|
|
563
|
+
], 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 {{ 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 {{ 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"] }]
|
|
565
564
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
566
565
|
type: Input
|
|
567
566
|
}], color: [{
|