@xlabs-store/core 0.0.1

package/dist/types/components/x-address/vietnam-data.d.ts

@@ -0,0 +1,14 @@
+export declare const PROVINCES: {
+    code: string;
+    name: string;
+}[];
+export declare const DISTRICTS: {
+    code: string;
+    name: string;
+    province_code: string;
+}[];
+export declare const WARDS: {
+    code: string;
+    name: string;
+    district_code: string;
+}[];

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

@@ -0,0 +1,64 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XAddress {
+    /**
+     * Current value of the address
+     */
+    value: {
+        province?: string;
+        district?: string;
+        ward?: string;
+    };
+    /**
+     * Whether the address is required
+     */
+    required: boolean;
+    /**
+     * Whether the address is disabled
+     */
+    disabled: boolean;
+    /**
+     * Placeholder for province selection
+     */
+    placeholderProvince: string;
+    /**
+     * Placeholder for district selection
+     */
+    placeholderDistrict: string;
+    /**
+     * Placeholder for ward selection
+     */
+    placeholderWard: string;
+    /**
+     * Optional custom data for provinces
+     */
+    provincesData: any[];
+    /**
+     * Optional custom data for districts
+     */
+    districtsData: any[];
+    /**
+     * Optional custom data for wards
+     */
+    wardsData: any[];
+    provinces: any[];
+    districts: any[];
+    wards: any[];
+    selectedProvince: string;
+    selectedDistrict: string;
+    selectedWard: string;
+    error: string;
+    xChange: EventEmitter<any>;
+    handleValueChange(newValue: any): void;
+    componentWillLoad(): void;
+    private updateLists;
+    private handleProvinceChange;
+    private handleDistrictChange;
+    private handleWardChange;
+    private emitChange;
+    private clearErrorIfValid;
+    /**
+     * Public method to validate the address component
+     */
+    validate(): Promise<boolean>;
+    render(): any;
+}

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

