@sambath999/localize-token 12.4.1 → 12.4.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/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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common/http'), require('@angular/core'), require('primeng/api'), require('primeng/dynamicdialog'), require('rxjs'), require('jwt-decode'), 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/common/http', '@angular/core', 'primeng/api', 'primeng/dynamicdialog', 'rxjs', 'jwt-decode', '@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.common.http, global.ng.core, global.api, global.dynamicdialog, global.rxjs, global.jwt_decode, global.ng.platformBrowser, global.ng.common, global.toast, global.inputtext, global.button, global.ng.forms));
+})(this, (function (exports, i1, i0, api, dynamicdialog, rxjs, jwt_decode, platformBrowser, common, toast, inputtext, button, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,15 +22,9 @@
         return Object.freeze(n);
     }
 
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var jwt_decode__namespace = /*#__PURE__*/_interopNamespace(jwt_decode);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-
-    var LOCALIZE_API_ASSETS = {
-        network: {
-            noConnection: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n            <svg id=\"lze-no-connection\" data-name=\"Layer 2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 77.29 70.98\">\n            <defs>\n                <style> .cls-1 { fill: #fff; } .cls-2, .cls-3 { fill: #e30613; } .cls-3 { stroke: #e30613; stroke-miterlimit: 10; stroke-width: .25px; } </style>\n            </defs>\n            <g id=\"Layer_3\" data-name=\"Layer 3\">\n                <g>\n                <path class=\"cls-1\" d=\"m73.29,35c-1.2,0-2.33-.53-3.09-1.46-.48-.57-11.23-13.2-31.55-13.2s-31.11,12.66-31.56,13.2c-1.4,1.71-3.92,1.95-5.63.55-1.71-1.4-1.95-3.92-.55-5.63.54-.66,13.47-16.12,37.74-16.12s37.2,15.46,37.74,16.12c1.4,1.71,1.15,4.23-.56,5.62-.71.58-1.61.9-2.53.9Z\"/>\n                <path class=\"cls-1\" d=\"m63.96,45.66c-1.19,0-2.32-.53-3.08-1.44-5.79-6.05-13.86-9.39-22.24-9.21-8.38-.18-16.45,3.16-22.24,9.22-1.46,1.65-3.99,1.81-5.64.35-1.57-1.39-1.8-3.77-.52-5.43,7.32-7.89,17.64-12.29,28.4-12.12,10.76-.17,21.08,4.24,28.4,12.12,1.4,1.71,1.15,4.23-.56,5.62-.71.58-1.6.9-2.53.9Z\"/>\n                <path class=\"cls-1\" d=\"m53.3,56.32c-1.24,0-2.41-.57-3.16-1.55-5.73-6.35-15.52-6.85-21.87-1.13-.4.36-.77.73-1.13,1.13-1.36,1.73-3.88,2.03-5.61.67-1.71-1.34-2.03-3.8-.73-5.54,8.39-9.85,23.18-11.04,33.03-2.65.95.81,1.84,1.69,2.65,2.65,1.34,1.75,1,4.26-.75,5.6-.7.53-1.55.82-2.43.82Z\"/>\n                </g>\n                <path class=\"cls-2\" d=\"m47.21,9.45l-4.06,41.36c-.64,5.42-8.39,5.39-9.01,0,0,0-4.06-41.36-4.06-41.36-.46-4.73,2.99-8.94,7.72-9.4,5.33-.58,9.97,4.09,9.4,9.4h0Z\"/>\n                <circle class=\"cls-3\" cx=\"38.64\" cy=\"64.79\" r=\"6.07\"/>\n            </g>\n            </svg>"
-        }
-    };
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -682,6 +676,252 @@
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
 
+    var LocalizeLogindlgComponent = /** @class */ (function () {
+        function LocalizeLogindlgComponent(messageService, cdt, dlgRef, dlgConfig, tokenService, httpClient, sanitizer) {
+            var _this = this;
+            this.messageService = messageService;
+            this.cdt = cdt;
+            this.dlgRef = dlgRef;
+            this.dlgConfig = dlgConfig;
+            this.tokenService = tokenService;
+            this.httpClient = httpClient;
+            this.sanitizer = sanitizer;
+            this.messageKey = "$login-dlg";
+            this.loading = false;
+            this.success = false;
+            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;
+        }
+        Object.defineProperty(LocalizeLogindlgComponent.prototype, "config", {
+            get: function () { return this.tokenService.config; },
+            enumerable: false,
+            configurable: true
+        });
+        LocalizeLogindlgComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.dlgConfig.closable = false;
+            this.logout = this.loginConfig.logoutFunc;
+            this.loginUrl = this.loginConfig.loginUrl;
+            if (!this.decodeToken) {
+                this.showMessage("error", "Token is invalid");
+                setTimeout(function () { var _a; return (_a = _this.logout) === null || _a === void 0 ? void 0 : _a.call(_this); }, 2000);
+            }
+        };
+        LocalizeLogindlgComponent.prototype.ngAfterViewInit = function () {
+            this.cdt.detectChanges();
+        };
+        LocalizeLogindlgComponent.prototype.clickLogin = function () {
+            var _a, _b, _c;
+            return __awaiter(this, void 0, void 0, function () {
+                var loginRes, cookieOptions;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!this.isValidPassword) {
+                                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 = _d.sent();
+                            if (!(loginRes === null || loginRes === void 0 ? void 0 : loginRes.status)) {
+                                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 : 365 };
+                            LocalizeToken.storage.set(((_c = this.config.refreshToken) === null || _c === void 0 ? void 0 : _c.name) || '', loginRes.tokens.refreshToken, cookieOptions);
+                            this.success = true;
+                            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 (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            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");
+                            }
+                            _d.label = 1;
+                        case 1:
+                            _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 6: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        LocalizeLogindlgComponent.prototype.getHeaders = function () {
+            var _d;
+            var _a, _b;
+            return _d = {},
+                _d[LocalizeToken.httpHeaders.X_REFRESH_TOKEN] = (_a = this.tokenService.refreshToken) !== null && _a !== void 0 ? _a : "",
+                _d[LocalizeToken.httpHeaders.X_TENANT] = (_b = this.tokenService.tenantToken) !== null && _b !== void 0 ? _b : "",
+                _d;
+        };
+        Object.defineProperty(LocalizeLogindlgComponent.prototype, "isValidPassword", {
+            get: function () {
+                this.loading = false;
+                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
+        });
+        LocalizeLogindlgComponent.prototype.showMessage = function (severity, summary) {
+            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\" 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    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 [
+        { type: api.MessageService },
+        { type: i0.ChangeDetectorRef },
+        { type: dynamicdialog.DynamicDialogRef },
+        { type: dynamicdialog.DynamicDialogConfig },
+        { type: LocalizeTokenService },
+        { type: i1.HttpClient },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+
+    var LocalizeLogindlgService = /** @class */ (function () {
+        function LocalizeLogindlgService(injector) {
+            this.injector = injector;
+        }
+        LocalizeLogindlgService.prototype.openLoginDialog = function (loginConfig, config) {
+            return __awaiter(this, void 0, void 0, function () {
+                var dialogService, dialog;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            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) {
+                                    if (res) {
+                                        resolve();
+                                    }
+                                }); })];
+                        case 1:
+                            _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" });
+    LocalizeLogindlgService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    LocalizeLogindlgService.ctorParameters = function () { return [
+        { type: i0.Injector }
+    ]; };
+
+    var LocalizeLogindlgModule = /** @class */ (function () {
+        function LocalizeLogindlgModule() {
+        }
+        return LocalizeLogindlgModule;
+    }());
+    LocalizeLogindlgModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [LocalizeLogindlgComponent],
+                    exports: [LocalizeLogindlgComponent],
+                    imports: [
+                        common.CommonModule,
+                        toast.ToastModule,
+                        inputtext.InputTextModule,
+                        platformBrowser.BrowserModule,
+                        forms.FormsModule,
+                        button.ButtonModule,
+                    ],
+                    providers: [LocalizeLogindlgService],
+                    schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
+                },] }
+    ];
+
+    var LOCALIZE_API_ASSETS = {
+        network: {
+            noConnection: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n            <svg id=\"lze-no-connection\" data-name=\"Layer 2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 77.29 70.98\">\n            <defs>\n                <style> .cls-1 { fill: #fff; } .cls-2, .cls-3 { fill: #e30613; } .cls-3 { stroke: #e30613; stroke-miterlimit: 10; stroke-width: .25px; } </style>\n            </defs>\n            <g id=\"Layer_3\" data-name=\"Layer 3\">\n                <g>\n                <path class=\"cls-1\" d=\"m73.29,35c-1.2,0-2.33-.53-3.09-1.46-.48-.57-11.23-13.2-31.55-13.2s-31.11,12.66-31.56,13.2c-1.4,1.71-3.92,1.95-5.63.55-1.71-1.4-1.95-3.92-.55-5.63.54-.66,13.47-16.12,37.74-16.12s37.2,15.46,37.74,16.12c1.4,1.71,1.15,4.23-.56,5.62-.71.58-1.61.9-2.53.9Z\"/>\n                <path class=\"cls-1\" d=\"m63.96,45.66c-1.19,0-2.32-.53-3.08-1.44-5.79-6.05-13.86-9.39-22.24-9.21-8.38-.18-16.45,3.16-22.24,9.22-1.46,1.65-3.99,1.81-5.64.35-1.57-1.39-1.8-3.77-.52-5.43,7.32-7.89,17.64-12.29,28.4-12.12,10.76-.17,21.08,4.24,28.4,12.12,1.4,1.71,1.15,4.23-.56,5.62-.71.58-1.6.9-2.53.9Z\"/>\n                <path class=\"cls-1\" d=\"m53.3,56.32c-1.24,0-2.41-.57-3.16-1.55-5.73-6.35-15.52-6.85-21.87-1.13-.4.36-.77.73-1.13,1.13-1.36,1.73-3.88,2.03-5.61.67-1.71-1.34-2.03-3.8-.73-5.54,8.39-9.85,23.18-11.04,33.03-2.65.95.81,1.84,1.69,2.65,2.65,1.34,1.75,1,4.26-.75,5.6-.7.53-1.55.82-2.43.82Z\"/>\n                </g>\n                <path class=\"cls-2\" d=\"m47.21,9.45l-4.06,41.36c-.64,5.42-8.39,5.39-9.01,0,0,0-4.06-41.36-4.06-41.36-.46-4.73,2.99-8.94,7.72-9.4,5.33-.58,9.97,4.09,9.4,9.4h0Z\"/>\n                <circle class=\"cls-3\" cx=\"38.64\" cy=\"64.79\" r=\"6.07\"/>\n            </g>\n            </svg>"
+        }
+    };
+
     /**
      * Http method options
      */
@@ -1254,246 +1494,54 @@
                 },] }
     ];
 
