chrv-components 1.12.167 → 1.12.169
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.
|
Binary file
|
|
@@ -992,6 +992,81 @@ function minLength(treshold) {
|
|
|
992
992
|
};
|
|
993
993
|
}
|
|
994
994
|
|
|
995
|
+
class MaxFileNameLengthValidator {
|
|
996
|
+
constructor() {
|
|
997
|
+
this.max = input(0, /* @ts-ignore */
|
|
998
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
999
|
+
}
|
|
1000
|
+
validate(control) {
|
|
1001
|
+
const max = this.max();
|
|
1002
|
+
return max ? maxFileNameLength(max)(control) : null;
|
|
1003
|
+
}
|
|
1004
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaxFileNameLengthValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1005
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MaxFileNameLengthValidator, isStandalone: true, selector: "[app-max-file-size]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1006
|
+
{
|
|
1007
|
+
provide: NG_VALIDATORS,
|
|
1008
|
+
useExisting: MaxFileNameLengthValidator,
|
|
1009
|
+
multi: true,
|
|
1010
|
+
},
|
|
1011
|
+
], ngImport: i0 }); }
|
|
1012
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaxFileNameLengthValidator, providedIn: 'root' }); }
|
|
1013
|
+
}
|
|
1014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaxFileNameLengthValidator, decorators: [{
|
|
1015
|
+
type: Injectable,
|
|
1016
|
+
args: [{ providedIn: 'root' }]
|
|
1017
|
+
}, {
|
|
1018
|
+
type: Directive,
|
|
1019
|
+
args: [{
|
|
1020
|
+
selector: '[app-max-file-size]',
|
|
1021
|
+
providers: [
|
|
1022
|
+
{
|
|
1023
|
+
provide: NG_VALIDATORS,
|
|
1024
|
+
useExisting: MaxFileNameLengthValidator,
|
|
1025
|
+
multi: true,
|
|
1026
|
+
},
|
|
1027
|
+
],
|
|
1028
|
+
standalone: true,
|
|
1029
|
+
}]
|
|
1030
|
+
}], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
|
|
1031
|
+
function maxFileNameLength(maxLength) {
|
|
1032
|
+
return (control) => {
|
|
1033
|
+
const value = control.value;
|
|
1034
|
+
const errors = {};
|
|
1035
|
+
let isSizeCompliant = true;
|
|
1036
|
+
let fileSize = null;
|
|
1037
|
+
if (value === null)
|
|
1038
|
+
return null;
|
|
1039
|
+
if (Array.isArray(value)) {
|
|
1040
|
+
console.log('IS ARRAY', value);
|
|
1041
|
+
for (let i = 0; i < value.length; i++) {
|
|
1042
|
+
const fileNameLength = value[i].name?.length;
|
|
1043
|
+
if (fileNameLength === undefined)
|
|
1044
|
+
continue;
|
|
1045
|
+
if (fileNameLength >= maxLength) {
|
|
1046
|
+
errors[i] = true;
|
|
1047
|
+
isSizeCompliant = false;
|
|
1048
|
+
fileSize = value[i].name.length;
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
}
|
|
1052
|
+
else {
|
|
1053
|
+
console.log('NOT ARRAY', value);
|
|
1054
|
+
isSizeCompliant =
|
|
1055
|
+
value?.name?.length === undefined || value.name.length <= maxLength;
|
|
1056
|
+
}
|
|
1057
|
+
return isSizeCompliant == false
|
|
1058
|
+
? {
|
|
1059
|
+
maxFileNameLength: {
|
|
1060
|
+
maxFileNameLength: maxLength,
|
|
1061
|
+
actual: fileSize,
|
|
1062
|
+
indexes: errors,
|
|
1063
|
+
},
|
|
1064
|
+
indexes: errors,
|
|
1065
|
+
}
|
|
1066
|
+
: null;
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1069
|
+
|
|
995
1070
|
function SyncValidatorToAsync(validator) {
|
|
996
1071
|
// COPILOT Generated. Switch to observable and try to replace regular validators.
|
|
997
1072
|
return (control) => {
|
|
@@ -1060,6 +1135,10 @@ function getSyncValidators(rules) {
|
|
|
1060
1135
|
validation.display = `Ce fichier est trop petit !`;
|
|
1061
1136
|
validators.push(minFileSize(validation.value));
|
|
1062
1137
|
}
|
|
1138
|
+
if (rule == 'maxFileNameLength') {
|
|
1139
|
+
validation.display = `Le nom du fichier (ou son nom d'affichage) est trop long !`;
|
|
1140
|
+
validators.push(maxFileNameLength(validation.value));
|
|
1141
|
+
}
|
|
1063
1142
|
}
|
|
1064
1143
|
return validators;
|
|
1065
1144
|
}
|
|
@@ -1075,6 +1154,7 @@ const BaseErrorDisplays = {
|
|
|
1075
1154
|
maxdate: `Cette date est trop grande !`,
|
|
1076
1155
|
maxfilesize: `Ce fichier est trop grand !`,
|
|
1077
1156
|
minfilesize: `Ce fichier est trop petit !`,
|
|
1157
|
+
maxfilenamelength: `Le nom du fichier (ou son nom d'affichage) est trop long !`,
|
|
1078
1158
|
};
|
|
1079
1159
|
|
|
1080
1160
|
class AutofocusDirective {
|
|
@@ -4525,6 +4605,11 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4525
4605
|
*/
|
|
4526
4606
|
this.base64 = input(false, /* @ts-ignore */
|
|
4527
4607
|
...(ngDevMode ? [{ debugName: "base64" }] : /* istanbul ignore next */ []));
|
|
4608
|
+
/**
|
|
4609
|
+
* Wether or not the user can update the file's name directly from the file item
|
|
4610
|
+
*/
|
|
4611
|
+
this.allowChangingFileName = input(false, /* @ts-ignore */
|
|
4612
|
+
...(ngDevMode ? [{ debugName: "allowChangingFileName" }] : /* istanbul ignore next */ []));
|
|
4528
4613
|
/**
|
|
4529
4614
|
* Template Ref to the <ng-template #data let-file></ng-template> allowed to be passed for the parent.
|
|
4530
4615
|
* This template will be set next to the regular file data and allow the parent to customize display.
|
|
@@ -4712,16 +4797,27 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4712
4797
|
getFileValidationError(index) {
|
|
4713
4798
|
this.validationRevision();
|
|
4714
4799
|
const errors = this.ngControl()?.control?.errors;
|
|
4800
|
+
const errorDisplays = BaseErrorDisplays;
|
|
4715
4801
|
if (!errors)
|
|
4716
4802
|
return null;
|
|
4803
|
+
console.log('Remaining errors:', errors);
|
|
4717
4804
|
const indexedErrors = errors['indexes'];
|
|
4718
4805
|
const isSingleFile = !this.multiple() && index === 0;
|
|
4719
4806
|
if (!isSingleFile && !indexedErrors?.[index])
|
|
4720
4807
|
return null;
|
|
4721
|
-
|
|
4722
|
-
|
|
4723
|
-
|
|
4724
|
-
|
|
4808
|
+
const firstError = Object.keys(errors)?.[0];
|
|
4809
|
+
const errorDisplay = errorDisplays[firstError.toLowerCase()];
|
|
4810
|
+
const error = errors[firstError];
|
|
4811
|
+
const lowerLimit = error[firstError];
|
|
4812
|
+
const actual = error.actual;
|
|
4813
|
+
if (firstError !== undefined) {
|
|
4814
|
+
if (typeof lowerLimit == 'boolean' && typeof actual == 'boolean')
|
|
4815
|
+
return errorDisplay;
|
|
4816
|
+
else
|
|
4817
|
+
return errorDisplay
|
|
4818
|
+
? `${errorDisplay} (limite: ${lowerLimit}, saisie: ${actual})`
|
|
4819
|
+
: errors[0];
|
|
4820
|
+
}
|
|
4725
4821
|
return null;
|
|
4726
4822
|
}
|
|
4727
4823
|
/**
|
|
@@ -4739,12 +4835,12 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4739
4835
|
return crypto.randomUUID();
|
|
4740
4836
|
}
|
|
4741
4837
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4742
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n\n <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n (change)=\"onFileSelected($event)\" />\n\n <div class=\"drop-zone-content\">\n <span class=\"material-symbols upload-icon\">cloud_upload</span>\n <div class=\"drop-zone-text\">\n <span class=\"primary-text\">\n @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n </span>\n <span class=\"secondary-text\">\n {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n </span>\n </div>\n </div>\n </div>\n\n\n <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n @if (files().length > 0) {\n <div class=\"file-list\">\n @for (entry of files(); track entry.id) {\n <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n 'description' }}</span>\n <div class=\"file-info\">\n <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n <div class=\"file-name\">\n <chr-input [value]=\"entry.file.name\"\n (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0]\"\n type=\"text\"></chr-input>\n
|
|
4838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n\n <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n (change)=\"onFileSelected($event)\" />\n\n <div class=\"drop-zone-content\">\n <span class=\"material-symbols upload-icon\">cloud_upload</span>\n <div class=\"drop-zone-text\">\n <span class=\"primary-text\">\n @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n </span>\n <span class=\"secondary-text\">\n {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n </span>\n </div>\n </div>\n </div>\n\n\n <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n @if (files().length > 0) {\n <div class=\"file-list\">\n @for (entry of files(); track entry.id) {\n <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n 'description' }}</span>\n <div class=\"file-info\">\n <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n <div class=\"file-name\">\n @if(allowChangingFileName()){\n <chr-input [value]=\"entry.file.name\"\n (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n type=\"text\"></chr-input>\n }@else {\n <span class=\"file-name\">{{\n entry.file.name }}\n </span>\n }\n <span>.{{entry.file.extension}}</span>\n </div>\n <div class=\"file-name\">\n <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n <span class=\"file-content\">|</span>\n <span class=\"file-content\">{{ entry.file.contentType }}</span>\n </div>\n </div>\n @if(dataTemplateRef()){\n <div class=\"file-data\">\n <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n </ng-container>\n </div>\n }\n <div class=\"file-data full-width\">\n @if (entry.error) {\n <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n } @else if (getFileValidationError($index); as validationError) {\n <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n }\n </div>\n </div>\n <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n <span class=\"material-symbols\">close</span>\n </button>\n <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n </div>\n </div>\n }\n @if(multiple()){\n <button class=\"file-item fixed-size add-file-button\" (click)=\"triggerFileSelect()\">\n <span class=\"material-symbols\">add</span>\n </button>\n }\n </div>\n }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}.add-file-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "debouncedInput", "focus", "enter", "blur"] }] }); }
|
|
4743
4839
|
}
|
|
4744
4840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, decorators: [{
|
|
4745
4841
|
type: Component,
|
|
4746
|
-
args: [{ selector: 'chr-file-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ChrInputComponent], template: "<div class=\"file-input-wrapper\">\n <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n\n <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n (change)=\"onFileSelected($event)\" />\n\n <div class=\"drop-zone-content\">\n <span class=\"material-symbols upload-icon\">cloud_upload</span>\n <div class=\"drop-zone-text\">\n <span class=\"primary-text\">\n @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n </span>\n <span class=\"secondary-text\">\n {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n </span>\n </div>\n </div>\n </div>\n\n\n <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n @if (files().length > 0) {\n <div class=\"file-list\">\n @for (entry of files(); track entry.id) {\n <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n 'description' }}</span>\n <div class=\"file-info\">\n <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n <div class=\"file-name\">\n <chr-input [value]=\"entry.file.name\"\n (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0]\"\n type=\"text\"></chr-input>\n
|
|
4747
|
-
}], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], base64: [{ type: i0.Input, args: [{ isSignal: true, alias: "base64", required: false }] }], fileNativeInput: [{
|
|
4842
|
+
args: [{ selector: 'chr-file-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ChrInputComponent], template: "<div class=\"file-input-wrapper\">\n <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n\n <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n (change)=\"onFileSelected($event)\" />\n\n <div class=\"drop-zone-content\">\n <span class=\"material-symbols upload-icon\">cloud_upload</span>\n <div class=\"drop-zone-text\">\n <span class=\"primary-text\">\n @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n </span>\n <span class=\"secondary-text\">\n {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n </span>\n </div>\n </div>\n </div>\n\n\n <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n @if (files().length > 0) {\n <div class=\"file-list\">\n @for (entry of files(); track entry.id) {\n <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n 'description' }}</span>\n <div class=\"file-info\">\n <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n <div class=\"file-name\">\n @if(allowChangingFileName()){\n <chr-input [value]=\"entry.file.name\"\n (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n type=\"text\"></chr-input>\n }@else {\n <span class=\"file-name\">{{\n entry.file.name }}\n </span>\n }\n <span>.{{entry.file.extension}}</span>\n </div>\n <div class=\"file-name\">\n <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n <span class=\"file-content\">|</span>\n <span class=\"file-content\">{{ entry.file.contentType }}</span>\n </div>\n </div>\n @if(dataTemplateRef()){\n <div class=\"file-data\">\n <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n </ng-container>\n </div>\n }\n <div class=\"file-data full-width\">\n @if (entry.error) {\n <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n } @else if (getFileValidationError($index); as validationError) {\n <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n }\n </div>\n </div>\n <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n <span class=\"material-symbols\">close</span>\n </button>\n <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n </div>\n </div>\n }\n @if(multiple()){\n <button class=\"file-item fixed-size add-file-button\" (click)=\"triggerFileSelect()\">\n <span class=\"material-symbols\">add</span>\n </button>\n }\n </div>\n }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}.add-file-button{cursor:pointer}\n"] }]
|
|
4843
|
+
}], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], base64: [{ type: i0.Input, args: [{ isSignal: true, alias: "base64", required: false }] }], allowChangingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowChangingFileName", required: false }] }], fileNativeInput: [{
|
|
4748
4844
|
type: ViewChild,
|
|
4749
4845
|
args: ['fileNativeInput']
|
|
4750
4846
|
}], dataTemplateRef: [{ type: i0.ContentChild, args: ['data', { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
@@ -9225,5 +9321,5 @@ const provideDebounceEventPlugin = () => [
|
|
|
9225
9321
|
* Generated bundle index. Do not edit.
|
|
9226
9322
|
*/
|
|
9227
9323
|
|
|
9228
|
-
export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrButtonLegacyComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrInputComponent, ChrInputData, ChrInputDataOverlay, ChrInputIndicators, ChrLegacyFileInputComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPasswordInputComponent, ChrPopoverDirective, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchSelectInputComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTagSelectInputComponent, ChrTextAreaInputComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OldSpinnerInterceptor, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, SKIP_SPINNER, ScrollIntoViewDirective, Spinner, SpinnerInterceptor, SpinnerService, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileSize, maxLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
|
|
9324
|
+
export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrButtonLegacyComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrInputComponent, ChrInputData, ChrInputDataOverlay, ChrInputIndicators, ChrLegacyFileInputComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPasswordInputComponent, ChrPopoverDirective, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchSelectInputComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTagSelectInputComponent, ChrTextAreaInputComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileNameLengthValidator, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OldSpinnerInterceptor, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, SKIP_SPINNER, ScrollIntoViewDirective, Spinner, SpinnerInterceptor, SpinnerService, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileNameLength, maxFileSize, maxLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
|
|
9229
9325
|
//# sourceMappingURL=chrv-components.mjs.map
|