@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -16,7 +16,7 @@ export declare class XIcon {
      * @example
      * <x-icon name="settings" type="round"></x-icon>
      */
-    type: "solid" | "outline" | "round";
+    type: 'solid' | 'outline' | 'round';
     /**
      * Name of the icon.
      * @example

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

@@ -4,7 +4,7 @@
 export type InputSize = 'large' | 'middle' | 'small';
 export type InputStatus = 'error' | 'warning';
 export type InputVariant = 'outlined' | 'borderless' | 'filled';
-export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'color';
+export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'color' | 'textarea';
 export interface InputChangeEventDetail {
     value: string;
     event: Event;

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

@@ -113,6 +113,12 @@ export declare class XInput {
      * <x-input type="password"></x-input>
      */
     type: InputType;
+    /**
+     * The number of lines for textarea
+     * @example
+     * <x-input type="textarea" rows={4}></x-input>
+     */
+    rows: number;
     /**
      * The input content value
      * @example

package/dist/types/components/x-input-icon/icon-picker-dropdown-content/icon-picker-dropdown-content.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class XIconPickerDropdownContent {
+    el: HTMLElement;
+    value: string;
+    placement: string;
+    dropdownClasses: Record<string, boolean>;
+    /**
+     * Search query passed from the trigger (x-select's showSearch input).
+     * When this changes, pagination resets and icons are filtered.
+     */
+    searchQuery: string;
+    /**
+     * Whether to show an internal search input field at the top of the dropdown.
+     * Useful when the trigger (e.g. avatar, button) does not have its own search input.
+     */
+    showSearchInput: boolean;
+    /** How many icons have been "loaded" (lazy pagination) */
+    loadedCount: number;
+    /** Whether more icons are being loaded */
+    isLoadingMore: boolean;
+    xIconClick: EventEmitter<string>;
+    xSearch: EventEmitter<string>;
+    private sentinelRef?;
+    private observer?;
+    onSearchChange(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    private setupObserver;
+    private loadMore;
+    private handleIconClick;
+    private handleSearchChange;
+    private getFilteredGroups;
+    private getTotalFilteredCount;
+    private getVisibleGroups;
+    private renderGroup;
+    private renderBody;
+    render(): any;
+}

package/dist/types/components/x-input-icon/types.d.ts

@@ -0,0 +1,9 @@
+export type InputIconSize = 'large' | 'middle' | 'small';
+export type InputIconVariant = 'outlined' | 'borderless' | 'filled';
+export type InputIconStatus = 'error' | 'warning';
+export type InputIconPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type InputIconTriggerType = 'input' | 'avatar' | 'button' | 'div' | 'icon';
+export interface InputIconChangeEventDetail {
+    value: string;
+    event?: Event;
+}

package/dist/types/components/x-input-icon/x-input-icon.d.ts

@@ -0,0 +1,150 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { InputIconPlacement, InputIconSize, InputIconStatus, InputIconChangeEventDetail, InputIconTriggerType } from './types';
+export declare class XInputIcon {
+    el: HTMLElement;
+    /**
+     * Whether the input is disabled.
+     * @example <x-input-icon disabled></x-input-icon>
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * The selected icon name (controlled value).
+     * @example <x-input-icon value="home"></x-input-icon>
+     * @default ''
+     */
+    value: string;
+    /**
+     * The initial icon name (uncontrolled).
+     * @example <x-input-icon defaultValue="home"></x-input-icon>
+     */
+    defaultValue: string;
+    /**
+     * Placeholder text shown when no icon is selected.
+     * @example <x-input-icon placeholder="Choose an icon"></x-input-icon>
+     * @default 'Select icon'
+     */
+    placeholder: string;
+    /**
+     * Size of the input trigger: 'large' | 'middle' | 'small'.
+     * @example <x-input-icon size="large"></x-input-icon>
+     * @default 'middle'
+     */
+    size: InputIconSize;
+    /**
+     * Visual variant of the trigger: 'outlined' | 'filled' | 'borderless'.
+     * Mapped to x-select's `bordered` prop internally.
+     * @example <x-input-icon variant="borderless"></x-input-icon>
+     * @default 'outlined'
+     */
+    variant: 'outlined' | 'filled' | 'borderless';
+    /**
+     * Validation status: 'error' | 'warning'.
+     * @example <x-input-icon status="error"></x-input-icon>
+     */
+    status: InputIconStatus;
+    /**
+     * Placement of the icon picker dropdown.
+     * @example <x-input-icon placement="bottomRight"></x-input-icon>
+     * @default 'bottomLeft'
+     */
+    placement: InputIconPlacement;
+    /**
+     * The trigger type: 'input' | 'avatar' | 'button' | 'div' | 'icon'.
+     * @example <x-input-icon triggerType="avatar"></x-input-icon>
+     * @default 'input'
+     */
+    triggerType: InputIconTriggerType;
+    /**
+     * Whether to show the clear button when a value is selected.
+     * @example <x-input-icon [allowClear]="false"></x-input-icon>
+     * @default true
+     */
+    allowClear: boolean;
+    /**
+     * Whether to show the icon name as text inside the input.
+     * Set to false to display only the icon glyph.
+     * @example <x-input-icon [showName]="false"></x-input-icon>
+     * @default true
+     */
+    showName: boolean;
+    /**
+     * Whether the dropdown picker is open (controlled).
+     * @example <x-input-icon [open]="true"></x-input-icon>
+     * @default false
+     */
+    open: boolean;
+    /**
+     * The id attribute for the inner input element.
+     * Useful for associating a <label> element.
+     * @example <x-input-icon inputId="icon-field"></x-input-icon>
+     */
+    inputId: string;
+    /**
+     * The name attribute for the inner input (form submission).
+     * @example <x-input-icon name="menuIcon"></x-input-icon>
+     */
+    name: string;
+    /**
+     * Whether to auto-focus the input on mount.
+     * @example <x-input-icon autofocus></x-input-icon>
+     * @default false
+     */
+    autofocus: boolean;
+    focused: boolean;
+    /** Current search text typed in x-select's showSearch input */
+    pickerSearchQuery: string;
+    /**
+     * Emitted when the selected icon changes.
+     * @example (xChange)="handleChange($event)"
+     */
+    xChange: EventEmitter<InputIconChangeEventDetail>;
+    /**
+     * Emitted when the dropdown open state changes.
+     * @example (xOpenChange)="handleOpenChange($event)"
+     */
+    xOpenChange: EventEmitter<boolean>;
+    /**
+     * Emitted when the input loses focus.
+     * @example (xBlur)="handleBlur($event)"
+     */
+    xBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input gains focus.
+     * @example (xFocus)="handleFocus($event)"
+     */
+    xFocus: EventEmitter<FocusEvent>;
+    private wrapperRef;
+    private inputRef;
+    private portalInstance;
+    /** Persistent reference to the dropdown content element for live searchQuery updates */
+    private dropdownContentEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    openChanged(newValue: boolean): void;
+    handleWindowClick(ev: MouseEvent): void;
+    handleKeydown(ev: KeyboardEvent): void;
+    setFocus(): Promise<void>;
+    setBlur(): Promise<void>;
+    /** Handle search text typed in x-select → propagate to dropdown content */
+    private handleSearch;
+    /**
+     * Wrapper click handler — toggles the icon picker portal open/closed.
+     * Click when closed → opens portal.
+     * Click when open  → closes portal (toggle behavior).
+     */
+    private handleWrapperClick;
+    private openDropdown;
+    private closeDropdown;
+    private handleIconSelect;
+    private handleClear;
+    private handleInputFocus;
+    private handleInputBlur;
+    private getWrapperEl;
+    private createOrUpdatePortal;
+    private destroyPortal;
+    private buildDropdownElement;
+    private renderTrigger;
+    render(): any;
+}

package/dist/types/components/x-input-number/x-input-number.d.ts

@@ -154,6 +154,10 @@ export declare class XInputNumber {
      * <x-input-number suffix="kg"></x-input-number>
      */
     suffix?: string;
+    /**
+     * Currency code for formatting (e.g. 'VND', 'USD')
+     */
+    currency?: string;
     /**
      * Current value
      * @example
@@ -309,6 +313,7 @@ export declare class XInputNumber {
      * @param e - Input event.
      * @returns void
      */
+    private formatOnType;
     private handleInput;
     /**
      * Handle input focus.

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

@@ -8,7 +8,7 @@ export declare class XLayout implements ComponentInterface {
      * Whether the layout is fixed in position.
      * @default true
      * @example
-      * <x-layout fixed="true">
+     * <x-layout fixed="true">
      *   <x-sider></x-sider>
      * </x-layout>
      */
@@ -26,6 +26,7 @@ export declare class XLayout implements ComponentInterface {
      * </x-layout>
      */
     hasSiderProp: boolean;
+    watchHasSiderProp(newValue: boolean): void;
     /**
      * ResizeObserver instance.
      */

package/dist/types/components/x-layout-admin/x-layout-admin.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XLayoutAdmin {
+    /**
+     * Initial collapsed state of the sider.
+     */
+    collapsed: boolean;
+    /**
+     * Sider width in pixels when expanded.
+     */
+    siderWidth: number;
+    /**
+     * Sider width in pixels when collapsed.
+     */
+    siderCollapsedWidth: number;
+    /**
+     * Event emitted when collapse state changes.
+     */
+    xCollapse: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    private toggleCollapse;
+    render(): any;
+}

package/dist/types/components/x-layout-detail/x-layout-detail.d.ts

@@ -0,0 +1,86 @@
+export type LayoutType = 'horizontal' | 'vertical';
+export type AlignType = 'left' | 'center' | 'right';
+export interface FieldSchema {
+    /** Display label for the field. If not provided, converts key to Title Case */
+    label?: string;
+    /** Number of columns the field should span */
+    colSpan?: number;
+    /** Alignment of content within the item */
+    align?: AlignType;
+    /** Function to format the value before rendering */
+    formatter?: (value: any, data: any) => string | any;
+    /** Whether to hide the field. Can be a boolean or a function */
+    hidden?: boolean | ((value: any, data: any) => boolean);
+    /** If true, renders a slot with the key name for custom content */
+    slot?: boolean;
+    /** Text to show in a tooltip next to the label (Requires x-tooltip or similar, or basic title) */
+    tooltip?: string;
+    /** Suffix text/element to append to the value */
+    suffix?: string;
+    /** Prefix text/element to prepend to the value */
+    prefix?: string;
+    /** Custom CSS styles for the label */
+    labelStyle?: {
+        [key: string]: string | number;
+    };
+    /** Custom CSS styles for the value */
+    valueStyle?: {
+        [key: string]: string | number;
+    };
+    /** Custom class for the item container */
+    className?: string;
+}
+export interface DetailConfig {
+    /** Layout direction of the detail items (default: 'horizontal') */
+    layout?: LayoutType;
+    /** Number of grid columns (default: 3) */
+    columns?: number;
+    /** Gap between items in pixels (default: 16) */
+    gap?: number;
+    /** Fixed width for labels in horizontal layout (default: 150px) */
+    labelWidth?: string;
+    /** Default alignment for all items (default: 'left') */
+    align?: AlignType;
+    /** Whether to show a colon after labels (default: true) */
+    colon?: boolean;
+    /** Map of field keys to their schema definitions */
+    fields?: Record<string, FieldSchema>;
+}
+export declare class XLayoutDetail {
+    el: HTMLElement;
+    /**
+     * Title of the detail section
+     */
+    detailTitle?: string;
+    /**
+     * Custom color for the title
+     */
+    titleColor?: string;
+    /**
+     * Border around the container
+     */
+    bordered: boolean;
+    /**
+     * Data as a plain object from backend { key: value }
+     */
+    data: Record<string, any> | string;
+    /**
+     * UI Configuration (Schema).
+     * The 'fields' property defines which keys to display and in what order.
+     */
+    config: DetailConfig | string;
+    /**
+     * Auto hide fields with empty values (null, undefined, '')
+     */
+    hideEmpty: boolean;
+    /**
+     * Text to display when there is no data or no visible fields
+     */
+    emptyText: string;
+    private get parsedData();
+    private get parsedConfig();
+    private toLabel;
+    private isHidden;
+    private formatValue;
+    render(): any;
+}

package/dist/types/components/x-layout-list/types.d.ts

@@ -0,0 +1,100 @@
+/**
+ * X-Layout-List Component Types
+ *
+ * A composite layout component that combines:
+ * - x-layout (header, footer, sider, content)
+ * - x-menu (sider navigation)
+ * - x-breadcrumb (content header)
+ * - x-list (content list)
+ * - x-pagination (list pagination)
+ */
+/**
+ * A single item in the sidebar menu.
+ */
+export interface LayoutListMenuItem {
+    /** Unique key for this menu item */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Optional icon name (x-icon) */
+    icon?: string;
+    /** Optional URL for navigation */
+    href?: string;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Optional submenu children */
+    children?: LayoutListMenuItem[];
+}
+/**
+ * A single breadcrumb segment.
+ */
+export interface LayoutListBreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Optional href for navigation */
+    href?: string;
+}
+/**
+ * Configuration for the page header bar.
+ */
+export interface LayoutListHeaderConfig {
+    /** Page/application title shown in header */
+    title?: string;
+    /** Show a sticky header. @default true */
+    sticky?: boolean;
+    /** Height of header in px. @default 64 */
+    height?: number;
+}
+/**
+ * Configuration for the page footer bar.
+ */
+export interface LayoutListFooterConfig {
+    /** Footer text or copyright label */
+    text?: string;
+    /** Show footer. @default true */
+    show?: boolean;
+}
+/**
+ * Configuration for the sidebar navigation.
+ */
+export interface LayoutListSiderConfig {
+    /** Show the sider. @default true */
+    show?: boolean;
+    /** Width in px when expanded. @default 220 */
+    width?: number;
+    /** Width in px when collapsed. @default 80 */
+    collapsedWidth?: number;
+    /** Start collapsed. @default false */
+    defaultCollapsed?: boolean;
+    /** Menu theme. @default 'light' */
+    theme?: 'light' | 'dark';
+    /** Title displayed above the menu */
+    title?: string;
+    /** Logo URL displayed above the menu */
+    logo?: string;
+}
+/**
+ * Configuration for the content area list.
+ */
+export interface LayoutListContentConfig {
+    /** Breadcrumb items shown above the list */
+    breadcrumbs?: LayoutListBreadcrumbItem[];
+    /** Content/page title shown above the list */
+    title?: string;
+    /** Show loading state in list. @default false */
+    loading?: boolean;
+}
+/**
+ * Event detail when page changes.
+ */
+export interface LayoutListPageChangeDetail {
+    current: number;
+    pageSize: number;
+}
+/**
+ * Event detail when menu item is selected.
+ */
+export interface LayoutListMenuSelectDetail {
+    key: string;
+    item: LayoutListMenuItem;
+}

package/dist/types/components/x-layout-list/x-layout-list.d.ts

@@ -0,0 +1,107 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { LayoutListMenuItem, LayoutListHeaderConfig, LayoutListFooterConfig, LayoutListSiderConfig, LayoutListContentConfig, LayoutListPageChangeDetail, LayoutListMenuSelectDetail } from './types';
+/**
+ * A full-page layout component combining header, footer, collapsible sider menu,
+ * breadcrumb, content list, and pagination.
+ *
+ * Works as a shell — you slot your own list items into the content area.
+ *
+ * @example
+ * <x-layout-list
+ *   header-config={{ title: 'My App' }}
+ *   menu-items={[{ key: 'home', label: 'Home', icon: 'home' }]}
+ *   total={100}
+ *   page-size={10}
+ *   current={1}
+ * >
+ *   <x-list-item slot="list-items">Item 1</x-list-item>
+ * </x-layout-list>
+ */
+export declare class XLayoutList {
+    /**
+     * Header configuration object (title, sticky, height).
+     */
+    headerConfig: LayoutListHeaderConfig;
+    /**
+     * Footer configuration object (text, show).
+     */
+    footerConfig: LayoutListFooterConfig;
+    /**
+     * Sider (sidebar menu) configuration object.
+     */
+    siderConfig: LayoutListSiderConfig;
+    /**
+     * Array of menu items to render in the sider.
+     * @example
+     * [{ key: 'home', label: 'Home', icon: 'home' }]
+     */
+    menuItems: LayoutListMenuItem[];
+    /**
+     * Currently selected menu key (controlled).
+     */
+    selectedMenuKey?: string;
+    /**
+     * Currently expanded submenu keys (controlled).
+     */
+    openMenuKeys?: string[];
+    /**
+     * Content configuration object (breadcrumbs, title, loading).
+     */
+    contentConfig: LayoutListContentConfig;
+    /**
+     * Total number of items in the list.
+     */
+    total: number;
+    /**
+     * Current page number (controlled).
+     */
+    current: number;
+    /**
+     * Number of items per page.
+     */
+    pageSize: number;
+    /**
+     * Whether to show page size changer.
+     */
+    showSizeChanger?: boolean;
+    /**
+     * Options for page size selector.
+     */
+    pageSizeOptions: number[];
+    /**
+     * Whether to hide pagination when there is only one page.
+     */
+    hideOnSinglePage: boolean;
+    collapsed: boolean;
+    /**
+     * Emitted when a menu item is clicked/selected.
+     * @example
+     * <x-layout-list (xMenuSelect)="onMenuSelect($event)">
+     */
+    xMenuSelect: EventEmitter<LayoutListMenuSelectDetail>;
+    /**
+     * Emitted when page or page size changes.
+     * @example
+     * <x-layout-list (xPageChange)="onPageChange($event)">
+     */
+    xPageChange: EventEmitter<LayoutListPageChangeDetail>;
+    componentWillLoad(): void;
+    onSiderConfigChange(): void;
+    private get header();
+    private get footer();
+    private get sider();
+    private get content();
+    private handleCollapseToggle;
+    private handleMenuSelect;
+    private handlePageChange;
+    private findMenuItem;
+    private renderHeader;
+    private renderSiderLogo;
+    private renderMenuItems;
+    private renderSider;
+    private renderBreadcrumb;
+    private renderToolbar;
+    private renderPagination;
+    private renderFooter;
+    render(): any;
+}