chrv-components 1.12.168 → 1.12.170
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
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, ChangeDetectionStrategy, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, contentChild, Input, Inject, createComponent, createEnvironmentInjector } from '@angular/core';
|
|
2
|
+
import { inject, input, ChangeDetectionStrategy, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, contentChild, contentChildren, Input, Inject, createComponent, createEnvironmentInjector } from '@angular/core';
|
|
3
3
|
import * as i2$4 from '@angular/router';
|
|
4
4
|
import { Router, RouterModule } from '@angular/router';
|
|
5
5
|
import { MatButton, MatButtonModule } from '@angular/material/button';
|
|
@@ -10,8 +10,8 @@ import { CommonModule, AsyncPipe, DatePipe, formatDate, DATE_PIPE_DEFAULT_OPTION
|
|
|
10
10
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
11
11
|
import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay, CdkScrollable, CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
|
|
12
12
|
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
13
|
-
import { Subject, Observable, map, BehaviorSubject, skip, debounceTime as debounceTime$1, distinctUntilChanged, skipWhile, from, mergeMap, toArray, timer, takeUntil as takeUntil$1, of, catchError, forkJoin, take, combineLatest, finalize, tap, interval } from 'rxjs';
|
|
14
|
-
import { debounceTime, takeUntil, finalize as finalize$1, concatMap, switchMap, tap as tap$1, catchError as catchError$1 } from 'rxjs/operators';
|
|
13
|
+
import { Subject, Observable, map, BehaviorSubject, skip, debounceTime as debounceTime$1, distinctUntilChanged, skipWhile, from, mergeMap, toArray, timer, takeUntil as takeUntil$1, of, catchError, forkJoin, take, combineLatest, switchMap, merge, finalize, tap, interval } from 'rxjs';
|
|
14
|
+
import { debounceTime, takeUntil, finalize as finalize$1, concatMap, switchMap as switchMap$1, tap as tap$1, catchError as catchError$1 } from 'rxjs/operators';
|
|
15
15
|
import * as i1$2 from '@angular/forms';
|
|
16
16
|
import { NG_VALIDATORS, Validators, NgControl, ReactiveFormsModule, FormsModule, FormBuilder, FormControl } from '@angular/forms';
|
|
17
17
|
import { isValid, isBefore, formatDate as formatDate$1 } from 'date-fns';
|
|
@@ -29,7 +29,7 @@ import { PaginationService, NgxPaginationModule } from 'ngx-pagination';
|
|
|
29
29
|
export * from 'ngx-pagination';
|
|
30
30
|
import { SortPipe, SafeHtmlPipe } from 'chrv-pipes';
|
|
31
31
|
export * from 'chrv-pipes';
|
|
32
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
32
|
+
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
33
33
|
import { HubConnectionBuilder, HttpTransportType, LogLevel, HubConnectionState } from '@microsoft/signalr';
|
|
34
34
|
import * as i1$4 from '@angular/common/http';
|
|
35
35
|
import { HttpResponse, HttpContextToken, provideHttpClient, withXhr, withInterceptors, withXsrfConfiguration, HttpEventType } from '@angular/common/http';
|
|
@@ -1037,7 +1037,6 @@ function maxFileNameLength(maxLength) {
|
|
|
1037
1037
|
if (value === null)
|
|
1038
1038
|
return null;
|
|
1039
1039
|
if (Array.isArray(value)) {
|
|
1040
|
-
console.log('IS ARRAY', value);
|
|
1041
1040
|
for (let i = 0; i < value.length; i++) {
|
|
1042
1041
|
const fileNameLength = value[i].name?.length;
|
|
1043
1042
|
if (fileNameLength === undefined)
|
|
@@ -1050,7 +1049,6 @@ function maxFileNameLength(maxLength) {
|
|
|
1050
1049
|
}
|
|
1051
1050
|
}
|
|
1052
1051
|
else {
|
|
1053
|
-
console.log('NOT ARRAY', value);
|
|
1054
1052
|
isSizeCompliant =
|
|
1055
1053
|
value?.name?.length === undefined || value.name.length <= maxLength;
|
|
1056
1054
|
}
|
|
@@ -4605,11 +4603,22 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4605
4603
|
*/
|
|
4606
4604
|
this.base64 = input(false, /* @ts-ignore */
|
|
4607
4605
|
...(ngDevMode ? [{ debugName: "base64" }] : /* istanbul ignore next */ []));
|
|
4606
|
+
/**
|
|
4607
|
+
* Wether or not the user can update the file's name directly from the file item
|
|
4608
|
+
*/
|
|
4609
|
+
this.allowChangingFileName = input(false, /* @ts-ignore */
|
|
4610
|
+
...(ngDevMode ? [{ debugName: "allowChangingFileName" }] : /* istanbul ignore next */ []));
|
|
4611
|
+
/**
|
|
4612
|
+
* Référence de l'input HTML type="file" masqué
|
|
4613
|
+
*/
|
|
4614
|
+
// @ViewChild('fileNativeInput');
|
|
4615
|
+
this.fileNativeInput = viewChild('fileNativeInput', { ...(ngDevMode ? { debugName: "fileNativeInput" } : /* istanbul ignore next */ {}), read: (ElementRef) });
|
|
4608
4616
|
/**
|
|
4609
4617
|
* Template Ref to the <ng-template #data let-file></ng-template> allowed to be passed for the parent.
|
|
4610
4618
|
* This template will be set next to the regular file data and allow the parent to customize display.
|
|
4611
4619
|
*/
|
|
4612
4620
|
this.dataTemplateRef = contentChild('data', { ...(ngDevMode ? { debugName: "dataTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
4621
|
+
this.dataTemplateControls = contentChildren(NgControl, { ...(ngDevMode ? { debugName: "dataTemplateControls" } : /* istanbul ignore next */ {}), descendants: true });
|
|
4613
4622
|
/**
|
|
4614
4623
|
* État du glisser-déposer (Drag & Drop)
|
|
4615
4624
|
*/
|
|
@@ -4635,12 +4644,27 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4635
4644
|
this.value.set([]);
|
|
4636
4645
|
}
|
|
4637
4646
|
}
|
|
4647
|
+
ngAfterContentInit() {
|
|
4648
|
+
const controls$ = toObservable(this.dataTemplateControls);
|
|
4649
|
+
controls$
|
|
4650
|
+
.pipe(switchMap((controlsList) => {
|
|
4651
|
+
if (!controlsList.length)
|
|
4652
|
+
return of(null);
|
|
4653
|
+
const valueChanges$ = controlsList
|
|
4654
|
+
.filter((c) => !!c.valueChanges)
|
|
4655
|
+
.map((c) => c.valueChanges);
|
|
4656
|
+
return merge(...valueChanges$);
|
|
4657
|
+
}))
|
|
4658
|
+
.subscribe(() => {
|
|
4659
|
+
this.onChange(this.value());
|
|
4660
|
+
});
|
|
4661
|
+
}
|
|
4638
4662
|
/**
|
|
4639
4663
|
* Ouvre la fenêtre native de sélection de fichiers
|
|
4640
4664
|
*/
|
|
4641
4665
|
triggerFileSelect() {
|
|
4642
4666
|
if (!this.isDisabled()) {
|
|
4643
|
-
this.fileNativeInput?.nativeElement.click();
|
|
4667
|
+
this.fileNativeInput()?.nativeElement.click();
|
|
4644
4668
|
}
|
|
4645
4669
|
}
|
|
4646
4670
|
/**
|
|
@@ -4830,15 +4854,16 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4830
4854
|
return crypto.randomUUID();
|
|
4831
4855
|
}
|
|
4832
4856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4833
|
-
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];onChange(this.value())\"\n type=\"text\"></chr-input>\n
|
|
4857
|
+
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 }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: 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"] }] }); }
|
|
4834
4858
|
}
|
|
4835
4859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, decorators: [{
|
|
4836
4860
|
type: Component,
|
|
4837
|
-
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];onChange(this.value())\"\n type=\"text\"></chr-input>\n
|
|
4838
|
-
}], 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: [{
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4861
|
+
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"] }]
|
|
4862
|
+
}], 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: [{ type: i0.ViewChild, args: ['fileNativeInput', { ...{
|
|
4863
|
+
read: (ElementRef),
|
|
4864
|
+
}, isSignal: true }] }], dataTemplateRef: [{ type: i0.ContentChild, args: ['data', { ...{ read: TemplateRef }, isSignal: true }] }], dataTemplateControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgControl), { ...{
|
|
4865
|
+
descendants: true,
|
|
4866
|
+
}, isSignal: true }] }] } });
|
|
4842
4867
|
|
|
4843
4868
|
class ChrPasswordInputComponent extends ChrInputComponent {
|
|
4844
4869
|
constructor() {
|
|
@@ -5648,7 +5673,7 @@ class LegacyToastService {
|
|
|
5648
5673
|
this.currentToastSubject.next(null);
|
|
5649
5674
|
}),
|
|
5650
5675
|
//Small delay between toasts
|
|
5651
|
-
switchMap(() => timer(500)));
|
|
5676
|
+
switchMap$1(() => timer(500)));
|
|
5652
5677
|
}))
|
|
5653
5678
|
.subscribe();
|
|
5654
5679
|
}
|