@sambath999/localize-token 12.3.1 → 12.3.2

package/bundles/sambath999-localize-token.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('jwt-decode'), require('@angular/common/http'), require('primeng/api'), require('primeng/dynamicdialog'), require('@angular/common'), require('primeng/toast'), require('primeng/inputtext'), require('primeng/button'), require('@angular/platform-browser'), require('@angular/forms')) :
-    typeof define === 'function' && define.amd ? define('@sambath999/localize-token', ['exports', '@angular/core', 'rxjs', 'jwt-decode', '@angular/common/http', 'primeng/api', 'primeng/dynamicdialog', '@angular/common', 'primeng/toast', 'primeng/inputtext', 'primeng/button', '@angular/platform-browser', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.sambath999 = global.sambath999 || {}, global.sambath999["localize-token"] = {}), global.ng.core, global.rxjs, global.jwt_decode, global.ng.common.http, global.api, global.dynamicdialog, global.ng.common, global.toast, global.inputtext, global.button, global.ng.platformBrowser, global.ng.forms));
-})(this, (function (exports, i0, rxjs, jwt_decode, i1, api, dynamicdialog, common, toast, inputtext, button, platformBrowser, forms) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('jwt-decode'), require('@angular/common/http'), require('primeng/api'), require('primeng/dynamicdialog'), require('@angular/platform-browser'), require('@angular/common'), require('primeng/toast'), require('primeng/inputtext'), require('primeng/button'), require('@angular/forms')) :
+    typeof define === 'function' && define.amd ? define('@sambath999/localize-token', ['exports', '@angular/core', 'rxjs', 'jwt-decode', '@angular/common/http', 'primeng/api', 'primeng/dynamicdialog', '@angular/platform-browser', '@angular/common', 'primeng/toast', 'primeng/inputtext', 'primeng/button', '@angular/forms'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.sambath999 = global.sambath999 || {}, global.sambath999["localize-token"] = {}), global.ng.core, global.rxjs, global.jwt_decode, global.ng.common.http, global.api, global.dynamicdialog, global.ng.platformBrowser, global.ng.common, global.toast, global.inputtext, global.button, global.ng.forms));
+})(this, (function (exports, i0, rxjs, jwt_decode, i1, api, dynamicdialog, platformBrowser, common, toast, inputtext, button, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -620,6 +620,8 @@
             configurable: true
         });
         LocalizeTokenService.prototype.tenantToken = function (name) {
+            if (!name)
+                return undefined;
             return LocalizeToken.storage.get(name);
         };
         LocalizeTokenService.prototype.storageGet = function () {
@@ -659,31 +661,257 @@
      */
     exports.EMethod = void 0;
     (function (EMethod) {
-        EMethod[EMethod["POST"] = 1] = "POST";
-        EMethod[EMethod["GET"] = 2] = "GET";
-        EMethod[EMethod["PUT"] = 3] = "PUT";
-        EMethod[EMethod["DELETE"] = 4] = "DELETE";
-        EMethod[EMethod["PATCH"] = 5] = "PATCH";
-    })(exports.EMethod || (exports.EMethod = {}));
+        EMethod["POST"] = "post";
+        EMethod["GET"] = "get";
+        EMethod["PUT"] = "put";
+        EMethod["DELETE"] = "delete";
+        EMethod["PATCH"] = "patch";
+    })(exports.EMethod || (exports.EMethod = {}));
+
+    var LocalizeApiHelper = /** @class */ (function () {
+        function LocalizeApiHelper() {
+            this.defaultRetryOptions = {
+                connectionError: {
+                    message: 'Connection error occurred. Please wait',
+                    blockScreen: true,
+                    blockScreenZIndex: 10000
+                }
+            };
+        }
+        LocalizeApiHelper.prototype.performRetry = function (options) {
+            return __awaiter(this, void 0, void 0, function () {
+                var attempts, lastError, consoleCount, styleElement, result, error_1;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            attempts = 0;
+                            consoleCount = 0;
+                            // Merge default retry options with provided options
+                            options = Object.assign(Object.assign({}, this.defaultRetryOptions), options);
+                            _e.label = 1;
+                        case 1:
+                            if (!(attempts < options.maxRetries())) return [3 /*break*/, 10];
+                            _e.label = 2;
+                        case 2:
+                            _e.trys.push([2, 4, , 9]);
+                            return [4 /*yield*/, options.callback()];
+                        case 3:
+                            result = _e.sent();
+                            this.removeBlocker(styleElement);
+                            return [2 /*return*/, result];
+                        case 4:
+                            error_1 = _e.sent();
+                            lastError = error_1;
+                            if (consoleCount >= 7) {
+                                console.clear();
+                                consoleCount = 0;
+                            }
+                            if (options.retryUnless && !options.retryUnless(error_1))
+                                throw error_1; // If the error should not be retried, rethrow it
+                            return [4 /*yield*/, this.onConnectionError(options, error_1)];
+                        case 5:
+                            // Handle connection error
+                            styleElement = _e.sent();
+                            if (!options.onError) return [3 /*break*/, 7];
+                            return [4 /*yield*/, this.invokeHook(options.onError.bind(this, error_1))];
+                        case 6:
+                            _e.sent();
+                            _e.label = 7;
+                        case 7:
+                            if (attempts >= options.maxRetries() - 1)
+                                throw error_1;
+                            attempts++;
+                            consoleCount++;
+                            console.warn("Attempt " + attempts + " failed. Retrying...", error_1);
+                            return [4 /*yield*/, waitFor(options.delay)];
+                        case 8:
+                            _e.sent();
+                            return [3 /*break*/, 9];
+                        case 9: return [3 /*break*/, 1];
+                        case 10:
+                            console.warn("Failed after " + options.maxRetries + " attempts");
+                            throw lastError;
+                    }
+                });
+            });
+        };
+        LocalizeApiHelper.prototype.performRequestWithRetry = function (options, config, performRequest) {
+            var _a, _b, _c, _d;
+            return __awaiter(this, void 0, void 0, function () {
+                var retryUnless;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            retryUnless = ((_a = config.retryOptions) === null || _a === void 0 ? void 0 : _a.retryFunction)
+                                || this.isConnectionError;
+                            return [4 /*yield*/, this.performRetry({
+                                    connectionError: (_b = config.retryOptions) === null || _b === void 0 ? void 0 : _b.onConnectionError,
+                                    maxRetries: function () { var _a, _b; return (_b = (_a = config.retryOptions) === null || _a === void 0 ? void 0 : _a.maxRetries) !== null && _b !== void 0 ? _b : 1000; },
+                                    delay: (_d = (_c = config.retryOptions) === null || _c === void 0 ? void 0 : _c.delay) !== null && _d !== void 0 ? _d : 500,
+                                    callback: function () { return performRequest(options); },
+                                    retryUnless: retryUnless,
+                                })];
+                        case 1: return [2 /*return*/, _e.sent()];
+                    }
+                });
+            });
+        };
+        LocalizeApiHelper.prototype.buildUrl = function (baseUrl, path) {
+            var normalizedUrl = "" + baseUrl.trim().replace(/\/?$/, '/') + path.trim().replace(/^\//, '');
+            return normalizedUrl.endsWith('/')
+                ? normalizedUrl.slice(0, -1)
+                : normalizedUrl;
+        };
+        LocalizeApiHelper.prototype.normalizeError = function (error) {
+            var _a, _b, _c;
+            return {
+                code: ((_a = error.error) === null || _a === void 0 ? void 0 : _a.code) || "HTTP_" + error.status,
+                message: ((_b = error.error) === null || _b === void 0 ? void 0 : _b.message) || error.message,
+                details: (_c = error.error) === null || _c === void 0 ? void 0 : _c.details,
+                status: error.status
+            };
+        };
+        LocalizeApiHelper.prototype.invokeHook = function (callback) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            if (!callback)
+                                return [2 /*return*/];
+                            result = callback();
+                            if (!(result instanceof Promise)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, result];
+                        case 1:
+                            _e.sent();
+                            _e.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        LocalizeApiHelper.prototype.createRequest = function (instance, method, url, body, options) {
+            var _this = this;
+            var request$ = instance.client.request(method, url, Object.assign(Object.assign({}, options), { body: body, observe: 'response' })).pipe(rxjs.takeUntil(instance.destroy$()), rxjs.catchError(function (error) {
+                // Convert to a non-observable error to handle in the promise
+                return rxjs.throwError(function () { return _this.normalizeError(error); });
+            }));
+            return request$;
+        };
+        LocalizeApiHelper.prototype.defaultRetryFunction = function (error) {
+            // Don't retry for other errors (like 400, 401, 403, etc.)
+            if (!this.isConnectionError(error))
+                throw error;
+            return true;
+        };
+        LocalizeApiHelper.prototype.isConnectionError = function (error) {
+            var isNetworkError = error.status === 0;
+            var isServerError = error.status >= 1000 && error.status < 600;
+            return isNetworkError || isServerError;
+        };
+        LocalizeApiHelper.prototype.onConnectionError = function (options, error) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var styleElement;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            if (!options.connectionError)
+                                return [2 /*return*/];
+                            if (!this.isConnectionError(error)) return [3 /*break*/, 2];
+                            styleElement = this.screenBlocker(options, error, true);
+                            return [4 /*yield*/, this.invokeHook((_a = options.connectionError.callback) === null || _a === void 0 ? void 0 : _a.bind(this, error))];
+                        case 1:
+                            _e.sent();
+                            return [2 /*return*/, styleElement];
+                        case 2:
+                            this.screenBlocker(options, error, false);
+                            styleElement === null || styleElement === void 0 ? void 0 : styleElement.remove();
+                            _e.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        LocalizeApiHelper.prototype.validateConfig = function (config) {
+            var _a;
+            if (LocalizeToken.config.needTenant && !((_a = config.tenantTokenName) === null || _a === void 0 ? void 0 : _a.trim().length)) {
+                throw Error('Tenant token is required but tenantTokenName is not configured');
+            }
+            if (!LocalizeToken.config.revokeTokenUrl.trim().length) {
+                throw Error('Revoke token URL is not configured - token refresh will not work');
+            }
+        };
+        LocalizeApiHelper.prototype.screenBlocker = function (optons, error, add) {
+            if (add === void 0) { add = true; }
+            var _a, _b, _c, _d;
+            if (!((_a = optons.connectionError) === null || _a === void 0 ? void 0 : _a.blockScreen))
+                return;
+            if (error instanceof i1.HttpErrorResponse)
+                error = this.normalizeError(error);
+            var message = ((_b = optons.connectionError) === null || _b === void 0 ? void 0 : _b.message)
+                || 'Connection error occurred. Please wait';
+            var errorMessage = (error === null || error === void 0 ? void 0 : error.message) || 'An error occurred';
+            var suggestinMessage = ((_c = optons.connectionError) === null || _c === void 0 ? void 0 : _c.suggestionMessage)
+                || 'Please check your internet connection or the server status.';
+            var zIndex = ((_d = optons.connectionError) === null || _d === void 0 ? void 0 : _d.blockScreenZIndex) || 10000;
+            var body = document.body;
+            var blcokerHtml = "\n        <div class=\"lze-blocker\">\n            <div class=\"lze-blocker__message\">\n                " + message + "\n                <span class=\"lze-blocker__dotting\">\n                    <span class=\"lze-blocker__dot\"></span>\n                    <span class=\"lze-blocker__dot\"></span>\n                    <span class=\"lze-blocker__dot\"></span>\n                </span>\n            </div>\n            <div class=\"lze-blocker__error\">" + errorMessage + "</div>\n            <div class=\"lze-blocker__error_suggestion\">" + suggestinMessage + "</div>\n            <div class=\"lze-blocker__spinner\"></div>\n        </div>\n        ";
+            var style = "\n        .lze-blocker {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            z-index: " + zIndex + ";\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n            color: #fff;\n            font-family: Arial, sans-serif;\n            text-align: center;\n            padding: 20px;\n            box-sizing: border-box;\n            overflow: hidden;\n            user-select: none;\n        }\n        \n        .lze-blocker__spinner {\n            border: 4px solid rgba(255, 255, 255, 0.1);\n            border-top: 4px solid #fff;\n            border-radius: 50%;\n            width: 50px;\n            height: 50px;\n            animation: spin 1s linear infinite;\n            margin-top: 20px;\n        }\n\n        .lze-blocker__message {\n            color: #fff;\n            font-size: 18px;\n            margin-bottom: 10px;\n        }\n            \n        .lze-blocker__dotting {\n            display: inline-block;\n            vertical-align: middle;\n        }\n        .lze-blocker__dot {\n            display: inline-block;\n            width: 7px;\n            height: 7px;\n            background-color: #ffffff;\n            border-radius: 50%;\n            margin-left: 3px;\n            opacity: 0.3;\n            animation: dotting 1s infinite;\n        }\n        .lze-blocker__dot:nth-child(1) {\n            animation-delay: 0s;\n            opacity: 1;\n        }\n        .lze-blocker__dot:nth-child(2) {\n            animation-delay: 0.2s;\n        }\n        .lze-blocker__dot:nth-child(3) {\n            animation-delay: 0.4s;\n        }\n\n        @keyframes dotting {\n            0%, 80%, 100% { opacity: 0.3; }\n            40% { opacity: 1; }\n        }\n\n        .lze-blocker__error {\n            color: #f00;\n            font-size: 14px;\n            margin-bottom: 10px;\n            text-shadow: 0 0 1px #ff5f5f;\n        }\n\n        .lze-blocker__error_suggestion {\n            color: #ccc;\n            font-size: 14px;\n            margin-top: 10px;\n        }\n        \n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n        ";
+            var styleElement = document.createElement('style');
+            if (add) {
+                if (!document.querySelector('.lze-blocker')) {
+                    styleElement.innerHTML = style;
+                    document.head.appendChild(styleElement);
+                    body.insertAdjacentHTML('beforeend', blcokerHtml);
+                }
+            }
+            else {
+                this.removeBlocker(styleElement);
+            }
+            return styleElement;
+        };
+        LocalizeApiHelper.prototype.removeBlocker = function (styleElement) {
+            var blocker = document.querySelector('.lze-blocker');
+            blocker === null || blocker === void 0 ? void 0 : blocker.remove();
+            styleElement === null || styleElement === void 0 ? void 0 : styleElement.remove();
+        };
+        return LocalizeApiHelper;
+    }());
+    var ApiHelper = new LocalizeApiHelper();
+
+    var SCHEMES = LocalizeToken.httpHeaders;
     var LocalizeApiService = /** @class */ (function () {
         function LocalizeApiService(httpClient, localizeTokenService) {
             var _this = this;
             this.httpClient = httpClient;
             this.localizeTokenService = localizeTokenService;
+            this.destroy$ = new rxjs.Subject();
             this.isRequestingSubject = new rxjs.BehaviorSubject(false);
-            this.isResolvedStartupSubject = new rxjs.BehaviorSubject(false);
-            this.apiConfigs = {};
+            this.needTenant = LocalizeToken.config.needTenant;
+            this.config = {
+                waitEachRequest: { milliseconds: 0 },
+                enableRequestCancellation: true,
+                retryOptions: {
+                    maxRetries: 1000,
+                    delay: 1000,
+                    retryFunction: ApiHelper.defaultRetryFunction.bind(this),
+                },
+            };
+            this.apiOptions = {
+                method: exports.EMethod.GET,
+                requestBody: null,
+            };
             /**
              * A higher-order function that returns a curried function for making API requests.
              *
              * @param baseUrl - The base URL of the API.
              * @returns A curried function that can be used to make API requests.
              */
-            this.func = function (baseUrl) { return function (path, method, value, isFormData, headers) {
+            this.func = function (baseUrl) { return function (path, method, reqBody, reqHeaders) {
                 if (method === void 0) { method = exports.EMethod.GET; }
-                if (value === void 0) { value = null; }
-                if (isFormData === void 0) { isFormData = false; }
-                return _this.base(baseUrl, path, method, value, isFormData, headers);
+                if (reqBody === void 0) { reqBody = null; }
+                return _this.request(baseUrl, path, method, reqBody, reqHeaders);
             }; };
         }
         Object.defineProperty(LocalizeApiService.prototype, "isRequesting", {
@@ -691,8 +919,25 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(LocalizeApiService.prototype, "isResolvedStartup", {
-            get: function () { return this.isResolvedStartupSubject.value; },
+        Object.defineProperty(LocalizeApiService.prototype, "isRevokingToken", {
+            get: function () { return this.localizeTokenService.isRevokingToken; },
+            set: function (value) { this.localizeTokenService.isRevokingToken = value; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LocalizeApiService.prototype, "accessToken", {
+            get: function () { return this.localizeTokenService.accessToken; },
+            set: function (value) { this.localizeTokenService.accessToken = value; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LocalizeApiService.prototype, "refreshToken", {
+            get: function () { return this.localizeTokenService.refreshToken; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LocalizeApiService.prototype, "tenantToken", {
+            get: function () { return this.localizeTokenService.tenantToken(this.config.tenantTokenName); },
             enumerable: false,
             configurable: true
         });
@@ -701,187 +946,235 @@
          * @param apiConfigs - The API configurations.
          */
         LocalizeApiService.prototype.init = function (apiConfigs) {
-            this.apiConfigs = apiConfigs;
+            this.config = Object.assign(Object.assign({}, this.config), apiConfigs);
+            ApiHelper.validateConfig(this.config);
         };
-        LocalizeApiService.prototype.base = function (baseUrl, path, method, value, isFormData, headers) {
+        LocalizeApiService.prototype.cancelPendingRequests = function () {
+            this.config.enableRequestCancellation
+                && this.destroy$.next();
+        };
+        LocalizeApiService.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        LocalizeApiService.prototype.request = function (baseUrl, path, method, reqBody, reqHeaders) {
             if (method === void 0) { method = exports.EMethod.GET; }
-            if (value === void 0) { value = null; }
-            if (isFormData === void 0) { isFormData = false; }
+            if (reqBody === void 0) { reqBody = null; }
             return __awaiter(this, void 0, void 0, function () {
-                var url, httpMethod, request, error_1;
-                var _this = this;
+                var apiOptions, error_1;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.ifPromise(this.apiConfigs.onPrepareRequest)];
+                        case 0: return [4 /*yield*/, ApiHelper.invokeHook(this.config.onPrepareRequest)];
                         case 1:
                             _b.sent();
-                            url = "" + baseUrl.trim().replace(/\/?$/, '/') + path.trim().replace(/^\//, '');
-                            httpMethod = exports.EMethod[method].toLowerCase();
-                            request = function () { return { body: value, headers: _this.options(isFormData, headers) }; };
-                            // Wait for previous request to complete
-                            return [4 /*yield*/, this.toWaitForPreviousRequest()];
+                            apiOptions = this.buildApiOptions(baseUrl, path, method, reqBody, reqHeaders);
+                            _b.label = 2;
                         case 2:
-                            // Wait for previous request to complete
-                            _b.sent();
-                            _b.label = 3;
+                            _b.trys.push([2, 5, , 7]);
+                            return [4 /*yield*/, this.toWaitForPreviousRequest()];
                         case 3:
-                            _b.trys.push([3, 5, , 7]);
-                            return [4 /*yield*/, this.processRequest(httpMethod, url, request())];
+                            _b.sent();
+                            return [4 /*yield*/, ApiHelper.performRequestWithRetry(apiOptions, this.config, this.performRequest.bind(this))];
                         case 4: return [2 /*return*/, _b.sent()];
                         case 5:
                             error_1 = _b.sent();
-                            if (error_1.status !== 401) {
-                                throw error_1;
-                            }
-                            return [4 /*yield*/, this.onUnauthorizedError(httpMethod, url, request)];
+                            return [4 /*yield*/, this.handleOnRequestError(error_1, apiOptions)];
                         case 6: return [2 /*return*/, _b.sent()];
                         case 7: return [2 /*return*/];
                     }
                 });
             });
         };
-        LocalizeApiService.prototype.onUnauthorizedError = function (httpMethod, url, request) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.revokeToken()];
-                        case 1:
-                            _b.sent();
-                            if (!!this.isResolvedStartup) return [3 /*break*/, 3];
-                            return [4 /*yield*/, this.processRequest(httpMethod, url, request())];
-                        case 2: return [2 /*return*/, _b.sent()];
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        LocalizeApiService.prototype.toWaitForPreviousRequest = function () {
-            var _a;
+        LocalizeApiService.prototype.handleOnRequestError = function (error, options) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!this.localizeTokenService.isRevokingToken) return [3 /*break*/, 2];
-                            return [4 /*yield*/, waitUntil(function () { return !_this.localizeTokenService.isRevokingToken; })];
-                        case 1:
-                            _b.sent();
-                            _b.label = 2;
-                        case 2:
-                            if (!((_a = this.apiConfigs.waitEachRequest) === null || _a === void 0 ? void 0 : _a.milliseconds)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, waitFor(this.apiConfigs.waitEachRequest.milliseconds, this.isRequesting)];
-                        case 3:
-                            _b.sent();
-                            _b.label = 4;
-                        case 4: return [2 /*return*/];
+                            if (error.status !== 401)
+                                throw error;
+                            return [4 /*yield*/, ApiHelper.performRetry({
+                                    maxRetries: function () { return 1000; },
+                                    delay: 500,
+                                    retryUnless: function (error) { return error.status === 401 || ApiHelper.isConnectionError(error); },
+                                    callback: function () { return __awaiter(_this, void 0, void 0, function () {
+                                        return __generator(this, function (_b) {
+                                            switch (_b.label) {
+                                                case 0: 
+                                                // Only handle 401 Unauthorized errors
+                                                return [4 /*yield*/, this.revokeToken()];
+                                                case 1:
+                                                    // Only handle 401 Unauthorized errors
+                                                    _b.sent();
+                                                    return [4 /*yield*/, this.performRequest(options)];
+                                                case 2: 
+                                                // Retry the request with the new access token
+                                                return [2 /*return*/, _b.sent()];
+                                            }
+                                        });
+                                    }); }
+                                })];
+                        case 1: return [2 /*return*/, _b.sent()];
                     }
                 });
             });
         };
-        LocalizeApiService.prototype.processRequest = function (method, url, options) {
+        LocalizeApiService.prototype.performRequest = function (options) {
             return __awaiter(this, void 0, void 0, function () {
-                var result;
+                var buildOptions, request$, response;
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
+                            buildOptions = { headers: this.buildHeaderOptions(options) };
+                            request$ = ApiHelper.createRequest({
+                                client: this.httpClient,
+                                destroy$: function () { return _this.destroy$; }
+                            }, options.method, options.requestUrl, options.requestBody, buildOptions);
+                            // Set the isRequesting state to true before making the request
                             this.isRequestingSubject.next(true);
-                            return [4 /*yield*/, new Promise(function (resolve, reject) { return _this.httpClient.request(method, url, options).subscribe({ next: resolve, error: reject }); })];
+                            return [4 /*yield*/, new Promise(function (resolve, reject) { return request$.subscribe({ next: function (res) { return resolve(res.body); }, error: reject }); })];
                         case 1:
-                            result = _b.sent();
+                            response = _b.sent();
+                            // Reset the isRequesting state after the request completes
                             this.isRequestingSubject.next(false);
-                            return [2 /*return*/, result];
+                            return [2 /*return*/, response];
                     }
                 });
             });
         };
         LocalizeApiService.prototype.revokeToken = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var reqUrl_1, reqHeaders_1, revokeToken;
-                var _this = this;
+                var apiOptions, revokeToken, error_2;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!this.localizeTokenService.isRevokingToken) return [3 /*break*/, 2];
-                            return [4 /*yield*/, waitUntil(function () { return !_this.localizeTokenService.isRevokingToken; })];
+                            _b.trys.push([0, 4, 6, 7]);
+                            return [4 /*yield*/, this.interceptRevokeToken()];
                         case 1:
-                            _b.sent();
-                            return [2 /*return*/];
+                            if (_b.sent())
+                                return [2 /*return*/];
+                            this.isRevokingToken = true;
+                            apiOptions = Object.assign(Object.assign({}, this.buildApiOptions(LocalizeToken.config.revokeTokenUrl)), { refreshToken: true });
+                            return [4 /*yield*/, ApiHelper.performRequestWithRetry(apiOptions, this.config, this.performRequest.bind(this))];
                         case 2:
-                            _b.trys.push([2, , 9, 10]);
-                            this.localizeTokenService.isRevokingToken = true;
-                            reqUrl_1 = LocalizeToken.config.revokeTokenUrl;
-                            reqHeaders_1 = this.options().append(LocalizeToken.httpHeaders.X_REFRESH_TOKEN, "" + this.localizeTokenService.refreshToken);
-                            return [4 /*yield*/, new Promise(function (resolve, reject) { return _this.httpClient.get(reqUrl_1, { headers: reqHeaders_1 }).subscribe({ next: resolve, error: reject }); })];
-                        case 3:
                             revokeToken = _b.sent();
-                            if (!(revokeToken === null || revokeToken === void 0 ? void 0 : revokeToken.status)) return [3 /*break*/, 4];
-                            this.localizeTokenService.accessToken = revokeToken.message;
-                            return [3 /*break*/, 8];
+                            return [4 /*yield*/, this.handleOnTokenRevoked(revokeToken)];
+                        case 3:
+                            _b.sent();
+                            return [3 /*break*/, 7];
                         case 4:
-                            if (!!this.localizeTokenService.refreshToken) return [3 /*break*/, 6];
-                            return [4 /*yield*/, this.ifPromise(this.apiConfigs.onAutoLogout)];
+                            error_2 = _b.sent();
+                            // Handle the error, log it
+                            return [4 /*yield*/, ApiHelper.invokeHook(this.config.onAutoLogout)];
                         case 5:
+                            // Handle the error, log it
                             _b.sent();
-                            return [3 /*break*/, 8];
+                            return [3 /*break*/, 7];
                         case 6:
-                            if (!this.apiConfigs.onRevokeUnauthorized) return [3 /*break*/, 8];
-                            return [4 /*yield*/, this.ifPromise(this.apiConfigs.onRevokeUnauthorized)];
-                        case 7:
-                            _b.sent();
-                            _b.label = 8;
-                        case 8: return [3 /*break*/, 10];
-                        case 9:
-                            this.localizeTokenService.isRevokingToken = false;
+                            // Reset the revoking token state
+                            this.isRevokingToken = false;
                             return [7 /*endfinally*/];
-                        case 10: return [2 /*return*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
         };
         /** default http request options */
-        LocalizeApiService.prototype.options = function (isFormData, headers) {
-            var _b;
-            if (isFormData === void 0) { isFormData = false; }
-            if (headers === void 0) { headers = {}; }
-            var defaultHeaders = (_b = {}, _b[LocalizeToken.httpHeaders.AUTHORIZATION] = "Bearer " + this.localizeTokenService.accessToken, _b);
-            if (LocalizeToken.config.needTenant) {
-                defaultHeaders[LocalizeToken.httpHeaders.X_TENANT] = "" + this.localizeTokenService.tenantToken(this.apiConfigs.tenantTokenName);
+        LocalizeApiService.prototype.buildHeaderOptions = function (options) {
+            var _b, _c, _d, _e;
+            var headers = Object.assign(Object.assign({}, (options.refreshToken && (_b = {}, _b[SCHEMES.X_REFRESH_TOKEN] = "" + this.refreshToken, _b))), (!options.isFormData && (_c = {}, _c[SCHEMES.CONTENT_TYPE] = 'application/json', _c)));
+            if (!options.refreshToken) {
+                headers = Object.assign(Object.assign(Object.assign({}, headers), (_d = {}, _d[SCHEMES.AUTHORIZATION] = "Bearer " + this.accessToken, _d)), (this.needTenant && (_e = {}, _e[SCHEMES.X_TENANT] = "" + this.tenantToken, _e)));
             }
-            if (!isFormData) {
-                defaultHeaders[LocalizeToken.httpHeaders.CONTENT_TYPE] = 'application/json';
-            }
-            var filteredHeaders = Object.keys(defaultHeaders).filter(function (key) { return !Object.keys(headers).includes(key); })
-                .reduce(function (acc, key) {
-                var _b;
-                return (Object.assign(Object.assign({}, acc), (_b = {}, _b[key] = defaultHeaders[key], _b)));
-            }, {});
-            var mergedHeaders = Object.assign(Object.assign({}, filteredHeaders), headers);
-            return new i1.HttpHeaders(mergedHeaders);
+            return new i1.HttpHeaders(Object.assign(Object.assign({}, headers), options.headers));
+        };
+        LocalizeApiService.prototype.buildApiOptions = function (baseUrl, path, method, requestBody, headers) {
+            if (path === void 0) { path = ''; }
+            if (method === void 0) { method = exports.EMethod.GET; }
+            if (requestBody === void 0) { requestBody = null; }
+            var requestUrl = ApiHelper.buildUrl(baseUrl, path);
+            var isFormData = requestBody && requestBody instanceof FormData;
+            return Object.assign(Object.assign({}, this.apiOptions), { headers: headers, method: method, requestUrl: requestUrl, requestBody: requestBody, isFormData: isFormData });
         };
-        LocalizeApiService.prototype.ifPromise = function (fn) {
+        LocalizeApiService.prototype.toWaitForPreviousRequest = function () {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _b, _c;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
-                            if (!fn)
-                                return [2 /*return*/];
-                            if (!(fn instanceof Promise)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, fn()];
+                            _b = this.isRevokingToken;
+                            if (!_b) return [3 /*break*/, 2];
+                            return [4 /*yield*/, waitUntil(function () { return !_this.isRevokingToken; })];
                         case 1:
-                            _b = _c.sent();
+                            _b = (_d.sent());
+                            _d.label = 2;
+                        case 2:
+                            _b;
+                            // to wait for each request in 50ms, even if the request is not completed
+                            _c = ((_a = this.config.waitEachRequest) === null || _a === void 0 ? void 0 : _a.milliseconds);
+                            if (!_c) 
+                            // to wait for each request in 50ms, even if the request is not completed
+                            return [3 /*break*/, 4];
+                            return [4 /*yield*/, waitFor(this.config.waitEachRequest.milliseconds, this.isRequesting)];
+                        case 3:
+                            _c = (_d.sent());
+                            _d.label = 4;
+                        case 4:
+                            // to wait for each request in 50ms, even if the request is not completed
+                            _c;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        LocalizeApiService.prototype.handleOnTokenRevoked = function (response) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!(response === null || response === void 0 ? void 0 : response.status)) return [3 /*break*/, 1];
+                            // If the response is successful, update the access token
+                            this.accessToken = response.message;
                             return [3 /*break*/, 3];
+                        case 1:
+                            // If the response indicates an error, invoke the onRevokeUnauthorized hook
+                            console.warn('Token revocation failed, refresh token is expired.', response.message);
+                            return [4 /*yield*/, ApiHelper.invokeHook(this.config.onRevokeUnauthorized)];
+                        case 2:
+                            _b.sent();
+                            _b.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        LocalizeApiService.prototype.interceptRevokeToken = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this.isRevokingToken) return [3 /*break*/, 2];
+                            console.warn('Token is already being revoked. Waiting for the current operation to complete...');
+                            return [4 /*yield*/, waitUntil(function () { return !_this.isRevokingToken; })];
+                        case 1:
+                            _b.sent();
+                            return [2 /*return*/, true];
                         case 2:
-                            _b = fn();
-                            _c.label = 3;
-                        case 3: return [2 /*return*/, _b];
+                            if (!this.refreshToken) {
+                                // await ApiHelper.invokeHook(this.apiConfigs.onAutoLogout);
+                                throw new Error('Refresh token is missing. Please login again.');
+                            }
+                            return [2 /*return*/, false];
                     }
                 });
             });
         };
         return LocalizeApiService;
