@abpjs/theme-shared 2.9.0 → 3.1.0

package/dist/index.mjs

@@ -1,14 +1,3 @@
-// src/models/toaster.ts
-var Toaster;
-((Toaster2) => {
-  let Status;
-  ((Status2) => {
-    Status2["confirm"] = "confirm";
-    Status2["reject"] = "reject";
-    Status2["dismiss"] = "dismiss";
-  })(Status = Toaster2.Status || (Toaster2.Status = {}));
-})(Toaster || (Toaster = {}));
-
 // src/models/confirmation.ts
 var Confirmation;
 ((Confirmation2) => {
@@ -20,6 +9,24 @@ var Confirmation;
   })(Status = Confirmation2.Status || (Confirmation2.Status = {}));
 })(Confirmation || (Confirmation = {}));
 
+// src/models/nav-item.ts
+var NavItem = class {
+  /**
+   * Create a new NavItem.
+   * @param props - Partial properties to initialize the nav item
+   * @since 3.1.0
+   */
+  constructor(props) {
+    this.id = props.id ?? "";
+    this.component = props.component;
+    this.html = props.html;
+    this.action = props.action;
+    this.order = props.order;
+    this.requiredPolicy = props.requiredPolicy;
+    this.visible = props.visible;
+  }
+};
+
 // src/constants/styles.ts
 var BOOTSTRAP = "bootstrap-{{dir}}.min.css";
 var DEFAULT_STYLES = `
@@ -392,7 +399,7 @@ function ConfirmationProvider({ children }) {
   useEffect2(() => {
     if (!escapeListenerRef.current) return;
     const handleEscape = (event) => {
-      if (event.key === "Escape" && confirmation && confirmation.options?.closable !== false) {
+      if (event.key === "Escape" && confirmation && confirmation.options?.dismissible !== false) {
         respond(Confirmation.Status.dismiss);
       }
     };
@@ -580,6 +587,28 @@ var DEFAULT_ERROR_MESSAGES = {
   500: "AbpUi::DefaultErrorMessage500",
   503: "AbpUi::DefaultErrorMessage503"
 };
+var DEFAULT_ERROR_LOCALIZATIONS = {
+  defaultError: {
+    title: "AbpUi::DefaultErrorMessage",
+    details: "AbpUi::DefaultErrorMessageDetail"
+  },
+  defaultError401: {
+    title: "AbpUi::DefaultErrorMessage401",
+    details: "AbpUi::DefaultErrorMessage401Detail"
+  },
+  defaultError403: {
+    title: "AbpUi::DefaultErrorMessage403",
+    details: "AbpUi::DefaultErrorMessage403Detail"
+  },
+  defaultError404: {
+    title: "AbpUi::DefaultErrorMessage404",
+    details: "AbpUi::DefaultErrorMessage404Detail"
+  },
+  defaultError500: {
+    title: "AbpUi::DefaultErrorMessage500",
+    details: "AbpUi::DefaultErrorMessage500Detail"
+  }
+};
 function useErrorHandler(options = {}) {
   const { navigate, loginPath = "/account/login" } = options;
   const confirmation = useConfirmation();
@@ -652,8 +681,152 @@ function isHttpErrorResponse(error) {
   return typeof error === "object" && error !== null && "status" in error && typeof error.status === "number";
 }
 
+// src/hooks/use-nav-items.ts
+import { useState as useState5, useEffect as useEffect3 } from "react";
+
+// src/services/nav-items.service.ts
+var _NavItemsService = class _NavItemsService {
+  constructor() {
+    this._items = [];
+    this._listeners = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Get singleton instance
+   * @since 3.0.0
+   */
+  static getInstance() {
+    if (!_NavItemsService._instance) {
+      _NavItemsService._instance = new _NavItemsService();
+    }
+    return _NavItemsService._instance;
+  }
+  /**
+   * Reset the singleton instance (useful for testing)
+   * @internal
+   */
+  static resetInstance() {
+    _NavItemsService._instance = null;
+  }
+  /**
+   * Get current items (sorted by order)
+   * @since 3.0.0
+   */
+  get items() {
+    return [...this._items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
+  /**
+   * Subscribe to item changes.
+   * Returns an unsubscribe function.
+   *
+   * @param listener - Callback function to receive item updates
+   * @returns Unsubscribe function
+   * @since 3.0.0
+   */
+  subscribe(listener) {
+    this._listeners.add(listener);
+    listener(this.items);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  /**
+   * Get items as an observable-like interface.
+   * Compatible with Angular's Observable pattern.
+   *
+   * @returns Object with subscribe method
+   * @since 3.0.0
+   */
+  get items$() {
+    return {
+      subscribe: (callback) => {
+        const unsubscribe = this.subscribe(callback);
+        return { unsubscribe };
+      }
+    };
+  }
+  /**
+   * Add one or more items.
+   * Items are automatically sorted by order.
+   *
+   * @param newItems - Array of items to add
+   * @since 3.0.0
+   * @since 3.1.0 - Renamed parameter from items to newItems
+   */
+  addItems(newItems) {
+    const existingIds = new Set(this._items.map((item) => item.id));
+    const itemsToAdd = newItems.filter((item) => !existingIds.has(item.id)).map((item) => item instanceof NavItem ? item : new NavItem(item));
+    this._items = [...this._items, ...itemsToAdd];
+    this.notify();
+  }
+  /**
+   * Remove an item by id.
+   *
+   * @param id - The id of the item to remove
+   * @since 3.0.0
+   */
+  removeItem(id) {
+    const initialLength = this._items.length;
+    this._items = this._items.filter((item) => item.id !== id);
+    if (this._items.length !== initialLength) {
+      this.notify();
+    }
+  }
+  /**
+   * Patch an existing item by id.
+   * Updates only the specified properties.
+   *
+   * @param id - The id of the item to patch
+   * @param patch - Partial item data to merge
+   * @since 3.0.0
+   */
+  patchItem(id, patch) {
+    const index = this._items.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      this._items = [
+        ...this._items.slice(0, index),
+        { ...this._items[index], ...patch },
+        ...this._items.slice(index + 1)
+      ];
+      this.notify();
+    }
+  }
+  /**
+   * Clear all items.
+   * @since 3.0.0
+   */
+  clear() {
+    if (this._items.length > 0) {
+      this._items = [];
+      this.notify();
+    }
+  }
+  /**
+   * Notify all listeners of changes.
+   */
+  notify() {
+    const currentItems = this.items;
+    this._listeners.forEach((listener) => listener(currentItems));
+  }
+};
+_NavItemsService._instance = null;
+var NavItemsService = _NavItemsService;
+function getNavItemsService() {
+  return NavItemsService.getInstance();
+}
+
+// src/hooks/use-nav-items.ts
+function useNavItems(service) {
+  const navItemsService = service || getNavItemsService();
+  const [items, setItems] = useState5(navItemsService.items);
+  useEffect3(() => {
+    const unsubscribe = navItemsService.subscribe(setItems);
+    return unsubscribe;
+  }, [navItemsService]);
+  return items;
+}
+
 // src/components/toast/Toast.tsx
-import { useEffect as useEffect3, useRef as useRef4, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useMemo as useMemo4 } from "react";
 import {
   Toaster as ChakraToaster,
   Portal,
@@ -793,7 +966,7 @@ function ToastContainer({ position = "bottom-right", containerKey }) {
     if (!containerKey) return toasts;
     return toasts.filter((toast) => toast.options?.containerKey === containerKey);
   }, [toasts, containerKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     const newToasts = filteredToasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
     newToasts.forEach((toast) => {
       displayedToastsRef.current.add(toast.id);
@@ -939,7 +1112,7 @@ function ConfirmationDialog({ className }) {
     respond(Confirmation.Status.dismiss);
   };
   const handleOpenChange = (details) => {
-    if (!details.open && options?.closable !== false) {
+    if (!details.open && options?.dismissible !== false) {
       handleDismiss();
     }
   };
@@ -1032,35 +1205,21 @@ function ErrorComponent({
 }
 
 // src/components/loader-bar/LoaderBar.tsx
-import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 import { useLoader } from "@abpjs/core";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
-  filter,
+  filter: _filter,
   intervalPeriod = 300,
   stopDelay = 400
 }) {
   const { loading } = useLoader();
-  const [isLoading, setIsLoading] = useState5(false);
-  const [progressLevel, setProgressLevel] = useState5(0);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [progressLevel, setProgressLevel] = useState6(0);
   const intervalRef = useRef6(null);
-  useEffect4(() => {
-    if (loading) {
-      startLoading();
-    } else {
-      stopLoading();
-    }
-  }, [loading]);
-  useEffect4(() => {
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, []);
-  const startLoading = () => {
+  const startLoading = useCallback5(() => {
     setIsLoading(true);
     setProgressLevel(0);
     if (intervalRef.current) {
@@ -1078,8 +1237,8 @@ function LoaderBar({
         return prev + 10;
       });
     }, intervalPeriod);
-  };
-  const stopLoading = () => {
+  }, [intervalPeriod]);
+  const stopLoading = useCallback5(() => {
     setProgressLevel(100);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -1089,7 +1248,21 @@ function LoaderBar({
       setIsLoading(false);
       setProgressLevel(0);
     }, stopDelay);
-  };
+  }, [stopDelay]);
+  useEffect5(() => {
+    if (loading) {
+      startLoading();
+    } else {
+      stopLoading();
+    }
+  }, [loading, startLoading, stopLoading]);
+  useEffect5(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
   if (!isLoading && progressLevel === 0) {
     return null;
   }
@@ -1124,7 +1297,7 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
-import React7 from "react";
+import React6 from "react";
 import {
   Dialog as Dialog2,
   Portal as Portal3,
@@ -1172,12 +1345,12 @@ function Modal({
   preventScroll = true,
   onInit
 }) {
-  const prevVisibleRef = React7.useRef(false);
-  const onInitRef = React7.useRef(onInit);
-  React7.useEffect(() => {
+  const prevVisibleRef = React6.useRef(false);
+  const onInitRef = React6.useRef(onInit);
+  React6.useEffect(() => {
     onInitRef.current = onInit;
   }, [onInit]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (visible && !prevVisibleRef.current && onInitRef.current) {
       onInitRef.current();
     }
@@ -1393,7 +1566,7 @@ function FormField({
 }
 
 // src/components/change-password/ChangePassword.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import {
   Button as Button5,
   VStack as VStack2,
@@ -1425,7 +1598,7 @@ function ChangePassword({
     }
   });
   const newPassword = watch("newPassword");
-  useEffect5(() => {
+  useEffect6(() => {
     if (visible) {
       reset();
     }
@@ -1545,7 +1718,7 @@ function ChangePassword({
 }
 
 // src/components/profile/Profile.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import {
   Button as Button6,
   VStack as VStack3,
@@ -1579,13 +1752,13 @@ function Profile({
     }
   });
   const modalBusy = isSubmitting || loading;
-  useEffect6(() => {
+  useEffect7(() => {
     if (visible) {
       fetchProfile().then(() => {
       });
     }
   }, [visible, fetchProfile]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (profile) {
       reset({
         userName: profile.userName || "",
@@ -1980,7 +2153,7 @@ var abpSystem = createAbpSystem();
 // src/components/ui/color-mode.tsx
 import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
 import { ThemeProvider, useTheme } from "next-themes";
-import * as React12 from "react";
+import * as React11 from "react";
 import { Moon, Sun } from "lucide-react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function ColorModeProvider(props) {
@@ -2002,7 +2175,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsx15(Moon, {}) : /* @__PURE__ */ jsx15(Sun, {});
 }
-var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsx15(ClientOnly, { fallback: /* @__PURE__ */ jsx15(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx15(
     IconButton,
@@ -2023,7 +2196,7 @@ var ColorModeButton = React12.forwardRef(function ColorModeButton2(props, ref) {
     }
   ) });
 });
-var LightMode = React12.forwardRef(
+var LightMode = React11.forwardRef(
   function LightMode2(props, ref) {
     return /* @__PURE__ */ jsx15(
       Span,
@@ -2039,7 +2212,7 @@ var LightMode = React12.forwardRef(
     );
   }
 );
-var DarkMode = React12.forwardRef(
+var DarkMode = React11.forwardRef(
   function DarkMode2(props, ref) {
     return /* @__PURE__ */ jsx15(
       Span,
@@ -2064,35 +2237,65 @@ function ThemeSharedProvider({
   renderToasts = true,
   renderConfirmation = true,
   themeOverrides,
-  toastPosition = "bottom-right",
+  toastPosition: _toastPosition = "bottom-right",
   enableColorMode = false,
   defaultColorMode = "light",
   locale = "en-US"
 }) {
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
   const { endSide } = useDirection();
-  toastPosition = `bottom-${endSide}`;
+  const resolvedToastPosition = endSide === "left" ? "bottom-left" : "bottom-right";
   const content = /* @__PURE__ */ jsx16(ToasterProvider, { children: /* @__PURE__ */ jsxs11(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ jsx16(ToastContainer, { position: toastPosition }),
+    renderToasts && /* @__PURE__ */ jsx16(ToastContainer, { position: resolvedToastPosition }),
     renderConfirmation && /* @__PURE__ */ jsx16(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
   return /* @__PURE__ */ jsx16(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx16(LocaleProvider, { locale, children: /* @__PURE__ */ jsx16(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
+// src/providers/route.provider.ts
+import { getRoutesService } from "@abpjs/core";
+
+// src/enums/route-names.ts
+var eThemeSharedRouteNames = /* @__PURE__ */ ((eThemeSharedRouteNames2) => {
+  eThemeSharedRouteNames2["Administration"] = "AbpUiNavigation::Menu:Administration";
+  return eThemeSharedRouteNames2;
+})(eThemeSharedRouteNames || {});
+
+// src/providers/route.provider.ts
+function configureRoutes(routes) {
+  return () => {
+    routes.add([
+      {
+        name: "AbpUiNavigation::Menu:Administration" /* Administration */,
+        path: "",
+        order: 100,
+        iconClass: "fa fa-wrench"
+      }
+    ]);
+  };
+}
+var THEME_SHARED_ROUTE_PROVIDERS = {
+  configureRoutes
+};
+function initializeThemeSharedRoutes() {
+  const routesService = getRoutesService();
+  configureRoutes(routesService)();
+}
+
 // src/handlers/lazy-style.handler.ts
-import { useEffect as useEffect7, useRef as useRef7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
 import { LazyLoadService } from "@abpjs/core";
 function createLazyStyleHref(style, dir) {
   return style.replace("{{dir}}", dir);
 }
 function useLazyStyleHandler(options = {}) {
   const { styles = [BOOTSTRAP], initialDirection = "ltr" } = options;
-  const [direction, setDirection] = useState6(initialDirection);
+  const [direction, setDirection] = useState7(initialDirection);
   const lazyLoadRef = useRef7(new LazyLoadService());
   const loadedStylesRef = useRef7(/* @__PURE__ */ new Map());
-  useEffect7(() => {
+  useEffect8(() => {
     document.body.dir = direction;
     const switchCSS = async () => {
       const lazyLoad = lazyLoadRef.current;
@@ -2219,44 +2422,6 @@ function injectThemeSharedStyles() {
   };
 }
 
-// src/utils/nav-items.ts
-var navItems = [];
-var subscribers = /* @__PURE__ */ new Set();
-function addNavItem(item) {
-  navItems = [...navItems, item].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-  notifySubscribers();
-}
-function removeNavItem(item) {
-  navItems = navItems.filter((i) => i !== item);
-  notifySubscribers();
-}
-function clearNavItems() {
-  navItems = [];
-  notifySubscribers();
-}
-function getNavItemsSync() {
-  return [...navItems];
-}
-function subscribeToNavItems(callback) {
-  subscribers.add(callback);
-  callback([...navItems]);
-  return () => {
-    subscribers.delete(callback);
-  };
-}
-function notifySubscribers() {
-  const currentItems = [...navItems];
-  subscribers.forEach((callback) => callback(currentItems));
-}
-function getNavItems() {
-  return {
-    subscribe: (callback) => {
-      const unsubscribe = subscribeToNavItems(callback);
-      return { unsubscribe };
-    }
-  };
-}
-
 // src/utils/validation-utils.ts
 var PASSWORD_SETTING_KEYS = {
   requiredLength: "Abp.Identity.Password.RequiredLength",
@@ -2383,6 +2548,8 @@ export {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_ERROR_LOCALIZATIONS,
+  DEFAULT_ERROR_MESSAGES,
   DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
@@ -2398,26 +2565,27 @@ export {
   AbpModalFooter as ModalFooter,
   AbpModalHeader as ModalHeader,
   ModalProvider,
+  NavItem,
+  NavItemsService,
   PASSWORD_SETTING_KEYS,
   Profile,
   THEME_SHARED_APPEND_CONTENT,
+  THEME_SHARED_ROUTE_PROVIDERS,
   THEME_SHARED_STYLES,
   ThemeSharedAppendContentContext,
   ThemeSharedProvider,
   ToastContainer,
-  Toaster,
   ToasterProvider,
   abpSystem,
-  addNavItem,
-  clearNavItems,
+  configureRoutes,
   createAbpSystem,
   createErrorInterceptor,
   createLazyStyleHref,
   defaultAbpConfig,
   defineConfig,
+  eThemeSharedRouteNames,
   getLoadedBootstrapDirection,
-  getNavItems,
-  getNavItemsSync,
+  getNavItemsService,
   getPasswordSettings,
   getPasswordValidationRules,
   getPasswordValidators,
@@ -2426,9 +2594,8 @@ export {
   getSeverityColorPalette as getSeverityColorScheme,
   httpErrorConfigFactory,
   initLazyStyleHandler,
+  initializeThemeSharedRoutes,
   injectThemeSharedStyles,
-  removeNavItem,
-  subscribeToNavItems,
   useConfirmation,
   useConfirmationContext,
   useConfirmationState,
@@ -2439,6 +2606,7 @@ export {
   useModal,
   useModalContext,
   useModalState,
+  useNavItems,
   useToaster,
   useToasterContext,
   useToasts

package/dist/models/confirmation.d.ts

@@ -1,6 +1,6 @@
 /**
  * Confirmation namespace containing types for confirmation dialogs.
- * Translated from @abp/ng.theme.shared/lib/models/confirmation.ts
+ * Translated from @abp/ng.theme.shared/lib/models/confirmation.ts v3.0.0
  *
  * @since 2.0.0 - Major changes:
  * - Options no longer extends Toaster.Options
@@ -10,13 +10,14 @@
  *
  * @since 2.1.0 - Added Status enum (confirmation-specific, replaces Toaster.Status usage)
  * @since 2.9.0 - Added dismissible property, deprecated closable
+ * @since 3.0.0 - Removed closable property (use dismissible instead)
  */
 import type { Config } from '@abpjs/core';
 export declare namespace Confirmation {
     /**
      * Options for configuring a confirmation dialog.
      * @since 2.0.0 - No longer extends Toaster.Options
-     * @since 2.9.0 - Added dismissible, deprecated closable
+     * @since 3.0.0 - Removed closable (use dismissible instead)
      */
     interface Options {
         /** Unique identifier for the confirmation */
@@ -38,11 +39,6 @@ export declare namespace Confirmation {
         cancelText?: Config.LocalizationParam;
         /** Custom text for the yes button */
         yesText?: Config.LocalizationParam;
-        /**
-         * Whether the confirmation can be closed by clicking outside or pressing escape.
-         * @deprecated Use dismissible instead. To be deleted in v3.0.
-         */
-        closable?: boolean;
     }
     /**
      * Dialog data structure for confirmation dialogs.

package/dist/models/index.d.ts

@@ -1,5 +1,10 @@
+/**
+ * Models barrel export
+ * @since 3.0.0 - Removed setting-management (now in @abpjs/core SettingTabsService)
+ * @since 3.0.0 - Added nav-item model
+ */
 export * from './common';
-export * from './toaster';
 export * from './confirmation';
-export * from './setting-management';
+export * from './nav-item';
 export * from './statistics';
+export * from './toaster';