@wizishop/img-manager 15.2.46 → 15.2.48
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/components/pexels-lib/pexels-lib.component.mjs +11 -7
- package/fesm2015/wizishop-img-manager.mjs +10 -6
- package/fesm2015/wizishop-img-manager.mjs.map +1 -1
- package/fesm2020/wizishop-img-manager.mjs +10 -6
- package/fesm2020/wizishop-img-manager.mjs.map +1 -1
- package/lib/components/pexels-lib/pexels-lib.component.d.ts +3 -2
- package/package.json +1 -1
- package/wizishop-img-manager-15.2.48.tgz +0 -0
- package/wz-img-manager.scss +169 -169
- package/wizishop-img-manager-15.2.46.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Subject, tap, Observable, merge, debounceTime, distinctUntilChanged, switchMap, map, forkJoin, take as take$1, startWith, shareReplay, combineLatest } from 'rxjs';
|
|
4
4
|
import * as i3 from '@ngx-translate/core';
|
|
5
5
|
import { TranslateModule } from '@ngx-translate/core';
|
|
@@ -1309,11 +1309,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
1309
1309
|
}] } });
|
|
1310
1310
|
|
|
1311
1311
|
class PexelLibComponent {
|
|
1312
|
-
constructor(wzImgLibService, alertService, translateService, uploadService) {
|
|
1312
|
+
constructor(wzImgLibService, alertService, translateService, uploadService, changeDetectorRef) {
|
|
1313
1313
|
this.wzImgLibService = wzImgLibService;
|
|
1314
1314
|
this.alertService = alertService;
|
|
1315
1315
|
this.translateService = translateService;
|
|
1316
1316
|
this.uploadService = uploadService;
|
|
1317
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
1317
1318
|
this.searchValue = '';
|
|
1318
1319
|
/** Pass to true to hide search input */
|
|
1319
1320
|
this.disableSearch = false;
|
|
@@ -1390,11 +1391,13 @@ class PexelLibComponent {
|
|
|
1390
1391
|
}
|
|
1391
1392
|
this.isLoading = false;
|
|
1392
1393
|
this.initComponent = false;
|
|
1394
|
+
this.changeDetectorRef.markForCheck();
|
|
1393
1395
|
},
|
|
1394
1396
|
error: error => {
|
|
1395
1397
|
this.isLoading = false;
|
|
1396
1398
|
this.initComponent = false;
|
|
1397
1399
|
this.alertService.openAlert(this.errorRetrievePhotos);
|
|
1400
|
+
this.changeDetectorRef.markForCheck();
|
|
1398
1401
|
}
|
|
1399
1402
|
});
|
|
1400
1403
|
this.subs.push(searchSub);
|
|
@@ -1440,6 +1443,7 @@ class PexelLibComponent {
|
|
|
1440
1443
|
this.photosColumns = [];
|
|
1441
1444
|
this.currentPage = 1;
|
|
1442
1445
|
this.setPhotosColumns();
|
|
1446
|
+
this.changeDetectorRef.markForCheck();
|
|
1443
1447
|
}
|
|
1444
1448
|
uploadPhoto(photo, url) {
|
|
1445
1449
|
photo.uploading = true;
|
|
@@ -1464,18 +1468,18 @@ class PexelLibComponent {
|
|
|
1464
1468
|
this.subs.forEach(sub => sub.unsubscribe());
|
|
1465
1469
|
}
|
|
1466
1470
|
}
|
|
1467
|
-
PexelLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1471
|
+
PexelLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1468
1472
|
PexelLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PexelLibComponent, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n [reachedOffset]=\"300\"\n class=\"pexels-lib__scroll\"\n [ngClass]=\"{\n 'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n 'pexels-lib__scroll--noResult': !nbResult,\n 'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n }\"\n (reachedBottom)=\"onBottomReached()\"\n >\n <div\n *ngIf=\"!disableSearch\"\n class=\"pexels-lib__search\"\n [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n >\n <wz-input-search\n [(ngModel)]=\"searchValue\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n (changeDebounced)=\"onSearchNameChanged()\"\n [smallPadding]=\"stateDisplayed === 'small'\">\n </wz-input-search>\n </div>\n\n <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n <div class=\"pexels-lib__wrapper__result\">\n\n <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\" [@listAnimation]=\"photosColumn.photos.length\">\n <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n {{ photo.width }} x {{ photo.height}}\n </span>\n\n <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n <div class=\"dropdown-trigger\">\n <button\n type=\"button\"\n class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\">\n\n <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n <span class=\"icon is-small\">\n <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n </span>\n <ng-container *ngIf=\"photo.uploaded\">\n <i class=\"fal fa-check\"></i>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"photo.uploading\">\n {{ 'ImgManager.PexelLib.importation' | translate }}\n <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n </ng-container>\n\n </button>\n </div>\n <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-content__wrapper\">\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n <i class=\"fal fa-check iPortrait\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n <i class=\"fal fa-check iLandscape\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n <i class=\"fal fa-check iOriginal\"></i>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n </ng-scrollbar>\n\n <ng-container *ngIf=\"isLoading\">\n <wz-loader></wz-loader>\n </ng-container>\n <div\n *ngIf=\"!isLoading && !nbResult\"\n class=\"pexels-lib__alert\"\n [@easeInOut]=\"'in'\">\n <wz-alert [warning]=\"true\">\n {{ 'ImgManager.PexelLib.noResult' | translate }}\n </wz-alert>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
|
|
1469
1473
|
easeInOut,
|
|
1470
1474
|
listAnnimation
|
|
1471
|
-
] });
|
|
1475
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1472
1476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelLibComponent, decorators: [{
|
|
1473
1477
|
type: Component,
|
|
1474
1478
|
args: [{ selector: 'pexels-lib', animations: [
|
|
1475
1479
|
easeInOut,
|
|
1476
1480
|
listAnnimation
|
|
1477
|
-
], template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n [reachedOffset]=\"300\"\n class=\"pexels-lib__scroll\"\n [ngClass]=\"{\n 'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n 'pexels-lib__scroll--noResult': !nbResult,\n 'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n }\"\n (reachedBottom)=\"onBottomReached()\"\n >\n <div\n *ngIf=\"!disableSearch\"\n class=\"pexels-lib__search\"\n [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n >\n <wz-input-search\n [(ngModel)]=\"searchValue\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n (changeDebounced)=\"onSearchNameChanged()\"\n [smallPadding]=\"stateDisplayed === 'small'\">\n </wz-input-search>\n </div>\n\n <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n <div class=\"pexels-lib__wrapper__result\">\n\n <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\" [@listAnimation]=\"photosColumn.photos.length\">\n <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n {{ photo.width }} x {{ photo.height}}\n </span>\n\n <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n <div class=\"dropdown-trigger\">\n <button\n type=\"button\"\n class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\">\n\n <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n <span class=\"icon is-small\">\n <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n </span>\n <ng-container *ngIf=\"photo.uploaded\">\n <i class=\"fal fa-check\"></i>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"photo.uploading\">\n {{ 'ImgManager.PexelLib.importation' | translate }}\n <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n </ng-container>\n\n </button>\n </div>\n <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-content__wrapper\">\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n <i class=\"fal fa-check iPortrait\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n <i class=\"fal fa-check iLandscape\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n <i class=\"fal fa-check iOriginal\"></i>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n </ng-scrollbar>\n\n <ng-container *ngIf=\"isLoading\">\n <wz-loader></wz-loader>\n </ng-container>\n <div\n *ngIf=\"!isLoading && !nbResult\"\n class=\"pexels-lib__alert\"\n [@easeInOut]=\"'in'\">\n <wz-alert [warning]=\"true\">\n {{ 'ImgManager.PexelLib.noResult' | translate }}\n </wz-alert>\n </div>\n</div>\n" }]
|
|
1478
|
-
}], ctorParameters: function () { return [{ type: PexelsService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }]; }, propDecorators: { stateDisplayed: [{
|
|
1481
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n [reachedOffset]=\"300\"\n class=\"pexels-lib__scroll\"\n [ngClass]=\"{\n 'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n 'pexels-lib__scroll--noResult': !nbResult,\n 'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n }\"\n (reachedBottom)=\"onBottomReached()\"\n >\n <div\n *ngIf=\"!disableSearch\"\n class=\"pexels-lib__search\"\n [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n >\n <wz-input-search\n [(ngModel)]=\"searchValue\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n (changeDebounced)=\"onSearchNameChanged()\"\n [smallPadding]=\"stateDisplayed === 'small'\">\n </wz-input-search>\n </div>\n\n <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n <div class=\"pexels-lib__wrapper__result\">\n\n <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\" [@listAnimation]=\"photosColumn.photos.length\">\n <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n {{ photo.width }} x {{ photo.height}}\n </span>\n\n <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n <div class=\"dropdown-trigger\">\n <button\n type=\"button\"\n class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\">\n\n <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n <span class=\"icon is-small\">\n <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n </span>\n <ng-container *ngIf=\"photo.uploaded\">\n <i class=\"fal fa-check\"></i>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"photo.uploading\">\n {{ 'ImgManager.PexelLib.importation' | translate }}\n <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n </ng-container>\n\n </button>\n </div>\n <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-content__wrapper\">\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n <i class=\"fal fa-check iPortrait\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n <i class=\"fal fa-check iLandscape\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n <i class=\"fal fa-check iOriginal\"></i>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n </ng-scrollbar>\n\n <ng-container *ngIf=\"isLoading\">\n <wz-loader></wz-loader>\n </ng-container>\n <div\n *ngIf=\"!isLoading && !nbResult\"\n class=\"pexels-lib__alert\"\n [@easeInOut]=\"'in'\">\n <wz-alert [warning]=\"true\">\n {{ 'ImgManager.PexelLib.noResult' | translate }}\n </wz-alert>\n </div>\n</div>\n" }]
|
|
1482
|
+
}], ctorParameters: function () { return [{ type: PexelsService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { stateDisplayed: [{
|
|
1479
1483
|
type: Input
|
|
1480
1484
|
}], searchValue: [{
|
|
1481
1485
|
type: Input
|