@progressive-development/pd-spa-helper 0.7.5 → 0.8.0

package/dist/src/helper/price-helper.js

@@ -0,0 +1,25 @@
+import { getCurrentFormatLocale } from "./locale-format.js";
+import { isValidNumber } from "./number-helper.js";
+const EURO_FORMAT = (locale = getCurrentFormatLocale()) => Intl.NumberFormat(locale, {
+  style: "currency",
+  currency: "EUR"
+});
+const replaceForPriceFormat = (numberString) => numberString == null ? void 0 : numberString.replaceAll(",", ".");
+const formatToPrice = (price) => {
+  let resultStr = "-- €";
+  if (price) {
+    resultStr = EURO_FORMAT().format(price);
+  }
+  return resultStr;
+};
+const toValidNumberOrUndefined = (numberStr) => {
+  const replacedNumber = replaceForPriceFormat(numberStr);
+  const replacedNumberFixed = isValidNumber(replacedNumber) ? Number(replacedNumber).toFixed(2) : void 0;
+  return replacedNumberFixed ? Number(replacedNumberFixed) : void 0;
+};
+export {
+  EURO_FORMAT,
+  formatToPrice,
+  replaceForPriceFormat,
+  toValidNumberOrUndefined
+};

package/dist/src/helper/refresh-id-token.js

@@ -13,7 +13,9 @@ const refreshAndPersistUserIdToken = async () => {
       userNameToken: userName,
       userIdToken: userToken
     });
