@ardium-ui/ui 4.4.1 → 4.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.
- package/esm2022/lib/_internal/ngmodel-component.mjs +3 -1
- package/esm2022/lib/file-inputs/file-drop-area/file-drop-area.component.mjs +3 -3
- package/esm2022/lib/file-inputs/file-input/file-input.component.mjs +3 -3
- package/esm2022/lib/file-inputs/file-input-base.mjs +38 -15
- package/esm2022/lib/inputs/number-input/number-input.component.mjs +6 -1
- package/fesm2022/ardium-ui-ui.mjs +47 -17
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/ngmodel-component.d.ts +1 -1
- package/lib/file-inputs/file-input-base.d.ts +7 -3
- package/lib/inputs/number-input/number-input.component.d.ts +1 -0
- package/package.json +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +9 -4
- package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
- package/themes/default/inputs/file-input.scss +10 -2
|
@@ -202,6 +202,8 @@ class _NgModelComponentBase extends _FocusableComponentBase {
|
|
|
202
202
|
this._shouldEmitTouched = true;
|
|
203
203
|
super.onBlur(event);
|
|
204
204
|
setTimeout(() => {
|
|
205
|
+
// if the component is immediately focused back (i.e. when changing focus between elements within the component)
|
|
206
|
+
// the touched event will not be fired
|
|
205
207
|
if (!this._shouldEmitTouched)
|
|
206
208
|
return;
|
|
207
209
|
this.wasTouched.set(true);
|
|
@@ -4679,7 +4681,6 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4679
4681
|
//! value
|
|
4680
4682
|
this._value = null;
|
|
4681
4683
|
this.valueChange = output();
|
|
4682
|
-
this.changeEvent = output({ alias: 'change' });
|
|
4683
4684
|
this.dragFilesEvent = output({ alias: 'dragFiles' });
|
|
4684
4685
|
this.failedUploadEvent = output({ alias: 'failedUpload' });
|
|
4685
4686
|
this._valueBeforeInit = null;
|
|
@@ -4689,6 +4690,8 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4689
4690
|
//! view state
|
|
4690
4691
|
this.currentViewState = signal('idle');
|
|
4691
4692
|
this._beforeDragoverState = 'idle';
|
|
4693
|
+
//! touched event handling
|
|
4694
|
+
this._isFilePickerOpen = false;
|
|
4692
4695
|
}
|
|
4693
4696
|
ngOnInit() {
|
|
4694
4697
|
super.ngOnInit();
|
|
@@ -4744,11 +4747,12 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4744
4747
|
const v = this.value;
|
|
4745
4748
|
this._onChangeRegistered?.(v);
|
|
4746
4749
|
this.valueChange.emit(v);
|
|
4747
|
-
this.changeEvent.emit(v);
|
|
4748
4750
|
}
|
|
4749
4751
|
openBrowseDialog() {
|
|
4752
|
+
// use FileSystemAPI if supported & needed
|
|
4750
4753
|
if (this._fileSystemService.isFileSystemAPISupported('showOpenFilePicker') &&
|
|
4751
4754
|
(this.directoryId() || this.startDirectory() || this.fileTypes())) {
|
|
4755
|
+
this._isFilePickerOpen = true;
|
|
4752
4756
|
this._fileSystemService
|
|
4753
4757
|
.requestFileUpload({
|
|
4754
4758
|
method: FileSystemMethod.PreferFileSystem,
|
|
@@ -4765,17 +4769,13 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4765
4769
|
return;
|
|
4766
4770
|
}
|
|
4767
4771
|
const files = Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles];
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
this.currentViewState.set('idle');
|
|
4771
|
-
return;
|
|
4772
|
-
}
|
|
4773
|
-
this._writeValue(files);
|
|
4774
|
-
this.currentViewState.set('uploaded');
|
|
4775
|
-
// this._changeDetectorRef.markForCheck();
|
|
4772
|
+
this._writeFilesToValue(files);
|
|
4773
|
+
this._isFilePickerOpen = false;
|
|
4776
4774
|
});
|
|
4777
4775
|
return;
|
|
4778
4776
|
}
|
|
4777
|
+
// else use the old-school method by clicking directly on the input
|
|
4778
|
+
this._isFilePickerOpen = true;
|
|
4779
4779
|
this.fileInputEl()?.nativeElement.click();
|
|
4780
4780
|
}
|
|
4781
4781
|
//! event handlers
|
|
@@ -4885,16 +4885,41 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4885
4885
|
this.failedUploadEvent.emit(failedFiles);
|
|
4886
4886
|
this.currentViewState.set('uploaded');
|
|
4887
4887
|
this._writeValue(filteredFiles.length > 0 ? filteredFiles : null);
|
|
4888
|
+
this._emitTouched();
|
|
4888
4889
|
}
|
|
4889
|
-
|
|
4890
|
+
onFileInputChange() {
|
|
4891
|
+
this._isFilePickerOpen = false;
|
|
4892
|
+
console.log('onFileInputChange');
|
|
4890
4893
|
const files = Array.from(this.fileInputEl()?.nativeElement.files ?? []);
|
|
4894
|
+
this._writeFilesToValue(files);
|
|
4895
|
+
}
|
|
4896
|
+
_writeFilesToValue(files) {
|
|
4891
4897
|
if (files.length === 0) {
|
|
4892
4898
|
this._writeValue(null);
|
|
4893
4899
|
this.currentViewState.set('idle');
|
|
4900
|
+
this._emitTouched();
|
|
4894
4901
|
return;
|
|
4895
4902
|
}
|
|
4896
4903
|
this._writeValue(files);
|
|
4897
4904
|
this.currentViewState.set('uploaded');
|
|
4905
|
+
this._emitTouched();
|
|
4906
|
+
}
|
|
4907
|
+
_emitTouched() {
|
|
4908
|
+
this.wasTouched.set(true);
|
|
4909
|
+
this._onTouchedRegistered?.();
|
|
4910
|
+
}
|
|
4911
|
+
onFocus(event) {
|
|
4912
|
+
if (this._isFilePickerOpen) {
|
|
4913
|
+
setTimeout(() => {
|
|
4914
|
+
this._emitTouched();
|
|
4915
|
+
}, 200);
|
|
4916
|
+
}
|
|
4917
|
+
this._isFilePickerOpen = false;
|
|
4918
|
+
super.onFocus(event);
|
|
4919
|
+
}
|
|
4920
|
+
onBlur(event) {
|
|
4921
|
+
super.onBlur(event);
|
|
4922
|
+
this._shouldEmitTouched = !this._isFilePickerOpen;
|
|
4898
4923
|
}
|
|
4899
4924
|
//! helpers
|
|
4900
4925
|
_filterFilesBasedOnSizeAndCount(file, existingFileCount) {
|
|
@@ -4920,7 +4945,7 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4920
4945
|
if (!inputEl)
|
|
4921
4946
|
return;
|
|
4922
4947
|
if (!v) {
|
|
4923
|
-
inputEl.
|
|
4948
|
+
inputEl.value = '';
|
|
4924
4949
|
return;
|
|
4925
4950
|
}
|
|
4926
4951
|
const dataTransfer = new DataTransfer();
|
|
@@ -4930,7 +4955,7 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
|
|
|
4930
4955
|
inputEl.files = dataTransfer.files;
|
|
4931
4956
|
}
|
|
4932
4957
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4933
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FileInputComponentBase, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, blockAfterUpload: { classPropertyName: "blockAfterUpload", publicName: "blockAfterUpload", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, directoryId: { classPropertyName: "directoryId", publicName: "directoryId", isSignal: true, isRequired: false, transformFunction: null }, startDirectory: { classPropertyName: "startDirectory", publicName: "startDirectory", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange",
|
|
4958
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FileInputComponentBase, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, blockAfterUpload: { classPropertyName: "blockAfterUpload", publicName: "blockAfterUpload", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, directoryId: { classPropertyName: "directoryId", publicName: "directoryId", isSignal: true, isRequired: false, transformFunction: null }, startDirectory: { classPropertyName: "startDirectory", publicName: "startDirectory", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dragFilesEvent: "dragFiles", failedUploadEvent: "failedUpload" }, viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
4934
4959
|
}
|
|
4935
4960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, decorators: [{
|
|
4936
4961
|
type: Directive
|
|
@@ -5200,11 +5225,11 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
|
|
|
5200
5225
|
};
|
|
5201
5226
|
}
|
|
5202
5227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: [{ token: ARD_FILE_DROP_AREA_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [id]=\"htmlId()\"\r\n (change)=\"
|
|
5228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [id]=\"htmlId()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n <strong class=\"ard-file-drop-area-drop-text\">\r\n @if (!multiple) {\r\n <span>Drag & Drop a file</span>\r\n } @else {\r\n <span>Drag & Drop files</span>\r\n } here\r\n </strong>\r\n <span class=\"ard-file-drop-area-or-text\">or</span>\r\n <ard-button\r\n class=\"ard-file-drop-area-browse-button\"\r\n appearance=\"transparent\"\r\n [compact]=\"compact()\"\r\n [variant]=\"variant()\"\r\n [color]=\"color()\"\r\n (click)=\"browse()\"\r\n >\r\n Browse files\r\n </ard-button>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n <span class=\"ard-file-drop-area-dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n @if (amount > 1 && !multiple()) {\r\n <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n }\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-drop-area-uploaded-container\">\r\n <div class=\"ard-file-drop-area-uploaded-message\">\r\n <span class=\"ard-file-drop-area-uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n </div>\r\n <div class=\"ard-file-drop-area-uploaded-files\">\r\n @for (file of files; track $index) {\r\n <div class=\"ard-file-drop-area-file\">\r\n <ard-icon>draft</ard-icon>\r\n <div class=\"ard-file-drop-area-file-info\">\r\n <span class=\"ard-file-drop-area-filename\">\r\n <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext : true }}</span>\r\n </span>\r\n <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i5.ArdiumFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5204
5229
|
}
|
|
5205
5230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
|
|
5206
5231
|
type: Component,
|
|
5207
|
-
args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [id]=\"htmlId()\"\r\n (change)=\"
|
|
5232
|
+
args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [id]=\"htmlId()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n <strong class=\"ard-file-drop-area-drop-text\">\r\n @if (!multiple) {\r\n <span>Drag & Drop a file</span>\r\n } @else {\r\n <span>Drag & Drop files</span>\r\n } here\r\n </strong>\r\n <span class=\"ard-file-drop-area-or-text\">or</span>\r\n <ard-button\r\n class=\"ard-file-drop-area-browse-button\"\r\n appearance=\"transparent\"\r\n [compact]=\"compact()\"\r\n [variant]=\"variant()\"\r\n [color]=\"color()\"\r\n (click)=\"browse()\"\r\n >\r\n Browse files\r\n </ard-button>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n <span class=\"ard-file-drop-area-dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n @if (amount > 1 && !multiple()) {\r\n <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n }\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-drop-area-uploaded-container\">\r\n <div class=\"ard-file-drop-area-uploaded-message\">\r\n <span class=\"ard-file-drop-area-uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n </div>\r\n <div class=\"ard-file-drop-area-uploaded-files\">\r\n @for (file of files; track $index) {\r\n <div class=\"ard-file-drop-area-file\">\r\n <ard-icon>draft</ard-icon>\r\n <div class=\"ard-file-drop-area-file-info\">\r\n <span class=\"ard-file-drop-area-filename\">\r\n <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext : true }}</span>\r\n </span>\r\n <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
|
|
5208
5233
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5209
5234
|
type: Inject,
|
|
5210
5235
|
args: [ARD_FILE_DROP_AREA_DEFAULTS]
|
|
@@ -5458,7 +5483,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
|
|
|
5458
5483
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
5459
5484
|
useExisting: forwardRef(() => ArdiumFileInputComponent),
|
|
5460
5485
|
},
|
|
5461
|
-
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n }\r\n\r\n <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [accept]=\"acceptString()\"\r\n (change)=\"
|
|
5486
|
+
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n }\r\n\r\n <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [accept]=\"acceptString()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <span class=\"ard-file-input__idle\">\r\n @if (multiple()) {\r\n <span>Upload a file</span>\r\n } @else {\r\n <span>Upload files</span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n @if (multiple()) {\r\n <span class=\"ard-file-input__dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n } @else {\r\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n }\r\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-input__uploaded\">\r\n @if (amount === 1) {\r\n <div class=\"ard-file-input__full-file-name\">\r\n <span class=\"ard-file-input__file-name\">\r\n {{ files?.[0]?.name | filename }}\r\n </span>\r\n <span class=\"ard-file-input__file-ext\">\r\n {{ files?.[0]?.name | fileext:true }}\r\n </span>\r\n </div>\r\n } @else {\r\n <span class=\"ard-file-input__uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5462
5487
|
}
|
|
5463
5488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
|
|
5464
5489
|
type: Component,
|
|
@@ -5472,7 +5497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5472
5497
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
5473
5498
|
useExisting: forwardRef(() => ArdiumFileInputComponent),
|
|
5474
5499
|
},
|
|
5475
|
-
], template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n }\r\n\r\n <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [accept]=\"acceptString()\"\r\n (change)=\"
|
|
5500
|
+
], template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n }\r\n\r\n <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [name]=\"name()\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [accept]=\"acceptString()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <span class=\"ard-file-input__idle\">\r\n @if (multiple()) {\r\n <span>Upload a file</span>\r\n } @else {\r\n <span>Upload files</span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n @if (multiple()) {\r\n <span class=\"ard-file-input__dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n } @else {\r\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n }\r\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-input__uploaded\">\r\n @if (amount === 1) {\r\n <div class=\"ard-file-input__full-file-name\">\r\n <span class=\"ard-file-input__file-name\">\r\n {{ files?.[0]?.name | filename }}\r\n </span>\r\n <span class=\"ard-file-input__file-ext\">\r\n {{ files?.[0]?.name | fileext:true }}\r\n </span>\r\n </div>\r\n } @else {\r\n <span class=\"ard-file-input__uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
|
|
5476
5501
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5477
5502
|
type: Inject,
|
|
5478
5503
|
args: [ARD_FILE_INPUT_DEFAULTS]
|
|
@@ -8276,6 +8301,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
8276
8301
|
this.writeValue(newValuePrecise);
|
|
8277
8302
|
this.quickChangeEvent.emit({ direction, value: newValuePrecise });
|
|
8278
8303
|
this._emitChange();
|
|
8304
|
+
this._emitTouched();
|
|
8279
8305
|
this._focusInputIfCantQuickChange();
|
|
8280
8306
|
}
|
|
8281
8307
|
_focusInputIfCantQuickChange() {
|
|
@@ -8316,6 +8342,10 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
8316
8342
|
onBlurMaster(event) {
|
|
8317
8343
|
this.onBlur(event);
|
|
8318
8344
|
}
|
|
8345
|
+
_emitTouched() {
|
|
8346
|
+
this.wasTouched.set(true);
|
|
8347
|
+
this._onTouchedRegistered?.();
|
|
8348
|
+
}
|
|
8319
8349
|
//change
|
|
8320
8350
|
onChange(event) {
|
|
8321
8351
|
event.stopPropagation();
|