@ardium-ui/ui 4.4.0 → 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/item-storages/simple-item-storage.mjs +15 -4
- package/esm2022/lib/_internal/ngmodel-component.mjs +3 -1
- package/esm2022/lib/_internal/selectable-list-component.mjs +2 -2
- 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 +62 -21
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/ngmodel-component.d.ts +1 -1
- package/lib/_internal/selectable-list-component.d.ts +2 -2
- 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();
|
|
@@ -9035,7 +9065,7 @@ class SimpleItemStorage {
|
|
|
9035
9065
|
this.selectItem(item);
|
|
9036
9066
|
return;
|
|
9037
9067
|
}
|
|
9038
|
-
console.
|
|
9068
|
+
console.error(`ARD-WA${this._ardParentComp._componentId}3: Couldn't find an item with value ${value?.toString?.() || String(value)}.`);
|
|
9039
9069
|
};
|
|
9040
9070
|
if (this._ardParentComp.multiselectable()) {
|
|
9041
9071
|
for (const modelValue of ngModel) {
|
|
@@ -9048,7 +9078,18 @@ class SimpleItemStorage {
|
|
|
9048
9078
|
}
|
|
9049
9079
|
_validateSingleElementType(item) {
|
|
9050
9080
|
if (!isDefined(this._ardParentComp.compareWith()) && isObject(item) && this._ardParentComp.valueFrom()) {
|
|
9051
|
-
|
|
9081
|
+
if (!this._ardParentComp.multiselectable() && Array.isArray(item)) {
|
|
9082
|
+
console.error(`ARD-FT${this._ardParentComp._componentId}0s: a non-multiselectable <ard-${this._ardParentComp._componentName}> expects its value not to be an array, got "[${item}]". If the value is supposed to be an array, use [compareWith].`);
|
|
9083
|
+
return false;
|
|
9084
|
+
}
|
|
9085
|
+
let jsonItemString = `${item}`;
|
|
9086
|
+
try {
|
|
9087
|
+
jsonItemString = JSON.stringify(item);
|
|
9088
|
+
}
|
|
9089
|
+
catch (error) {
|
|
9090
|
+
/* ignore */
|
|
9091
|
+
}
|
|
9092
|
+
console.error(`ARD-FT${this._ardParentComp._componentId}2: Setting object ${jsonItemString} as your value with [valueFrom] is not allowed unless [compareWith] is used.`);
|
|
9052
9093
|
return false;
|
|
9053
9094
|
}
|
|
9054
9095
|
return true;
|
|
@@ -9066,7 +9107,7 @@ class SimpleItemStorage {
|
|
|
9066
9107
|
_validateWriteValue(ngModel) {
|
|
9067
9108
|
if (this._ardParentComp.multiselectable()) {
|
|
9068
9109
|
if (!isArray(ngModel)) {
|
|
9069
|
-
throw new Error(`ARD-FT${this._ardParentComp._componentId}
|
|
9110
|
+
throw new Error(`ARD-FT${this._ardParentComp._componentId}0m: a multiselectable <ard-${this._ardParentComp._componentName}> expects its value to be an array, got "${ngModel}".`);
|
|
9070
9111
|
}
|
|
9071
9112
|
return ngModel.every(v => this._validateSingleElementType(v));
|
|
9072
9113
|
}
|
|
@@ -9381,7 +9422,7 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
|
|
|
9381
9422
|
}
|
|
9382
9423
|
//! value input & output
|
|
9383
9424
|
set value(newValue) {
|
|
9384
|
-
if (!Array.isArray(newValue))
|
|
9425
|
+
if (this.multiselectable() && !Array.isArray(newValue))
|
|
9385
9426
|
newValue = coerceArrayProperty(newValue);
|
|
9386
9427
|
this.writeValue(newValue);
|
|
9387
9428
|
}
|