http-request-manager 18.11.23 → 18.12.3

package/fesm2022/http-request-manager.mjs

@@ -2655,6 +2655,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 // ChannelType is already exported from request-manager-state-service to avoid conflicts
 
+class DatabaseStorage {
+    constructor(table = '', expiresIn) {
+        this.table = table;
+        this.expiresIn = expiresIn;
+    }
+    static adapt(item) {
+        if (!item?.table)
+            return;
+        return new DatabaseStorage(item?.table, item?.expiresIn);
+    }
+}
+
+class RetryOptions {
+    constructor(times = 0, delay = 3) {
+        this.times = times;
+        this.delay = delay;
+    }
+    static adapt(item) {
+        return new RetryOptions(item?.times, item?.delay);
+    }
+}
+
+class BatchOptions {
+    constructor(mode = 'sequential', stopOnError = false, concurrency = 3, ignoreErrors = false, logErrors = true, displaySuccess, displayError) {
+        this.mode = mode;
+        this.stopOnError = stopOnError;
+        this.concurrency = concurrency;
+        this.ignoreErrors = ignoreErrors;
+        this.logErrors = logErrors;
+        this.displaySuccess = displaySuccess;
+        this.displayError = displayError;
+    }
+    static adapt(item) {
+        return new BatchOptions(item?.mode ?? 'sequential', item?.stopOnError ?? false, item?.concurrency ?? 3, item?.ignoreErrors ?? false, item?.logErrors !== false, item?.displaySuccess ?? false, item?.displayError ?? false);
+    }
+}
+
+class BatchResult {
+    constructor(request, success, data, error, index = 0, timestamp = Date.now()) {
+        this.request = request;
+        this.success = success;
+        this.data = data;
+        this.error = error;
+        this.index = index;
+        this.timestamp = timestamp;
+    }
+    static adapt(item) {
+        return new BatchResult(item?.request, item?.success ?? false, item?.data, item?.error, item?.index ?? 0, item?.timestamp ?? Date.now());
+    }
+}
+
+function isPendingState(state) {
+    return state.isPending === true;
+}
+function isSuccessState(state) {
+    return state.isPending === false && state.data !== undefined;
+}
+function isErrorState(state) {
+    return state.isPending === false && state.error !== undefined;
+}
+
+function calculateBatchProgress(states) {
+    const total = states.length;
+    const pending = states.filter(s => s.isPending).length;
+    const completed = states.filter(s => !s.isPending && s.data !== undefined).length;
+    const failed = states.filter(s => !s.isPending && s.error !== undefined).length;
+    const percent = total > 0 ? Math.round(((completed + failed) / total) * 100) : 0;
+    return { total, pending, completed, failed, percent };
+}
+
+var DataType;
+(function (DataType) {
+    DataType[DataType["ANY"] = 0] = "ANY";
+    DataType[DataType["ARRAY"] = 1] = "ARRAY";
+    DataType[DataType["OBJECT"] = 2] = "OBJECT";
+})(DataType || (DataType = {}));
+
+class ConfigHTTPOptions {
+    constructor(server = '', path, headers, polling, retry, stream, displayError, displaySuccess) {
+        this.server = server;
+        this.path = path;
+        this.headers = headers;
+        this.polling = polling;
+        this.retry = retry;
+        this.stream = stream;
+        this.displayError = displayError;
+        this.displaySuccess = displaySuccess;
+    }
+    static adapt(item) {
+        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
+        const retryOptions = item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt();
+        return new ConfigHTTPOptions(server, (item?.path) ? item.path : [], (item?.headers) ? item.headers : {}, item?.polling ? Math.floor(item.polling) : 0, retryOptions, (item?.stream) ? item.stream : false, (item?.displayError) ? item.displayError : false, (item?.displaySuccess) ? item.displaySuccess : false);
+    }
+}
+
+class LocalStorageOptions {
+    constructor(storageName, storageSettingsName, options) {
+        this.storageName = storageName;
+        this.storageSettingsName = storageSettingsName;
+        this.options = options;
+    }
+    static adapt(item) {
+        return new LocalStorageOptions((item?.storageName) ? item.storageName : 'storage', (item?.storageSettingsName) ? item.storageSettingsName : 'global-storage', (item?.options) ? SettingOptions.adapt(item.options) : SettingOptions.adapt());
+    }
+}
+
+class ConfigOptions {
+    constructor(httpRequestOptions, LocalStorageOptions) {
+        this.httpRequestOptions = httpRequestOptions;
+        this.LocalStorageOptions = LocalStorageOptions;
+    }
+    static adapt(item) {
+        return new ConfigOptions((item?.httpRequestOptions) ? ConfigHTTPOptions.adapt(item.httpRequestOptions) : undefined, (item?.LocalStorageOptions) ? LocalStorageOptions.adapt(item.LocalStorageOptions) : undefined);
+    }
+}
+
+class InvalidFileInfoModel {
+    constructor(fileName = '', fileSize = 0, fileType = '', errors = []) {
+        this.fileName = fileName;
+        this.fileSize = fileSize;
+        this.fileType = fileType;
+        this.errors = errors;
+    }
+    static adapt(item) {
+        return new InvalidFileInfoModel(item?.fileName, item?.fileSize, item?.fileType, Array.isArray(item?.errors) ? item.errors : []);
+    }
+}
+class UploadValidationErrorModel {
+    constructor(invalidFiles = [], validFilesCount = 0, totalFilesCount = 0) {
+        this.invalidFiles = invalidFiles;
+        this.validFilesCount = validFilesCount;
+        this.totalFilesCount = totalFilesCount;
+    }
+    static adapt(item) {
+        return new UploadValidationErrorModel(Array.isArray(item?.invalidFiles) ? item.invalidFiles.map((f) => InvalidFileInfoModel.adapt(f)) : [], item?.validFilesCount, item?.totalFilesCount);
+    }
+}
+
+class UserData {
+    constructor(ldap = '', name = '', email = '', color = RandomPaletteColor()) {
+        this.ldap = ldap;
+        this.name = name;
+        this.email = email;
+        this.color = color;
+    }
+    static adapt(item) {
+        const userName = `${item?.first_name} ${item?.last_name}`;
+        return new UserData(item?.ldap, userName, item?.email, item?.color);
+    }
+}
+
 class RequestService extends WebsocketService {
     constructor() {
         super(...arguments);
@@ -2795,6 +2946,89 @@ class RequestService extends WebsocketService {
             return throwError(() => err);
         }));
     }
