@ptsecurity/mosaic 16.4.0 → 16.4.2

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.
Files changed (96) hide show
  1. package/_theming.scss +99 -24
  2. package/_visual.scss +82 -19
  3. package/autocomplete/autocomplete-trigger.directive.d.ts +7 -1
  4. package/core/locales/en-US.d.ts +17 -0
  5. package/core/locales/es-LA.d.ts +17 -0
  6. package/core/locales/fa-IR.d.ts +17 -0
  7. package/core/locales/index.d.ts +6 -0
  8. package/core/locales/locale-service.d.ts +102 -0
  9. package/core/locales/pt-BR.d.ts +17 -0
  10. package/core/locales/ru-RU.d.ts +17 -0
  11. package/core/locales/zh-CN.d.ts +17 -0
  12. package/core/pop-up/pop-up-trigger.d.ts +3 -1
  13. package/core/styles/theming/_components-theming.scss +4 -2
  14. package/core/styles/theming/_scrollbars.scss +1 -1
  15. package/ellipsis-center/ellipsis-center.directive.d.ts +3 -2
  16. package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +14 -2
  17. package/esm2022/core/locales/en-US.mjs +18 -1
  18. package/esm2022/core/locales/es-LA.mjs +18 -1
  19. package/esm2022/core/locales/fa-IR.mjs +18 -1
  20. package/esm2022/core/locales/index.mjs +7 -1
  21. package/esm2022/core/locales/pt-BR.mjs +18 -1
  22. package/esm2022/core/locales/ru-RU.mjs +18 -1
  23. package/esm2022/core/locales/zh-CN.mjs +18 -1
  24. package/esm2022/core/pop-up/pop-up-trigger.mjs +19 -11
  25. package/esm2022/core/version.mjs +2 -2
  26. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +7 -5
  27. package/esm2022/file-upload/file-upload.module.mjs +8 -4
  28. package/esm2022/file-upload/multiple-file-upload.component.mjs +52 -48
  29. package/esm2022/file-upload/single-file-upload.component.mjs +41 -36
  30. package/esm2022/form-field/form-field.mjs +2 -2
  31. package/esm2022/input/input-password.mjs +2 -3
  32. package/esm2022/modal/modal.component.mjs +6 -6
  33. package/esm2022/navbar/navbar-item.component.mjs +9 -9
  34. package/esm2022/select/select-option.directive.mjs +7 -5
  35. package/esm2022/select/select.component.mjs +14 -7
  36. package/esm2022/tabs/tab-header.component.mjs +2 -2
  37. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  38. package/esm2022/tags/tag-input.mjs +28 -8
  39. package/esm2022/timezone/timezone-option.directive.mjs +7 -5
  40. package/esm2022/title/title.directive.mjs +2 -3
  41. package/esm2022/tooltip/tooltip.component.mjs +27 -12
  42. package/esm2022/tree-select/tree-select.component.mjs +21 -8
  43. package/fesm2022/ptsecurity-mosaic-autocomplete.mjs +13 -1
  44. package/fesm2022/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  45. package/fesm2022/ptsecurity-mosaic-core.mjs +122 -12
  46. package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
  47. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs +5 -4
  48. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -1
  49. package/fesm2022/ptsecurity-mosaic-file-upload.mjs +90 -78
  50. package/fesm2022/ptsecurity-mosaic-file-upload.mjs.map +1 -1
  51. package/fesm2022/ptsecurity-mosaic-form-field.mjs +2 -2
  52. package/fesm2022/ptsecurity-mosaic-form-field.mjs.map +1 -1
  53. package/fesm2022/ptsecurity-mosaic-input.mjs +1 -2
  54. package/fesm2022/ptsecurity-mosaic-input.mjs.map +1 -1
  55. package/fesm2022/ptsecurity-mosaic-modal.mjs +5 -5
  56. package/fesm2022/ptsecurity-mosaic-modal.mjs.map +1 -1
  57. package/fesm2022/ptsecurity-mosaic-navbar.mjs +8 -8
  58. package/fesm2022/ptsecurity-mosaic-navbar.mjs.map +1 -1
  59. package/fesm2022/ptsecurity-mosaic-select.mjs +23 -15
  60. package/fesm2022/ptsecurity-mosaic-select.mjs.map +1 -1
  61. package/fesm2022/ptsecurity-mosaic-tabs.mjs +4 -4
  62. package/fesm2022/ptsecurity-mosaic-tabs.mjs.map +1 -1
  63. package/fesm2022/ptsecurity-mosaic-tags.mjs +26 -7
  64. package/fesm2022/ptsecurity-mosaic-tags.mjs.map +1 -1
  65. package/fesm2022/ptsecurity-mosaic-timezone.mjs +5 -4
  66. package/fesm2022/ptsecurity-mosaic-timezone.mjs.map +1 -1
  67. package/fesm2022/ptsecurity-mosaic-title.mjs +1 -2
  68. package/fesm2022/ptsecurity-mosaic-title.mjs.map +1 -1
  69. package/fesm2022/ptsecurity-mosaic-tooltip.mjs +25 -11
  70. package/fesm2022/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  71. package/fesm2022/ptsecurity-mosaic-tree-select.mjs +20 -7
  72. package/fesm2022/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  73. package/file-upload/_file-upload-theme.scss +1 -1
  74. package/file-upload/file-upload.module.d.ts +2 -1
  75. package/file-upload/file-upload.scss +0 -8
  76. package/file-upload/multiple-file-upload.component.d.ts +16 -13
  77. package/file-upload/multiple-file-upload.component.scss +56 -24
  78. package/file-upload/single-file-upload.component.d.ts +14 -13
  79. package/file-upload/single-file-upload.component.scss +6 -0
  80. package/form-field/form-field.scss +2 -0
  81. package/input/input-password.d.ts +0 -1
  82. package/link/_link-theme.scss +2 -1
  83. package/navbar/navbar-item.component.d.ts +4 -4
  84. package/package.json +8 -8
  85. package/prebuilt-themes/dark-theme.css +1 -1
  86. package/prebuilt-themes/default-theme.css +1 -1
  87. package/select/select-option.directive.d.ts +3 -2
  88. package/select/select.component.d.ts +1 -0
  89. package/tabs/_tabs-theme.scss +5 -0
  90. package/tabs/tab-header.scss +12 -0
  91. package/tabs/tab-nav-bar/tab-nav-bar.scss +12 -0
  92. package/tags/tag-input.d.ts +9 -4
  93. package/timezone/timezone-option.directive.d.ts +3 -2
  94. package/title/title.directive.d.ts +0 -1
  95. package/tooltip/tooltip.component.d.ts +12 -8
  96. package/tree-select/tree-select.component.d.ts +1 -0
