@lucca-front/ng 19.3.0-rc.3 → 19.3.0-rc.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.
- package/core-select/input/select-input.component.d.ts +3 -1
- package/date2/abstract-date-component.d.ts +1 -1
- package/date2/date-input/date-input.component.d.ts +1 -0
- package/date2/date-range-input/date-range-input.component.d.ts +1 -0
- package/fesm2022/lucca-front-ng-core-select-user.mjs +1 -1
- package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +17 -2
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date2.mjs +23 -14
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-divider.mjs +2 -2
- package/fesm2022/lucca-front-ng-divider.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-fancy-box.mjs +2 -2
- package/fesm2022/lucca-front-ng-fancy-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs +343 -0
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-filter-pills.mjs +5 -4
- package/fesm2022/lucca-front-ng-filter-pills.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs +13 -5
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +9 -4
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-icon.mjs +2 -2
- package/fesm2022/lucca-front-ng-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-inline-message.mjs +14 -6
- package/fesm2022/lucca-front-ng-inline-message.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-link.mjs +2 -2
- package/fesm2022/lucca-front-ng-multi-select.mjs +3 -3
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-numeric-badge.mjs +2 -2
- package/fesm2022/lucca-front-ng-numeric-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popup-employee.mjs +2 -2
- package/fesm2022/lucca-front-ng-popup-employee.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs +2 -2
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +2 -2
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-statusBadge.mjs +2 -2
- package/fesm2022/lucca-front-ng-statusBadge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-title.mjs +26 -17
- package/fesm2022/lucca-front-ng-title.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +2 -2
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +2 -2
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/file-upload/base-file-upload/base-file-upload.component.d.ts +24 -0
- package/file-upload/file-dropzone/file-dropzone.component.d.ts +6 -0
- package/file-upload/file-entry/file-entry.component.d.ts +35 -0
- package/file-upload/file-upload-entry.d.ts +6 -0
- package/file-upload/file-upload.translate.d.ts +34 -0
- package/file-upload/formatter.d.ts +3 -0
- package/file-upload/index.d.ts +5 -0
- package/file-upload/multi/multi-file-upload.component.d.ts +6 -0
- package/file-upload/public-api.d.ts +5 -0
- package/file-upload/single/single-file-upload.component.d.ts +13 -0
- package/file-upload/translations.d.ts +242 -0
- package/filter-pills/core/filter-pill-input-component.d.ts +1 -0
- package/filter-pills/filter-pill/filter-pill.component.d.ts +1 -0
- package/form-field/form-field.component.d.ts +5 -1
- package/formly/style/_components.scss +1 -0
- package/forms/checkbox-input/checkbox-input.component.d.ts +1 -0
- package/forms/multilanguage-input/multilanguage-input.component.d.ts +1 -0
- package/inline-message/inline-message.component.d.ts +3 -1
- package/package.json +34 -30
- package/schematics/lib/angular-component-ast.js +18 -7
- package/schematics/lu-select/migration.js +3 -3
- package/schematics/lu-select/util.js +1 -1
- package/src/components/_dropdown.scss +0 -0
- package/src/components/_input.scss +9 -11
- package/src/components/_picker.scss +1 -1
- package/src/components/_popup.scss +37 -35
- package/src/components/cdk/_dragDrop.scss +6 -0
- package/src/components/cdk/_overlay.scss +6 -12
- package/src/definitions/option/_option-item.scss +2 -3
- package/src/definitions/select/_select-input.scss +1 -0
- package/src/definitions/user/user-picture.scss +1 -0
- package/title/README.md +40 -46
- package/title/title-translate.service.d.ts +2 -1
- package/title/title.strategy.d.ts +15 -7
|
@@ -0,0 +1,343 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, LOCALE_ID, output, input, computed, booleanAttribute, Directive, Component, ViewEncapsulation } from '@angular/core';
|
|
3
|
+
import { getIntl, IntlParamsPipe } from '@lucca-front/ng/core';
|
|
4
|
+
import { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';
|
|
5
|
+
import { NgClass } from '@angular/common';
|
|
6
|
+
import { outputFromObservable } from '@angular/core/rxjs-interop';
|
|
7
|
+
import * as i2 from '@angular/forms';
|
|
8
|
+
import { FormsModule } from '@angular/forms';
|
|
9
|
+
import { ButtonComponent } from '@lucca-front/ng/button';
|
|
10
|
+
import { DividerComponent } from '@lucca-front/ng/divider';
|
|
11
|
+
import { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';
|
|
12
|
+
import { TextInputComponent } from '@lucca-front/ng/forms';
|
|
13
|
+
import { IconComponent } from '@lucca-front/ng/icon';
|
|
14
|
+
import { InlineMessageComponent } from '@lucca-front/ng/inline-message';
|
|
15
|
+
import * as i1 from '@lucca-front/ng/tooltip';
|
|
16
|
+
import { LuTooltipModule } from '@lucca-front/ng/tooltip';
|
|
17
|
+
import { Subject } from 'rxjs';
|
|
18
|
+
|
|
19
|
+
const Translations = {
|
|
20
|
+
en: {
|
|
21
|
+
acceptedFormat: { one: 'Accepted format:', other: 'Accepted formats:' },
|
|
22
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
23
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
24
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
25
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
26
|
+
all: 'all',
|
|
27
|
+
file: '{{fileTypeLastPart}} file',
|
|
28
|
+
download: 'Download',
|
|
29
|
+
downloadFile: 'Download file “{{fileName}}”',
|
|
30
|
+
delete: 'Delete',
|
|
31
|
+
deleteFile: 'Delete file “{{fileName}}”',
|
|
32
|
+
password: 'Password',
|
|
33
|
+
confirmPassword: 'Password',
|
|
34
|
+
},
|
|
35
|
+
de: {
|
|
36
|
+
acceptedFormat: { one: 'Accepted format:', other: 'Accepted formats:' },
|
|
37
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
38
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
39
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
40
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
41
|
+
all: 'alle',
|
|
42
|
+
file: 'alle',
|
|
43
|
+
download: 'Download',
|
|
44
|
+
downloadFile: 'Download',
|
|
45
|
+
delete: 'Löschen',
|
|
46
|
+
deleteFile: 'Löschen',
|
|
47
|
+
password: 'Passwort',
|
|
48
|
+
confirmPassword: 'Passwort',
|
|
49
|
+
},
|
|
50
|
+
fr: {
|
|
51
|
+
acceptedFormat: { one: 'Format accepté :', other: 'Formats acceptés :' },
|
|
52
|
+
selectFile: { one: 'Sélectionner un fichier', other: 'Sélectionner des fichiers' },
|
|
53
|
+
dropOrClick: { one: 'Déposez le fichier ici ou <span>cliquez pour le sélectionner</span>.', other: 'Déposez les fichiers ici ou <span>cliquez pour les sélectionner</span>.' },
|
|
54
|
+
maxWeight: { one: 'Poids maximum : {{maxSizeDisplay}}. ', other: 'Poids maximum pour un fichier : {{maxSizeDisplay}}. ' },
|
|
55
|
+
fileUploadedListed: { one: 'Le fichier déjà déposé est détaillé après.', other: 'Les fichiers déjà déposés sont détaillés après.' },
|
|
56
|
+
all: 'tous',
|
|
57
|
+
file: 'Fichier {{fileTypeLastPart}}',
|
|
58
|
+
download: 'Télécharger',
|
|
59
|
+
downloadFile: 'Télécharger le fichier « {{fileName}} »',
|
|
60
|
+
delete: 'Supprimer',
|
|
61
|
+
deleteFile: 'Supprimer le fichier « {{fileName}} »',
|
|
62
|
+
password: 'Mot de passe',
|
|
63
|
+
confirmPassword: 'Valider le mot de passe',
|
|
64
|
+
},
|
|
65
|
+
it: {
|
|
66
|
+
acceptedFormat: { one: 'Accepted format:', other: 'Accepted formats:' },
|
|
67
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
68
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
69
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
70
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
71
|
+
all: 'tutti',
|
|
72
|
+
file: 'tutti',
|
|
73
|
+
download: 'Scaricare',
|
|
74
|
+
downloadFile: 'Scaricare',
|
|
75
|
+
delete: 'Eliminare',
|
|
76
|
+
deleteFile: 'Eliminare',
|
|
77
|
+
password: 'Password',
|
|
78
|
+
confirmPassword: 'Confermare la password',
|
|
79
|
+
},
|
|
80
|
+
nl: {
|
|
81
|
+
acceptedFormat: { one: 'Accepted format:', other: 'Accepted formats:' },
|
|
82
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
83
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
84
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
85
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
86
|
+
all: 'alle',
|
|
87
|
+
file: 'alle',
|
|
88
|
+
download: 'Downloaden',
|
|
89
|
+
downloadFile: 'Downloaden',
|
|
90
|
+
delete: 'Verwijderen',
|
|
91
|
+
deleteFile: 'Verwijderen',
|
|
92
|
+
password: 'Wachtwoord',
|
|
93
|
+
confirmPassword: 'Wachtwoord valideren',
|
|
94
|
+
},
|
|
95
|
+
'nl-BE': {
|
|
96
|
+
acceptedFormat: { one: 'Accepted format:', other: 'Accepted formats:' },
|
|
97
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
98
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
99
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
100
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
101
|
+
all: 'alle',
|
|
102
|
+
file: 'alle',
|
|
103
|
+
download: 'Downloaden',
|
|
104
|
+
downloadFile: 'Downloaden',
|
|
105
|
+
delete: 'Verwijderen',
|
|
106
|
+
deleteFile: 'Verwijderen',
|
|
107
|
+
password: 'Wachtwoord',
|
|
108
|
+
confirmPassword: 'Wachtwoord valideren',
|
|
109
|
+
},
|
|
110
|
+
es: {
|
|
111
|
+
acceptedFormat: { one: 'Accepted format:', other: 'Accepted formats:' },
|
|
112
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
113
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
114
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
115
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
116
|
+
all: 'todos',
|
|
117
|
+
file: 'todos',
|
|
118
|
+
download: 'Descargar',
|
|
119
|
+
downloadFile: 'Descargar',
|
|
120
|
+
delete: 'Eliminar',
|
|
121
|
+
deleteFile: 'Eliminar',
|
|
122
|
+
password: 'Contraseña',
|
|
123
|
+
confirmPassword: 'Contraseña',
|
|
124
|
+
},
|
|
125
|
+
pt: {
|
|
126
|
+
acceptedFormat: { one: 'Formato aceite :', other: 'Formatos aceites :' },
|
|
127
|
+
selectFile: { one: 'Select file', other: 'Select files' },
|
|
128
|
+
dropOrClick: { one: 'Drop file here or <span>click to select</span>.', other: 'Drop files here or <span>click to select</span>.' },
|
|
129
|
+
maxWeight: { one: 'Maximum size: {{maxSizeDisplay}}. ', other: 'Maximum size for a file: {{maxSizeDisplay}}. ' },
|
|
130
|
+
fileUploadedListed: { one: 'File already uploaded is detailed below.', other: 'Files already uploaded are detailed below.' },
|
|
131
|
+
all: 'todos',
|
|
132
|
+
file: 'Ficheiro {{fileTypeLastPart}}',
|
|
133
|
+
download: 'Descarregar',
|
|
134
|
+
downloadFile: 'Descarregar o ficheiro " {{fileName}} ',
|
|
135
|
+
delete: 'Eliminar',
|
|
136
|
+
deleteFile: 'Eliminar o ficheiro " {{fileName}} ',
|
|
137
|
+
password: 'Palavra-passe',
|
|
138
|
+
confirmPassword: 'Confirmar a palavra-passe',
|
|
139
|
+
},
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
const LU_FILE_UPLOAD_TRANSLATIONS = new InjectionToken('LuFileUploadTranslations', {
|
|
143
|
+
factory: () => luFileUploadTranslations,
|
|
144
|
+
});
|
|
145
|
+
const luFileUploadTranslations = Translations;
|
|
146
|
+
|
|
147
|
+
const KILO_BYTE = 1000;
|
|
148
|
+
const MEGA_BYTE = KILO_BYTE * 1000;
|
|
149
|
+
function formatSize(locale, size) {
|
|
150
|
+
let unit = 'byte';
|
|
151
|
+
let value = size;
|
|
152
|
+
if (size >= MEGA_BYTE) {
|
|
153
|
+
unit = 'megabyte';
|
|
154
|
+
value /= MEGA_BYTE;
|
|
155
|
+
}
|
|
156
|
+
else if (size >= KILO_BYTE) {
|
|
157
|
+
unit = 'kilobyte';
|
|
158
|
+
value /= KILO_BYTE;
|
|
159
|
+
}
|
|
160
|
+
const weightFormatter = Intl.NumberFormat(locale, {
|
|
161
|
+
notation: 'compact',
|
|
162
|
+
style: 'unit',
|
|
163
|
+
unit: unit,
|
|
164
|
+
unitDisplay: 'narrow',
|
|
165
|
+
});
|
|
166
|
+
return weightFormatter.format(value);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
let nextId = 0;
|
|
170
|
+
class BaseFileUploadComponent {
|
|
171
|
+
constructor() {
|
|
172
|
+
this.locale = inject(LOCALE_ID);
|
|
173
|
+
this.idSuffix = nextId++;
|
|
174
|
+
this.droppable = false;
|
|
175
|
+
this.intl = getIntl(LU_FILE_UPLOAD_TRANSLATIONS);
|
|
176
|
+
this.filePicked = output();
|
|
177
|
+
this.accept = input([
|
|
178
|
+
{
|
|
179
|
+
format: '*',
|
|
180
|
+
name: this.intl.all,
|
|
181
|
+
},
|
|
182
|
+
]);
|
|
183
|
+
this.acceptNames = computed(() => this.accept()
|
|
184
|
+
.filter((e) => e.name)
|
|
185
|
+
.map((e) => e.name));
|
|
186
|
+
this.acceptAttribute = computed(() => this.accept().map((e) => e.format));
|
|
187
|
+
this.acceptAll = computed(() => {
|
|
188
|
+
return this.acceptAttribute().some((str) => str.includes('*'));
|
|
189
|
+
});
|
|
190
|
+
this.fileMaxSize = input(80 * MEGA_BYTE);
|
|
191
|
+
this.maxSizeDisplay = computed(() => formatSize(this.locale, this.fileMaxSize()));
|
|
192
|
+
this.size = input(null);
|
|
193
|
+
this.password = input(false, { transform: booleanAttribute });
|
|
194
|
+
this.illustration = input('paper');
|
|
195
|
+
this.illustrationUrl = computed(() => {
|
|
196
|
+
if (this.illustration() === 'picture') {
|
|
197
|
+
return 'https://cdn.lucca.fr/transverse/prisme/visuals/empty-states/icons/iconPictureAction.svg';
|
|
198
|
+
}
|
|
199
|
+
else {
|
|
200
|
+
return 'https://cdn.lucca.fr/transverse/prisme/visuals/empty-states/icons/iconPaperAction.svg';
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
filesChange(event) {
|
|
205
|
+
const host = event.target;
|
|
206
|
+
this.droppable = false;
|
|
207
|
+
for (const file of Array.from(host.files)) {
|
|
208
|
+
this.filePicked.emit(file);
|
|
209
|
+
}
|
|
210
|
+
host.value = null;
|
|
211
|
+
}
|
|
212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
213
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: BaseFileUploadComponent, isStandalone: true, inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, fileMaxSize: { classPropertyName: "fileMaxSize", publicName: "fileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filePicked: "filePicked" }, ngImport: i0 }); }
|
|
214
|
+
}
|
|
215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFileUploadComponent, decorators: [{
|
|
216
|
+
type: Directive
|
|
217
|
+
}] });
|
|
218
|
+
|
|
219
|
+
class FileDropzoneComponent extends BaseFileUploadComponent {
|
|
220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FileDropzoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FileDropzoneComponent, isStandalone: true, selector: "lu-file-dropzone", usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload mod-dropzone\" [class.is-droppable]=\"droppable\" (dragenter)=\"droppable = true\" (dragleave)=\"droppable = false\">\n\t<div class=\"fileUpload-status\" [innerHtml]=\"illustrationUrl() | luSafeExternalSvg\"></div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t@if (acceptNames().length) {\n\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t@if (acceptNames().length > 1 || acceptAll()) { {{ intl.acceptedFormat.other }} } @else { {{ intl.acceptedFormat.one }} } {{\n\t\t\tacceptNames().join(', ') }}.\n\t\t</span>\n\t\t} @if (fileMaxSize()) {\n\t\t<span class=\"fileUpload-instruction-size\">{{ intl.maxWeight.other | intlParams: {maxSizeDisplay: maxSizeDisplay()} }}</span>\n\t\t}\n\t</div>\n</div>\n", styles: [".fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--commons-borderRadius-L);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--palettes-neutral-800);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--commons-borderRadius-M);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;width:100%;height:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--sizes-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--sizes-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-instruction-filename{display:block;font-weight:600;color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
222
|
+
}
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FileDropzoneComponent, decorators: [{
|
|
224
|
+
type: Component,
|
|
225
|
+
args: [{ selector: 'lu-file-dropzone', standalone: true, encapsulation: ViewEncapsulation.None, imports: [LuSafeExternalSvgPipe, IntlParamsPipe], template: "<div class=\"fileUpload mod-dropzone\" [class.is-droppable]=\"droppable\" (dragenter)=\"droppable = true\" (dragleave)=\"droppable = false\">\n\t<div class=\"fileUpload-status\" [innerHtml]=\"illustrationUrl() | luSafeExternalSvg\"></div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t@if (acceptNames().length) {\n\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t@if (acceptNames().length > 1 || acceptAll()) { {{ intl.acceptedFormat.other }} } @else { {{ intl.acceptedFormat.one }} } {{\n\t\t\tacceptNames().join(', ') }}.\n\t\t</span>\n\t\t} @if (fileMaxSize()) {\n\t\t<span class=\"fileUpload-instruction-size\">{{ intl.maxWeight.other | intlParams: {maxSizeDisplay: maxSizeDisplay()} }}</span>\n\t\t}\n\t</div>\n</div>\n", styles: [".fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--commons-borderRadius-L);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--palettes-neutral-800);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--commons-borderRadius-M);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;width:100%;height:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--sizes-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--sizes-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-instruction-filename{display:block;font-weight:600;color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}\n"] }]
|
|
226
|
+
}] });
|
|
227
|
+
|
|
228
|
+
class FileEntryComponent {
|
|
229
|
+
constructor() {
|
|
230
|
+
this.#locale = inject(LOCALE_ID);
|
|
231
|
+
this.intl = getIntl(LU_FILE_UPLOAD_TRANSLATIONS);
|
|
232
|
+
this.state = input(null);
|
|
233
|
+
this.displayFileName = input(false, { transform: booleanAttribute });
|
|
234
|
+
this.inlineMessageError = input(null);
|
|
235
|
+
this.entry = input.required();
|
|
236
|
+
this.size = input(null);
|
|
237
|
+
this.iconOverride = input('');
|
|
238
|
+
this.downloadURL = input('');
|
|
239
|
+
this.password = input('');
|
|
240
|
+
this.passwordChange$ = new Subject();
|
|
241
|
+
this.passwordChange = outputFromObservable(this.passwordChange$);
|
|
242
|
+
this.media = input(false, { transform: booleanAttribute });
|
|
243
|
+
this.deleteFile$ = new Subject();
|
|
244
|
+
this.deleteFile = outputFromObservable(this.deleteFile$);
|
|
245
|
+
this.fileName = computed(() => this.entry().name);
|
|
246
|
+
this.fileType = computed(() => this.entry().type);
|
|
247
|
+
this.fileSize = computed(() => this.entry().size);
|
|
248
|
+
this.fileSizeDisplay = computed(() => formatSize(this.#locale, this.fileSize()));
|
|
249
|
+
this.fileTypeDisplay = computed(() => this.intl.file.replace('{{fileTypeLastPart}}', this.fileType().split('/')[1].toUpperCase()));
|
|
250
|
+
this.previewUrl = input('');
|
|
251
|
+
this.fileEntryIconSrc = computed(() => {
|
|
252
|
+
const fileExtension = this.fileName().split('.').pop();
|
|
253
|
+
const fileEntryIconRoot = 'https://cdn.lucca.fr/transverse/prisme/visuals/file-entry/';
|
|
254
|
+
const fileEntryIconExtension = '.svg';
|
|
255
|
+
switch (fileExtension) {
|
|
256
|
+
case 'pdf':
|
|
257
|
+
case 'xls':
|
|
258
|
+
case 'xlsx':
|
|
259
|
+
case 'doc':
|
|
260
|
+
case 'csv':
|
|
261
|
+
return fileEntryIconRoot + fileExtension + fileEntryIconExtension;
|
|
262
|
+
case 'jpg':
|
|
263
|
+
case 'jpeg':
|
|
264
|
+
case 'png':
|
|
265
|
+
case 'gif':
|
|
266
|
+
case 'svg':
|
|
267
|
+
return fileEntryIconRoot + 'image' + fileEntryIconExtension;
|
|
268
|
+
default:
|
|
269
|
+
return fileEntryIconRoot + 'default' + fileEntryIconExtension;
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
this.tooltip = computed(() => {
|
|
273
|
+
if (this.state() === 'error') {
|
|
274
|
+
if (!this.media()) {
|
|
275
|
+
return null;
|
|
276
|
+
}
|
|
277
|
+
else {
|
|
278
|
+
return this.fileName() + ' — ' + this.fileSizeDisplay();
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
if (!this.media() && this.size() === null) {
|
|
282
|
+
return null;
|
|
283
|
+
}
|
|
284
|
+
if (this.size() === 'S' && !this.media()) {
|
|
285
|
+
return this.fileTypeDisplay() + ' – ' + this.fileSizeDisplay();
|
|
286
|
+
}
|
|
287
|
+
return this.fileName() + ' – ' + this.fileTypeDisplay() + ' – ' + this.fileSizeDisplay();
|
|
288
|
+
});
|
|
289
|
+
this.dlClasses = computed(() => ({
|
|
290
|
+
[`is-${this.state()}`]: !!this.state(),
|
|
291
|
+
[`mod-${this.size()}`]: !!this.size(),
|
|
292
|
+
}));
|
|
293
|
+
}
|
|
294
|
+
#locale;
|
|
295
|
+
get withPassword() {
|
|
296
|
+
return this.passwordChange$.observed;
|
|
297
|
+
}
|
|
298
|
+
get deletable() {
|
|
299
|
+
return this.deleteFile$.observed;
|
|
300
|
+
}
|
|
301
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FileEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FileEntryComponent, isStandalone: true, selector: "lu-file-entry", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, downloadURL: { classPropertyName: "downloadURL", publicName: "downloadURL", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordChange: "passwordChange", deleteFile: "deleteFile" }, host: { classAttribute: "u-displayContents" }, ngImport: i0, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [ngClass]=\"dlClasses()\">\n\t@if (!media()) {\n\t<dt class=\"fileEntry-filename\">\n\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t</dt>\n\t@if (state() === 'error' && inlineMessageError()) {\n\t<dd class=\"fileEntry-inlineMessage\">\n\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t</dd>\n\t} @else {\n\t<dd class=\"fileEntry-description\">\n\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span><span class=\"u-mask\"> \u2013 </span>\n\t\t<lu-divider vertical />\n\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t</dd>\n\t} }\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === 'error' && inlineMessageError()) { @if (media()) {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</div>\n\t\t\t} @else {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t</div>\n\t\t\t} } @else { @if (previewUrl() && state() !== 'error') {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t</div>\n\t\t\t} @if (state() === 'loading') {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t</div>\n\t\t\t} @if (!previewUrl() && state() !== 'loading') {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<img class=\"fileEntry-status-content-inside-svg\" [attr.src]=\"iconOverride() || fileEntryIconSrc()\" alt=\"\" width=\"32\" height=\"32\" />\n\t\t\t</div>\n\t\t\t} } @if (displayFileName() && media()) {\n\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t<dd class=\"fileEntry-toolbar\">\n\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t@if (downloadURL()) {\n\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tluButton\n\t\t\t\t\t\t[luTooltip]=\"intl.download\"\n\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t>\n\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t[alt]=\"intl.downloadFile | intlParams: {fileName: fileName()}\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t} @if (deletable) {\n\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tluButton\n\t\t\t\t\t\t[luTooltip]=\"intl.delete\"\n\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t[alt]=\"intl.deleteFile | intlParams: {fileName: fileName()}\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t<div class=\"box-arrow mod-neutral\"></div>\n\t<lu-form-field [label]=\"intl.password\">\n\t\t<div class=\"fileEntry_box-field\">\n\t\t\t<lu-text-input\n\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\trequired\n\t\t\t\thasClearer\n\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\ttype=\"password\"\n\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t/>\n\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl.confirmPassword }}</button>\n\t\t</div>\n\t</lu-form-field>\n</div>\n}\n", styles: [".fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-borderRadius: var(--commons-borderRadius-L);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--commons-borderRadius-L);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-height:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);width:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--commons-borderRadius-M);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-width:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-width:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--commons-borderRadius-M);max-width:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-width:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-width:fit-content}.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-status-borderRadius: var(--commons-borderRadius-M);--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-status-borderRadius: var(--commons-borderRadius-M);--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--commons-borderRadius-L);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--icon-size: 1.25rem;--components-button-font-size: var(--sizes-S-fontSize);--components-button-line-height: var(--sizes-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis"], exportAs: ["luTooltip"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "component", type: DividerComponent, selector: "lu-divider", inputs: ["withRole", "vertical", "size"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
303
|
+
}
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FileEntryComponent, decorators: [{
|
|
305
|
+
type: Component,
|
|
306
|
+
args: [{ selector: 'lu-file-entry', standalone: true, encapsulation: ViewEncapsulation.None, imports: [IconComponent, LuTooltipModule, ButtonComponent, InlineMessageComponent, DividerComponent, NgClass, FormFieldComponent, TextInputComponent, FormsModule, IntlParamsPipe], host: {
|
|
307
|
+
class: 'u-displayContents',
|
|
308
|
+
}, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [ngClass]=\"dlClasses()\">\n\t@if (!media()) {\n\t<dt class=\"fileEntry-filename\">\n\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t</dt>\n\t@if (state() === 'error' && inlineMessageError()) {\n\t<dd class=\"fileEntry-inlineMessage\">\n\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t</dd>\n\t} @else {\n\t<dd class=\"fileEntry-description\">\n\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span><span class=\"u-mask\"> \u2013 </span>\n\t\t<lu-divider vertical />\n\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t</dd>\n\t} }\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === 'error' && inlineMessageError()) { @if (media()) {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</div>\n\t\t\t} @else {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t</div>\n\t\t\t} } @else { @if (previewUrl() && state() !== 'error') {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t</div>\n\t\t\t} @if (state() === 'loading') {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t</div>\n\t\t\t} @if (!previewUrl() && state() !== 'loading') {\n\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t<img class=\"fileEntry-status-content-inside-svg\" [attr.src]=\"iconOverride() || fileEntryIconSrc()\" alt=\"\" width=\"32\" height=\"32\" />\n\t\t\t</div>\n\t\t\t} } @if (displayFileName() && media()) {\n\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t<dd class=\"fileEntry-toolbar\">\n\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t@if (downloadURL()) {\n\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tluButton\n\t\t\t\t\t\t[luTooltip]=\"intl.download\"\n\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t>\n\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t[alt]=\"intl.downloadFile | intlParams: {fileName: fileName()}\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t} @if (deletable) {\n\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tluButton\n\t\t\t\t\t\t[luTooltip]=\"intl.delete\"\n\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t[alt]=\"intl.deleteFile | intlParams: {fileName: fileName()}\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t<div class=\"box-arrow mod-neutral\"></div>\n\t<lu-form-field [label]=\"intl.password\">\n\t\t<div class=\"fileEntry_box-field\">\n\t\t\t<lu-text-input\n\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\trequired\n\t\t\t\thasClearer\n\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\ttype=\"password\"\n\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t/>\n\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl.confirmPassword }}</button>\n\t\t</div>\n\t</lu-form-field>\n</div>\n}\n", styles: [".fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-borderRadius: var(--commons-borderRadius-L);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--commons-borderRadius-L);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-height:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);width:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--commons-borderRadius-M);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-width:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-width:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--commons-borderRadius-M);max-width:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-width:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-width:fit-content}.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-status-borderRadius: var(--commons-borderRadius-M);--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-status-borderRadius: var(--commons-borderRadius-M);--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--commons-borderRadius-L);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--icon-size: 1.25rem;--components-button-font-size: var(--sizes-S-fontSize);--components-button-line-height: var(--sizes-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}\n"] }]
|
|
309
|
+
}] });
|
|
310
|
+
|
|
311
|
+
class MultiFileUploadComponent extends BaseFileUploadComponent {
|
|
312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MultiFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MultiFileUploadComponent, isStandalone: true, selector: "lu-multi-file-upload", usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"false\">\n\t<input\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\tmultiple=\"multiple\"\n\t\t#inputRef\n\t/>\n\t<div class=\"fileUpload-status\" [innerHtml]=\"illustrationUrl() | luSafeExternalSvg\"></div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl.dropOrClick.other\"></span>\n\t\t@if (acceptNames().length) {\n\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t@if (acceptNames().length > 1 || acceptAll()) { {{ intl.acceptedFormat.other }} } @else { intl.acceptedFormat.one } {{\n\t\t\tacceptNames().join(', ') }}.\n\t\t</span>\n\t\t} @if (fileMaxSize()) {\n\t\t<span class=\"fileUpload-instruction-size\">{{ intl.maxWeight.other | intlParams: {maxSizeDisplay: maxSizeDisplay()} }}</span>\n\t\t}\n\t\t<span class=\"u-mask\">{{ intl.fileUploadedListed.other }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" aria-hidden=\"true\">{{ intl.selectFile.other }}</span>\n</div>\n", styles: [".fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--commons-borderRadius-L);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--palettes-neutral-800);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--commons-borderRadius-M);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;width:100%;height:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--sizes-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--sizes-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-instruction-filename{display:block;font-weight:600;color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--commons-borderRadius-L);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--icon-size: 1.25rem;--components-button-font-size: var(--sizes-S-fontSize);--components-button-line-height: var(--sizes-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
314
|
+
}
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MultiFileUploadComponent, decorators: [{
|
|
316
|
+
type: Component,
|
|
317
|
+
args: [{ selector: 'lu-multi-file-upload', standalone: true, encapsulation: ViewEncapsulation.None, imports: [LuSafeExternalSvgPipe, InputDirective, LuTooltipModule, IntlParamsPipe], template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"false\">\n\t<input\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\tmultiple=\"multiple\"\n\t\t#inputRef\n\t/>\n\t<div class=\"fileUpload-status\" [innerHtml]=\"illustrationUrl() | luSafeExternalSvg\"></div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl.dropOrClick.other\"></span>\n\t\t@if (acceptNames().length) {\n\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t@if (acceptNames().length > 1 || acceptAll()) { {{ intl.acceptedFormat.other }} } @else { intl.acceptedFormat.one } {{\n\t\t\tacceptNames().join(', ') }}.\n\t\t</span>\n\t\t} @if (fileMaxSize()) {\n\t\t<span class=\"fileUpload-instruction-size\">{{ intl.maxWeight.other | intlParams: {maxSizeDisplay: maxSizeDisplay()} }}</span>\n\t\t}\n\t\t<span class=\"u-mask\">{{ intl.fileUploadedListed.other }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" aria-hidden=\"true\">{{ intl.selectFile.other }}</span>\n</div>\n", styles: [".fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--commons-borderRadius-L);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--palettes-neutral-800);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--commons-borderRadius-M);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;width:100%;height:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--sizes-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--sizes-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-instruction-filename{display:block;font-weight:600;color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--commons-borderRadius-L);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--icon-size: 1.25rem;--components-button-font-size: var(--sizes-S-fontSize);--components-button-line-height: var(--sizes-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}\n"] }]
|
|
318
|
+
}] });
|
|
319
|
+
|
|
320
|
+
class SingleFileUploadComponent extends BaseFileUploadComponent {
|
|
321
|
+
constructor() {
|
|
322
|
+
super(...arguments);
|
|
323
|
+
this.entry = input(null);
|
|
324
|
+
this.state = input(null);
|
|
325
|
+
this.inlineMessageError = input(null);
|
|
326
|
+
this.previewUrl = input(null);
|
|
327
|
+
this.deleteFile = output();
|
|
328
|
+
this.displayFileName = input(false, { transform: booleanAttribute });
|
|
329
|
+
}
|
|
330
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SingleFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SingleFileUploadComponent, isStandalone: true, selector: "lu-single-file-upload", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFile: "deleteFile" }, usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"!!entry()\">\n\t<input\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\tluInputStandalone\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\t[attr.disabled]=\"!!entry() ? 'disabled' : null\"\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t/>\n\t<div class=\"fileUpload-status\" [innerHtml]=\"illustrationUrl() | luSafeExternalSvg\"></div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl.dropOrClick.one\"></span>\n\t\t@if (acceptNames().length) {\n\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t@if (acceptNames().length > 1 || acceptAll()) { {{ intl.acceptedFormat.other }} } @else { {{ intl.acceptedFormat.one }} } {{\n\t\t\tacceptNames().join(', ') }}.\n\t\t</span>\n\t\t} @if (fileMaxSize()) {\n\t\t<span class=\"fileUpload-instruction-size\">{{ intl.maxWeight.one | intlParams: {maxSizeDisplay: maxSizeDisplay()} }}</span>\n\t\t}\n\t\t<span class=\"u-mask\">{{ intl.fileUploadedListed.one }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" aria-hidden=\"true\">{{ intl.selectFile.one }}</span>\n</div>\n@if (entry()) {\n<lu-file-entry\n\t[media]=\"size() === null\"\n\t[previewUrl]=\"previewUrl()\"\n\t[entry]=\"entry()\"\n\t[state]=\"state()\"\n\t(deleteFile)=\"deleteFile.emit()\"\n\t[inlineMessageError]=\"inlineMessageError()\"\n\t[displayFileName]=\"displayFileName()\"\n/>\n}\n", styles: [".fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--commons-borderRadius-L);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--palettes-neutral-800);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--commons-borderRadius-M);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;width:100%;height:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--sizes-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--sizes-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-instruction-filename{display:block;font-weight:600;color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--commons-borderRadius-L);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--icon-size: 1.25rem;--components-button-font-size: var(--sizes-S-fontSize);--components-button-line-height: var(--sizes-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: FileEntryComponent, selector: "lu-file-entry", inputs: ["state", "displayFileName", "inlineMessageError", "entry", "size", "iconOverride", "downloadURL", "password", "media", "previewUrl"], outputs: ["passwordChange", "deleteFile"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
332
|
+
}
|
|
333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SingleFileUploadComponent, decorators: [{
|
|
334
|
+
type: Component,
|
|
335
|
+
args: [{ selector: 'lu-single-file-upload', standalone: true, encapsulation: ViewEncapsulation.None, imports: [LuSafeExternalSvgPipe, InputDirective, LuTooltipModule, FileEntryComponent, IntlParamsPipe], template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"!!entry()\">\n\t<input\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\tluInputStandalone\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\t[attr.disabled]=\"!!entry() ? 'disabled' : null\"\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t/>\n\t<div class=\"fileUpload-status\" [innerHtml]=\"illustrationUrl() | luSafeExternalSvg\"></div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl.dropOrClick.one\"></span>\n\t\t@if (acceptNames().length) {\n\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t@if (acceptNames().length > 1 || acceptAll()) { {{ intl.acceptedFormat.other }} } @else { {{ intl.acceptedFormat.one }} } {{\n\t\t\tacceptNames().join(', ') }}.\n\t\t</span>\n\t\t} @if (fileMaxSize()) {\n\t\t<span class=\"fileUpload-instruction-size\">{{ intl.maxWeight.one | intlParams: {maxSizeDisplay: maxSizeDisplay()} }}</span>\n\t\t}\n\t\t<span class=\"u-mask\">{{ intl.fileUploadedListed.one }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" aria-hidden=\"true\">{{ intl.selectFile.one }}</span>\n</div>\n@if (entry()) {\n<lu-file-entry\n\t[media]=\"size() === null\"\n\t[previewUrl]=\"previewUrl()\"\n\t[entry]=\"entry()\"\n\t[state]=\"state()\"\n\t(deleteFile)=\"deleteFile.emit()\"\n\t[inlineMessageError]=\"inlineMessageError()\"\n\t[displayFileName]=\"displayFileName()\"\n/>\n}\n", styles: [".fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--commons-borderRadius-L);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--palettes-neutral-800);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--commons-borderRadius-M);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;width:100%;height:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--sizes-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--sizes-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--sizes-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-instruction-filename{display:block;font-weight:600;color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--commons-borderRadius-L);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--icon-size: 1.25rem;--components-button-font-size: var(--sizes-S-fontSize);--components-button-line-height: var(--sizes-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}\n"] }]
|
|
336
|
+
}] });
|
|
337
|
+
|
|
338
|
+
/**
|
|
339
|
+
* Generated bundle index. Do not edit.
|
|
340
|
+
*/
|
|
341
|
+
|
|
342
|
+
export { FileDropzoneComponent, FileEntryComponent, MultiFileUploadComponent, SingleFileUploadComponent };
|
|
343
|
+
//# sourceMappingURL=lucca-front-ng-file-upload.mjs.map
|