-    var LocalizeLogindlgComponent = /** @class */ (function () {
-        function LocalizeLogindlgComponent(messageService, cdt, dlgRef, dlgConfig, tokenService, httpClient, sanitizer) {
-            var _this = this;
-            this.messageService = messageService;
-            this.cdt = cdt;
-            this.dlgRef = dlgRef;
-            this.dlgConfig = dlgConfig;
-            this.tokenService = tokenService;
-            this.httpClient = httpClient;
-            this.sanitizer = sanitizer;
-            this.messageKey = "$login-dlg";
-            this.loading = false;
-            this.success = false;
-            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;
-        }
-        Object.defineProperty(LocalizeLogindlgComponent.prototype, "config", {
-            get: function () { return this.tokenService.config; },
-            enumerable: false,
-            configurable: true
-        });
-        LocalizeLogindlgComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.dlgConfig.closable = false;
-            this.logout = this.loginConfig.logoutFunc;
-            this.loginUrl = this.loginConfig.loginUrl;
-            if (!this.decodeToken) {
-                this.showMessage("error", "Token is invalid");
-                setTimeout(function () { var _a; return (_a = _this.logout) === null || _a === void 0 ? void 0 : _a.call(_this); }, 2000);
-            }
-        };
-        LocalizeLogindlgComponent.prototype.ngAfterViewInit = function () {
-            this.cdt.detectChanges();
-        };
-        LocalizeLogindlgComponent.prototype.clickLogin = function () {
-            var _a, _b, _c;
-            return __awaiter(this, void 0, void 0, function () {
-                var loginRes, cookieOptions;
-                var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            if (!this.isValidPassword) {
-                                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 = _d.sent();
-                            if (!(loginRes === null || loginRes === void 0 ? void 0 : loginRes.status)) {
-                                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 : 365 };
-                            LocalizeToken.storage.set(((_c = this.config.refreshToken) === null || _c === void 0 ? void 0 : _c.name) || '', loginRes.tokens.refreshToken, cookieOptions);
-                            this.success = true;
-                            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 (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            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");
-                            }
-                            _d.label = 1;
-                        case 1:
-                            _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 6: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        LocalizeLogindlgComponent.prototype.getHeaders = function () {
-            var _d;
-            var _a, _b;
-            return _d = {},
-                _d[LocalizeToken.httpHeaders.X_REFRESH_TOKEN] = (_a = this.tokenService.refreshToken) !== null && _a !== void 0 ? _a : "",
-                _d[LocalizeToken.httpHeaders.X_TENANT] = (_b = this.tokenService.tenantToken) !== null && _b !== void 0 ? _b : "",
-                _d;
-        };
-        Object.defineProperty(LocalizeLogindlgComponent.prototype, "isValidPassword", {
-            get: function () {
-                this.loading = false;
-                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
-        });
-        LocalizeLogindlgComponent.prototype.showMessage = function (severity, summary) {
-            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\" 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    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 [
-        { type: api.MessageService },
-        { type: i0.ChangeDetectorRef },
-        { type: dynamicdialog.DynamicDialogRef },
-        { type: dynamicdialog.DynamicDialogConfig },
-        { type: LocalizeTokenService },
-        { type: i1.HttpClient },
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-
-    var LocalizeLogindlgService = /** @class */ (function () {
-        function LocalizeLogindlgService(injector) {
-            this.injector = injector;
+    var LocalizeApiTokenService = /** @class */ (function () {
+        function LocalizeApiTokenService(tokenService, apiService, loginDialogService) {
+            this.api = apiService;
+            this.token = tokenService;
+            this.loginDialog = loginDialogService;
         }
-        LocalizeLogindlgService.prototype.openLoginDialog = function (loginConfig, config) {
-            return __awaiter(this, void 0, void 0, function () {
-                var dialogService, dialog;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            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) {
-                                    if (res) {
-                                        resolve();
-                                    }
-                                }); })];
-                        case 1:
-                            _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'
-                }
-            });
+        LocalizeApiTokenService.prototype.initialize = function (tokenConfig, apiConfig) {
+            // Initialize the LocalizeTokenService with the provided token configuration
+            this.token.init(tokenConfig);
+            // Initialize the LocalizeApiService with the provided API configuration
+            this.api.init(apiConfig);
+            console.log('LocalizeApiTokenService initialized with token and API configurations.');
         };
-        return LocalizeLogindlgService;
+        return LocalizeApiTokenService;
     }());
-    LocalizeLogindlgService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalizeLogindlgService_Factory() { return new LocalizeLogindlgService(i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: LocalizeLogindlgService, providedIn: "root" });
-    LocalizeLogindlgService.decorators = [
+    LocalizeApiTokenService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalizeApiTokenService_Factory() { return new LocalizeApiTokenService(i0__namespace.ɵɵinject(LocalizeTokenService), i0__namespace.ɵɵinject(LocalizeApiService), i0__namespace.ɵɵinject(LocalizeLogindlgService)); }, token: LocalizeApiTokenService, providedIn: "root" });
+    LocalizeApiTokenService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
                 },] }
     ];