@@ -1,3 +1,4 @@
1
+ import * as i3 from '@angular/cdk/a11y';
1
2
  import * as i2 from '@angular/cdk/bidi';
2
3
  import * as i1 from '@angular/cdk/overlay';
3
4
  import * as i0 from '@angular/core';
@@ -12,8 +13,8 @@ class McEllipsisCenterDirective extends McTooltipTrigger {
12
13
  this._mcEllipsisCenter = value;
13
14
  this.refresh();
14
15
  }
15
- constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, renderer) {
16
- super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
16
+ constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor, renderer) {
17
+ super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
17
18
  this.renderer = renderer;
18
19
  this.minVisibleLength = MIN_VISIBLE_LENGTH;
19
20
  this.resizeStream = new Subject();
@@ -67,7 +68,7 @@ class McEllipsisCenterDirective extends McTooltipTrigger {
67
68
  this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);
68
69
  this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);
69
70
  }
70
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McEllipsisCenterDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: MC_TOOLTIP_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
71
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McEllipsisCenterDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: MC_TOOLTIP_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: i3.FocusMonitor }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
71
72
  /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: { mcEllipsisCenter: "mcEllipsisCenter", minVisibleLength: "minVisibleLength" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, classAttribute: "mc-ellipsis-center" }, usesInheritance: true, ngImport: i0 }); }
72
73
  }