-    console.log(`[TokenRefresh] ID Token refreshed & saved to local DB for app: ${appName}`);
+    console.log(
+      `[TokenRefresh] ID Token refreshed & saved to local DB for app: ${appName}`
+    );
     return true;
   } catch (error) {
     console.error(`[TokenRefresh] Failed to refresh and persist token:`, error);

package/dist/src/helper/text-helper.js

@@ -0,0 +1,6 @@
+const isEmpty = (field) => !field || field === "";
+const isBlank = (field) => !field || isEmpty(field.trim());
+export {
+  isBlank,
+  isEmpty
+};

package/dist/src/model/spa-model.js

@@ -1,6 +1,8 @@
 const APP_CONF_EVENT = "get-app-conf";
 const RUNNING_WIZARD_STORAGE_ELEMENTS = "pd.spa.local.wizard.storage";
+const UNDEF = "UNDEF";
 export {
   APP_CONF_EVENT,
-  RUNNING_WIZARD_STORAGE_ELEMENTS
+  RUNNING_WIZARD_STORAGE_ELEMENTS,
+  UNDEF
 };

package/dist/src/popup/wizard-close-popup.js

@@ -17,7 +17,9 @@ let WizardClosePopup = class extends DefaultConfirmPopup {
     super(...arguments);
     this._singleButton = false;
     this._type = "warn";
-    this._popupTitle = msg("Bearbeitung abbrechen", { id: "spaH.wizard.close.popup.title" });
+    this._popupTitle = msg("Bearbeitung abbrechen", {
+      id: "spaH.wizard.close.popup.title"
+    });
     this.withStorage = false;
   }
   // eslint-disable-next-line class-methods-use-this
@@ -25,16 +27,21 @@ let WizardClosePopup = class extends DefaultConfirmPopup {
     return html`
       <div class="popup-content" slot="content">
         <p>
-          ${this.withStorage ? msg("Die aktuellen Eingaben können für eine spätere Bearbeitung gespeichert oder verworfen werden. Welche Aktion soll ausgeführt werden?", { id: "spaH.wizard.close.popup.storage.content" }) : msg("Die aktuellen Eingaben gehen nach dem Schließen unwiderruflich verloren. Dennoch schließen?", { id: "spaH.wizard.reload.popup.noStorage.content" })}
+          ${this.withStorage ? msg(
+      "Die aktuellen Eingaben können für eine spätere Bearbeitung gespeichert oder verworfen werden. Welche Aktion soll ausgeführt werden?",
+      { id: "spaH.wizard.close.popup.storage.content" }
+    ) : msg(
+      "Die aktuellen Eingaben gehen nach dem Schließen unwiderruflich verloren. Dennoch schließen?",
+      { id: "spaH.wizard.reload.popup.noStorage.content" }
+    )}
         </p>
-      </div> 
+      </div>
     `;
   }
 };
 WizardClosePopup.styles = [
   DefaultConfirmPopup.styles,
   css`
-
       :host {
         --pd-popup-max-width: 80%;
       }
@@ -43,7 +50,6 @@ WizardClosePopup.styles = [
         display: flex;
         flex-direction: column;
       }
-
     `
 ];
 __decorateClass([

package/dist/src/popup/wizard-reload-popup.js

@@ -17,26 +17,30 @@ let WizardReloadPopup = class extends DefaultConfirmPopup {
     super(...arguments);
     this._singleButton = false;
     this._type = "info";
-    this._popupTitle = msg("Bearbeitung fortsetzen?", { id: "spaH.wizard.reload.popup.title" });
+    this._popupTitle = msg("Bearbeitung fortsetzen?", {
+      id: "spaH.wizard.reload.popup.title"
+    });
   }
   // eslint-disable-next-line class-methods-use-this
   _renderContent() {
     return html`
       <div class="popup-content" slot="content">
         <p>
-          ${msg("Für dieses Formular wurden bereits Daten gespeichert. Soll die Bearbeitung fortgesetzt, oder eine neue Dateneingabe gestartet werden? Bei einer neuen Eingabe werden die bisherigen Daten verworfen.", { id: "spaH.wizard.reload.popup.content" })}          
+          ${msg(
+      "Für dieses Formular wurden bereits Daten gespeichert. Soll die Bearbeitung fortgesetzt, oder eine neue Dateneingabe gestartet werden? Bei einer neuen Eingabe werden die bisherigen Daten verworfen.",
+      { id: "spaH.wizard.reload.popup.content" }
+    )}
         </p>
         <div class="last-modified">
           Letzte Bearbeitung: <span>${this.reloadItem.timestamp}</span>
         </div>
-      </div> 
+      </div>
     `;
   }
 };
 WizardReloadPopup.styles = [
   DefaultConfirmPopup.styles,
   css`
-
       :host {
         --pd-popup-max-width: 80%;
       }
@@ -56,10 +60,9 @@ WizardReloadPopup.styles = [
       }
 
       .last-modified::before {
-        content: '🕒';
+        content: "🕒";
         margin-right: 6px;
       }
-
     `
 ];
 __decorateClass([

package/dist/src/router/PdRouterService.js

@@ -0,0 +1,112 @@
+import UniversalRouter from "../../node_modules/universal-router/universal-router.js";
+class PdRouterService {
+  constructor() {
+    this.router = null;
+    this.onChangeHandlers = [];
+    this.currentRoute = "";
+    this.isAuthenticatedWithSessionRedirect = async () => true;
+    window.addEventListener("popstate", () => {
+      this.resolve(location.pathname + location.search);
+    });
+  }
+  // Default-Fallback, falls nicht überschrieben
+  /**
+   * Setzt die Routen-Konfiguration. Muss vor Verwendung von navigate() aufgerufen werden.
+   */
+  configureRoutes(definitions) {
+    console.log(
+      "############ CONFIGURE ROUTING SERVICE ##################",
+      definitions
+    );
+    definitions.forEach((def) => {
+      console.log(`[ROUTING] ${def.name}:`);
+      (Array.isArray(def.pattern) ? def.pattern : [def.pattern]).forEach(
+        (p, idx) => {
+          console.log(
+            `  Pattern[${idx}]: "${p}" | Codes: ${[...p].map((c) => c.charCodeAt(0)).join(", ")}`
+          );
+        }
+      );
+    });
+    const universalRoutes = definitions.flatMap((def) => {
+      const patterns = Array.isArray(def.pattern) ? def.pattern : [def.pattern];
+      return patterns.map((pattern) => ({
+        path: pattern,
+        action: async (context) => {
+          if (def.auth && !await this.isAuthenticatedWithSessionRedirect(def.name)) {
+            const fallbackRoute = def.authFallback ?? "login";
+            return { route: fallbackRoute };
+          }
+          if (def.action) {
+            const result = await def.action();
+            if (result && typeof result === "object" && result.route) {
+              return { ...result, params: context.params };
+            }
+          }
+          return {
+            route: def.name,
+            params: context.params
+          };
+        }
+      }));
+    });
+    this.router = new UniversalRouter(universalRoutes);
+    this.resolve(location.pathname + location.search);
+  }
+  /**
+   * Navigiert zu einer neuen Route und triggert resolve()
+   */
+  async navigate(path, force = false) {
+    const fullPath = new URL(path, window.location.origin).pathname + new URL(path, window.location.origin).search;
+    const current = window.location.pathname + window.location.search;
+    if (!force && current === fullPath) {
+      console.debug("[PdRouter] Navigation skipped (same path):", path);
+      return;
+    }
+    history.pushState({}, "", path);
+    await this.resolve(path);
+  }
+  /**
+   * Registriert einen Callback, der bei jeder Routenänderung aufgerufen wird
+   */
+  onRouteChange(handler) {
+    this.onChangeHandlers.push(handler);
+  }
+  /**
+   * Interne Methode zum Auflösen einer Route und Benachrichtigen aller Listener
+   */
+  async resolve(path) {
+    if (!this.router) {
+      console.warn("[PdRouter] Router not yet configured");
+      return;
+    }
+    const url = new URL(path, window.location.origin);
+    const pathname = url.pathname;
+    const query = Object.fromEntries(url.searchParams.entries());
+    try {
+      console.log(
+        "[PdRouter] bevore resolve Current location:",
+        location.pathname
+      );
+      const result = await this.router.resolve({ pathname });
+      if (!result || typeof result !== "object" || !result.route) {
+        console.warn("[PdRouter] Invalid route result:", result);
+        return;
+      }
+      const routeInfo = {
+        route: result.route,
+        path: pathname,
+        params: result.params ?? {},
+        query
+      };
+      this.currentRoute = routeInfo.route;
+      this.onChangeHandlers.forEach((fn) => fn(routeInfo));
+    } catch (err) {
+      console.error("[PdRouter] Routing error:", err);
+    }
+  }
+}
+const pdRouterService = new PdRouterService();
+export {
+  pdRouterService
+};

package/dist/src/service-provider/firebase/firestorage-client.js

@@ -44,19 +44,26 @@ const uploadFirestorageFile = (file) => {
     throw new Error(`Invalid storage name: ${storageName || DEFAULT_STORAGE}`);
   }
   if (!storageConf2.references || storageConf2.references.length === 0) {
-    throw new Error(`No references configured for storage: ${storageName || DEFAULT_STORAGE}`);
+    throw new Error(
+      `No references configured for storage: ${storageName || DEFAULT_STORAGE}`
+    );
   }
-  const uploadRefConf = referenceKey ? storageConf2.references.filter((filterRef) => filterRef.key === referenceKey)[0] : storageConf2.references[0];
+  const uploadRefConf = referenceKey ? storageConf2.references.filter(
+    (filterRef) => filterRef.key === referenceKey
+  )[0] : storageConf2.references[0];
   if (!uploadRefConf || !uploadRefConf.storageRef) {
     throw new Error(`No valid reference for key: ${referenceKey}`);
   }
-  const fileRef = ref(uploadRefConf.storageRef, subFolderName ? `${subFolderName}/${fileName}` : fileName);
+  const fileRef = ref(
+    uploadRefConf.storageRef,
+    subFolderName ? `${subFolderName}/${fileName}` : fileName
+  );
   const metadata = {
     customMetadata: {
-      "creator": (_a = getUser()) == null ? void 0 : _a.displayName,
-      "comment": file.description,
-      "name": file.descriptionName,
-      "readonly": file.readonly ? "true" : "false"
+      creator: (_a = getUser()) == null ? void 0 : _a.displayName,
+      comment: file.description,
+      name: file.descriptionName,
+      readonly: file.readonly ? "true" : "false"
     }
   };
   return uploadString(fileRef, file.base64DataURL, "data_url", metadata);
@@ -112,7 +119,9 @@ const fetchItemsAndFolders = async (usedRef, storageName, refKey, includeMetaDat
     }
     if (includeMetaData) {
       const metaResults = await Promise.all(metaPromises);
-      return itemRefs.map((item, index) => processMetadata(item, metaResults[index]));
+      return itemRefs.map(
+        (item, index) => processMetadata(item, metaResults[index])
+      );
     }
     return itemRefs;
   } catch (error) {
@@ -166,14 +175,26 @@ const getFirestorageFileList = (storageName, refKey, subFolder, includeMetaData)
     throw new Error(`Invalid storage name: ${storageName}`);
   }
   if (!storageConf2.references || storageConf2.references.length === 0) {
-    throw new Error(`No references configured for storage: ${storageName || DEFAULT_STORAGE}`);
+    throw new Error(
+      `No references configured for storage: ${storageName || DEFAULT_STORAGE}`
+    );
   }
-  const storageRef = storageConf2.references.filter((refIt) => refIt.key === refKey)[0];
+  const storageRef = storageConf2.references.filter(
+    (refIt) => refIt.key === refKey
+  )[0];
   if (!storageRef) {
-    throw new Error(`No reference available for storage: ${storageName || DEFAULT_STORAGE} and ref: ${refKey}`);
+    throw new Error(
+      `No reference available for storage: ${storageName || DEFAULT_STORAGE} and ref: ${refKey}`
+    );
   }
   const usedRef = subFolder ? ref(storageRef.storageRef, subFolder) : storageRef.storageRef;
-  return fetchItemsAndFolders(usedRef, storageName, refKey, includeMetaData, true);
+  return fetchItemsAndFolders(
+    usedRef,
+    storageName,
+    refKey,
+    includeMetaData,
+    true
+  );
 };
 const downloadFileFirestorage = (file) => {
   if (!storageMap || storageMap.size === 0) {

package/dist/src/service-provider/firebase/firestore-client.js

@@ -8,12 +8,14 @@ const initFirestore = (app) => {
   }
 };
 const getFirebaseCollectionListener = (callback, col, constraints) => {
-  const queryConstraints = (constraints || []).map((constraint) => {
-    if (constraint.type === "where") {
-      return where(constraint.field, constraint.operator, constraint.value);
+  const queryConstraints = (constraints || []).map(
+    (constraint) => {
+      if (constraint.type === "where") {
+        return where(constraint.field, constraint.operator, constraint.value);
+      }
+      throw new Error(`Unkown constraint type: ${constraint.type}`);
     }
-    throw new Error(`Unkown constraint type: ${constraint.type}`);
-  });
+  );
   const q = query(collection(db, col), ...queryConstraints);
   return onSnapshot(q, (querySnapshot) => callback(querySnapshot));
 };

package/dist/src/service-provider/firebase/functions-client.js

@@ -43,15 +43,17 @@ const internalCallFunction = async (def, functionInput) => {
   }
 };
 const handleInvalidUser = () => {
-  pdStore().dispatch(toastAction({
-    txt: msg(
-      "Sie haben nicht die erforderlichen Berechtigungen, um diese Aktion auszuführen. Wenden Sie sich an Ihren Administrator.",
-      { id: "spaH.toast.error.user.invalid" }
-    ),
-    isError: true,
-    isSuccess: false,
-    duration: -1
-  }));
+  pdStore().dispatch(
+    toastAction({
+      txt: msg(
+        "Sie haben nicht die erforderlichen Berechtigungen, um diese Aktion auszuführen. Wenden Sie sich an Ihren Administrator.",
+        { id: "spaH.toast.error.user.invalid" }
+      ),
+      isError: true,
+      isSuccess: false,
+      duration: -1
+    })
+  );
 };
 const callFunction = async (def, functionInput) => internalCallFunction(def, functionInput);
 export {

package/dist/src/service-provider/firebase/messagingFirebaseClient.js

@@ -29,20 +29,19 @@ const initMessageToken = async (registration) => {
   if (!messaging || !firebaseMessagingAppConfigKey || !registration) {
     throw new Error("Messaging, Registration or Key not available");
   }
-  const currentToken = await getToken(
-    messaging,
-    {
-      vapidKey: firebaseMessagingAppConfigKey.apidKey,
-      serviceWorkerRegistration: registration
-    }
-  );
+  const currentToken = await getToken(messaging, {
+    vapidKey: firebaseMessagingAppConfigKey.apidKey,
+    serviceWorkerRegistration: registration
+  });
   if (currentToken) {
     const storedToken = localStorage.getItem(NOTIFICATION_TOKEN);
     if (storedToken !== currentToken) {
       console.log("Update new token in Backend");
-      pdStore().dispatch(updateNewNotificationToken({
-        messagingToken: currentToken
-      }));
+      pdStore().dispatch(
+        updateNewNotificationToken({
+          messagingToken: currentToken
+        })
+      );
     } else {
       console.log("RegisterDevice: Stored token is valid");
     }

package/dist/src/service-provider/mock/storage-client.js

@@ -67,9 +67,13 @@ const uploadStorageFileMock = (file) => {
     throw new Error(`Invalid storage name: ${storageName || DEFAULT_STORAGE}`);
   }
   if (!storageConf.references || storageConf.references.length === 0) {
-    throw new Error(`No references configured for storage: ${storageName || DEFAULT_STORAGE}`);
+    throw new Error(
+      `No references configured for storage: ${storageName || DEFAULT_STORAGE}`
+    );
   }
-  const uploadRefConf = referenceKey ? storageConf.references.filter((filterRef) => filterRef.key === referenceKey)[0] : storageConf.references[0];
+  const uploadRefConf = referenceKey ? storageConf.references.filter(
+    (filterRef) => filterRef.key === referenceKey
+  )[0] : storageConf.references[0];
   if (!uploadRefConf || !uploadRefConf.storageRef) {
     throw new Error(`No valid reference for key: ${referenceKey}`);
   }
@@ -81,14 +85,22 @@ const downloadFileMock = (file) => {
   return Promise.resolve("");
 };
 const getMockFileList = (storageName, refKey, subFolder, includeMetadata) => {
-  console.log("Searching for Documents in ", storageName, refKey, subFolder, includeMetadata);
-  return Promise.resolve([{
-    fileName: "workReport.png",
-    filePath: "workReports/1234234f2fswf/workReport.png",
-    documentType: "ToDo",
+  console.log(
+    "Searching for Documents in ",
     storageName,
-    refKey
-  }]);
+    refKey,
+    subFolder,
+    includeMetadata
+  );
+  return Promise.resolve([
+    {
+      fileName: "workReport.png",
+      filePath: "workReports/1234234f2fswf/workReport.png",
+      documentType: "ToDo",
+      storageName,
+      refKey
+    }
+  ]);
 };
 export {
   downloadFileMock,

package/dist/src/service-provider/service-provider-impl.js

@@ -11,7 +11,9 @@ import { POST_LOGIN_REDIRECT_KEY } from "../PdSpaHelper.js";
 let provider;
 let app;
 const throwUndefinedProviderError = () => {
-  throw new Error("Undefined service provider, please check configuration. 'firebase' or 'mock' allowed here.");
+  throw new Error(
+    "Undefined service provider, please check configuration. 'firebase' or 'mock' allowed here."
+  );
 };
 const setServiceProvider = (providerParam) => {
   provider = providerParam;
@@ -36,17 +38,16 @@ const initFirebaseApplicationServices = (firebaseApp, config) => {
     prepareMessaging(firebaseApp, config.messagingConfig);
     console.debug("Set firebase app and config for messaging");
     activateTokenChangeHandler(firebaseApp.name);
-    console.debug(`idTokenChangeHandler for messaging and app ${firebaseApp.name} activated`);
+    console.debug(
+      `idTokenChangeHandler for messaging and app ${firebaseApp.name} activated`
+    );
   }
   console.debug("Firebase initialized");
 };
 const initAppImpl = (config) => {
   if (provider === "firebase" && config.firebaseConfig) {
     app = initializeApp(config.firebaseConfig);
-    initFirebaseApplicationServices(
-      app,
-      config
-    );
+    initFirebaseApplicationServices(app, config);
   } else if (provider === "mock") {
     initMockResponse(config.mock);
     initStorageMock("default", config.storageConfig);
@@ -56,12 +57,10 @@ const initAppImpl = (config) => {
 };
 const callFunctionImpl = async (def, functionInput) => {
   if (provider === "firebase") {
-    const promise = callFunction(def, functionInput);
-    return promise;
+    return callFunction(def, functionInput);
   }
   if (provider === "mock") {
-    const promise = callFunctionMock(def, functionInput);
-    return promise;
+    return callFunctionMock(def, functionInput);
   }
   return throwUndefinedProviderError();
 };
@@ -136,7 +135,12 @@ const uploadFile = (file) => {
 };
 const getStorageFileList = (storageName, keyRef, subFolder, includeMetadata) => {
   if (provider === "firebase") {
-    return getFirestorageFileList(storageName, keyRef, subFolder, includeMetadata);
+    return getFirestorageFileList(
+      storageName,
+      keyRef,
+      subFolder,
+      includeMetadata
+    );
   }
   if (provider === "mock") {
     return getMockFileList(storageName, keyRef, subFolder, includeMetadata);
@@ -145,12 +149,7 @@ const getStorageFileList = (storageName, keyRef, subFolder, includeMetadata) =>
 };
 const getStorageFile = (storageName, refKey, storageURI, includeMetaData) => {
   if (provider === "firebase") {
-    return getFirestorageFile(
-      storageName,
-      refKey,
-      storageURI,
-      includeMetaData
-    );
+    return getFirestorageFile(storageName, refKey, storageURI, includeMetaData);
   }
   return throwUndefinedProviderError();
 };
@@ -190,7 +189,9 @@ const registerAppDeviceForNotification = async (registration) => {
     return registerDevice(registration);
   }
   if (provider === "mock") {
-    console.log("registerAppDeviceForNotification not implemented for MOCK, do noting");
+    console.log(
+      "registerAppDeviceForNotification not implemented for MOCK, do noting"
+    );
     return Promise.resolve();
   }
   return throwUndefinedProviderError();

package/dist/src/store/spa-app-actions.js

@@ -3,14 +3,38 @@ const initIndexDBSucess = action("SPA_INIT_INDEX_DB_SUCCESS");
 const loginSucess = action("SPA_LOGIN_SUCCESS");
 const nologin = action("SPA_NO_LOGIN");
 const routeAction = action("SPA_APP_ROUTE", payload());
-const toastAction = action("SPA_APP_TOAST", payload());
-const updateInternetOffline = action("SPA_APP_UPDATE_INTERNET_OFFLINE", payload());
-const addLoadingState = action("SPA_APP_ADD_LOADING", payload());
-const changeSubTask = action("SPA_APP_CHANGE_SUB_LOADING", payload());
-const removeLoadingState = action("SPA_APP_REMOVE_LOADING", payload());
-const updateNewNotificationToken = action("UPDATE_NOTIFICATION_TOKEN", payload());
-const updateNewNotificationTokenSuccess = action("UPDATE_NOTIFICATION_TOKEN_SUCCESS", payload());
-const updateNewNotificationTokenFail = action("UPDATE_NOTIFICATION_TOKEN_FAIL", payload());
+const toastAction = action(
+  "SPA_APP_TOAST",
+  payload()
+);
+const updateInternetOffline = action(
+  "SPA_APP_UPDATE_INTERNET_OFFLINE",
+  payload()
+);
+const addLoadingState = action(
+  "SPA_APP_ADD_LOADING",
+  payload()
+);
+const changeSubTask = action(
+  "SPA_APP_CHANGE_SUB_LOADING",
+  payload()
+);
+const removeLoadingState = action(
+  "SPA_APP_REMOVE_LOADING",
+  payload()
+);
+const updateNewNotificationToken = action(
+  "UPDATE_NOTIFICATION_TOKEN",
+  payload()
+);
+const updateNewNotificationTokenSuccess = action(
+  "UPDATE_NOTIFICATION_TOKEN_SUCCESS",
+  payload()
+);
+const updateNewNotificationTokenFail = action(
+  "UPDATE_NOTIFICATION_TOKEN_FAIL",
+  payload()
+);
 export {
   addLoadingState,
   changeSubTask,

package/dist/src/store/spa-app-effects.js

@@ -14,11 +14,13 @@ const appRouteEffect = createEffect(
       if (!routeElement) {
         console.error("No route element set for appRouteEffect");
       } else {
-        routeElement.dispatchEvent(new CustomEvent("route-event", {
-          detail: { route: action.payload },
-          bubbles: true,
-          composed: true
-        }));
+        routeElement.dispatchEvent(
+          new CustomEvent("route-event", {
+            detail: { route: action.payload },
+            bubbles: true,
+            composed: true
+          })
+        );
       }
     })
   ),
@@ -33,16 +35,18 @@ const appToastEffect = createEffect(
       if (!routeElement) {
         console.error("No route element set for appToastEffect");
       } else {
-        routeElement.dispatchEvent(new CustomEvent("toast-event", {
-          detail: {
-            txt: action.payload.txt,
-            isSuccess: action.payload.isSuccess,
-            isError: action.payload.isError,
-            duration: action.payload.duration
-          },
-          bubbles: true,
-          composed: true
-        }));
+        routeElement.dispatchEvent(
+          new CustomEvent("toast-event", {
+            detail: {
+              txt: action.payload.txt,
+              isSuccess: action.payload.isSuccess,
+              isError: action.payload.isError,
+              duration: action.payload.duration
+            },
+            bubbles: true,
+            composed: true
+          })
+        );
       }
     })
   ),