@nexterajs/ui 0.0.1 → 0.0.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/fesm2022/nexterajs-ui-core.mjs +189 -5
- package/fesm2022/nexterajs-ui-core.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-dropdowns.mjs +314 -50
- package/fesm2022/nexterajs-ui-dropdowns.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-file-uploader.mjs +6 -3
- package/fesm2022/nexterajs-ui-file-uploader.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-forms.mjs +729 -370
- package/fesm2022/nexterajs-ui-forms.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-grid.mjs +1188 -208
- package/fesm2022/nexterajs-ui-grid.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-intl.mjs +15 -5
- package/fesm2022/nexterajs-ui-intl.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-notify.mjs +351 -0
- package/fesm2022/nexterajs-ui-notify.mjs.map +1 -0
- package/fesm2022/nexterajs-ui-pivot.mjs +146 -116
- package/fesm2022/nexterajs-ui-pivot.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-styling.mjs +568 -3
- package/fesm2022/nexterajs-ui-styling.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-tree-view.mjs +147 -18
- package/fesm2022/nexterajs-ui-tree-view.mjs.map +1 -1
- package/fesm2022/nexterajs-ui-validation.mjs +247 -92
- package/fesm2022/nexterajs-ui-validation.mjs.map +1 -1
- package/fesm2022/nexterajs-ui.mjs +1 -0
- package/fesm2022/nexterajs-ui.mjs.map +1 -1
- package/package.json +5 -1
- package/styles/_dropdown.scss +149 -0
- package/styles/_editor.scss +23 -4
- package/styles/_icons.scss +92 -0
- package/styles/_mixins.scss +104 -1
- package/styles/_scrollbar.scss +134 -0
- package/styles/_toast.scss +243 -0
- package/styles/_tokens.scss +48 -0
- package/styles/index.scss +4 -0
- package/types/nexterajs-ui-core.d.ts +142 -22
- package/types/nexterajs-ui-dropdowns.d.ts +145 -27
- package/types/nexterajs-ui-file-uploader.d.ts +4 -1
- package/types/nexterajs-ui-forms.d.ts +103 -19
- package/types/nexterajs-ui-grid.d.ts +445 -57
- package/types/nexterajs-ui-notify.d.ts +147 -0
- package/types/nexterajs-ui-pivot.d.ts +35 -22
- package/types/nexterajs-ui-styling.d.ts +163 -3
- package/types/nexterajs-ui-tree-view.d.ts +50 -1
- package/types/nexterajs-ui-validation.d.ts +94 -15
- package/types/nexterajs-ui.d.ts +1 -0
|
@@ -14,6 +14,8 @@ import { NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
|
|
|
14
14
|
* `required` rule works — invalid while no file is chosen.
|
|
15
15
|
*/
|
|
16
16
|
class NxeFileUploaderComponent {
|
|
17
|
+
/** Shows the per-file cancel button — except in `useForm` mode, where dx never renders one
|
|
18
|
+
* (m_file_uploader.js `_getCancelButton` returns null for useForm before it reads this). */
|
|
17
19
|
allowCanceling = input(false, /* @ts-ignore */
|
|
18
20
|
...(ngDevMode ? [{ debugName: "allowCanceling" }] : /* istanbul ignore next */ []));
|
|
19
21
|
accept = input('*', /* @ts-ignore */
|
|
@@ -22,7 +24,8 @@ class NxeFileUploaderComponent {
|
|
|
22
24
|
...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
23
25
|
selectButtonText = input('Select File', /* @ts-ignore */
|
|
24
26
|
...(ngDevMode ? [{ debugName: "selectButtonText" }] : /* istanbul ignore next */ []));
|
|
25
|
-
/** Accepted for parity; only `useForm` is used (no server upload by the widget).
|
|
27
|
+
/** Accepted for parity; only `useForm` is used (no server upload by the widget). It also
|
|
28
|
+
* gates the cancel button, which dx omits in `useForm` mode. */
|
|
26
29
|
uploadMode = input('useForm', /* @ts-ignore */
|
|
27
30
|
...(ngDevMode ? [{ debugName: "uploadMode" }] : /* istanbul ignore next */ []));
|
|
28
31
|
multiple = input(false, /* @ts-ignore */
|
|
@@ -96,7 +99,7 @@ class NxeFileUploaderComponent {
|
|
|
96
99
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
100
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeFileUploaderComponent, isStandalone: true, selector: "nxe-file-uploader", inputs: { allowCanceling: { classPropertyName: "allowCanceling", publicName: "allowCanceling", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, selectButtonText: { classPropertyName: "selectButtonText", publicName: "selectButtonText", isSignal: true, isRequired: false, transformFunction: null }, uploadMode: { classPropertyName: "uploadMode", publicName: "uploadMode", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validationGroupInput: { classPropertyName: "validationGroupInput", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave()", "drop": "onDrop($event)" }, properties: { "class.nxe-fileuploader-empty": "!file()", "class.nxe-fileuploader-dragover": "dragOver()", "class.nxe-fileuploader-invalid": "!!validationError()", "class.nxe-invalid": "!!validationError()", "class.nxe-focused": "focused()" }, classAttribute: "nxe-widget nxe-file-uploader" }, providers: [
|
|
98
101
|
{ provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileUploaderComponent) },
|
|
99
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n <div class=\"nxe-fileuploader-container\">\r\n <div class=\"nxe-fileuploader-content\">\r\n <div class=\"nxe-fileuploader-input-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (click)=\"browse()\">\r\n {{ selectButtonText() }}\r\n </button>\r\n <div class=\"nxe-fileuploader-input-container\">\r\n <input\r\n #fileInput\r\n class=\"nxe-fileuploader-input\"\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (change)=\"onNativeChange($event)\" />\r\n <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (file(); as f) {\r\n <div class=\"nxe-fileuploader-files-container\">\r\n <div class=\"nxe-fileuploader-file-container\">\r\n <div class=\"nxe-fileuploader-file\">\r\n <div class=\"nxe-fileuploader-file-info\">\r\n <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n </div>\r\n </div>\r\n @if (allowCanceling()) {\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-cancel-button\"\r\n title=\"Cancel\"\r\n (click)=\"cancel()\">\r\n ×\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:#d9534f}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:#f5f5f5}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:#999}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:#999;font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#999}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:#333}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed #30374c;outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:#d9534f;font-size:12px;margin-top:4px;line-height:1.4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
102
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n <div class=\"nxe-fileuploader-container\">\r\n <div class=\"nxe-fileuploader-content\">\r\n <div class=\"nxe-fileuploader-input-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (click)=\"browse()\">\r\n {{ selectButtonText() }}\r\n </button>\r\n <div class=\"nxe-fileuploader-input-container\">\r\n <input\r\n #fileInput\r\n class=\"nxe-fileuploader-input\"\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (change)=\"onNativeChange($event)\" />\r\n <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (file(); as f) {\r\n <div class=\"nxe-fileuploader-files-container\">\r\n <div class=\"nxe-fileuploader-file-container\">\r\n <div class=\"nxe-fileuploader-file\">\r\n <div class=\"nxe-fileuploader-file-info\">\r\n <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n </div>\r\n </div>\r\n <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n returns null before it reads allowCanceling\r\n (m_file_uploader.js:535-537). -->\r\n @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-cancel-button\"\r\n title=\"Cancel\"\r\n (click)=\"cancel()\">\r\n ×\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:#d9534f}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:#f5f5f5}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:#999}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:#999;font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#999}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:#333}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed #30374c;outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:#d9534f;font-size:12px;margin-top:4px;line-height:1.4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
100
103
|
}
|
|
101
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFileUploaderComponent, decorators: [{
|
|
102
105
|
type: Component,
|
|
@@ -112,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
112
115
|
'(drop)': 'onDrop($event)',
|
|
113
116
|
}, providers: [
|
|
114
117
|
{ provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileUploaderComponent) },
|
|
115
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n <div class=\"nxe-fileuploader-container\">\r\n <div class=\"nxe-fileuploader-content\">\r\n <div class=\"nxe-fileuploader-input-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (click)=\"browse()\">\r\n {{ selectButtonText() }}\r\n </button>\r\n <div class=\"nxe-fileuploader-input-container\">\r\n <input\r\n #fileInput\r\n class=\"nxe-fileuploader-input\"\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (change)=\"onNativeChange($event)\" />\r\n <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (file(); as f) {\r\n <div class=\"nxe-fileuploader-files-container\">\r\n <div class=\"nxe-fileuploader-file-container\">\r\n <div class=\"nxe-fileuploader-file\">\r\n <div class=\"nxe-fileuploader-file-info\">\r\n <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n </div>\r\n </div>\r\n @if (allowCanceling()) {\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-cancel-button\"\r\n title=\"Cancel\"\r\n (click)=\"cancel()\">\r\n ×\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:#d9534f}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:#f5f5f5}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:#999}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:#999;font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#999}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:#333}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed #30374c;outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:#d9534f;font-size:12px;margin-top:4px;line-height:1.4}\n"] }]
|
|
118
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n <div class=\"nxe-fileuploader-container\">\r\n <div class=\"nxe-fileuploader-content\">\r\n <div class=\"nxe-fileuploader-input-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (click)=\"browse()\">\r\n {{ selectButtonText() }}\r\n </button>\r\n <div class=\"nxe-fileuploader-input-container\">\r\n <input\r\n #fileInput\r\n class=\"nxe-fileuploader-input\"\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (change)=\"onNativeChange($event)\" />\r\n <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (file(); as f) {\r\n <div class=\"nxe-fileuploader-files-container\">\r\n <div class=\"nxe-fileuploader-file-container\">\r\n <div class=\"nxe-fileuploader-file\">\r\n <div class=\"nxe-fileuploader-file-info\">\r\n <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n </div>\r\n </div>\r\n <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n returns null before it reads allowCanceling\r\n (m_file_uploader.js:535-537). -->\r\n @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-cancel-button\"\r\n title=\"Cancel\"\r\n (click)=\"cancel()\">\r\n ×\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:#d9534f}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:#f5f5f5}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:#999}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:#999;font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#999}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:#333}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed #30374c;outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:#d9534f;font-size:12px;margin-top:4px;line-height:1.4}\n"] }]
|
|
116
119
|
}], propDecorators: { allowCanceling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCanceling", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], selectButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectButtonText", required: false }] }], uploadMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMode", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validationGroupInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
117
120
|
|
|
118
121
|
// @nexterajs/ui/file-uploader — public API.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nexterajs-ui-file-uploader.mjs","sources":["../../../projects/nextera-ui/file-uploader/src/lib/file-uploader/nxe-file-uploader.component.ts","../../../projects/nextera-ui/file-uploader/src/lib/file-uploader/nxe-file-uploader.component.html","../../../projects/nextera-ui/file-uploader/src/public-api.ts","../../../projects/nextera-ui/file-uploader/src/nexterajs-ui-file-uploader.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n forwardRef,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport {\r\n NXE_VALIDATION_TARGET,\r\n NxeValidationTarget,\r\n} from '@nexterajs/ui/core';\r\n\r\n/**\r\n * `nxe-file-uploader` — drop-in replacement for DevExtreme `dx-file-uploader`.\r\n *\r\n * Both usages run `uploadMode=\"useForm\"` (the widget never POSTs — the picked File is read by the\r\n * parent and appended to a FormData) and bind the NATIVE `(change)` event, reading\r\n * `$event.target.files[0]`. So this re-emits the inner `<input type=file>` change event verbatim\r\n * via a `change` output, preserving `$event.target.files[0]`. Drag-drop assigns the dropped\r\n * files to the hidden input and dispatches a change, keeping the same contract. Provides\r\n * {@link NXE_VALIDATION_TARGET} (value = the selected File) so a nested `nxe-validator`'s\r\n * `required` rule works — invalid while no file is chosen.\r\n */\r\n@Component({\r\n selector: 'nxe-file-uploader',\r\n standalone: true,\r\n templateUrl: './nxe-file-uploader.component.html',\r\n styleUrl: './nxe-file-uploader.component.scss',\r\n host: {\r\n class: 'nxe-widget nxe-file-uploader',\r\n '[class.nxe-fileuploader-empty]': '!file()',\r\n '[class.nxe-fileuploader-dragover]': 'dragOver()',\r\n '[class.nxe-fileuploader-invalid]': '!!validationError()',\r\n '[class.nxe-invalid]': '!!validationError()',\r\n '[class.nxe-focused]': 'focused()',\r\n '(dragover)': 'onDragOver($event)',\r\n '(dragleave)': 'onDragLeave()',\r\n '(drop)': 'onDrop($event)',\r\n },\r\n providers: [\r\n { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileUploaderComponent) },\r\n ],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class NxeFileUploaderComponent implements NxeValidationTarget {\r\n readonly allowCanceling = input(false);\r\n readonly accept = input('*');\r\n readonly labelText = input('or Drop here');\r\n readonly selectButtonText = input('Select File');\r\n /** Accepted for parity; only `useForm` is used (no server upload by the widget). */\r\n readonly uploadMode = input<'instantly' | 'useButtons' | 'useForm'>('useForm');\r\n readonly multiple = input(false);\r\n readonly name = input<string>('files[]');\r\n /** Group for a nested nxe-validator (none used today → bare default group). */\r\n readonly validationGroupInput = input<string | undefined>(undefined, {\r\n alias: 'validationGroup',\r\n });\r\n\r\n /** Re-emits the native `<input type=file>` change so `$event.target.files[0]` keeps working. */\r\n readonly change = output<Event>();\r\n\r\n private readonly fileInput = viewChild.required<ElementRef<HTMLInputElement>>('fileInput');\r\n\r\n readonly file = signal<File | null>(null);\r\n readonly dragOver = signal(false);\r\n readonly focused = signal(false);\r\n readonly validationError = signal<string | null>(null);\r\n\r\n // --- NXE_VALIDATION_TARGET -------------------------------------------------------------\r\n getValue(): unknown {\r\n return this.file();\r\n }\r\n validationGroup(): string | undefined {\r\n return this.validationGroupInput();\r\n }\r\n setValidationError(message: string | null): void {\r\n this.validationError.set(message);\r\n }\r\n\r\n protected browse(): void {\r\n this.fileInput().nativeElement.click();\r\n }\r\n\r\n protected onNativeChange(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n this.file.set(input.files?.[0] ?? null);\r\n this.change.emit(event);\r\n }\r\n\r\n protected cancel(): void {\r\n const input = this.fileInput().nativeElement;\r\n input.value = '';\r\n // Re-runs onNativeChange (now with empty files) so the bound form control clears too.\r\n input.dispatchEvent(new Event('change'));\r\n }\r\n\r\n protected onDragOver(event: DragEvent): void {\r\n event.preventDefault();\r\n this.dragOver.set(true);\r\n }\r\n\r\n protected onDragLeave(): void {\r\n this.dragOver.set(false);\r\n }\r\n\r\n protected onDrop(event: DragEvent): void {\r\n event.preventDefault();\r\n this.dragOver.set(false);\r\n const files = event.dataTransfer?.files;\r\n if (files && files.length) {\r\n const input = this.fileInput().nativeElement;\r\n input.files = files;\r\n input.dispatchEvent(new Event('change'));\r\n }\r\n }\r\n\r\n protected formatSize(bytes: number): string {\r\n if (bytes < 1024) {\r\n return `${bytes} b`;\r\n }\r\n if (bytes < 1024 * 1024) {\r\n return `${(bytes / 1024).toFixed(1)} Kb`;\r\n }\r\n return `${(bytes / 1024 / 1024).toFixed(1)} Mb`;\r\n }\r\n}\r\n","<div class=\"nxe-fileuploader-wrapper\">\r\n <div class=\"nxe-fileuploader-container\">\r\n <div class=\"nxe-fileuploader-content\">\r\n <div class=\"nxe-fileuploader-input-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (click)=\"browse()\">\r\n {{ selectButtonText() }}\r\n </button>\r\n <div class=\"nxe-fileuploader-input-container\">\r\n <input\r\n #fileInput\r\n class=\"nxe-fileuploader-input\"\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (change)=\"onNativeChange($event)\" />\r\n <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (file(); as f) {\r\n <div class=\"nxe-fileuploader-files-container\">\r\n <div class=\"nxe-fileuploader-file-container\">\r\n <div class=\"nxe-fileuploader-file\">\r\n <div class=\"nxe-fileuploader-file-info\">\r\n <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n </div>\r\n </div>\r\n @if (allowCanceling()) {\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-cancel-button\"\r\n title=\"Cancel\"\r\n (click)=\"cancel()\">\r\n ×\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n","// @nexterajs/ui/file-uploader — public API.\r\nexport * from './lib/file-uploader/nxe-file-uploader.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nexterajs-ui-file-uploader.mjs","sources":["../../../projects/nextera-ui/file-uploader/src/lib/file-uploader/nxe-file-uploader.component.ts","../../../projects/nextera-ui/file-uploader/src/lib/file-uploader/nxe-file-uploader.component.html","../../../projects/nextera-ui/file-uploader/src/public-api.ts","../../../projects/nextera-ui/file-uploader/src/nexterajs-ui-file-uploader.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n forwardRef,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport {\r\n NXE_VALIDATION_TARGET,\r\n NxeValidationTarget,\r\n} from '@nexterajs/ui/core';\r\n\r\n/**\r\n * `nxe-file-uploader` — drop-in replacement for DevExtreme `dx-file-uploader`.\r\n *\r\n * Both usages run `uploadMode=\"useForm\"` (the widget never POSTs — the picked File is read by the\r\n * parent and appended to a FormData) and bind the NATIVE `(change)` event, reading\r\n * `$event.target.files[0]`. So this re-emits the inner `<input type=file>` change event verbatim\r\n * via a `change` output, preserving `$event.target.files[0]`. Drag-drop assigns the dropped\r\n * files to the hidden input and dispatches a change, keeping the same contract. Provides\r\n * {@link NXE_VALIDATION_TARGET} (value = the selected File) so a nested `nxe-validator`'s\r\n * `required` rule works — invalid while no file is chosen.\r\n */\r\n@Component({\r\n selector: 'nxe-file-uploader',\r\n standalone: true,\r\n templateUrl: './nxe-file-uploader.component.html',\r\n styleUrl: './nxe-file-uploader.component.scss',\r\n host: {\r\n class: 'nxe-widget nxe-file-uploader',\r\n '[class.nxe-fileuploader-empty]': '!file()',\r\n '[class.nxe-fileuploader-dragover]': 'dragOver()',\r\n '[class.nxe-fileuploader-invalid]': '!!validationError()',\r\n '[class.nxe-invalid]': '!!validationError()',\r\n '[class.nxe-focused]': 'focused()',\r\n '(dragover)': 'onDragOver($event)',\r\n '(dragleave)': 'onDragLeave()',\r\n '(drop)': 'onDrop($event)',\r\n },\r\n providers: [\r\n { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileUploaderComponent) },\r\n ],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class NxeFileUploaderComponent implements NxeValidationTarget {\r\n /** Shows the per-file cancel button — except in `useForm` mode, where dx never renders one\r\n * (m_file_uploader.js `_getCancelButton` returns null for useForm before it reads this). */\r\n readonly allowCanceling = input(false);\r\n readonly accept = input('*');\r\n readonly labelText = input('or Drop here');\r\n readonly selectButtonText = input('Select File');\r\n /** Accepted for parity; only `useForm` is used (no server upload by the widget). It also\r\n * gates the cancel button, which dx omits in `useForm` mode. */\r\n readonly uploadMode = input<'instantly' | 'useButtons' | 'useForm'>('useForm');\r\n readonly multiple = input(false);\r\n readonly name = input<string>('files[]');\r\n /** Group for a nested nxe-validator (none used today → bare default group). */\r\n readonly validationGroupInput = input<string | undefined>(undefined, {\r\n alias: 'validationGroup',\r\n });\r\n\r\n /** Re-emits the native `<input type=file>` change so `$event.target.files[0]` keeps working. */\r\n readonly change = output<Event>();\r\n\r\n private readonly fileInput = viewChild.required<ElementRef<HTMLInputElement>>('fileInput');\r\n\r\n readonly file = signal<File | null>(null);\r\n readonly dragOver = signal(false);\r\n readonly focused = signal(false);\r\n readonly validationError = signal<string | null>(null);\r\n\r\n // --- NXE_VALIDATION_TARGET -------------------------------------------------------------\r\n getValue(): unknown {\r\n return this.file();\r\n }\r\n validationGroup(): string | undefined {\r\n return this.validationGroupInput();\r\n }\r\n setValidationError(message: string | null): void {\r\n this.validationError.set(message);\r\n }\r\n\r\n protected browse(): void {\r\n this.fileInput().nativeElement.click();\r\n }\r\n\r\n protected onNativeChange(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n this.file.set(input.files?.[0] ?? null);\r\n this.change.emit(event);\r\n }\r\n\r\n protected cancel(): void {\r\n const input = this.fileInput().nativeElement;\r\n input.value = '';\r\n // Re-runs onNativeChange (now with empty files) so the bound form control clears too.\r\n input.dispatchEvent(new Event('change'));\r\n }\r\n\r\n protected onDragOver(event: DragEvent): void {\r\n event.preventDefault();\r\n this.dragOver.set(true);\r\n }\r\n\r\n protected onDragLeave(): void {\r\n this.dragOver.set(false);\r\n }\r\n\r\n protected onDrop(event: DragEvent): void {\r\n event.preventDefault();\r\n this.dragOver.set(false);\r\n const files = event.dataTransfer?.files;\r\n if (files && files.length) {\r\n const input = this.fileInput().nativeElement;\r\n input.files = files;\r\n input.dispatchEvent(new Event('change'));\r\n }\r\n }\r\n\r\n protected formatSize(bytes: number): string {\r\n if (bytes < 1024) {\r\n return `${bytes} b`;\r\n }\r\n if (bytes < 1024 * 1024) {\r\n return `${(bytes / 1024).toFixed(1)} Kb`;\r\n }\r\n return `${(bytes / 1024 / 1024).toFixed(1)} Mb`;\r\n }\r\n}\r\n","<div class=\"nxe-fileuploader-wrapper\">\r\n <div class=\"nxe-fileuploader-container\">\r\n <div class=\"nxe-fileuploader-content\">\r\n <div class=\"nxe-fileuploader-input-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (click)=\"browse()\">\r\n {{ selectButtonText() }}\r\n </button>\r\n <div class=\"nxe-fileuploader-input-container\">\r\n <input\r\n #fileInput\r\n class=\"nxe-fileuploader-input\"\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n (focus)=\"focused.set(true)\"\r\n (blur)=\"focused.set(false)\"\r\n (change)=\"onNativeChange($event)\" />\r\n <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (file(); as f) {\r\n <div class=\"nxe-fileuploader-files-container\">\r\n <div class=\"nxe-fileuploader-file-container\">\r\n <div class=\"nxe-fileuploader-file\">\r\n <div class=\"nxe-fileuploader-file-info\">\r\n <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n </div>\r\n </div>\r\n <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n returns null before it reads allowCanceling\r\n (m_file_uploader.js:535-537). -->\r\n @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n <button\r\n type=\"button\"\r\n class=\"nxe-fileuploader-cancel-button\"\r\n title=\"Cancel\"\r\n (click)=\"cancel()\">\r\n ×\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n","// @nexterajs/ui/file-uploader — public API.\r\nexport * from './lib/file-uploader/nxe-file-uploader.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|