73
74
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McEllipsisCenterDirective, decorators: [{
@@ -84,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
84
85
  args: [MC_TOOLTIP_SCROLL_STRATEGY]
85
86
  }] }, { type: i2.Directionality, decorators: [{
86
87
  type: Optional
87
- }] }, { type: i0.Renderer2 }]; }, propDecorators: { mcEllipsisCenter: [{
88
+ }] }, { type: i3.FocusMonitor }, { type: i0.Renderer2 }]; }, propDecorators: { mcEllipsisCenter: [{
88
89
  type: Input
89
90
  }], minVisibleLength: [{
90
91
  type: Input
@@ -1 +1 @@
1
- {"version":3,"file":"ptsecurity-mosaic-ellipsis-center.mjs","sources":["../../../packages/mosaic/ellipsis-center/ellipsis-center.directive.ts","../../../packages/mosaic/ellipsis-center/ptsecurity-mosaic-ellipsis-center.ts"],"sourcesContent":["import { Directionality } from '@angular/cdk/bidi';\nimport { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';\nimport {\n Directive,\n ElementRef,\n Input,\n OnInit,\n OnDestroy,\n NgZone,\n ViewContainerRef,\n Inject,\n Optional, Renderer2, AfterViewInit, NgModule\n} from '@angular/core';\nimport { McTooltipTrigger, MC_TOOLTIP_SCROLL_STRATEGY } from '@ptsecurity/mosaic/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n selector: '[mcEllipsisCenter]',\n host: {\n class: 'mc-ellipsis-center',\n '(window:resize)': 'resizeStream.next($event)'\n }\n})\nexport class McEllipsisCenterDirective extends McTooltipTrigger\n implements OnInit, AfterViewInit, OnDestroy {\n @Input() set mcEllipsisCenter(value: string) {\n this._mcEllipsisCenter = value;\n this.refresh();\n }\n @Input() minVisibleLength: number = MIN_VISIBLE_LENGTH;\n\n readonly resizeStream = new Subject<Event>();\n\n private _mcEllipsisCenter: string;\n\n private resizeSubscription = Subscription.EMPTY;\n\n private readonly debounceInterval: number = 50;\n\n constructor(\n overlay: Overlay,\n elementRef: ElementRef<HTMLElement>,\n ngZone: NgZone,\n scrollDispatcher: ScrollDispatcher,\n hostView: ViewContainerRef,\n @Inject(MC_TOOLTIP_SCROLL_STRATEGY) scrollStrategy: any,\n @Optional() direction: Directionality,\n private renderer: Renderer2\n ) {\n super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);\n }\n\n override ngOnInit(): void {\n super.ngOnInit();\n this.content = this._mcEllipsisCenter;\n this.refresh();\n }\n\n ngAfterViewInit(): void {\n this.resizeSubscription = this.resizeStream\n .pipe(debounceTime(this.debounceInterval))\n .subscribe(() => this.refresh());\n }\n\n ngOnDestroy() {\n super.ngOnDestroy();\n this.resizeSubscription.unsubscribe();\n }\n\n private refresh() {\n let start = '';\n let end = '';\n const dataTextStartLength = 0.75;\n this.content = this._mcEllipsisCenter;\n\n const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {\n const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n if (element) {\n this.renderer.removeChild(this.elementRef.nativeElement, element);\n }\n const newElement = this.renderer.createElement('span');\n this.renderer.addClass(newElement, querySelector);\n\n return newElement;\n });\n\n this.renderer.appendChild(dataTextStart, this.renderer.createText(this._mcEllipsisCenter));\n this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n setTimeout(() => {\n this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n if (this.disabled) {\n start = '';\n end = this._mcEllipsisCenter;\n } else {\n const sliceIndex: number = Math.round(this._mcEllipsisCenter.length * dataTextStartLength);\n\n start = this._mcEllipsisCenter.slice(0, sliceIndex);\n end = this._mcEllipsisCenter.slice(sliceIndex);\n }\n dataTextStart.innerText = start;\n dataTextEnd.innerText = end;\n });\n\n this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n }\n}\n\n@NgModule({\n imports: [],\n exports: [McEllipsisCenterDirective],\n declarations: [McEllipsisCenterDirective]\n})\nexport class McEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ptsecurity-mosaic-ellipsis-center.mjs","sources":["../../../packages/mosaic/ellipsis-center/ellipsis-center.directive.ts","../../../packages/mosaic/ellipsis-center/ptsecurity-mosaic-ellipsis-center.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';\nimport {\n Directive,\n ElementRef,\n Input,\n OnInit,\n OnDestroy,\n NgZone,\n ViewContainerRef,\n Inject,\n Optional, Renderer2, AfterViewInit, NgModule\n} from '@angular/core';\nimport { McTooltipTrigger, MC_TOOLTIP_SCROLL_STRATEGY } from '@ptsecurity/mosaic/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n selector: '[mcEllipsisCenter]',\n host: {\n class: 'mc-ellipsis-center',\n '(window:resize)': 'resizeStream.next($event)'\n }\n})\nexport class McEllipsisCenterDirective extends McTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n @Input() set mcEllipsisCenter(value: string) {\n this._mcEllipsisCenter = value;\n this.refresh();\n }\n @Input() minVisibleLength: number = MIN_VISIBLE_LENGTH;\n\n readonly resizeStream = new Subject<Event>();\n\n private _mcEllipsisCenter: string;\n\n private resizeSubscription = Subscription.EMPTY;\n\n private readonly debounceInterval: number = 50;\n\n constructor(\n overlay: Overlay,\n elementRef: ElementRef<HTMLElement>,\n ngZone: NgZone,\n scrollDispatcher: ScrollDispatcher,\n hostView: ViewContainerRef,\n @Inject(MC_TOOLTIP_SCROLL_STRATEGY) scrollStrategy: any,\n @Optional() direction: Directionality,\n focusMonitor: FocusMonitor,\n private renderer: Renderer2\n ) {\n super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);\n }\n\n override ngOnInit(): void {\n super.ngOnInit();\n this.content = this._mcEllipsisCenter;\n this.refresh();\n }\n\n ngAfterViewInit(): void {\n this.resizeSubscription = this.resizeStream\n .pipe(debounceTime(this.debounceInterval))\n .subscribe(() => this.refresh());\n }\n\n ngOnDestroy() {\n super.ngOnDestroy();\n this.resizeSubscription.unsubscribe();\n }\n\n private refresh() {\n let start = '';\n let end = '';\n const dataTextStartLength = 0.75;\n this.content = this._mcEllipsisCenter;\n\n const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {\n const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n if (element) {\n this.renderer.removeChild(this.elementRef.nativeElement, element);\n }\n const newElement = this.renderer.createElement('span');\n this.renderer.addClass(newElement, querySelector);\n\n return newElement;\n });\n\n this.renderer.appendChild(dataTextStart, this.renderer.createText(this._mcEllipsisCenter));\n this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n setTimeout(() => {\n this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n if (this.disabled) {\n start = '';\n end = this._mcEllipsisCenter;\n } else {\n const sliceIndex: number = Math.round(this._mcEllipsisCenter.length * dataTextStartLength);\n\n start = this._mcEllipsisCenter.slice(0, sliceIndex);\n end = this._mcEllipsisCenter.slice(sliceIndex);\n }\n dataTextStart.innerText = start;\n dataTextEnd.innerText = end;\n });\n\n this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n }\n}\n\n@NgModule({\n imports: [],\n exports: [McEllipsisCenterDirective],\n declarations: [McEllipsisCenterDirective]\n})\nexport class McEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -1,23 +1,24 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { InjectionToken, EventEmitter, Directive, Output, TemplateRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
3
+ import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i5$1 from '@ptsecurity/mosaic/button';
5
+ import * as i4$1 from '@ptsecurity/mosaic/button';
6
6
  import { McButtonModule } from '@ptsecurity/mosaic/button';
7
7
  import * as i9 from '@ptsecurity/mosaic/core';
8
- import { McDataSizeModule } from '@ptsecurity/mosaic/core';
9
- import * as i7 from '@ptsecurity/mosaic/ellipsis-center';
8
+ import { ruRULocaleData, MC_LOCALE_SERVICE, McDataSizeModule } from '@ptsecurity/mosaic/core';
9
+ import * as i6 from '@ptsecurity/mosaic/ellipsis-center';
10
10
  import { McEllipsisCenterModule } from '@ptsecurity/mosaic/ellipsis-center';
11
- import * as i6 from '@ptsecurity/mosaic/form-field';
11
+ import * as i5 from '@ptsecurity/mosaic/form-field';
12
12
  import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
13
- import * as i4 from '@ptsecurity/mosaic/icon';
13
+ import * as i3 from '@ptsecurity/mosaic/icon';
14
14
  import { McIconModule } from '@ptsecurity/mosaic/icon';
15
- import * as i5 from '@ptsecurity/mosaic/list';
15
+ import * as i7 from '@ptsecurity/mosaic/link';
16
+ import { McLinkModule } from '@ptsecurity/mosaic/link';
17
+ import * as i4 from '@ptsecurity/mosaic/list';
16
18
  import { McListModule } from '@ptsecurity/mosaic/list';
17
- import * as i3 from '@ptsecurity/mosaic/progress-spinner';
19
+ import * as i2 from '@ptsecurity/mosaic/progress-spinner';
18
20
  import { McProgressSpinnerModule } from '@ptsecurity/mosaic/progress-spinner';
19
21
  import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
20
- import * as i1 from '@angular/cdk/a11y';
21
22
  import { Subscription, BehaviorSubject } from 'rxjs';
22
23
 
23
24
  /* Object for labels customization inside file upload component */
@@ -102,17 +103,7 @@ const unwrapDirectory = async (item) => {
102
103
  };
103
104
 
104
105
  let nextMultipleFileUploadUniqueId = 0;
105
- const MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = {
106
- captionText: 'Перетащите сюда или',
107
- captionTextWhenSelected: 'Перетащите еще или',
108
- captionTextForCompactSize: 'Перетащите файлы или',
109
- browseLink: 'выберите',
110
- title: 'Загрузите файлы',
111
- gridHeaders: {
112
- file: 'Файл',
113
- size: 'Размер'
114
- }
115
- };
106
+ const MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = ruRULocaleData['ru-RU'].fileUpload.multiple;
116
107
  class McMultipleFileUploadComponent {
117
108
  get acceptedFiles() {
118
109
  return this.accept && this.accept.length > 0 ? this.accept.map((ext) => `.${ext}`).join(',') : '*/*';
@@ -120,31 +111,33 @@ class McMultipleFileUploadComponent {
120
111
  get hasErrors() {
121
112
  return this.errors && !!this.errors.length;
122
113
  }
123
- constructor(focusMonitor, cdr, renderer, config) {
124
- this.focusMonitor = focusMonitor;
125
- this.cdr = cdr;
114
+ constructor(renderer, cdr, configuration, localeService) {
126
115
  this.renderer = renderer;
127
- this.config = config;
116
+ this.cdr = cdr;
117
+ this.configuration = configuration;
118
+ this.localeService = localeService;
128
119
  this.errors = [];
129
120
  this.files = [];
130
121
  this.size = 'default';
131
122
  this.inputId = `mc-multiple-file-upload-${nextMultipleFileUploadUniqueId++}`;
132
123
  this.fileQueueChanged = new EventEmitter();
133
- this.hasFocus = false;
134
- this.focusMonitorSubscription = Subscription.EMPTY;
135
- this.config = config || MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
136
- this.columnDefs = [
137
- { header: this.config.gridHeaders.file, cssClass: 'file' },
138
- { header: this.config.gridHeaders.size, cssClass: 'size' },
139
- { header: '', cssClass: 'action' }
140
- ];
141
- }
142
- ngAfterViewInit() {
143
- this.focusMonitorSubscription = this.focusMonitor.monitor(this.input)
144
- .subscribe((origin) => this.onFocus(origin === 'keyboard'));
124
+ this.updateLocaleParams = () => {
125
+ this.config = this.configuration || this.localeService?.getParams('fileUpload').multiple;
126
+ this.columnDefs = [
127
+ { header: this.config.gridHeaders.file, cssClass: 'file' },
128
+ { header: this.config.gridHeaders.size, cssClass: 'size' },
129
+ { header: '', cssClass: 'action' }
130
+ ];
131
+ this.makeCaptionText();
132
+ this.cdr.markForCheck();
133
+ };
134
+ this.localeSubscription = this.localeService?.changes.subscribe(this.updateLocaleParams) || Subscription.EMPTY;
135
+ if (!localeService) {
136
+ this.initDefaultParams();
137
+ }
145
138
  }
146
139
  ngOnDestroy() {
147
- this.focusMonitorSubscription.unsubscribe();
140
+ this.localeSubscription.unsubscribe();
148
141
  }
149
142
  onFileSelectedViaClick({ target }) {
150
143
  if (this.disabled) {
@@ -178,13 +171,6 @@ class McMultipleFileUploadComponent {
178
171
  onFileListChange() {
179
172
  this.fileQueueChanged.emit(this.files);
180
173
  }
181
- onFocus(focusState) {
182
- if (this.disabled) {
183
- return;
184
- }
185
- this.hasFocus = focusState;
186
- this.cdr.markForCheck();
187
- }
188
174
  mapToFileItem(files) {
189
175
  if (!files) {
190
176
  return [];
@@ -215,19 +201,38 @@ class McMultipleFileUploadComponent {
215
201
  const fileExt = file.name.split('.').pop() || '';
216
202
  return this.acceptedFiles !== '*/*' && this.acceptedFiles.length > 0 ? this.acceptedFiles.includes(fileExt) : true;
217
203
  }
218
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McMultipleFileUploadComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
219
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: McMultipleFileUploadComponent, selector: "mc-multiple-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", size: "size", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["mcFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.selected]=\"files && files.length\"\n [ngClass]=\"size\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n <ng-container *ngIf=\"!files.length; else fileOutput\">\n <div class=\"dropzone\">\n <ng-container *ngIf=\"size === 'default' else compactCaption\">\n <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n <div class=\"dropzone__text\">\n <span class=\"multiple__header\">{{ config.title }}</span>\n <div>\n <span class=\"multiple__caption\">\n {{ config.captionText }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n\n\n </ng-container>\n <input #input\n type=\"file\"\n class=\"cdk-visually-hidden\"\n multiple\n [id]=\"inputId\"\n [accept]=\"acceptedFiles\"\n [disabled]=\"disabled\"\n (change)=\"onFileSelectedViaClick($event)\"\n >\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n <mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n </mc-hint>\n\n <ng-container *ngIf=\"hasErrors\">\n <mc-hint class=\"mc-file-upload__hint mc-error\"\n *ngFor=\"let error of errors\">\n {{ error }}\n </mc-hint>\n </ng-container>\n</div>\n\n<ng-template #fileOutput>\n <div class=\"file-upload__dropzone\">\n <div class=\"mc-file-upload__grid\">\n <div class=\"mc-file-multiple-uploaded__header\">\n <div class=\"mc-file-multiple-uploaded__header-inner\">\n <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n {{ column.header }}\n </div>\n </div>\n </div>\n\n <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n <mc-list-option\n class=\"multiple__uploaded-item\"\n [value]=\"file.file.name\"\n (keydown.delete)=\"deleteFile(index)\"\n (keydown.backspace)=\"deleteFile(index)\"\n *ngFor=\"let file of files; let index = index;\">\n <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n <div class=\"mc-file-upload__file\">\n <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\"\n [ngTemplateOutlet]=\"$any(customFileIcon)\"\n [ngTemplateOutletContext]=\"{ $implicit: file }\"\n >\n </ng-container>\n\n <mc-progress-spinner\n class=\"pt-nat-file-upload-name-cell__icon\"\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n </div>\n <div class=\"mc-file-upload__size\">\n {{ file.file.size | mcDataSize }}\n </div>\n <div class=\"mc-file-upload__action\">\n <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n </div>\n </div>\n </mc-list-option>\n </mc-list-selection>\n </div>\n\n <div class=\"btn-upload\">\n <div class=\"dropzone\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ config.captionTextWhenSelected }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #compactCaption>\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ config.captionText }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px)}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:144px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:4px 12px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i5.McListSelection, selector: "mc-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["mcListSelection"] }, { kind: "component", type: i5.McListOption, selector: "mc-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["mcListOption"] }, { kind: "directive", type: i6.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i7.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.McDataSizePipe, name: "mcDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
204
+ initDefaultParams() {
205
+ this.config = MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
206
+ this.columnDefs = [
207
+ { header: this.config.gridHeaders.file, cssClass: 'file' },
208
+ { header: this.config.gridHeaders.size, cssClass: 'size' },
209
+ { header: '', cssClass: 'action' }
210
+ ];
211
+ this.makeCaptionText();
212
+ }
213
+ makeCaptionText() {
214
+ this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
215
+ this.separatedCaptionTextWhenSelected = this.config.captionTextWhenSelected.split('{{ browseLink }}');
216
+ this.separatedCaptionTextForCompactSize = this.config.captionTextForCompactSize.split('{{ browseLink }}');
217
+ }
218
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McMultipleFileUploadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: MC_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
219
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: McMultipleFileUploadComponent, selector: "mc-multiple-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", size: "size", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["mcFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.selected]=\"files && files.length\"\n [ngClass]=\"size\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n <ng-container *ngIf=\"!files.length; else fileOutput\">\n <div class=\"dropzone\">\n <ng-container *ngIf=\"size === 'default' else compactCaption\">\n <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n <div class=\"dropzone__text\">\n <span class=\"multiple__header\">{{ config.title }}</span>\n <div>\n <span class=\"multiple__caption\">\n {{ separatedCaptionText[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n <mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n </mc-hint>\n\n <ng-container *ngIf=\"hasErrors\">\n <mc-hint class=\"mc-file-upload__hint mc-error\"\n *ngFor=\"let error of errors\">\n {{ error }}\n </mc-hint>\n </ng-container>\n</div>\n\n<ng-template #fileOutput>\n <div class=\"file-upload__dropzone\">\n <div class=\"mc-file-upload__grid\">\n <div class=\"mc-file-multiple-uploaded__header\">\n <div class=\"mc-file-multiple-uploaded__header-inner\">\n <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n {{ column.header }}\n </div>\n </div>\n </div>\n\n <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n <mc-list-option\n class=\"multiple__uploaded-item\"\n [value]=\"file.file.name\"\n (keydown.delete)=\"deleteFile(index)\"\n (keydown.backspace)=\"deleteFile(index)\"\n *ngFor=\"let file of files; let index = index;\">\n <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n <div class=\"mc-file-upload__file\">\n <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\"\n [ngTemplateOutlet]=\"$any(customFileIcon)\"\n [ngTemplateOutletContext]=\"{ $implicit: file }\"\n >\n </ng-container>\n\n <mc-progress-spinner\n class=\"pt-nat-file-upload-name-cell__icon\"\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n </div>\n <div class=\"mc-file-upload__size\">\n {{ file.file.size | mcDataSize }}\n </div>\n <div class=\"mc-file-upload__action\">\n <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n </div>\n </div>\n </mc-list-option>\n </mc-list-selection>\n </div>\n\n <div class=\"btn-upload\">\n <div class=\"dropzone\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextWhenSelected[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextWhenSelected[1] }}\n </span>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #compactCaption>\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextForCompactSize[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextForCompactSize[1] }}\n </span>\n</ng-template>\n\n<ng-template #inputTemplate>\n <input #input\n type=\"file\"\n class=\"cdk-visually-hidden\"\n multiple\n [id]=\"inputId\"\n [accept]=\"acceptedFiles\"\n [disabled]=\"disabled\"\n (change)=\"onFileSelectedViaClick($event)\">\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);height:36px}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:142px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:3px 12px 4px}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload.compact .dropzone .dropzone__text{margin-left:6px}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.default .dropzone .dropzone__text{margin-left:16px}.mc-file-upload.default .btn-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i3.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i4.McListSelection, selector: "mc-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["mcListSelection"] }, { kind: "component", type: i4.McListOption, selector: "mc-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["mcListOption"] }, { kind: "directive", type: i5.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i6.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.McLink, selector: "[mc-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "caption", "useVisited", "print"], exportAs: ["mcLink"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.McDataSizePipe, name: "mcDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
220
220
  }
221
221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McMultipleFileUploadComponent, decorators: [{
222
222
  type: Component,
223
223
  args: [{ selector: 'mc-multiple-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, host: {
224
224
  class: 'mc-multiple-file-upload'
225
- }, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.selected]=\"files && files.length\"\n [ngClass]=\"size\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n <ng-container *ngIf=\"!files.length; else fileOutput\">\n <div class=\"dropzone\">\n <ng-container *ngIf=\"size === 'default' else compactCaption\">\n <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n <div class=\"dropzone__text\">\n <span class=\"multiple__header\">{{ config.title }}</span>\n <div>\n <span class=\"multiple__caption\">\n {{ config.captionText }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n\n\n </ng-container>\n <input #input\n type=\"file\"\n class=\"cdk-visually-hidden\"\n multiple\n [id]=\"inputId\"\n [accept]=\"acceptedFiles\"\n [disabled]=\"disabled\"\n (change)=\"onFileSelectedViaClick($event)\"\n >\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n <mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n </mc-hint>\n\n <ng-container *ngIf=\"hasErrors\">\n <mc-hint class=\"mc-file-upload__hint mc-error\"\n *ngFor=\"let error of errors\">\n {{ error }}\n </mc-hint>\n </ng-container>\n</div>\n\n<ng-template #fileOutput>\n <div class=\"file-upload__dropzone\">\n <div class=\"mc-file-upload__grid\">\n <div class=\"mc-file-multiple-uploaded__header\">\n <div class=\"mc-file-multiple-uploaded__header-inner\">\n <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n {{ column.header }}\n </div>\n </div>\n </div>\n\n <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n <mc-list-option\n class=\"multiple__uploaded-item\"\n [value]=\"file.file.name\"\n (keydown.delete)=\"deleteFile(index)\"\n (keydown.backspace)=\"deleteFile(index)\"\n *ngFor=\"let file of files; let index = index;\">\n <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n <div class=\"mc-file-upload__file\">\n <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\"\n [ngTemplateOutlet]=\"$any(customFileIcon)\"\n [ngTemplateOutletContext]=\"{ $implicit: file }\"\n >\n </ng-container>\n\n <mc-progress-spinner\n class=\"pt-nat-file-upload-name-cell__icon\"\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n </div>\n <div class=\"mc-file-upload__size\">\n {{ file.file.size | mcDataSize }}\n </div>\n <div class=\"mc-file-upload__action\">\n <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n </div>\n </div>\n </mc-list-option>\n </mc-list-selection>\n </div>\n\n <div class=\"btn-upload\">\n <div class=\"dropzone\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ config.captionTextWhenSelected }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #compactCaption>\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ config.captionText }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px)}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:144px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:4px 12px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
226
- }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
225
+ }, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.selected]=\"files && files.length\"\n [ngClass]=\"size\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n <ng-container *ngIf=\"!files.length; else fileOutput\">\n <div class=\"dropzone\">\n <ng-container *ngIf=\"size === 'default' else compactCaption\">\n <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n <div class=\"dropzone__text\">\n <span class=\"multiple__header\">{{ config.title }}</span>\n <div>\n <span class=\"multiple__caption\">\n {{ separatedCaptionText[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n <mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n </mc-hint>\n\n <ng-container *ngIf=\"hasErrors\">\n <mc-hint class=\"mc-file-upload__hint mc-error\"\n *ngFor=\"let error of errors\">\n {{ error }}\n </mc-hint>\n </ng-container>\n</div>\n\n<ng-template #fileOutput>\n <div class=\"file-upload__dropzone\">\n <div class=\"mc-file-upload__grid\">\n <div class=\"mc-file-multiple-uploaded__header\">\n <div class=\"mc-file-multiple-uploaded__header-inner\">\n <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n {{ column.header }}\n </div>\n </div>\n </div>\n\n <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n <mc-list-option\n class=\"multiple__uploaded-item\"\n [value]=\"file.file.name\"\n (keydown.delete)=\"deleteFile(index)\"\n (keydown.backspace)=\"deleteFile(index)\"\n *ngFor=\"let file of files; let index = index;\">\n <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n <div class=\"mc-file-upload__file\">\n <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\"\n [ngTemplateOutlet]=\"$any(customFileIcon)\"\n [ngTemplateOutletContext]=\"{ $implicit: file }\"\n >\n </ng-container>\n\n <mc-progress-spinner\n class=\"pt-nat-file-upload-name-cell__icon\"\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n </div>\n <div class=\"mc-file-upload__size\">\n {{ file.file.size | mcDataSize }}\n </div>\n <div class=\"mc-file-upload__action\">\n <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n </div>\n </div>\n </mc-list-option>\n </mc-list-selection>\n </div>\n\n <div class=\"btn-upload\">\n <div class=\"dropzone\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextWhenSelected[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextWhenSelected[1] }}\n </span>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #compactCaption>\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextForCompactSize[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextForCompactSize[1] }}\n </span>\n</ng-template>\n\n<ng-template #inputTemplate>\n <input #input\n type=\"file\"\n class=\"cdk-visually-hidden\"\n multiple\n [id]=\"inputId\"\n [accept]=\"acceptedFiles\"\n [disabled]=\"disabled\"\n (change)=\"onFileSelectedViaClick($event)\">\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);height:36px}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:142px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:3px 12px 4px}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload.compact .dropzone .dropzone__text{margin-left:6px}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.default .dropzone .dropzone__text{margin-left:16px}.mc-file-upload.default .btn-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
226
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
227
227
  type: Optional
228
228
  }, {
229
229
  type: Inject,
230
230
  args: [MC_FILE_UPLOAD_CONFIGURATION]
231
+ }] }, { type: i9.McLocaleService, decorators: [{
232
+ type: Optional
233
+ }, {
234
+ type: Inject,
235
+ args: [MC_LOCALE_SERVICE]
231
236
  }] }]; }, propDecorators: { accept: [{
232
237
  type: Input
233
238
  }], disabled: [{
@@ -253,34 +258,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
253
258
  }] } });
254
259
 
255
260
  let nextSingleFileUploadUniqueId = 0;
256
- const MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = {
257
- captionText: 'Перетащите файл или',
258
- browseLink: 'выберите'
259
- };
261
+ const MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = ruRULocaleData['ru-RU'].fileUpload.single;
260
262
  class McSingleFileUploadComponent {
261
263
  get acceptedFiles() {
262
264
  return this.accept && this.accept.length > 0 ? this.accept.map((ext) => `.${ext}`).join(',') : '*/*';
263
265
  }
264
- constructor(focusMonitor, cdr, renderer, config) {
265
- this.focusMonitor = focusMonitor;
266
- this.cdr = cdr;
266
+ constructor(renderer, cdr, configuration, localeService) {
267
267
  this.renderer = renderer;
268
- this.config = config;
268
+ this.cdr = cdr;
269
+ this.configuration = configuration;
270
+ this.localeService = localeService;
269
271
  this.disabled = false;
270
272
  this.errors = [];
271
273
  this.files = [];
272
274
  this.inputId = `mc-single-file-upload-${nextSingleFileUploadUniqueId++}`;
273
275
  this.fileQueueChanged = new EventEmitter();
274
- this.hasFocus = false;
275
- this.focusMonitorSubscription = Subscription.EMPTY;
276
- this.config = config || MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
277
- }
278
- ngAfterViewInit() {
279
- this.focusMonitorSubscription = this.focusMonitor.monitor(this.input)
280
- .subscribe((origin) => this.onFocus(origin === 'keyboard'));
276
+ this.updateLocaleParams = () => {
277
+ this.config = this.configuration || this.localeService?.getParams('fileUpload').multiple;
278
+ this.makeCaptionText();
279
+ this.cdr.markForCheck();
280
+ };
281
+ this.localeSubscription = this.localeService?.changes.subscribe(this.updateLocaleParams) || Subscription.EMPTY;
282
+ if (!localeService) {
283
+ this.initDefaultParams();
284
+ }
281
285
  }
282
286
  ngOnDestroy() {
283
- this.focusMonitorSubscription.unsubscribe();
287
+ this.localeSubscription.unsubscribe();
284
288
  }
285
289
  onFileSelectedViaClick({ target }) {
286
290
  if (this.disabled) {
@@ -314,13 +318,6 @@ class McSingleFileUploadComponent {
314
318
  this.fileQueueChanged.emit(this.files[0]);
315
319
  }
316
320
  }
317
- onFocus(focusState) {
318
- if (this.disabled) {
319
- return;
320
- }
321
- this.hasFocus = focusState;
322
- this.cdr.markForCheck();
323
- }
324
321
  mapToFileItem(file) {
325
322
  this.validateFile(file);
326
323
  return {
@@ -341,19 +338,31 @@ class McSingleFileUploadComponent {
341
338
  const fileExt = file.name.split('.').pop() || '';
342
339
  return this.acceptedFiles !== '*/*' && this.acceptedFiles.length > 0 ? this.acceptedFiles.includes(fileExt) : true;
343
340
  }
344
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McSingleFileUploadComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
345
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: McSingleFileUploadComponent, selector: "mc-single-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.mc-error]=\"errors && errors.length\"\n (filesDropped)=\"onFileDropped($event)\">\n <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text\">\n {{ config.captionText }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n </div>\n <input #input\n type=\"file\"\n class=\"cdk-visually-hidden\"\n [id]=\"inputId\"\n [accept]=\"acceptedFiles\"\n [disabled]=\"disabled\"\n (change)=\"onFileSelectedViaClick($event)\"\n >\n</div>\n<mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n <div class=\"file-item\" *ngIf=\"files && files.length\">\n <div class=\"file-item__text-wrapper\">\n <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\">\n <ng-content select=\"[mc-icon]\"></ng-content>\n </ng-container>\n\n <mc-progress-spinner\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n </div>\n <button mc-button\n class=\"mc-button_transparent\"\n [disabled]=\"disabled\"\n (keydown.delete)=\"deleteItem()\"\n (keydown.backspace)=\"deleteItem()\"\n (click)=\"deleteItem($event)\">\n <i mc-icon=\"mc-close-circle_16\"></i>\n </button>\n </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i5$1.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i5$1.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i6.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i7.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
341
+ initDefaultParams() {
342
+ this.config = MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
343
+ this.makeCaptionText();
344
+ }
345
+ makeCaptionText() {
346
+ this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
347
+ }
348
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McSingleFileUploadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: MC_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
349
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: McSingleFileUploadComponent, selector: "mc-single-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.mc-error]=\"errors && errors.length\"\n (filesDropped)=\"onFileDropped($event)\">\n <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text\">\n {{ separatedCaptionText[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n</div>\n\n<mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n <div class=\"file-item\" *ngIf=\"files && files.length\">\n <div class=\"file-item__text-wrapper\">\n <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\">\n <ng-content select=\"[mc-icon]\"></ng-content>\n </ng-container>\n\n <mc-progress-spinner\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n </div>\n <button mc-button\n class=\"mc-button_transparent\"\n [disabled]=\"disabled\"\n (keydown.delete)=\"deleteItem()\"\n (keydown.backspace)=\"deleteItem()\"\n (click)=\"deleteItem($event)\">\n <i mc-icon=\"mc-close-circle_16\"></i>\n </button>\n </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i3.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i4$1.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i4$1.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i5.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i6.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.McLink, selector: "[mc-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "caption", "useVisited", "print"], exportAs: ["mcLink"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
346
350
  }
347
351
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McSingleFileUploadComponent, decorators: [{
348
352
  type: Component,
349
353
  args: [{ selector: 'mc-single-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, host: {
350
354
  class: 'mc-single-file-upload'
351
- }, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.mc-error]=\"errors && errors.length\"\n (filesDropped)=\"onFileDropped($event)\">\n <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text\">\n {{ config.captionText }}\n <label class=\"mc-link\"\n [class.mc-focused]=\"hasFocus\"\n [for]=\"inputId\">\n {{ config.browseLink }}\n </label>\n </span>\n </div>\n <input #input\n type=\"file\"\n class=\"cdk-visually-hidden\"\n [id]=\"inputId\"\n [accept]=\"acceptedFiles\"\n [disabled]=\"disabled\"\n (change)=\"onFileSelectedViaClick($event)\"\n >\n</div>\n<mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n <div class=\"file-item\" *ngIf=\"files && files.length\">\n <div class=\"file-item__text-wrapper\">\n <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\">\n <ng-content select=\"[mc-icon]\"></ng-content>\n </ng-container>\n\n <mc-progress-spinner\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n </div>\n <button mc-button\n class=\"mc-button_transparent\"\n [disabled]=\"disabled\"\n (keydown.delete)=\"deleteItem()\"\n (keydown.backspace)=\"deleteItem()\"\n (click)=\"deleteItem($event)\">\n <i mc-icon=\"mc-close-circle_16\"></i>\n </button>\n </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
352
- }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
355
+ }, template: "<div class=\"mc-file-upload\"\n mcFileDrop\n [class.disabled]=\"disabled\"\n [class.mc-error]=\"errors && errors.length\"\n (filesDropped)=\"onFileDropped($event)\">\n <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text\">\n {{ separatedCaptionText[0] }}<label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n</div>\n\n<mc-hint class=\"mc-file-upload__hint\">\n <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n <div class=\"file-item\" *ngIf=\"files && files.length\">\n <div class=\"file-item__text-wrapper\">\n <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\">\n <ng-content select=\"[mc-icon]\"></ng-content>\n </ng-container>\n\n <mc-progress-spinner\n [value]=\"asyncData.progress || 0\"\n *ngIf=\"asyncData.loading\"\n ></mc-progress-spinner>\n </ng-container>\n\n <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n </div>\n <button mc-button\n class=\"mc-button_transparent\"\n [disabled]=\"disabled\"\n (keydown.delete)=\"deleteItem()\"\n (keydown.backspace)=\"deleteItem()\"\n (click)=\"deleteItem($event)\">\n <i mc-icon=\"mc-close-circle_16\"></i>\n </button>\n </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
356
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
353
357
  type: Optional
354
358
  }, {
355
359
  type: Inject,
356
360
  args: [MC_FILE_UPLOAD_CONFIGURATION]
361
+ }] }, { type: i9.McLocaleService, decorators: [{
362
+ type: Optional
363
+ }, {
364
+ type: Inject,
365
+ args: [MC_LOCALE_SERVICE]
357
366
  }] }]; }, propDecorators: { accept: [{
358
367
  type: Input
359
368
  }], disabled: [{
@@ -385,7 +394,8 @@ class McFileUploadModule {
385
394
  McListModule,
386
395
  McFormFieldModule,
387
396
  McEllipsisCenterModule,
388
- McDataSizeModule], exports: [McSingleFileUploadComponent,
397
+ McDataSizeModule,
398
+ McLinkModule], exports: [McSingleFileUploadComponent,
389
399
  McMultipleFileUploadComponent,
390
400
  McFileDropDirective] }); }
391
401
  /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McFileUploadModule, imports: [CommonModule,
@@ -396,7 +406,8 @@ class McFileUploadModule {
396
406
  McListModule,
397
407
  McFormFieldModule,
398
408
  McEllipsisCenterModule,
399
- McDataSizeModule] }); }
409
+ McDataSizeModule,
410
+ McLinkModule] }); }
400
411
  }
401
412
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McFileUploadModule, decorators: [{
402
413
  type: NgModule,
@@ -410,7 +421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
410
421
  McListModule,
411
422
  McFormFieldModule,
412
423
  McEllipsisCenterModule,
413
- McDataSizeModule
424
+ McDataSizeModule,
425
+ McLinkModule
414
426
  ],
415
427
  declarations: [
416
428
  McFileDropDirective,