@onemrvapublic/design-system 21.8.1-develop.3 → 22.0.0-develop.1
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/README.md +10 -4
- package/fesm2022/onemrvapublic-design-system-card.mjs +33 -20
- package/fesm2022/onemrvapublic-design-system-card.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-collapsible-page-divider.mjs +11 -7
- package/fesm2022/onemrvapublic-design-system-collapsible-page-divider.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-flag-icon.mjs +9 -6
- package/fesm2022/onemrvapublic-design-system-flag-icon.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-layout.mjs +169 -114
- package/fesm2022/onemrvapublic-design-system-layout.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-address.mjs +9 -6
- package/fesm2022/onemrvapublic-design-system-mat-address.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs +23 -13
- package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-breadcrumb.mjs +14 -12
- package/fesm2022/onemrvapublic-design-system-mat-breadcrumb.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-carousel.mjs +22 -14
- package/fesm2022/onemrvapublic-design-system-mat-carousel.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-choice-chip.mjs +13 -8
- package/fesm2022/onemrvapublic-design-system-mat-choice-chip.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-copy-to-clipboard.mjs +5 -4
- package/fesm2022/onemrvapublic-design-system-mat-copy-to-clipboard.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-country-item.mjs +7 -5
- package/fesm2022/onemrvapublic-design-system-mat-country-item.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-datepicker-header.mjs +3 -3
- package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs +9 -6
- package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs +78 -49
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-address.mjs +22 -14
- package/fesm2022/onemrvapublic-design-system-mat-input-address.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-birthplace.mjs +23 -13
- package/fesm2022/onemrvapublic-design-system-mat-input-birthplace.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-country.mjs +19 -11
- package/fesm2022/onemrvapublic-design-system-mat-input-country.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-enterprise-number.mjs +19 -11
- package/fesm2022/onemrvapublic-design-system-mat-input-enterprise-number.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-iban.mjs +18 -11
- package/fesm2022/onemrvapublic-design-system-mat-input-iban.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs +17 -12
- package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-message-box.mjs +29 -18
- package/fesm2022/onemrvapublic-design-system-mat-message-box.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs +19 -13
- package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs +54 -32
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs +13 -8
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-paginator.mjs +21 -14
- package/fesm2022/onemrvapublic-design-system-mat-paginator.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-panel.mjs +56 -39
- package/fesm2022/onemrvapublic-design-system-mat-panel.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs +33 -23
- package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs +19 -11
- package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-select-search.mjs +56 -35
- package/fesm2022/onemrvapublic-design-system-mat-select-search.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs +19 -13
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs +13 -10
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-skeleton.mjs +61 -34
- package/fesm2022/onemrvapublic-design-system-mat-skeleton.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-spinner.mjs +12 -11
- package/fesm2022/onemrvapublic-design-system-mat-spinner.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-stepper.mjs +10 -11
- package/fesm2022/onemrvapublic-design-system-mat-stepper.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-sticker.mjs +7 -7
- package/fesm2022/onemrvapublic-design-system-mat-table-of-content.mjs +37 -23
- package/fesm2022/onemrvapublic-design-system-mat-table-of-content.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-task-list.mjs +44 -30
- package/fesm2022/onemrvapublic-design-system-mat-task-list.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs +7 -7
- package/fesm2022/onemrvapublic-design-system-mat-tooltip.mjs +24 -17
- package/fesm2022/onemrvapublic-design-system-mat-tooltip.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-error.mjs +14 -10
- package/fesm2022/onemrvapublic-design-system-page-error.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs +24 -20
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-shared.mjs +120 -98
- package/fesm2022/onemrvapublic-design-system-shared.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system.mjs +1 -1
- package/fesm2022/onemrvapublic-design-system.mjs.map +1 -1
- package/package.json +15 -15
- package/types/onemrvapublic-design-system.d.ts +1 -1
|
@@ -9,7 +9,7 @@ import { TranslatePipe, TranslateService, TranslateModule } from '@ngx-translate
|
|
|
9
9
|
import { MatProgressBar } from '@angular/material/progress-bar';
|
|
10
10
|
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
11
11
|
import { BehaviorSubject, of, interval, take, map, catchError, tap, mergeMap, withLatestFrom, filter, throttle, takeWhile, switchMap, forkJoin, merge, Subject } from 'rxjs';
|
|
12
|
-
import { trigger, state,
|
|
12
|
+
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
|
|
13
13
|
import { ComponentStore } from '@ngrx/component-store';
|
|
14
14
|
import { HttpEventType, HttpResponse } from '@angular/common/http';
|
|
15
15
|
import { OnemRvaCDNMimeService } from '@onemrvapublic/design-system/shared';
|
|
@@ -73,30 +73,47 @@ function convertToReferencedProgressFile(id, name, message = undefined, progress
|
|
|
73
73
|
let NEXT_ID$1 = 0;
|
|
74
74
|
class OnemrvaFilePanelComponent {
|
|
75
75
|
constructor() {
|
|
76
|
-
this.id = input(`onemrva-file-panel-${NEXT_ID$1++}`,
|
|
77
|
-
|
|
78
|
-
this.
|
|
79
|
-
|
|
80
|
-
this.
|
|
81
|
-
|
|
82
|
-
this.
|
|
83
|
-
|
|
76
|
+
this.id = input(`onemrva-file-panel-${NEXT_ID$1++}`, /* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
78
|
+
this.dataCy = input('onemrva-file-panel-' + NEXT_ID$1, /* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "dataCy" }] : /* istanbul ignore next */ []));
|
|
80
|
+
this.file = input.required(/* @ts-ignore */
|
|
81
|
+
...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
|
|
82
|
+
this.actions = input([], /* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
84
|
+
this.showProgress = input(true, /* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "showProgress" }] : /* istanbul ignore next */ []));
|
|
86
|
+
this.displayDate = input(undefined, /* @ts-ignore */
|
|
87
|
+
...(ngDevMode ? [{ debugName: "displayDate" }] : /* istanbul ignore next */ []));
|
|
88
|
+
this.maxFileSize = input(0, /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
|
|
90
|
+
this.disabled = input(false, /* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
84
92
|
this.panelClick = output();
|
|
85
|
-
this.progress = computed(() => this.file().progress,
|
|
86
|
-
|
|
87
|
-
this.
|
|
88
|
-
|
|
89
|
-
this.
|
|
90
|
-
|
|
91
|
-
this.
|
|
92
|
-
|
|
93
|
+
this.progress = computed(() => this.file().progress, /* @ts-ignore */
|
|
94
|
+
...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
95
|
+
this.size = computed(() => formattedSize(this.file().size), /* @ts-ignore */
|
|
96
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
97
|
+
this.color = computed(() => this.file().color ?? OnemrvaMatColor.NONE, /* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
99
|
+
this.isAccent = computed(() => this.color() === OnemrvaMatColor.ACCENT, /* @ts-ignore */
|
|
100
|
+
...(ngDevMode ? [{ debugName: "isAccent" }] : /* istanbul ignore next */ []));
|
|
101
|
+
this.isError = computed(() => this.color() === OnemrvaMatColor.ERROR, /* @ts-ignore */
|
|
102
|
+
...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
|
|
103
|
+
this.isWarn = computed(() => this.color() === OnemrvaMatColor.WARN, /* @ts-ignore */
|
|
104
|
+
...(ngDevMode ? [{ debugName: "isWarn" }] : /* istanbul ignore next */ []));
|
|
105
|
+
this.isSuccess = computed(() => this.color() === OnemrvaMatColor.SUCCESS, /* @ts-ignore */
|
|
106
|
+
...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
|
|
107
|
+
this.isPrimary = computed(() => this.color() === OnemrvaMatColor.PRIMARY, /* @ts-ignore */
|
|
108
|
+
...(ngDevMode ? [{ debugName: "isPrimary" }] : /* istanbul ignore next */ []));
|
|
93
109
|
this.formattedSize = formattedSize;
|
|
94
110
|
this.finalActions = computed(() => {
|
|
95
111
|
if (this.disabled()) {
|
|
96
112
|
return [];
|
|
97
113
|
}
|
|
98
114
|
return this.actions();
|
|
99
|
-
},
|
|
115
|
+
}, /* @ts-ignore */
|
|
116
|
+
...(ngDevMode ? [{ debugName: "finalActions" }] : /* istanbul ignore next */ []));
|
|
100
117
|
}
|
|
101
118
|
onActionClick(event, action) {
|
|
102
119
|
event.stopPropagation();
|
|
@@ -108,10 +125,10 @@ class OnemrvaFilePanelComponent {
|
|
|
108
125
|
}
|
|
109
126
|
this.panelClick.emit(this.file());
|
|
110
127
|
}
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
128
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: OnemrvaFilePanelComponent, isStandalone: true, selector: "file-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, displayDate: { classPropertyName: "displayDate", publicName: "displayDate", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClick: "panelClick" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onPanelClick()", "keydown.enter": "onPanelClick()", "keydown.space": "$event.preventDefault(); onPanelClick()" }, properties: { "attr.id": "id()", "attr.data-cy": "dataCy()", "class.mat-accent": "isAccent()", "class.mat-error": "isError()", "class.mat-warn": "isWarn()", "class.mat-success": "isSuccess()", "class.mat-primary": "isPrimary()", "class.disabled": "disabled()", "class.no-hover": "isError() || isWarn()" } }, ngImport: i0, template: "<div class=\"file-panel-title\" [attr.data-cy]=\"dataCy()\">\n <span class=\"file-name show-icon\">\n {{ file().name }}\n </span>\n <div class=\"file-panel-title-action\">\n @if (finalActions().length > 0) {\n @for (action of finalActions(); track action.dataCy) {\n <button\n mat-icon-button\n color=\"primary\"\n [tabindex]=\"0\"\n [attr.data-cy]=\"action.dataCy\"\n matTooltip=\"{{ action.tooltipCode | translate }}\"\n [attr.aria-label]=\"action.ariaLabel || (action.ariaCode | translate)\"\n (click)=\"onActionClick($event, action)\"\n (keydown.enter)=\"onActionClick($event, action)\"\n (keydown.space)=\"onActionClick($event, action)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n }\n </div>\n</div>\n\n<ng-content>\n @if (displayDate()) {\n <div class=\"fileInfos\">\n <span>{{ displayDate() }}</span>\n\n @if (file().size > 0) {\n <span class=\"float-right\">{{ size() }}</span>\n }\n </div>\n @if (showProgress() && file().enableProgressBar) {\n <mat-progress-bar\n data-cy=\"file-upload-progress\"\n mode=\"determinate\"\n aria-label=\"progress\"\n [value]=\"progress()\"\n />\n }\n } @else if (file().message) {\n <p class=\"message\">\n {{ file().message | translate: { limit: formattedSize(file().maxSize) } }}\n </p>\n }\n</ng-content>\n", styles: [":host{flex:1 1 100%;-webkit-user-select:none;user-select:none;border-radius:var(--border-radius);background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-primary-container);padding:var(--double-spacer);display:flex;flex-direction:column}:host .file-panel-title{font:var(--mat-sys-title-medium);display:flex;flex-direction:row;justify-content:space-between;width:100%}:host .file-panel-title-action{display:flex;align-items:center;max-height:1em}:host .file-panel-title-action button{color:#6e68ae}:host .file-panel-content{padding:0}:host .file-panel-content p:last-child{margin:0}:host .fileInfos{display:inline-block;width:100%;height:1.5rem;font:var(--mat-sys-body-medium)}:host .fileInfos .float-right{margin-right:var(--spacer)}:host .file-panel-title{font:var(--mat-sys-title-medium);margin-bottom:0;color:var(--mat-sys-on-primary-container);display:flex;align-items:center}:host .file-panel-title .file-name{display:flex;align-items:center;gap:0 var(--spacer)}:host .file-panel-title:before{margin-right:var(--spacer);margin-top:var(--quarter-spacer)}:host .file-panel-title .mat-progress-bar-fill:after{background:var(--mat-sys-primary)}:host .file-panel-title .mat-progress-bar-buffer{background-color:var(--mat-sys-primary-container)}:host.disabled{opacity:.4}:host:hover:not(.disabled):not(.no-hover){border:1px solid var(--Surface-Outline-Variant, #d7d5ed);cursor:pointer}:host:hover:not(.disabled):not(.no-hover) .file-name{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
113
130
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
|
|
115
132
|
type: Component,
|
|
116
133
|
args: [{ selector: 'file-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
117
134
|
MatIcon,
|
|
@@ -171,10 +188,10 @@ class OnemrvaMatFileUploadService {
|
|
|
171
188
|
alert(`Missing download implementation for file ID ${id}`);
|
|
172
189
|
return of(true);
|
|
173
190
|
}
|
|
174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
175
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
191
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
192
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
|
|
176
193
|
}
|
|
177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
|
|
178
195
|
type: Injectable,
|
|
179
196
|
args: [{
|
|
180
197
|
providedIn: 'root',
|
|
@@ -480,16 +497,17 @@ class OnemrvaMatFileUploadStore extends ComponentStore {
|
|
|
480
497
|
if (this.customValidationFn)
|
|
481
498
|
this.fn = this.customValidationFn;
|
|
482
499
|
}
|
|
483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
484
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
500
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
501
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
|
|
485
502
|
}
|
|
486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
|
|
487
504
|
type: Injectable
|
|
488
505
|
}], ctorParameters: () => [] });
|
|
489
506
|
|
|
490
507
|
class DndDirective {
|
|
491
508
|
constructor() {
|
|
492
|
-
this.fileOver = signal(false,
|
|
509
|
+
this.fileOver = signal(false, /* @ts-ignore */
|
|
510
|
+
...(ngDevMode ? [{ debugName: "fileOver" }] : /* istanbul ignore next */ []));
|
|
493
511
|
this.fileDropped = output();
|
|
494
512
|
}
|
|
495
513
|
// Dragover listener
|
|
@@ -514,10 +532,10 @@ class DndDirective {
|
|
|
514
532
|
this.fileDropped.emit(files);
|
|
515
533
|
}
|
|
516
534
|
}
|
|
517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
518
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
535
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
536
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: DndDirective, isStandalone: true, selector: "[appDnd]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.fileover": "fileOver()" } }, ngImport: i0 }); }
|
|
519
537
|
}
|
|
520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DndDirective, decorators: [{
|
|
521
539
|
type: Directive,
|
|
522
540
|
args: [{
|
|
523
541
|
selector: '[appDnd]',
|
|
@@ -538,16 +556,26 @@ let NEXT_ID = 0;
|
|
|
538
556
|
// TODO: Multiple customisable error messages (custom validators)
|
|
539
557
|
class OnemrvaMatFileUploadComponent {
|
|
540
558
|
constructor() {
|
|
541
|
-
this.accept = input([],
|
|
542
|
-
|
|
543
|
-
this.
|
|
544
|
-
|
|
545
|
-
this.
|
|
546
|
-
|
|
547
|
-
this.
|
|
548
|
-
|
|
549
|
-
this.
|
|
550
|
-
|
|
559
|
+
this.accept = input([], /* @ts-ignore */
|
|
560
|
+
...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
561
|
+
this.maxFileSize = input(0, /* @ts-ignore */
|
|
562
|
+
...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
|
|
563
|
+
this.numberOfFiles = input(0, /* @ts-ignore */
|
|
564
|
+
...(ngDevMode ? [{ debugName: "numberOfFiles" }] : /* istanbul ignore next */ []));
|
|
565
|
+
this.maxTotalFileSize = input(0, /* @ts-ignore */
|
|
566
|
+
...(ngDevMode ? [{ debugName: "maxTotalFileSize" }] : /* istanbul ignore next */ []));
|
|
567
|
+
this.uploadOnDrop = input(true, /* @ts-ignore */
|
|
568
|
+
...(ngDevMode ? [{ debugName: "uploadOnDrop" }] : /* istanbul ignore next */ []));
|
|
569
|
+
this.initialFiles = input([], /* @ts-ignore */
|
|
570
|
+
...(ngDevMode ? [{ debugName: "initialFiles" }] : /* istanbul ignore next */ []));
|
|
571
|
+
this.errorMessage = input('', /* @ts-ignore */
|
|
572
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
573
|
+
this.hideExtensions = input([], /* @ts-ignore */
|
|
574
|
+
...(ngDevMode ? [{ debugName: "hideExtensions" }] : /* istanbul ignore next */ []));
|
|
575
|
+
this.dropFilesHereTextTranslationKey = input('file.upload.drag.and.drop', /* @ts-ignore */
|
|
576
|
+
...(ngDevMode ? [{ debugName: "dropFilesHereTextTranslationKey" }] : /* istanbul ignore next */ []));
|
|
577
|
+
this.filePanelTemplate = input.required(/* @ts-ignore */
|
|
578
|
+
...(ngDevMode ? [{ debugName: "filePanelTemplate" }] : /* istanbul ignore next */ []));
|
|
551
579
|
this.retryFile = new EventEmitter();
|
|
552
580
|
/**
|
|
553
581
|
* Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-multi-select-0"`.
|
|
@@ -565,7 +593,8 @@ class OnemrvaMatFileUploadComponent {
|
|
|
565
593
|
* <onemrva-mat-multi-select id="my-first-multi-select"></onemrva-mat-multi-select>
|
|
566
594
|
* ```
|
|
567
595
|
*/
|
|
568
|
-
this.dataCy = input(`onemrva-mat-multi-select-${NEXT_ID++}`,
|
|
596
|
+
this.dataCy = input(`onemrva-mat-multi-select-${NEXT_ID++}`, /* @ts-ignore */
|
|
597
|
+
...(ngDevMode ? [{ debugName: "dataCy" }] : /* istanbul ignore next */ []));
|
|
569
598
|
this.fileDropRef = viewChild.required(`fileDropRef`);
|
|
570
599
|
this.inputId = `fileDropRef-${NEXT_ID}`;
|
|
571
600
|
this.maxFileSizeFormatted = '';
|
|
@@ -650,8 +679,8 @@ class OnemrvaMatFileUploadComponent {
|
|
|
650
679
|
this.fileDropRef().nativeElement.value = null;
|
|
651
680
|
});
|
|
652
681
|
}
|
|
653
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
683
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: OnemrvaMatFileUploadComponent, isStandalone: true, selector: "onemrva-mat-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfFiles: { classPropertyName: "numberOfFiles", publicName: "numberOfFiles", isSignal: true, isRequired: false, transformFunction: null }, maxTotalFileSize: { classPropertyName: "maxTotalFileSize", publicName: "maxTotalFileSize", isSignal: true, isRequired: false, transformFunction: null }, uploadOnDrop: { classPropertyName: "uploadOnDrop", publicName: "uploadOnDrop", isSignal: true, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hideExtensions: { classPropertyName: "hideExtensions", publicName: "hideExtensions", isSignal: true, isRequired: false, transformFunction: null }, dropFilesHereTextTranslationKey: { classPropertyName: "dropFilesHereTextTranslationKey", publicName: "dropFilesHereTextTranslationKey", isSignal: true, isRequired: false, transformFunction: null }, filePanelTemplate: { classPropertyName: "filePanelTemplate", publicName: "filePanelTemplate", isSignal: true, isRequired: true, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-cy": "dataCy()" } }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (files$ | async; as files) {\n <div\n class=\"onemrva-mat-file-upload-drop-area\"\n appDnd\n (fileDropped)=\"onFileDropped($event)\"\n [class.filein]=\"files.length > 0\"\n >\n <input\n type=\"file\"\n #fileDropRef\n [attr.id]=\"inputId\"\n role=\"button\"\n multiple\n (change)=\"fileBrowseHandler($event)\"\n accept=\"{{ acceptString$ | async }}\"\n />\n @if (numberOfFiles() === 0 || numberOfFiles() > files.length) {\n <div class=\"download-outer\">\n <div class=\"download-icon\">\n <mat-icon class=\"onemrva-upload xxlarge\">download</mat-icon>\n </div>\n\n <div class=\"download-text\">\n {{ dropFilesHereTextTranslationKey() | translate }}\n {{ 'file.upload.or' | translate }}\n <label for=\"{{ inputId }}\" class=\"content\">\n {{ 'file.upload.browse.for.file' | translate }} </label\n ><br />\n @if (maxFileSize() > 0) {\n <span class=\"restrictions\">\n {{ 'file.upload.maximum' | translate }}\n {{ maxFileSizeFormatted }}\n\n @if (accept().length > 0) {\n <span>{{ '| ' }}</span>\n }\n\n {{ acceptString$ | async }}\n </span>\n }\n </div>\n </div>\n }\n <ul class=\"files-list\">\n @for (file of files; track file.id) {\n <li>\n <ng-container\n *ngTemplateOutlet=\"\n filePanelTemplate();\n context: { file, $implicit: file }\n \"\n />\n </li>\n }\n </ul>\n </div>\n @if (fileUploadErrorMessage$ | async; as fileUploadErrorMessage) {\n <mat-error>\n {{\n fileUploadErrorMessage\n | translate\n : {\n limit: numberOfFiles(),\n maxTotalFileSize: formattedSize(maxTotalFileSize()),\n }\n }}\n @if (errorMessage() !== '') {\n [ {{ errorMessage() }} ]\n }\n </mat-error>\n }\n}\n", styles: [":host .mat-mdc-form-field-error{margin-bottom:var(--spacer);padding:var(--spacer) 1em;background-color:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container);border-bottom:1px solid var(--mat-sys-error);display:flex;line-height:1.125rem}:host .mat-mdc-form-field-error:before{font-family:var(--icon-font);content:\"\\e000\";float:left;font-size:1rem;font-variation-settings:\"FILL\" 1;margin-right:var(--spacer);vertical-align:baseline;flex:0 0 var(--double-spacer)}:host ul{list-style:none;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-inline-start:0}:host ul li{width:100%}:host .onemrva-mat-file-upload-drop-area{padding:var(--triple-spacer);text-align:left;border:dashed 2px var(--mat-sys-outline);position:relative;border-radius:var(--border-radius);transition:background-color .3s ease-in-out,border .3s ease-in-out}:host .onemrva-mat-file-upload-drop-area mat-icon{color:var(--mat-sys-primary)}:host .onemrva-mat-file-upload-drop-area.fu-error{border:dashed 2px var(--mat-sys-error)}:host .onemrva-mat-file-upload-drop-area input[type=file]{display:none}:host .onemrva-mat-file-upload-drop-area .download-outer{display:flex;width:100%;margin:0}:host .onemrva-mat-file-upload-drop-area .download-outer .download-icon{padding-right:var(--double-spacer)}:host .onemrva-mat-file-upload-drop-area .download-outer .download-text label{display:block;color:var(--mat-sys-primary);text-decoration:underline;cursor:pointer;font-weight:700}:host .onemrva-mat-file-upload-drop-area .download-outer .download-text .restrictions{display:block;color:var(--mat-sys-on-surface-variant);margin-bottom:0}:host .onemrva-mat-file-upload-drop-area.filein .download-outer{margin:0 0 var(--triple-spacer) 0}:host .onemrva-mat-file-upload-drop-area.fileover{background:var(--mat-sys-primary-container);border:2px dashed var(--mat-sys-primary)}:host .onemrva-mat-file-upload-drop-area .files-list{display:flex;flex-flow:row wrap;gap:var(--double-spacer)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: DndDirective, selector: "[appDnd]", outputs: ["fileDropped"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
655
684
|
trigger('inOutAnimation', [
|
|
656
685
|
state('in', style({ opacity: 1 })),
|
|
657
686
|
transition(':enter', [
|
|
@@ -675,7 +704,7 @@ class OnemrvaMatFileUploadComponent {
|
|
|
675
704
|
]),
|
|
676
705
|
] }); }
|
|
677
706
|
}
|
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
|
|
679
708
|
type: Component,
|
|
680
709
|
args: [{ selector: 'onemrva-mat-file-upload', standalone: true, animations: [
|
|
681
710
|
trigger('inOutAnimation', [
|
|
@@ -717,8 +746,8 @@ const components = [
|
|
|
717
746
|
];
|
|
718
747
|
|
|
719
748
|
class OnemrvaMatFileUploadModule {
|
|
720
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
721
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
750
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
|
|
722
751
|
CommonModule,
|
|
723
752
|
ReactiveFormsModule,
|
|
724
753
|
MatButtonModule,
|
|
@@ -727,7 +756,7 @@ class OnemrvaMatFileUploadModule {
|
|
|
727
756
|
TranslateModule,
|
|
728
757
|
MatIconModule,
|
|
729
758
|
MatInputModule], exports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective] }); }
|
|
730
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
759
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadModule, providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService], imports: [components,
|
|
731
760
|
CommonModule,
|
|
732
761
|
ReactiveFormsModule,
|
|
733
762
|
MatButtonModule,
|
|
@@ -737,7 +766,7 @@ class OnemrvaMatFileUploadModule {
|
|
|
737
766
|
MatIconModule,
|
|
738
767
|
MatInputModule] }); }
|
|
739
768
|
}
|
|
740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
769
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
|
|
741
770
|
type: NgModule,
|
|
742
771
|
args: [{
|
|
743
772
|
declarations: [],
|