+    uploadFileRequest(options) {
+        this.isPending.next(true);
+        const files = options.uploadFiles ? (Array.isArray(options.uploadFiles) ? options.uploadFiles : [options.uploadFiles]) : [];
+        const validation = this.validateUploadFiles(files, options);
+        if (validation.validFiles.length === 0) {
+            this.isPending.next(false);
+            return throwError(() => new UploadValidationErrorModel(validation.invalidFiles, 0, files.length));
+        }
+        const fieldName = options.uploadFieldName || (files.length === 1 ? 'file' : 'files');
+        const formData = this.buildFormData(validation.validFiles, fieldName);
+        const urlPath = this.buildUrlPath(options);
+        const method = options.uploadHttpMethod || 'POST';
+        return this.http.request(method, urlPath, {
+            body: formData,
+            observe: 'events',
+            reportProgress: true
+        }).pipe(map((event) => {
+            this.isPending.next(true);
+            switch (event.type) {
+                case HttpEventType.UploadProgress:
+                    const status = event.total ? Math.round(event.loaded / (event.total || 1) * 100) : 0;
+                    this.progress.next(status);
+                    return null;
+                case HttpEventType.Response:
+                    this.isPending.next(false);
+                    this.progress.next(0);
+                    return event.body;
+                default:
+                    return null;
+            }
+        }), filter((body) => body !== null), catchError(err => {
+            this.isPending.next(false);
+            this.progress.next(0);
+            return throwError(() => err);
+        }));
+    }
+    validateUploadFiles(files, options) {
+        const validFiles = [];
+        const invalidFiles = [];
+        let totalSize = 0;
+        for (const file of files) {
+            const errors = [];
+            if (options.allowedTypes && options.allowedTypes.length > 0) {
+                const isAllowed = options.allowedTypes.some(type => {
+                    if (type.endsWith('/*')) {
+                        return file.type.startsWith(type.replace('/*', '/'));
+                    }
+                    return file.type === type;
+                });
+                if (!isAllowed) {
+                    errors.push('type not allowed');
+                }
+            }
+            const maxFileSize = options.maxFileSize !== undefined ? options.maxFileSize : Infinity;
+            if (file.size > maxFileSize) {
+                errors.push('exceeds maxFileSize');
+            }
+            if (errors.length > 0) {
+                invalidFiles.push(new InvalidFileInfoModel(file.name, file.size, file.type, errors));
+            }
+            else {
+                validFiles.push(file);
+                totalSize += file.size;
+            }
+        }
+        const maxTotalSize = options.maxTotalSize !== undefined ? options.maxTotalSize : Infinity;
+        if (totalSize > maxTotalSize) {
+            return {
+                validFiles: [],
+                invalidFiles: [
+                    new InvalidFileInfoModel('total', totalSize, '', ['exceeds maxTotalSize'])
+                ]
+            };
+        }
+        return { validFiles, invalidFiles };
+    }
+    buildFormData(files, fieldName) {
+        const formData = new FormData();
+        files.forEach((file) => {
+            formData.append(fieldName, file);
+        });
+        return formData;
+    }
     handleFinalize() {
         return finalize(() => this.isPending.next(false));
     }
@@ -2912,135 +3146,6 @@ function requestPolling(pollInterval, stopCondition$, isPending$) {
     };
 }
 