-    LocalizeLogindlgService.ctorParameters = function () { return [
-        { type: i0.Injector }
+    LocalizeApiTokenService.ctorParameters = function () { return [
+        { type: LocalizeTokenService },
+        { type: LocalizeApiService },
+        { type: LocalizeLogindlgService }
     ]; };
 
-    var LocalizeLogindlgModule = /** @class */ (function () {
-        function LocalizeLogindlgModule() {
+    var LocalizeApiTokenModule = /** @class */ (function () {
+        function LocalizeApiTokenModule() {
         }
-        return LocalizeLogindlgModule;
+        return LocalizeApiTokenModule;
     }());
-    LocalizeLogindlgModule.decorators = [
+    LocalizeApiTokenModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [LocalizeLogindlgComponent],
-                    exports: [LocalizeLogindlgComponent],
+                    declarations: [],
                     imports: [
                         common.CommonModule,
-                        toast.ToastModule,
-                        inputtext.InputTextModule,
-                        platformBrowser.BrowserModule,
-                        forms.FormsModule,
-                        button.ButtonModule,
+                        LocalizeTokenModule,
+                        LocalizeLogindlgModule
                     ],
-                    providers: [LocalizeLogindlgService],
-                    schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
+                    providers: [
+                        LocalizeApiTokenService
+                    ]
                 },] }
     ];
 
+    //#region login dialog
+
     /**
      * Generated bundle index. Do not edit.
      */
@@ -1501,6 +1549,8 @@
     exports.ApiHelper = ApiHelper;
     exports.LOCALIZE_API_ASSETS = LOCALIZE_API_ASSETS;
     exports.LocalizeApiService = LocalizeApiService;
+    exports.LocalizeApiTokenModule = LocalizeApiTokenModule;
+    exports.LocalizeApiTokenService = LocalizeApiTokenService;
     exports.LocalizeLogindlgComponent = LocalizeLogindlgComponent;
     exports.LocalizeLogindlgModule = LocalizeLogindlgModule;
     exports.LocalizeLogindlgService = LocalizeLogindlgService;