@xlabs-store/core 0.0.1

package/dist/types/components/x-modal/x-modal.d.ts

@@ -0,0 +1,160 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component x-modal
+ * @description Modal dialog component using PortalController for rendering
+ */
+export declare class XModal {
+    /**
+     * Host element reference for slot extraction.
+     */
+    el: HTMLElement;
+    /**
+     * Whether the modal is visible.
+     * @example
+     * <x-modal visible></x-modal>
+     */
+    visible: boolean;
+    /**
+     * Modal title.
+     * @example
+     * <x-modal modalTitle="Confirm"></x-modal>
+     */
+    modalTitle: string;
+    /**
+     * Width of the modal.
+     * @example
+     * <x-modal width={600}></x-modal>
+     */
+    width: string | number;
+    /**
+     * Whether to show footer.
+     * @example
+     * <x-modal footer={false}></x-modal>
+     */
+    footer: boolean;
+    /**
+     * Whether to show close button.
+     * @example
+     * <x-modal closable={false}></x-modal>
+     */
+    closable: boolean;
+    /**
+     * Whether to show mask.
+     * @example
+     * <x-modal mask={false}></x-modal>
+     */
+    mask: boolean;
+    /**
+     * Whether clicking mask closes modal.
+     * @example
+     * <x-modal maskClosable={false}></x-modal>
+     */
+    maskClosable: boolean;
+    /**
+     * Whether to center the modal.
+     * @example
+     * <x-modal centered></x-modal>
+     */
+    centered: boolean;
+    /**
+     * OK button text.
+     * @example
+     * <x-modal okText="OK"></x-modal>
+     */
+    okText: string;
+    /**
+     * Cancel button text.
+     * @example
+     * <x-modal cancelText="Cancel"></x-modal>
+     */
+    cancelText: string;
+    /**
+     * OK button loading state.
+     * @example
+     * <x-modal okLoading></x-modal>
+     */
+    okLoading: boolean;
+    /**
+     * Cancel button loading state.
+     * @example
+     * <x-modal cancelLoading></x-modal>
+     */
+    cancelLoading: boolean;
+    /**
+     * OK button type.
+     * @example
+     * <x-modal okType="primary"></x-modal>
+     */
+    okType: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /**
+     * Modal type (info, success, error, warning, confirm).
+     * @example
+     * <x-modal type="info"></x-modal>
+     */
+    type: 'info' | 'success' | 'error' | 'warning' | 'confirm';
+    /**
+     * Event emitted when OK button is clicked.
+     * @example
+     * <x-modal onXOk={() => {}}></x-modal>
+     */
+    xOk: EventEmitter;
+    /**
+     * Event emitted when Cancel button or modal is closed.
+     * @example
+     * <x-modal onXCancel={() => {}}></x-modal>
+     */
+    xCancel: EventEmitter;
+    /**
+     * Portal instance for modal content.
+     */
+    private portalInstance;
+    /**
+     * Create portal on initial visible state.
+     * @returns void
+     */
+    componentDidLoad(): void;
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback(): void;
+    handleVisibleChange(): void;
+    handlePropsChange(): void;
+    /**
+     * Get body content from slot.
+     * @returns string
+     */
+    private getBodyContent;
+    /**
+     * Get footer content from slot.
+     * @returns string
+     */
+    private getFooterContent;
+    /**
+     * Build modal content element for portal.
+     *
+     * Flow:
+     * 1. Creates `x-modal-content` element.
+     * 2. Assigns all visual props (title, width, footer, etc.).
+     * 3. Injects body and footer content extracted from slots.
+     * 4. Attaches `xOk` and `xCancel` event listeners to forward events.
+     *
+     * @returns HTMLElement
+     */
+    private buildModalElement;
+    /**
+     * Update portal with modal content.
+     * @returns void
+     */
+    private updatePortal;
+    /**
+     * Destroy portal instance.
+     * @returns void
+     */
+    private destroyPortal;
+    /**
+     * Render hidden slots to capture content for portal.
+     * @returns JSX.Element
+     */
+    render(): any;
+}