@@ -0,0 +1,111 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XAffix {
+    /**
+     * Host element reference for measurements.
+     */
+    el: HTMLElement;
+    /**
+     * Offset from the top of the viewport/target.
+     * @example
+     * <x-affix topOffset={10}><button>Top</button></x-affix>
+     */
+    topOffset: number;
+    /**
+     * Offset from the bottom of the viewport/target.
+     * @example
+     * <x-affix bottomOffset={20}><button>Bottom</button></x-affix>
+     */
+    bottomOffset: number;
+    /**
+     * Target container to observe for scroll.
+     * @example
+     * <x-affix target={() => document.querySelector('.scrollable')}></x-affix>
+     */
+    target: () => HTMLElement | Window;
+    /**
+     * Inline styles applied to fixed element when affixed.
+     */
+    affixStyle: any;
+    /**
+     * Placeholder styles used to preserve layout when affixed.
+     */
+    placeholderStyle: any;
+    /**
+     * Current affix state.
+     */
+    status: 'affix' | 'static';
+    /**
+     * Emits when affix state changes.
+     * @example
+     * <x-affix onXChange={(ev) => console.log(ev.detail)}></x-affix>
+     */
+    xChange: EventEmitter<boolean>;
+    /**
+     * Throttle flag for scroll handling.
+     */
+    ticking: boolean;
+    /**
+     * Placeholder element reference.
+     */
+    placeholder: HTMLElement;
+    /**
+     * Attach scroll and resize listeners and calculate initial position.
+     * @returns void
+     * @example
+     * <x-affix topOffset={0}></x-affix>
+     */
+    componentDidLoad(): void;
+    /**
+     * Cleanup listeners on disconnect.
+     * @returns void
+     * @example
+     * <x-affix></x-affix>
+     */
+    disconnectedCallback(): void;
+    /**
+     * Throttled scroll handler using requestAnimationFrame.
+     * @returns void
+     * @example
+     * <x-affix></x-affix>
+     */
+    handleScroll(): void;
+    /**
+     * Calculate and update affix position and placeholder layout.
+     *
+     * Flow:
+     * 1. Checks if host element exists.
+     * 2. Resolves the target container (window or specific element).
+     * 3. Calculates the bounding rectangles for the target and the affix element.
+     *    - If already affixed, uses the placeholder's rect to determine original position.
+     * 4. Checks `topOffset` to determine if affixing is needed:
+     *    - If the element's top position reaches the offset threshold relative to the target:
+     *      - Sets status to 'affix'.
+     *      - Updates `placeholderStyle` to reserve space in the flow.
+     *      - Updates `affixStyle` to `position: fixed` with correct top/width/zIndex.
+     *      - Emits `xChange(true)`.
+     *    - If the element moves back above the threshold:
+     *      - Resets status to 'static'.
+     *      - Clears styles.
+     *      - Emits `xChange(false)`.
+     *
+     * @returns void
+     * @example
+     * <x-affix topOffset={8}></x-affix>
+     */
+    updatePosition(): void;
+    /**
+     * Render affixed content and placeholder when needed.
+     *
+     * Flow:
+     * 1. Renders a placeholder div if status is 'affix' to prevent content jump.
+     *    - The placeholder copies the dimensions of the original element.
+     * 2. Renders the main content wrapper with `affixStyle`.
+     *    - This wrapper becomes fixed when affixed, or static otherwise.
+     * 3. Projects the default slot content inside the wrapper.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-affix topOffset={0}><button>Stick</button></x-affix>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,74 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XAlert {
+    /**
+     * Content of Alert.
+     * @example
+     * <x-alert message="Info"></x-alert>
+     */
+    message: string;
+    /**
+     * Additional content of Alert.
+     * @example
+     * <x-alert description="Details"></x-alert>
+     */
+    description: string;
+    /**
+     * Type of Alert style, options: success, info, warning, error.
+     * @example
+     * <x-alert type="success" message="Saved"></x-alert>
+     */
+    type: 'success' | 'info' | 'warning' | 'error';
+    /**
+     * Whether Alert can be closed.
+     * @example
+     * <x-alert closable message="Closable"></x-alert>
+     */
+    closable: boolean;
+    /**
+     * Whether to show icon.
+     * @example
+     * <x-alert showIcon message="With icon"></x-alert>
+     */
+    showIcon: boolean;
+    /**
+     * Whether to show as banner.
+     * @example
+     * <x-alert banner message="Banner"></x-alert>
+     */
+    banner: boolean;
+    /**
+     * Internal closed state for dismissible alerts.
+     */
+    closed: boolean;
+    /**
+     * Emits when the alert is closed.
+     * @example
+     * <x-alert onXClose={() => console.log('closed')}></x-alert>
+     */
+    xClose: EventEmitter<void>;
+    /**
+     * Handle close action and emit close event.
+     * @param e - Mouse click event from close button.
+     * @returns void
+     * @example
+     * <x-alert closable onXClose={() => {}}></x-alert>
+     */
+    handleClose(e: MouseEvent): void;
+    /**
+     * Render alert content, icon, and close button.
+     *
+     * Flow:
+     * 1. Checks if `closed` state is true; if so, returns null to remove from DOM.
+     * 2. Determines if description is present to adjust styling.
+     * 3. Constructs host classes based on type, icon presence, banner mode, and closability.
+     * 4. Renders the status icon if `showIcon` is true.
+     *    - Selects the appropriate SVG based on `type` (success, info, warning, error).
+     * 5. Renders the message and description content.
+     * 6. Renders the close button if `closable` is true.
+     *
+     * @returns JSX.Element | null
+     * @example
+     * <x-alert type="warning" message="Warning"></x-alert>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,120 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XAnchor {
+    /**
+     * Host element reference for locating child links.
+     */
+    el: HTMLElement;
+    /**
+     * Fixed mode of Anchor.
+     * @example
+     * <x-anchor affix></x-anchor>
+     */
+    affix: boolean;
+    /**
+     * Bounding distance of anchor area.
+     * @example
+     * <x-anchor bounds={10}></x-anchor>
+     */
+    bounds: number;
+    /**
+     * Scrolling container.
+     * @example
+     * <x-anchor getContainer={() => document.querySelector('.scroll')}></x-anchor>
+     */
+    getContainer: () => HTMLElement | Window;
+    /**
+     * Pixels to offset from top when calculating position of scroll.
+     * @example
+     * <x-anchor topOffset={8}></x-anchor>
+     */
+    topOffset: number;
+    /**
+     * Whether to show the ink ball.
+     * @example
+     * <x-anchor showInkInFixed></x-anchor>
+     */
+    showInkInFixed: boolean;
+    /**
+     * Customize the anchor highlight.
+     * @example
+     * <x-anchor targetOffset={24}></x-anchor>
+     */
+    targetOffset: number;
+    /**
+     * Currently active link href.
+     */
+    activeLink: string;
+    /**
+     * Emits when a link is clicked.
+     * @example
+     * <x-anchor onXClick={(ev) => console.log(ev.detail)}></x-anchor>
+     */
+    xClick: EventEmitter<string>;
+    /**
+     * Emits when active link changes.
+     * @example
+     * <x-anchor onXChange={(ev) => console.log(ev.detail)}></x-anchor>
+     */
+    xChange: EventEmitter<string>;
+    /**
+     * List of link hrefs extracted from child links.
+     */
+    private links;
+    /**
+     * Scroll container reference.
+     */
+    private scrollContainer;
+    /**
+     * Initialize container and link list on load.
+     * @returns void
+     * @example
+     * <x-anchor></x-anchor>
+     */
+    componentDidLoad(): void;
+    /**
+     * Handle scroll events to update active link.
+     *
+     * Flow:
+     * 1. Checks if scroll container is available.
+     * 2. Iterates through registered links to find the one currently in view.
+     * 3. Updates `activeLink` state based on scroll position.
+     *    - (Note: Full calculation logic would involve `getBoundingClientRect` of targets).
+     * 4. Emits `xChange` if the active link changes.
+     *
+     * @returns void
+     * @example
+     * <x-anchor></x-anchor>
+     */
+    handleScroll(): void;
+    /**
+     * Collect hrefs from child anchor links.
+     * @returns void
+     * @example
+     * <x-anchor>
+     *   <x-anchor-link href="#a"></x-anchor-link>
+     * </x-anchor>
+     */
+    updateLinks(): void;
+    /**
+     * Handle child link click and scroll to target.
+     *
+     * Flow:
+     * 1. Updates `activeLink` state with the clicked href.
+     * 2. Emits `xClick` and `xChange` events.
+     * 3. Resolves the target element by ID (removing '#' from href).
+     * 4. Scrolls the target element into view using smooth behavior.
+     *
+     * @param e - Custom event from link component.
+     * @returns void
+     * @example
+     * <x-anchor></x-anchor>
+     */
+    handleLinkClick(e: CustomEvent): void;
+    /**
+     * Render anchor wrapper and ink indicator.
+     * @returns JSX.Element
+     * @example
+     * <x-anchor><x-anchor-link href="#a">A</x-anchor-link></x-anchor>
+     */
+    render(): any;
+}

