@abpjs/theme-shared 0.7.6 → 0.9.0

package/dist/components/change-password/ChangePassword.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface ChangePasswordProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when visibility changes */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Change password modal component.
+ * Translated from Angular ChangePasswordComponent (moved from theme-basic in v0.9.0).
+ *
+ * Provides a modal dialog for changing the user's password with:
+ * - Current password input
+ * - New password input with validation
+ * - Confirm new password with match validation
+ *
+ * @example
+ * ```tsx
+ * <ChangePassword
+ *   visible={isOpen}
+ *   onVisibleChange={setIsOpen}
+ * />
+ * ```
+ */
+export declare function ChangePassword({ visible, onVisibleChange, }: ChangePasswordProps): React.ReactElement;
+export default ChangePassword;

package/dist/components/change-password/index.d.ts

@@ -0,0 +1 @@
+export * from './ChangePassword';

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

@@ -0,0 +1,35 @@
+export interface ErrorComponentProps {
+    /** Error title (e.g., "404", "500", "Error") */
+    title?: string;
+    /** Error details/message */
+    details?: string;
+    /** Callback when user wants to dismiss/destroy the error display */
+    onDestroy?: () => void;
+    /** Whether to show a close/back button */
+    showCloseButton?: boolean;
+    /** Custom close button text */
+    closeButtonText?: string;
+}
+/**
+ * A component for displaying error pages/messages.
+ * Can be used for HTTP errors (404, 500, etc.) or general error states.
+ *
+ * @example
+ * ```tsx
+ * // Basic error display
+ * <ErrorComponent
+ *   title="404"
+ *   details="The page you are looking for was not found."
+ * />
+ *
+ * // With close button
+ * <ErrorComponent
+ *   title="Error"
+ *   details="Something went wrong."
+ *   showCloseButton
+ *   onDestroy={() => navigate('/')}
+ * />
+ * ```
+ */
+export declare function ErrorComponent({ title, details, onDestroy, showCloseButton, closeButtonText, }: ErrorComponentProps): import("react/jsx-runtime").JSX.Element;
+export default ErrorComponent;

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

@@ -0,0 +1 @@
+export * from './ErrorComponent';

package/dist/components/index.d.ts

@@ -1,4 +1,8 @@
 export * from './toast';
 export * from './confirmation';
+export * from './errors';
+export * from './loader-bar';
 export * from './modal';
 export * from './ui';
+export * from './change-password';
+export * from './profile';

package/dist/components/loader-bar/LoaderBar.d.ts

@@ -0,0 +1,34 @@
+export interface LoaderBarProps {
+    /** CSS class for the container element */
+    containerClass?: string;
+    /** CSS class for the progress bar element */
+    progressClass?: string;
+    /** Custom filter function to determine if loading should be shown */
+    filter?: (request: {
+        url?: string;
+        method?: string;
+    }) => boolean;
+}
+/**
+ * A loading progress bar component that automatically shows/hides
+ * based on HTTP request activity tracked by the loader state.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - place in your layout
+ * <LoaderBar />
+ *
+ * // With custom classes
+ * <LoaderBar
+ *   containerClass="my-loader-container"
+ *   progressClass="my-progress-bar"
+ * />
+ *
+ * // With filter to only show for specific requests
+ * <LoaderBar
+ *   filter={(req) => !req.url?.includes('/api/silent')}
+ * />
+ * ```
+ */
+export declare function LoaderBar({ containerClass, progressClass, filter, }: LoaderBarProps): import("react/jsx-runtime").JSX.Element | null;
+export default LoaderBar;

package/dist/components/loader-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './LoaderBar';

package/dist/components/modal/Modal.d.ts