package/dist/types/components/x-modal-content/index.d.ts

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

package/dist/types/components/x-modal-content/types.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @file Modal Content Component Types
+ * @description Type definitions for x-modal-content component
+ */
+/**
+ * Modal content props interface
+ */
+export interface ModalContentProps {
+    /** Modal title */
+    modalTitle?: string;
+    /** Width of the modal */
+    width?: string | number;
+    /** Whether to show footer */
+    footer?: boolean;
+    /** Whether to show close button */
+    closable?: boolean;
+    /** Whether to show mask */
+    mask?: boolean;
+    /** Whether clicking mask closes modal */
+    maskClosable?: boolean;
+    /** Whether to center the modal */
+    centered?: boolean;
+    /** OK button text */
+    okText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** OK button loading state */
+    okLoading?: boolean;
+    /** Cancel button loading state */
+    cancelLoading?: boolean;
+    /** OK button type */
+    okType?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /** Custom class names */
+    classNames?: ModalContentClassNames;
+    /** Custom styles */
+    styles?: ModalContentStyles;
+}
+/**
+ * Custom class names for modal parts
+ */
+export interface ModalContentClassNames {
+    /** Modal wrapper class */
+    wrapper?: string;
+    /** Modal content class */
+    content?: string;
+    /** Modal header class */
+    header?: string;
+    /** Modal body class */
+    body?: string;
+    /** Modal footer class */
+    footer?: string;
+    /** Mask class */
+    mask?: string;
+}
+/**
+ * Custom styles for modal parts
+ */
+export interface ModalContentStyles {
+    /** Modal wrapper styles */
+    wrapper?: {
+        [key: string]: string;
+    };
+    /** Modal content styles */
+    content?: {
+        [key: string]: string;
+    };
+    /** Modal header styles */
+    header?: {
+        [key: string]: string;
+    };
+    /** Modal body styles */
+    body?: {
+        [key: string]: string;
+    };
+    /** Modal footer styles */
+    footer?: {
+        [key: string]: string;
+    };
+    /** Mask styles */
+    mask?: {
+        [key: string]: string;
+    };
+}

package/dist/types/components/x-modal-content/x-modal-content.d.ts

