@abpjs/theme-shared 1.0.0 → 2.0.0

package/dist/components/confirmation/Confirmation.d.ts

@@ -11,6 +11,8 @@ export interface ConfirmationDialogProps {
  *
  * In Chakra v3, we use Dialog with role="alertdialog" instead of AlertDialog.
  *
+ * @since 2.0.0 - Updated to use Confirmation.DialogData structure
+ *
  * @example
  * ```tsx
  * function App() {

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

@@ -8,6 +8,18 @@ export interface LoaderBarProps {
         url?: string;
         method?: string;
     }) => boolean;
+    /**
+     * Interval period in milliseconds for progress bar animation.
+     * @default 300
+     * @since 1.1.0
+     */
+    intervalPeriod?: number;
+    /**
+     * Delay in milliseconds before hiding the progress bar after loading completes.
+     * @default 400
+     * @since 1.1.0
+     */
+    stopDelay?: number;
 }
 /**
  * A loading progress bar component that automatically shows/hides
@@ -30,5 +42,5 @@ export interface LoaderBarProps {
  * />
  * ```
  */
-export declare function LoaderBar({ containerClass, progressClass, filter, }: LoaderBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LoaderBar({ containerClass, progressClass, filter, intervalPeriod, stopDelay, }: LoaderBarProps): import("react/jsx-runtime").JSX.Element | null;
 export default LoaderBar;

package/dist/components/toast/Toast.d.ts

@@ -2,19 +2,27 @@ import React from 'react';
 import { Toaster } from '../../models';
 /**
  * Get Chakra color palette for severity.
+ * @since 2.0.0 - Added 'neutral' and 'warning' support
  */
 declare function getSeverityColorPalette(severity: Toaster.Severity): string;
 /**
  * Get background color for severity.
+ * @since 2.0.0 - Added 'neutral' and 'warning' support
  */
 declare function getSeverityBg(severity: Toaster.Severity): string;
 /**
  * Get border color for severity.
+ * @since 2.0.0 - Added 'neutral' and 'warning' support
  */
 declare function getSeverityBorderColor(severity: Toaster.Severity): string;
 export interface ToastContainerProps {
     /** Position of toasts */
     position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+    /**
+     * Container key for filtering toasts to this container
+     * @since 2.0.0
+     */
+    containerKey?: string;
 }
 /**
  * ToastContainer - Syncs toaster state with Chakra v3's toast system.
@@ -26,6 +34,8 @@ export interface ToastContainerProps {
  * handle RTL languages - toasts will appear on the correct side based on
  * the current text direction.
  *
+ * @since 2.0.0 - Added containerKey prop for filtering toasts
+ *
  * @example
  * ```tsx
  * function App() {
@@ -38,6 +48,6 @@ export interface ToastContainerProps {
  * }
  * ```
  */
-export declare function ToastContainer({ position }: ToastContainerProps): React.ReactElement;
+export declare function ToastContainer({ position, containerKey }: ToastContainerProps): React.ReactElement;
 export { getSeverityColorPalette as getSeverityColorScheme, getSeverityBg, getSeverityBorderColor };
 export default ToastContainer;

package/dist/constants/styles.d.ts

@@ -2,6 +2,11 @@
  * 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.
  *
+ * @since 2.0.0 - Updated styles:
+ * - Removed modal-specific styles (now handled by components)
+ * - Added sorting icon styles
+ * - Added table scrollbar width styling
+ *
  * @example
  * ```tsx
  * // Option 1: Use with a style tag in your app
@@ -20,5 +25,5 @@
  * // 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 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";
 export default DEFAULT_STYLES;

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

@@ -1,41 +1,86 @@
 import React, { type ReactNode } from 'react';
+import type { Config } from '@abpjs/core';
 import { Confirmation, Toaster } from '../models';
 /**
- * Internal confirmation message structure.
+ * Subscriber callback type for confirmation$ observable pattern
+ * @since 2.0.0
  */
-export interface ConfirmationMessage {
-    /** Unique ID for this confirmation */
-    id: string;
-    /** Message content (can be localization key) */
-    message: string;
-    /** Title (can be localization key) */
-    title?: string;
-    /** Severity level affects the styling */
-    severity: Toaster.Severity;
-    /** Options for the confirmation */
-    options: Confirmation.Options;
-}
+type ConfirmationSubscriber = (data: Confirmation.DialogData | null) => void;
 /**
  * ConfirmationService interface - matches the Angular service API.
+ * @since 2.0.0 - Major changes:
+ * - No longer extends AbstractToaster
+ * - Added confirmation$ ReplaySubject pattern via subscribe method
+ * - Now accepts Config.LocalizationParam for message and title
  */
 export interface ConfirmationService {
-    /** Show an info confirmation */
-    info(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
-    /** Show a success confirmation */
-    success(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
-    /** Show a warning confirmation */
-    warn(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
-    /** Show an error confirmation */
-    error(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
-    /** Clear the current confirmation */
+    /**
+     * Show an info confirmation
+     * @param message Message content (supports localization)
+     * @param title Title (supports localization)
+     * @param options Confirmation options
+     * @returns Promise resolving to user's response status
+     */
+    info(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Confirmation.Options>): Promise<Toaster.Status>;
+    /**
+     * Show a success confirmation
+     * @param message Message content (supports localization)
+     * @param title Title (supports localization)
+     * @param options Confirmation options
+     * @returns Promise resolving to user's response status
+     */
+    success(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Confirmation.Options>): Promise<Toaster.Status>;
+    /**
+     * Show a warning confirmation
+     * @param message Message content (supports localization)
+     * @param title Title (supports localization)
+     * @param options Confirmation options
+     * @returns Promise resolving to user's response status
+     */
+    warn(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Confirmation.Options>): Promise<Toaster.Status>;
+    /**
+     * Show an error confirmation
+     * @param message Message content (supports localization)
+     * @param title Title (supports localization)
+     * @param options Confirmation options
+     * @returns Promise resolving to user's response status
+     */
+    error(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Confirmation.Options>): Promise<Toaster.Status>;
+    /**
+     * Show a confirmation with specified severity
+     * @param message Message content (supports localization)
+     * @param title Title (supports localization)
+     * @param severity Severity level for styling
+     * @param options Confirmation options
+     * @returns Promise resolving to user's response status
+     * @since 2.0.0
+     */
+    show(message: Config.LocalizationParam, title?: Config.LocalizationParam, severity?: Confirmation.Severity, options?: Partial<Confirmation.Options>): Promise<Toaster.Status>;
+    /**
+     * Clear the current confirmation
+     * @param status Optional status to resolve with (default: dismiss)
+     */
     clear(status?: Toaster.Status): void;
+    /**
+     * Listen for escape key to dismiss confirmation
+     * @since 2.0.0
+     */
+    listenToEscape(): void;
+    /**
+     * Subscribe to confirmation updates (mimics RxJS ReplaySubject pattern).
+     * @param subscriber Callback function called with current confirmation data
+     * @returns Unsubscribe function
+     * @since 2.0.0
+     */
+    subscribe(subscriber: ConfirmationSubscriber): () => void;
 }
 /**
  * Context value containing the service and current confirmation.
  */
 export interface ConfirmationContextValue {
     service: ConfirmationService;
-    confirmation: ConfirmationMessage | null;
+    /** Current confirmation dialog data */
+    confirmation: Confirmation.DialogData | null;
     /** Respond to the current confirmation */
     respond: (status: Toaster.Status) => void;
 }
@@ -48,6 +93,12 @@ export interface ConfirmationProviderProps {
  * This is the React equivalent of Angular's ConfirmationService.
  * Wrap your app with this provider to enable confirmation dialogs.
  *
+ * @since 2.0.0 - Major changes:
+ * - Now accepts Config.LocalizationParam for message and title
+ * - Added subscribe method for observable pattern
+ * - Added listenToEscape method
+ * - Uses Confirmation.DialogData structure
+ *
  * @example
  * ```tsx
  * <ConfirmationProvider>
@@ -63,6 +114,8 @@ export declare function ConfirmationProvider({ children }: ConfirmationProviderP
  * @returns ConfirmationService with methods to show confirmation dialogs
  * @throws Error if used outside of ConfirmationProvider
  *
+ * @since 2.0.0 - Service now accepts Config.LocalizationParam
+ *
  * @example
  * ```tsx
  * function MyComponent() {
@@ -72,7 +125,7 @@ export declare function ConfirmationProvider({ children }: ConfirmationProviderP
  *     const status = await confirmation.warn(
  *       'Are you sure you want to delete this item?',
  *       'Confirm Delete',
- *       { yesCopy: 'Delete', cancelCopy: 'Cancel' }
+ *       { yesText: 'Delete', cancelText: 'Cancel' }
  *     );
  *
  *     if (status === Toaster.Status.confirm) {
@@ -89,7 +142,7 @@ export declare function useConfirmation(): ConfirmationService;
  * Hook to access the current confirmation state.
  * This is typically used by the ConfirmationDialog component.
  *
- * @returns Current confirmation message and respond function
+ * @returns Current confirmation data and respond function
  */
 export declare function useConfirmationState(): Pick<ConfirmationContextValue, 'confirmation' | 'respond'>;
 /**
@@ -98,3 +151,4 @@ export declare function useConfirmationState(): Pick<ConfirmationContextValue, '
  * @returns ConfirmationContextValue with service, confirmation, and respond
  */
 export declare function useConfirmationContext(): ConfirmationContextValue;
+export {};

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

@@ -1,29 +1,92 @@
 import React, { type ReactNode } from 'react';
+import type { Config } from '@abpjs/core';
 import { Toaster } from '../models';
 /**
- * Internal toast message with unique ID for tracking.
+ * Internal toast with numeric ID for tracking.
+ * @since 2.0.0 - Uses Toaster.Toast structure with numeric ID
  */
-interface InternalToast extends Toaster.Message {
-    id: string;
+interface InternalToast extends Toaster.Toast {
+    /** Numeric ID assigned by the service */
+    id: number;
 }
+/**
+ * Subscriber callback type for toasts$ observable pattern
+ * @since 2.0.0
+ */
+type ToastsSubscriber = (toasts: Toaster.Toast[]) => void;
 /**
  * ToasterService interface - matches the Angular service API.
+ * @since 2.0.0 - Major changes:
+ * - Methods now return number (toast ID) instead of Observable<Status>
+ * - Added toasts$ ReplaySubject pattern via subscribe method
+ * - Removed addAll method (use show directly)
  */
 export interface ToasterService {
-    /** Show an info toast */
-    info(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
-    /** Show a success toast */
-    success(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
-    /** Show a warning toast */
-    warn(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
-    /** Show an error toast */
-    error(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
-    /** Add multiple messages at once */
-    addAll(messages: Toaster.Message[]): void;
-    /** Clear all toasts or a specific one by status */
-    clear(status?: Toaster.Status): void;
-    /** Remove a specific toast by ID */
-    remove(id: string): void;
+    /**
+     * Creates an info toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Specific style or structural options for individual toast
+     * @returns Toast ID
+     * @since 2.0.0 - Now returns number instead of Promise<Status>
+     */
+    info(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Toaster.ToastOptions>): number;
+    /**
+     * Creates a success toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Specific style or structural options for individual toast
+     * @returns Toast ID
+     * @since 2.0.0 - Now returns number instead of Promise<Status>
+     */
+    success(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Toaster.ToastOptions>): number;
+    /**
+     * Creates a warning toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Specific style or structural options for individual toast
+     * @returns Toast ID
+     * @since 2.0.0 - Now returns number instead of Promise<Status>
+     */
+    warn(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Toaster.ToastOptions>): number;
+    /**
+     * Creates an error toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Specific style or structural options for individual toast
+     * @returns Toast ID
+     * @since 2.0.0 - Now returns number instead of Promise<Status>
+     */
+    error(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Partial<Toaster.ToastOptions>): number;
+    /**
+     * Creates a toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param severity Sets color of the toast. "success", "warning" etc.
+     * @param options Specific style or structural options for individual toast
+     * @returns Toast ID
+     * @since 2.0.0
+     */
+    show(message: Config.LocalizationParam, title?: Config.LocalizationParam, severity?: Toaster.Severity, options?: Partial<Toaster.ToastOptions>): number;
+    /**
+     * Removes the toast with given id.
+     * @param id ID of the toast to be removed.
+     * @since 2.0.0
+     */
+    remove(id: number): void;
+    /**
+     * Removes all open toasts at once.
+     * @param key Optional container key to clear toasts from specific container
+     * @since 2.0.0
+     */
+    clear(key?: string): void;
+    /**
+     * Subscribe to toast updates (mimics RxJS ReplaySubject pattern).
+     * @param subscriber Callback function called with current toasts
+     * @returns Unsubscribe function
+     * @since 2.0.0
+     */
+    subscribe(subscriber: ToastsSubscriber): () => void;
 }
 /**
  * Context value containing the service and current toasts.
@@ -41,6 +104,11 @@ export interface ToasterProviderProps {
  * This is the React equivalent of Angular's ToasterService.
  * Wrap your app with this provider to enable toast notifications.
  *
+ * @since 2.0.0 - Major changes:
+ * - Methods now return number (toast ID) instead of Promise<Status>
+ * - Added subscribe method for observable pattern
+ * - Severity 'warn' changed to 'warning'
+ *
  * @example
  * ```tsx
  * <ToasterProvider>
@@ -56,6 +124,8 @@ export declare function ToasterProvider({ children }: ToasterProviderProps): Rea
  * @returns ToasterService with methods to show toast notifications
  * @throws Error if used outside of ToasterProvider
  *
+ * @since 2.0.0 - Service methods now return number (toast ID)
+ *
  * @example
  * ```tsx
  * function MyComponent() {
@@ -64,7 +134,8 @@ export declare function ToasterProvider({ children }: ToasterProviderProps): Rea
  *   const handleSave = async () => {
  *     try {
  *       await saveData();
- *       toaster.success('Data saved successfully!', 'Success');
+ *       const toastId = toaster.success('Data saved successfully!', 'Success');
+ *       // Can later remove: toaster.remove(toastId);
  *     } catch (error) {
  *       toaster.error('Failed to save data', 'Error');
  *     }

package/dist/index.d.ts

@@ -2,11 +2,30 @@
  * @abpjs/theme-shared
  *
  * ABP Framework Theme Shared components for React.
- * Translated from @abp/ng.theme.shared v0.9.0
+ * Translated from @abp/ng.theme.shared v2.0.0
  *
  * This package provides shared UI components, services, and utilities
  * for theme/modal management in ABP Framework React applications.
  *
+ * New in v2.0.0:
+ * - ToasterService: Methods now return number (toast ID) instead of Promise<Status>
+ * - ToasterService: Added subscribe() method for observable pattern
+ * - ToasterService: Removed addAll method (use show directly)
+ * - Toaster.Options renamed to Toaster.ToastOptions
+ * - New Toaster.Toast interface
+ * - Toaster.Severity: Changed 'warn' to 'warning', added 'neutral'
+ * - Confirmation.Options: No longer extends Toaster.Options
+ * - Confirmation: Added DialogData interface and Severity type
+ * - Confirmation.Options: Removed deprecated cancelCopy/yesCopy
+ * - ConfirmationService: Added show(), listenToEscape(), subscribe() methods
+ * - Updated styles with sorting icon classes
+ *
+ * New in v1.1.0:
+ * - ToasterService now accepts Config.LocalizationParam for message and title
+ * - Confirmation.Options: Added cancelText/yesText (deprecated cancelCopy/yesCopy)
+ * - New HttpErrorConfig types for custom error screen configuration
+ * - LoaderBar: Added intervalPeriod and stopDelay props
+ *
  * New in v0.9.0:
  * - ChangePassword component (moved from theme-basic)
  * - Profile component (moved from theme-basic)