@abpjs/theme-shared 2.4.0 → 2.9.0

package/dist/components/errors/ErrorComponent.d.ts

@@ -9,11 +9,29 @@ export interface ErrorComponentProps {
     showCloseButton?: boolean;
     /** Custom close button text */
     closeButtonText?: string;
+    /**
+     * Whether to show the home button.
+     * When true, shows a "Go Home" button alongside or instead of the close button.
+     * @since 2.7.0
+     */
+    isHomeShow?: boolean;
+    /**
+     * Callback when user clicks the home button.
+     * @since 2.7.0
+     */
+    onHomeClick?: () => void;
+    /**
+     * Custom home button text.
+     * @since 2.7.0
+     */
+    homeButtonText?: string;
 }
 /**
  * A component for displaying error pages/messages.
  * Can be used for HTTP errors (404, 500, etc.) or general error states.
  *
+ * @since 2.7.0 - Added isHomeShow, onHomeClick, homeButtonText props
+ *
  * @example
  * ```tsx
  * // Basic error display
@@ -29,7 +47,15 @@ export interface ErrorComponentProps {
  *   showCloseButton
  *   onDestroy={() => navigate('/')}
  * />
+ *
+ * // With home button (v2.7.0)
+ * <ErrorComponent
+ *   title="404"
+ *   details="Page not found."
+ *   isHomeShow
+ *   onHomeClick={() => navigate('/')}
+ * />
  * ```
  */
