@wizishop/img-manager 15.2.56 → 15.2.57
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/README.md +393 -393
- package/assets/i18n/en.json +1 -1
- package/assets/i18n/es.json +1 -1
- package/assets/i18n/fr.json +1 -1
- package/assets/i18n/it.json +1 -1
- package/esm2020/lib/components/canva-btn/canva-btn.component.mjs +3 -3
- package/esm2020/lib/components/images-view/images-actions-handler.mjs +12 -1
- package/esm2020/lib/components/images-view/images-view.component.mjs +3 -3
- package/esm2020/lib/components/images-view/mosaic-view/img-card/img-card.component.mjs +3 -3
- package/esm2020/lib/components/images-view/mosaic-view/mosaic-view.component.mjs +3 -3
- package/esm2020/lib/components/images-view/table-view/table-view.component.mjs +14 -3
- package/esm2020/lib/components/img-editor/cropper/cropper.component.mjs +3 -3
- package/esm2020/lib/components/img-editor/img-editor.component.mjs +3 -3
- package/esm2020/lib/components/img-editor/info-section/info-section.component.mjs +3 -3
- package/esm2020/lib/components/img-selection/img-selection.component.mjs +3 -3
- package/esm2020/lib/components/img-tabs/img-tabs.component.mjs +3 -3
- package/esm2020/lib/components/img-upload/img-upload.component.mjs +3 -3
- package/esm2020/lib/components/pexels-lib/pexels-lib.component.mjs +3 -3
- package/esm2020/lib/components/shared/alert/alert.component.mjs +1 -1
- package/esm2020/lib/components/shared/pagination/page-selector/page-selector.component.mjs +3 -3
- package/esm2020/lib/components/shared/select/select.component.mjs +3 -3
- package/esm2020/lib/components/upload-list/upload-list.component.mjs +3 -3
- package/esm2020/lib/directives/table/raw.directive.mjs +1 -1
- package/esm2020/lib/dto/config/image-cdn/image-cdn-config.dto.mjs +1 -1
- package/esm2020/lib/dto/config/img-manager.mjs +1 -1
- package/esm2020/lib/dto/img-manager.dto.mjs +1 -1
- package/esm2020/lib/dto/pexels-img.dto.mjs +1 -1
- package/esm2020/lib/pipes/pagination/large-number-of-page/large-number-of-page.pipe.mjs +1 -1
- package/esm2020/lib/services/alert.service.mjs +1 -1
- package/esm2020/lib/services/api.service.mjs +1 -1
- package/esm2020/lib/services/canva.service.mjs +1 -1
- package/esm2020/lib/services/config/img-cdn.service.mjs +1 -1
- package/esm2020/lib/services/dom.service.mjs +1 -1
- package/esm2020/lib/services/icon.service.mjs +1 -1
- package/esm2020/lib/services/image-not-found.service.mjs +1 -1
- package/esm2020/lib/services/img-event.service.mjs +1 -1
- package/esm2020/lib/services/img-manager.service.mjs +45 -2
- package/esm2020/lib/services/img-selection.service.mjs +1 -1
- package/esm2020/lib/services/pexels.service.mjs +1 -1
- package/esm2020/lib/services/rename-picture.service.mjs +1 -1
- package/esm2020/lib/services/snackbar.service.mjs +1 -1
- package/esm2020/lib/services/table/filters-table.service.mjs +1 -1
- package/esm2020/lib/services/upload.service.mjs +1 -1
- package/esm2020/lib/services/user-settings.service.mjs +1 -1
- package/esm2020/lib/wz-img-manager.component.mjs +3 -3
- package/esm2020/lib/wz-img-manager.module.mjs +1 -1
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/wizishop-img-manager.mjs +101 -33
- package/fesm2015/wizishop-img-manager.mjs.map +1 -1
- package/fesm2020/wizishop-img-manager.mjs +98 -33
- package/fesm2020/wizishop-img-manager.mjs.map +1 -1
- package/lib/components/images-view/images-actions-handler.d.ts +1 -0
- package/lib/components/images-view/table-view/table-view.component.d.ts +1 -0
- package/lib/services/img-manager.service.d.ts +3 -0
- package/package.json +2 -2
- package/wizishop-img-manager-15.2.57.tgz +0 -0
- package/wz-img-manager.scss +1994 -1956
- package/wizishop-img-manager-15.2.56.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, Pipe, Inject, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, NgZone, Pipe, Inject, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Subject, tap, Observable, forkJoin, merge, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, switchMap, map as map$1, take as take$1, startWith, shareReplay, combineLatest } from 'rxjs';
|
|
4
4
|
import { take, map, takeUntil, debounceTime, distinctUntilChanged, tap as tap$1, filter } from 'rxjs/operators';
|
|
5
5
|
import * as i1 from '@wizishop/ng-wizi-bulma';
|
|
@@ -20,6 +20,7 @@ import * as i8 from 'ngx-scrollbar/reached-event';
|
|
|
20
20
|
import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
|
|
21
21
|
import * as i4$1 from 'ngx-image-cropper';
|
|
22
22
|
import { ImageCropperModule } from 'ngx-image-cropper';
|
|
23
|
+
import { __awaiter } from 'tslib';
|
|
23
24
|
import { v4 } from 'uuid';
|
|
24
25
|
import * as i3$3 from '@angular/cdk/drag-drop';
|
|
25
26
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
@@ -593,14 +594,14 @@ class ImgUploadComponent {
|
|
|
593
594
|
}
|
|
594
595
|
}
|
|
595
596
|
ImgUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgUploadComponent, deps: [{ token: AlertService }, { token: ApiService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
|
|
596
|
-
ImgUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgUploadComponent, selector: "img-upload", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { imgUploaded: "imgUploaded" }, viewQueries: [{ propertyName: "dragAndDropBox", first: true, predicate: ["dragAndDropBox"], descendants: true }], ngImport: i0, template: "<div\
|
|
597
|
+
ImgUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgUploadComponent, selector: "img-upload", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { imgUploaded: "imgUploaded" }, viewQueries: [{ propertyName: "dragAndDropBox", first: true, predicate: ["dragAndDropBox"], descendants: true }], ngImport: i0, template: "<div\n class=\"img-upload has-text-centered\"\n [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n (click)=\"fileInput.click()\"\n appDragDrop\n (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n #dragAndDropBox\n [@easeInOut]=\"'in'\"\n>\n <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n <div class=\"img-upload__container__wrapper\">\n\n <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n </div>\n\n <ng-container *ngIf=\"!isLoading\">\n <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n </div>\n\n <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n <div class=\"img-upload__container__text\">\n <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n </div>\n </ng-container>\n\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
|
|
597
598
|
easeInOut
|
|
598
599
|
] });
|
|
599
600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgUploadComponent, decorators: [{
|
|
600
601
|
type: Component,
|
|
601
602
|
args: [{ selector: 'img-upload', animations: [
|
|
602
603
|
easeInOut
|
|
603
|
-
], template: "<div\
|
|
604
|
+
], template: "<div\n class=\"img-upload has-text-centered\"\n [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n (click)=\"fileInput.click()\"\n appDragDrop\n (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n #dragAndDropBox\n [@easeInOut]=\"'in'\"\n>\n <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n <div class=\"img-upload__container__wrapper\">\n\n <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n </div>\n\n <ng-container *ngIf=\"!isLoading\">\n <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n </div>\n\n <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n <div class=\"img-upload__container__text\">\n <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n </div>\n </ng-container>\n\n </div>\n </div>\n</div>\n" }]
|
|
604
605
|
}], ctorParameters: function () { return [{ type: AlertService }, { type: ApiService }, { type: i3.TranslateService }, { type: UploadService }]; }, propDecorators: { stateDisplayed: [{
|
|
605
606
|
type: Input
|
|
606
607
|
}], imgUploaded: [{
|
|
@@ -1003,7 +1004,7 @@ class PexelLibComponent {
|
|
|
1003
1004
|
}
|
|
1004
1005
|
}
|
|
1005
1006
|
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 });
|
|
1006
|
-
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'\">\
|
|
1007
|
+
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=\"fa-solid 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: [
|
|
1007
1008
|
easeInOut,
|
|
1008
1009
|
listAnnimation
|
|
1009
1010
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -1012,7 +1013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
1012
1013
|
args: [{ selector: 'pexels-lib', animations: [
|
|
1013
1014
|
easeInOut,
|
|
1014
1015
|
listAnnimation
|
|
1015
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\
|
|
1016
|
+
], 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=\"fa-solid 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" }]
|
|
1016
1017
|
}], ctorParameters: function () { return [{ type: PexelsService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { stateDisplayed: [{
|
|
1017
1018
|
type: Input
|
|
1018
1019
|
}], searchValue: [{
|
|
@@ -1027,6 +1028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
1027
1028
|
class ImgManagerService {
|
|
1028
1029
|
constructor() {
|
|
1029
1030
|
this.uploadService = inject(UploadService);
|
|
1031
|
+
this.ngZone = inject(NgZone); // Injecter NgZone
|
|
1030
1032
|
this.params = new HttpParams().set("limit", "20").set("page", "1");
|
|
1031
1033
|
// Display the img selection
|
|
1032
1034
|
this.pageFicheProductConfig = {
|
|
@@ -1147,6 +1149,48 @@ class ImgManagerService {
|
|
|
1147
1149
|
this.destroy$.next();
|
|
1148
1150
|
this.destroy$.complete();
|
|
1149
1151
|
}
|
|
1152
|
+
copyToClipboard(url) {
|
|
1153
|
+
return new Promise((resolve) => {
|
|
1154
|
+
// Vérifier si l'API Clipboard est disponible
|
|
1155
|
+
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
1156
|
+
navigator.clipboard.writeText(url)
|
|
1157
|
+
.then(() => resolve(true))
|
|
1158
|
+
.catch((error) => {
|
|
1159
|
+
console.error('Failed to copy to clipboard:', error);
|
|
1160
|
+
resolve(this.fallbackCopyToClipboard(url));
|
|
1161
|
+
});
|
|
1162
|
+
}
|
|
1163
|
+
else {
|
|
1164
|
+
// Fallback pour les navigateurs qui ne supportent pas l'API Clipboard
|
|
1165
|
+
resolve(this.fallbackCopyToClipboard(url));
|
|
1166
|
+
}
|
|
1167
|
+
});
|
|
1168
|
+
}
|
|
1169
|
+
fallbackCopyToClipboard(text) {
|
|
1170
|
+
let success = false;
|
|
1171
|
+
// Exécuter en dehors du cycle de détection d'Angular
|
|
1172
|
+
this.ngZone.runOutsideAngular(() => {
|
|
1173
|
+
const textArea = document.createElement('textarea');
|
|
1174
|
+
textArea.value = text;
|
|
1175
|
+
textArea.style.position = 'fixed';
|
|
1176
|
+
textArea.style.left = '-999999px';
|
|
1177
|
+
textArea.style.top = '-999999px';
|
|
1178
|
+
document.body.appendChild(textArea);
|
|
1179
|
+
textArea.focus();
|
|
1180
|
+
textArea.select();
|
|
1181
|
+
try {
|
|
1182
|
+
success = document.execCommand('copy');
|
|
1183
|
+
}
|
|
1184
|
+
catch (error) {
|
|
1185
|
+
console.error('Fallback: Failed to copy to clipboard:', error);
|
|
1186
|
+
success = false;
|
|
1187
|
+
}
|
|
1188
|
+
finally {
|
|
1189
|
+
document.body.removeChild(textArea);
|
|
1190
|
+
}
|
|
1191
|
+
});
|
|
1192
|
+
return success;
|
|
1193
|
+
}
|
|
1150
1194
|
}
|
|
1151
1195
|
ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1152
1196
|
ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService });
|
|
@@ -1291,6 +1335,17 @@ class ImagesActionHandler {
|
|
|
1291
1335
|
onEdit(picture) {
|
|
1292
1336
|
this.imgEventCardService.emitImgToEdit(picture);
|
|
1293
1337
|
}
|
|
1338
|
+
copyLink(file_name) {
|
|
1339
|
+
const url = this.imgCDNService.getUrlImg('raw') + file_name;
|
|
1340
|
+
this.imgManager.copyToClipboard(url).then(success => {
|
|
1341
|
+
if (success) {
|
|
1342
|
+
this.alertService.openAlert('ImgManager.ImgList.linkCopied');
|
|
1343
|
+
}
|
|
1344
|
+
else {
|
|
1345
|
+
this.alertService.openAlert('ImgManager.ImgList.linkCopyFailed');
|
|
1346
|
+
}
|
|
1347
|
+
});
|
|
1348
|
+
}
|
|
1294
1349
|
onToggleSelectImg(index) {
|
|
1295
1350
|
if (this.disable || this.stateDisplayed === 'window') {
|
|
1296
1351
|
return;
|
|
@@ -1417,14 +1472,14 @@ class ImgCardComponent extends ImagesActionHandler {
|
|
|
1417
1472
|
}
|
|
1418
1473
|
}
|
|
1419
1474
|
ImgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1420
|
-
ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\
|
|
1475
|
+
ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n <div class=\"img-card\">\n <div class=\"img-card__container\"\n [ngClass]=\"{\n 'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n 'imgSelected': picture.selected,\n 'deletion': picture.deleted}\">\n <img\n class=\"img-card__container__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [alt]=\"picture.display_name\"\n (click)=\"onToggleImgSelected()\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <div\n class=\"img-card__container__config\"\n *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n >\n <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\n <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\n <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n </button>\n </div>\n <div\n class=\"img-card__container__config img-card__container__config--small\"\n *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n >\n <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\n </div>\n <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' : activeConfirmDelete}\">\n <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n <div>\n <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n </div>\n </div>\n <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n <i class=\"far fa-check\"></i>\n <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n </div>\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"img-card__container__overlay\"\n [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n </div>\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n </div>\n <div\n class=\"img-card__nameContainer\"\n [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n <input\n type=\"text\"\n class=\"wzImgMngInput img-card__nameContainer__name\"\n [(ngModel)]=\"picture.display_name\"\n (ngModelChange)=\"onNameChange(picture.id_file)\"\n [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n (focus)=\"previousName=picture.display_name;focusInput = true;\"\n (blur)=\"focusInput = false;\"\n >\n <span>{{picture.display_name}}</span>\n </div>\n\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: 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: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
|
|
1421
1476
|
easeInOut
|
|
1422
1477
|
] });
|
|
1423
1478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, decorators: [{
|
|
1424
1479
|
type: Component,
|
|
1425
1480
|
args: [{ selector: 'img-card', animations: [
|
|
1426
1481
|
easeInOut
|
|
1427
|
-
], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\
|
|
1482
|
+
], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n <div class=\"img-card\">\n <div class=\"img-card__container\"\n [ngClass]=\"{\n 'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n 'imgSelected': picture.selected,\n 'deletion': picture.deleted}\">\n <img\n class=\"img-card__container__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [alt]=\"picture.display_name\"\n (click)=\"onToggleImgSelected()\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <div\n class=\"img-card__container__config\"\n *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n >\n <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\n <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\n <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n </button>\n </div>\n <div\n class=\"img-card__container__config img-card__container__config--small\"\n *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n >\n <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\n </div>\n <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' : activeConfirmDelete}\">\n <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n <div>\n <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n </div>\n </div>\n <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n <i class=\"far fa-check\"></i>\n <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n </div>\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"img-card__container__overlay\"\n [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n </div>\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n </div>\n <div\n class=\"img-card__nameContainer\"\n [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n <input\n type=\"text\"\n class=\"wzImgMngInput img-card__nameContainer__name\"\n [(ngModel)]=\"picture.display_name\"\n (ngModelChange)=\"onNameChange(picture.id_file)\"\n [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n (focus)=\"previousName=picture.display_name;focusInput = true;\"\n (blur)=\"focusInput = false;\"\n >\n <span>{{picture.display_name}}</span>\n </div>\n\n </div>\n</div>\n" }]
|
|
1428
1483
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; }, propDecorators: { tabDisplayed: [{
|
|
1429
1484
|
type: Input
|
|
1430
1485
|
}], fullSize: [{
|
|
@@ -1489,14 +1544,14 @@ class UploadListComponent {
|
|
|
1489
1544
|
}
|
|
1490
1545
|
}
|
|
1491
1546
|
UploadListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadListComponent, deps: [{ token: ImgSelectionService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1492
|
-
UploadListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadListComponent, selector: "upload-list", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, ngImport: i0, template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\
|
|
1547
|
+
UploadListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadListComponent, selector: "upload-list", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, ngImport: i0, template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n class=\"upload-list__scroll\"\n [ngClass]=\"{\n 'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n 'upload-list__scroll--window': stateDisplayed === 'window'}\"\n >\n <div class=\"upload-list__box\">\n <div class=\"upload-list__box__container\">\n <div>\n <p class=\"mainColor\">\n {{ picturesList? picturesList.length : '' }}\n <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n </p>\n <div class=\"dropdown is-hoverable\">\n <div class=\"dropdown-trigger\">\n <i\n aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n class=\"fa-solid fa-info-circle\">\n </i>\n </div>\n <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"upload-list__box__cards\">\n <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n <img-card\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n ></img-card>\n <div class=\"upload-list__box__cards__card__btnBox\">\n <button type=\"button\" class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\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: "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: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
|
|
1493
1548
|
easeInOut
|
|
1494
1549
|
] });
|
|
1495
1550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadListComponent, decorators: [{
|
|
1496
1551
|
type: Component,
|
|
1497
1552
|
args: [{ selector: 'upload-list', animations: [
|
|
1498
1553
|
easeInOut
|
|
1499
|
-
], template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\
|
|
1554
|
+
], template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n class=\"upload-list__scroll\"\n [ngClass]=\"{\n 'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n 'upload-list__scroll--window': stateDisplayed === 'window'}\"\n >\n <div class=\"upload-list__box\">\n <div class=\"upload-list__box__container\">\n <div>\n <p class=\"mainColor\">\n {{ picturesList? picturesList.length : '' }}\n <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n </p>\n <div class=\"dropdown is-hoverable\">\n <div class=\"dropdown-trigger\">\n <i\n aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n class=\"fa-solid fa-info-circle\">\n </i>\n </div>\n <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"upload-list__box__cards\">\n <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n <img-card\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n ></img-card>\n <div class=\"upload-list__box__cards__card__btnBox\">\n <button type=\"button\" class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n" }]
|
|
1500
1555
|
}], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
|
|
1501
1556
|
type: Input
|
|
1502
1557
|
}], tabDisplayed: [{
|
|
@@ -1572,10 +1627,10 @@ class EditorInfoSectionComponent {
|
|
|
1572
1627
|
}
|
|
1573
1628
|
}
|
|
1574
1629
|
EditorInfoSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorInfoSectionComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1575
|
-
EditorInfoSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorInfoSectionComponent, selector: "info-section", inputs: { imgToEdit: "imgToEdit", isNameModified: "isNameModified" }, outputs: { isNameModifiedChange: "isNameModifiedChange" }, ngImport: i0, template: "\
|
|
1630
|
+
EditorInfoSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorInfoSectionComponent, selector: "info-section", inputs: { imgToEdit: "imgToEdit", isNameModified: "isNameModified" }, outputs: { isNameModifiedChange: "isNameModifiedChange" }, ngImport: i0, template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n <p class=\"mainColor\">\n {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\n </p>\n <input\n type=\"text\"\n class=\"img-editor__infoSection__propertyEditable__input\"\n placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n [(ngModel)]=\"imgToEdit.display_name\"\n debounceKeyUp\n [debounceTime]=\"500\"\n (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n <p class=\"mainColor\">\n {{ 'ImgManager.UploadList.properties.imgURL' | translate }}\n <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.editImg.changeName' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\n </p>\n <button type=\"button\" [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span> <i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }} :</p>\n <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }} :</p>\n <p >{{getFileSize()}} ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.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: 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: "directive", type: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "directive", type: CopyClipboardDirective, selector: "[copy-clipboard]", inputs: ["copy-clipboard"], outputs: ["copied"] }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
|
|
1576
1631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorInfoSectionComponent, decorators: [{
|
|
1577
1632
|
type: Component,
|
|
1578
|
-
args: [{ selector: 'info-section', template: "\
|
|
1633
|
+
args: [{ selector: 'info-section', template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n <p class=\"mainColor\">\n {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\n </p>\n <input\n type=\"text\"\n class=\"img-editor__infoSection__propertyEditable__input\"\n placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n [(ngModel)]=\"imgToEdit.display_name\"\n debounceKeyUp\n [debounceTime]=\"500\"\n (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n <p class=\"mainColor\">\n {{ 'ImgManager.UploadList.properties.imgURL' | translate }}\n <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.editImg.changeName' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\n </p>\n <button type=\"button\" [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span> <i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }} :</p>\n <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }} :</p>\n <p >{{getFileSize()}} ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\n</div>\n" }]
|
|
1579
1634
|
}], ctorParameters: function () { return [{ type: AlertService }]; }, propDecorators: { imgToEdit: [{
|
|
1580
1635
|
type: Input
|
|
1581
1636
|
}], isNameModified: [{
|
|
@@ -1870,14 +1925,14 @@ class CropperComponent {
|
|
|
1870
1925
|
}
|
|
1871
1926
|
}
|
|
1872
1927
|
CropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CropperComponent, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1873
|
-
CropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CropperComponent, selector: "cropper", inputs: { imgToEdit: "imgToEdit", isImgModified: "isImgModified" }, outputs: { isImgModifiedChange: "isImgModifiedChange", editClosed: "editClosed", currentCroppedImageChange: "currentCroppedImageChange" }, ngImport: i0, template: "<div class=\"img-editor__container__toolsContainer\">\
|
|
1928
|
+
CropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CropperComponent, selector: "cropper", inputs: { imgToEdit: "imgToEdit", isImgModified: "isImgModified" }, outputs: { isImgModifiedChange: "isImgModifiedChange", editClosed: "editClosed", currentCroppedImageChange: "currentCroppedImageChange" }, ngImport: i0, template: "<div class=\"img-editor__container__toolsContainer\">\n\n <div *ngIf=\"isImgCropped\">\n <div\n class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n (click)=\"confirmCrop()\"\n [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n nwbToolTipPosition=\"left\"\n >\n <i class=\"far fa-check\"></i>\n <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n </div>\n </div>\n\n <!-- Resolution -->\n <dropdown dropdownId=\"dropdown-resolution\">\n <ng-container label>\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n >\n <i class=\"far fa-crop\"></i>\n <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"changeResolutionSize(index)\">\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Zoom -->\n <dropdown dropdownId=\"dropdown-rotation\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n <i class=\"far fa-expand-arrows-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Rotation -->\n <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n <i class=\"far fa-redo\"></i>\n <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n (click)=\"onRestart()\"\n @insertRemoveAnnim\n >\n <i class=\"far fa-retweet-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n <image-cropper\n [imageURL]=\"imgRoute\"\n [imageBase64]=\"croppedImage\"\n [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n [onlyScaleDown]=\"true\"\n [roundCropper]=\"false\"\n [canvasRotation]=\"canvasRotation\"\n [transform]=\"transform\"\n [alignImage]=\"'center'\"\n [style.display]=\"showCropper ? null : 'none'\"\n [format]=\"imgType\"\n [backgroundColor]=\"'white'\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded()\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\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: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "component", type: i4$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
|
|
1874
1929
|
insertRemove
|
|
1875
1930
|
] });
|
|
1876
1931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CropperComponent, decorators: [{
|
|
1877
1932
|
type: Component,
|
|
1878
1933
|
args: [{ selector: 'cropper', animations: [
|
|
1879
1934
|
insertRemove
|
|
1880
|
-
], template: "<div class=\"img-editor__container__toolsContainer\">\
|
|
1935
|
+
], template: "<div class=\"img-editor__container__toolsContainer\">\n\n <div *ngIf=\"isImgCropped\">\n <div\n class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n (click)=\"confirmCrop()\"\n [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n nwbToolTipPosition=\"left\"\n >\n <i class=\"far fa-check\"></i>\n <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n </div>\n </div>\n\n <!-- Resolution -->\n <dropdown dropdownId=\"dropdown-resolution\">\n <ng-container label>\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n >\n <i class=\"far fa-crop\"></i>\n <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"changeResolutionSize(index)\">\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Zoom -->\n <dropdown dropdownId=\"dropdown-rotation\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n <i class=\"far fa-expand-arrows-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Rotation -->\n <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n <i class=\"far fa-redo\"></i>\n <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n (click)=\"onRestart()\"\n @insertRemoveAnnim\n >\n <i class=\"far fa-retweet-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n <image-cropper\n [imageURL]=\"imgRoute\"\n [imageBase64]=\"croppedImage\"\n [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n [onlyScaleDown]=\"true\"\n [roundCropper]=\"false\"\n [canvasRotation]=\"canvasRotation\"\n [transform]=\"transform\"\n [alignImage]=\"'center'\"\n [style.display]=\"showCropper ? null : 'none'\"\n [format]=\"imgType\"\n [backgroundColor]=\"'white'\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded()\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n</div>\n" }]
|
|
1881
1936
|
}], ctorParameters: function () { return [{ type: ImgCDNService }]; }, propDecorators: { imgToEdit: [{
|
|
1882
1937
|
type: Input
|
|
1883
1938
|
}], isImgModified: [{
|
|
@@ -1985,14 +2040,14 @@ class ImgEditorComponent {
|
|
|
1985
2040
|
}
|
|
1986
2041
|
}
|
|
1987
2042
|
ImgEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1988
|
-
ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\
|
|
2043
|
+
ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n <!-- Button Action Section -->\n\n <div class=\"img-editor__infoSection__actions\">\n <div>\n <button\n type=\"button\"\n class=\"button img-editor__infoSection__actions__cancel\"\n (click)=\"onCancel()\"\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <div\n class=\"button danger button img-editor__infoSection__actions__save\"\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n (click)=\"onSave()\"\n >\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n </div>\n\n </div>\n </div>\n\n <ng-scrollbar\n class=\"img-editor__scroll\"\n [ngClass]=\"{\n 'img-editor__scroll--full': stateDisplayed === 'full',\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n 'img-editor__scroll--window': stateDisplayed === 'window'\n }\"\n >\n <div class=\"columns\">\n <!-- Left section -->\n <div class=\"column is-one-third img-editor__infoSection\">\n\n <info-section\n [imgToEdit]=\"imgToEdit\"\n [(isNameModified)]=\"isNameModified\"\n >\n </info-section>\n </div>\n\n\n <!-- Right section -->\n <div class=\"column img-editor__container\">\n <cropper\n [imgToEdit]=\"imgToEdit\"\n [(isImgModified)]=\"isImgModified\"\n (currentCroppedImageChange)=\"onImgCropped($event)\"\n (editClosed)=\"onEditClosed($event)\">\n </cropper>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
|
|
1989
2044
|
easeInOut
|
|
1990
2045
|
] });
|
|
1991
2046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, decorators: [{
|
|
1992
2047
|
type: Component,
|
|
1993
2048
|
args: [{ selector: 'img-editor', animations: [
|
|
1994
2049
|
easeInOut
|
|
1995
|
-
], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\
|
|
2050
|
+
], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n <!-- Button Action Section -->\n\n <div class=\"img-editor__infoSection__actions\">\n <div>\n <button\n type=\"button\"\n class=\"button img-editor__infoSection__actions__cancel\"\n (click)=\"onCancel()\"\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <div\n class=\"button danger button img-editor__infoSection__actions__save\"\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n (click)=\"onSave()\"\n >\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n </div>\n\n </div>\n </div>\n\n <ng-scrollbar\n class=\"img-editor__scroll\"\n [ngClass]=\"{\n 'img-editor__scroll--full': stateDisplayed === 'full',\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n 'img-editor__scroll--window': stateDisplayed === 'window'\n }\"\n >\n <div class=\"columns\">\n <!-- Left section -->\n <div class=\"column is-one-third img-editor__infoSection\">\n\n <info-section\n [imgToEdit]=\"imgToEdit\"\n [(isNameModified)]=\"isNameModified\"\n >\n </info-section>\n </div>\n\n\n <!-- Right section -->\n <div class=\"column img-editor__container\">\n <cropper\n [imgToEdit]=\"imgToEdit\"\n [(isImgModified)]=\"isImgModified\"\n (currentCroppedImageChange)=\"onImgCropped($event)\"\n (editClosed)=\"onEditClosed($event)\">\n </cropper>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n" }]
|
|
1996
2051
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
|
|
1997
2052
|
type: Input
|
|
1998
2053
|
}], imgToEdit: [{
|
|
@@ -2093,10 +2148,10 @@ class CanvaBtnComponent {
|
|
|
2093
2148
|
}
|
|
2094
2149
|
}
|
|
2095
2150
|
CanvaBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaBtnComponent, deps: [{ token: CanvaService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2096
|
-
CanvaBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CanvaBtnComponent, selector: "canva-btn", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { showImgUploaded: "showImgUploaded" }, ngImport: i0, template: "<div class=\"canva dropdown is-right is-hoverable\"\
|
|
2151
|
+
CanvaBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CanvaBtnComponent, selector: "canva-btn", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { showImgUploaded: "showImgUploaded" }, ngImport: i0, template: "<div class=\"canva dropdown is-right is-hoverable\"\n wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n >\n <div class=\"dropdown-trigger\">\n <div\n class=\"button canva-btn\"\n aria-controls=\"dropdown-menuCanva\"\n (click)=\"openDropDownMenu = true;\"\n >\n <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropDownShadow\"\n [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n id=\"dropdown-menuCanva\"\n role=\"menu\">\n <ng-scrollbar\n class=\"smallScroll\"\n >\n <div class=\"dropdown-content\">\n <div class=\"dropdownTitle\">\n <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n </div>\n\n <div class=\"infoItem\">\n <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n </div>\n\n <ng-container >\n <div\n *ngIf=\"expectedWidth && expectedHeight\"\n class=\"dropdown-item-wrapper\"\n >\n <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngFor=\"let format of availableFormat| keyvalue\"\n class=\"dropdown-item-wrapper\">\n <div\n (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n class=\"dropdown-item\">\n <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n </div>\n </div>\n </div>\n </ng-scrollbar>\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: "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: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
2097
2152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaBtnComponent, decorators: [{
|
|
2098
2153
|
type: Component,
|
|
2099
|
-
args: [{ selector: 'canva-btn', template: "<div class=\"canva dropdown is-right is-hoverable\"\
|
|
2154
|
+
args: [{ selector: 'canva-btn', template: "<div class=\"canva dropdown is-right is-hoverable\"\n wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n >\n <div class=\"dropdown-trigger\">\n <div\n class=\"button canva-btn\"\n aria-controls=\"dropdown-menuCanva\"\n (click)=\"openDropDownMenu = true;\"\n >\n <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropDownShadow\"\n [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n id=\"dropdown-menuCanva\"\n role=\"menu\">\n <ng-scrollbar\n class=\"smallScroll\"\n >\n <div class=\"dropdown-content\">\n <div class=\"dropdownTitle\">\n <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n </div>\n\n <div class=\"infoItem\">\n <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n </div>\n\n <ng-container >\n <div\n *ngIf=\"expectedWidth && expectedHeight\"\n class=\"dropdown-item-wrapper\"\n >\n <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngFor=\"let format of availableFormat| keyvalue\"\n class=\"dropdown-item-wrapper\">\n <div\n (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n class=\"dropdown-item\">\n <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n</div>\n" }]
|
|
2100
2155
|
}], ctorParameters: function () { return [{ type: CanvaService }]; }, propDecorators: { stateDisplayed: [{
|
|
2101
2156
|
type: Input
|
|
2102
2157
|
}], showImgUploaded: [{
|
|
@@ -2234,10 +2289,10 @@ class PageSelectorComponent {
|
|
|
2234
2289
|
}
|
|
2235
2290
|
}
|
|
2236
2291
|
PageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2237
|
-
PageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PageSelectorComponent, selector: "wz-page-selector", inputs: { pagination: "pagination", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-selector\">\
|
|
2292
|
+
PageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PageSelectorComponent, selector: "wz-page-selector", inputs: { pagination: "pagination", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-selector\">\n\n <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\n <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\n <i class=\"fa-solid fa-sort-down\"></i>\n </div>\n <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\n <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\n <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\n <span>{{ pageIndex.display }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!largeNumberOfPage\">\n <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n {{ pageIndex }}\n </option>\n </ng-container>\n </select>\n </ng-container>\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "pipe", type: PagniationArrayTotalPages, name: "ArrayTotalPages" }, { kind: "pipe", type: LargeNumberOfPagePipe, name: "LargeNumberOfPage" }] });
|
|
2238
2293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PageSelectorComponent, decorators: [{
|
|
2239
2294
|
type: Component,
|
|
2240
|
-
args: [{ selector: 'wz-page-selector', template: "<div class=\"wz-selector\">\
|
|
2295
|
+
args: [{ selector: 'wz-page-selector', template: "<div class=\"wz-selector\">\n\n <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\n <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\n <i class=\"fa-solid fa-sort-down\"></i>\n </div>\n <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\n <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\n <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\n <span>{{ pageIndex.display }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!largeNumberOfPage\">\n <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n {{ pageIndex }}\n </option>\n </ng-container>\n </select>\n </ng-container>\n</div>\n" }]
|
|
2241
2296
|
}], ctorParameters: function () { return []; }, propDecorators: { pagination: [{
|
|
2242
2297
|
type: Input
|
|
2243
2298
|
}], totalItems: [{
|
|
@@ -2358,14 +2413,14 @@ class MosaicViewComponent extends ImagesActionHandler {
|
|
|
2358
2413
|
}
|
|
2359
2414
|
}
|
|
2360
2415
|
MosaicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2361
|
-
MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\
|
|
2416
|
+
MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n <!-- Search section -->\n <div\n class=\"mosaic__search\"\n [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n *ngIf=\"tabDisplayed !== 'img-upload'\">\n <wz-input-search\n [(ngModel)]=\"tableFilters.searchValue\"\n (changeDebounced)=\"onSearchChange($event)\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [smallPadding]=\"stateDisplayed === 'small'\"\n ></wz-input-search>\n </div>\n\n <!-- Cards section -->\n <div\n class=\"mosaic__container__cards\"\n [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n [@listAnimation]=\"picturesList.length\"\n *ngIf=\"!isLoading && !displayPexelsResults\"\n >\n <img-card\n *ngFor=\"let picture of picturesList; let index = index; trackBy: trackById \"\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [disable]=\"disable\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (pictureNameChange)=\"onCardRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n [fullSize]=\"fullSize\"\n ></img-card>\n <div\n *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n class=\"mosaic__container__cards__fakeImg\"\n [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n </div>\n </div>\n\n <!-- Loader section -->\n <div class=\"mosaic__container__loader\" *ngIf=\"isLoading\">\n <wz-loader [small]=\"true\"></wz-loader>\n </div>\n\n <!-- Pagination section -->\n <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n <wz-pagination\n [pagination]=\"tableFilters\"\n (pageChange)=\"onFiltersChange()\"\n >\n </wz-pagination>\n </div>\n\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: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { 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: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
|
|
2362
2417
|
listAnnimation
|
|
2363
2418
|
] });
|
|
2364
2419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, decorators: [{
|
|
2365
2420
|
type: Component,
|
|
2366
2421
|
args: [{ selector: 'mosaic-view', animations: [
|
|
2367
2422
|
listAnnimation
|
|
2368
|
-
], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\
|
|
2423
|
+
], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n <!-- Search section -->\n <div\n class=\"mosaic__search\"\n [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n *ngIf=\"tabDisplayed !== 'img-upload'\">\n <wz-input-search\n [(ngModel)]=\"tableFilters.searchValue\"\n (changeDebounced)=\"onSearchChange($event)\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [smallPadding]=\"stateDisplayed === 'small'\"\n ></wz-input-search>\n </div>\n\n <!-- Cards section -->\n <div\n class=\"mosaic__container__cards\"\n [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n [@listAnimation]=\"picturesList.length\"\n *ngIf=\"!isLoading && !displayPexelsResults\"\n >\n <img-card\n *ngFor=\"let picture of picturesList; let index = index; trackBy: trackById \"\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [disable]=\"disable\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (pictureNameChange)=\"onCardRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n [fullSize]=\"fullSize\"\n ></img-card>\n <div\n *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n class=\"mosaic__container__cards__fakeImg\"\n [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n </div>\n </div>\n\n <!-- Loader section -->\n <div class=\"mosaic__container__loader\" *ngIf=\"isLoading\">\n <wz-loader [small]=\"true\"></wz-loader>\n </div>\n\n <!-- Pagination section -->\n <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n <wz-pagination\n [pagination]=\"tableFilters\"\n (pageChange)=\"onFiltersChange()\"\n >\n </wz-pagination>\n </div>\n\n</div>\n" }]
|
|
2369
2424
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; }, propDecorators: { tabDisplayed: [{
|
|
2370
2425
|
type: Input
|
|
2371
2426
|
}], fullSize: [{
|
|
@@ -2970,16 +3025,29 @@ class TableViewComponent extends ImagesActionHandler {
|
|
|
2970
3025
|
}
|
|
2971
3026
|
ngOnInit() {
|
|
2972
3027
|
}
|
|
3028
|
+
// Copy the image link to clipboard
|
|
3029
|
+
copyImageLink(file_name) {
|
|
3030
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3031
|
+
const url = this.imgCDNService.getUrlImg('raw') + file_name;
|
|
3032
|
+
const success = yield this.imgManager.copyToClipboard(url);
|
|
3033
|
+
if (success) {
|
|
3034
|
+
this.alertService.openAlert('ImgManager.ImgList.linkCopied');
|
|
3035
|
+
}
|
|
3036
|
+
else {
|
|
3037
|
+
this.alertService.openAlert('ImgManager.ImgList.linkCopyFailed');
|
|
3038
|
+
}
|
|
3039
|
+
});
|
|
3040
|
+
}
|
|
2973
3041
|
}
|
|
2974
3042
|
TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2975
|
-
TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n <wz-table\n [checkbox]=\"true\"\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n [(tableFilters)]=\"tableFilters\"\n (tableFiltersChange)=\"onFiltersChange()\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [disablePagniation]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n >\n <!-- Header Section -->\n <div\n headerCell\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n columnSize=\"2\"\n sortName=\"name\"\n ></div>\n <div\n headerCell\n centerCell=\"center\"\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n ></div>\n <div headerCell columnSize=\"0\"></div>\n\n <!-- Body Section -->\n <div\n tableRow\n checkBoxRow\n [checkBoxValue]=\"picture.delSelected\"\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n *ngFor=\"let picture of picturesList; let index = index\"\n >\n\n <div tableColumn columnSize=\"2\">\n <div class=\"table-view__row__container\">\n <div\n class=\"table-view__row__container__imgContainer\"\n [ngClass]=\"{'imgSelected': picture.selected}\"\n (click)=\"onToggleSelectImg(index)\">\n <img\n class=\"table-view__row__container__imgContainer__img\"\n [src]=\"picture.file_name | imgSrc : '100'\"\n alt=\"picture.display_name\"\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"table-view__row__container__imgContainer__overlay\"\n >\n <i class=\"fad fa-folder-times\"></i>\n </div>\n </div>\n <input\n type=\"text\"\n class=\"wzImgMngInput table-view__row__container__name\"\n [(ngModel)]=\"picture.display_name\"\n (focus)=\"previousName=picture.display_name\"\n (blur)=\"onNameChange(picture.id_file)\"\n (click)=\"onToggleDelSelection(index)\"\n [ngClass]=\"{'desabled': picture.deleted}\"\n [disabled]=\"picture.deleted\"\n >\n </div>\n </div>\n\n <div\n tableColumn\n centerCell=\"center\"\n (click)=\"onToggleDelSelection(index)\"\n >\n <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n </div>\n\n <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n <!-- Dropdown -->\n <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n <ng-container label>\n <div class=\"table-view__dropdown-options__label rotate\">\n <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n >\n <i class=\"far fa-download download\"></i> \n <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onEdit(picture)\"\n >\n <i class=\"far fa-crop-alt edit\"></i> \n <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onRemoveImg(picture)\"\n >\n <i class=\"fal fa-times deleted\"></i> \n <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n </div>\n </ng-container>\n </dropdown>\n </div>\n </div>\n </wz-table>\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.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: 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: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
|
|
3043
|
+
TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n <wz-table\n [checkbox]=\"true\"\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n [(tableFilters)]=\"tableFilters\"\n (tableFiltersChange)=\"onFiltersChange()\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [disablePagniation]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n >\n <!-- Header Section -->\n <div\n headerCell\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n columnSize=\"2\"\n sortName=\"name\"\n ></div>\n <div\n headerCell\n centerCell=\"center\"\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n ></div>\n <div headerCell columnSize=\"0\"></div>\n\n <!-- Body Section -->\n <div\n tableRow\n checkBoxRow\n [checkBoxValue]=\"picture.delSelected\"\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n *ngFor=\"let picture of picturesList; let index = index\"\n >\n\n <div tableColumn columnSize=\"2\">\n <div class=\"table-view__row__container\">\n <div\n class=\"table-view__row__container__imgContainer\"\n [ngClass]=\"{'imgSelected': picture.selected}\"\n (click)=\"onToggleSelectImg(index)\">\n <img\n class=\"table-view__row__container__imgContainer__img\"\n [src]=\"picture.file_name | imgSrc : '100'\"\n alt=\"picture.display_name\"\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"table-view__row__container__imgContainer__overlay\"\n >\n <i class=\"fad fa-folder-times\"></i>\n </div>\n </div>\n <input\n type=\"text\"\n class=\"wzImgMngInput table-view__row__container__name\"\n [(ngModel)]=\"picture.display_name\"\n (focus)=\"previousName=picture.display_name\"\n (blur)=\"onNameChange(picture.id_file)\"\n (click)=\"onToggleDelSelection(index)\"\n [ngClass]=\"{'desabled': picture.deleted}\"\n [disabled]=\"picture.deleted\"\n >\n </div>\n </div>\n\n <div\n tableColumn\n centerCell=\"center\"\n (click)=\"onToggleDelSelection(index)\"\n >\n <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n </div>\n\n <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n <!-- Dropdown -->\n <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n <ng-container label>\n <div class=\"table-view__dropdown-options__label rotate\">\n <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n >\n <i class=\"far fa-download download\"></i> \n <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onEdit(picture)\"\n >\n <i class=\"far fa-crop-alt edit\"></i> \n <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"copyImageLink(picture.file_name)\"\n >\n <i class=\"far fa-copy copy\"></i> \n <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onRemoveImg(picture)\"\n >\n <i class=\"fal fa-times deleted\"></i> \n <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n </div>\n </ng-container>\n </dropdown>\n </div>\n </div>\n </wz-table>\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.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: 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: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
|
|
2976
3044
|
listAnnimation
|
|
2977
3045
|
] });
|
|
2978
3046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, decorators: [{
|
|
2979
3047
|
type: Component,
|
|
2980
3048
|
args: [{ selector: 'table-view', animations: [
|
|
2981
3049
|
listAnnimation
|
|
2982
|
-
], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n <wz-table\n [checkbox]=\"true\"\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n [(tableFilters)]=\"tableFilters\"\n (tableFiltersChange)=\"onFiltersChange()\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [disablePagniation]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n >\n <!-- Header Section -->\n <div\n headerCell\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n columnSize=\"2\"\n sortName=\"name\"\n ></div>\n <div\n headerCell\n centerCell=\"center\"\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n ></div>\n <div headerCell columnSize=\"0\"></div>\n\n <!-- Body Section -->\n <div\n tableRow\n checkBoxRow\n [checkBoxValue]=\"picture.delSelected\"\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n *ngFor=\"let picture of picturesList; let index = index\"\n >\n\n <div tableColumn columnSize=\"2\">\n <div class=\"table-view__row__container\">\n <div\n class=\"table-view__row__container__imgContainer\"\n [ngClass]=\"{'imgSelected': picture.selected}\"\n (click)=\"onToggleSelectImg(index)\">\n <img\n class=\"table-view__row__container__imgContainer__img\"\n [src]=\"picture.file_name | imgSrc : '100'\"\n alt=\"picture.display_name\"\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"table-view__row__container__imgContainer__overlay\"\n >\n <i class=\"fad fa-folder-times\"></i>\n </div>\n </div>\n <input\n type=\"text\"\n class=\"wzImgMngInput table-view__row__container__name\"\n [(ngModel)]=\"picture.display_name\"\n (focus)=\"previousName=picture.display_name\"\n (blur)=\"onNameChange(picture.id_file)\"\n (click)=\"onToggleDelSelection(index)\"\n [ngClass]=\"{'desabled': picture.deleted}\"\n [disabled]=\"picture.deleted\"\n >\n </div>\n </div>\n\n <div\n tableColumn\n centerCell=\"center\"\n (click)=\"onToggleDelSelection(index)\"\n >\n <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n </div>\n\n <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n <!-- Dropdown -->\n <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n <ng-container label>\n <div class=\"table-view__dropdown-options__label rotate\">\n <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n >\n <i class=\"far fa-download download\"></i> \n <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onEdit(picture)\"\n >\n <i class=\"far fa-crop-alt edit\"></i> \n <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onRemoveImg(picture)\"\n >\n <i class=\"fal fa-times deleted\"></i> \n <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n </div>\n </ng-container>\n </dropdown>\n </div>\n </div>\n </wz-table>\n</div>\n" }]
|
|
3050
|
+
], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n <wz-table\n [checkbox]=\"true\"\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n [(tableFilters)]=\"tableFilters\"\n (tableFiltersChange)=\"onFiltersChange()\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [disablePagniation]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n >\n <!-- Header Section -->\n <div\n headerCell\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n columnSize=\"2\"\n sortName=\"name\"\n ></div>\n <div\n headerCell\n centerCell=\"center\"\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n ></div>\n <div headerCell columnSize=\"0\"></div>\n\n <!-- Body Section -->\n <div\n tableRow\n checkBoxRow\n [checkBoxValue]=\"picture.delSelected\"\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n *ngFor=\"let picture of picturesList; let index = index\"\n >\n\n <div tableColumn columnSize=\"2\">\n <div class=\"table-view__row__container\">\n <div\n class=\"table-view__row__container__imgContainer\"\n [ngClass]=\"{'imgSelected': picture.selected}\"\n (click)=\"onToggleSelectImg(index)\">\n <img\n class=\"table-view__row__container__imgContainer__img\"\n [src]=\"picture.file_name | imgSrc : '100'\"\n alt=\"picture.display_name\"\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"table-view__row__container__imgContainer__overlay\"\n >\n <i class=\"fad fa-folder-times\"></i>\n </div>\n </div>\n <input\n type=\"text\"\n class=\"wzImgMngInput table-view__row__container__name\"\n [(ngModel)]=\"picture.display_name\"\n (focus)=\"previousName=picture.display_name\"\n (blur)=\"onNameChange(picture.id_file)\"\n (click)=\"onToggleDelSelection(index)\"\n [ngClass]=\"{'desabled': picture.deleted}\"\n [disabled]=\"picture.deleted\"\n >\n </div>\n </div>\n\n <div\n tableColumn\n centerCell=\"center\"\n (click)=\"onToggleDelSelection(index)\"\n >\n <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n </div>\n\n <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n <!-- Dropdown -->\n <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n <ng-container label>\n <div class=\"table-view__dropdown-options__label rotate\">\n <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n >\n <i class=\"far fa-download download\"></i> \n <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onEdit(picture)\"\n >\n <i class=\"far fa-crop-alt edit\"></i> \n <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"copyImageLink(picture.file_name)\"\n >\n <i class=\"far fa-copy copy\"></i> \n <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item>\n <div\n class=\"dropdown-item\"\n (click)=\"onRemoveImg(picture)\"\n >\n <i class=\"fal fa-times deleted\"></i> \n <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n </div>\n </ng-container>\n </dropdown>\n </div>\n </div>\n </wz-table>\n</div>\n" }]
|
|
2983
3051
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; } });
|
|
2984
3052
|
|
|
2985
3053
|
class ImagesViewComponent {
|
|
@@ -3289,7 +3357,7 @@ class ImagesViewComponent {
|
|
|
3289
3357
|
}
|
|
3290
3358
|
}
|
|
3291
3359
|
ImagesViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3292
|
-
ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\
|
|
3360
|
+
ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\n\n <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- Select -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen(vm.picturesList)\"\n type=\"button\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n type=\"button\"\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n type=\"button\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg(vm.picturesList)\"\n class=\"button images-view__container__delBtn danger\"\n type=\"button\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <div class=\"control\">\n <div\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fa-solid fa-th\"></i>\n </span>\n </div>\n </div>\n\n <div class=\"control\">\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fa-solid fa-bars\"></i>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Images section -->\n <ng-scrollbar\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n }\"\n >\n <div #imgLibContainer class=\"images-view__wrapper\">\n\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"vm.picturesList\"\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n [tableFilters]=\"vm.tableFilters\"\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"vm.displayPexelsResults\"\n [isLoading]=\"vm.isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"vm.picturesList\"\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n [tableFilters]=\"vm.tableFilters\"\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"vm.displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"vm.isLoading\"\n >\n </table-view>\n </div>\n </div>\n </ng-scrollbar>\n\n <!-- Pexels Section - When no img found -->\n <div\n *ngIf=\"vm.displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"vm.tableFilters.searchValue\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
|
|
3293
3361
|
easeInOut,
|
|
3294
3362
|
insertRemove
|
|
3295
3363
|
] });
|
|
@@ -3298,7 +3366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
3298
3366
|
args: [{ selector: 'images-view', animations: [
|
|
3299
3367
|
easeInOut,
|
|
3300
3368
|
insertRemove
|
|
3301
|
-
], template: "<ng-container *ngIf=\"vm$ | async as vm\">\
|
|
3369
|
+
], template: "<ng-container *ngIf=\"vm$ | async as vm\">\n\n <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- Select -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen(vm.picturesList)\"\n type=\"button\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n type=\"button\"\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n type=\"button\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg(vm.picturesList)\"\n class=\"button images-view__container__delBtn danger\"\n type=\"button\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <div class=\"control\">\n <div\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fa-solid fa-th\"></i>\n </span>\n </div>\n </div>\n\n <div class=\"control\">\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fa-solid fa-bars\"></i>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Images section -->\n <ng-scrollbar\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n }\"\n >\n <div #imgLibContainer class=\"images-view__wrapper\">\n\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"vm.picturesList\"\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n [tableFilters]=\"vm.tableFilters\"\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"vm.displayPexelsResults\"\n [isLoading]=\"vm.isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"vm.picturesList\"\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n [tableFilters]=\"vm.tableFilters\"\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"vm.displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"vm.isLoading\"\n >\n </table-view>\n </div>\n </div>\n </ng-scrollbar>\n\n <!-- Pexels Section - When no img found -->\n <div\n *ngIf=\"vm.displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"vm.tableFilters.searchValue\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n </div>\n</ng-container>\n" }]
|
|
3302
3370
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgEventService }, { type: ImgSelectionService }, { type: AlertService }, { type: UserSettingsService }, { type: RenamePictureService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { stateDisplayed: [{
|
|
3303
3371
|
type: Input
|
|
3304
3372
|
}], tabDisplayed: [{
|
|
@@ -3443,10 +3511,10 @@ class SelectComponent {
|
|
|
3443
3511
|
}
|
|
3444
3512
|
}
|
|
3445
3513
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3446
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectComponent, selector: "wac-select", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", search: "search", type: "type", callToAction: "callToAction", maxWidth: "maxWidth", disabled: "disabled" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\
|
|
3514
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectComponent, selector: "wac-select", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", search: "search", type: "type", callToAction: "callToAction", maxWidth: "maxWidth", disabled: "disabled" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fa-solid fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fa-solid fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n </div>\n </div>\n\n </ng-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.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: 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: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] });
|
|
3447
3515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3448
3516
|
type: Component,
|
|
3449
|
-
args: [{ selector: 'wac-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\
|
|
3517
|
+
args: [{ selector: 'wac-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fa-solid fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fa-solid fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n </div>\n </div>\n\n </ng-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div>\n" }]
|
|
3450
3518
|
}], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { items: [{
|
|
3451
3519
|
type: Input
|
|
3452
3520
|
}], placeholder: [{
|
|
@@ -3556,10 +3624,10 @@ class ImgTabsComponent {
|
|
|
3556
3624
|
}
|
|
3557
3625
|
}
|
|
3558
3626
|
ImgTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3559
|
-
ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\
|
|
3627
|
+
ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\n class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n <div class=\"wrapper-tabs\">\n <div\n class=\"tabs\"\n [ngClass]=\"\n {\n 'tabs--notWindow': stateDisplayed !== 'window',\n 'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n }\">\n\n <ul>\n <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n </ul>\n <div\n class=\"img-tabs__canva\"\n [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n <canva-btn\n (showImgUploaded)=\"onShowImgUploaded()\"\n [stateDisplayed]=\"stateDisplayed\">\n </canva-btn>\n </div>\n </div>\n <div class=\"select-mobile-page\">\n <wac-select\n [(ngModel)]=\"tabActive\"\n name=\"tabs\"\n [items]=\"tabs\"\n ></wac-select>\n </div>\n </div>\n\n <!-- Upload section -->\n <div\n class=\"columns img-tabs__tabsFirst\"\n [ngClass]=\"{\n 'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n 'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n }\"\n *ngIf=\"tabActive.value === tabs[0].value\">\n <div class=\"column img-tabs__tabsFirst__upload\">\n <img-upload\n [stateDisplayed]=\"stateDisplayed\"\n (imgUploaded)=\"onImgUploaded($event)\"\n ></img-upload>\n </div>\n <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n 'img-tabs__tabsFirst__list--upload': imgUpload\n }\">\n <images-view\n *ngIf=\"!imgUpload\"\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"false\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive.value\"\n [nbRowToShow]=\"2\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n [fullSize]=\"false\">\n </images-view>\n\n\n <div [hidden]=\"!imgUpload\">\n <upload-list\n #imgUploadedImg\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabActive.value\"\n [multipleImgMode]=\"multipleImgMode\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n >\n </upload-list>\n </div>\n </div>\n </div>\n\n <!-- Images section -->\n <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n <div class=\"column\">\n\n <images-view\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"listDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive.value\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n [fullSize]=\"true\">\n </images-view>\n\n </div>\n </div>\n\n <!-- Pexels img section -->\n <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n <div class=\"column\">\n <pexels-lib\n [stateDisplayed]=\"stateDisplayed\"\n (showImgUploaded)=\"onShowImgUploaded()\">\n </pexels-lib>\n </div>\n </div>\n\n <!--Edition section -->\n <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n <div class=\"column\">\n <img-editor\n [stateDisplayed]=\"stateDisplayed\"\n [imgToEdit]=\"imgToEdit\"\n (editClosed)=\"onEditClosed($event)\">\n </img-editor>\n </div>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
3560
3628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, decorators: [{
|
|
3561
3629
|
type: Component,
|
|
3562
|
-
args: [{ selector: 'img-tabs', template: "<div\
|
|
3630
|
+
args: [{ selector: 'img-tabs', template: "<div\n class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n <div class=\"wrapper-tabs\">\n <div\n class=\"tabs\"\n [ngClass]=\"\n {\n 'tabs--notWindow': stateDisplayed !== 'window',\n 'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n }\">\n\n <ul>\n <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n </ul>\n <div\n class=\"img-tabs__canva\"\n [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n <canva-btn\n (showImgUploaded)=\"onShowImgUploaded()\"\n [stateDisplayed]=\"stateDisplayed\">\n </canva-btn>\n </div>\n </div>\n <div class=\"select-mobile-page\">\n <wac-select\n [(ngModel)]=\"tabActive\"\n name=\"tabs\"\n [items]=\"tabs\"\n ></wac-select>\n </div>\n </div>\n\n <!-- Upload section -->\n <div\n class=\"columns img-tabs__tabsFirst\"\n [ngClass]=\"{\n 'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n 'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n }\"\n *ngIf=\"tabActive.value === tabs[0].value\">\n <div class=\"column img-tabs__tabsFirst__upload\">\n <img-upload\n [stateDisplayed]=\"stateDisplayed\"\n (imgUploaded)=\"onImgUploaded($event)\"\n ></img-upload>\n </div>\n <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n 'img-tabs__tabsFirst__list--upload': imgUpload\n }\">\n <images-view\n *ngIf=\"!imgUpload\"\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"false\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive.value\"\n [nbRowToShow]=\"2\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n [fullSize]=\"false\">\n </images-view>\n\n\n <div [hidden]=\"!imgUpload\">\n <upload-list\n #imgUploadedImg\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabActive.value\"\n [multipleImgMode]=\"multipleImgMode\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n >\n </upload-list>\n </div>\n </div>\n </div>\n\n <!-- Images section -->\n <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n <div class=\"column\">\n\n <images-view\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"listDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive.value\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n [fullSize]=\"true\">\n </images-view>\n\n </div>\n </div>\n\n <!-- Pexels img section -->\n <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n <div class=\"column\">\n <pexels-lib\n [stateDisplayed]=\"stateDisplayed\"\n (showImgUploaded)=\"onShowImgUploaded()\">\n </pexels-lib>\n </div>\n </div>\n\n <!--Edition section -->\n <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n <div class=\"column\">\n <img-editor\n [stateDisplayed]=\"stateDisplayed\"\n [imgToEdit]=\"imgToEdit\"\n (editClosed)=\"onEditClosed($event)\">\n </img-editor>\n </div>\n </div>\n\n</div>\n" }]
|
|
3563
3631
|
}], ctorParameters: function () { return [{ type: ImgEventService }, { type: AlertService }, { type: i3$2.Router }]; }, propDecorators: { multipleImgMode: [{
|
|
3564
3632
|
type: Input
|
|
3565
3633
|
}], stateDisplayed: [{
|
|
@@ -3610,10 +3678,10 @@ class ImgSelectionComponent {
|
|
|
3610
3678
|
}
|
|
3611
3679
|
}
|
|
3612
3680
|
ImgSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3613
|
-
ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgSelectionComponent, selector: "img-selection", inputs: { tabDisplayed: "tabDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed" }, ngImport: i0, template: "<div\
|
|
3681
|
+
ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgSelectionComponent, selector: "img-selection", inputs: { tabDisplayed: "tabDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed" }, ngImport: i0, template: "<div\n class=\"trash\"\n cdkDropList\n #unSelectList=\"cdkDropList\"\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<ng-container *ngIf=\"vm$ | async as vm\">\n\n <div\n class=\"img-selection\"\n *ngIf=\"!vm.isLoading; else Loading\"\n [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\n >\n\n <div\n cdkDropList\n #selectionList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n class=\"list_img_selection\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListConnectedTo]=\"[unSelectList]\"\n >\n\n <div\n class=\"img_box\"\n *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\n cdkDrag\n (cdkDragStarted)=\"dragStart = true;\"\n (cdkDragEnded)=\"dragStart = false;\"\n >\n\n <img\n *ngIf=\"index < 1\"\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [title]=\"picture.display_name\"\n />\n\n <img\n *ngIf=\"index > 0\"\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '200'\"\n [title]=\"picture.display_name\"\n />\n\n <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n </div>\n </div>\n </div>\n</ng-container>\n<!-- Loader -->\n<ng-template #Loading>\n <wz-loader></wz-loader>\n</ng-template>\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: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
|
|
3614
3682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, decorators: [{
|
|
3615
3683
|
type: Component,
|
|
3616
|
-
args: [{ selector: 'img-selection', template: "<div\
|
|
3684
|
+
args: [{ selector: 'img-selection', template: "<div\n class=\"trash\"\n cdkDropList\n #unSelectList=\"cdkDropList\"\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<ng-container *ngIf=\"vm$ | async as vm\">\n\n <div\n class=\"img-selection\"\n *ngIf=\"!vm.isLoading; else Loading\"\n [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\n >\n\n <div\n cdkDropList\n #selectionList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n class=\"list_img_selection\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListConnectedTo]=\"[unSelectList]\"\n >\n\n <div\n class=\"img_box\"\n *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\n cdkDrag\n (cdkDragStarted)=\"dragStart = true;\"\n (cdkDragEnded)=\"dragStart = false;\"\n >\n\n <img\n *ngIf=\"index < 1\"\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [title]=\"picture.display_name\"\n />\n\n <img\n *ngIf=\"index > 0\"\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '200'\"\n [title]=\"picture.display_name\"\n />\n\n <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n </div>\n </div>\n </div>\n</ng-container>\n<!-- Loader -->\n<ng-template #Loading>\n <wz-loader></wz-loader>\n</ng-template>\n" }]
|
|
3617
3685
|
}], ctorParameters: function () { return [{ type: ImgSelectionService }]; }, propDecorators: { tabDisplayed: [{
|
|
3618
3686
|
type: Input
|
|
3619
3687
|
}], imgManagerClosed: [{
|
|
@@ -3767,10 +3835,10 @@ class WzImgManagerComponent {
|
|
|
3767
3835
|
}
|
|
3768
3836
|
}
|
|
3769
3837
|
WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }, { token: UploadService }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3770
|
-
WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange", imageUploaded: "imageUploaded" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\
|
|
3838
|
+
WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange", imageUploaded: "imageUploaded" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\n <!-- Img selection handler -->\n <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n <img-selection></img-selection>\n </div>\n\n <!-- Img manager module -->\n <div\n *ngIf=\"_showImgManagerModule\"\n class=\"wz-img-manager__module\"\n [ngClass]=\"{\n 'wz-img-manager__module--small': stateDisplayed === 'small',\n 'wz-img-manager__module--full': stateDisplayed === 'full',\n 'wz-img-manager__module--window': stateDisplayed === 'window',\n 'wz-img-manager__module--edit': hideTab}\"\n >\n\n <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n </div>\n\n <div\n class=\"wz-img-manager__module__content wz-block\"\n [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n <img-tabs\n [stateDisplayed]=\"stateDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [listDisplayed]=\"listDisplayed\"\n (imgManagerClosed)=\"onImgManagerClosed()\"\n (switchDisplayWindow)=\"changeDisplayTab()\"\n (currentTab)=\"setCurrentTab($event)\">\n </img-tabs>\n </div>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
|
|
3771
3839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, decorators: [{
|
|
3772
3840
|
type: Component,
|
|
3773
|
-
args: [{ selector: 'wz-img-manager', template: "<div class=\"wz-img-manager\">\
|
|
3841
|
+
args: [{ selector: 'wz-img-manager', template: "<div class=\"wz-img-manager\">\n <!-- Img selection handler -->\n <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n <img-selection></img-selection>\n </div>\n\n <!-- Img manager module -->\n <div\n *ngIf=\"_showImgManagerModule\"\n class=\"wz-img-manager__module\"\n [ngClass]=\"{\n 'wz-img-manager__module--small': stateDisplayed === 'small',\n 'wz-img-manager__module--full': stateDisplayed === 'full',\n 'wz-img-manager__module--window': stateDisplayed === 'window',\n 'wz-img-manager__module--edit': hideTab}\"\n >\n\n <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n </div>\n\n <div\n class=\"wz-img-manager__module__content wz-block\"\n [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n <img-tabs\n [stateDisplayed]=\"stateDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [listDisplayed]=\"listDisplayed\"\n (imgManagerClosed)=\"onImgManagerClosed()\"\n (switchDisplayWindow)=\"changeDisplayTab()\"\n (currentTab)=\"setCurrentTab($event)\">\n </img-tabs>\n </div>\n </div>\n\n</div>\n" }]
|
|
3774
3842
|
}], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }, { type: UploadService }, { type: IconService }]; }, propDecorators: { stateDisplayed: [{
|
|
3775
3843
|
type: Input
|
|
3776
3844
|
}], showSelection: [{
|