@@ -0,0 +1,174 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component x-modal-content
+ * @description Portal content component for x-modal
+ * @shadow false - renders in light DOM for portal mounting
+ */
+export declare class XModalContent {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Modal title.
+     * @example
+     * <x-modal-content modalTitle="Confirm"></x-modal-content>
+     */
+    modalTitle: string;
+    /**
+     * Whether to show the header.
+     */
+    showHeader: boolean;
+    /**
+     * Width of the modal.
+     * @example
+     * <x-modal-content width={600}></x-modal-content>
+     */
+    width: string | number;
+    /**
+     * Whether to show footer.
+     * @example
+     * <x-modal-content footer={false}></x-modal-content>
+     */
+    footer: boolean;
+    /**
+     * Whether to show close button.
+     * @example
+     * <x-modal-content closable={false}></x-modal-content>
+     */
+    closable: boolean;
+    /**
+     * Whether to show mask.
+     * @example
+     * <x-modal-content mask={false}></x-modal-content>
+     */
+    mask: boolean;
+    /**
+     * Whether clicking mask closes modal.
+     * @example
+     * <x-modal-content maskClosable={false}></x-modal-content>
+     */
+    maskClosable: boolean;
+    /**
+     * Whether to center the modal.
+     * @example
+     * <x-modal-content centered></x-modal-content>
+     */
+    centered: boolean;
+    /**
+     * OK button text.
+     * @example
+     * <x-modal-content okText="OK"></x-modal-content>
+     */
+    okText: string;
+    /**
+     * Cancel button text.
+     * @example
+     * <x-modal-content cancelText="Cancel"></x-modal-content>
+     */
+    cancelText: string;
+    /**
+     * OK button loading state.
+     * @example
+     * <x-modal-content okLoading></x-modal-content>
+     */
+    okLoading: boolean;
+    /**
+     * Cancel button loading state.
+     * @example
+     * <x-modal-content cancelLoading></x-modal-content>
+     */
+    cancelLoading: boolean;
+    /**
+     * OK button type.
+     * @example
+     * <x-modal-content okType="primary"></x-modal-content>
+     */
+    okType: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /**
+     * Whether OK button is danger style.
+     */
+    okDanger: boolean;
+    /**
+     * Modal type (info, success, error, warning, confirm).
+     */
+    type: 'info' | 'success' | 'error' | 'warning' | 'confirm';
+    /**
+     * Body content - HTML string or text.
+     * @example
+     * <x-modal-content bodyContent="Hello"></x-modal-content>
+     */
+    bodyContent: string;
+    /**
+     * Footer content - HTML string.
+     * @example
+     * <x-modal-content footerContent="<b>Footer</b>"></x-modal-content>
+     */
+    footerContent: string;
+    /**
+     * Body style.
+     */
+    bodyStyle: {
+        [key: string]: string;
+    };
+    /**
+     * Mask style.
+     */
+    maskStyle: {
+        [key: string]: string;
+    };
+    /**
+     * Wrapper style.
+     */
+    wrapStyle: {
+        [key: string]: string;
+    };
+    /**
+     * Event emitted when OK button is clicked.
+     * @example
+     * <x-modal-content onXOk={() => {}}></x-modal-content>
+     */
+    xOk: EventEmitter;
+    /**
+     * Event emitted when Cancel button is clicked or modal is closed.
+     * @example
+     * <x-modal-content onXCancel={() => {}}></x-modal-content>
+     */
+    xCancel: EventEmitter;
+    /**
+     * Handle mask click to close when allowed.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    private handleWrapClick;
+    /**
+     * Get icon font-icon name based on type.
+     */
+    private getTypeIcon;
+    /**
+     * Emit OK event.
+     * @returns void
+     */
+    private handleOk;
+    /**
+     * Emit Cancel event.
+     * @returns void
+     */
+    private handleCancel;
+    /**
+     * Render modal markup with header, body, and footer.
+     *
+     * Flow:
+     * 1. Renders mask overlay (if enabled).
+     * 2. Renders wrapper div with click handler for mask closing.
+     * 3. Renders modal content container with dynamic width.
+     * 4. Renders header with title and close button.
+     * 5. Renders body with projected HTML content.
+     * 6. Renders footer with custom content or default buttons (OK/Cancel).
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-modal-content modalTitle="Confirm" bodyContent="Content"></x-modal-content>
+     */
+    render(): any;
+}

package/dist/types/components/x-notification/notification-service.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Notification Service
+ *
+ * Provides programmatic API for displaying notification messages
+ * Following Ant Design notification API pattern
+ *
+ * Usage:
+ * ```ts
+ * import { notification } from '@xlabs/core';
+ *
+ * // Basic usage
+ * notification.info({
+ *   message: 'Notification Title',
+ *   description: 'This is the content of the notification.',
+ * });
+ *
+ * notification.success({
+ *   message: 'Success!',
+ *   description: 'Your operation has been completed successfully.',
+ * });
+ *
+ * // With duration
+ * notification.info({
+ *   message: 'Custom Duration',
+ *   description: 'This will close in 10 seconds',
+ *   duration: 10,
+ * });
+ *
+ * // Never auto close (duration = 0)
+ * notification.warning({
+ *   message: 'Warning',
+ *   description: 'This will stay open until manually closed',
+ *   duration: 0,
+ * });
+ *
+ * // With placement
+ * notification.info({
+ *   message: 'Bottom Right',
+ *   description: 'This notification appears at bottom right',
+ *   placement: 'bottomRight',
+ * });
+ *
+ * // Update notification by key
+ * notification.open({
+ *   key: 'updatable',
+ *   message: 'Loading...',
+ *   description: 'Please wait',
+ * });
+ * // Later...
+ * notification.success({
+ *   key: 'updatable',
+ *   message: 'Done!',
+ *   description: 'Operation completed',
+ * });
+ *
+ * // With progress bar
+ * notification.info({
+ *   message: 'With Progress',
+ *   description: 'Shows auto-close progress',
+ *   showProgress: true,
+ * });
+ *
+ * // Destroy by key
+ * notification.destroy('updatable');
+ *
+ * // Destroy all
+ * notification.destroy();
+ *
+ * // Configure globally
+ * notification.config({
+ *   duration: 3,
+ *   maxCount: 5,
+ *   placement: 'topRight',
+ *   top: 50,
+ * });
+ * ```
+ */
+import type { INotificationService } from './types';
+/**
+ * Notification Service
+ */
+export declare const notification: INotificationService;
+export default notification;

