@guajiritos/image-picker 0.0.2 → 0.0.3
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 +31 -40
- package/fesm2015/guajiritos-image-picker.mjs +35 -39
- package/fesm2015/guajiritos-image-picker.mjs.map +1 -1
- package/fesm2020/guajiritos-image-picker.mjs +30 -39
- package/fesm2020/guajiritos-image-picker.mjs.map +1 -1
- package/lib/guachos-image-picker.component.d.ts +1 -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',
|
|
@@ -142,12 +126,12 @@ class GuajiritosImagePicker {
|
|
|
142
126
|
this.cropWidth = 150;
|
|
143
127
|
this.maintainAspectRatio = true;
|
|
144
128
|
this.imageName = 'download';
|
|
129
|
+
this.labels = this.labelEn;
|
|
145
130
|
this.appearance = 'outline';
|
|
146
131
|
this.color = 'primary';
|
|
147
132
|
this.imagesAllowed = 'image/*';
|
|
148
133
|
this.$imageChanged = new EventEmitter();
|
|
149
134
|
this.$imageOriginal = new EventEmitter();
|
|
150
|
-
this.labels = this.labelEn;
|
|
151
135
|
}
|
|
152
136
|
set _imageSrc(image) {
|
|
153
137
|
if (image) {
|
|
@@ -163,7 +147,7 @@ class GuajiritosImagePicker {
|
|
|
163
147
|
this.lastOriginSrc = image;
|
|
164
148
|
this.$imageOriginal.next(this.originImageSrc);
|
|
165
149
|
this.loadImage = true;
|
|
166
|
-
this._cdRef.
|
|
150
|
+
this._cdRef.detectChanges();
|
|
167
151
|
}
|
|
168
152
|
else {
|
|
169
153
|
this.imageSrc = null;
|
|
@@ -179,21 +163,18 @@ class GuajiritosImagePicker {
|
|
|
179
163
|
this.cropWidth = 150;
|
|
180
164
|
this.maintainAspectRatio = true;
|
|
181
165
|
this.showEditPanel = false;
|
|
182
|
-
this._cdRef.
|
|
166
|
+
this._cdRef.detectChanges();
|
|
183
167
|
}
|
|
184
168
|
}
|
|
185
169
|
set _config(value) {
|
|
186
170
|
if (value && value.constructor == Object) {
|
|
187
171
|
this.config = { ...this.config, ...value };
|
|
188
172
|
if (value?.language !== undefined) {
|
|
189
|
-
if (value.language === 'en') {
|
|
190
|
-
this.labels = { ...this.labelEn };
|
|
191
|
-
}
|
|
192
173
|
if (value.language === 'es') {
|
|
193
174
|
this.labels = { ...this.labelEs };
|
|
194
175
|
}
|
|
195
|
-
if (value.language === '
|
|
196
|
-
this.labels = { ...this.
|
|
176
|
+
if (value.language === 'en') {
|
|
177
|
+
this.labels = { ...this.labelEn };
|
|
197
178
|
}
|
|
198
179
|
}
|
|
199
180
|
}
|
|
@@ -225,20 +206,21 @@ class GuajiritosImagePicker {
|
|
|
225
206
|
}
|
|
226
207
|
this.$imageChanged.next(this.imageSrc);
|
|
227
208
|
this.loadImage = true;
|
|
209
|
+
this._cdRef.detectChanges();
|
|
228
210
|
}
|
|
229
211
|
async resizeDataURL(datas, input) {
|
|
230
212
|
return await new Promise(async function (resolve) {
|
|
231
213
|
let img = document.createElement('img');
|
|
232
214
|
img.src = datas + '';
|
|
233
215
|
img.crossOrigin = 'Anonymous';
|
|
234
|
-
let quality = input
|
|
235
|
-
let maintainRatio = input.maintainRatio
|
|
216
|
+
let quality = input?.quality ?? 1.0;
|
|
217
|
+
let maintainRatio = input.maintainRatio !== undefined ? input.maintainRatio : true;
|
|
236
218
|
img.onload = function () {
|
|
237
219
|
const canvas = document.createElement('canvas');
|
|
238
220
|
const ctx = canvas.getContext('2d');
|
|
239
221
|
let ratio = img.width / img.height;
|
|
240
|
-
let width = input
|
|
241
|
-
let height = input
|
|
222
|
+
let width = input?.width ?? img.width;
|
|
223
|
+
let height = input?.height ?? img.height;
|
|
242
224
|
if (maintainRatio) {
|
|
243
225
|
if (input.changeHeight) {
|
|
244
226
|
canvas.width = height * ratio;
|
|
@@ -361,8 +343,8 @@ class GuajiritosImagePicker {
|
|
|
361
343
|
}
|
|
362
344
|
async onChangeQuality() {
|
|
363
345
|
const qualityItem = this.quality / 100;
|
|
364
|
-
this.maxHeight = this.maxHeight
|
|
365
|
-
this.maxWidth = this.maxWidth
|
|
346
|
+
this.maxHeight = this.maxHeight ?? 2000;
|
|
347
|
+
this.maxWidth = this.maxWidth ?? 2000;
|
|
366
348
|
await this.wait(250);
|
|
367
349
|
try {
|
|
368
350
|
const input = {
|
|
@@ -375,15 +357,17 @@ class GuajiritosImagePicker {
|
|
|
375
357
|
this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
|
|
376
358
|
this.$imageChanged.next(this.imageSrc);
|
|
377
359
|
this.loadImage = true;
|
|
360
|
+
this._cdRef.detectChanges();
|
|
378
361
|
}
|
|
379
362
|
catch (error) {
|
|
380
363
|
this.loadImage = true;
|
|
364
|
+
this._cdRef.detectChanges();
|
|
381
365
|
}
|
|
382
366
|
}
|
|
383
367
|
async onChangeFormat() {
|
|
384
368
|
let qualityItem = this.quality / 100;
|
|
385
|
-
this.maxHeight = this.maxHeight
|
|
386
|
-
this.maxWidth = this.maxWidth
|
|
369
|
+
this.maxHeight = this.maxHeight ?? 2000;
|
|
370
|
+
this.maxWidth = this.maxWidth ?? 2000;
|
|
387
371
|
await this.wait(250);
|
|
388
372
|
try {
|
|
389
373
|
let input = {
|
|
@@ -396,15 +380,17 @@ class GuajiritosImagePicker {
|
|
|
396
380
|
this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
|
|
397
381
|
this.$imageChanged.next(this.imageSrc);
|
|
398
382
|
this.loadImage = true;
|
|
383
|
+
this._cdRef.detectChanges();
|
|
399
384
|
}
|
|
400
385
|
catch (error) {
|
|
401
386
|
this.loadImage = true;
|
|
387
|
+
this._cdRef.detectChanges();
|
|
402
388
|
}
|
|
403
389
|
}
|
|
404
390
|
async onChangeSize(changeWidth, changeHeight) {
|
|
405
391
|
let qualityItem = this.quality / 100;
|
|
406
|
-
this.maxHeight = this.maxHeight
|
|
407
|
-
this.maxWidth = this.maxWidth
|
|
392
|
+
this.maxHeight = this.maxHeight ?? 2000;
|
|
393
|
+
this.maxWidth = this.maxWidth ?? 2000;
|
|
408
394
|
await this.wait(500);
|
|
409
395
|
try {
|
|
410
396
|
let input = {
|
|
@@ -419,9 +405,11 @@ class GuajiritosImagePicker {
|
|
|
419
405
|
this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
|
|
420
406
|
this.$imageChanged.next(this.imageSrc);
|
|
421
407
|
this.loadImage = true;
|
|
408
|
+
this._cdRef.detectChanges();
|
|
422
409
|
}
|
|
423
410
|
catch (error) {
|
|
424
411
|
this.loadImage = true;
|
|
412
|
+
this._cdRef.detectChanges();
|
|
425
413
|
}
|
|
426
414
|
}
|
|
427
415
|
onChangeCrop() {
|
|
@@ -470,7 +458,7 @@ class GuajiritosImagePicker {
|
|
|
470
458
|
}
|
|
471
459
|
}
|
|
472
460
|
onCrop(type) {
|
|
473
|
-
type = type
|
|
461
|
+
type = type ?? this.format;
|
|
474
462
|
const cropper = document.getElementById('image-cropper');
|
|
475
463
|
const elementFull = document.getElementById('image-full');
|
|
476
464
|
const rectCropper = cropper.getBoundingClientRect();
|
|
@@ -515,10 +503,12 @@ class GuajiritosImagePicker {
|
|
|
515
503
|
this.maxWidth = lastState.width;
|
|
516
504
|
this.maxHeight = lastState.height;
|
|
517
505
|
this.originImageSrc = this.lastOriginSrc + '';
|
|
506
|
+
this._cdRef.detectChanges();
|
|
518
507
|
}
|
|
519
508
|
else {
|
|
520
509
|
this.imageSrc = this.lastOriginSrc;
|
|
521
510
|
this.originImageSrc = this.lastOriginSrc + '';
|
|
511
|
+
this._cdRef.detectChanges();
|
|
522
512
|
}
|
|
523
513
|
this.$imageChanged.next(this.imageSrc);
|
|
524
514
|
}
|
|
@@ -537,6 +527,7 @@ class GuajiritosImagePicker {
|
|
|
537
527
|
this.cropWidth = 150;
|
|
538
528
|
this.maintainAspectRatio = true;
|
|
539
529
|
this.showEditPanel = false;
|
|
530
|
+
this._cdRef.detectChanges();
|
|
540
531
|
}
|
|
541
532
|
ngOnDestroy() {
|
|
542
533
|
this.unsubscribeAll$.next();
|
|
@@ -544,7 +535,7 @@ class GuajiritosImagePicker {
|
|
|
544
535
|
}
|
|
545
536
|
}
|
|
546
537
|
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 });
|
|
538
|
+
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:#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!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
539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
|
|
549
540
|
type: Component,
|
|
550
541
|
args: [{ selector: 'guajiritos-image-picker', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -561,7 +552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
|
|
|
561
552
|
MatSelectModule,
|
|
562
553
|
FormsModule,
|
|
563
554
|
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"] }]
|
|
555
|
+
], 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:#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!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
556
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
566
557
|
type: Input
|
|
567
558
|
}], color: [{
|