-    }()); //class
+    }());
     LocalizeApiService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalizeApiService_Factory() { return new LocalizeApiService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(LocalizeTokenService)); }, token: LocalizeApiService, providedIn: "root" });
     LocalizeApiService.decorators = [
         { type: i0.Injectable, args: [{
@@ -908,7 +1201,7 @@
     ];
 
     var LocalizeLogindlgComponent = /** @class */ (function () {
-        function LocalizeLogindlgComponent(messageService, cdt, dlgRef, dlgConfig, tokenService, httpClient) {
+        function LocalizeLogindlgComponent(messageService, cdt, dlgRef, dlgConfig, tokenService, httpClient, sanitizer) {
             var _this = this;
             this.messageService = messageService;
             this.cdt = cdt;
@@ -916,6 +1209,7 @@
             this.dlgConfig = dlgConfig;
             this.tokenService = tokenService;
             this.httpClient = httpClient;
+            this.sanitizer = sanitizer;
             this.messageKey = "$login-dlg";
             this.loading = false;
             this.success = false;
@@ -923,6 +1217,7 @@
             this.clickLogout = function () { var _a; return (_a = _this.logout) === null || _a === void 0 ? void 0 : _a.call(_this); };
             this.decodeToken = this.tokenService.decodeRefreshToken;
             this.loginConfig = this.dlgConfig.data.loginConfig;
+            this.properties = this.loginConfig.properties;
         }
         LocalizeLogindlgComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -942,69 +1237,77 @@
             return __awaiter(this, void 0, void 0, function () {
                 var loginRes, cookieOptions;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             if (!this.isValidPassword) {
-                                this.showMessage("error", "Password is required and must be at least 6 characters");
-                                return [2 /*return*/];
+                                return [2 /*return*/, this.showMessage("error", "Password is required and must be at least 6 characters")];
                             }
                             this.loading = true;
                             return [4 /*yield*/, this.login()];
                         case 1:
-                            loginRes = _c.sent();
+                            loginRes = _d.sent();
                             if (!(loginRes === null || loginRes === void 0 ? void 0 : loginRes.status)) {
-                                this.showMessage("error", (_a = loginRes.message) !== null && _a !== void 0 ? _a : "An error occurred");
-                                return [2 /*return*/];
+                                return [2 /*return*/, this.showMessage("error", (_a = loginRes.message) !== null && _a !== void 0 ? _a : "An error occurred")];
                             }
                             this.tokenService.accessToken = loginRes.tokens.accessToken;
-                            cookieOptions = { expires: (_b = this.loginConfig.expire) !== null && _b !== void 0 ? _b : 5 };
+                            cookieOptions = { expires: (_b = this.loginConfig.expire) !== null && _b !== void 0 ? _b : 365 };
                             LocalizeToken.storage.set(this.config.refreshTokenName, loginRes.tokens.refreshToken, cookieOptions);
                             this.success = true;
-                            setTimeout(function () { return _this.dlgRef.close(true); }, 2000);
+                            setTimeout(function () {
+                                _this.dlgConfig.dismissableMask = true;
+                                _this.dlgConfig.modal = false;
+                                _this.dlgRef.close(true);
+                            }, 2000);
                             return [2 /*return*/];
                     }
                 });
             });
         };
         LocalizeLogindlgComponent.prototype.login = function () {
+            var _a, _b, _c;
             return __awaiter(this, void 0, void 0, function () {
                 var e_1;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
-                            if (!this.loginUrl || !this.loginUrl.trim().length) {
+                            if (!((_a = this.loginUrl) === null || _a === void 0 ? void 0 : _a.trim().length)) {
                                 this.showMessage("error", "Login url is required");
                                 throw new Error("Login url is required");
                             }
-                            _c.label = 1;
+                            _d.label = 1;
                         case 1:
-                            _c.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, new Promise(function (resolve, reject) { return _this.httpClient.post(_this.loginUrl, { password: _this.password.trim() }, { headers: _this.getHeaders() })
-                                    .subscribe({ next: resolve, error: reject }); })];
-                        case 2: return [2 /*return*/, _c.sent()];
-                        case 3:
-                            e_1 = _c.sent();
+                            _d.trys.push([1, 5, , 6]);
+                            if (!this.loginConfig.loginFunction) return [3 /*break*/, 3];
+                            console.log("Using custom login function");
+                            return [4 /*yield*/, this.loginConfig.loginFunction((_c = (_b = this.decodeToken) === null || _b === void 0 ? void 0 : _b.email) !== null && _c !== void 0 ? _c : '', this.password.trim(), this.getHeaders())];
+                        case 2: return [2 /*return*/, _d.sent()];
+                        case 3: return [4 /*yield*/, new Promise(function (resolve, reject) { return _this.httpClient.post(_this.loginUrl, { password: _this.password.trim() }, { headers: _this.getHeaders() }).subscribe({ next: resolve, error: reject }); })];
+                        case 4: return [2 /*return*/, _d.sent()];
+                        case 5:
+                            e_1 = _d.sent();
                             this.showMessage("error", e_1.message);
                             return [2 /*return*/, null];
-                        case 4: return [2 /*return*/];
+                        case 6: return [2 /*return*/];
                     }
                 });
             });
         };
         LocalizeLogindlgComponent.prototype.getHeaders = function () {
-            var _c;
+            var _d;
             var _a, _b;
-            return _c = {},
-                _c[LocalizeToken.httpHeaders.X_REFRESH_TOKEN] = (_a = LocalizeToken.storage.get(this.config.refreshTokenName)) !== null && _a !== void 0 ? _a : "",
-                _c[LocalizeToken.httpHeaders.X_TENANT] = (_b = LocalizeToken.storage.get(this.loginConfig.tenantTokenName)) !== null && _b !== void 0 ? _b : "",
-                _c;
+            return _d = {},
+                _d[LocalizeToken.httpHeaders.X_REFRESH_TOKEN] = (_a = LocalizeToken.storage.get(this.config.refreshTokenName)) !== null && _a !== void 0 ? _a : "",
+                _d[LocalizeToken.httpHeaders.X_TENANT] = (_b = LocalizeToken.storage.get(this.loginConfig.tenantTokenName)) !== null && _b !== void 0 ? _b : "",
+                _d;
         };
         Object.defineProperty(LocalizeLogindlgComponent.prototype, "isValidPassword", {
             get: function () {
                 this.loading = false;
-                return this.password && this.password.trim().length >= 6 && this.password.trim().length <= 50;
+                return this.properties.passwordValidator
+                    ? this.properties.passwordValidator(this.password)
+                    : this.password && this.password.trim().length >= 6 && this.password.trim().length <= 50;
             },
             enumerable: false,
             configurable: true
@@ -1013,15 +1316,23 @@
             this.messageService.add({ key: this.messageKey, severity: severity, summary: summary });
             this.loading = false;
         };
+        Object.defineProperty(LocalizeLogindlgComponent.prototype, "sanitizedTitle", {
+            get: function () {
+                var _a;
+                return this.sanitizer.bypassSecurityTrustHtml((_a = this.properties.title) !== null && _a !== void 0 ? _a : '');
+            },
+            enumerable: false,
+            configurable: true
+        });
         return LocalizeLogindlgComponent;
     }());
     LocalizeLogindlgComponent.decorators = [
         { type: i0.Component, args: [{
-                    template: "<p-toast key=\"$login-dlg\" position=\"top-center\"></p-toast>\n  <div id=\"login-dlg-wrap\">\n    <div id=\"login-dlg-header\">\n      <div id=\"login-logo\" class=\"p-mb-2\"></div>\n      <h3 *ngIf=\"!success\">Your session is expired! <br> Please login again to continue.</h3>\n      <h3 *ngIf=\"success\" style=\"color:green !important;\">You haved successfully logged in.</h3>\n    </div>\n    <div id=\"login-dlg-content\">\n      <ng-container *ngIf=\"!success\">\n        <div *ngIf=\"loading\" class=\"loader-wrap\">\n          <div class=\"login-dlg-loader\"></div>\n        </div>\n        <div class=\"login-dlg-elm\">\n          <div class=\"p-inputgroup\">\n            <span class=\"p-inputgroup-addon\">\n              <i class=\"material-icons-round\">person</i>\n            </span>\n            <input disabled pInputText type=\"text\" placeholder=\"Username\" [value]=\"decodeToken?.email\" />\n          </div>\n        </div>\n  \n        <div class=\"login-dlg-elm\">\n          <div class=\"p-inputgroup\">\n            <span class=\"p-inputgroup-addon\">\n              <i class=\"material-icons-round\">lock</i>\n            </span>\n            <input [disabled]=\"loading\" (keydown.enter)=\"clickLogin()\" pInputText type=\"password\" placeholder=\"Password\" [(ngModel)]=\"password\"\n              autofocus />\n          </div>\n        </div>\n        <div class=\"login-dlg-elm\">\n          <button style=\"width: 100%;\" pButton type=\"button\" label=\"Login\" (click)=\"clickLogin()\"\n            [disabled]=\"!password || loading\"></button>\n        </div>\n  \n        <div class=\"login-dlg-elm\" style=\"display:flex;align-items: center;user-select: none;\">\n          <span>No, I want to login with another user.</span>\n          <button class=\"p-button-text\" pButton type=\"button\" label=\"Logout\" (click)=\"clickLogout()\"></button>\n        </div>\n      </ng-container>\n  \n      <ng-container *ngIf=\"success\">\n        <div style=\"margin-top:35px;\"></div>\n        <div class=\"check-animation-wrap\">\n          <div class=\"check-main-container\">\n            <div class=\"check-container\">\n              <div class=\"check-background\">\n                <svg viewBox=\"0 0 65 51\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M7 25L27.3077 44L58.5 7\" stroke=\"white\" stroke-width=\"13\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"></path>\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>",
+                    template: "<p-toast key=\"$login-dlg\" position=\"top-center\"></p-toast>\n  <div id=\"login-dlg-wrap\">\n    <div id=\"login-dlg-header\">\n      <div id=\"login-logo\" class=\"p-mb-2\" style=\"background: url('{{properties.logoImage}}') no-repeat\"></div>\n      <h3 *ngIf=\"!success\" [innerHTML]=\"sanitizedTitle\"></h3>\n      <h3 *ngIf=\"success\" style=\"color:green !important;\">{{properties.loginSuccessMessage}}</h3>\n    </div>\n    <div id=\"login-dlg-content\">\n      <ng-container *ngIf=\"!success\">\n        <div *ngIf=\"loading\" class=\"loader-wrap\">\n          <div class=\"login-dlg-loader\"></div>\n        </div>\n        <div class=\"login-dlg-elm\">\n          <div class=\"p-inputgroup\">\n            <span class=\"p-inputgroup-addon\">\n              <i class=\"material-icons-round\">person</i>\n            </span>\n            <input disabled pInputText type=\"text\" placeholder=\"{{properties.username?.placeHolder}}\" [value]=\"decodeToken?.email\" />\n          </div>\n        </div>\n  \n        <div class=\"login-dlg-elm\">\n          <div class=\"p-inputgroup\">\n            <span class=\"p-inputgroup-addon\">\n              <i class=\"material-icons-round\">lock</i>\n            </span>\n            <input [disabled]=\"loading\" (keydown.enter)=\"clickLogin()\" pInputText type=\"password\" \n              placeholder=\"{{properties.password?.placeHolder}}\" [(ngModel)]=\"password\"\n              autofocus />\n          </div>\n        </div>\n        <div class=\"login-dlg-elm\">\n          <button style=\"width: 100%;\" pButton type=\"button\" label=\"{{properties.loginButton?.placeHolder}}\" (click)=\"clickLogin()\"\n            [disabled]=\"!password || loading\"></button>\n        </div>\n  \n        <div class=\"login-dlg-elm login-dlg-suggest\" style=\"display:flex;align-items: center;user-select: none;\">\n          <span>{{properties.logoutButton?.message}}</span>\n          <button class=\"p-button-text\" pButton type=\"button\" label=\"{{properties.logoutButton?.placeHolder}}\" \n            (click)=\"clickLogout()\"></button>\n        </div>\n      </ng-container>\n  \n      <ng-container *ngIf=\"success\">\n        <div style=\"margin-top:35px;\"></div>\n        <div class=\"check-animation-wrap\">\n          <div class=\"check-main-container\">\n            <div class=\"check-container\">\n              <div class=\"check-background\">\n                <svg viewBox=\"0 0 65 51\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M7 25L27.3077 44L58.5 7\" stroke=\"white\" stroke-width=\"13\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"></path>\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>",
                     selector: "app-localize-logindlg",
                     providers: [api.MessageService],
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["\n  #login-dlg-wrap {\n    width: 100%;\n    max-width: 400px;\n    margin: 0 auto;\n    padding: 30px;\n  }\n  \n  .login-dlg-elm {\n    margin-top: 1rem;\n  }\n  \n  #login-dlg-header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  #login-dlg-header h3 {\n    font-weight: bold;\n    font-size: 0.9rem;\n    color: orange;\n    text-align: center;\n  }\n  \n  #login-logo {\n    height: 40px;\n    width: 40px;\n    background: url(\"/assets/images/logo-300px.png\") no-repeat;\n    background-size: contain;\n  }\n  \n  #login-dlg-content .p-inputgroup {\n    height: 45px;\n  }\n  \n  #login-dlg-content .p-inputgroup .p-inputgroup-addon {\n    height: 45px;\n    border-radius: 15px 0 0 15px;\n    width: 50px;\n  }\n  \n  #login-dlg-content .p-inputgroup .p-inputgroup-addon * {\n    font-size: 1rem;\n  }\n  \n  #login-dlg-content .p-inputgroup input {\n    height: 45px;\n    border-radius: 0 15px 15px 0;\n  }\n  \n  #login-dlg-content button {\n    height: 45px;\n    border-radius: 15px;\n  }\n  \n  /*check animation block*/\n  \n  .check-animation-wrap {\n    top: 0;\n    left: 0;\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: calc(100% - 200px);\n    min-height: 400px;\n  }\n  \n  .check-main-container {\n    width: 100%;\n    height: 100vh;\n    display: flex;\n    flex-flow: column;\n    justify-content: center;\n    align-items: center;\n  }\n  \n  .check-container {\n    width: 6.25rem;\n    height: 7.5rem;\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: space-between;\n  }\n  \n  .check-container .check-background {\n    width: 100%;\n    height: calc(100% - 1.25rem);\n    background: linear-gradient(to bottom right, #5de593, #41d67c);\n    box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    transform: scale(0.84);\n    border-radius: 50%;\n    animation: animateContainer 0.75s ease-out forwards 0.75s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n  }\n  \n  .check-container .check-background svg {\n    width: 65%;\n    transform: translateY(0.25rem);\n    stroke-dasharray: 80;\n    stroke-dashoffset: 80;\n    animation: animateCheck 0.35s forwards 1.25s ease-out;\n    min-width: auto !important;\n  }\n  \n  .check-container .check-shadow {\n    bottom: calc(-15% - 5px);\n    left: 0;\n    border-radius: 50%;\n    background: radial-gradient(closest-side, rgba(73, 218, 131, 1), transparent);\n    animation: animateShadow 0.75s ease-out forwards 0.75s;\n  }\n  \n  @keyframes animateContainer {\n    0% {\n      opacity: 0;\n      transform: scale(0);\n      box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    25% {\n      opacity: 1;\n      transform: scale(0.9);\n      box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    43.75% {\n      transform: scale(1.15);\n      box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    62.5% {\n      transform: scale(1);\n      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    81.25% {\n      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    100% {\n      opacity: 1;\n      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;\n    }\n  }\n  \n  @keyframes animateCheck {\n    from {\n      stroke-dashoffset: 80;\n    }\n  \n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  \n  @keyframes animateShadow {\n    0% {\n      opacity: 0;\n      width: 100%;\n      height: 15%;\n    }\n  \n    25% {\n      opacity: 0.25;\n    }\n  \n    43.75% {\n      width: 40%;\n      height: 7%;\n      opacity: 0.35;\n    }\n  \n    100% {\n      width: 85%;\n      height: 15%;\n      opacity: 0.25;\n    }\n  }\n  #login-dlg-wrap .loader-wrap {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height:100%;\n    width:100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    background: #ffffff42;\n    backdrop-filter: blur(1px);\n  }\n\n  #login-dlg-wrap .login-dlg-loader {\n    border: 15px solid #e7e7e7;\n    border-top: 15px solid #52dba1;\n    border-radius: 50%;\n    width: 100px;\n    height: 100px;\n    animation: spinloader 2s linear infinite;\n  }\n\n  #login-dlg-wrap .loader-wrap::before {\n    content: \"\";\n    position: absolute;\n    width: 70px;\n    height: 70px;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    border: 15px solid #e7e7e700;\n    border-top: 15px solid #52dba1c9;\n    border-radius: 50%;\n    animation: spinloader .75s linear infinite;\n  }\n\n  @keyframes spinloader {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n  "]
+                    styles: ["\n  #login-dlg-wrap {\n    width: 100%;\n    max-width: 400px;\n    margin: 0 auto;\n    padding: 30px;\n    height: 100%;\n  }\n  \n  .login-dlg-elm {\n    margin-top: 1rem;\n  }\n\n  .login-dlg-elm.login-dlg-suggest {\n    display: flex ;\n    align-items: center;\n    user-select: none;\n    border-bottom: solid 1px #ddd;\n    border-radius: 5px;\n    padding: 5px 10px;\n    background: #f9f9f9;\n    box-shadow: 1px 5px 10px -12px #000;\n  }\n  \n  #login-dlg-header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  #login-dlg-header h3 {\n    font-weight: bold;\n    font-size: 0.9rem;\n    color: orange;\n    text-align: center;\n  }\n  \n  #login-logo {\n    height: 55px;\n    width: 55px;\n    /* background: url(\"/assets/images/logo-300px.png\") no-repeat; */\n    background-size: contain !important;\n  }\n  \n  #login-dlg-content .p-inputgroup {\n    height: 45px;\n  }\n  \n  #login-dlg-content .p-inputgroup .p-inputgroup-addon {\n    height: 45px;\n    border-radius: 15px 0 0 15px;\n    width: 50px;\n  }\n  #login-dlg-content *{\n    font-size: .9rem;\n    /* font-family: 'Lexend', 'Roboto', sans-serif, 'material-icons-round'; */\n  }\n  \n  #login-dlg-content .p-inputgroup .p-inputgroup-addon * {\n    font-size: 1rem;\n  }\n  \n  #login-dlg-content .p-inputgroup input {\n    height: 45px;\n    border-radius: 0 15px 15px 0;\n  }\n  \n  #login-dlg-content button {\n    height: 45px;\n    border-radius: 15px;\n  }\n  \n  /*check animation block*/\n  \n  .check-animation-wrap {\n    top: 0;\n    left: 0;\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: calc(100% - 200px);\n    min-height: 400px;\n  }\n  \n  .check-main-container {\n    width: 100%;\n    height: 100vh;\n    display: flex;\n    flex-flow: column;\n    justify-content: center;\n    align-items: center;\n  }\n  \n  .check-container {\n    width: 6.25rem;\n    height: 7.5rem;\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: space-between;\n  }\n  \n  .check-container .check-background {\n    width: 100%;\n    height: calc(100% - 1.25rem);\n    background: linear-gradient(to bottom right, #5de593, #41d67c);\n    box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    transform: scale(0.84);\n    border-radius: 50%;\n    animation: animateContainer 0.75s ease-out forwards 0.75s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n  }\n  \n  .check-container .check-background svg {\n    width: 65%;\n    transform: translateY(0.25rem);\n    stroke-dasharray: 80;\n    stroke-dashoffset: 80;\n    animation: animateCheck 0.35s forwards 1.25s ease-out;\n    min-width: auto !important;\n  }\n  \n  .check-container .check-shadow {\n    bottom: calc(-15% - 5px);\n    left: 0;\n    border-radius: 50%;\n    background: radial-gradient(closest-side, rgba(73, 218, 131, 1), transparent);\n    animation: animateShadow 0.75s ease-out forwards 0.75s;\n  }\n  \n  @keyframes animateContainer {\n    0% {\n      opacity: 0;\n      transform: scale(0);\n      box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    25% {\n      opacity: 1;\n      transform: scale(0.9);\n      box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    43.75% {\n      transform: scale(1.15);\n      box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    62.5% {\n      transform: scale(1);\n      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    81.25% {\n      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;\n    }\n  \n    100% {\n      opacity: 1;\n      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;\n    }\n  }\n  \n  @keyframes animateCheck {\n    from {\n      stroke-dashoffset: 80;\n    }\n  \n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  \n  @keyframes animateShadow {\n    0% {\n      opacity: 0;\n      width: 100%;\n      height: 15%;\n    }\n  \n    25% {\n      opacity: 0.25;\n    }\n  \n    43.75% {\n      width: 40%;\n      height: 7%;\n      opacity: 0.35;\n    }\n  \n    100% {\n      width: 85%;\n      height: 15%;\n      opacity: 0.25;\n    }\n  }\n  #login-dlg-wrap .loader-wrap {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height:100%;\n    width:100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    background: #ffffff42;\n    backdrop-filter: blur(1px);\n  }\n\n  #login-dlg-wrap .login-dlg-loader {\n    border: 15px solid #e7e7e7;\n    border-top: 15px solid #52dba1;\n    border-radius: 50%;\n    width: 100px;\n    height: 100px;\n    animation: spinloader 2s linear infinite;\n  }\n\n  #login-dlg-wrap .loader-wrap::before {\n    content: \"\";\n    position: absolute;\n    width: 70px;\n    height: 70px;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    border: 15px solid #e7e7e700;\n    border-top: 15px solid #52dba1c9;\n    border-radius: 50%;\n    animation: spinloader .75s linear infinite;\n  }\n\n  @keyframes spinloader {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n  "]
                 },] }
     ];
     LocalizeLogindlgComponent.ctorParameters = function () { return [
@@ -1030,7 +1341,8 @@
         { type: dynamicdialog.DynamicDialogRef },
         { type: dynamicdialog.DynamicDialogConfig },
         { type: LocalizeTokenService },
-        { type: i1.HttpClient }
+        { type: i1.HttpClient },
+        { type: platformBrowser.DomSanitizer }
     ]; };
 
     var LocalizeLogindlgService = /** @class */ (function () {
@@ -1040,15 +1352,12 @@
         LocalizeLogindlgService.prototype.openLoginDialog = function (loginConfig, config) {
             return __awaiter(this, void 0, void 0, function () {
                 var dialogService, dialog;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            config !== null && config !== void 0 ? config : (config = {
-                                header: 'Login',
-                                height: '650px',
-                                style: { 'max-width': '400px', width: '100%', 'height': '650px' },
-                            });
-                            config.data = Object.assign(Object.assign({}, config.data || {}), { loginConfig: loginConfig });
+                            config = this.intercepDialogConfig(config);
+                            this.initConfig(loginConfig);
+                            config.data = Object.assign(Object.assign({}, (config.data || {})), { loginConfig: loginConfig });
                             dialogService = this.injector.get(dynamicdialog.DialogService);
                             dialog = dialogService.open(LocalizeLogindlgComponent, config);
                             return [4 /*yield*/, new Promise(function (resolve) { return dialog.onClose.subscribe(function (res) {
@@ -1057,12 +1366,42 @@
                                     }
                                 }); })];
                         case 1:
-                            _a.sent();
+                            _b.sent();
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        LocalizeLogindlgService.prototype.intercepDialogConfig = function (config) {
+            config !== null && config !== void 0 ? config : (config = {
+                header: 'Login',
+                style: { 'max-width': '400px', width: '100%', 'height': '650px' },
+                modal: true,
+                closable: false,
+                showHeader: false,
+            });
+            config = Object.assign(Object.assign({}, config), {
+                contentStyle: { 'height': '100%', 'border-radius': '20px' }
+            });
+            config.style = Object.assign(Object.assign({}, config.style), { 'border-radius': '20px' });
+            return config;
+        };
+        LocalizeLogindlgService.prototype.initConfig = function (loginConfig) {
+            var _a;
+            loginConfig !== null && loginConfig !== void 0 ? loginConfig : (loginConfig = {});
+            (_a = loginConfig.properties) !== null && _a !== void 0 ? _a : (loginConfig.properties = {
+                title: 'Your session is expired!<br/> Please login again to continue.',
+                loginSuccessMessage: 'You have successfully logged in.',
+                logoImage: '/assets/images/logo-300px.png',
+                username: { placeHolder: 'Username' },
+                password: { placeHolder: 'Password' },
+                loginButton: { placeHolder: 'Login' },
+                logoutButton: {
+                    message: 'No, I want to login with another user.',
+                    placeHolder: 'Logout'
+                }
+            });
+        };
         return LocalizeLogindlgService;
     }());
     LocalizeLogindlgService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalizeLogindlgService_Factory() { return new LocalizeLogindlgService(i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: LocalizeLogindlgService, providedIn: "root" });
@@ -1101,6 +1440,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.ApiHelper = ApiHelper;
     exports.LocalizeApiService = LocalizeApiService;
     exports.LocalizeLogindlgComponent = LocalizeLogindlgComponent;
     exports.LocalizeLogindlgModule = LocalizeLogindlgModule;