package/dist/types/components/x-notification/types.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @file Notification Component Types
+ * @description Type definitions for x-notification component and Notification service
+ */
+/**
+ * Notification type
+ */
+export type NotificationType = 'info' | 'success' | 'error' | 'warning';
+/**
+ * Notification placement
+ */
+export type NotificationPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+/**
+ * Notification configuration for service methods
+ */
+export interface NotificationConfig {
+    /** Title of notification */
+    message: string;
+    /** Description content */
+    description?: string;
+    /** Duration in seconds, 0 means never auto close */
+    duration?: number;
+    /** Custom icon HTML */
+    icon?: string;
+    /** Unique key for notification */
+    key?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline style */
+    style?: {
+        [key: string]: string;
+    };
+    /** Placement of notification */
+    placement?: NotificationPlacement;
+    /** Custom close icon HTML */
+    closeIcon?: string;
+    /** Custom action buttons HTML */
+    btn?: string;
+    /** Callback when notification is closed */
+    onClose?: () => void;
+    /** Click handler */
+    onClick?: () => void;
+    /** Show progress bar for auto-closing */
+    showProgress?: boolean;
+    /** Pause timer on hover */
+    pauseOnHover?: boolean;
+    /** Role for accessibility */
+    role?: 'alert' | 'status';
+}
+/**
+ * Notification instance returned from service methods
+ */
+export interface NotificationInstance {
+    /** Close this notification */
+    close: () => void;
+    /** Update notification config */
+    update: (config: Partial<NotificationConfig>) => void;
+    /** Promise that resolves when notification closes */
+    then: <T>(onFulfilled?: () => T) => Promise<T>;
+}
+/**
+ * Global notification configuration
+ */
+export interface NotificationGlobalConfig {
+    /** Duration in seconds (default: 4.5) */
+    duration?: number;
+    /** Max notifications to show at once */
+    maxCount?: number;
+    /** Position of notifications */
+    placement?: NotificationPlacement;
+    /** Distance from top of viewport */
+    top?: number;
+    /** Distance from bottom of viewport */
+    bottom?: number;
+    /** Custom prefix class */
+    prefixCls?: string;
+    /** RTL mode */
+    rtl?: boolean;
+    /** Custom container for mounting notifications */
+    getContainer?: () => HTMLElement;
+    /** Show progress bar by default */
+    showProgress?: boolean;
+    /** Pause on hover by default */
+    pauseOnHover?: boolean;
+    /** Close icon HTML */
+    closeIcon?: string;
+    /** Stack configuration */
+    stack?: boolean | {
+        threshold: number;
+    };
+}
+/**
+ * Notification service interface
+ */
+export interface INotificationService {
+    /** Display info notification */
+    info: (config: NotificationConfig) => NotificationInstance;
+    /** Display success notification */
+    success: (config: NotificationConfig) => NotificationInstance;
+    /** Display error notification */
+    error: (config: NotificationConfig) => NotificationInstance;
+    /** Display warning notification */
+    warning: (config: NotificationConfig) => NotificationInstance;
+    /** Open notification with custom config */
+    open: (config: NotificationConfig & {
+        type?: NotificationType;
+    }) => NotificationInstance;
+    /** Destroy notification by key */
+    destroy: (key?: string) => void;
+    /** Configure global settings */
+    config: (options: NotificationGlobalConfig) => void;
+}