@@ -9,12 +9,18 @@ export interface ModalProps {
     visible: boolean;
     /** Callback when visibility changes */
     onVisibleChange?: (visible: boolean) => void;
+    /** Whether the modal is in a busy/loading state (v0.9.0) */
+    busy?: boolean;
     /** Modal size */
     size?: ModalSize;
     /** Center the modal vertically */
     centered?: boolean;
     /** Custom CSS class for the modal container */
     modalClass?: string;
+    /** Fixed height for the modal (v0.9.0) */
+    height?: number | string;
+    /** Minimum height for the modal (v0.9.0) */
+    minHeight?: number | string;
     /** Header content */
     header?: ReactNode;
     /** Body content (children) */
@@ -31,6 +37,8 @@ export interface ModalProps {
     closeOnEscape?: boolean;
     /** Whether to scroll the modal body if content overflows */
     scrollBehavior?: 'inside' | 'outside';
+    /** Callback when modal is initialized/opened (v0.9.0) */
+    onInit?: () => void;
     /**
      * Motion preset for modal animation.
      * @default 'scale'
@@ -78,7 +86,7 @@ export interface ModalProps {
  * }
  * ```
  */
-export declare function Modal({ visible, onVisibleChange, size, centered, modalClass, header, children, footer, showCloseButton, closeOnOverlayClick, closeOnEscape, scrollBehavior, motionPreset, trapFocus, preventScroll, }: ModalProps): React.ReactElement;
+export declare function Modal({ visible, onVisibleChange, busy, size, centered, modalClass, height, minHeight, header, children, footer, showCloseButton, closeOnOverlayClick, closeOnEscape, scrollBehavior, motionPreset, trapFocus, preventScroll, onInit, }: ModalProps): React.ReactElement;
 /**
  * Re-export Chakra v3 dialog parts for convenience.
  * Users can use these for more custom modal layouts.

package/dist/components/profile/Profile.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ProfileProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when visibility changes */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Profile modal component for editing user profile.
+ * Translated from Angular ProfileComponent (moved from theme-basic in v0.9.0).
+ *
+ * Provides a modal dialog for editing user profile with:
+ * - Username (required)
+ * - Email (required)
+ * - Name
+ * - Surname
+ * - Phone number
+ *
+ * @example
+ * ```tsx
+ * <Profile
+ *   visible={isOpen}
+ *   onVisibleChange={setIsOpen}
+ * />
+ * ```
+ */
+export declare function Profile({ visible, onVisibleChange, }: ProfileProps): React.ReactElement;
+export default Profile;

package/dist/components/profile/index.d.ts

@@ -0,0 +1 @@
+export * from './Profile';

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './styles';

package/dist/constants/styles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Default global styles for ABP theme shared components.
+ * These styles can be injected into your app's global CSS or used with a style tag.
+ *
+ * @example
+ * ```tsx
+ * // Option 1: Use with a style tag in your app
+ * import { DEFAULT_STYLES } from '@abpjs/theme-shared';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <style>{DEFAULT_STYLES}</style>
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ *
+ * // Option 2: Add to your global CSS file
+ * // 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.modal {\n  background-color: rgba(0, 0, 0, .6);\n}\n\n.abp-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\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

@@ -1,4 +1,5 @@
 import { Toaster } from '../models';
+import { ErrorComponentProps } from '../components/errors/ErrorComponent';
 type NavigateFunction = (to: string) => void;
 /**
  * HTTP error response structure (matching ABP error format).
@@ -18,6 +19,13 @@ export interface HttpErrorResponse {
         };
     };
 }
+/**
+ * Error component instance configuration.
+ */
+export interface ErrorComponentInstance {
+    title: string;
+    details: string;
+}
 /**
  * Error handler interface.
  */
@@ -28,6 +36,12 @@ export interface ErrorHandler {
     showError: (message: string, title?: string) => Promise<Toaster.Status>;
     /** Navigate to the login page */
     navigateToLogin: () => void;
+    /** Create error component props for full-page error display */
+    createErrorComponent: (instance: Partial<ErrorComponentInstance>) => ErrorComponentProps;
+    /** Current error component props (null if no error) */
+    errorComponentProps: ErrorComponentProps | null;
+    /** Clear the current error component */
+    clearErrorComponent: () => void;
 }
 export interface UseErrorHandlerOptions {
     /**

package/dist/index.d.ts

@@ -2,12 +2,20 @@
  * @abpjs/theme-shared
  *
  * ABP Framework Theme Shared components for React.
- * Translated from @abp/ng.theme.shared v0.7.6
+ * Translated from @abp/ng.theme.shared v0.9.0
  *
  * This package provides shared UI components, services, and utilities
  * for theme/modal management in ABP Framework React applications.
+ *
+ * New in v0.9.0:
+ * - ChangePassword component (moved from theme-basic)
+ * - Profile component (moved from theme-basic)
+ * - Modal busy prop for preventing close during operations
+ * - Modal height/minHeight props
+ * - Modal onInit callback
  */
 export * from './models';
+export * from './constants';
 export * from './contexts';
 export * from './hooks';
 export * from './components';