@wizishop/img-manager 15.2.63-beta → 15.2.65-beta
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/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/images-view/images-actions-handler.mjs +2 -1
- package/esm2020/lib/components/images-view/images-view.component.mjs +12 -9
- package/esm2020/lib/components/images-view/table-view/table-view.component.mjs +3 -3
- package/esm2020/lib/components/img-editor/img-editor.component.mjs +3 -3
- package/esm2020/lib/components/img-editor/show-iframe/show-iframe.component.mjs +62 -11
- package/esm2020/lib/components/img-selection/img-selection.component.mjs +3 -3
- package/esm2020/lib/components/shared/table/table.component.mjs +2 -1
- package/esm2020/lib/dto/img-manager.dto.mjs +1 -1
- package/esm2020/lib/services/img-manager.service.mjs +3 -2
- package/esm2020/lib/services/table/filters-table.service.mjs +2 -1
- package/fesm2015/wizishop-img-manager.mjs +77 -20
- package/fesm2015/wizishop-img-manager.mjs.map +1 -1
- package/fesm2020/wizishop-img-manager.mjs +76 -19
- package/fesm2020/wizishop-img-manager.mjs.map +1 -1
- package/lib/components/images-view/images-view.component.d.ts +3 -2
- package/lib/components/img-editor/show-iframe/show-iframe.component.d.ts +2 -1
- package/lib/dto/img-manager.dto.d.ts +8 -0
- package/lib/services/img-manager.service.d.ts +8 -14
- package/lib/services/table/filters-table.service.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-img-manager-15.2.65-beta.tgz +0 -0
- package/wz-img-manager.scss +124 -14
- package/wizishop-img-manager-15.2.63-beta.tgz +0 -0
|
@@ -1091,6 +1091,7 @@ class ImgManagerService {
|
|
|
1091
1091
|
get DEFAULT_SEARCH_PARAMS() {
|
|
1092
1092
|
return {
|
|
1093
1093
|
limit: '30',
|
|
1094
|
+
type: '',
|
|
1094
1095
|
page: '1',
|
|
1095
1096
|
};
|
|
1096
1097
|
}
|
|
@@ -1154,7 +1155,7 @@ class ImgManagerService {
|
|
|
1154
1155
|
];
|
|
1155
1156
|
}
|
|
1156
1157
|
ngOnDestroy() {
|
|
1157
|
-
this.destroy$.next();
|
|
1158
|
+
this.destroy$.next(null);
|
|
1158
1159
|
this.destroy$.complete();
|
|
1159
1160
|
}
|
|
1160
1161
|
copyToClipboard(url) {
|
|
@@ -1311,6 +1312,7 @@ class ImagesActionHandler {
|
|
|
1311
1312
|
order: undefined,
|
|
1312
1313
|
searchValue: '',
|
|
1313
1314
|
totalItems: 0,
|
|
1315
|
+
type: '',
|
|
1314
1316
|
itemsPerPage: 30,
|
|
1315
1317
|
currentPage: 1
|
|
1316
1318
|
};
|
|
@@ -1803,26 +1805,78 @@ class EditorShowIframeComponent {
|
|
|
1803
1805
|
buildSafeIframeUrl(url) {
|
|
1804
1806
|
if (!url)
|
|
1805
1807
|
return null;
|
|
1806
|
-
if (
|
|
1807
|
-
const videoId = this.
|
|
1808
|
+
if (this.isYouTubeUrl(url)) {
|
|
1809
|
+
const { videoId, playlistId } = this.extractYouTubeIds(url);
|
|
1810
|
+
if (!videoId && playlistId) {
|
|
1811
|
+
const embed = `https://www.youtube.com/embed/videoseries?list=${encodeURIComponent(playlistId)}`;
|
|
1812
|
+
return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
|
|
1813
|
+
}
|
|
1808
1814
|
if (!videoId)
|
|
1809
1815
|
return null;
|
|
1810
|
-
const
|
|
1816
|
+
const base = `https://www.youtube.com/embed/${encodeURIComponent(videoId)}`;
|
|
1817
|
+
const params = new URLSearchParams();
|
|
1818
|
+
params.set('playsinline', '1');
|
|
1819
|
+
if (playlistId)
|
|
1820
|
+
params.set('list', playlistId);
|
|
1821
|
+
const embed = params.toString() ? `${base}?${params.toString()}` : base;
|
|
1811
1822
|
return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
|
|
1812
1823
|
}
|
|
1824
|
+
// --- Vimeo
|
|
1813
1825
|
if (url.includes('vimeo.com')) {
|
|
1814
1826
|
const videoId = this.extractVimeoId(url);
|
|
1815
1827
|
if (!videoId)
|
|
1816
1828
|
return null;
|
|
1817
|
-
const embed = `https://player.vimeo.com/video/${videoId}`;
|
|
1829
|
+
const embed = `https://player.vimeo.com/video/${encodeURIComponent(videoId)}`;
|
|
1818
1830
|
return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
|
|
1819
1831
|
}
|
|
1820
1832
|
return null;
|
|
1821
1833
|
}
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1834
|
+
isYouTubeUrl(url) {
|
|
1835
|
+
try {
|
|
1836
|
+
const u = new URL(url);
|
|
1837
|
+
return (u.hostname === 'youtu.be' ||
|
|
1838
|
+
u.hostname.endsWith('youtube.com') ||
|
|
1839
|
+
u.hostname.endsWith('youtube-nocookie.com'));
|
|
1840
|
+
}
|
|
1841
|
+
catch (_a) {
|
|
1842
|
+
return url.includes('youtube.com') || url.includes('youtu.be') || url.includes('youtube-nocookie.com');
|
|
1843
|
+
}
|
|
1844
|
+
}
|
|
1845
|
+
extractYouTubeIds(rawUrl) {
|
|
1846
|
+
var _a;
|
|
1847
|
+
try {
|
|
1848
|
+
const url = new URL(rawUrl);
|
|
1849
|
+
const host = url.hostname.toLowerCase();
|
|
1850
|
+
const playlistId = url.searchParams.get('list');
|
|
1851
|
+
if (host === 'youtu.be') {
|
|
1852
|
+
const id = (_a = url.pathname.split('/').filter(Boolean)[0]) !== null && _a !== void 0 ? _a : null;
|
|
1853
|
+
return { videoId: id, playlistId };
|
|
1854
|
+
}
|
|
1855
|
+
const v = url.searchParams.get('v');
|
|
1856
|
+
if (v)
|
|
1857
|
+
return { videoId: v, playlistId };
|
|
1858
|
+
const parts = url.pathname.split('/').filter(Boolean); // e.g. ["shorts","NquBrAU-iY8"]
|
|
1859
|
+
const idx = parts.findIndex(p => p === 'shorts' || p === 'embed');
|
|
1860
|
+
if (idx !== -1 && parts[idx + 1]) {
|
|
1861
|
+
return { videoId: parts[idx + 1], playlistId };
|
|
1862
|
+
}
|
|
1863
|
+
const liveIdx = parts.findIndex(p => p === 'live');
|
|
1864
|
+
if (liveIdx !== -1 && parts[liveIdx + 1]) {
|
|
1865
|
+
return { videoId: parts[liveIdx + 1], playlistId };
|
|
1866
|
+
}
|
|
1867
|
+
if (parts[0] === 'playlist' && playlistId) {
|
|
1868
|
+
return { videoId: null, playlistId };
|
|
1869
|
+
}
|
|
1870
|
+
return { videoId: null, playlistId };
|
|
1871
|
+
}
|
|
1872
|
+
catch (_b) {
|
|
1873
|
+
const playlistMatch = rawUrl.match(/[?&]list=([^&#]+)/);
|
|
1874
|
+
const playlistId = playlistMatch ? decodeURIComponent(playlistMatch[1]) : null;
|
|
1875
|
+
const regExp = /^.*(youtu\.be\/|v=|embed\/|shorts\/|live\/)([^#&?\/]+).*/;
|
|
1876
|
+
const match = rawUrl.match(regExp);
|
|
1877
|
+
const videoId = match && match[2] ? match[2] : null;
|
|
1878
|
+
return { videoId, playlistId };
|
|
1879
|
+
}
|
|
1826
1880
|
}
|
|
1827
1881
|
extractVimeoId(url) {
|
|
1828
1882
|
const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
|
|
@@ -1831,10 +1885,10 @@ class EditorShowIframeComponent {
|
|
|
1831
1885
|
}
|
|
1832
1886
|
}
|
|
1833
1887
|
EditorShowIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorShowIframeComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1834
|
-
EditorShowIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorShowIframeComponent, selector: "show-iframe", inputs: { videoLink: "videoLink" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n <
|
|
1888
|
+
EditorShowIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorShowIframeComponent, selector: "show-iframe", inputs: { videoLink: "videoLink" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n <div class=\"video-container\">\r\n <iframe\r\n [src]=\"safeUrl\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen>\r\n </iframe>\r\n </div>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
1835
1889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorShowIframeComponent, decorators: [{
|
|
1836
1890
|
type: Component,
|
|
1837
|
-
args: [{ selector: 'show-iframe', template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n <
|
|
1891
|
+
args: [{ selector: 'show-iframe', template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n <div class=\"video-container\">\r\n <iframe\r\n [src]=\"safeUrl\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen>\r\n </iframe>\r\n </div>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n" }]
|
|
1838
1892
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoLink: [{
|
|
1839
1893
|
type: Input
|
|
1840
1894
|
}] } });
|
|
@@ -2273,14 +2327,14 @@ class ImgEditorComponent {
|
|
|
2273
2327
|
}
|
|
2274
2328
|
}
|
|
2275
2329
|
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 });
|
|
2276
|
-
ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit", isVideoEdit: "isVideoEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n <!-- Button Action Section -->\r\n\r\n <div class=\"img-editor__infoSection__actions\">\r\n <div>\r\n <button\r\n type=\"button\"\r\n class=\"button img-editor__infoSection__actions__cancel\"\r\n (click)=\"onCancel()\"\r\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <div\r\n class=\"button danger button img-editor__infoSection__actions__save\"\r\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n (click)=\"onSave()\"\r\n >\r\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-scrollbar\r\n class=\"img-editor__scroll\"\r\n style=\"min-height: 500px\"\r\n [ngClass]=\"{\r\n 'img-editor__scroll--full': stateDisplayed === 'full',\r\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n 'img-editor__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n\r\n <div class=\"columns\">\r\n <!-- Left section -->\r\n <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n <ul class=\"img-editorVideo__tabs\">\r\n <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive =
|
|
2330
|
+
ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit", isVideoEdit: "isVideoEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n <!-- Button Action Section -->\r\n\r\n <div class=\"img-editor__infoSection__actions\">\r\n <div>\r\n <button\r\n type=\"button\"\r\n class=\"button img-editor__infoSection__actions__cancel\"\r\n (click)=\"onCancel()\"\r\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <div\r\n class=\"button danger button img-editor__infoSection__actions__save\"\r\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n (click)=\"onSave()\"\r\n >\r\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-scrollbar\r\n class=\"img-editor__scroll\"\r\n style=\"min-height: 500px\"\r\n [ngClass]=\"{\r\n 'img-editor__scroll--full': stateDisplayed === 'full',\r\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n 'img-editor__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n\r\n <div class=\"columns\">\r\n <!-- Left section -->\r\n <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n <ul class=\"img-editorVideo__tabs\">\r\n <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = false;\">{{ 'ImgManager.ImgLib.informations' | translate }}</span></li>\r\n <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = true;\">{{ 'ImgManager.ImgLib.associateVideo' | translate }}</span></li>\r\n </ul>\r\n\r\n <info-section\r\n *ngIf=\"!isEditorLinkActive\"\r\n [imgToEdit]=\"imgToEdit\"\r\n [(isNameModified)]=\"isNameModified\"\r\n >\r\n </info-section>\r\n <info-video\r\n *ngIf=\"isEditorLinkActive\"\r\n [(videoLink)]=\"imgToEdit.video_link\"\r\n [(isVideoModified)]=\"isVideoModified\"\r\n (deleteVideo)=\"onDeleteVideo()\">\r\n </info-video>\r\n </div>\r\n\r\n\r\n <!-- Right section -->\r\n <div class=\"column img-editor__container\">\r\n <cropper\r\n *ngIf=\"!isEditorLinkActive\"\r\n [imgToEdit]=\"imgToEdit\"\r\n [(isImgModified)]=\"isImgModified\"\r\n (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n (editClosed)=\"onEditClosed($event)\">\r\n </cropper>\r\n <show-iframe\r\n style=\"display: block;width: 100%\"\r\n [videoLink]=\"imgToEdit.video_link\"\r\n *ngIf=\"isEditorLinkActive\">\r\n\r\n </show-iframe>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n</div>\r\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: EditorInfoVideoComponent, selector: "info-video", inputs: ["videoLink", "isVideoModified"], outputs: ["videoLinkChange", "isVideoModifiedChange", "deleteVideo"] }, { kind: "component", type: EditorShowIframeComponent, selector: "show-iframe", inputs: ["videoLink"] }, { 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: [
|
|
2277
2331
|
easeInOut
|
|
2278
2332
|
] });
|
|
2279
2333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, decorators: [{
|
|
2280
2334
|
type: Component,
|
|
2281
2335
|
args: [{ selector: 'img-editor', animations: [
|
|
2282
2336
|
easeInOut
|
|
2283
|
-
], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n <!-- Button Action Section -->\r\n\r\n <div class=\"img-editor__infoSection__actions\">\r\n <div>\r\n <button\r\n type=\"button\"\r\n class=\"button img-editor__infoSection__actions__cancel\"\r\n (click)=\"onCancel()\"\r\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <div\r\n class=\"button danger button img-editor__infoSection__actions__save\"\r\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n (click)=\"onSave()\"\r\n >\r\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-scrollbar\r\n class=\"img-editor__scroll\"\r\n style=\"min-height: 500px\"\r\n [ngClass]=\"{\r\n 'img-editor__scroll--full': stateDisplayed === 'full',\r\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n 'img-editor__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n\r\n <div class=\"columns\">\r\n <!-- Left section -->\r\n <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n <ul class=\"img-editorVideo__tabs\">\r\n <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive =
|
|
2337
|
+
], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n <!-- Button Action Section -->\r\n\r\n <div class=\"img-editor__infoSection__actions\">\r\n <div>\r\n <button\r\n type=\"button\"\r\n class=\"button img-editor__infoSection__actions__cancel\"\r\n (click)=\"onCancel()\"\r\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <div\r\n class=\"button danger button img-editor__infoSection__actions__save\"\r\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n (click)=\"onSave()\"\r\n >\r\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-scrollbar\r\n class=\"img-editor__scroll\"\r\n style=\"min-height: 500px\"\r\n [ngClass]=\"{\r\n 'img-editor__scroll--full': stateDisplayed === 'full',\r\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n 'img-editor__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n\r\n <div class=\"columns\">\r\n <!-- Left section -->\r\n <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n <ul class=\"img-editorVideo__tabs\">\r\n <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = false;\">{{ 'ImgManager.ImgLib.informations' | translate }}</span></li>\r\n <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = true;\">{{ 'ImgManager.ImgLib.associateVideo' | translate }}</span></li>\r\n </ul>\r\n\r\n <info-section\r\n *ngIf=\"!isEditorLinkActive\"\r\n [imgToEdit]=\"imgToEdit\"\r\n [(isNameModified)]=\"isNameModified\"\r\n >\r\n </info-section>\r\n <info-video\r\n *ngIf=\"isEditorLinkActive\"\r\n [(videoLink)]=\"imgToEdit.video_link\"\r\n [(isVideoModified)]=\"isVideoModified\"\r\n (deleteVideo)=\"onDeleteVideo()\">\r\n </info-video>\r\n </div>\r\n\r\n\r\n <!-- Right section -->\r\n <div class=\"column img-editor__container\">\r\n <cropper\r\n *ngIf=\"!isEditorLinkActive\"\r\n [imgToEdit]=\"imgToEdit\"\r\n [(isImgModified)]=\"isImgModified\"\r\n (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n (editClosed)=\"onEditClosed($event)\">\r\n </cropper>\r\n <show-iframe\r\n style=\"display: block;width: 100%\"\r\n [videoLink]=\"imgToEdit.video_link\"\r\n *ngIf=\"isEditorLinkActive\">\r\n\r\n </show-iframe>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n</div>\r\n" }]
|
|
2284
2338
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
|
|
2285
2339
|
type: Input
|
|
2286
2340
|
}], imgToEdit: [{
|
|
@@ -2673,6 +2727,7 @@ class FiltersTableService {
|
|
|
2673
2727
|
this.dataTableFilters = {
|
|
2674
2728
|
sort: undefined,
|
|
2675
2729
|
order: undefined,
|
|
2730
|
+
type: '',
|
|
2676
2731
|
searchValue: undefined,
|
|
2677
2732
|
totalItems: 0,
|
|
2678
2733
|
itemsPerPage: 0,
|
|
@@ -2836,6 +2891,7 @@ class TableComponent {
|
|
|
2836
2891
|
sort: this._filterGroup.get('sort'),
|
|
2837
2892
|
order: this._filterGroup.get('order'),
|
|
2838
2893
|
searchValue: this._filterGroup.get('searchValue'),
|
|
2894
|
+
type: this._filterGroup.get('type'),
|
|
2839
2895
|
itemsPerPage: this._filterGroup.get('itemsPerPage') ? parseInt(this._filterGroup.get('itemsPerPage')) : 0,
|
|
2840
2896
|
currentPage: this._filterGroup.get('currentPage') ? parseInt(this._filterGroup.get('currentPage')) : 0,
|
|
2841
2897
|
totalItems: this.tableFilters.totalItems
|
|
@@ -3275,14 +3331,14 @@ class TableViewComponent extends ImagesActionHandler {
|
|
|
3275
3331
|
}
|
|
3276
3332
|
}
|
|
3277
3333
|
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 });
|
|
3278
|
-
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\">\r\n <wz-table\r\n [checkbox]=\"true\"\r\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n [(tableFilters)]=\"tableFilters\"\r\n (tableFiltersChange)=\"onFiltersChange()\"\r\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n [disablePagniation]=\"displayPexelsResults\"\r\n [isLoading]=\"isLoading\"\r\n >\r\n <!-- Header Section -->\r\n <div\r\n headerCell\r\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n columnSize=\"2\"\r\n sortName=\"name\"\r\n ></div>\r\n <div\r\n headerCell\r\n centerCell=\"center\"\r\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n ></div>\r\n <div headerCell columnSize=\"0\"></div>\r\n\r\n <!-- Body Section -->\r\n <div\r\n tableRow\r\n checkBoxRow\r\n [checkBoxValue]=\"picture.delSelected\"\r\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n *ngFor=\"let picture of picturesList; let index = index\"\r\n >\r\n\r\n <div tableColumn columnSize=\"2\">\r\n <div class=\"table-view__row__container\">\r\n <div\r\n class=\"table-view__row__container__imgContainer\"\r\n [ngClass]=\"{'imgSelected': picture.selected}\"\r\n (click)=\"onToggleSelectImg(index)\">\r\n <img\r\n class=\"table-view__row__container__imgContainer__img\"\r\n [src]=\"picture.file_name | imgSrc : '100'\"\r\n alt=\"picture.display_name\"\r\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n />\r\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n <div\r\n *ngIf=\"picture.imgNotLoaded\"\r\n class=\"table-view__row__container__imgContainer__overlay\"\r\n >\r\n <i class=\"fad fa-folder-times\"></i>\r\n </div>\r\n </div>\r\n <input\r\n
|
|
3334
|
+
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\">\r\n <wz-table\r\n [checkbox]=\"true\"\r\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n [(tableFilters)]=\"tableFilters\"\r\n (tableFiltersChange)=\"onFiltersChange()\"\r\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n [disablePagniation]=\"displayPexelsResults\"\r\n [isLoading]=\"isLoading\"\r\n >\r\n <!-- Header Section -->\r\n <div\r\n headerCell\r\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n columnSize=\"2\"\r\n sortName=\"name\"\r\n ></div>\r\n <div\r\n headerCell\r\n centerCell=\"center\"\r\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n ></div>\r\n <div headerCell columnSize=\"0\"></div>\r\n\r\n <!-- Body Section -->\r\n <div\r\n tableRow\r\n checkBoxRow\r\n [checkBoxValue]=\"picture.delSelected\"\r\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n *ngFor=\"let picture of picturesList; let index = index\"\r\n >\r\n\r\n <div tableColumn columnSize=\"2\">\r\n <div class=\"table-view__row__container\">\r\n <div\r\n class=\"table-view__row__container__imgContainer\"\r\n [ngClass]=\"{'imgSelected': picture.selected}\"\r\n (click)=\"onToggleSelectImg(index)\">\r\n <img\r\n class=\"table-view__row__container__imgContainer__img\"\r\n [src]=\"picture.file_name | imgSrc : '100'\"\r\n alt=\"picture.display_name\"\r\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n />\r\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n <div\r\n *ngIf=\"picture.imgNotLoaded\"\r\n class=\"table-view__row__container__imgContainer__overlay\"\r\n >\r\n <i class=\"fad fa-folder-times\"></i>\r\n </div>\r\n <div *ngIf=\"picture.video_link\" class=\"table-view__row__container__imgContainer__container__video\">\r\n <i class=\"fa-solid fa-play\"></i>\r\n <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\r\n </div>\r\n </div>\r\n <input\r\n type=\"text\"\r\n class=\"wzImgMngInput table-view__row__container__name\"\r\n [(ngModel)]=\"picture.display_name\"\r\n (focus)=\"previousName=picture.display_name\"\r\n (blur)=\"onNameChange(picture.id_file)\"\r\n (click)=\"onToggleDelSelection(index)\"\r\n [ngClass]=\"{'desabled': picture.deleted}\"\r\n [disabled]=\"picture.deleted\"\r\n >\r\n </div>\r\n </div>\r\n\r\n <div\r\n tableColumn\r\n centerCell=\"center\"\r\n (click)=\"onToggleDelSelection(index)\"\r\n >\r\n <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n </div>\r\n\r\n <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n <!-- Dropdown -->\r\n <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n <ng-container label>\r\n <div class=\"table-view__dropdown-options__label rotate\">\r\n <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n >\r\n <i class=\"far fa-download download\"></i> \r\n <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"redirectToVideo(picture)\"\r\n >\r\n <i class=\"fa-solid fa-play\"></i> \r\n <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"onEdit(picture)\"\r\n >\r\n <i class=\"far fa-crop-alt edit\"></i> \r\n <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"copyImageLink(picture.file_name)\"\r\n >\r\n <i class=\"far fa-copy copy\"></i> \r\n <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"onRemoveImg(picture)\"\r\n >\r\n <i class=\"fal fa-times deleted\"></i> \r\n <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n </dropdown>\r\n </div>\r\n </div>\r\n </wz-table>\r\n</div>\r\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: [
|
|
3279
3335
|
listAnnimation
|
|
3280
3336
|
] });
|
|
3281
3337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, decorators: [{
|
|
3282
3338
|
type: Component,
|
|
3283
3339
|
args: [{ selector: 'table-view', animations: [
|
|
3284
3340
|
listAnnimation
|
|
3285
|
-
], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n <wz-table\r\n [checkbox]=\"true\"\r\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n [(tableFilters)]=\"tableFilters\"\r\n (tableFiltersChange)=\"onFiltersChange()\"\r\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n [disablePagniation]=\"displayPexelsResults\"\r\n [isLoading]=\"isLoading\"\r\n >\r\n <!-- Header Section -->\r\n <div\r\n headerCell\r\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n columnSize=\"2\"\r\n sortName=\"name\"\r\n ></div>\r\n <div\r\n headerCell\r\n centerCell=\"center\"\r\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n ></div>\r\n <div headerCell columnSize=\"0\"></div>\r\n\r\n <!-- Body Section -->\r\n <div\r\n tableRow\r\n checkBoxRow\r\n [checkBoxValue]=\"picture.delSelected\"\r\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n *ngFor=\"let picture of picturesList; let index = index\"\r\n >\r\n\r\n <div tableColumn columnSize=\"2\">\r\n <div class=\"table-view__row__container\">\r\n <div\r\n class=\"table-view__row__container__imgContainer\"\r\n [ngClass]=\"{'imgSelected': picture.selected}\"\r\n (click)=\"onToggleSelectImg(index)\">\r\n <img\r\n class=\"table-view__row__container__imgContainer__img\"\r\n [src]=\"picture.file_name | imgSrc : '100'\"\r\n alt=\"picture.display_name\"\r\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n />\r\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n <div\r\n *ngIf=\"picture.imgNotLoaded\"\r\n class=\"table-view__row__container__imgContainer__overlay\"\r\n >\r\n <i class=\"fad fa-folder-times\"></i>\r\n </div>\r\n </div>\r\n <input\r\n
|
|
3341
|
+
], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n <wz-table\r\n [checkbox]=\"true\"\r\n (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n [(tableFilters)]=\"tableFilters\"\r\n (tableFiltersChange)=\"onFiltersChange()\"\r\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n [disablePagniation]=\"displayPexelsResults\"\r\n [isLoading]=\"isLoading\"\r\n >\r\n <!-- Header Section -->\r\n <div\r\n headerCell\r\n [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n columnSize=\"2\"\r\n sortName=\"name\"\r\n ></div>\r\n <div\r\n headerCell\r\n centerCell=\"center\"\r\n [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n ></div>\r\n <div headerCell columnSize=\"0\"></div>\r\n\r\n <!-- Body Section -->\r\n <div\r\n tableRow\r\n checkBoxRow\r\n [checkBoxValue]=\"picture.delSelected\"\r\n (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n *ngFor=\"let picture of picturesList; let index = index\"\r\n >\r\n\r\n <div tableColumn columnSize=\"2\">\r\n <div class=\"table-view__row__container\">\r\n <div\r\n class=\"table-view__row__container__imgContainer\"\r\n [ngClass]=\"{'imgSelected': picture.selected}\"\r\n (click)=\"onToggleSelectImg(index)\">\r\n <img\r\n class=\"table-view__row__container__imgContainer__img\"\r\n [src]=\"picture.file_name | imgSrc : '100'\"\r\n alt=\"picture.display_name\"\r\n [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n />\r\n <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n <div\r\n *ngIf=\"picture.imgNotLoaded\"\r\n class=\"table-view__row__container__imgContainer__overlay\"\r\n >\r\n <i class=\"fad fa-folder-times\"></i>\r\n </div>\r\n <div *ngIf=\"picture.video_link\" class=\"table-view__row__container__imgContainer__container__video\">\r\n <i class=\"fa-solid fa-play\"></i>\r\n <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\r\n </div>\r\n </div>\r\n <input\r\n type=\"text\"\r\n class=\"wzImgMngInput table-view__row__container__name\"\r\n [(ngModel)]=\"picture.display_name\"\r\n (focus)=\"previousName=picture.display_name\"\r\n (blur)=\"onNameChange(picture.id_file)\"\r\n (click)=\"onToggleDelSelection(index)\"\r\n [ngClass]=\"{'desabled': picture.deleted}\"\r\n [disabled]=\"picture.deleted\"\r\n >\r\n </div>\r\n </div>\r\n\r\n <div\r\n tableColumn\r\n centerCell=\"center\"\r\n (click)=\"onToggleDelSelection(index)\"\r\n >\r\n <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n </div>\r\n\r\n <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n <!-- Dropdown -->\r\n <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n <ng-container label>\r\n <div class=\"table-view__dropdown-options__label rotate\">\r\n <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n >\r\n <i class=\"far fa-download download\"></i> \r\n <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"redirectToVideo(picture)\"\r\n >\r\n <i class=\"fa-solid fa-play\"></i> \r\n <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"onEdit(picture)\"\r\n >\r\n <i class=\"far fa-crop-alt edit\"></i> \r\n <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"copyImageLink(picture.file_name)\"\r\n >\r\n <i class=\"far fa-copy copy\"></i> \r\n <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n <ng-container item>\r\n <div\r\n class=\"dropdown-item\"\r\n (click)=\"onRemoveImg(picture)\"\r\n >\r\n <i class=\"fal fa-times deleted\"></i> \r\n <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n </div>\r\n </ng-container>\r\n </dropdown>\r\n </div>\r\n </div>\r\n </wz-table>\r\n</div>\r\n" }]
|
|
3286
3342
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; } });
|
|
3287
3343
|
|
|
3288
3344
|
class ImagesViewComponent {
|
|
@@ -3409,6 +3465,7 @@ class ImagesViewComponent {
|
|
|
3409
3465
|
return {
|
|
3410
3466
|
sort: undefined,
|
|
3411
3467
|
order: undefined,
|
|
3468
|
+
type: searchImagesParameters.type,
|
|
3412
3469
|
searchValue: searchImagesParameters.search,
|
|
3413
3470
|
totalItems: imageTotal,
|
|
3414
3471
|
itemsPerPage: parseInt(searchImagesParameters.limit),
|
|
@@ -3541,7 +3598,7 @@ class ImagesViewComponent {
|
|
|
3541
3598
|
return total;
|
|
3542
3599
|
}
|
|
3543
3600
|
getParams(tableFilters) {
|
|
3544
|
-
return Object.assign({ limit: tableFilters.itemsPerPage.toString(), page: tableFilters.currentPage.toString() }, (tableFilters.searchValue && { search: tableFilters.searchValue.toString() }));
|
|
3601
|
+
return Object.assign({ limit: tableFilters.itemsPerPage.toString(), page: tableFilters.currentPage.toString(), type: tableFilters.type }, (tableFilters.searchValue && { search: tableFilters.searchValue.toString() }));
|
|
3545
3602
|
}
|
|
3546
3603
|
initVariables(loadingSuccess) {
|
|
3547
3604
|
this.nbImgToDelSelected = 0;
|
|
@@ -3592,7 +3649,7 @@ class ImagesViewComponent {
|
|
|
3592
3649
|
}
|
|
3593
3650
|
}
|
|
3594
3651
|
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 });
|
|
3595
|
-
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\">\r\n\r\n <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\r\n <div\r\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\r\n class=\"images-view__container\"\r\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\r\n >\r\n\r\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\r\n </div>\r\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\r\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\r\n </div>\r\n\r\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n\r\n <!-- For listforma : Display btn del multiple img & Confirm action -->\r\n <div class=\"images-view__container__boxAction\">\r\n\r\n\r\n <!-- Select -->\r\n <button\r\n class=\"button success images-view__container__boxAction__import\"\r\n @insertRemoveAnnim\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\r\n (click)=\"selectImgChosen(vm.picturesList)\"\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-check\"></i>\r\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\r\n </button>\r\n\r\n <!-- Display btn del multiple img -->\r\n <button\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\r\n (click)=\"displayConfirmImgSup()\"\r\n class=\"button images-view__container__boxAction__delBtn danger\"\r\n @insertRemoveAnnim\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\r\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\r\n </button>\r\n\r\n <!-- Confirm action -->\r\n <div\r\n class=\"images-view__container__boxAction__confirmSup\"\r\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\r\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <div>\r\n <button\r\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\r\n (click)=\"cancelSup()\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <button\r\n (click)=\"removeListImg(vm.picturesList)\"\r\n class=\"button images-view__container__delBtn danger\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.confirm' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Swith mosaic/list forma -->\r\n <div class=\"field has-addons images-view__container__buttonBox\">\r\n <div class=\"control\">\r\n <div\r\n class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(false)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-th\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"control\">\r\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(true)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-bars\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Images section -->\r\n <ng-scrollbar\r\n class=\"images-view__scroll\"\r\n [ngClass]=\"{\r\n 'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\r\n 'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\r\n 'images-view__scroll--full': stateDisplayed === 'full',\r\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\r\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\r\n 'images-view__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n <div #imgLibContainer class=\"images-view__wrapper\">\r\n\r\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\r\n <mosaic-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\r\n [nbFakeImg]=\"nbFakeImg\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [tabDisplayed]=\"tabDisplayed\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [isLoading]=\"vm.isLoading\"\r\n [fullSize]=\"fullSize\"\r\n >\r\n </mosaic-view>\r\n </div>\r\n\r\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\r\n <table-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [isLoading]=\"vm.isLoading\"\r\n >\r\n </table-view>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n\r\n <!-- Pexels Section - When no img found -->\r\n <div\r\n *ngIf=\"vm.displayPexelsResults\"\r\n class=\"images-view--pexels\"\r\n [@easeInOut]=\"'in'\">\r\n <pexels-lib\r\n [searchValue]=\"vm.tableFilters.searchValue\"\r\n [disableSearch]=\"true\"\r\n >\r\n </pexels-lib>\r\n </div>\r\n</ng-container>\r\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: [
|
|
3652
|
+
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\">\r\n\r\n <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\r\n <div\r\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\r\n class=\"images-view__container\"\r\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\r\n >\r\n\r\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\r\n </div>\r\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\r\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\r\n </div>\r\n\r\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n\r\n <!-- For listforma : Display btn del multiple img & Confirm action -->\r\n <div class=\"images-view__container__boxAction\">\r\n\r\n\r\n <!-- Select -->\r\n <button\r\n class=\"button success images-view__container__boxAction__import\"\r\n @insertRemoveAnnim\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\r\n (click)=\"selectImgChosen(vm.picturesList)\"\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-check\"></i>\r\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\r\n </button>\r\n\r\n <!-- Display btn del multiple img -->\r\n <button\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\r\n (click)=\"displayConfirmImgSup()\"\r\n class=\"button images-view__container__boxAction__delBtn danger\"\r\n @insertRemoveAnnim\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\r\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\r\n </button>\r\n\r\n <!-- Confirm action -->\r\n <div\r\n class=\"images-view__container__boxAction__confirmSup\"\r\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\r\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <div>\r\n <button\r\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\r\n (click)=\"cancelSup()\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <button\r\n (click)=\"removeListImg(vm.picturesList)\"\r\n class=\"button images-view__container__delBtn danger\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.confirm' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Swith mosaic/list forma -->\r\n <div class=\"field has-addons images-view__container__buttonBox\">\r\n <div class=\"control\">\r\n <div\r\n class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(false)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-th\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"control\">\r\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(true)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-bars\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Images section -->\r\n <ng-scrollbar\r\n class=\"images-view__scroll\"\r\n [ngClass]=\"{\r\n 'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\r\n 'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\r\n 'images-view__scroll--full': stateDisplayed === 'full',\r\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\r\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\r\n 'images-view__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n\r\n <div class=\"filter-video\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n <label class=\"checkbox images-view__container__filterVideo\">\r\n <span>{{ 'ImgManager.ImgLib.filterVideo' | translate }}</span>\r\n <select [(ngModel)]=\"vm.tableFilters.type\" (ngModelChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\">\r\n <option selected value=\"\">\r\n {{ 'ImgManager.ImgLib.allFiles' | translate }}\r\n </option>\r\n <option value=\"image\">\r\n {{ 'ImgManager.ImgLib.onlyImages' | translate }}\r\n </option>\r\n <option value=\"video\">\r\n {{ 'ImgManager.ImgLib.onlyVideos' | translate }}\r\n </option>\r\n </select>\r\n </label>\r\n </div>\r\n\r\n <div #imgLibContainer class=\"images-view__wrapper\">\r\n\r\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\r\n <mosaic-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\r\n [nbFakeImg]=\"nbFakeImg\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [tabDisplayed]=\"tabDisplayed\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [isLoading]=\"vm.isLoading\"\r\n [fullSize]=\"fullSize\"\r\n >\r\n </mosaic-view>\r\n </div>\r\n\r\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\r\n <table-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [isLoading]=\"vm.isLoading\"\r\n >\r\n </table-view>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n\r\n <!-- Pexels Section - When no img found -->\r\n <div\r\n *ngIf=\"vm.displayPexelsResults\"\r\n class=\"images-view--pexels\"\r\n [@easeInOut]=\"'in'\">\r\n <pexels-lib\r\n [searchValue]=\"vm.tableFilters.searchValue\"\r\n [disableSearch]=\"true\"\r\n >\r\n </pexels-lib>\r\n </div>\r\n</ng-container>\r\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "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: [
|
|
3596
3653
|
easeInOut,
|
|
3597
3654
|
insertRemove
|
|
3598
3655
|
] });
|
|
@@ -3601,7 +3658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
3601
3658
|
args: [{ selector: 'images-view', animations: [
|
|
3602
3659
|
easeInOut,
|
|
3603
3660
|
insertRemove
|
|
3604
|
-
], template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\r\n <div\r\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\r\n class=\"images-view__container\"\r\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\r\n >\r\n\r\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\r\n </div>\r\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\r\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\r\n </div>\r\n\r\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n\r\n <!-- For listforma : Display btn del multiple img & Confirm action -->\r\n <div class=\"images-view__container__boxAction\">\r\n\r\n\r\n <!-- Select -->\r\n <button\r\n class=\"button success images-view__container__boxAction__import\"\r\n @insertRemoveAnnim\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\r\n (click)=\"selectImgChosen(vm.picturesList)\"\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-check\"></i>\r\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\r\n </button>\r\n\r\n <!-- Display btn del multiple img -->\r\n <button\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\r\n (click)=\"displayConfirmImgSup()\"\r\n class=\"button images-view__container__boxAction__delBtn danger\"\r\n @insertRemoveAnnim\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\r\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\r\n </button>\r\n\r\n <!-- Confirm action -->\r\n <div\r\n class=\"images-view__container__boxAction__confirmSup\"\r\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\r\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <div>\r\n <button\r\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\r\n (click)=\"cancelSup()\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <button\r\n (click)=\"removeListImg(vm.picturesList)\"\r\n class=\"button images-view__container__delBtn danger\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.confirm' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Swith mosaic/list forma -->\r\n <div class=\"field has-addons images-view__container__buttonBox\">\r\n <div class=\"control\">\r\n <div\r\n class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(false)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-th\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"control\">\r\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(true)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-bars\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Images section -->\r\n <ng-scrollbar\r\n class=\"images-view__scroll\"\r\n [ngClass]=\"{\r\n 'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\r\n 'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\r\n 'images-view__scroll--full': stateDisplayed === 'full',\r\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\r\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\r\n 'images-view__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n <div #imgLibContainer class=\"images-view__wrapper\">\r\n\r\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\r\n <mosaic-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\r\n [nbFakeImg]=\"nbFakeImg\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [tabDisplayed]=\"tabDisplayed\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [isLoading]=\"vm.isLoading\"\r\n [fullSize]=\"fullSize\"\r\n >\r\n </mosaic-view>\r\n </div>\r\n\r\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\r\n <table-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [isLoading]=\"vm.isLoading\"\r\n >\r\n </table-view>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n\r\n <!-- Pexels Section - When no img found -->\r\n <div\r\n *ngIf=\"vm.displayPexelsResults\"\r\n class=\"images-view--pexels\"\r\n [@easeInOut]=\"'in'\">\r\n <pexels-lib\r\n [searchValue]=\"vm.tableFilters.searchValue\"\r\n [disableSearch]=\"true\"\r\n >\r\n </pexels-lib>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
3661
|
+
], template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\r\n <div\r\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\r\n class=\"images-view__container\"\r\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\r\n >\r\n\r\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\r\n </div>\r\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\r\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\r\n </div>\r\n\r\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n\r\n <!-- For listforma : Display btn del multiple img & Confirm action -->\r\n <div class=\"images-view__container__boxAction\">\r\n\r\n\r\n <!-- Select -->\r\n <button\r\n class=\"button success images-view__container__boxAction__import\"\r\n @insertRemoveAnnim\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\r\n (click)=\"selectImgChosen(vm.picturesList)\"\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-check\"></i>\r\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\r\n </button>\r\n\r\n <!-- Display btn del multiple img -->\r\n <button\r\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\r\n (click)=\"displayConfirmImgSup()\"\r\n class=\"button images-view__container__boxAction__delBtn danger\"\r\n @insertRemoveAnnim\r\n type=\"button\"\r\n >\r\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\r\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\r\n </button>\r\n\r\n <!-- Confirm action -->\r\n <div\r\n class=\"images-view__container__boxAction__confirmSup\"\r\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\r\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n <div>\r\n <button\r\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\r\n (click)=\"cancelSup()\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n </button>\r\n <button\r\n (click)=\"removeListImg(vm.picturesList)\"\r\n class=\"button images-view__container__delBtn danger\"\r\n type=\"button\"\r\n >\r\n {{ 'ImgManager.ImgLib.confirm' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Swith mosaic/list forma -->\r\n <div class=\"field has-addons images-view__container__buttonBox\">\r\n <div class=\"control\">\r\n <div\r\n class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(false)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-th\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"control\">\r\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\r\n (click)=\"onSwitchFormatDisplayed(true)\"\r\n >\r\n <span class=\"icon is-small\">\r\n <i class=\"fa-solid fa-bars\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Images section -->\r\n <ng-scrollbar\r\n class=\"images-view__scroll\"\r\n [ngClass]=\"{\r\n 'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\r\n 'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\r\n 'images-view__scroll--full': stateDisplayed === 'full',\r\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\r\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\r\n 'images-view__scroll--window': stateDisplayed === 'window'\r\n }\"\r\n >\r\n\r\n <div class=\"filter-video\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n <label class=\"checkbox images-view__container__filterVideo\">\r\n <span>{{ 'ImgManager.ImgLib.filterVideo' | translate }}</span>\r\n <select [(ngModel)]=\"vm.tableFilters.type\" (ngModelChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\">\r\n <option selected value=\"\">\r\n {{ 'ImgManager.ImgLib.allFiles' | translate }}\r\n </option>\r\n <option value=\"image\">\r\n {{ 'ImgManager.ImgLib.onlyImages' | translate }}\r\n </option>\r\n <option value=\"video\">\r\n {{ 'ImgManager.ImgLib.onlyVideos' | translate }}\r\n </option>\r\n </select>\r\n </label>\r\n </div>\r\n\r\n <div #imgLibContainer class=\"images-view__wrapper\">\r\n\r\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\r\n <mosaic-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\r\n [nbFakeImg]=\"nbFakeImg\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [tabDisplayed]=\"tabDisplayed\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [isLoading]=\"vm.isLoading\"\r\n [fullSize]=\"fullSize\"\r\n >\r\n </mosaic-view>\r\n </div>\r\n\r\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\r\n <table-view\r\n [picturesList]=\"vm.picturesList\"\r\n (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n [tableFilters]=\"vm.tableFilters\"\r\n (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n [(disable)]=\"disable\"\r\n (pictureNameChange)=\"onRenamePicture($event)\"\r\n [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n [stateDisplayed]=\"stateDisplayed\"\r\n [isLoading]=\"vm.isLoading\"\r\n >\r\n </table-view>\r\n </div>\r\n </div>\r\n </ng-scrollbar>\r\n\r\n <!-- Pexels Section - When no img found -->\r\n <div\r\n *ngIf=\"vm.displayPexelsResults\"\r\n class=\"images-view--pexels\"\r\n [@easeInOut]=\"'in'\">\r\n <pexels-lib\r\n [searchValue]=\"vm.tableFilters.searchValue\"\r\n [disableSearch]=\"true\"\r\n >\r\n </pexels-lib>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
3605
3662
|
}], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgEventService }, { type: ImgSelectionService }, { type: AlertService }, { type: UserSettingsService }, { type: RenamePictureService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { stateDisplayed: [{
|
|
3606
3663
|
type: Input
|
|
3607
3664
|
}], tabDisplayed: [{
|
|
@@ -3922,10 +3979,10 @@ class ImgSelectionComponent {
|
|
|
3922
3979
|
}
|
|
3923
3980
|
}
|
|
3924
3981
|
ImgSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3925
|
-
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\r\n class=\"trash\"\r\n cdkDropList\r\n #unSelectList=\"cdkDropList\"\r\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\r\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\r\n</div>\r\n\r\n<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n <div\r\n class=\"img-selection\"\r\n *ngIf=\"!vm.isLoading; else Loading\"\r\n [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\r\n >\r\n\r\n <div\r\n cdkDropList\r\n #selectionList=\"cdkDropList\"\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"list_img_selection\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n [cdkDropListConnectedTo]=\"[unSelectList]\"\r\n >\r\n\r\n <div\r\n class=\"img_box\"\r\n *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\r\n cdkDrag\r\n (cdkDragStarted)=\"dragStart = true;\"\r\n (cdkDragEnded)=\"dragStart = false;\"\r\n >\r\n\r\n <img\r\n *ngIf=\"index < 1\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '400'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <img\r\n *ngIf=\"index > 0\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '200'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\r\n\r\n <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<!-- Loader -->\r\n<ng-template #Loading>\r\n <wz-loader></wz-loader>\r\n</ng-template>\r\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" }] });
|
|
3982
|
+
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\r\n class=\"trash\"\r\n cdkDropList\r\n #unSelectList=\"cdkDropList\"\r\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\r\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\r\n</div>\r\n\r\n<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n <div\r\n class=\"img-selection\"\r\n *ngIf=\"!vm.isLoading; else Loading\"\r\n [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\r\n >\r\n\r\n <div\r\n cdkDropList\r\n #selectionList=\"cdkDropList\"\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"list_img_selection\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n [cdkDropListConnectedTo]=\"[unSelectList]\"\r\n >\r\n\r\n <div\r\n class=\"img_box\"\r\n *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\r\n cdkDrag\r\n (cdkDragStarted)=\"dragStart = true;\"\r\n (cdkDragEnded)=\"dragStart = false;\"\r\n >\r\n\r\n <img\r\n *ngIf=\"index < 1\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '400'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <img\r\n *ngIf=\"index > 0\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '200'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <div *ngIf=\"picture.video_link\" class=\"img_box__video\">\r\n <i class=\"fa-solid fa-play\"></i>\r\n </div>\r\n\r\n <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\r\n\r\n <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<!-- Loader -->\r\n<ng-template #Loading>\r\n <wz-loader></wz-loader>\r\n</ng-template>\r\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" }] });
|
|
3926
3983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, decorators: [{
|
|
3927
3984
|
type: Component,
|
|
3928
|
-
args: [{ selector: 'img-selection', template: "<div\r\n class=\"trash\"\r\n cdkDropList\r\n #unSelectList=\"cdkDropList\"\r\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\r\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\r\n</div>\r\n\r\n<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n <div\r\n class=\"img-selection\"\r\n *ngIf=\"!vm.isLoading; else Loading\"\r\n [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\r\n >\r\n\r\n <div\r\n cdkDropList\r\n #selectionList=\"cdkDropList\"\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"list_img_selection\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n [cdkDropListConnectedTo]=\"[unSelectList]\"\r\n >\r\n\r\n <div\r\n class=\"img_box\"\r\n *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\r\n cdkDrag\r\n (cdkDragStarted)=\"dragStart = true;\"\r\n (cdkDragEnded)=\"dragStart = false;\"\r\n >\r\n\r\n <img\r\n *ngIf=\"index < 1\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '400'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <img\r\n *ngIf=\"index > 0\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '200'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\r\n\r\n <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<!-- Loader -->\r\n<ng-template #Loading>\r\n <wz-loader></wz-loader>\r\n</ng-template>\r\n" }]
|
|
3985
|
+
args: [{ selector: 'img-selection', template: "<div\r\n class=\"trash\"\r\n cdkDropList\r\n #unSelectList=\"cdkDropList\"\r\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\r\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\r\n</div>\r\n\r\n<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n <div\r\n class=\"img-selection\"\r\n *ngIf=\"!vm.isLoading; else Loading\"\r\n [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\r\n >\r\n\r\n <div\r\n cdkDropList\r\n #selectionList=\"cdkDropList\"\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"list_img_selection\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n [cdkDropListConnectedTo]=\"[unSelectList]\"\r\n >\r\n\r\n <div\r\n class=\"img_box\"\r\n *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\r\n cdkDrag\r\n (cdkDragStarted)=\"dragStart = true;\"\r\n (cdkDragEnded)=\"dragStart = false;\"\r\n >\r\n\r\n <img\r\n *ngIf=\"index < 1\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '400'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <img\r\n *ngIf=\"index > 0\"\r\n class=\"drag__img\"\r\n [src]=\"picture.file_name | imgSrc : '200'\"\r\n [title]=\"picture.display_name\"\r\n />\r\n\r\n <div *ngIf=\"picture.video_link\" class=\"img_box__video\">\r\n <i class=\"fa-solid fa-play\"></i>\r\n </div>\r\n\r\n <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\r\n\r\n <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<!-- Loader -->\r\n<ng-template #Loading>\r\n <wz-loader></wz-loader>\r\n</ng-template>\r\n" }]
|
|
3929
3986
|
}], ctorParameters: function () { return [{ type: ImgSelectionService }]; }, propDecorators: { tabDisplayed: [{
|
|
3930
3987
|
type: Input
|
|
3931
3988
|
}], imgManagerClosed: [{
|