package/dist/types/components/x-anchor-link/x-anchor-link.d.ts

@@ -0,0 +1,47 @@
+export declare class XAnchorLink {
+    /**
+     * Host element reference for dispatching events.
+     */
+    el: HTMLElement;
+    /**
+     * target of hyperlink.
+     * @example
+     * <x-anchor-link href="#section"></x-anchor-link>
+     */
+    href: string;
+    /**
+     * content of hyperlink.
+     * @example
+     * <x-anchor-link linkTitle="Section"></x-anchor-link>
+     */
+    linkTitle: string;
+    /**
+     * target of hyperlink.
+     * @example
+     * <x-anchor-link target="_blank"></x-anchor-link>
+     */
+    target: string;
+    /**
+     * Prevent default navigation and bubble custom event to parent.
+     *
+     * Flow:
+     * 1. Prevents default browser anchor navigation.
+     * 2. Creates a custom 'x-anchor-link-click' event.
+     *    - Bubbles up to finding the parent `x-anchor`.
+     *    - Carries `href` in detail.
+     * 3. Dispatches event from host element.
+     *
+     * @param e - Mouse click event on anchor.
+     * @returns void
+     * @example
+     * <x-anchor-link href="#a"></x-anchor-link>
+     */
+    handleClick(e: MouseEvent): void;
+    /**
+     * Render anchor link and nested slot.
+     * @returns JSX.Element
+     * @example
+     * <x-anchor-link href="#a" linkTitle="A"></x-anchor-link>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,93 @@
+import type { LocaleCode } from '../../locales/';
+import { type GlobalIconConfig } from '../../utils/config';
+/**
+ * x-app: Global Application Container
+ * Providing a consistent context for message, notification, modal services, and locale management.
+ */
+export declare class XApp {
+    /**
+     * Host element reference for the app.
+     */
+    el: HTMLElement;
+    /**
+     * Whether the app is fixed in position.
+     * @default false
+     */
+    fixed: boolean;
+    /**
+     * Container element used by services.
+     */
+    private container;
+    /**
+     * The locale code to use across all x-components.
+     * Defaults to 'en_US'. Change to 'vi_VN' or any registered locale.
+     *
+     * @type {string}
+     * @default 'en_US'
+     * @example
+     * <x-app locale="vi_VN"></x-app>
+     */
+    locale: LocaleCode | string;
+    /**
+     * Watch for locale changes and update the global locale service.
+     */
+    onLocaleChanged(newLocale: LocaleCode | string): void;
+    /**
+     * Global configuration for action icons used across components.
+     * @example
+     * <x-app icon-config={{ clear: 'my-clear-icon' }}></x-app>
+     */
+    iconConfig: Partial<GlobalIconConfig>;
+    /**
+     * Watch for icon configuration changes based on updates.
+     */
+    onIconConfigChanged(newConfig: Partial<GlobalIconConfig>): void;
+    /**
+     * Initialize before render.
+     */
+    componentWillLoad(): void;
+    /**
+   * Register global services when app is loaded.
+   *
+   * Flow:
+   * 1. Calls `registerApp` utility.
+   * 2. Binds singleton instances for `message`, `modal`, and `notification`.
+   *    - Enables usage of `message.success()`, etc., globally.
+   * 3. Sets the initial locale.
+   *
+   * @returns void
+   * @example
+   * <x-app></x-app>
+   */
+    componentDidLoad(): void;
+    /**
+     * Unregister global services when app is disconnected.
+     * @returns void
+     * @example
+     * <x-app></x-app>
+     */
+    disconnectedCallback(): void;
+    /**
+     * Internal method to get the container for services
+     * @returns Promise<HTMLElement>
+     * @example
+     * const el = await app.getContainer()
+     */
+    getContainer(): Promise<HTMLElement>;
+    /**
+     * Programmatically change the locale at runtime.
+     * @param code - The locale code (e.g. 'en_US', 'vi_VN')
+     * @returns Promise<void>
+     * @example
+     * const app = document.querySelector('x-app');
+     * await app.setLocale('vi_VN');
+     */
+    setLocale(code: LocaleCode | string): Promise<void>;
+    /**
+     * Render app container and service portal node.
+     * @returns JSX.Element
+     * @example
+     * <x-app><div>Content</div></x-app>
+     */
+    render(): any;
+}

package/dist/types/components/x-auto-complete/auto-complete-dropdown-content/auto-complete-dropdown-content.d.ts

@@ -0,0 +1,58 @@
+import type { AutoCompleteDropdownClassMap, AutoCompleteDropdownStyleMap, AutoCompleteDropdownRefCallback } from './types';
+/**
+ * Auto-Complete Dropdown Content Component
+ *
+ * Internal component used to render dropdown content in a portal.
+ * This component is not meant to be used directly.
+ */
+export declare class XAutoCompleteDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-auto-complete-dropdown-content dropdownClasses={{ 'x-auto': true }}></x-auto-complete-dropdown-content>
+     */
+    dropdownClasses: AutoCompleteDropdownClassMap;
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-auto-complete-dropdown-content dropdownStyle={{ width: '200px' }}></x-auto-complete-dropdown-content>
+     */
+    dropdownStyle: AutoCompleteDropdownStyleMap;
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-auto-complete-dropdown-content setDropdownRef={(el) => console.log(el)}></x-auto-complete-dropdown-content>
+     */
+    setDropdownRef?: AutoCompleteDropdownRefCallback;
+    /**
+     * Dropdown container element reference.
+     */
+    private dropdownEl;
+    /**
+     * Provide dropdown ref after initial render.
+     * @returns void
+     */
+    componentDidLoad(): void;
+    /**
+     * Cleanup dropdown ref on disconnect.
+     * @returns void
+     */
+    disconnectedCallback(): void;
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param el - Dropdown element.
+     * @returns void
+     */
+    private setRef;
+    /**
+     * Render dropdown wrapper and slot content.
+     * @returns JSX.Element
+     * @example
+     * <x-auto-complete-dropdown-content dropdownClasses={{ 'x-auto': true }}></x-auto-complete-dropdown-content>
+     */
+    render(): any;
+}

package/dist/types/components/x-auto-complete/auto-complete-dropdown-content/index.d.ts

@@ -0,0 +1,2 @@
+export { XAutoCompleteDropdownContent } from './auto-complete-dropdown-content';
+export type { AutoCompleteDropdownClassMap, AutoCompleteDropdownStyleMap, AutoCompleteDropdownRefCallback, } from './types';

package/dist/types/components/x-auto-complete/auto-complete-dropdown-content/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Auto-complete dropdown content types
+ * @description Shared prop/type definitions for x-auto-complete-dropdown-content component
+ */
+/** Class map for dropdown wrapper */
+export type AutoCompleteDropdownClassMap = {
+    [key: string]: boolean;
+};
+/** Inline style map for dropdown wrapper */
+export type AutoCompleteDropdownStyleMap = {
+    [key: string]: string;
+};
+/** Callback to expose dropdown element reference */
+export type AutoCompleteDropdownRefCallback = (el: HTMLDivElement | null) => void;