@solidpepper/solidpepper-modal-media-selection 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,23 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, inject, Input, Output, ViewEncapsulation, Component } from '@angular/core';
|
|
2
|
+
import { Injectable, EventEmitter, inject, ViewContainerRef, Input, Output, ViewEncapsulation, Component } from '@angular/core';
|
|
3
3
|
import { Subject, of, Observable } from 'rxjs';
|
|
4
4
|
import { switchMap, catchError, finalize } from 'rxjs/operators';
|
|
5
5
|
import * as i2 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i4$1 from '@angular/forms';
|
|
8
8
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
9
9
|
import * as i4 from 'ng2-file-upload';
|
|
10
10
|
import { FileUploader, FileUploadModule } from 'ng2-file-upload';
|
|
11
11
|
import * as i3 from '@angular/material/select';
|
|
12
12
|
import { MatSelectModule } from '@angular/material/select';
|
|
13
|
+
import { MatDialogModule } from '@angular/material/dialog';
|
|
13
14
|
import * as i1 from '@solidpepper/solidpepper-service';
|
|
14
|
-
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
|
15
15
|
import * as i3$1 from '@angular/material/tooltip';
|
|
16
16
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
17
17
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
18
|
-
import { NgxSelectModule } from 'ngx-select-ex';
|
|
19
|
-
import * as i4$1 from 'ngx-bootstrap/pagination';
|
|
20
|
-
import { PaginationModule } from 'ngx-bootstrap/pagination';
|
|
21
18
|
|
|
22
19
|
const frTranslations = {
|
|
23
20
|
"pipes": {
|
|
@@ -11032,8 +11029,11 @@ class AssetsUploaderComponent {
|
|
|
11032
11029
|
this.allAssetsUpload = new EventEmitter();
|
|
11033
11030
|
this.folderType = 'DAM';
|
|
11034
11031
|
this.imageArea = false;
|
|
11032
|
+
this.assetParentGuid = null;
|
|
11033
|
+
this.assetVersion = '1.0.0';
|
|
11035
11034
|
this.view = 'card';
|
|
11036
11035
|
this.i18n = inject(ModalMediaSelectionI18nService);
|
|
11036
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
11037
11037
|
this.hasBaseDropZoneOver = false;
|
|
11038
11038
|
this.profileAssetGuid = '00000000-0000-0000-0000-000000000000';
|
|
11039
11039
|
this.isMimetypeNotAllowed = false;
|
|
@@ -11075,7 +11075,7 @@ class AssetsUploaderComponent {
|
|
|
11075
11075
|
}
|
|
11076
11076
|
else {
|
|
11077
11077
|
this.uploader = new FileUploader({
|
|
11078
|
-
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?profileAssetGuid=' + this.profileAssetGuid,
|
|
11078
|
+
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?profileAssetGuid=' + this.profileAssetGuid + '&assetParentGuid=' + this.assetParentGuid + '&assetVersion=' + this.assetVersion,
|
|
11079
11079
|
authToken: this._settingsService.getHeaders().Authorization,
|
|
11080
11080
|
});
|
|
11081
11081
|
}
|
|
@@ -11102,17 +11102,17 @@ class AssetsUploaderComponent {
|
|
|
11102
11102
|
upload() {
|
|
11103
11103
|
if (this.folderGuid && this.folderGuid != undefined) {
|
|
11104
11104
|
this.uploader.setOptions({
|
|
11105
|
-
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?folderGuid=' + this.folderGuid + '&profileAssetGuid=' + this.profileAssetGuid,
|
|
11105
|
+
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?folderGuid=' + this.folderGuid + '&profileAssetGuid=' + this.profileAssetGuid + '&assetParentGuid=' + this.assetParentGuid + '&assetVersion=' + this.assetVersion,
|
|
11106
11106
|
});
|
|
11107
11107
|
}
|
|
11108
11108
|
else {
|
|
11109
11109
|
if (this.folderType == 'EXCEL')
|
|
11110
11110
|
this.uploader.setOptions({
|
|
11111
|
-
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?folderGuid=' + '22222222-2222-2222-2222-222222222222' + '&profileAssetGuid=' + this.profileAssetGuid,
|
|
11111
|
+
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?folderGuid=' + '22222222-2222-2222-2222-222222222222' + '&profileAssetGuid=' + this.profileAssetGuid + '&assetParentGuid=' + this.assetParentGuid + '&assetVersion=' + this.assetVersion,
|
|
11112
11112
|
});
|
|
11113
11113
|
else
|
|
11114
11114
|
this.uploader.setOptions({
|
|
11115
|
-
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?folderGuid' + '&profileAssetGuid=' + this.profileAssetGuid,
|
|
11115
|
+
url: this._settingsService.getSettings('apiUrl') + 'Dam/assets/upload?folderGuid' + '&profileAssetGuid=' + this.profileAssetGuid + '&assetParentGuid=' + this.assetParentGuid + '&assetVersion=' + this.assetVersion,
|
|
11116
11116
|
});
|
|
11117
11117
|
}
|
|
11118
11118
|
this.uploader.uploadAll();
|
|
@@ -11128,11 +11128,11 @@ class AssetsUploaderComponent {
|
|
|
11128
11128
|
return this.i18n.translate(key, params);
|
|
11129
11129
|
}
|
|
11130
11130
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AssetsUploaderComponent, deps: [{ token: i1.AuthService }, { token: i1.CompaniesService }, { token: i1.SettingsService }, { token: i1.DamAssetsProfilesService }, { token: i1.DamAssetsService }, { token: i1.TeamsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AssetsUploaderComponent, isStandalone: true, selector: "app-assets-uploader", inputs: { folderGuid: "folderGuid", folderType: "folderType", imageArea: "imageArea", view: "view" }, outputs: { allAssetsUpload: "allAssetsUpload" }, ngImport: i0, template: "@if (!imageArea) {\r\n <button\r\n class=\"btn-access btn-download designer sp-upload-trigger\"\r\n type=\"button\"\r\n (click)=\"_auth.triggerModal(modalUploadAssets)\"\r\n >\r\n <span class=\"sp-upload-trigger__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42L11 12.59V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v1A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.UPLOAD')\"></span>\r\n </button>\r\n}\r\n\r\n@if (imageArea && view == \"card\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--card\">\r\n <div class=\"assetsDiv pointer\">\r\n <div class=\"imgCase\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDiv\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"thumbnail\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--thumb\">\r\n <div class=\"assetsDivThumbnail pointer\">\r\n <div class=\"imgCaseThumbnail\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDivthumbnail\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"list\") {\r\n <div>\r\n <div class=\"imgCaseListView\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text sp-dropzone-text--list\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetRowDivListMode\">\r\n <div class=\"cssloadListView-container\">\r\n <div class=\"cssloadListView-speeding-wheel\"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Modal upload assets -->\r\n<ng-template #modalUploadAssets let-modal>\r\n @if (uploader) {\r\n <div class=\"modal-header modalHeaderPadding\">\r\n <h5 class=\"modal-title sp-modal-title\" id=\"exampleModalLongTitle\">\r\n <span class=\"sp-modal-title__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42L11 12.59V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v1A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.IMPORTASSETS')\"></span>\r\n </h5>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-close-button\"\r\n (click)=\"modal.dismiss('Cross click')\"\r\n aria-label=\"Close\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body paddingModalBody\">\r\n <div>\r\n <div\r\n ng2FileDrop\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder my-drop-zone\"\r\n >\r\n <p\r\n class=\"sp-modal-center-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n ></p>\r\n </div>\r\n\r\n <p class=\"sp-modal-center-text\" [innerHTML]=\"t('media.library.OR')\"></p>\r\n\r\n <label for=\"file2\" class=\"file-upload sp-file-upload\">\r\n <span\r\n class=\"btn-access sp-browse-button\"\r\n [innerHTML]=\"t('media.library.BROWSE')\"\r\n ></span>\r\n\r\n <input\r\n id=\"file2\"\r\n type=\"file\"\r\n ng2FileSelect\r\n [uploader]=\"uploader\"\r\n multiple\r\n [accept]=\"folderType == 'EXCEL' ? '.xls,.xlsx' : ''\"\r\n />\r\n </label>\r\n\r\n <div class=\"queueDivCss\">\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"sp-queue-row\">\r\n <p class=\"sp-queue-file-name\">\r\n <strong>{{ uploader.queue[i].file.name }}</strong>\r\n </p>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-trash sp-remove-file-button\"\r\n (click)=\"item.remove()\"\r\n aria-label=\"Supprimer\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path\r\n d=\"M6.7 5.3a1 1 0 0 1 1.4 0L12 9.17l3.9-3.88a1 1 0 1 1 1.4 1.42L13.41 10.6l3.89 3.9a1 1 0 0 1-1.4 1.4L12 12.01l-3.9 3.89a1 1 0 0 1-1.4-1.4l3.89-3.9-3.88-3.89a1 1 0 0 1 0-1.41Z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (\r\n isMimetypeNotAllowed && uploader.queue[0] && folderType == \"EXCEL\"\r\n ) {\r\n <p class=\"sp-error-text\">\r\n {{ t(\"settings.imports.FORMATNOTALLOWED\") }}\r\n </p>\r\n }\r\n\r\n @if (folderType == \"EXCEL\") {\r\n <p class=\"sp-modal-center-text sp-helper-text\">\r\n {{ t(\"settings.imports.FORMATALLOWEDEXCEL\") }}\r\n </p>\r\n }\r\n </div>\r\n\r\n @if (folderType == \"DAM\") {\r\n <div class=\"sp-size-help\">\r\n <span [innerHTML]=\"t('media.library.SIZEMIN')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN1')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN2')\"></span>\r\n </div>\r\n }\r\n\r\n @if (profilesAssets && folderType == \"DAM\") {\r\n <div class=\"modal-margin-bottom-element\">\r\n <label class=\"modal-label\">\r\n {{ t(\"media.library.PROFILEASSET\") }}\r\n \r\n <span class=\"red\">(*)</span>\r\n </label>\r\n\r\n <mat-select\r\n class=\"div_forclick input-style\"\r\n autocomplete=\"off\"\r\n (selectionChange)=\"setProfileAssetGuid($event)\"\r\n value=\"00000000-0000-0000-0000-000000000000\"\r\n >\r\n @for (profil of profilesAssets; track profil; let i = $index) {\r\n <mat-option [value]=\"profil.profileAssetGuid\">\r\n {{ profil.profileAssetName[langueSelectDefault] }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n\r\n <span\r\n class=\"sp-profile-tip\"\r\n [innerHTML]=\"t('media.library.PROFILTIPS')\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n <div class=\"modal-button-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"modal.close('Save click')\"\r\n [innerHTML]=\"t('media.library.CANCEL')\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-access\"\r\n [disabled]=\"!uploader.queue[0]\"\r\n (click)=\"upload()\"\r\n (click)=\"_auth.closeAllModal()\"\r\n [innerHTML]=\"t('media.library.UPLOAD')\"\r\n ></button>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff}:host,:host *,:host *:before,:host *:after{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}:host{display:inline-block}.sp-icon{width:16px;height:16px;display:block;fill:currentColor}.sp-upload-trigger{margin-right:5px;display:inline-flex;align-items:center;gap:8px;min-height:38px}.sp-upload-trigger__icon{display:inline-flex;align-items:center;justify-content:center}.sp-upload-inline-wrapper{width:max-content;display:flex}.assetsDiv{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:200px;height:200px;padding:0}.assetsDivThumbnail,.assetsDivthumbnail{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;height:150px;padding:0}.imgCase,.imgCaseThumbnail,.imgCaseListView{width:100%;height:100%}.imgCaseListView{min-height:60px}.boxArea{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;cursor:pointer}.box-placeholder-large{border:2px dashed #d8dee5;background:#fafafa;color:#4a4a4a;border-radius:8px;transition:border-color .2s ease,background-color .2s ease}.box-placeholder-large:hover,.nv-file-over{border-color:var(--btn-accept, #233b55);background:#233b550a}.sp-dropzone-text{text-align:center;white-space:normal;margin:0;color:#4a4a4a;line-height:1.4}.sp-dropzone-text--list{margin-bottom:0}.assetNameListingDisplay{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.assetRowDivListMode{display:flex;align-items:center;min-height:44px;padding:6px 0}.modal-header{background-color:#293133;color:#fff;padding-top:8px;padding-bottom:8px}.modal-header h5{margin:0}.sp-modal-title{display:inline-flex;align-items:center;gap:8px}.sp-modal-title__icon{display:inline-flex;align-items:center;justify-content:center}.sp-close-button{margin-left:auto;font-size:1.5rem;font-weight:700;line-height:1;color:#fff;opacity:.75;background:none;border:0;cursor:pointer}.sp-close-button:hover{opacity:1}.sp-modal-center-text{text-align:center;margin:12px 0}.sp-file-upload{display:flex;justify-content:center;width:100%}.sp-browse-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 14px;background:var(--btn-accept, #233b55);color:#fff;border:1px solid var(--btn-accept, #233b55);border-radius:var(--border-radius, 4px);cursor:pointer;text-align:center;font-size:13px;font-weight:600;line-height:1.2;-webkit-user-select:none;user-select:none;transition:var(--time-btn-transition, .3s) ease-in-out}.sp-browse-button:hover{background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.sp-queue-row{display:flex;align-items:center;gap:8px;padding:4px 0}.sp-queue-file-name{margin:0;flex:1 1 auto;min-width:0;line-height:1.3}.sp-remove-file-button{width:22px;height:22px;flex:0 0 22px}.sp-error-text{text-align:center;color:red;margin:12px 0 0}.sp-helper-text{margin-top:10px}.sp-size-help{display:grid;margin-bottom:15px;margin-top:10px;gap:4px}.sp-profile-tip{font-style:italic;padding-top:10px;display:inline-block}.cssload-container,.cssloadListView-container{display:flex;align-items:center;justify-content:center;width:100%}.cssload-speeding-wheel,.cssloadListView-speeding-wheel{width:24px;height:24px;border:3px solid rgba(35,59,85,.2);border-top-color:var(--btn-accept, #233b55);border-radius:50%;animation:sp-spin .8s linear infinite}@keyframes sp-spin{to{transform:rotate(360deg)}}.sp-modal-title{display:inline-flex;align-items:center;gap:8px;color:#fff}.paddingModalBody{padding:18px 16px;background:#fff}.box-placeholder,.my-drop-zone{min-height:56px;display:flex;align-items:center;justify-content:center}.modal-button-placement{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}::ng-deep .modal-lg .modal-dialog{max-width:900px}::ng-deep .modal-sm .modal-dialog{max-width:400px}::ng-deep .fade.modal.show{opacity:1}::ng-deep .input-style.mat-mdc-select,::ng-deep .input-style .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .input-style{display:block;width:100%;border:1px solid #d8dee5;border-radius:4px;min-height:38px;background:#fff}::ng-deep .input-style .mat-mdc-select-trigger{min-height:38px;display:flex;align-items:center;padding:0 12px}::ng-deep .input-style .mat-mdc-select-value{color:#333;font-size:13px}::ng-deep .input-style .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .input-style:hover{border-color:#b9c3cf}::ng-deep .input-style.mat-focused,::ng-deep .input-style:focus-within{border-color:var(--btn-accept, #233b55);box-shadow:0 0 0 2px #233b5514}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "directive", type: i4.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i4.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }] }); }
|
|
11131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AssetsUploaderComponent, isStandalone: true, selector: "app-assets-uploader", inputs: { folderGuid: "folderGuid", folderType: "folderType", imageArea: "imageArea", assetParentGuid: "assetParentGuid", assetVersion: "assetVersion", view: "view" }, outputs: { allAssetsUpload: "allAssetsUpload" }, ngImport: i0, template: "@if (!imageArea) {\r\n <button\r\n class=\"btn-access btn-download designer sp-upload-trigger\"\r\n type=\"button\"\r\n (click)=\"_auth.triggerModal(modalUploadAssets, viewContainerRef)\"\r\n >\r\n <span class=\"sp-upload-trigger__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-upload-cloud-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path\r\n d=\"M19 18H6.5a4.5 4.5 0 0 1-.44-8.98A5.99 5.99 0 0 1 17.5 8a4.5 4.5 0 0 1 1.5 8.74V18Zm-7-9.59-2.7 2.7 1.4 1.42 1.3-1.3V16h2v-4.77l1.3 1.3 1.4-1.42-2.7-2.7Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.UPLOAD')\"></span>\r\n </button>\r\n}\r\n\r\n@if (imageArea && view == \"card\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--card\">\r\n <div class=\"assetsDiv pointer\">\r\n <div class=\"imgCase\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDiv\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"thumbnail\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--thumb\">\r\n <div class=\"assetsDivThumbnail pointer\">\r\n <div class=\"imgCaseThumbnail\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDivthumbnail\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"list\") {\r\n <div>\r\n <div class=\"imgCaseListView\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text sp-dropzone-text--list\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetRowDivListMode\">\r\n <div class=\"cssloadListView-container\">\r\n <div class=\"cssloadListView-speeding-wheel\"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Modal upload assets -->\r\n<ng-template #modalUploadAssets>\r\n @if (uploader) {\r\n <div class=\"modal-header modalHeaderPadding sp-header-modal-assets-upload\">\r\n <h5 class=\"modal-title sp-modal-title\" id=\"exampleModalLongTitle\">\r\n <span class=\"sp-modal-title__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42L11 12.59V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v1A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.IMPORTASSETS')\"></span>\r\n </h5>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-close-button\"\r\n (click)=\"_auth.closeAllModal()\"\r\n aria-label=\"Close\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body paddingModalBody sp-body-modal-assets-upload\">\r\n <div>\r\n <div\r\n ng2FileDrop\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder my-drop-zone\"\r\n >\r\n <p\r\n class=\"sp-modal-center-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n ></p>\r\n </div>\r\n\r\n <p class=\"sp-modal-center-text\" [innerHTML]=\"t('media.library.OR')\"></p>\r\n\r\n <label for=\"file2\" class=\"file-upload sp-file-upload\">\r\n <span\r\n class=\"btn-access sp-browse-button\"\r\n [innerHTML]=\"t('media.library.BROWSE')\"\r\n ></span>\r\n\r\n <input\r\n id=\"file2\"\r\n type=\"file\"\r\n ng2FileSelect\r\n [uploader]=\"uploader\"\r\n multiple\r\n [accept]=\"folderType == 'EXCEL' ? '.xls,.xlsx' : ''\"\r\n />\r\n </label>\r\n\r\n <div class=\"queueDivCss\">\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"sp-queue-row\">\r\n <p class=\"sp-queue-file-name\">\r\n <strong>{{ uploader.queue[i].file.name }}</strong>\r\n </p>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-trash sp-remove-file-button\"\r\n (click)=\"item.remove()\"\r\n aria-label=\"Supprimer\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path\r\n d=\"M6.7 5.3a1 1 0 0 1 1.4 0L12 9.17l3.9-3.88a1 1 0 1 1 1.4 1.42L13.41 10.6l3.89 3.9a1 1 0 0 1-1.4 1.4L12 12.01l-3.9 3.89a1 1 0 0 1-1.4-1.4l3.89-3.9-3.88-3.89a1 1 0 0 1 0-1.41Z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (\r\n isMimetypeNotAllowed && uploader.queue[0] && folderType == \"EXCEL\"\r\n ) {\r\n <p class=\"sp-error-text\">\r\n {{ t(\"settings.imports.FORMATNOTALLOWED\") }}\r\n </p>\r\n }\r\n\r\n @if (folderType == \"EXCEL\") {\r\n <p class=\"sp-modal-center-text sp-helper-text\">\r\n {{ t(\"settings.imports.FORMATALLOWEDEXCEL\") }}\r\n </p>\r\n }\r\n </div>\r\n\r\n @if (folderType == \"DAM\") {\r\n <div class=\"sp-size-help\">\r\n <span [innerHTML]=\"t('media.library.SIZEMIN')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN1')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN2')\"></span>\r\n </div>\r\n }\r\n\r\n @if (profilesAssets && folderType == \"DAM\") {\r\n <div class=\"modal-margin-bottom-element\">\r\n <label class=\"modal-label\">\r\n {{ t(\"media.library.PROFILEASSET\") }}\r\n \r\n <span class=\"red\">(*)</span>\r\n </label>\r\n\r\n <mat-select\r\n class=\"div_forclick input-style\"\r\n autocomplete=\"off\"\r\n (selectionChange)=\"setProfileAssetGuid($event)\"\r\n value=\"00000000-0000-0000-0000-000000000000\"\r\n >\r\n @for (profil of profilesAssets; track profil; let i = $index) {\r\n <mat-option [value]=\"profil.profileAssetGuid\">\r\n {{ profil.profileAssetName[langueSelectDefault] }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n\r\n <span\r\n class=\"sp-profile-tip\"\r\n [innerHTML]=\"t('media.library.PROFILTIPS')\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n <div class=\"modal-button-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"_auth.closeAllModal()\"\r\n [innerHTML]=\"t('media.library.CANCEL')\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-access\"\r\n [disabled]=\"!uploader.queue[0]\"\r\n (click)=\"upload()\"\r\n (click)=\"_auth.closeAllModal()\"\r\n [innerHTML]=\"t('media.library.UPLOAD')\"\r\n ></button>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff;--text-color: #4a4a4a}:host,:host *,:host *:before,:host *:after,:root{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}::ng-deep .sp-dialog-backdrop{background:#00000073}::ng-deep .sp-dialog-panel .mat-mdc-dialog-container{padding:0!important}::ng-deep .sp-dialog-panel .mat-mdc-dialog-surface{padding:0!important;background:#fff!important;border-radius:6px!important;box-shadow:0 20px 50px #00000059!important;overflow:hidden!important}::ng-deep .sp-dialog-panel{display:block!important}:host{display:inline-block}.sp-icon{width:18px;height:18px;display:block;fill:currentColor}.sp-upload-trigger__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px}.sp-upload-cloud-icon{width:22px;height:22px;min-width:22px;min-height:22px;display:block;fill:currentColor;flex-shrink:0}.sp-upload-trigger{margin-right:5px;display:inline-flex;align-items:center;gap:8px;min-height:38px}.sp-upload-trigger__icon{display:inline-flex;align-items:center;justify-content:center}.sp-upload-inline-wrapper{width:max-content;display:flex}.assetsDiv{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:200px;height:200px;padding:0}.assetsDivThumbnail,.assetsDivthumbnail{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;height:150px;padding:0}.imgCase,.imgCaseThumbnail,.imgCaseListView{width:100%;height:100%}.imgCaseListView{min-height:60px}.boxArea{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;cursor:pointer}.box-placeholder-large{border:2px dashed #d8dee5;background:#fafafa;color:#4a4a4a;border-radius:8px;transition:border-color .2s ease,background-color .2s ease}.box-placeholder-large:hover,.nv-file-over{border-color:var(--btn-accept, #233b55);background:#233b550a}.sp-dropzone-text{text-align:center;white-space:normal;margin:0;color:#4a4a4a;line-height:1.4}.sp-dropzone-text--list{margin-bottom:0}.assetNameListingDisplay{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.assetRowDivListMode{display:flex;align-items:center;min-height:44px;padding:6px 0}.modal-header{background-color:#293133;color:#fff;padding-top:8px;padding-bottom:8px}.modal-header h5{margin:0}.sp-modal-title{display:inline-flex;align-items:center;gap:8px}.sp-modal-title__icon{display:inline-flex;align-items:center;justify-content:center}.sp-close-button{margin-left:auto;font-size:1.5rem;font-weight:700;line-height:1;color:#fff;opacity:.75;background:none;border:0;cursor:pointer}.sp-close-button:hover{opacity:1}.sp-modal-center-text{text-align:center;margin:12px 0;color:var(--text-color, #4a4a4a)}.sp-file-upload{display:flex;justify-content:center;width:100%}.sp-browse-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 14px;background:var(--btn-accept, #233b55);color:#fff;border:1px solid var(--btn-accept, #233b55);border-radius:var(--border-radius, 4px);cursor:pointer;text-align:center;font-size:13px;font-weight:600;line-height:1.2;-webkit-user-select:none;user-select:none;transition:var(--time-btn-transition, .3s) ease-in-out}.sp-browse-button:hover{background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.sp-queue-row{display:flex;align-items:center;gap:8px;padding:4px 0}.sp-queue-file-name{margin:0;flex:1 1 auto;min-width:0;line-height:1.3}.sp-remove-file-button{width:22px;height:22px;flex:0 0 22px}.sp-error-text{text-align:center;color:red;margin:12px 0 0}.sp-helper-text{margin-top:10px}.sp-size-help{display:grid;margin-bottom:15px;margin-top:10px;gap:4px}.sp-profile-tip{font-style:italic;padding-top:10px;display:inline-block}.cssload-container,.cssloadListView-container{display:flex;align-items:center;justify-content:center;width:100%}.cssload-speeding-wheel,.cssloadListView-speeding-wheel{width:24px;height:24px;border:3px solid rgba(35,59,85,.2);border-top-color:var(--btn-accept, #233b55);border-radius:50%;animation:sp-spin .8s linear infinite}@keyframes sp-spin{to{transform:rotate(360deg)}}.sp-modal-title{display:inline-flex;align-items:center;gap:8px;color:#fff}.paddingModalBody{padding:18px 16px;background:#fff}.box-placeholder,.my-drop-zone{min-height:56px;display:flex;align-items:center;justify-content:center}.modal-button-placement{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}::ng-deep .modal-lg .modal-dialog{max-width:900px}::ng-deep .modal-sm .modal-dialog{max-width:400px}::ng-deep .fade.modal.show{opacity:1}::ng-deep .input-style.mat-mdc-select,::ng-deep .input-style .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .input-style{display:block;width:100%;border:1px solid #d8dee5;border-radius:4px;min-height:38px;background:#fff}::ng-deep .input-style .mat-mdc-select-trigger{min-height:38px;display:flex;align-items:center;padding:0 12px}::ng-deep .input-style .mat-mdc-select-value{color:var(--text-color, #4a4a4a);font-size:13px}::ng-deep .mat-mdc-option{color:var(--text-color, #4a4a4a)}::ng-deep .input-style .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .input-style:hover{border-color:#b9c3cf}::ng-deep .input-style.mat-focused,::ng-deep .input-style:focus-within{border-color:var(--btn-accept, #233b55);box-shadow:0 0 0 2px #233b5514}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "directive", type: i4.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i4.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
|
|
11132
11132
|
}
|
|
11133
11133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AssetsUploaderComponent, decorators: [{
|
|
11134
11134
|
type: Component,
|
|
11135
|
-
args: [{ selector: 'app-assets-uploader', standalone: true, encapsulation: ViewEncapsulation.Emulated, imports: [CommonModule, MatSelectModule, FileUploadModule], template: "@if (!imageArea) {\r\n <button\r\n class=\"btn-access btn-download designer sp-upload-trigger\"\r\n type=\"button\"\r\n (click)=\"_auth.triggerModal(modalUploadAssets)\"\r\n >\r\n <span class=\"sp-upload-trigger__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42L11 12.59V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v1A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.UPLOAD')\"></span>\r\n </button>\r\n}\r\n\r\n@if (imageArea && view == \"card\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--card\">\r\n <div class=\"assetsDiv pointer\">\r\n <div class=\"imgCase\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDiv\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"thumbnail\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--thumb\">\r\n <div class=\"assetsDivThumbnail pointer\">\r\n <div class=\"imgCaseThumbnail\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDivthumbnail\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"list\") {\r\n <div>\r\n <div class=\"imgCaseListView\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text sp-dropzone-text--list\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetRowDivListMode\">\r\n <div class=\"cssloadListView-container\">\r\n <div class=\"cssloadListView-speeding-wheel\"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Modal upload assets -->\r\n<ng-template #modalUploadAssets let-modal>\r\n @if (uploader) {\r\n <div class=\"modal-header modalHeaderPadding\">\r\n <h5 class=\"modal-title sp-modal-title\" id=\"exampleModalLongTitle\">\r\n <span class=\"sp-modal-title__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42L11 12.59V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v1A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.IMPORTASSETS')\"></span>\r\n </h5>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-close-button\"\r\n (click)=\"modal.dismiss('Cross click')\"\r\n aria-label=\"Close\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body paddingModalBody\">\r\n <div>\r\n <div\r\n ng2FileDrop\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder my-drop-zone\"\r\n >\r\n <p\r\n class=\"sp-modal-center-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n ></p>\r\n </div>\r\n\r\n <p class=\"sp-modal-center-text\" [innerHTML]=\"t('media.library.OR')\"></p>\r\n\r\n <label for=\"file2\" class=\"file-upload sp-file-upload\">\r\n <span\r\n class=\"btn-access sp-browse-button\"\r\n [innerHTML]=\"t('media.library.BROWSE')\"\r\n ></span>\r\n\r\n <input\r\n id=\"file2\"\r\n type=\"file\"\r\n ng2FileSelect\r\n [uploader]=\"uploader\"\r\n multiple\r\n [accept]=\"folderType == 'EXCEL' ? '.xls,.xlsx' : ''\"\r\n />\r\n </label>\r\n\r\n <div class=\"queueDivCss\">\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"sp-queue-row\">\r\n <p class=\"sp-queue-file-name\">\r\n <strong>{{ uploader.queue[i].file.name }}</strong>\r\n </p>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-trash sp-remove-file-button\"\r\n (click)=\"item.remove()\"\r\n aria-label=\"Supprimer\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path\r\n d=\"M6.7 5.3a1 1 0 0 1 1.4 0L12 9.17l3.9-3.88a1 1 0 1 1 1.4 1.42L13.41 10.6l3.89 3.9a1 1 0 0 1-1.4 1.4L12 12.01l-3.9 3.89a1 1 0 0 1-1.4-1.4l3.89-3.9-3.88-3.89a1 1 0 0 1 0-1.41Z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (\r\n isMimetypeNotAllowed && uploader.queue[0] && folderType == \"EXCEL\"\r\n ) {\r\n <p class=\"sp-error-text\">\r\n {{ t(\"settings.imports.FORMATNOTALLOWED\") }}\r\n </p>\r\n }\r\n\r\n @if (folderType == \"EXCEL\") {\r\n <p class=\"sp-modal-center-text sp-helper-text\">\r\n {{ t(\"settings.imports.FORMATALLOWEDEXCEL\") }}\r\n </p>\r\n }\r\n </div>\r\n\r\n @if (folderType == \"DAM\") {\r\n <div class=\"sp-size-help\">\r\n <span [innerHTML]=\"t('media.library.SIZEMIN')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN1')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN2')\"></span>\r\n </div>\r\n }\r\n\r\n @if (profilesAssets && folderType == \"DAM\") {\r\n <div class=\"modal-margin-bottom-element\">\r\n <label class=\"modal-label\">\r\n {{ t(\"media.library.PROFILEASSET\") }}\r\n \r\n <span class=\"red\">(*)</span>\r\n </label>\r\n\r\n <mat-select\r\n class=\"div_forclick input-style\"\r\n autocomplete=\"off\"\r\n (selectionChange)=\"setProfileAssetGuid($event)\"\r\n value=\"00000000-0000-0000-0000-000000000000\"\r\n >\r\n @for (profil of profilesAssets; track profil; let i = $index) {\r\n <mat-option [value]=\"profil.profileAssetGuid\">\r\n {{ profil.profileAssetName[langueSelectDefault] }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n\r\n <span\r\n class=\"sp-profile-tip\"\r\n [innerHTML]=\"t('media.library.PROFILTIPS')\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n <div class=\"modal-button-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"modal.close('Save click')\"\r\n [innerHTML]=\"t('media.library.CANCEL')\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-access\"\r\n [disabled]=\"!uploader.queue[0]\"\r\n (click)=\"upload()\"\r\n (click)=\"_auth.closeAllModal()\"\r\n [innerHTML]=\"t('media.library.UPLOAD')\"\r\n ></button>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff}:host,:host *,:host *:before,:host *:after{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}:host{display:inline-block}.sp-icon{width:16px;height:16px;display:block;fill:currentColor}.sp-upload-trigger{margin-right:5px;display:inline-flex;align-items:center;gap:8px;min-height:38px}.sp-upload-trigger__icon{display:inline-flex;align-items:center;justify-content:center}.sp-upload-inline-wrapper{width:max-content;display:flex}.assetsDiv{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:200px;height:200px;padding:0}.assetsDivThumbnail,.assetsDivthumbnail{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;height:150px;padding:0}.imgCase,.imgCaseThumbnail,.imgCaseListView{width:100%;height:100%}.imgCaseListView{min-height:60px}.boxArea{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;cursor:pointer}.box-placeholder-large{border:2px dashed #d8dee5;background:#fafafa;color:#4a4a4a;border-radius:8px;transition:border-color .2s ease,background-color .2s ease}.box-placeholder-large:hover,.nv-file-over{border-color:var(--btn-accept, #233b55);background:#233b550a}.sp-dropzone-text{text-align:center;white-space:normal;margin:0;color:#4a4a4a;line-height:1.4}.sp-dropzone-text--list{margin-bottom:0}.assetNameListingDisplay{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.assetRowDivListMode{display:flex;align-items:center;min-height:44px;padding:6px 0}.modal-header{background-color:#293133;color:#fff;padding-top:8px;padding-bottom:8px}.modal-header h5{margin:0}.sp-modal-title{display:inline-flex;align-items:center;gap:8px}.sp-modal-title__icon{display:inline-flex;align-items:center;justify-content:center}.sp-close-button{margin-left:auto;font-size:1.5rem;font-weight:700;line-height:1;color:#fff;opacity:.75;background:none;border:0;cursor:pointer}.sp-close-button:hover{opacity:1}.sp-modal-center-text{text-align:center;margin:12px 0}.sp-file-upload{display:flex;justify-content:center;width:100%}.sp-browse-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 14px;background:var(--btn-accept, #233b55);color:#fff;border:1px solid var(--btn-accept, #233b55);border-radius:var(--border-radius, 4px);cursor:pointer;text-align:center;font-size:13px;font-weight:600;line-height:1.2;-webkit-user-select:none;user-select:none;transition:var(--time-btn-transition, .3s) ease-in-out}.sp-browse-button:hover{background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.sp-queue-row{display:flex;align-items:center;gap:8px;padding:4px 0}.sp-queue-file-name{margin:0;flex:1 1 auto;min-width:0;line-height:1.3}.sp-remove-file-button{width:22px;height:22px;flex:0 0 22px}.sp-error-text{text-align:center;color:red;margin:12px 0 0}.sp-helper-text{margin-top:10px}.sp-size-help{display:grid;margin-bottom:15px;margin-top:10px;gap:4px}.sp-profile-tip{font-style:italic;padding-top:10px;display:inline-block}.cssload-container,.cssloadListView-container{display:flex;align-items:center;justify-content:center;width:100%}.cssload-speeding-wheel,.cssloadListView-speeding-wheel{width:24px;height:24px;border:3px solid rgba(35,59,85,.2);border-top-color:var(--btn-accept, #233b55);border-radius:50%;animation:sp-spin .8s linear infinite}@keyframes sp-spin{to{transform:rotate(360deg)}}.sp-modal-title{display:inline-flex;align-items:center;gap:8px;color:#fff}.paddingModalBody{padding:18px 16px;background:#fff}.box-placeholder,.my-drop-zone{min-height:56px;display:flex;align-items:center;justify-content:center}.modal-button-placement{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}::ng-deep .modal-lg .modal-dialog{max-width:900px}::ng-deep .modal-sm .modal-dialog{max-width:400px}::ng-deep .fade.modal.show{opacity:1}::ng-deep .input-style.mat-mdc-select,::ng-deep .input-style .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .input-style{display:block;width:100%;border:1px solid #d8dee5;border-radius:4px;min-height:38px;background:#fff}::ng-deep .input-style .mat-mdc-select-trigger{min-height:38px;display:flex;align-items:center;padding:0 12px}::ng-deep .input-style .mat-mdc-select-value{color:#333;font-size:13px}::ng-deep .input-style .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .input-style:hover{border-color:#b9c3cf}::ng-deep .input-style.mat-focused,::ng-deep .input-style:focus-within{border-color:var(--btn-accept, #233b55);box-shadow:0 0 0 2px #233b5514}\n"] }]
|
|
11135
|
+
args: [{ selector: 'app-assets-uploader', standalone: true, encapsulation: ViewEncapsulation.Emulated, imports: [CommonModule, MatSelectModule, FileUploadModule, MatDialogModule], template: "@if (!imageArea) {\r\n <button\r\n class=\"btn-access btn-download designer sp-upload-trigger\"\r\n type=\"button\"\r\n (click)=\"_auth.triggerModal(modalUploadAssets, viewContainerRef)\"\r\n >\r\n <span class=\"sp-upload-trigger__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-upload-cloud-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path\r\n d=\"M19 18H6.5a4.5 4.5 0 0 1-.44-8.98A5.99 5.99 0 0 1 17.5 8a4.5 4.5 0 0 1 1.5 8.74V18Zm-7-9.59-2.7 2.7 1.4 1.42 1.3-1.3V16h2v-4.77l1.3 1.3 1.4-1.42-2.7-2.7Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.UPLOAD')\"></span>\r\n </button>\r\n}\r\n\r\n@if (imageArea && view == \"card\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--card\">\r\n <div class=\"assetsDiv pointer\">\r\n <div class=\"imgCase\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDiv\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"thumbnail\") {\r\n <div class=\"sp-upload-inline-wrapper sp-upload-inline-wrapper--thumb\">\r\n <div class=\"assetsDivThumbnail pointer\">\r\n <div class=\"imgCaseThumbnail\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetsDivthumbnail\">\r\n <div class=\"cssload-container\">\r\n <div class=\"cssload-speeding-wheel\"></div>\r\n </div>\r\n <div class=\"assetNameListingDisplay crop\">\r\n {{ uploader.queue[i].file.name }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n@if (imageArea && view == \"list\") {\r\n <div>\r\n <div class=\"imgCaseListView\">\r\n <div\r\n ng2FileDrop\r\n (onFileDrop)=\"\r\n profileAssetGuid = '00000000-0000-0000-0000-000000000000'; upload()\r\n \"\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder-large my-drop-zone boxArea\"\r\n >\r\n <p\r\n class=\"sp-dropzone-text sp-dropzone-text--list\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n multiple\r\n ></p>\r\n </div>\r\n </div>\r\n\r\n @if (uploader.queue[0]) {\r\n <div>\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"assetRowDivListMode\">\r\n <div class=\"cssloadListView-container\">\r\n <div class=\"cssloadListView-speeding-wheel\"></div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Modal upload assets -->\r\n<ng-template #modalUploadAssets>\r\n @if (uploader) {\r\n <div class=\"modal-header modalHeaderPadding sp-header-modal-assets-upload\">\r\n <h5 class=\"modal-title sp-modal-title\" id=\"exampleModalLongTitle\">\r\n <span class=\"sp-modal-title__icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.42L11 12.59V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v1A2 2 0 0 1 18 21H6a2 2 0 0 1-2-2v-1a1 1 0 0 1 1-1Z\"\r\n />\r\n </svg>\r\n </span>\r\n <span [innerHTML]=\"t('media.library.IMPORTASSETS')\"></span>\r\n </h5>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-close-button\"\r\n (click)=\"_auth.closeAllModal()\"\r\n aria-label=\"Close\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body paddingModalBody sp-body-modal-assets-upload\">\r\n <div>\r\n <div\r\n ng2FileDrop\r\n [ngClass]=\"{ 'nv-file-over': hasBaseDropZoneOver }\"\r\n [uploader]=\"uploader\"\r\n class=\"box-placeholder my-drop-zone\"\r\n >\r\n <p\r\n class=\"sp-modal-center-text\"\r\n [innerHTML]=\"t('media.library.DRAGDROPHERE')\"\r\n ></p>\r\n </div>\r\n\r\n <p class=\"sp-modal-center-text\" [innerHTML]=\"t('media.library.OR')\"></p>\r\n\r\n <label for=\"file2\" class=\"file-upload sp-file-upload\">\r\n <span\r\n class=\"btn-access sp-browse-button\"\r\n [innerHTML]=\"t('media.library.BROWSE')\"\r\n ></span>\r\n\r\n <input\r\n id=\"file2\"\r\n type=\"file\"\r\n ng2FileSelect\r\n [uploader]=\"uploader\"\r\n multiple\r\n [accept]=\"folderType == 'EXCEL' ? '.xls,.xlsx' : ''\"\r\n />\r\n </label>\r\n\r\n <div class=\"queueDivCss\">\r\n @for (item of uploader.queue; track item; let i = $index) {\r\n <div class=\"sp-queue-row\">\r\n <p class=\"sp-queue-file-name\">\r\n <strong>{{ uploader.queue[i].file.name }}</strong>\r\n </p>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-trash sp-remove-file-button\"\r\n (click)=\"item.remove()\"\r\n aria-label=\"Supprimer\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path\r\n d=\"M6.7 5.3a1 1 0 0 1 1.4 0L12 9.17l3.9-3.88a1 1 0 1 1 1.4 1.42L13.41 10.6l3.89 3.9a1 1 0 0 1-1.4 1.4L12 12.01l-3.9 3.89a1 1 0 0 1-1.4-1.4l3.89-3.9-3.88-3.89a1 1 0 0 1 0-1.41Z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (\r\n isMimetypeNotAllowed && uploader.queue[0] && folderType == \"EXCEL\"\r\n ) {\r\n <p class=\"sp-error-text\">\r\n {{ t(\"settings.imports.FORMATNOTALLOWED\") }}\r\n </p>\r\n }\r\n\r\n @if (folderType == \"EXCEL\") {\r\n <p class=\"sp-modal-center-text sp-helper-text\">\r\n {{ t(\"settings.imports.FORMATALLOWEDEXCEL\") }}\r\n </p>\r\n }\r\n </div>\r\n\r\n @if (folderType == \"DAM\") {\r\n <div class=\"sp-size-help\">\r\n <span [innerHTML]=\"t('media.library.SIZEMIN')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN1')\"></span>\r\n <span [innerHTML]=\"t('media.library.SIZEMIN2')\"></span>\r\n </div>\r\n }\r\n\r\n @if (profilesAssets && folderType == \"DAM\") {\r\n <div class=\"modal-margin-bottom-element\">\r\n <label class=\"modal-label\">\r\n {{ t(\"media.library.PROFILEASSET\") }}\r\n \r\n <span class=\"red\">(*)</span>\r\n </label>\r\n\r\n <mat-select\r\n class=\"div_forclick input-style\"\r\n autocomplete=\"off\"\r\n (selectionChange)=\"setProfileAssetGuid($event)\"\r\n value=\"00000000-0000-0000-0000-000000000000\"\r\n >\r\n @for (profil of profilesAssets; track profil; let i = $index) {\r\n <mat-option [value]=\"profil.profileAssetGuid\">\r\n {{ profil.profileAssetName[langueSelectDefault] }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n\r\n <span\r\n class=\"sp-profile-tip\"\r\n [innerHTML]=\"t('media.library.PROFILTIPS')\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n <div class=\"modal-button-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"_auth.closeAllModal()\"\r\n [innerHTML]=\"t('media.library.CANCEL')\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-access\"\r\n [disabled]=\"!uploader.queue[0]\"\r\n (click)=\"upload()\"\r\n (click)=\"_auth.closeAllModal()\"\r\n [innerHTML]=\"t('media.library.UPLOAD')\"\r\n ></button>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff;--text-color: #4a4a4a}:host,:host *,:host *:before,:host *:after,:root{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}::ng-deep .sp-dialog-backdrop{background:#00000073}::ng-deep .sp-dialog-panel .mat-mdc-dialog-container{padding:0!important}::ng-deep .sp-dialog-panel .mat-mdc-dialog-surface{padding:0!important;background:#fff!important;border-radius:6px!important;box-shadow:0 20px 50px #00000059!important;overflow:hidden!important}::ng-deep .sp-dialog-panel{display:block!important}:host{display:inline-block}.sp-icon{width:18px;height:18px;display:block;fill:currentColor}.sp-upload-trigger__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px}.sp-upload-cloud-icon{width:22px;height:22px;min-width:22px;min-height:22px;display:block;fill:currentColor;flex-shrink:0}.sp-upload-trigger{margin-right:5px;display:inline-flex;align-items:center;gap:8px;min-height:38px}.sp-upload-trigger__icon{display:inline-flex;align-items:center;justify-content:center}.sp-upload-inline-wrapper{width:max-content;display:flex}.assetsDiv{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:200px;height:200px;padding:0}.assetsDivThumbnail,.assetsDivthumbnail{position:relative;background:#fff;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;height:150px;padding:0}.imgCase,.imgCaseThumbnail,.imgCaseListView{width:100%;height:100%}.imgCaseListView{min-height:60px}.boxArea{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;cursor:pointer}.box-placeholder-large{border:2px dashed #d8dee5;background:#fafafa;color:#4a4a4a;border-radius:8px;transition:border-color .2s ease,background-color .2s ease}.box-placeholder-large:hover,.nv-file-over{border-color:var(--btn-accept, #233b55);background:#233b550a}.sp-dropzone-text{text-align:center;white-space:normal;margin:0;color:#4a4a4a;line-height:1.4}.sp-dropzone-text--list{margin-bottom:0}.assetNameListingDisplay{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.assetRowDivListMode{display:flex;align-items:center;min-height:44px;padding:6px 0}.modal-header{background-color:#293133;color:#fff;padding-top:8px;padding-bottom:8px}.modal-header h5{margin:0}.sp-modal-title{display:inline-flex;align-items:center;gap:8px}.sp-modal-title__icon{display:inline-flex;align-items:center;justify-content:center}.sp-close-button{margin-left:auto;font-size:1.5rem;font-weight:700;line-height:1;color:#fff;opacity:.75;background:none;border:0;cursor:pointer}.sp-close-button:hover{opacity:1}.sp-modal-center-text{text-align:center;margin:12px 0;color:var(--text-color, #4a4a4a)}.sp-file-upload{display:flex;justify-content:center;width:100%}.sp-browse-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 14px;background:var(--btn-accept, #233b55);color:#fff;border:1px solid var(--btn-accept, #233b55);border-radius:var(--border-radius, 4px);cursor:pointer;text-align:center;font-size:13px;font-weight:600;line-height:1.2;-webkit-user-select:none;user-select:none;transition:var(--time-btn-transition, .3s) ease-in-out}.sp-browse-button:hover{background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.sp-queue-row{display:flex;align-items:center;gap:8px;padding:4px 0}.sp-queue-file-name{margin:0;flex:1 1 auto;min-width:0;line-height:1.3}.sp-remove-file-button{width:22px;height:22px;flex:0 0 22px}.sp-error-text{text-align:center;color:red;margin:12px 0 0}.sp-helper-text{margin-top:10px}.sp-size-help{display:grid;margin-bottom:15px;margin-top:10px;gap:4px}.sp-profile-tip{font-style:italic;padding-top:10px;display:inline-block}.cssload-container,.cssloadListView-container{display:flex;align-items:center;justify-content:center;width:100%}.cssload-speeding-wheel,.cssloadListView-speeding-wheel{width:24px;height:24px;border:3px solid rgba(35,59,85,.2);border-top-color:var(--btn-accept, #233b55);border-radius:50%;animation:sp-spin .8s linear infinite}@keyframes sp-spin{to{transform:rotate(360deg)}}.sp-modal-title{display:inline-flex;align-items:center;gap:8px;color:#fff}.paddingModalBody{padding:18px 16px;background:#fff}.box-placeholder,.my-drop-zone{min-height:56px;display:flex;align-items:center;justify-content:center}.modal-button-placement{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}::ng-deep .modal-lg .modal-dialog{max-width:900px}::ng-deep .modal-sm .modal-dialog{max-width:400px}::ng-deep .fade.modal.show{opacity:1}::ng-deep .input-style.mat-mdc-select,::ng-deep .input-style .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .input-style{display:block;width:100%;border:1px solid #d8dee5;border-radius:4px;min-height:38px;background:#fff}::ng-deep .input-style .mat-mdc-select-trigger{min-height:38px;display:flex;align-items:center;padding:0 12px}::ng-deep .input-style .mat-mdc-select-value{color:var(--text-color, #4a4a4a);font-size:13px}::ng-deep .mat-mdc-option{color:var(--text-color, #4a4a4a)}::ng-deep .input-style .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .input-style:hover{border-color:#b9c3cf}::ng-deep .input-style.mat-focused,::ng-deep .input-style:focus-within{border-color:var(--btn-accept, #233b55);box-shadow:0 0 0 2px #233b5514}\n"] }]
|
|
11136
11136
|
}], ctorParameters: () => [{ type: i1.AuthService }, { type: i1.CompaniesService }, { type: i1.SettingsService }, { type: i1.DamAssetsProfilesService }, { type: i1.DamAssetsService }, { type: i1.TeamsService }], propDecorators: { allAssetsUpload: [{
|
|
11137
11137
|
type: Output
|
|
11138
11138
|
}], folderGuid: [{
|
|
@@ -11141,6 +11141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
11141
11141
|
type: Input
|
|
11142
11142
|
}], imageArea: [{
|
|
11143
11143
|
type: Input
|
|
11144
|
+
}], assetParentGuid: [{
|
|
11145
|
+
type: Input
|
|
11146
|
+
}], assetVersion: [{
|
|
11147
|
+
type: Input
|
|
11144
11148
|
}], view: [{
|
|
11145
11149
|
type: Input
|
|
11146
11150
|
}] } });
|
|
@@ -11177,6 +11181,7 @@ class ModalMediaSelectionComponent {
|
|
|
11177
11181
|
this.token = '';
|
|
11178
11182
|
this.language = 'fr';
|
|
11179
11183
|
this.i18n = inject(ModalMediaSelectionI18nService);
|
|
11184
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
11180
11185
|
this.images = MODAL_MEDIA_SELECTION_IMAGES;
|
|
11181
11186
|
this.uploadMode = true;
|
|
11182
11187
|
this.type = "image";
|
|
@@ -11184,7 +11189,10 @@ class ModalMediaSelectionComponent {
|
|
|
11184
11189
|
this.isReplace = false;
|
|
11185
11190
|
this.sendListGuid = false;
|
|
11186
11191
|
this.isOnlyOneAsset = false;
|
|
11192
|
+
//Folder
|
|
11193
|
+
this.guidActiveFolderOfSelectedFolderForMove = null;
|
|
11187
11194
|
this.folders = [];
|
|
11195
|
+
this.newFolderInput = '';
|
|
11188
11196
|
//Search
|
|
11189
11197
|
this.isSearchMode = false;
|
|
11190
11198
|
this.searchTerm$ = new Subject();
|
|
@@ -11270,6 +11278,48 @@ class ModalMediaSelectionComponent {
|
|
|
11270
11278
|
});
|
|
11271
11279
|
}
|
|
11272
11280
|
}
|
|
11281
|
+
get totalPages() {
|
|
11282
|
+
const total = Number(this.nbrElementTotal || 0);
|
|
11283
|
+
const perPage = Number(this.nbrElementPage || 25);
|
|
11284
|
+
return Math.max(1, Math.ceil(total / perPage));
|
|
11285
|
+
}
|
|
11286
|
+
get visiblePages() {
|
|
11287
|
+
const total = this.totalPages;
|
|
11288
|
+
const current = this.pagePagination || 1;
|
|
11289
|
+
const delta = 1;
|
|
11290
|
+
let start = Math.max(1, current - delta);
|
|
11291
|
+
let end = Math.min(total, current + delta);
|
|
11292
|
+
if (current <= 2) {
|
|
11293
|
+
end = Math.min(total, 3);
|
|
11294
|
+
}
|
|
11295
|
+
if (current >= total - 1) {
|
|
11296
|
+
start = Math.max(1, total - 2);
|
|
11297
|
+
}
|
|
11298
|
+
const pages = [];
|
|
11299
|
+
for (let i = start; i <= end; i++) {
|
|
11300
|
+
pages.push(i);
|
|
11301
|
+
}
|
|
11302
|
+
return pages;
|
|
11303
|
+
}
|
|
11304
|
+
goToPage(page) {
|
|
11305
|
+
if (page < 1 || page > this.totalPages || page === this.pagePagination) {
|
|
11306
|
+
return;
|
|
11307
|
+
}
|
|
11308
|
+
this.pagePagination = page;
|
|
11309
|
+
this.changePagePagination({ page });
|
|
11310
|
+
}
|
|
11311
|
+
goToFirstPage() {
|
|
11312
|
+
this.goToPage(1);
|
|
11313
|
+
}
|
|
11314
|
+
goToPreviousPage() {
|
|
11315
|
+
this.goToPage((this.pagePagination || 1) - 1);
|
|
11316
|
+
}
|
|
11317
|
+
goToNextPage() {
|
|
11318
|
+
this.goToPage((this.pagePagination || 1) + 1);
|
|
11319
|
+
}
|
|
11320
|
+
goToLastPage() {
|
|
11321
|
+
this.goToPage(this.totalPages);
|
|
11322
|
+
}
|
|
11273
11323
|
/* ==================== ASSETS ==================== */
|
|
11274
11324
|
initSelectAssetSubscription() {
|
|
11275
11325
|
this.selectAssetSubject
|
|
@@ -12046,6 +12096,30 @@ class ModalMediaSelectionComponent {
|
|
|
12046
12096
|
img.src = this.images.pictureUnavailable;
|
|
12047
12097
|
}
|
|
12048
12098
|
}
|
|
12099
|
+
saveAndCloseAddFolderModal() {
|
|
12100
|
+
this.addFolder();
|
|
12101
|
+
this.auth.closeAllModal();
|
|
12102
|
+
}
|
|
12103
|
+
addFolder() {
|
|
12104
|
+
if (this.nameParentOfSelectedFolder !== '') {
|
|
12105
|
+
this._damAssets.createFolder(this.newFolderInput, this.guidActiveFolderOfSelectedFolderForMove, 'DAM').subscribe((res) => {
|
|
12106
|
+
this._damAssets.getFoldersWithParent(this.guidActiveFolderOfSelectedFolderForMove ? this.guidActiveFolderOfSelectedFolderForMove : '', true, 'DAM').subscribe((res) => {
|
|
12107
|
+
this.folders = res['folders'];
|
|
12108
|
+
this.auth.closeAllModal();
|
|
12109
|
+
this.newFolderInput = '';
|
|
12110
|
+
});
|
|
12111
|
+
});
|
|
12112
|
+
}
|
|
12113
|
+
else {
|
|
12114
|
+
this._damAssets.createFolderLevelOne(this.newFolderInput, 'DAM').subscribe((res) => {
|
|
12115
|
+
this._damAssets.getFoldersOnLevelOne(true, 'DAM').subscribe((res) => {
|
|
12116
|
+
this.folders = res['folders'];
|
|
12117
|
+
this.auth.closeAllModal();
|
|
12118
|
+
this.newFolderInput = '';
|
|
12119
|
+
});
|
|
12120
|
+
});
|
|
12121
|
+
}
|
|
12122
|
+
}
|
|
12049
12123
|
t(key, params) {
|
|
12050
12124
|
return this.i18n.translate(key, params);
|
|
12051
12125
|
}
|
|
@@ -12072,11 +12146,11 @@ class ModalMediaSelectionComponent {
|
|
|
12072
12146
|
this.auth.sendToken(this.token);
|
|
12073
12147
|
}
|
|
12074
12148
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ModalMediaSelectionComponent, deps: [{ token: i1.DamAssetsService }, { token: i1.SearchService }, { token: i1.MediaSelectionService }, { token: i1.SettingsService }, { token: i1.WorkflowsDesksService }, { token: i1.SuppliersService }, { token: i1.AccountsService }, { token: i1.FrameworkagreementsService }, { token: i1.websocketService }, { token: i0.ChangeDetectorRef }, { token: i1.RightsService }, { token: i1.SettingsService }, { token: i1.LoginService }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12075
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ModalMediaSelectionComponent, isStandalone: true, selector: "app-solidpepper-modal-media-selection", inputs: { isExternal: "isExternal", alias: "alias", team: "team", designer: "designer", token: "token", language: "language", uploadMode: "uploadMode", typeField: "typeField", type: "type", skuGuid: "skuGuid", attributeGuid: "attributeGuid", categoryGuid: "categoryGuid", categoryParam: "categoryParam", bomParam: "bomParam", workflows: "workflows", workitemGuid: "workitemGuid", isReplace: "isReplace", sendListGuid: "sendListGuid", currentGuids: "currentGuids", archive: "archive", isOnlyOneAsset: "isOnlyOneAsset" }, outputs: { hasBeenSaved: "hasBeenSaved", refreshData: "refreshData" }, usesOnChanges: true, ngImport: i0, template: "<!-- /HEADER -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-header-style\">\r\n <div class=\"modal-side-bar-header-content\">\r\n <div>\r\n <h4 class=\"modal-side-bar-header-title\">\r\n {{ t(\"media.media-selection.SELECTASSETS\") }}\r\n </h4>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./HEADER -->\r\n\r\n<!-- /CONTENT -->\r\n<div class=\"modal-side-bar-content sp-modal-content\">\r\n <div class=\"sp-header-row header-container\">\r\n <div class=\"sp-header-left\">\r\n @if (!isSearchMode) {\r\n <div class=\"header-full-path-folder\">\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <button\r\n type=\"button\"\r\n class=\"sp-icon-button pointer\"\r\n (click)=\"returnBackFolderForMoveToAnotherFolder()\"\r\n aria-label=\"Retour\"\r\n >\r\n <svg\r\n class=\"sp-icon sp-icon-md\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M14.7 6.3a1 1 0 0 1 0 1.4L11.41 11H20a1 1 0 1 1 0 2h-8.59l3.3 3.3a1 1 0 1 1-1.42 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.41 0Z\"\r\n />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n\r\n <h5 class=\"ellipsis-text designer sp-path-title\">\r\n <strong\r\n matTooltip=\"{{ pathFolder }}\"\r\n matTooltipPosition=\"below\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n >\r\n {{ pathFolder }}\r\n </strong>\r\n </h5>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"sp-header-right\">\r\n @if (uploadMode) {\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n }\r\n\r\n <div class=\"search-container sp-search-container\">\r\n <input\r\n class=\"search-content sp-search-input\"\r\n type=\"text\"\r\n [(ngModel)]=\"searchTermForDisplay\"\r\n placeholder=\"Rechercher...\"\r\n aria-label=\"Search\"\r\n id=\"searchBar\"\r\n #searchBar\r\n (keyup)=\"searchTerm$.next($event.target.value); checkSearchMode()\"\r\n />\r\n <span class=\"sp-search-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10.5 4a6.5 6.5 0 0 1 5.17 10.45l4.19 4.18a1 1 0 0 1-1.42 1.42l-4.18-4.19A6.5 6.5 0 1 1 10.5 4Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Z\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"sp-pagination-wrapper\">\r\n <pagination\r\n #pagination\r\n class=\"paginationCss\"\r\n firstText=\"|<\"\r\n lastText=\">|\"\r\n previousText=\"<\"\r\n nextText=\">\"\r\n [(ngModel)]=\"pagePagination\"\r\n [totalItems]=\"nbrElementTotal\"\r\n [itemsPerPage]=\"nbrElementPage\"\r\n [maxSize]=\"maxSize\"\r\n [boundaryLinks]=\"true\"\r\n [rotate]=\"false\"\r\n (numPages)=\"numPages = $event\"\r\n [directionLinks]=\"true\"\r\n (pageChanged)=\"changePagePagination($event)\"\r\n ></pagination>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sp-body-row\">\r\n @if (!isSearchMode) {\r\n <div class=\"sp-sidebar\">\r\n <div class=\"area-folder-container\">\r\n <div class=\"area-folder-path-folder\">\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ nameParentOfSelectedFolderForMove }}</strong>\r\n </label>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ pathFolder }}</strong>\r\n </label>\r\n }\r\n </div>\r\n\r\n <div class=\"area-folder-list\">\r\n @for (folder of folders; track folder) {\r\n @if (\r\n folder &&\r\n folder.folderGuid != \"11111111-1111-1111-1111-111111111111\" &&\r\n folder.folderGuid != \"33333333-3333-3333-3333-333333333333\"\r\n ) {\r\n @if (\r\n folder.folderGuid != \"00000000-0000-0000-0000-000000000000\" ||\r\n (folder.folderGuid ==\r\n \"00000000-0000-0000-0000-000000000000\" &&\r\n rightsAccesModule?.[\"rights\"]?.[\"Media\"]?.[\r\n \"DamAssetsSelections\"\r\n ]?.[\"subModuleIsActive\"])\r\n ) {\r\n <div\r\n class=\"area-folder-style\"\r\n (click)=\"\r\n changeLevelOfFolderForMove(\r\n folder.folderGuid,\r\n folder.folderName\r\n )\r\n \"\r\n >\r\n <span class=\"sp-inline-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n <label\r\n class=\"ellipsis-text pointer designer sp-folder-name\"\r\n >\r\n {{ folder.folderName }}\r\n\r\n @if (\r\n folder.folderShareTeam &&\r\n folder.folderShareTeam.length > 0\r\n ) {\r\n <span\r\n class=\"sp-inline-icon sp-lock-icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M17 9h-1V7a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n </label>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n @if (folders && folders.length == 0) {\r\n <div class=\"sp-empty-state\">\r\n <span\r\n class=\"ellipsis-text designer\"\r\n [innerHTML]=\"t('media.media-selection.NOSUBFOLDERSTODISPLAY')\"\r\n ></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"sp-assets-panel\"\r\n [ngClass]=\"{ 'sp-assets-panel--full': isSearchMode }\"\r\n >\r\n <div class=\"sp-assets-grid\">\r\n <ng-container>\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n [imageArea]=\"true\"\r\n [view]=\"'thumbnail'\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n </ng-container>\r\n\r\n @for (asset of assetsInFolder; track asset) {\r\n @if (\r\n (type == \"image\" || type == \"imageMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"image\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n id=\"{{ asset.assetGuid }}\"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <img\r\n class=\"sp-asset-preview\"\r\n (error)=\"onAssetImageError($event)\"\r\n alt=\"image non disponible\"\r\n [src]=\"asset.assetUrlBig\"\r\n />\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-meta-row\">\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetMetadatas.width }} x\r\n {{ asset.assetMetadatas.height }}\r\n </p>\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"file\" || type == \"fileMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"file\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img\r\n [src]=\"images.textDocument\"\r\n alt=\"image non disponible\"\r\n />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"audio\" || type == \"all\") && asset.assetType == \"audio\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.speaker\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"video\" || type == \"all\") && asset.assetType == \"video\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.play\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<!-- ./CONTENT -->\r\n\r\n<!-- /ACTION -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-footer\">\r\n <div class=\"modal-side-bar-footer-line\"></div>\r\n <div class=\"modal-side-bar-footer-right-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"closeModal()\"\r\n [innerHTML]=\"t('products.skus.skus-detail.skus-prices.CLOSE')\"\r\n ></button>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./ACTION -->\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff}:host,:host *,:host *:before,:host *:after{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}:host{display:block;color:#4a4a4a}.sp-modal-content{padding-left:10px;background:#fff}.header-container{min-height:56px;display:flex;align-items:center;position:sticky;top:0;background-color:#fff;z-index:20}.sp-header-row{display:flex;gap:16px;padding:10px 0 12px;align-items:center}.sp-header-left{flex:0 0 25%;min-width:0}.sp-header-right{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.header-full-path-folder{display:flex;align-items:center;gap:8px;min-width:0}.sp-path-title{margin:0;font-size:18px;min-width:0}.sp-icon{width:16px;height:16px;display:block;fill:currentColor}.sp-icon-md{width:18px;height:18px}.sp-inline-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--btn-accept, #233b55);flex:0 0 auto}.sp-icon-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:4px;border-radius:6px;color:var(--btn-accept, #233b55);cursor:pointer}.sp-icon-button:hover{background:#233b5514}.sp-search-container{width:220px;min-width:220px}.sp-search-input{width:100%;height:38px;padding:8px 34px 8px 12px;border:1px solid #dde3ea;border-radius:var(--border-radius, 4px);background:#f5f7f8;outline:none;font-size:13px}.sp-search-input:focus{border-color:var(--btn-accept, #233b55);background:#fff}.sp-search-icon{position:absolute;right:10px;color:#6c757d;display:inline-flex;align-items:center;justify-content:center}.sp-body-row{display:flex;gap:16px;overflow:hidden}.sp-sidebar{flex:0 0 calc(25% - 8px);min-width:240px;margin-top:9px}.area-folder-container{background-color:#f5f7f8;border-radius:var(--border-radius, 4px);height:100%;overflow-y:auto;overflow-x:hidden;border:1px solid #e5eaef}.area-folder-path-folder{display:flex;padding:10px 12px;min-height:42px;color:var(--btn-accept, #233b55);border-bottom:1px solid #d7dce1;align-items:center;gap:8px}.sp-folder-current-name{font-size:16px;min-width:0}.area-folder-list{height:calc(90vh - 213px);overflow:auto;overflow-x:hidden}.area-folder-style{padding:10px 14px;display:flex;align-items:center;gap:10px;color:var(--btn-accept, #233b55);cursor:pointer;transition:background-color .2s ease,color .2s ease}.area-folder-style:hover{background-color:var(--btn-accept, #233b55);color:#fff}.area-folder-style:hover .sp-inline-icon,.area-folder-style:hover .sp-lock-icon{color:#fff}.sp-folder-name{font-size:15px;min-width:0;flex:1 1 auto}.sp-lock-icon{margin-left:5px}.sp-empty-state{display:flex;justify-content:center;padding:14px;text-align:center}.sp-assets-panel{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;height:calc(90vh - 163px)}.sp-assets-panel--full{width:100%}.sp-assets-grid{margin-top:10px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:20px}.sp-asset-item{width:140px;flex:0 0 140px}.assetsDivInModal{position:relative;background:#fff;display:inline-block;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;min-height:150px;padding:0}.sp-asset-preview{object-fit:contain;width:140px;height:100px;display:block;background:#fff}.imgForAudioEtc{width:140px;height:100px;display:flex;align-items:center;justify-content:center;background:#fff}.imgForAudioEtc img{max-width:100%;max-height:100%;object-fit:contain}.checkBoxSelectionInModal{right:8px;position:absolute;top:8px;z-index:2}.sp-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer}.sp-checkbox input{position:absolute;opacity:0;pointer-events:none}.sp-checkbox-ui{width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #c7d0da;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0f172a14}.sp-check-icon{width:14px;height:14px;fill:#fff;opacity:0}.sp-checkbox input:checked+.sp-checkbox-ui{background-color:var(--btn-accept, #233b55);border-color:var(--btn-accept, #233b55)}.sp-checkbox input:checked+.sp-checkbox-ui .sp-check-icon{opacity:1}.sp-checkbox input:disabled+.sp-checkbox-ui{background:#ddd;border-color:#ddd;cursor:not-allowed}.assetNameListingDisplay,.assetNameListingDisplayInModal{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-asset-name{margin-top:8px;margin-bottom:0;font-size:11px;font-weight:700;line-height:1.3}.sp-asset-meta-row{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;width:100%;padding-bottom:6px}.sp-asset-meta-text{margin:0;padding:0;font-size:10px;font-style:italic;color:#667085;line-height:1.2}.sp-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:18px;padding:0 6px;border-radius:999px;background:#1f2937;color:#fff;font-size:9px;font-weight:700;line-height:1;text-transform:uppercase}input{font-family:var(--font-family)!important}@media (max-width: 1100px){.sp-body-row{flex-direction:column}.sp-sidebar{min-width:100%;flex:1 1 auto}.sp-assets-panel{height:auto;max-height:calc(90vh - 220px)}.sp-header-left,.sp-header-right{flex:1 1 100%}.sp-header-row{flex-wrap:wrap}}.sp-pagination-wrapper{display:flex;align-items:center}:host ::ng-deep .sp-pagination-wrapper .pagination{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}:host ::ng-deep .sp-pagination-wrapper .page-item{display:inline-flex}:host ::ng-deep .sp-pagination-wrapper .page-item.disabled .page-link{opacity:.45;cursor:not-allowed;pointer-events:none}:host ::ng-deep .sp-pagination-wrapper .page-link{min-width:34px;height:34px;padding:0 10px;border:1px solid #d9e0e7;border-radius:6px;background:#fff;color:#233b55;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;transition:.2s ease}:host ::ng-deep .sp-pagination-wrapper .page-link:hover{background:#f4f7fa;border-color:#233b55}:host ::ng-deep .sp-pagination-wrapper .page-item.active .page-link{background:#233b55;border-color:#233b55;color:#fff}:host ::ng-deep .sp-pagination-wrapper .page-item:first-child .page-link,:host ::ng-deep .sp-pagination-wrapper .page-item:last-child .page-link{min-width:40px}::ng-deep .sp-tooltip-dark{--mdc-plain-tooltip-container-color: #000;--mdc-plain-tooltip-supporting-text-color: #fff}::ng-deep .sp-tooltip-dark .mat-mdc-tooltip-surface{background:#000!important;color:#fff!important;border-radius:6px!important;padding:8px 12px!important;font-size:13px!important;line-height:1.2!important;font-weight:600!important;box-shadow:0 4px 12px #0000004d!important;border:none!important;max-width:260px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AssetsUploaderComponent, selector: "app-assets-uploader", inputs: ["folderGuid", "folderType", "imageArea", "view"], outputs: ["allAssetsUpload"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: NgxSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i4$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
|
|
12149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ModalMediaSelectionComponent, isStandalone: true, selector: "app-solidpepper-modal-media-selection", inputs: { isExternal: "isExternal", alias: "alias", team: "team", designer: "designer", token: "token", language: "language", uploadMode: "uploadMode", typeField: "typeField", type: "type", skuGuid: "skuGuid", attributeGuid: "attributeGuid", categoryGuid: "categoryGuid", categoryParam: "categoryParam", bomParam: "bomParam", workflows: "workflows", workitemGuid: "workitemGuid", isReplace: "isReplace", sendListGuid: "sendListGuid", currentGuids: "currentGuids", archive: "archive", isOnlyOneAsset: "isOnlyOneAsset" }, outputs: { hasBeenSaved: "hasBeenSaved", refreshData: "refreshData" }, usesOnChanges: true, ngImport: i0, template: "<!-- /HEADER -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-header-style\">\r\n <div class=\"modal-side-bar-header-content\">\r\n <div>\r\n <h4 class=\"modal-side-bar-header-title\">\r\n {{ t(\"media.media-selection.SELECTASSETS\") }}\r\n </h4>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./HEADER -->\r\n\r\n<!-- /CONTENT -->\r\n<div class=\"modal-side-bar-content sp-modal-content\">\r\n <div class=\"sp-header-row header-container\">\r\n <div class=\"sp-header-left\">\r\n @if (!isSearchMode) {\r\n <div class=\"header-full-path-folder\">\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <button\r\n type=\"button\"\r\n class=\"sp-icon-button pointer\"\r\n (click)=\"returnBackFolderForMoveToAnotherFolder()\"\r\n aria-label=\"Retour\"\r\n >\r\n <svg\r\n class=\"sp-icon sp-icon-md\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M14.7 6.3a1 1 0 0 1 0 1.4L11.41 11H20a1 1 0 1 1 0 2h-8.59l3.3 3.3a1 1 0 1 1-1.42 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.41 0Z\"\r\n />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n\r\n <h5 class=\"ellipsis-text designer sp-path-title\">\r\n <strong\r\n matTooltip=\"{{ pathFolder }}\"\r\n matTooltipPosition=\"below\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n >\r\n {{ pathFolder }}\r\n </strong>\r\n </h5>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"sp-header-right\">\r\n @if (uploadMode) {\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n }\r\n\r\n <div class=\"search-container sp-search-container\">\r\n <input\r\n class=\"search-content sp-search-input\"\r\n type=\"text\"\r\n [(ngModel)]=\"searchTermForDisplay\"\r\n placeholder=\"Rechercher...\"\r\n aria-label=\"Search\"\r\n id=\"searchBar\"\r\n #searchBar\r\n (keyup)=\"searchTerm$.next($event.target.value); checkSearchMode()\"\r\n />\r\n <span class=\"sp-search-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10.5 4a6.5 6.5 0 0 1 5.17 10.45l4.19 4.18a1 1 0 0 1-1.42 1.42l-4.18-4.19A6.5 6.5 0 1 1 10.5 4Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Z\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"sp-pagination-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToFirstPage()\"\r\n [disabled]=\"pagePagination <= 1\"\r\n >\r\n |<\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToPreviousPage()\"\r\n [disabled]=\"pagePagination <= 1\"\r\n >\r\n <\r\n </button>\r\n\r\n @for (page of visiblePages; track page) {\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n [class.sp-pagination-button--active]=\"page === pagePagination\"\r\n (click)=\"goToPage(page)\"\r\n >\r\n {{ page }}\r\n </button>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToNextPage()\"\r\n [disabled]=\"pagePagination >= totalPages\"\r\n >\r\n >\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToLastPage()\"\r\n [disabled]=\"pagePagination >= totalPages\"\r\n >\r\n >|\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sp-body-row\">\r\n @if (!isSearchMode) {\r\n <div class=\"sp-sidebar\">\r\n <div class=\"area-folder-container\">\r\n <div class=\"area-folder-path-folder\">\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ nameParentOfSelectedFolderForMove }}</strong>\r\n </label>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ pathFolder }}</strong>\r\n </label>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-folder-add-button\"\r\n (click)=\"auth.triggerModal(modalAddFolder, viewContainerRef)\"\r\n aria-label=\"Ajouter un dossier\"\r\n >\r\n <svg\r\n class=\"sp-folder-add-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Zm12 5a1 1 0 0 0-1 1v1h-1a1 1 0 1 0 0 2h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2h-1v-1a1 1 0 0 0-1-1Z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"area-folder-list\">\r\n @for (folder of folders; track folder) {\r\n @if (\r\n folder &&\r\n folder.folderGuid != \"11111111-1111-1111-1111-111111111111\" &&\r\n folder.folderGuid != \"33333333-3333-3333-3333-333333333333\"\r\n ) {\r\n @if (\r\n folder.folderGuid != \"00000000-0000-0000-0000-000000000000\" ||\r\n (folder.folderGuid ==\r\n \"00000000-0000-0000-0000-000000000000\" &&\r\n rightsAccesModule?.[\"rights\"]?.[\"Media\"]?.[\r\n \"DamAssetsSelections\"\r\n ]?.[\"subModuleIsActive\"])\r\n ) {\r\n <div\r\n class=\"area-folder-style\"\r\n (click)=\"\r\n changeLevelOfFolderForMove(\r\n folder.folderGuid,\r\n folder.folderName\r\n )\r\n \"\r\n >\r\n <span class=\"sp-inline-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n <label\r\n class=\"ellipsis-text pointer designer sp-folder-name\"\r\n >\r\n {{ folder.folderName }}\r\n\r\n @if (\r\n folder.folderShareTeam &&\r\n folder.folderShareTeam.length > 0\r\n ) {\r\n <span\r\n class=\"sp-inline-icon sp-lock-icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M17 9h-1V7a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n </label>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n @if (folders && folders.length == 0) {\r\n <div class=\"sp-empty-state\">\r\n <span\r\n class=\"ellipsis-text designer\"\r\n [innerHTML]=\"t('media.media-selection.NOSUBFOLDERSTODISPLAY')\"\r\n ></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"sp-assets-panel\"\r\n [ngClass]=\"{ 'sp-assets-panel--full': isSearchMode }\"\r\n >\r\n <div class=\"sp-assets-grid\">\r\n <ng-container>\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n [imageArea]=\"true\"\r\n [view]=\"'thumbnail'\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n </ng-container>\r\n\r\n @for (asset of assetsInFolder; track asset) {\r\n @if (\r\n (type == \"image\" || type == \"imageMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"image\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n id=\"{{ asset.assetGuid }}\"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <img\r\n class=\"sp-asset-preview\"\r\n (error)=\"onAssetImageError($event)\"\r\n alt=\"image non disponible\"\r\n [src]=\"asset.assetUrlBig\"\r\n />\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-meta-row\">\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetMetadatas.width }} x\r\n {{ asset.assetMetadatas.height }}\r\n </p>\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"file\" || type == \"fileMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"file\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img\r\n [src]=\"images.textDocument\"\r\n alt=\"image non disponible\"\r\n />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"audio\" || type == \"all\") && asset.assetType == \"audio\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.speaker\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"video\" || type == \"all\") && asset.assetType == \"video\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.play\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<!-- ./CONTENT -->\r\n\r\n<!-- /ACTION -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-footer\">\r\n <div class=\"modal-side-bar-footer-line\"></div>\r\n <div class=\"modal-side-bar-footer-right-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"closeModal()\"\r\n [innerHTML]=\"t('products.skus.skus-detail.skus-prices.CLOSE')\"\r\n ></button>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./ACTION -->\r\n\r\n<ng-template #modalAddFolder>\r\n <div class=\"modal-header modalHeaderPadding\">\r\n <h5 class=\"modal-title\" id=\"exampleModalLongTitle\">\r\n {{ t(\"media.library.ADDFOLDER\") }}\r\n </h5>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-close-button\"\r\n (click)=\"auth.closeAllModal()\"\r\n aria-label=\"Close\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body paddingModalBody sp-add-folder-modal-body\">\r\n <div class=\"sp-add-folder-field\">\r\n <label class=\"sp-add-folder-label\">\r\n {{ t(\"media.library.NAME\") }}\r\n </label>\r\n\r\n <input\r\n [(ngModel)]=\"newFolderInput\"\r\n (keyup.enter)=\"saveAndCloseAddFolderModal()\"\r\n class=\"sp-text-input\"\r\n autocomplete=\"off\"\r\n />\r\n </div>\r\n\r\n <span class=\"sp-form-helper\">\r\n {{ t(\"media.library.SHAREFOLDERADD\") }}\r\n </span>\r\n\r\n <div class=\"modal-button-placement sp-add-folder-actions\">\r\n <button type=\"button\" class=\"btn-denied\" (click)=\"auth.closeAllModal()\">\r\n {{ t(\"media.library.CANCEL\") }}\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-access\"\r\n (click)=\"saveAndCloseAddFolderModal()\"\r\n >\r\n {{ t(\"media.library.SAVE\") }}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff;--text-color: #4a4a4a}:host,:host *,:host *:before,:host *:after,:root{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}::ng-deep .sp-dialog-backdrop{background:#00000073}::ng-deep .sp-dialog-panel .mat-mdc-dialog-container{padding:0!important}::ng-deep .sp-dialog-panel .mat-mdc-dialog-surface{padding:0!important;background:#fff!important;border-radius:6px!important;box-shadow:0 20px 50px #00000059!important;overflow:hidden!important}::ng-deep .sp-dialog-panel{display:block!important}:host{display:block;color:#4a4a4a}.sp-modal-content{padding-inline:10px;background:#fff}.header-container{min-height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:20}.sp-header-row{display:flex;gap:16px;padding:10px 0 12px;align-items:center}.sp-header-left{flex:0 0 25%;min-width:0}.sp-header-right{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.header-full-path-folder{display:flex;align-items:center;gap:8px;min-width:0}.sp-path-title{margin:0;font-size:18px;min-width:0;color:var(--text-color, #4a4a4a)}.sp-icon{width:16px;height:16px;display:block;fill:currentColor}.sp-icon-md{width:18px;height:18px}.sp-inline-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--btn-accept, #233b55);flex:0 0 auto}.sp-icon-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:4px;border-radius:6px;color:var(--btn-accept, #233b55);cursor:pointer}.sp-icon-button:hover{background:#233b5514}.sp-search-container{width:220px;min-width:220px}.sp-search-input{width:100%;height:38px;padding:8px 34px 8px 12px;border:1px solid #dde3ea;border-radius:var(--border-radius, 4px);background:#f5f7f8;outline:none;font-size:13px}.sp-search-input:focus{border-color:var(--btn-accept, #233b55);background:#fff}.sp-search-icon{position:absolute;right:10px;color:#6c757d;display:inline-flex;align-items:center;justify-content:center}.sp-pagination-wrapper{display:flex;align-items:center}.sp-body-row{display:flex;gap:16px;overflow:hidden}.sp-sidebar{flex:0 0 calc(25% - 8px);min-width:240px;margin-top:9px}.area-folder-container{background-color:#f5f7f8;border-radius:var(--border-radius, 4px);height:100%;overflow-y:auto;overflow-x:hidden;border:1px solid #e5eaef}.area-folder-path-folder{display:flex;padding:10px 12px;min-height:42px;color:var(--btn-accept, #233b55);border-bottom:1px solid #d7dce1;align-items:center;gap:8px}.sp-folder-current-name{font-size:16px;min-width:0}.area-folder-list{height:calc(90vh - 213px);overflow:auto;overflow-x:hidden}.area-folder-style{padding:10px 14px;display:flex;align-items:center;gap:10px;color:var(--btn-accept, #233b55);cursor:pointer;transition:background-color .2s ease,color .2s ease}.area-folder-style:hover{background-color:var(--btn-accept, #233b55);color:#fff}.area-folder-style:hover .sp-inline-icon,.area-folder-style:hover .sp-lock-icon{color:#fff}.sp-folder-name{font-size:15px;min-width:0;flex:1 1 auto;color:var(--text-color, #4a4a4a)}.sp-lock-icon{margin-left:5px}.sp-empty-state{display:flex;justify-content:center;padding:14px;text-align:center}.sp-assets-panel{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;height:calc(90vh - 163px)}.sp-assets-panel--full{width:100%}.sp-assets-grid{margin-top:10px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:20px}.sp-asset-item{display:block!important;width:140px;flex:0 0 140px}div.sp-asset-item:nth-of-type(1){display:block!important}.sp-assets-grid>div.sp-asset-item:nth-of-type(1){display:block!important}.sp-assets-grid>div.sp-asset-item{display:block!important}:host .sp-assets-grid>div.sp-asset-item:nth-of-type(1){display:block!important}.assetsDivInModal{position:relative;background:#fff;display:inline-block;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;min-height:150px;padding:0}.sp-asset-preview{object-fit:contain;width:140px;height:100px;display:block;background:#fff}.imgForAudioEtc{width:140px;height:100px;display:flex;align-items:center;justify-content:center;background:#fff}.imgForAudioEtc img{max-width:100%;max-height:100%;object-fit:contain}.checkBoxSelectionInModal{right:8px;position:absolute;top:8px;z-index:2}.sp-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer}.sp-checkbox input{position:absolute;opacity:0;pointer-events:none}.sp-checkbox-ui{width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #c7d0da;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0f172a14}.sp-check-icon{width:14px;height:14px;fill:#fff;opacity:0}.sp-checkbox input:checked+.sp-checkbox-ui{background-color:var(--btn-accept, #233b55);border-color:var(--btn-accept, #233b55)}.sp-checkbox input:checked+.sp-checkbox-ui .sp-check-icon{opacity:1}.sp-checkbox input:disabled+.sp-checkbox-ui{background:#ddd;border-color:#ddd;cursor:not-allowed}.assetNameListingDisplay,.assetNameListingDisplayInModal{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-asset-name{margin-top:8px;margin-bottom:1px;font-size:11px;font-weight:700;line-height:1.3;color:var(--text-color, #4a4a4a)}.sp-asset-meta-row{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;width:100%;padding-bottom:5px}.sp-asset-meta-text{margin:0;padding:0;font-size:10px;font-style:italic;color:#667085;line-height:1.2}.sp-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:18px;padding:0 6px;border-radius:999px;background:#1f2937;color:#fff;font-size:9px;font-weight:700;line-height:1;text-transform:uppercase}input{font-family:var(--font-family)!important}@media (max-width: 1100px){.sp-body-row{flex-direction:column}.sp-sidebar{min-width:100%;flex:1 1 auto}.sp-assets-panel{height:auto;max-height:calc(90vh - 220px)}.sp-header-left,.sp-header-right{flex:1 1 100%}.sp-header-row{flex-wrap:wrap}}.sp-pagination-wrapper{display:flex;align-items:center;gap:6px}.sp-pagination-button{min-width:34px;height:34px;padding:0 10px;border:1px solid #d9e0e7;border-radius:6px;background:#fff;color:#233b55;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;transition:.2s ease}.sp-pagination-button:hover:not(:disabled){background:#f4f7fa;border-color:#233b55}.sp-pagination-button--active{background:var(--btn-accept, #233b55);border-color:var(--btn-accept, #233b55);color:#fff}.sp-pagination-button:disabled{opacity:.45;cursor:not-allowed}::ng-deep .sp-tooltip-dark{--mdc-plain-tooltip-container-color: #000;--mdc-plain-tooltip-supporting-text-color: #fff}::ng-deep .sp-tooltip-dark .mat-mdc-tooltip-surface{background:#000!important;color:#fff!important;border-radius:6px!important;padding:8px 12px!important;font-size:13px!important;line-height:1.2!important;font-weight:600!important;box-shadow:0 4px 12px #0000004d!important;border:none!important;max-width:260px!important}.sp-folder-add-button{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent;color:var(--btn-accept, #233b55);cursor:pointer;border-radius:6px;padding:0;flex:0 0 auto;transition:background .2s ease,color .2s ease}.sp-folder-add-button:hover{background:#233b5514}.sp-folder-add-button:active{background:#233b5526}.sp-folder-add-icon{width:18px;height:18px;display:block;fill:currentColor}.sp-form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.sp-form-label-col{flex:0 0 90px;display:flex;align-items:center;font-size:13px;color:var(--text-color, #4a4a4a)}.sp-form-field-col{flex:1 1 auto}.sp-text-input{width:100%;height:38px;padding:8px 12px;border:1px solid #d8dee5;border-radius:var(--border-radius, 4px);background:#fff;color:var(--text-color, #4a4a4a);outline:none;font-size:13px;font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);transition:border-color .2s ease,box-shadow .2s ease}.sp-text-input::placeholder{color:#98a2b3}.sp-text-input:focus{border-color:var(--btn-accept, #233b55);box-shadow:0 0 0 2px #233b5514}.sp-form-helper{display:block;font-style:italic;padding-top:16px;font-size:12px;color:var(--text-color, #4a4a4a);opacity:.7}.modal-button-placement{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.sp-close-button{border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--text-color, #4a4a4a);line-height:1;padding:4px 8px}.sp-close-button:hover{color:var(--btn-accept, #233b55)}.sp-add-folder-modal-body{padding:16px}.sp-add-folder-field{display:flex;align-items:center;gap:14px;margin-bottom:10px}.sp-add-folder-label{flex:0 0 42px;font-size:13px;color:var(--text-color, #4a4a4a)}.sp-add-folder-field .sp-text-input{flex:1 1 auto;min-width:0}.sp-add-folder-actions{margin-top:22px}.sp-form-helper{display:block;font-style:italic;font-size:12px;color:var(--text-color, #4a4a4a);opacity:.75;margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AssetsUploaderComponent, selector: "app-assets-uploader", inputs: ["folderGuid", "folderType", "imageArea", "assetParentGuid", "assetVersion", "view"], outputs: ["allAssetsUpload"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
|
|
12076
12150
|
}
|
|
12077
12151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ModalMediaSelectionComponent, decorators: [{
|
|
12078
12152
|
type: Component,
|
|
12079
|
-
args: [{ selector: 'app-solidpepper-modal-media-selection', standalone: true, encapsulation: ViewEncapsulation.Emulated, imports: [CommonModule, AssetsUploaderComponent, BsDropdownModule, MatSelectModule, NgxSelectModule, MatTooltipModule, MatCheckboxModule, PaginationModule, FormsModule, ReactiveFormsModule], template: "<!-- /HEADER -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-header-style\">\r\n <div class=\"modal-side-bar-header-content\">\r\n <div>\r\n <h4 class=\"modal-side-bar-header-title\">\r\n {{ t(\"media.media-selection.SELECTASSETS\") }}\r\n </h4>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./HEADER -->\r\n\r\n<!-- /CONTENT -->\r\n<div class=\"modal-side-bar-content sp-modal-content\">\r\n <div class=\"sp-header-row header-container\">\r\n <div class=\"sp-header-left\">\r\n @if (!isSearchMode) {\r\n <div class=\"header-full-path-folder\">\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <button\r\n type=\"button\"\r\n class=\"sp-icon-button pointer\"\r\n (click)=\"returnBackFolderForMoveToAnotherFolder()\"\r\n aria-label=\"Retour\"\r\n >\r\n <svg\r\n class=\"sp-icon sp-icon-md\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M14.7 6.3a1 1 0 0 1 0 1.4L11.41 11H20a1 1 0 1 1 0 2h-8.59l3.3 3.3a1 1 0 1 1-1.42 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.41 0Z\"\r\n />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n\r\n <h5 class=\"ellipsis-text designer sp-path-title\">\r\n <strong\r\n matTooltip=\"{{ pathFolder }}\"\r\n matTooltipPosition=\"below\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n >\r\n {{ pathFolder }}\r\n </strong>\r\n </h5>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"sp-header-right\">\r\n @if (uploadMode) {\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n }\r\n\r\n <div class=\"search-container sp-search-container\">\r\n <input\r\n class=\"search-content sp-search-input\"\r\n type=\"text\"\r\n [(ngModel)]=\"searchTermForDisplay\"\r\n placeholder=\"Rechercher...\"\r\n aria-label=\"Search\"\r\n id=\"searchBar\"\r\n #searchBar\r\n (keyup)=\"searchTerm$.next($event.target.value); checkSearchMode()\"\r\n />\r\n <span class=\"sp-search-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10.5 4a6.5 6.5 0 0 1 5.17 10.45l4.19 4.18a1 1 0 0 1-1.42 1.42l-4.18-4.19A6.5 6.5 0 1 1 10.5 4Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Z\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"sp-pagination-wrapper\">\r\n <pagination\r\n #pagination\r\n class=\"paginationCss\"\r\n firstText=\"|<\"\r\n lastText=\">|\"\r\n previousText=\"<\"\r\n nextText=\">\"\r\n [(ngModel)]=\"pagePagination\"\r\n [totalItems]=\"nbrElementTotal\"\r\n [itemsPerPage]=\"nbrElementPage\"\r\n [maxSize]=\"maxSize\"\r\n [boundaryLinks]=\"true\"\r\n [rotate]=\"false\"\r\n (numPages)=\"numPages = $event\"\r\n [directionLinks]=\"true\"\r\n (pageChanged)=\"changePagePagination($event)\"\r\n ></pagination>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sp-body-row\">\r\n @if (!isSearchMode) {\r\n <div class=\"sp-sidebar\">\r\n <div class=\"area-folder-container\">\r\n <div class=\"area-folder-path-folder\">\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ nameParentOfSelectedFolderForMove }}</strong>\r\n </label>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ pathFolder }}</strong>\r\n </label>\r\n }\r\n </div>\r\n\r\n <div class=\"area-folder-list\">\r\n @for (folder of folders; track folder) {\r\n @if (\r\n folder &&\r\n folder.folderGuid != \"11111111-1111-1111-1111-111111111111\" &&\r\n folder.folderGuid != \"33333333-3333-3333-3333-333333333333\"\r\n ) {\r\n @if (\r\n folder.folderGuid != \"00000000-0000-0000-0000-000000000000\" ||\r\n (folder.folderGuid ==\r\n \"00000000-0000-0000-0000-000000000000\" &&\r\n rightsAccesModule?.[\"rights\"]?.[\"Media\"]?.[\r\n \"DamAssetsSelections\"\r\n ]?.[\"subModuleIsActive\"])\r\n ) {\r\n <div\r\n class=\"area-folder-style\"\r\n (click)=\"\r\n changeLevelOfFolderForMove(\r\n folder.folderGuid,\r\n folder.folderName\r\n )\r\n \"\r\n >\r\n <span class=\"sp-inline-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n <label\r\n class=\"ellipsis-text pointer designer sp-folder-name\"\r\n >\r\n {{ folder.folderName }}\r\n\r\n @if (\r\n folder.folderShareTeam &&\r\n folder.folderShareTeam.length > 0\r\n ) {\r\n <span\r\n class=\"sp-inline-icon sp-lock-icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M17 9h-1V7a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n </label>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n @if (folders && folders.length == 0) {\r\n <div class=\"sp-empty-state\">\r\n <span\r\n class=\"ellipsis-text designer\"\r\n [innerHTML]=\"t('media.media-selection.NOSUBFOLDERSTODISPLAY')\"\r\n ></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"sp-assets-panel\"\r\n [ngClass]=\"{ 'sp-assets-panel--full': isSearchMode }\"\r\n >\r\n <div class=\"sp-assets-grid\">\r\n <ng-container>\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n [imageArea]=\"true\"\r\n [view]=\"'thumbnail'\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n </ng-container>\r\n\r\n @for (asset of assetsInFolder; track asset) {\r\n @if (\r\n (type == \"image\" || type == \"imageMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"image\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n id=\"{{ asset.assetGuid }}\"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <img\r\n class=\"sp-asset-preview\"\r\n (error)=\"onAssetImageError($event)\"\r\n alt=\"image non disponible\"\r\n [src]=\"asset.assetUrlBig\"\r\n />\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-meta-row\">\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetMetadatas.width }} x\r\n {{ asset.assetMetadatas.height }}\r\n </p>\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"file\" || type == \"fileMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"file\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img\r\n [src]=\"images.textDocument\"\r\n alt=\"image non disponible\"\r\n />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"audio\" || type == \"all\") && asset.assetType == \"audio\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.speaker\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"video\" || type == \"all\") && asset.assetType == \"video\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.play\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<!-- ./CONTENT -->\r\n\r\n<!-- /ACTION -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-footer\">\r\n <div class=\"modal-side-bar-footer-line\"></div>\r\n <div class=\"modal-side-bar-footer-right-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"closeModal()\"\r\n [innerHTML]=\"t('products.skus.skus-detail.skus-prices.CLOSE')\"\r\n ></button>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./ACTION -->\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff}:host,:host *,:host *:before,:host *:after{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}:host{display:block;color:#4a4a4a}.sp-modal-content{padding-left:10px;background:#fff}.header-container{min-height:56px;display:flex;align-items:center;position:sticky;top:0;background-color:#fff;z-index:20}.sp-header-row{display:flex;gap:16px;padding:10px 0 12px;align-items:center}.sp-header-left{flex:0 0 25%;min-width:0}.sp-header-right{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.header-full-path-folder{display:flex;align-items:center;gap:8px;min-width:0}.sp-path-title{margin:0;font-size:18px;min-width:0}.sp-icon{width:16px;height:16px;display:block;fill:currentColor}.sp-icon-md{width:18px;height:18px}.sp-inline-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--btn-accept, #233b55);flex:0 0 auto}.sp-icon-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:4px;border-radius:6px;color:var(--btn-accept, #233b55);cursor:pointer}.sp-icon-button:hover{background:#233b5514}.sp-search-container{width:220px;min-width:220px}.sp-search-input{width:100%;height:38px;padding:8px 34px 8px 12px;border:1px solid #dde3ea;border-radius:var(--border-radius, 4px);background:#f5f7f8;outline:none;font-size:13px}.sp-search-input:focus{border-color:var(--btn-accept, #233b55);background:#fff}.sp-search-icon{position:absolute;right:10px;color:#6c757d;display:inline-flex;align-items:center;justify-content:center}.sp-body-row{display:flex;gap:16px;overflow:hidden}.sp-sidebar{flex:0 0 calc(25% - 8px);min-width:240px;margin-top:9px}.area-folder-container{background-color:#f5f7f8;border-radius:var(--border-radius, 4px);height:100%;overflow-y:auto;overflow-x:hidden;border:1px solid #e5eaef}.area-folder-path-folder{display:flex;padding:10px 12px;min-height:42px;color:var(--btn-accept, #233b55);border-bottom:1px solid #d7dce1;align-items:center;gap:8px}.sp-folder-current-name{font-size:16px;min-width:0}.area-folder-list{height:calc(90vh - 213px);overflow:auto;overflow-x:hidden}.area-folder-style{padding:10px 14px;display:flex;align-items:center;gap:10px;color:var(--btn-accept, #233b55);cursor:pointer;transition:background-color .2s ease,color .2s ease}.area-folder-style:hover{background-color:var(--btn-accept, #233b55);color:#fff}.area-folder-style:hover .sp-inline-icon,.area-folder-style:hover .sp-lock-icon{color:#fff}.sp-folder-name{font-size:15px;min-width:0;flex:1 1 auto}.sp-lock-icon{margin-left:5px}.sp-empty-state{display:flex;justify-content:center;padding:14px;text-align:center}.sp-assets-panel{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;height:calc(90vh - 163px)}.sp-assets-panel--full{width:100%}.sp-assets-grid{margin-top:10px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:20px}.sp-asset-item{width:140px;flex:0 0 140px}.assetsDivInModal{position:relative;background:#fff;display:inline-block;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;min-height:150px;padding:0}.sp-asset-preview{object-fit:contain;width:140px;height:100px;display:block;background:#fff}.imgForAudioEtc{width:140px;height:100px;display:flex;align-items:center;justify-content:center;background:#fff}.imgForAudioEtc img{max-width:100%;max-height:100%;object-fit:contain}.checkBoxSelectionInModal{right:8px;position:absolute;top:8px;z-index:2}.sp-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer}.sp-checkbox input{position:absolute;opacity:0;pointer-events:none}.sp-checkbox-ui{width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #c7d0da;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0f172a14}.sp-check-icon{width:14px;height:14px;fill:#fff;opacity:0}.sp-checkbox input:checked+.sp-checkbox-ui{background-color:var(--btn-accept, #233b55);border-color:var(--btn-accept, #233b55)}.sp-checkbox input:checked+.sp-checkbox-ui .sp-check-icon{opacity:1}.sp-checkbox input:disabled+.sp-checkbox-ui{background:#ddd;border-color:#ddd;cursor:not-allowed}.assetNameListingDisplay,.assetNameListingDisplayInModal{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-asset-name{margin-top:8px;margin-bottom:0;font-size:11px;font-weight:700;line-height:1.3}.sp-asset-meta-row{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;width:100%;padding-bottom:6px}.sp-asset-meta-text{margin:0;padding:0;font-size:10px;font-style:italic;color:#667085;line-height:1.2}.sp-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:18px;padding:0 6px;border-radius:999px;background:#1f2937;color:#fff;font-size:9px;font-weight:700;line-height:1;text-transform:uppercase}input{font-family:var(--font-family)!important}@media (max-width: 1100px){.sp-body-row{flex-direction:column}.sp-sidebar{min-width:100%;flex:1 1 auto}.sp-assets-panel{height:auto;max-height:calc(90vh - 220px)}.sp-header-left,.sp-header-right{flex:1 1 100%}.sp-header-row{flex-wrap:wrap}}.sp-pagination-wrapper{display:flex;align-items:center}:host ::ng-deep .sp-pagination-wrapper .pagination{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}:host ::ng-deep .sp-pagination-wrapper .page-item{display:inline-flex}:host ::ng-deep .sp-pagination-wrapper .page-item.disabled .page-link{opacity:.45;cursor:not-allowed;pointer-events:none}:host ::ng-deep .sp-pagination-wrapper .page-link{min-width:34px;height:34px;padding:0 10px;border:1px solid #d9e0e7;border-radius:6px;background:#fff;color:#233b55;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;transition:.2s ease}:host ::ng-deep .sp-pagination-wrapper .page-link:hover{background:#f4f7fa;border-color:#233b55}:host ::ng-deep .sp-pagination-wrapper .page-item.active .page-link{background:#233b55;border-color:#233b55;color:#fff}:host ::ng-deep .sp-pagination-wrapper .page-item:first-child .page-link,:host ::ng-deep .sp-pagination-wrapper .page-item:last-child .page-link{min-width:40px}::ng-deep .sp-tooltip-dark{--mdc-plain-tooltip-container-color: #000;--mdc-plain-tooltip-supporting-text-color: #fff}::ng-deep .sp-tooltip-dark .mat-mdc-tooltip-surface{background:#000!important;color:#fff!important;border-radius:6px!important;padding:8px 12px!important;font-size:13px!important;line-height:1.2!important;font-weight:600!important;box-shadow:0 4px 12px #0000004d!important;border:none!important;max-width:260px!important}\n"] }]
|
|
12153
|
+
args: [{ selector: 'app-solidpepper-modal-media-selection', standalone: true, encapsulation: ViewEncapsulation.Emulated, imports: [CommonModule, AssetsUploaderComponent, MatSelectModule, MatTooltipModule, MatCheckboxModule, FormsModule, ReactiveFormsModule, MatDialogModule], template: "<!-- /HEADER -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-header-style\">\r\n <div class=\"modal-side-bar-header-content\">\r\n <div>\r\n <h4 class=\"modal-side-bar-header-title\">\r\n {{ t(\"media.media-selection.SELECTASSETS\") }}\r\n </h4>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./HEADER -->\r\n\r\n<!-- /CONTENT -->\r\n<div class=\"modal-side-bar-content sp-modal-content\">\r\n <div class=\"sp-header-row header-container\">\r\n <div class=\"sp-header-left\">\r\n @if (!isSearchMode) {\r\n <div class=\"header-full-path-folder\">\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <button\r\n type=\"button\"\r\n class=\"sp-icon-button pointer\"\r\n (click)=\"returnBackFolderForMoveToAnotherFolder()\"\r\n aria-label=\"Retour\"\r\n >\r\n <svg\r\n class=\"sp-icon sp-icon-md\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M14.7 6.3a1 1 0 0 1 0 1.4L11.41 11H20a1 1 0 1 1 0 2h-8.59l3.3 3.3a1 1 0 1 1-1.42 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.41 0Z\"\r\n />\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n\r\n <h5 class=\"ellipsis-text designer sp-path-title\">\r\n <strong\r\n matTooltip=\"{{ pathFolder }}\"\r\n matTooltipPosition=\"below\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n >\r\n {{ pathFolder }}\r\n </strong>\r\n </h5>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"sp-header-right\">\r\n @if (uploadMode) {\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n }\r\n\r\n <div class=\"search-container sp-search-container\">\r\n <input\r\n class=\"search-content sp-search-input\"\r\n type=\"text\"\r\n [(ngModel)]=\"searchTermForDisplay\"\r\n placeholder=\"Rechercher...\"\r\n aria-label=\"Search\"\r\n id=\"searchBar\"\r\n #searchBar\r\n (keyup)=\"searchTerm$.next($event.target.value); checkSearchMode()\"\r\n />\r\n <span class=\"sp-search-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10.5 4a6.5 6.5 0 0 1 5.17 10.45l4.19 4.18a1 1 0 0 1-1.42 1.42l-4.18-4.19A6.5 6.5 0 1 1 10.5 4Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Z\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"sp-pagination-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToFirstPage()\"\r\n [disabled]=\"pagePagination <= 1\"\r\n >\r\n |<\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToPreviousPage()\"\r\n [disabled]=\"pagePagination <= 1\"\r\n >\r\n <\r\n </button>\r\n\r\n @for (page of visiblePages; track page) {\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n [class.sp-pagination-button--active]=\"page === pagePagination\"\r\n (click)=\"goToPage(page)\"\r\n >\r\n {{ page }}\r\n </button>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToNextPage()\"\r\n [disabled]=\"pagePagination >= totalPages\"\r\n >\r\n >\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-pagination-button\"\r\n (click)=\"goToLastPage()\"\r\n [disabled]=\"pagePagination >= totalPages\"\r\n >\r\n >|\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sp-body-row\">\r\n @if (!isSearchMode) {\r\n <div class=\"sp-sidebar\">\r\n <div class=\"area-folder-container\">\r\n <div class=\"area-folder-path-folder\">\r\n <span class=\"sp-inline-icon designer\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n @if (nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ nameParentOfSelectedFolderForMove }}</strong>\r\n </label>\r\n }\r\n\r\n @if (!nameParentOfSelectedFolderForMove) {\r\n <label class=\"ellipsis-text designer sp-folder-current-name\">\r\n <strong>{{ pathFolder }}</strong>\r\n </label>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-folder-add-button\"\r\n (click)=\"auth.triggerModal(modalAddFolder, viewContainerRef)\"\r\n aria-label=\"Ajouter un dossier\"\r\n >\r\n <svg\r\n class=\"sp-folder-add-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Zm12 5a1 1 0 0 0-1 1v1h-1a1 1 0 1 0 0 2h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2h-1v-1a1 1 0 0 0-1-1Z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"area-folder-list\">\r\n @for (folder of folders; track folder) {\r\n @if (\r\n folder &&\r\n folder.folderGuid != \"11111111-1111-1111-1111-111111111111\" &&\r\n folder.folderGuid != \"33333333-3333-3333-3333-333333333333\"\r\n ) {\r\n @if (\r\n folder.folderGuid != \"00000000-0000-0000-0000-000000000000\" ||\r\n (folder.folderGuid ==\r\n \"00000000-0000-0000-0000-000000000000\" &&\r\n rightsAccesModule?.[\"rights\"]?.[\"Media\"]?.[\r\n \"DamAssetsSelections\"\r\n ]?.[\"subModuleIsActive\"])\r\n ) {\r\n <div\r\n class=\"area-folder-style\"\r\n (click)=\"\r\n changeLevelOfFolderForMove(\r\n folder.folderGuid,\r\n folder.folderName\r\n )\r\n \"\r\n >\r\n <span class=\"sp-inline-icon\" aria-hidden=\"true\">\r\n <svg class=\"sp-icon sp-icon-md\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M3 6.75A2.75 2.75 0 0 1 5.75 4h4.04c.73 0 1.41.34 1.85.92l.62.83h6.99A2.75 2.75 0 0 1 22 8.5v8.75A2.75 2.75 0 0 1 19.25 20H5.75A2.75 2.75 0 0 1 3 17.25V6.75Z\"\r\n />\r\n </svg>\r\n </span>\r\n\r\n <label\r\n class=\"ellipsis-text pointer designer sp-folder-name\"\r\n >\r\n {{ folder.folderName }}\r\n\r\n @if (\r\n folder.folderShareTeam &&\r\n folder.folderShareTeam.length > 0\r\n ) {\r\n <span\r\n class=\"sp-inline-icon sp-lock-icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <svg class=\"sp-icon\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M17 9h-1V7a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Z\"\r\n />\r\n </svg>\r\n </span>\r\n }\r\n </label>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n @if (folders && folders.length == 0) {\r\n <div class=\"sp-empty-state\">\r\n <span\r\n class=\"ellipsis-text designer\"\r\n [innerHTML]=\"t('media.media-selection.NOSUBFOLDERSTODISPLAY')\"\r\n ></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"sp-assets-panel\"\r\n [ngClass]=\"{ 'sp-assets-panel--full': isSearchMode }\"\r\n >\r\n <div class=\"sp-assets-grid\">\r\n <ng-container>\r\n <app-assets-uploader\r\n [folderGuid]=\"guidActiveFolderOfSelectedFolderForMove\"\r\n [imageArea]=\"true\"\r\n [view]=\"'thumbnail'\"\r\n (allAssetsUpload)=\"refreshAssetsAfterUpload()\"\r\n ></app-assets-uploader>\r\n </ng-container>\r\n\r\n @for (asset of assetsInFolder; track asset) {\r\n @if (\r\n (type == \"image\" || type == \"imageMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"image\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n id=\"{{ asset.assetGuid }}\"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <img\r\n class=\"sp-asset-preview\"\r\n (error)=\"onAssetImageError($event)\"\r\n alt=\"image non disponible\"\r\n [src]=\"asset.assetUrlBig\"\r\n />\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplayInModal sp-asset-meta-row\">\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetMetadatas.width }} x\r\n {{ asset.assetMetadatas.height }}\r\n </p>\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"file\" || type == \"fileMultiLang\" || type == \"all\") &&\r\n asset.assetType == \"file\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img\r\n [src]=\"images.textDocument\"\r\n alt=\"image non disponible\"\r\n />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"audio\" || type == \"all\") && asset.assetType == \"audio\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.speaker\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (\r\n (type == \"video\" || type == \"all\") && asset.assetType == \"video\"\r\n ) {\r\n <div class=\"sp-asset-item\">\r\n <div\r\n class=\"assetsDivInModal pointer\"\r\n (mouseleave)=\"assetOnOver = ''\"\r\n matTooltip=\"{{ asset.assetName }}\"\r\n matTooltipPosition=\"above\"\r\n matTooltipClass=\"sp-tooltip-dark\"\r\n (mouseenter)=\"assetOnOver = asset.assetGuid\"\r\n >\r\n @if (\r\n assetOnOver == asset.assetGuid || assetsSelected.length > 0\r\n ) {\r\n <div class=\"checkBoxSelectionInModal\">\r\n <label class=\"sp-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n (click)=\"selectThisAsset(asset.assetGuid)\"\r\n [checked]=\"assetsSelected.indexOf(asset.assetGuid) > -1\"\r\n [disabled]=\"\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) >\r\n -1\r\n \"\r\n />\r\n <span class=\"sp-checkbox-ui\">\r\n <svg\r\n class=\"sp-check-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M9.55 16.6 5.4 12.45a1 1 0 1 1 1.4-1.4l2.75 2.74 7.64-7.64a1 1 0 0 1 1.41 1.41L10.96 16.6a1 1 0 0 1-1.41 0Z\"\r\n />\r\n </svg>\r\n </span>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div\r\n (click)=\"\r\n !(\r\n workflows &&\r\n assetsSelectedCopyWorkflows.indexOf(asset.assetGuid) > -1\r\n )\r\n ? selectThisAsset(asset.assetGuid)\r\n : ''\r\n \"\r\n >\r\n <div class=\"imgForAudioEtc\">\r\n <img [src]=\"images.play\" alt=\"image non disponible\" />\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-name\">\r\n {{ asset.assetName }}\r\n </div>\r\n\r\n <div class=\"assetNameListingDisplay sp-asset-meta-row\">\r\n @if (asset.assetSize >= 1000000) {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000000 | number: \"1.2-2\" }} mo\r\n </p>\r\n } @else {\r\n <p class=\"sp-asset-meta-text\">\r\n {{ asset.assetSize / 1000 | number: \"1.2-2\" }} ko\r\n </p>\r\n }\r\n @if (asset.assetFormat) {\r\n <span class=\"sp-badge\">\r\n {{ asset.assetFormat | uppercase }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<!-- ./CONTENT -->\r\n\r\n<!-- /ACTION -->\r\n@if (!designer) {\r\n <div class=\"modal-side-bar-footer\">\r\n <div class=\"modal-side-bar-footer-line\"></div>\r\n <div class=\"modal-side-bar-footer-right-placement\">\r\n <button\r\n type=\"button\"\r\n class=\"btn-denied\"\r\n (click)=\"closeModal()\"\r\n [innerHTML]=\"t('products.skus.skus-detail.skus-prices.CLOSE')\"\r\n ></button>\r\n </div>\r\n </div>\r\n}\r\n<!-- ./ACTION -->\r\n\r\n<ng-template #modalAddFolder>\r\n <div class=\"modal-header modalHeaderPadding\">\r\n <h5 class=\"modal-title\" id=\"exampleModalLongTitle\">\r\n {{ t(\"media.library.ADDFOLDER\") }}\r\n </h5>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"sp-close-button\"\r\n (click)=\"auth.closeAllModal()\"\r\n aria-label=\"Close\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body paddingModalBody sp-add-folder-modal-body\">\r\n <div class=\"sp-add-folder-field\">\r\n <label class=\"sp-add-folder-label\">\r\n {{ t(\"media.library.NAME\") }}\r\n </label>\r\n\r\n <input\r\n [(ngModel)]=\"newFolderInput\"\r\n (keyup.enter)=\"saveAndCloseAddFolderModal()\"\r\n class=\"sp-text-input\"\r\n autocomplete=\"off\"\r\n />\r\n </div>\r\n\r\n <span class=\"sp-form-helper\">\r\n {{ t(\"media.library.SHAREFOLDERADD\") }}\r\n </span>\r\n\r\n <div class=\"modal-button-placement sp-add-folder-actions\">\r\n <button type=\"button\" class=\"btn-denied\" (click)=\"auth.closeAllModal()\">\r\n {{ t(\"media.library.CANCEL\") }}\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"btn-access\"\r\n (click)=\"saveAndCloseAddFolderModal()\"\r\n >\r\n {{ t(\"media.library.SAVE\") }}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":root,:host{--font-family: \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif;--btn-accept: #233b55;--btn-accept-hover: #2b4968;--btn-trash: #9a3f3e;--btn-trash-hover: #9b4f4d;--btn-denied: #fff;--btn-denied-hover: #f5f5f5;--btn-denied-border: #eaeaea;--btn-disabled: #818181;--btn-disabled-color: #575757;--link-label: #4a90e2;--required-fields: red;--border-radius: 4px;--time-btn-transition: .3s;--bg-sidebar: #233b55;--bg-sidebar-active: rgba(255, 255, 255, .1);--color-sidebar: #fff;--text-color: #4a4a4a}:host,:host *,:host *:before,:host *:after,:root{font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);box-sizing:border-box}svg *{font-family:unset}.pointer{cursor:pointer}.designer{font-family:var(--font-family)}.red{color:var(--required-fields, red)}.ellipsis-text,.crop,.cropInModal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-access{border:1px solid var(--btn-accept, #233b55);background:var(--btn-accept, #233b55);color:#fff;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-access:hover:not(:disabled){background:var(--btn-accept-hover, #2b4968);border-color:var(--btn-accept-hover, #2b4968)}.btn-access:disabled{opacity:.6;cursor:not-allowed;background:var(--btn-disabled, #818181);border-color:var(--btn-disabled, #818181);color:var(--btn-disabled-color, #575757)}.btn-denied{border:1px solid var(--btn-denied-border, #eaeaea);background:var(--btn-denied, #fff);color:#4a4a4a;border-radius:var(--border-radius, 4px);padding:6px 14px;font-size:12px;transition:var(--time-btn-transition, .3s) ease-in-out;cursor:pointer}.btn-denied:hover{background:var(--btn-denied-hover, #f5f5f5)}.btn-trash{border:none;background:transparent;color:var(--btn-trash, #9a3f3e);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.btn-trash:hover{color:var(--btn-trash-hover, #9b4f4d)}.modal-side-bar-header-style{background:#293133;color:#fff;padding:12px 16px;border-top-left-radius:var(--border-radius, 4px);border-top-right-radius:var(--border-radius, 4px)}.modal-side-bar-header-content{display:flex;align-items:center;justify-content:space-between}.modal-side-bar-header-title{margin:0;font-size:16px;font-weight:700}.modal-side-bar-footer{background:#fff;padding:12px 16px;border-bottom-left-radius:var(--border-radius, 4px);border-bottom-right-radius:var(--border-radius, 4px)}.modal-side-bar-footer-line{height:1px;background:#eaeaea;margin-bottom:12px}.modal-side-bar-footer-right-placement{display:flex;justify-content:flex-end;gap:8px}.modalHeaderPadding{padding:8px 16px}.paddingModalBody{padding:16px}.modal-button-placement{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-margin-bottom-element{margin-bottom:16px}.modal-label{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600}.div_forclick,.input-style{width:100%}.file-upload{position:relative}.file-upload input[type=file]{display:none}.box-placeholder,.my-drop-zone{border:2px dashed #ddd;background:#fafafa;color:#444;border-radius:var(--border-radius, 4px)}.search-container{position:relative;display:flex;align-items:center;margin-right:12px}.search-content{width:220px;padding-right:30px}.search-logo{position:absolute;right:10px;color:#6c757d}.queueDivCss{max-height:180px;overflow:auto;margin-top:12px}:host ::-webkit-scrollbar{width:8px;background-color:#fff}:host ::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #00000026;background-color:#fff}:host ::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #00000026;background-color:#d3d3d3}::ng-deep .modal{position:fixed;inset:0;z-index:1055;display:flex!important;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:24px}::ng-deep .modal.show{display:flex!important}::ng-deep .modal-dialog{position:relative;width:100%;max-width:860px;margin:0 auto;pointer-events:none}::ng-deep .modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 20px 50px #00000059;overflow:hidden}::ng-deep .modal-backdrop{position:fixed;inset:0;z-index:1050;background:#00000073}::ng-deep .modal-backdrop.show{opacity:1}::ng-deep .modal-header{display:flex;align-items:center;justify-content:space-between;background:#263238;color:#fff;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}::ng-deep .modal-title{margin:0;font-size:16px;font-weight:700;line-height:1.2}::ng-deep .modal-body{position:relative;padding:16px;background:#fff}::ng-deep .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e6e6e6;background:#fff}::ng-deep .modal-dialog-centered{min-height:calc(100% - 48px);display:flex;align-items:center}::ng-deep .modal-dialog-scrollable .modal-content{max-height:calc(100vh - 48px)}::ng-deep .modal-dialog-scrollable .modal-body{overflow-y:auto}::ng-deep body.modal-open{overflow:hidden}::ng-deep .cdk-overlay-container{z-index:2000!important}::ng-deep .cdk-overlay-pane{z-index:2001!important}::ng-deep .mat-mdc-select-panel{background:#fff!important;border:1px solid #d8dee5!important;border-radius:4px!important;box-shadow:0 10px 24px #0000002e!important;padding:4px 0!important}::ng-deep .mat-mdc-option{min-height:38px!important;padding:0 12px!important;font-size:13px!important;display:flex!important;align-items:center!important}::ng-deep .mat-mdc-option:hover{background:#f5f7fa!important}::ng-deep .mat-mdc-option.mdc-list-item--selected{background:#eef3f8!important}::ng-deep .sp-dialog-backdrop{background:#00000073}::ng-deep .sp-dialog-panel .mat-mdc-dialog-container{padding:0!important}::ng-deep .sp-dialog-panel .mat-mdc-dialog-surface{padding:0!important;background:#fff!important;border-radius:6px!important;box-shadow:0 20px 50px #00000059!important;overflow:hidden!important}::ng-deep .sp-dialog-panel{display:block!important}:host{display:block;color:#4a4a4a}.sp-modal-content{padding-inline:10px;background:#fff}.header-container{min-height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:20}.sp-header-row{display:flex;gap:16px;padding:10px 0 12px;align-items:center}.sp-header-left{flex:0 0 25%;min-width:0}.sp-header-right{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.header-full-path-folder{display:flex;align-items:center;gap:8px;min-width:0}.sp-path-title{margin:0;font-size:18px;min-width:0;color:var(--text-color, #4a4a4a)}.sp-icon{width:16px;height:16px;display:block;fill:currentColor}.sp-icon-md{width:18px;height:18px}.sp-inline-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--btn-accept, #233b55);flex:0 0 auto}.sp-icon-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:4px;border-radius:6px;color:var(--btn-accept, #233b55);cursor:pointer}.sp-icon-button:hover{background:#233b5514}.sp-search-container{width:220px;min-width:220px}.sp-search-input{width:100%;height:38px;padding:8px 34px 8px 12px;border:1px solid #dde3ea;border-radius:var(--border-radius, 4px);background:#f5f7f8;outline:none;font-size:13px}.sp-search-input:focus{border-color:var(--btn-accept, #233b55);background:#fff}.sp-search-icon{position:absolute;right:10px;color:#6c757d;display:inline-flex;align-items:center;justify-content:center}.sp-pagination-wrapper{display:flex;align-items:center}.sp-body-row{display:flex;gap:16px;overflow:hidden}.sp-sidebar{flex:0 0 calc(25% - 8px);min-width:240px;margin-top:9px}.area-folder-container{background-color:#f5f7f8;border-radius:var(--border-radius, 4px);height:100%;overflow-y:auto;overflow-x:hidden;border:1px solid #e5eaef}.area-folder-path-folder{display:flex;padding:10px 12px;min-height:42px;color:var(--btn-accept, #233b55);border-bottom:1px solid #d7dce1;align-items:center;gap:8px}.sp-folder-current-name{font-size:16px;min-width:0}.area-folder-list{height:calc(90vh - 213px);overflow:auto;overflow-x:hidden}.area-folder-style{padding:10px 14px;display:flex;align-items:center;gap:10px;color:var(--btn-accept, #233b55);cursor:pointer;transition:background-color .2s ease,color .2s ease}.area-folder-style:hover{background-color:var(--btn-accept, #233b55);color:#fff}.area-folder-style:hover .sp-inline-icon,.area-folder-style:hover .sp-lock-icon{color:#fff}.sp-folder-name{font-size:15px;min-width:0;flex:1 1 auto;color:var(--text-color, #4a4a4a)}.sp-lock-icon{margin-left:5px}.sp-empty-state{display:flex;justify-content:center;padding:14px;text-align:center}.sp-assets-panel{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;height:calc(90vh - 163px)}.sp-assets-panel--full{width:100%}.sp-assets-grid{margin-top:10px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:20px}.sp-asset-item{display:block!important;width:140px;flex:0 0 140px}div.sp-asset-item:nth-of-type(1){display:block!important}.sp-assets-grid>div.sp-asset-item:nth-of-type(1){display:block!important}.sp-assets-grid>div.sp-asset-item{display:block!important}:host .sp-assets-grid>div.sp-asset-item:nth-of-type(1){display:block!important}.assetsDivInModal{position:relative;background:#fff;display:inline-block;justify-content:center;overflow:hidden;align-items:center;box-shadow:0 2px 8px #0f172a14;border:1px solid #edf1f5;border-radius:8px;width:140px;min-height:150px;padding:0}.sp-asset-preview{object-fit:contain;width:140px;height:100px;display:block;background:#fff}.imgForAudioEtc{width:140px;height:100px;display:flex;align-items:center;justify-content:center;background:#fff}.imgForAudioEtc img{max-width:100%;max-height:100%;object-fit:contain}.checkBoxSelectionInModal{right:8px;position:absolute;top:8px;z-index:2}.sp-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer}.sp-checkbox input{position:absolute;opacity:0;pointer-events:none}.sp-checkbox-ui{width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #c7d0da;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0f172a14}.sp-check-icon{width:14px;height:14px;fill:#fff;opacity:0}.sp-checkbox input:checked+.sp-checkbox-ui{background-color:var(--btn-accept, #233b55);border-color:var(--btn-accept, #233b55)}.sp-checkbox input:checked+.sp-checkbox-ui .sp-check-icon{opacity:1}.sp-checkbox input:disabled+.sp-checkbox-ui{background:#ddd;border-color:#ddd;cursor:not-allowed}.assetNameListingDisplay,.assetNameListingDisplayInModal{font-size:10px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-asset-name{margin-top:8px;margin-bottom:1px;font-size:11px;font-weight:700;line-height:1.3;color:var(--text-color, #4a4a4a)}.sp-asset-meta-row{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;width:100%;padding-bottom:5px}.sp-asset-meta-text{margin:0;padding:0;font-size:10px;font-style:italic;color:#667085;line-height:1.2}.sp-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:18px;padding:0 6px;border-radius:999px;background:#1f2937;color:#fff;font-size:9px;font-weight:700;line-height:1;text-transform:uppercase}input{font-family:var(--font-family)!important}@media (max-width: 1100px){.sp-body-row{flex-direction:column}.sp-sidebar{min-width:100%;flex:1 1 auto}.sp-assets-panel{height:auto;max-height:calc(90vh - 220px)}.sp-header-left,.sp-header-right{flex:1 1 100%}.sp-header-row{flex-wrap:wrap}}.sp-pagination-wrapper{display:flex;align-items:center;gap:6px}.sp-pagination-button{min-width:34px;height:34px;padding:0 10px;border:1px solid #d9e0e7;border-radius:6px;background:#fff;color:#233b55;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;transition:.2s ease}.sp-pagination-button:hover:not(:disabled){background:#f4f7fa;border-color:#233b55}.sp-pagination-button--active{background:var(--btn-accept, #233b55);border-color:var(--btn-accept, #233b55);color:#fff}.sp-pagination-button:disabled{opacity:.45;cursor:not-allowed}::ng-deep .sp-tooltip-dark{--mdc-plain-tooltip-container-color: #000;--mdc-plain-tooltip-supporting-text-color: #fff}::ng-deep .sp-tooltip-dark .mat-mdc-tooltip-surface{background:#000!important;color:#fff!important;border-radius:6px!important;padding:8px 12px!important;font-size:13px!important;line-height:1.2!important;font-weight:600!important;box-shadow:0 4px 12px #0000004d!important;border:none!important;max-width:260px!important}.sp-folder-add-button{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent;color:var(--btn-accept, #233b55);cursor:pointer;border-radius:6px;padding:0;flex:0 0 auto;transition:background .2s ease,color .2s ease}.sp-folder-add-button:hover{background:#233b5514}.sp-folder-add-button:active{background:#233b5526}.sp-folder-add-icon{width:18px;height:18px;display:block;fill:currentColor}.sp-form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.sp-form-label-col{flex:0 0 90px;display:flex;align-items:center;font-size:13px;color:var(--text-color, #4a4a4a)}.sp-form-field-col{flex:1 1 auto}.sp-text-input{width:100%;height:38px;padding:8px 12px;border:1px solid #d8dee5;border-radius:var(--border-radius, 4px);background:#fff;color:var(--text-color, #4a4a4a);outline:none;font-size:13px;font-family:var(--font-family, \"Avenir Next\", \"Helvetica Neue\", Arial, sans-serif);transition:border-color .2s ease,box-shadow .2s ease}.sp-text-input::placeholder{color:#98a2b3}.sp-text-input:focus{border-color:var(--btn-accept, #233b55);box-shadow:0 0 0 2px #233b5514}.sp-form-helper{display:block;font-style:italic;padding-top:16px;font-size:12px;color:var(--text-color, #4a4a4a);opacity:.7}.modal-button-placement{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.sp-close-button{border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--text-color, #4a4a4a);line-height:1;padding:4px 8px}.sp-close-button:hover{color:var(--btn-accept, #233b55)}.sp-add-folder-modal-body{padding:16px}.sp-add-folder-field{display:flex;align-items:center;gap:14px;margin-bottom:10px}.sp-add-folder-label{flex:0 0 42px;font-size:13px;color:var(--text-color, #4a4a4a)}.sp-add-folder-field .sp-text-input{flex:1 1 auto;min-width:0}.sp-add-folder-actions{margin-top:22px}.sp-form-helper{display:block;font-style:italic;font-size:12px;color:var(--text-color, #4a4a4a);opacity:.75;margin-top:6px}\n"] }]
|
|
12080
12154
|
}], ctorParameters: () => [{ type: i1.DamAssetsService }, { type: i1.SearchService }, { type: i1.MediaSelectionService }, { type: i1.SettingsService }, { type: i1.WorkflowsDesksService }, { type: i1.SuppliersService }, { type: i1.AccountsService }, { type: i1.FrameworkagreementsService }, { type: i1.websocketService }, { type: i0.ChangeDetectorRef }, { type: i1.RightsService }, { type: i1.SettingsService }, { type: i1.LoginService }, { type: i1.AuthService }], propDecorators: { hasBeenSaved: [{
|
|
12081
12155
|
type: Output
|
|
12082
12156
|
}], refreshData: [{
|