-class DatabaseStorage {
-    constructor(table = '', expiresIn) {
-        this.table = table;
-        this.expiresIn = expiresIn;
-    }
-    static adapt(item) {
-        if (!item?.table)
-            return;
-        return new DatabaseStorage(item?.table, item?.expiresIn);
-    }
-}
-
-class RetryOptions {
-    constructor(times = 0, delay = 3) {
-        this.times = times;
-        this.delay = delay;
-    }
-    static adapt(item) {
-        return new RetryOptions(item?.times, item?.delay);
-    }
-}
-
-class BatchOptions {
-    constructor(mode = 'sequential', stopOnError = false, concurrency = 3, ignoreErrors = false, logErrors = true, displaySuccess, displayError) {
-        this.mode = mode;
-        this.stopOnError = stopOnError;
-        this.concurrency = concurrency;
-        this.ignoreErrors = ignoreErrors;
-        this.logErrors = logErrors;
-        this.displaySuccess = displaySuccess;
-        this.displayError = displayError;
-    }
-    static adapt(item) {
-        return new BatchOptions(item?.mode ?? 'sequential', item?.stopOnError ?? false, item?.concurrency ?? 3, item?.ignoreErrors ?? false, item?.logErrors !== false, item?.displaySuccess ?? false, item?.displayError ?? false);
-    }
-}
-
-class BatchResult {
-    constructor(request, success, data, error, index = 0, timestamp = Date.now()) {
-        this.request = request;
-        this.success = success;
-        this.data = data;
-        this.error = error;
-        this.index = index;
-        this.timestamp = timestamp;
-    }
-    static adapt(item) {
-        return new BatchResult(item?.request, item?.success ?? false, item?.data, item?.error, item?.index ?? 0, item?.timestamp ?? Date.now());
-    }
-}
-
-function isPendingState(state) {
-    return state.isPending === true;
-}
-function isSuccessState(state) {
-    return state.isPending === false && state.data !== undefined;
-}
-function isErrorState(state) {
-    return state.isPending === false && state.error !== undefined;
-}
-
-function calculateBatchProgress(states) {
-    const total = states.length;
-    const pending = states.filter(s => s.isPending).length;
-    const completed = states.filter(s => !s.isPending && s.data !== undefined).length;
-    const failed = states.filter(s => !s.isPending && s.error !== undefined).length;
-    const percent = total > 0 ? Math.round(((completed + failed) / total) * 100) : 0;
-    return { total, pending, completed, failed, percent };
-}
-
-var DataType;
-(function (DataType) {
-    DataType[DataType["ANY"] = 0] = "ANY";
-    DataType[DataType["ARRAY"] = 1] = "ARRAY";
-    DataType[DataType["OBJECT"] = 2] = "OBJECT";
-})(DataType || (DataType = {}));
-
-class ConfigHTTPOptions {
-    constructor(server = '', path, headers, polling, retry, stream, displayError, displaySuccess) {
-        this.server = server;
-        this.path = path;
-        this.headers = headers;
-        this.polling = polling;
-        this.retry = retry;
-        this.stream = stream;
-        this.displayError = displayError;
-        this.displaySuccess = displaySuccess;
-    }
-    static adapt(item) {
-        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
-        const retryOptions = item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt();
-        return new ConfigHTTPOptions(server, (item?.path) ? item.path : [], (item?.headers) ? item.headers : {}, item?.polling ? Math.floor(item.polling) : 0, retryOptions, (item?.stream) ? item.stream : false, (item?.displayError) ? item.displayError : false, (item?.displaySuccess) ? item.displaySuccess : false);
-    }
-}
-
-class LocalStorageOptions {
-    constructor(storageName, storageSettingsName, options) {
-        this.storageName = storageName;
-        this.storageSettingsName = storageSettingsName;
-        this.options = options;
-    }
-    static adapt(item) {
-        return new LocalStorageOptions((item?.storageName) ? item.storageName : 'storage', (item?.storageSettingsName) ? item.storageSettingsName : 'global-storage', (item?.options) ? SettingOptions.adapt(item.options) : SettingOptions.adapt());
-    }
-}
-
-class ConfigOptions {
-    constructor(httpRequestOptions, LocalStorageOptions) {
-        this.httpRequestOptions = httpRequestOptions;
-        this.LocalStorageOptions = LocalStorageOptions;
-    }
-    static adapt(item) {
-        return new ConfigOptions((item?.httpRequestOptions) ? ConfigHTTPOptions.adapt(item.httpRequestOptions) : undefined, (item?.LocalStorageOptions) ? LocalStorageOptions.adapt(item.LocalStorageOptions) : undefined);
-    }
-}
-
-class UserData {
-    constructor(ldap = '', name = '', email = '', color = RandomPaletteColor()) {
-        this.ldap = ldap;
-        this.name = name;
-        this.email = email;
-        this.color = color;
-    }
-    static adapt(item) {
-        const userName = `${item?.first_name} ${item?.last_name}`;
-        return new UserData(item?.ldap, userName, item?.email, item?.color);
-    }
-}
-
 /**
  * Message Tracker Service - Guaranteed Message Delivery
  *
@@ -3695,6 +3800,24 @@ class HTTPManagerService extends RequestService {
             return this.handleError(err);
         }));
     }
+    uploadRequest(files, options, params) {
+        this.isPending.next(true);
+        this.data.next(null);
+        const updatedOptions = this.defineReqOptions(options, params);
+        updatedOptions.uploadFiles = files;
+        const func = this.uploadFileRequest;
+        const requests = this.createRequest(func, updatedOptions);
+        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => {
+            this.data.next(data);
+            if (updatedOptions.displaySuccess)
+                this.handleSuccessWithSnackBar(updatedOptions.successMessage);
+        }), finalize(() => this.isPending.next(false)), catchError((err) => {
+            if (updatedOptions.displayError)
+                this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
+            this.isPending.next(false);
+            return this.handleError(err);
+        }));
+    }
     createObservable(options, request$, funcName) {
         const polling = options.polling ? (options.polling > 0 ? true : false) : false;
         const isPolling = polling &&
@@ -4084,6 +4207,89 @@ class RequestSignalsService extends WebsocketService {
             return throwError(() => err);
         }));
     }
+    uploadFileRequest(options) {
+        this.isPending.set(true);
+        const files = options.uploadFiles ? (Array.isArray(options.uploadFiles) ? options.uploadFiles : [options.uploadFiles]) : [];
+        const validation = this.validateUploadFiles(files, options);
+        if (validation.validFiles.length === 0) {
+            this.isPending.set(false);
+            return throwError(() => new UploadValidationErrorModel(validation.invalidFiles, 0, files.length));
+        }
+        const fieldName = options.uploadFieldName || (files.length === 1 ? 'file' : 'files');
+        const formData = this.buildFormData(validation.validFiles, fieldName);
+        const urlPath = this.buildUrlPath(options);
+        const method = options.uploadHttpMethod || 'POST';
+        return this.http.request(method, urlPath, {
+            body: formData,
+            observe: 'events',
+            reportProgress: true
+        }).pipe(map((event) => {
+            this.isPending.set(true);
+            switch (event.type) {
+                case HttpEventType.UploadProgress:
+                    const status = event.total ? Math.round(event.loaded / (event.total || 1) * 100) : 0;
+                    this.progress.set(status);
+                    return null;
+                case HttpEventType.Response:
+                    this.isPending.set(false);
+                    this.progress.set(0);
+                    return event.body;
+                default:
+                    return null;
+            }
+        }), filter((body) => body !== null), catchError(err => {
+            this.isPending.set(false);
+            this.progress.set(0);
+            return throwError(() => err);
+        }));
+    }
+    validateUploadFiles(files, options) {
+        const validFiles = [];
+        const invalidFiles = [];
+        let totalSize = 0;
+        for (const file of files) {
+            const errors = [];
+            if (options.allowedTypes && options.allowedTypes.length > 0) {
+                const isAllowed = options.allowedTypes.some(type => {
+                    if (type.endsWith('/*')) {
+                        return file.type.startsWith(type.replace('/*', '/'));
+                    }
+                    return file.type === type;
+                });
+                if (!isAllowed) {
+                    errors.push('type not allowed');
+                }
+            }
+            const maxFileSize = options.maxFileSize !== undefined ? options.maxFileSize : Infinity;
+            if (file.size > maxFileSize) {
+                errors.push('exceeds maxFileSize');
+            }
+            if (errors.length > 0) {
+                invalidFiles.push(new InvalidFileInfoModel(file.name, file.size, file.type, errors));
+            }
+            else {
+                validFiles.push(file);
+                totalSize += file.size;
+            }
+        }
+        const maxTotalSize = options.maxTotalSize !== undefined ? options.maxTotalSize : Infinity;
+        if (totalSize > maxTotalSize) {
+            return {
+                validFiles: [],
+                invalidFiles: [
+                    new InvalidFileInfoModel('total', totalSize, '', ['exceeds maxTotalSize'])
+                ]
+            };
+        }
+        return { validFiles, invalidFiles };
+    }
+    buildFormData(files, fieldName) {
+        const formData = new FormData();
+        files.forEach((file, index) => {
+            formData.append(`${fieldName}[${index}]`, file);
+        });
+        return formData;
+    }
     handleFinalize() {
         return finalize(() => this.isPending.set(false));
     }
@@ -4378,6 +4584,24 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             return this.handleError(err);
         }));
     }
+    uploadRequest(files, options, params) {
+        this.isPending.set(true);
+        this.data.set(null);
+        const updatedOptions = this.defineReqOptions(options, params);
+        updatedOptions.uploadFiles = files;
+        const func = this.uploadFileRequest;
+        const requests = this.createRequest(func, updatedOptions);
+        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => {
+            this.data.set(data);
+            if (updatedOptions.displaySuccess)
+                this.handleSuccessWithSnackBar(updatedOptions.successMessage);
+        }), finalize(() => this.isPending.set(false)), catchError((err) => {
+            if (updatedOptions.displayError)
+                this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
+            this.isPending.set(false);
+            return this.handleError(err);
+        }));
+    }
     // --- private helpers ---
     createObservable(options, request$, funcName) {
         const polling = options.polling ? (options.polling > 0 ? true : false) : false;
@@ -4635,7 +4859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }] });
 
 class ApiRequest {
-    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, displayError, displaySuccess, successMessage, errorMessage, saveAs, fileContentHeader, ws, env) {
+    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, displayError, displaySuccess, successMessage, errorMessage, saveAs, fileContentHeader, ws, env, uploadFiles, uploadFieldName, uploadHttpMethod, allowedTypes, maxFileSize, maxTotalSize) {
         this.server = server;
         this.path = path;
         this.headers = headers;
@@ -4653,10 +4877,16 @@ class ApiRequest {
         this.fileContentHeader = fileContentHeader;
         this.ws = ws;
         this.env = env;
+        this.uploadFiles = uploadFiles;
+        this.uploadFieldName = uploadFieldName;
+        this.uploadHttpMethod = uploadHttpMethod;
+        this.allowedTypes = allowedTypes;
+        this.maxFileSize = maxFileSize;
+        this.maxTotalSize = maxTotalSize;
     }
     static adapt(item) {
         const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
-        return new ApiRequest(server, item?.path ? item.path : [], item?.headers ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), item?.stream ? item.stream : false, item?.streamType || StreamType.AI_STREAMING, item?.displayError ? item.displayError : false, item?.displaySuccess ? item.displaySuccess : false, item?.successMessage, item?.errorMessage, item?.saveAs, item?.fileContentHeader, item?.ws, item?.env || 'dev');
+        return new ApiRequest(server, item?.path ? item.path : [], item?.headers ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), item?.stream ? item.stream : false, item?.streamType || StreamType.AI_STREAMING, item?.displayError ? item.displayError : false, item?.displaySuccess ? item.displaySuccess : false, item?.successMessage, item?.errorMessage, item?.saveAs, item?.fileContentHeader, item?.ws, item?.env || 'dev', item?.uploadFiles, item?.uploadFieldName, item?.uploadHttpMethod, Array.isArray(item?.allowedTypes) ? item.allowedTypes : [], item?.maxFileSize, item?.maxTotalSize);
     }
 }
 
@@ -4686,6 +4916,16 @@ class WSOptions {
     }
 }
 
+class OperationResultModel {
+    constructor(success = false, operation = 'UPDATE') {
+        this.success = success;
+        this.operation = operation;
+    }
+    static adapt(item) {
+        return new OperationResultModel(item?.success ?? false, item?.operation || 'UPDATE');
+    }
+}
+
 class ObjectMergerService {
     constructor(configOptions) {
         this.configOptions = configOptions;
@@ -5854,6 +6094,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.logger = inject(LoggerService);
         this.error$ = this.httpManagerService.error$;
         this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
+        this.operationSuccess = new BehaviorSubject(null);
+        this.operationSuccess$ = this.operationSuccess.asObservable();
         // PAGINATION
         this.page = new BehaviorSubject(0);
         this.page$ = this.page.asObservable();
@@ -6362,6 +6604,7 @@ class HTTPManagerStateService extends ComponentStore {
                 .pipe(tap((data) => {
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 this.addData$(data);
+                this.operationSuccess.next(OperationResultModel.adapt({ success: true, operation: 'CREATE' }));
                 // Always call wsCommunication - it will queue if not connected
                 this.wsCommunication('CREATE', [...options?.path || [], data.id]);
             }), concatMap((data) => {
@@ -6379,6 +6622,7 @@ class HTTPManagerStateService extends ComponentStore {
                 .pipe(tap((data) => {
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 this.updateData$(data);
+                this.operationSuccess.next(OperationResultModel.adapt({ success: true, operation: 'UPDATE' }));
                 // Always call wsCommunication - it will queue if not connected
                 this.wsCommunication('UPDATE', [...options?.path || []]);
             }), concatMap((data) => {
@@ -6396,6 +6640,7 @@ class HTTPManagerStateService extends ComponentStore {
                 .pipe(tap((data) => {
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 this.deleteData$(data);
+                this.operationSuccess.next(OperationResultModel.adapt({ success: true, operation: 'DELETE' }));
                 // Always call wsCommunication - it will queue if not connected
                 this.wsCommunication('DELETE', [...options?.path || []]);
             }), concatMap((data) => {
@@ -7039,6 +7284,20 @@ class StateStorageOptions {
     }
 }
 
+class StateOperationResult {
+    constructor(success = false, operation = 'UPDATE', key, value, timestamp = Date.now(), error) {
+        this.success = success;
+        this.operation = operation;
+        this.key = key;
+        this.value = value;
+        this.timestamp = timestamp;
+        this.error = error;
+    }
+    static adapt(item) {
+        return new StateOperationResult(item?.success ?? false, item?.operation || 'UPDATE', item?.key, item?.value, item?.timestamp || Date.now(), item?.error);
+    }
+}
+
 class StoreStateManagerService extends ComponentStore {
     constructor(options = StateStorageOptions.adapt()) {
         super(StoreStateManagerService.init(options));
@@ -7047,6 +7306,8 @@ class StoreStateManagerService extends ComponentStore {
         this.subscriptions = new Subscription;
         this.settings = null;
         this.isRestoring = false;
+        this.operationResult = new BehaviorSubject(null);
+        this.operationResult$ = this.operationResult.asObservable();
         // Selectors
         this.data$ = this.select((state) => {
             const model = this.options.model;
@@ -7093,6 +7354,67 @@ class StoreStateManagerService extends ComponentStore {
             data: state
         });
     }
+    createRecord(key, value) {
+        try {
+            this.updateData({ [key]: value });
+            this.operationResult.next(StateOperationResult.adapt({
+                success: true,
+                operation: 'CREATE',
+                key,
+                value,
+            }));
+        }
+        catch (error) {
+            this.operationResult.next(StateOperationResult.adapt({
+                success: false,
+                operation: 'CREATE',
+                key,
+                error: error?.message || 'Create failed',
+            }));
+        }
+    }
+    updateRecord(key, value) {
+        try {
+            this.updateData({ [key]: value });
+            this.operationResult.next(StateOperationResult.adapt({
+                success: true,
+                operation: 'UPDATE',
+                key,
+                value,
+            }));
+        }
+        catch (error) {
+            this.operationResult.next(StateOperationResult.adapt({
+                success: false,
+                operation: 'UPDATE',
+                key,
+                error: error?.message || 'Update failed',
+            }));
+        }
+    }
+    deleteRecord(key) {
+        try {
+            const currentState = this.get();
+            if (currentState && key in currentState) {
+                const { [key]: removed, ...rest } = currentState;
+                this.setState(rest);
+                this.updateState(rest);
+            }
+            this.operationResult.next(StateOperationResult.adapt({
+                success: true,
+                operation: 'DELETE',
+                key,
+            }));
+        }
+        catch (error) {
+            this.operationResult.next(StateOperationResult.adapt({
+                success: false,
+                operation: 'DELETE',
+                key,
+                error: error?.message || 'Delete failed',
+            }));
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateManagerService, deps: [{ token: StateStorageOptions }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateManagerService, providedIn: 'root' }); }
 }
@@ -7109,6 +7431,8 @@ class StoreStateManagerSignalsService {
         this.state = signal(null);
         this.isRestoring = false;
         this.settings = null;
+        this.operationResultSignal = signal(null);
+        this.operationResult = this.operationResultSignal.asReadonly();
         // Public readonly signals for consumers
         this.data = this.state.asReadonly();
         // Computed signal for transformed data
@@ -7172,6 +7496,67 @@ class StoreStateManagerSignalsService {
         this.state.set(newState);
         this.updateState(newState);
     }
+    createRecord(key, value) {
+        try {
+            this.updateData({ [key]: value });
+            this.operationResultSignal.set(StateOperationResult.adapt({
+                success: true,
+                operation: 'CREATE',
+                key,
+                value,
+            }));
+        }
+        catch (error) {
+            this.operationResultSignal.set(StateOperationResult.adapt({
+                success: false,
+                operation: 'CREATE',
+                key,
+                error: error?.message || 'Create failed',
+            }));
+        }
+    }
+    updateRecord(key, value) {
+        try {
+            this.updateData({ [key]: value });
+            this.operationResultSignal.set(StateOperationResult.adapt({
+                success: true,
+                operation: 'UPDATE',
+                key,
+                value,
+            }));
+        }
+        catch (error) {
+            this.operationResultSignal.set(StateOperationResult.adapt({
+                success: false,
+                operation: 'UPDATE',
+                key,
+                error: error?.message || 'Update failed',
+            }));
+        }
+    }
+    deleteRecord(key) {
+        try {
+            const currentState = this.state();
+            if (currentState && key in currentState) {
+                const { [key]: removed, ...rest } = currentState;
+                this.state.set(rest);
+                this.updateState(rest);
+            }
+            this.operationResultSignal.set(StateOperationResult.adapt({
+                success: true,
+                operation: 'DELETE',
+                key,
+            }));
+        }
+        catch (error) {
+            this.operationResultSignal.set(StateOperationResult.adapt({
+                success: false,
+                operation: 'DELETE',
+                key,
+                error: error?.message || 'Delete failed',
+            }));
+        }
+    }
     resetState() {
         if (!this.settings)
             return;
@@ -7235,9 +7620,11 @@ class RequestHeadersInterceptor {
         }));
     }
     intercept(request, next) {
+        // Don't override Content-Type for FormData (file uploads) — let browser set multipart/form-data
+        const skipContentType = request.body instanceof FormData;
         request = request.clone({
             setHeaders: {
-                'Content-Type': 'application/json',
+                ...(skipContentType ? {} : { 'Content-Type': 'application/json' }),
                 'Accept-Language': this.language || 'en-CA',
                 'Current-Date': this.currentDate
             }
@@ -10387,6 +10774,133 @@ class DatabaseDataSource extends DataSource {
     }
 }
 
+class UploadStateModel {
+    constructor(selectedFiles = [], isUploading = false, progress = 0, currentFile = null, errorMessage = null, successMessage = null) {
+        this.selectedFiles = selectedFiles;
+        this.isUploading = isUploading;
+        this.progress = progress;
+        this.currentFile = currentFile;
+        this.errorMessage = errorMessage;
+        this.successMessage = successMessage;
+    }
+    static adapt(item) {
+        return new UploadStateModel(Array.isArray(item?.selectedFiles) ? item.selectedFiles : [], item?.isUploading ?? false, item?.progress ?? 0, item?.currentFile ?? null, item?.errorMessage ?? null, item?.successMessage ?? null);
+    }
+}
+
+class UploadDemoComponent {
+    constructor() {
+        this.httpManager = inject(HTTPManagerService);
+        this.toastService = inject(ToastMessageDisplayService);
+        this.uploadState = UploadStateModel.adapt();
+        this.allowedTypes = ['image/jpeg', 'image/png'];
+        this.maxFileSize = 40 * 1024 * 1024; // 40MB
+    }
+    ngOnInit() {
+        // Initialize component
+    }
+    ngOnDestroy() {
+        // Clean up subscriptions
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const files = input.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        this.uploadState.selectedFiles = [];
+        this.uploadState.errorMessage = null;
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            const validationError = this.validateFile(file);
+            if (validationError) {
+                this.uploadState.errorMessage = validationError;
+                continue;
+            }
+            this.uploadState.selectedFiles.push(file);
+        }
+        if (this.uploadState.selectedFiles.length === 0 && !this.uploadState.errorMessage) {
+            this.uploadState.errorMessage = 'Please select at least one valid file (JPG or PNG)';
+        }
+    }
+    validateFile(file) {
+        // Check file type
+        if (!this.allowedTypes.includes(file.type)) {
+            return `File "${file.name}" is not a valid type. Only JPG and PNG files are allowed.`;
+        }
+        // Check file size
+        if (file.size > this.maxFileSize) {
+            return `File "${file.name}" exceeds maximum size of 10MB.`;
+        }
+        return null;
+    }
+    clearSelection() {
+        this.uploadState.selectedFiles = [];
+        this.uploadState.errorMessage = null;
+        this.uploadState.successMessage = null;
+        this.uploadState.progress = 0;
+        this.uploadState.currentFile = null;
+    }
+    startUpload() {
+        if (this.uploadState.selectedFiles.length === 0) {
+            this.uploadState.errorMessage = 'Please select at least one file to upload';
+            return;
+        }
+        if (this.uploadState.errorMessage) {
+            return;
+        }
+        this.uploadState.isUploading = true;
+        this.uploadState.progress = 0;
+        this.uploadState.errorMessage = null;
+        this.uploadState.successMessage = null;
+        const options = ApiRequest.adapt({
+            server: 'gtlcApi',
+            path: ['uploader'],
+            uploadFieldName: 'files',
+            allowedTypes: this.allowedTypes,
+            maxFileSize: this.maxFileSize
+        });
+        this.httpManager.uploadRequest(this.uploadState.selectedFiles, options, ['upload'])
+            .subscribe({
+            next: (response) => {
+                this.uploadState.progress = 100;
+                this.uploadState.successMessage = `Successfully uploaded ${this.uploadState.selectedFiles.length} file(s)`;
+                this.toastService.toastMessage({
+                    message: this.uploadState.successMessage || '',
+                    color: ToastColors.SUCCESS
+                });
+                this.uploadState.isUploading = false;
+            },
+            error: (error) => {
+                this.uploadState.errorMessage = error.message || 'Upload failed. Please try again.';
+                this.toastService.toastMessage({
+                    message: this.uploadState.errorMessage || '',
+                    color: ToastColors.ERROR
+                });
+                this.uploadState.isUploading = false;
+                this.uploadState.progress = 0;
+            }
+        });
+    }
+    getFileSizeString(size) {
+        if (size < 1024) {
+            return `${size} bytes`;
+        }
+        else if (size < 1024 * 1024) {
+            return `${(size / 1024).toFixed(1)} KB`;
+        }
+        else {
+            return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UploadDemoComponent, selector: "lib-upload-demo", ngImport: i0, template: "<div class=\"upload-demo-container\">\n  <h2>File Upload Demo</h2>\n  <p class=\"demo-description\">Upload multiple JPG or PNG files with progress tracking</p>\n\n  <!-- Upload Button & File Input -->\n  <div class=\"upload-controls\">\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"fileInput.click()\"\n      [disabled]=\"uploadState.isUploading\"\n      class=\"upload-button\">\n      <span class=\"material-icons\">upload_file</span>\n      Select Files\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      multiple\n      accept=\"image/jpeg,image/png\"\n      (change)=\"onFileSelected($event)\"\n      [disabled]=\"uploadState.isUploading\"\n      hidden>\n\n    <button\n      mat-button\n      color=\"warn\"\n      (click)=\"clearSelection()\"\n      [disabled]=\"uploadState.selectedFiles.length === 0 || uploadState.isUploading\"\n      class=\"clear-button\">\n      Clear\n    </button>\n  </div>\n\n  <!-- Selected Files Display -->\n  <div class=\"selected-files\" *ngIf=\"uploadState.selectedFiles.length > 0\">\n    <h3>Selected Files ({{uploadState.selectedFiles.length}})</h3>\n    <ul class=\"file-list\">\n      <li *ngFor=\"let file of uploadState.selectedFiles\" class=\"file-item\">\n        <span class=\"file-icon\">\n          <span class=\"material-icons\">insert_drive_file</span>\n        </span>\n        <span class=\"file-name\">{{file.name}}</span>\n        <span class=\"file-size\">{{getFileSizeString(file.size)}}</span>\n        <span class=\"file-status valid\">\u2713</span>\n      </li>\n    </ul>\n  </div>\n\n  <!-- Validation Errors -->\n  <div class=\"error-message\" *ngIf=\"uploadState.errorMessage && !uploadState.isUploading\">\n    <span class=\"material-icons\">error</span>\n    <span>{{uploadState.errorMessage}}</span>\n  </div>\n\n  <!-- Progress Bar -->\n  <div class=\"progress-container\" *ngIf=\"uploadState.isUploading\">\n    <div class=\"progress-header\">\n      <span>Uploading...</span>\n      <span class=\"progress-percentage\">{{uploadState.progress}}%</span>\n    </div>\n    <mat-progress-bar\n      mode=\"determinate\"\n      [value]=\"uploadState.progress\"\n      color=\"primary\">\n    </mat-progress-bar>\n    <div class=\"current-file\" *ngIf=\"uploadState.currentFile\">\n      Current: {{uploadState.currentFile}}\n    </div>\n  </div>\n\n  <!-- Success Message -->\n  <div class=\"success-message\" *ngIf=\"uploadState.successMessage\">\n    <span class=\"material-icons\">check_circle</span>\n    <span>{{uploadState.successMessage}}</span>\n  </div>\n\n  <!-- Upload Action Button -->\n  <div class=\"upload-actions\" *ngIf=\"uploadState.selectedFiles.length > 0 && !uploadState.isUploading\">\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"startUpload()\"\n      [disabled]=\"uploadState.selectedFiles.length === 0 || uploadState.errorMessage !== null\"\n      class=\"start-upload-button\">\n      Upload {{uploadState.selectedFiles.length}} File{{uploadState.selectedFiles.length > 1 ? 's' : ''}}\n    </button>\n  </div>\n</div>\n", styles: [".upload-demo-container{padding:1rem;max-width:60rem;margin:0 auto}.upload-demo-container h2{font-size:2rem;font-weight:700;color:#333;margin-bottom:.75rem}.upload-demo-container .demo-description{font-size:1rem;color:#666;margin-bottom:1.5rem}.upload-demo-container .upload-controls{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center}.upload-demo-container .upload-controls .upload-button,.upload-demo-container .upload-controls .clear-button{min-width:10rem}.upload-demo-container .selected-files{background-color:#fbfbfb;border:1px solid #ccc;border-radius:.25rem;padding:1rem;margin-bottom:1.5rem}.upload-demo-container .selected-files h3{font-size:1.125rem;font-weight:500;color:#333;margin-bottom:.5rem}.upload-demo-container .selected-files .file-list{list-style:none;padding:0;margin:0}.upload-demo-container .selected-files .file-list .file-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;border-bottom:1px solid #e5e5e5}.upload-demo-container .selected-files .file-list .file-item:last-child{border-bottom:none}.upload-demo-container .selected-files .file-list .file-item .file-icon{color:#286fad;display:flex;align-items:center}.upload-demo-container .selected-files .file-list .file-item .file-name{flex:1;font-size:.875rem;color:#333;font-weight:500}.upload-demo-container .selected-files .file-list .file-item .file-size{font-size:.875rem;color:#666}.upload-demo-container .selected-files .file-list .file-item .file-status.valid{color:#1c8150;font-weight:700}.upload-demo-container .error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:#d400031a;border:1px solid #d40003;border-radius:.25rem;color:#d40003;margin-bottom:1.5rem;font-size:.875rem}.upload-demo-container .error-message .material-icons{font-size:2.5rem}.upload-demo-container .progress-container{margin-bottom:1.5rem}.upload-demo-container .progress-container .progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.upload-demo-container .progress-container .progress-header span:first-child{font-size:.875rem;font-weight:500;color:#333}.upload-demo-container .progress-container .progress-header .progress-percentage{font-size:.875rem;font-weight:700;color:#286fad}.upload-demo-container .progress-container .current-file{font-size:.875rem;color:#666;margin-top:.25rem;font-style:italic}.upload-demo-container .success-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:#1c81501a;border:1px solid #1c8150;border-radius:.25rem;color:#1c8150;margin-bottom:1.5rem;font-size:.875rem}.upload-demo-container .success-message .material-icons{font-size:2.5rem}.upload-demo-container .upload-actions{text-align:center;margin-top:1.5rem}.upload-demo-container .upload-actions .start-upload-button{min-width:15rem;padding:.5rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-upload-demo', standalone: false, template: "<div class=\"upload-demo-container\">\n  <h2>File Upload Demo</h2>\n  <p class=\"demo-description\">Upload multiple JPG or PNG files with progress tracking</p>\n\n  <!-- Upload Button & File Input -->\n  <div class=\"upload-controls\">\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"fileInput.click()\"\n      [disabled]=\"uploadState.isUploading\"\n      class=\"upload-button\">\n      <span class=\"material-icons\">upload_file</span>\n      Select Files\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      multiple\n      accept=\"image/jpeg,image/png\"\n      (change)=\"onFileSelected($event)\"\n      [disabled]=\"uploadState.isUploading\"\n      hidden>\n\n    <button\n      mat-button\n      color=\"warn\"\n      (click)=\"clearSelection()\"\n      [disabled]=\"uploadState.selectedFiles.length === 0 || uploadState.isUploading\"\n      class=\"clear-button\">\n      Clear\n    </button>\n  </div>\n\n  <!-- Selected Files Display -->\n  <div class=\"selected-files\" *ngIf=\"uploadState.selectedFiles.length > 0\">\n    <h3>Selected Files ({{uploadState.selectedFiles.length}})</h3>\n    <ul class=\"file-list\">\n      <li *ngFor=\"let file of uploadState.selectedFiles\" class=\"file-item\">\n        <span class=\"file-icon\">\n          <span class=\"material-icons\">insert_drive_file</span>\n        </span>\n        <span class=\"file-name\">{{file.name}}</span>\n        <span class=\"file-size\">{{getFileSizeString(file.size)}}</span>\n        <span class=\"file-status valid\">\u2713</span>\n      </li>\n    </ul>\n  </div>\n\n  <!-- Validation Errors -->\n  <div class=\"error-message\" *ngIf=\"uploadState.errorMessage && !uploadState.isUploading\">\n    <span class=\"material-icons\">error</span>\n    <span>{{uploadState.errorMessage}}</span>\n  </div>\n\n  <!-- Progress Bar -->\n  <div class=\"progress-container\" *ngIf=\"uploadState.isUploading\">\n    <div class=\"progress-header\">\n      <span>Uploading...</span>\n      <span class=\"progress-percentage\">{{uploadState.progress}}%</span>\n    </div>\n    <mat-progress-bar\n      mode=\"determinate\"\n      [value]=\"uploadState.progress\"\n      color=\"primary\">\n    </mat-progress-bar>\n    <div class=\"current-file\" *ngIf=\"uploadState.currentFile\">\n      Current: {{uploadState.currentFile}}\n    </div>\n  </div>\n\n  <!-- Success Message -->\n  <div class=\"success-message\" *ngIf=\"uploadState.successMessage\">\n    <span class=\"material-icons\">check_circle</span>\n    <span>{{uploadState.successMessage}}</span>\n  </div>\n\n  <!-- Upload Action Button -->\n  <div class=\"upload-actions\" *ngIf=\"uploadState.selectedFiles.length > 0 && !uploadState.isUploading\">\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"startUpload()\"\n      [disabled]=\"uploadState.selectedFiles.length === 0 || uploadState.errorMessage !== null\"\n      class=\"start-upload-button\">\n      Upload {{uploadState.selectedFiles.length}} File{{uploadState.selectedFiles.length > 1 ? 's' : ''}}\n    </button>\n  </div>\n</div>\n", styles: [".upload-demo-container{padding:1rem;max-width:60rem;margin:0 auto}.upload-demo-container h2{font-size:2rem;font-weight:700;color:#333;margin-bottom:.75rem}.upload-demo-container .demo-description{font-size:1rem;color:#666;margin-bottom:1.5rem}.upload-demo-container .upload-controls{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center}.upload-demo-container .upload-controls .upload-button,.upload-demo-container .upload-controls .clear-button{min-width:10rem}.upload-demo-container .selected-files{background-color:#fbfbfb;border:1px solid #ccc;border-radius:.25rem;padding:1rem;margin-bottom:1.5rem}.upload-demo-container .selected-files h3{font-size:1.125rem;font-weight:500;color:#333;margin-bottom:.5rem}.upload-demo-container .selected-files .file-list{list-style:none;padding:0;margin:0}.upload-demo-container .selected-files .file-list .file-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;border-bottom:1px solid #e5e5e5}.upload-demo-container .selected-files .file-list .file-item:last-child{border-bottom:none}.upload-demo-container .selected-files .file-list .file-item .file-icon{color:#286fad;display:flex;align-items:center}.upload-demo-container .selected-files .file-list .file-item .file-name{flex:1;font-size:.875rem;color:#333;font-weight:500}.upload-demo-container .selected-files .file-list .file-item .file-size{font-size:.875rem;color:#666}.upload-demo-container .selected-files .file-list .file-item .file-status.valid{color:#1c8150;font-weight:700}.upload-demo-container .error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:#d400031a;border:1px solid #d40003;border-radius:.25rem;color:#d40003;margin-bottom:1.5rem;font-size:.875rem}.upload-demo-container .error-message .material-icons{font-size:2.5rem}.upload-demo-container .progress-container{margin-bottom:1.5rem}.upload-demo-container .progress-container .progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.upload-demo-container .progress-container .progress-header span:first-child{font-size:.875rem;font-weight:500;color:#333}.upload-demo-container .progress-container .progress-header .progress-percentage{font-size:.875rem;font-weight:700;color:#286fad}.upload-demo-container .progress-container .current-file{font-size:.875rem;color:#666;margin-top:.25rem;font-style:italic}.upload-demo-container .success-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:#1c81501a;border:1px solid #1c8150;border-radius:.25rem;color:#1c8150;margin-bottom:1.5rem;font-size:.875rem}.upload-demo-container .success-message .material-icons{font-size:2.5rem}.upload-demo-container .upload-actions{text-align:center;margin-top:1.5rem}.upload-demo-container .upload-actions .start-upload-button{min-width:15rem;padding:.5rem 1.5rem}\n"] }]
+        }] });
+
 class HttpRequestServicesDemoComponent {
     constructor(configOptions) {
         this.configOptions = configOptions;
@@ -10399,6 +10913,7 @@ class HttpRequestServicesDemoComponent {
             // { name: "Http Signals Service", value: 'http_signals_service', new: true },
             { name: "Http State Service", value: 'http_state_service' },
             { name: "Http State Service - Websockets", value: 'http_state_service_ws', new: false },
+            { name: "File Upload Demo", value: 'file_upload_demo', new: true, divider: true },
             { name: "Database Service", value: 'database_service', divider: true, disabled: false },
             { name: "Local Storage Service", value: 'local_storage_service' },
             // { name: "Local Signals Storage Service", value: 'local_storage_signals_service', new: true },
@@ -10415,11 +10930,11 @@ class HttpRequestServicesDemoComponent {
         this.selectedService = this.requestTypes[type].value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo" }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('file_upload_demo') {\n    <p>\n      <lib-upload-demo></lib-upload-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo" }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "component", type: UploadDemoComponent, selector: "lib-upload-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-http-request-services-demo', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-http-request-services-demo', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('file_upload_demo') {\n    <p>\n      <lib-upload-demo></lib-upload-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -10979,7 +11494,8 @@ class HttpRequestManagerModule {
             WsMessagingComponent,
             WsNotificationsComponent,
             WsAiMessagingComponent,
-            WsChatsComponent], imports: [CommonModule,
+            WsChatsComponent,
+            UploadDemoComponent], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
@@ -11003,7 +11519,8 @@ class HttpRequestManagerModule {
             MatDatepickerModule,
             MatNativeDateModule,
             MatCardModule,
-            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent] }); }
+            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent,
+            UploadDemoComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, providers: [
             { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
             { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
@@ -11091,9 +11608,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         WsNotificationsComponent,
                         WsAiMessagingComponent,
                         WsChatsComponent,
+                        UploadDemoComponent,
                     ],
                     exports: [
                         HttpRequestServicesDemoComponent,
+                        UploadDemoComponent,
                     ],
                     providers: [
                         { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
@@ -11244,5 +11763,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, BatchOptions, BatchResult, CONFIG_SETTINGS_TOKEN, ChannelType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsDemoComponent, LocalStorageSignalsManagerService, LoggerService, NotificationMessage, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StoreStateSignalsDemoComponent, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, calculateBatchProgress, countdown, createChannelName, delayedRetry, isErrorState, isPendingState, isSuccessState, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, BatchOptions, BatchResult, CONFIG_SETTINGS_TOKEN, ChannelType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, InvalidFileInfoModel, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsDemoComponent, LocalStorageSignalsManagerService, LoggerService, NotificationMessage, OperationResultModel, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateOperationResult, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StoreStateSignalsDemoComponent, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UploadDemoComponent, UploadValidationErrorModel, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, calculateBatchProgress, countdown, createChannelName, delayedRetry, isErrorState, isPendingState, isSuccessState, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
 //# sourceMappingURL=http-request-manager.mjs.map