@abpjs/theme-shared 3.0.0 → 3.2.0

package/dist/constants/styles.d.ts

@@ -9,6 +9,8 @@
  *
  * @since 2.9.0 - Added RTL support for data-tables-filter
  *
+ * @since 3.2.0 - Added .datatable-scroll styles for ngx-datatable horizontal scroll fix
+ *
  * @example
  * ```tsx
  * // Option 1: Use with a style tag in your app
@@ -33,5 +35,5 @@
  * @since 2.9.0
  */
 export declare const BOOTSTRAP = "bootstrap-{{dir}}.min.css";
-export declare const DEFAULT_STYLES = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n/* RTL support - @since 2.9.0 */\n[dir=rtl] .data-tables-filter {\n  text-align: left;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.navbar .dropdown-menu {\n  min-width: 215px;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar {\n  height: 5px !important;\n  width: 5px !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-track {\n  background: #ddd;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-thumb {\n  background: #8a8686;\n}\n\n.abp-ellipsis-inline {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.abp-ellipsis {\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ui-widget-overlay {\n  z-index: 1000;\n}\n\n.color-white {\n  color: #FFF !important;\n}\n\n.custom-checkbox > label {\n  cursor: pointer;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.2s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.2s ease-in-out;\n}\n\n.abp-collapsed-height {\n  -moz-transition: max-height linear 0.35s;\n  -ms-transition: max-height linear 0.35s;\n  -o-transition: max-height linear 0.35s;\n  -webkit-transition: max-height linear 0.35s;\n  overflow:hidden;\n  transition:max-height 0.35s linear;\n  height:auto;\n  max-height: 0;\n}\n\n.abp-mh-25 {\n  max-height: 25vh;\n}\n\n.abp-mh-50 {\n  transition:max-height 0.65s linear;\n  max-height: 50vh;\n}\n\n.abp-mh-75 {\n  transition:max-height 0.85s linear;\n  max-height: 75vh;\n}\n\n.abp-mh-100 {\n  transition:max-height 1s linear;\n  max-height: 100vh;\n}\n\n/* Sorting icon styles - @since 2.0.0 */\n[class^=\"sorting\"] {\n  opacity: .3;\n  cursor: pointer;\n}\n[class^=\"sorting\"]:before {\n  right: 0.5rem;\n  content: \"\u2191\";\n}\n[class^=\"sorting\"]:after {\n  right: 0.5rem;\n  content: \"\u2193\";\n}\n\n.sorting_desc {\n  opacity: 1;\n}\n.sorting_desc:before {\n  opacity: .3;\n}\n\n.sorting_asc {\n  opacity: 1;\n}\n.sorting_asc:after {\n  opacity: .3;\n}\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n/* Loader bar styles */\n.abp-loader-bar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  z-index: 9999;\n  background-color: rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.abp-progress {\n  height: 100%;\n  background-color: #3182ce;\n  transition: width 0.3s ease-out;\n}\n";
+export declare const DEFAULT_STYLES = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n/* RTL support - @since 2.9.0 */\n[dir=rtl] .data-tables-filter {\n  text-align: left;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.navbar .dropdown-menu {\n  min-width: 215px;\n}\n\n/* ngx-datatable scroll fix - @since 3.2.0 */\n.datatable-scroll {\n  margin-bottom: 5px !important;\n  width: unset !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar {\n  height: 5px !important;\n  width: 5px !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-track {\n  background: #ddd;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-thumb {\n  background: #8a8686;\n}\n\n.abp-ellipsis-inline {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.abp-ellipsis {\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ui-widget-overlay {\n  z-index: 1000;\n}\n\n.color-white {\n  color: #FFF !important;\n}\n\n.custom-checkbox > label {\n  cursor: pointer;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.2s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.2s ease-in-out;\n}\n\n.abp-collapsed-height {\n  -moz-transition: max-height linear 0.35s;\n  -ms-transition: max-height linear 0.35s;\n  -o-transition: max-height linear 0.35s;\n  -webkit-transition: max-height linear 0.35s;\n  overflow:hidden;\n  transition:max-height 0.35s linear;\n  height:auto;\n  max-height: 0;\n}\n\n.abp-mh-25 {\n  max-height: 25vh;\n}\n\n.abp-mh-50 {\n  transition:max-height 0.65s linear;\n  max-height: 50vh;\n}\n\n.abp-mh-75 {\n  transition:max-height 0.85s linear;\n  max-height: 75vh;\n}\n\n.abp-mh-100 {\n  transition:max-height 1s linear;\n  max-height: 100vh;\n}\n\n/* Sorting icon styles - @since 2.0.0 */\n[class^=\"sorting\"] {\n  opacity: .3;\n  cursor: pointer;\n}\n[class^=\"sorting\"]:before {\n  right: 0.5rem;\n  content: \"\u2191\";\n}\n[class^=\"sorting\"]:after {\n  right: 0.5rem;\n  content: \"\u2193\";\n}\n\n.sorting_desc {\n  opacity: 1;\n}\n.sorting_desc:before {\n  opacity: .3;\n}\n\n.sorting_asc {\n  opacity: 1;\n}\n.sorting_asc:after {\n  opacity: .3;\n}\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n/* Loader bar styles */\n.abp-loader-bar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  z-index: 9999;\n  background-color: rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.abp-progress {\n  height: 100%;\n  background-color: #3182ce;\n  transition: width 0.3s ease-out;\n}\n";
 export default DEFAULT_STYLES;

package/dist/handlers/error.handler.d.ts

@@ -44,6 +44,37 @@ export interface ErrorHandler {
     /** Clear the current error component */
     clearErrorComponent: () => void;
 }
+/**
+ * Default error messages for common HTTP status codes.
+ */
+export declare const DEFAULT_ERROR_MESSAGES: Record<number, string>;
+/**
+ * Default error localizations with title and details.
+ * These are the localization keys used for error messages.
+ * @since 3.1.0
+ */
+export declare const DEFAULT_ERROR_LOCALIZATIONS: {
+    readonly defaultError: {
+        readonly title: "AbpUi::DefaultErrorMessage";
+        readonly details: "AbpUi::DefaultErrorMessageDetail";
+    };
+    readonly defaultError401: {
+        readonly title: "AbpUi::DefaultErrorMessage401";
+        readonly details: "AbpUi::DefaultErrorMessage401Detail";
+    };
+    readonly defaultError403: {
+        readonly title: "AbpUi::DefaultErrorMessage403";
+        readonly details: "AbpUi::DefaultErrorMessage403Detail";
+    };
+    readonly defaultError404: {
+        readonly title: "AbpUi::DefaultErrorMessage404";
+        readonly details: "AbpUi::DefaultErrorMessage404Detail";
+    };
+    readonly defaultError500: {
+        readonly title: "AbpUi::DefaultErrorMessage500";
+        readonly details: "AbpUi::DefaultErrorMessage500Detail";
+    };
+};
 export interface UseErrorHandlerOptions {
     /**
      * Custom navigate function. If not provided, navigation to login will be a no-op.

package/dist/index.d.ts

@@ -2,11 +2,15 @@
  * @abpjs/theme-shared
  *
  * ABP Framework Theme Shared components for React.
- * Translated from @abp/ng.theme.shared v3.0.0
+ * Translated from @abp/ng.theme.shared v3.2.0
  *
  * This package provides shared UI components, services, and utilities
  * for theme/modal management in ABP Framework React applications.
  *
+ * Changes in v3.2.0:
+ * - Added .datatable-scroll CSS styles for ngx-datatable horizontal scroll fix
+ * - Dependency updates to @abp/ng.core v3.2.0
+ *
  * Changes in v3.0.0:
  * - Added NavItemsService (replaces nav-items utility functions)
  * - Added NavItem.id property (required unique identifier)

package/dist/index.js

@@ -42,6 +42,8 @@ __export(index_exports, {
   Confirmation: () => Confirmation,
   ConfirmationDialog: () => ConfirmationDialog,
   ConfirmationProvider: () => ConfirmationProvider,
+  DEFAULT_ERROR_LOCALIZATIONS: () => DEFAULT_ERROR_LOCALIZATIONS,
+  DEFAULT_ERROR_MESSAGES: () => DEFAULT_ERROR_MESSAGES,
   DEFAULT_LAZY_STYLES: () => DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES: () => DEFAULT_STYLES,
   ErrorComponent: () => ErrorComponent,
@@ -57,6 +59,7 @@ __export(index_exports, {
   ModalFooter: () => AbpModalFooter,
   ModalHeader: () => AbpModalHeader,
   ModalProvider: () => ModalProvider,
+  NavItem: () => NavItem,
   NavItemsService: () => NavItemsService,
   PASSWORD_SETTING_KEYS: () => PASSWORD_SETTING_KEYS,
   Profile: () => Profile,
@@ -115,6 +118,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 = `
@@ -152,6 +173,12 @@ var DEFAULT_STYLES = `
   min-width: 215px;
 }
 
+/* ngx-datatable scroll fix - @since 3.2.0 */
+.datatable-scroll {
+  margin-bottom: 5px !important;
+  width: unset !important;
+}
+
 .ui-table-scrollable-body::-webkit-scrollbar {
   height: 5px !important;
   width: 5px !important;
@@ -652,6 +679,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();
@@ -791,13 +840,14 @@ var _NavItemsService = class _NavItemsService {
    * Add one or more items.
    * Items are automatically sorted by order.
    *
-   * @param items - Array of items to add
+   * @param newItems - Array of items to add
    * @since 3.0.0
+   * @since 3.1.0 - Renamed parameter from items to newItems
    */
-  addItems(items) {
+  addItems(newItems) {
     const existingIds = new Set(this._items.map((item) => item.id));
-    const newItems = items.filter((item) => !existingIds.has(item.id));
-    this._items = [...this._items, ...newItems];
+    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();
   }
   /**
@@ -2545,6 +2595,8 @@ function getPasswordValidationRules(store) {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_ERROR_LOCALIZATIONS,
+  DEFAULT_ERROR_MESSAGES,
   DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
@@ -2560,6 +2612,7 @@ function getPasswordValidationRules(store) {
   ModalFooter,
   ModalHeader,
   ModalProvider,
+  NavItem,
   NavItemsService,
   PASSWORD_SETTING_KEYS,
   Profile,

package/dist/index.mjs

@@ -9,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 = `
@@ -46,6 +64,12 @@ var DEFAULT_STYLES = `
   min-width: 215px;
 }
 
+/* ngx-datatable scroll fix - @since 3.2.0 */
+.datatable-scroll {
+  margin-bottom: 5px !important;
+  width: unset !important;
+}
+
 .ui-table-scrollable-body::-webkit-scrollbar {
   height: 5px !important;
   width: 5px !important;
@@ -569,6 +593,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();
@@ -708,13 +754,14 @@ var _NavItemsService = class _NavItemsService {
    * Add one or more items.
    * Items are automatically sorted by order.
    *
-   * @param items - Array of items to add
+   * @param newItems - Array of items to add
    * @since 3.0.0
+   * @since 3.1.0 - Renamed parameter from items to newItems
    */
-  addItems(items) {
+  addItems(newItems) {
     const existingIds = new Set(this._items.map((item) => item.id));
-    const newItems = items.filter((item) => !existingIds.has(item.id));
-    this._items = [...this._items, ...newItems];
+    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();
   }
   /**
@@ -2507,6 +2554,8 @@ export {
   Confirmation,
   ConfirmationDialog,
   ConfirmationProvider,
+  DEFAULT_ERROR_LOCALIZATIONS,
+  DEFAULT_ERROR_MESSAGES,
   DEFAULT_LAZY_STYLES,
   DEFAULT_STYLES,
   ErrorComponent,
@@ -2522,6 +2571,7 @@ export {
   AbpModalFooter as ModalFooter,
   AbpModalHeader as ModalHeader,
   ModalProvider,
+  NavItem,
   NavItemsService,
   PASSWORD_SETTING_KEYS,
   Profile,

package/dist/models/nav-item.d.ts

@@ -1,15 +1,54 @@
 /**
  * Nav Item Model
- * Translated from @abp/ng.theme.shared/lib/models/nav-item.ts v3.0.0
+ * Translated from @abp/ng.theme.shared/lib/models/nav-item.ts v3.1.0
  *
  * @since 3.0.0 - Added id property, changed permission to requiredPolicy
+ * @since 3.1.0 - Changed from interface to class, added visible callback
  */
 import type { ComponentType } from 'react';
 /**
- * Navigation item configuration.
+ * Navigation item properties interface.
+ * @since 3.1.0
+ */
+export interface NavItemProps {
+    /**
+     * Unique identifier for the nav item.
+     * @since 3.0.0
+     */
+    id: string | number;
+    /**
+     * React component to render for this nav item.
+     */
+    component?: ComponentType<any>;
+    /**
+     * Raw HTML string to render (use with caution for XSS).
+     */
+    html?: string;
+    /**
+     * Action to execute when the nav item is clicked.
+     */
+    action?: () => void;
+    /**
+     * Order for sorting nav items. Lower numbers appear first.
+     */
+    order?: number;
+    /**
+     * Required policy to show this nav item.
+     * @since 3.0.0 - Renamed from permission
+     */
+    requiredPolicy?: string;
+    /**
+     * Callback to determine visibility of the nav item.
+     * @since 3.1.0
+     */
+    visible?: () => boolean;
+}
+/**
+ * Navigation item class.
  * @since 3.0.0 - Added id property, changed permission to requiredPolicy
+ * @since 3.1.0 - Changed from interface to class, added visible callback
  */
-export interface NavItem {
+export declare class NavItem implements NavItemProps {
     /**
      * Unique identifier for the nav item.
      * @since 3.0.0
@@ -36,4 +75,15 @@ export interface NavItem {
      * @since 3.0.0 - Renamed from permission
      */
     requiredPolicy?: string;
+    /**
+     * Callback to determine visibility of the nav item.
+     * @since 3.1.0
+     */
+    visible?: () => boolean;
+    /**
+     * Create a new NavItem.
+     * @param props - Partial properties to initialize the nav item
+     * @since 3.1.0
+     */
+    constructor(props: Partial<NavItemProps>);
 }

package/dist/services/nav-items.service.d.ts

@@ -1,13 +1,14 @@
 /**
  * Nav Items Service
- * Translated from @abp/ng.theme.shared/lib/services/nav-items.service.ts v3.0.0
+ * Translated from @abp/ng.theme.shared/lib/services/nav-items.service.ts v3.1.0
  *
  * Provides a service-based approach to managing navigation items,
  * replacing the utility functions approach from v2.9.0.
  *
  * @since 3.0.0
+ * @since 3.1.0 - Updated addItems parameter name to newItems for clarity
  */
-import type { NavItem } from '../models/nav-item';
+import { NavItem, NavItemProps } from '../models/nav-item';
 /**
  * NavItemsService manages navigation items with reactive updates.
  * This is a singleton service that provides methods to add, remove, and patch nav items.
@@ -80,10 +81,11 @@ export declare class NavItemsService {
      * Add one or more items.
      * Items are automatically sorted by order.
      *
-     * @param items - Array of items to add
+     * @param newItems - Array of items to add
      * @since 3.0.0
+     * @since 3.1.0 - Renamed parameter from items to newItems
      */
-    addItems(items: NavItem[]): void;
+    addItems(newItems: (NavItem | NavItemProps)[]): void;
     /**
      * Remove an item by id.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-shared",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "ABP Framework Theme Shared components for React - translated from @abp/ng.theme.shared",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,10 +27,10 @@
     "next-themes": "^0.4.6",
     "react-hook-form": "^7.48.0",
     "react-icons": "^5.5.0",
-    "@abpjs/core": "3.0.0"
+    "@abpjs/core": "3.2.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.shared": "3.0.0",
+    "@abp/ng.theme.shared": "3.2.0",
     "@vitest/coverage-v8": "^1.6.0",
     "vitest": "^1.6.0"
   },