-export declare function ErrorComponent({ title, details, onDestroy, showCloseButton, closeButtonText, }: ErrorComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorComponent({ title, details, onDestroy, showCloseButton, closeButtonText, isHomeShow, onHomeClick, homeButtonText, }: ErrorComponentProps): import("react/jsx-runtime").JSX.Element;
 export default ErrorComponent;

package/dist/constants/styles.d.ts

@@ -7,6 +7,8 @@
  * - Added sorting icon styles
  * - Added table scrollbar width styling
  *
+ * @since 2.9.0 - Added RTL support for data-tables-filter
+ *
  * @example
  * ```tsx
  * // Option 1: Use with a style tag in your app
@@ -25,5 +27,11 @@
  * // Copy the content of DEFAULT_STYLES to your styles.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.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";
+/**
+ * Bootstrap CSS file pattern with direction placeholder.
+ * Use with createLazyStyleHref to get the correct bootstrap CSS for RTL/LTR.
+ * @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 default DEFAULT_STYLES;

package/dist/contexts/index.d.ts

@@ -1,2 +1,3 @@
 export * from './toaster.context';
 export * from './confirmation.context';
+export * from './modal.context';

package/dist/contexts/modal.context.d.ts

@@ -0,0 +1,139 @@
+import React, { type ReactNode, type ReactElement } from 'react';
+/**
+ * Modal template render function type.
+ * @since 2.7.0
+ */
+export type ModalTemplateRender<T = unknown> = (context?: T) => ReactElement | null;
+/**
+ * Modal state containing the current template and context.
+ * @since 2.7.0
+ */
+export interface ModalState<T = unknown> {
+    /** The render function for the modal content */
+    render: ModalTemplateRender<T>;
+    /** Context passed to the render function */
+    context?: T;
+}
+/**
+ * ModalService interface - matches the Angular service API.
+ *
+ * In Angular, ModalService uses ContentProjectionService to render templates
+ * in a container. In React, we use context and state to manage modal content.
+ *
+ * @since 2.7.0
+ */
+export interface ModalService {
+    /**
+     * Render a template in the modal container.
+     * @param render - Function that returns the modal content
+     * @param context - Optional context to pass to the render function
+     * @since 2.7.0
+     */
+    renderTemplate<T = unknown>(render: ModalTemplateRender<T>, context?: T): void;
+    /**
+     * Clear the current modal.
+     * @since 2.7.0
+     */
+    clearModal(): void;
+    /**
+     * Get the container ref for the modal.
+     * In React, this returns a ref to the container element.
+     * @since 2.7.0
+     */
+    getContainer(): React.RefObject<HTMLDivElement | null>;
+    /**
+     * Trigger a re-render of the modal content.
+     * In React, this forces a state update.
+     * @since 2.7.0
+     */
+    detectChanges(): void;
+}
+/**
+ * Context value containing the service and current modal state.
+ * @since 2.7.0
+ */
+export interface ModalContextValue {
+    service: ModalService;
+    /** Current modal state */
+    modalState: ModalState | null;
+}
+export interface ModalProviderProps {
+    children: ReactNode;
+}
+/**
+ * ModalProvider - Provides modal service functionality.
+ *
+ * This is the React equivalent of Angular's ModalService.
+ * Wrap your app with this provider to enable modal service functionality.
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * <ModalProvider>
+ *   <App />
+ *   <ModalContainer />
+ * </ModalProvider>
+ * ```
+ */
+export declare function ModalProvider({ children }: ModalProviderProps): ReactElement;
+/**
+ * Hook to access the modal service.
+ *
+ * @returns ModalService with methods to manage modal content
+ * @throws Error if used outside of ModalProvider
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const modal = useModal();
+ *
+ *   const openModal = () => {
+ *     modal.renderTemplate((context) => (
+ *       <Dialog open onClose={() => modal.clearModal()}>
+ *         <DialogContent>Hello {context?.name}</DialogContent>
+ *       </Dialog>
+ *     ), { name: 'World' });
+ *   };
+ *
+ *   return <button onClick={openModal}>Open Modal</button>;
+ * }
+ * ```
+ */
+export declare function useModal(): ModalService;
+/**
+ * Hook to access the current modal state.
+ * This is typically used by the ModalContainer component.
+ *
+ * @returns Current modal state or null
+ * @since 2.7.0
+ */
+export declare function useModalState(): ModalState | null;
+/**
+ * Hook to access the full modal context.
+ *
+ * @returns ModalContextValue with service and modal state
+ * @since 2.7.0
+ */
+export declare function useModalContext(): ModalContextValue;
+/**
+ * ModalContainer component - renders the current modal content.
+ * Place this component once in your app to display modal content.
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <ModalProvider>
+ *       <MainContent />
+ *       <ModalContainer />
+ *     </ModalProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ModalContainer(): ReactElement | null;

package/dist/handlers/index.d.ts

@@ -1 +1,2 @@
 export * from './error.handler';
+export * from './lazy-style.handler';

package/dist/handlers/lazy-style.handler.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Lazy Style Handler
+ * Translated from @abp/ng.theme.shared/lib/handlers/lazy-style.handler.ts
+ *
+ * Handles RTL/LTR style switching based on locale direction.
+ *
+ * @since 2.9.0
+ */
+import type { LocaleDirection } from '../models/common';
+/**
+ * Creates a lazy style href by replacing the direction placeholder.
+ * @param style - The style pattern with {{dir}} placeholder
+ * @param dir - The direction ('ltr' or 'rtl')
+ * @returns The resolved style href
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * const href = createLazyStyleHref('bootstrap-{{dir}}.min.css', 'rtl');
+ * // Returns: 'bootstrap-rtl.min.css'
+ * ```
+ */
+export declare function createLazyStyleHref(style: string, dir: string): string;
+/**
+ * Options for the LazyStyleHandler hook.
+ * @since 2.9.0
+ */
+export interface LazyStyleHandlerOptions {
+    /**
+     * Array of style patterns with {{dir}} placeholder.
+     * Defaults to [BOOTSTRAP] if not provided.
+     */
+    styles?: string[];
+    /**
+     * Initial direction. Defaults to 'ltr'.
+     */
+    initialDirection?: LocaleDirection;
+}
+/**
+ * Hook for managing RTL/LTR style switching.
+ * Automatically switches Bootstrap and other stylesheets based on locale direction.
+ *
+ * @param options - Configuration options
+ * @returns Object with current direction and setDirection function
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { direction, setDirection } = useLazyStyleHandler({
+ *     styles: [BOOTSTRAP],
+ *     initialDirection: 'ltr',
+ *   });
+ *
+ *   // Switch to RTL when needed
+ *   const handleLanguageChange = (lang: string) => {
+ *     if (lang === 'ar' || lang === 'he') {
+ *       setDirection('rtl');
+ *     } else {
+ *       setDirection('ltr');
+ *     }
+ *   };
+ *
+ *   return <div dir={direction}>...</div>;
+ * }
+ * ```
+ */
+export declare function useLazyStyleHandler(options?: LazyStyleHandlerOptions): {
+    direction: LocaleDirection;
+    setDirection: import("react").Dispatch<import("react").SetStateAction<LocaleDirection>>;
+};
+/**
+ * Gets the currently loaded Bootstrap stylesheet direction.
+ * @param styles - Array of style patterns to check
+ * @returns The current direction or undefined if not loaded
+ * @since 2.9.0
+ */
+export declare function getLoadedBootstrapDirection(styles?: string[]): LocaleDirection | undefined;
+/**
+ * Initialize lazy style handler for use in providers.
+ * Returns a function that creates the handler.
+ *
+ * @param options - Configuration options
+ * @returns Function that initializes the handler
+ * @since 2.9.0
+ *
+ * @example
+ * ```tsx
+ * // In your provider setup
+ * const initHandler = initLazyStyleHandler({ styles: [BOOTSTRAP] });
+ * const handler = initHandler();
+ * ```
+ */
+export declare function initLazyStyleHandler(options?: LazyStyleHandlerOptions): () => {
+    direction: LocaleDirection;
+};

package/dist/index.d.ts

@@ -2,11 +2,29 @@
  * @abpjs/theme-shared
  *
  * ABP Framework Theme Shared components for React.
- * Translated from @abp/ng.theme.shared v2.4.0
+ * Translated from @abp/ng.theme.shared v2.9.0
  *
  * This package provides shared UI components, services, and utilities
  * for theme/modal management in ABP Framework React applications.
  *
+ * Changes in v2.9.0:
+ * - Added LocaleDirection type for RTL/LTR support
+ * - Added LazyStyleHandler for RTL/LTR style switching
+ * - Added NavItem interface and functions (addNavItem, getNavItems, etc.)
+ * - Added LAZY_STYLES token and LazyStylesContext
+ * - Added BOOTSTRAP constant for bootstrap CSS pattern
+ * - Confirmation.Options: Added dismissible property, deprecated closable
+ * - Updated styles with RTL support for data-tables-filter
+ * - Dependency updates to @abp/ng.core v2.9.0
+ *
+ * Changes in v2.7.0:
+ * - Added ModalService with renderTemplate, clearModal, getContainer, detectChanges
+ * - HttpErrorConfig: Added skipHandledErrorCodes, simplified forWhichErrors to array
+ * - HttpErrorWrapperComponent: Added isHomeShow property
+ * - Added validation-utils with getPasswordValidators function
+ * - Added tokens exports (HTTP_ERROR_CONFIG, httpErrorConfigFactory)
+ * - Dependency updates to @abp/ng.core v2.7.0
+ *
  * Changes in v2.4.0:
  * - Added THEME_SHARED_APPEND_CONTENT token for content appending
  * - Updated Toaster.Status deprecation notice (removal now in v3.0 instead of v2.2)
@@ -52,6 +70,7 @@
  */
 export * from './models';
 export * from './constants';
+export * from './tokens';
 export * from './contexts';
 export * from './hooks';
 export * from './components';