@xlabs-store/core 0.0.1

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

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XCaptcha {
+    /**
+     * The label text for the captcha field.
+     */
+    label: string;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder: string;
+    /**
+     * Length of the captcha string.
+     */
+    length: number;
+    /**
+     * Whether the validation should be case sensitive.
+     */
+    caseSensitive: boolean;
+    /**
+     * Whether the captcha is required.
+     */
+    required: boolean;
+    /**
+     * Error message to display when validation fails.
+     */
+    message: string;
+    /**
+     * Alias for message prop to match form builder schemas.
+     */
+    error: string;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Current generated captcha value.
+     */
+    private captchaValue;
+    /**
+     * User input value.
+     */
+    value: string;
+    /**
+     * Current error message to display.
+     */
+    private errorMessage;
+    /**
+     * Emitted when user types in the input field.
+     */
+    xChange: EventEmitter<string>;
+    /**
+     * Emitted when validation is performed.
+     */
+    xValidate: EventEmitter<{
+        isValid: boolean;
+        message: string;
+    }>;
+    private readonly CHARACTERS;
+    componentWillLoad(): void;
+    /**
+     * Validate the current input against the generated captcha.
+     * @returns boolean
+     */
+    validate(): Promise<boolean>;
+    /**
+     * Refresh the captcha and clear input.
+     */
+    refresh(): Promise<void>;
+    /**
+     * Generate a random captcha string.
+     */
+    private generateCaptcha;
+    /**
+     * Handle input changes.
+     */
+    private handleInput;
+    render(): any;
+}

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

@@ -0,0 +1,139 @@
+export declare class XCard {
+    /**
+     * Host element reference for slot queries.
+     */
+    el: HTMLElement;
+    /**
+     * Card title (can also use slot="title").
+     * @example
+     * <x-card cardTitle="Title"></x-card>
+     */
+    cardTitle: string;
+    /**
+     * Content to show in the top-right corner of the card (can also use slot="extra").
+     * @example
+     * <x-card extra="More"></x-card>
+     */
+    extra: string;
+    /**
+     * Toggles rendering of the border around the card.
+     * @example
+     * <x-card bordered={false}></x-card>
+     */
+    bordered: boolean;
+    /**
+     * Lift up when hovering card.
+     * @example
+     * <x-card hoverable></x-card>
+     */
+    hoverable: boolean;
+    /**
+     * Shows a loading indicator while the contents of the card are being fetched.
+     * @example
+     * <x-card loading></x-card>
+     */
+    loading: boolean;
+    /**
+     * Size of card.
+     * @example
+     * <x-card size="small"></x-card>
+     */
+    size: 'default' | 'small';
+    /**
+     * The type of card (inner for nested cards).
+     * @example
+     * <x-card type="inner"></x-card>
+     */
+    type: 'default' | 'inner';
+    /**
+     * Card cover image URL (can also use slot="cover").
+     * @example
+     * <x-card cover="/cover.png"></x-card>
+     */
+    cover: string;
+    /**
+     * Track if title slot has content.
+     */
+    hasTitleSlot: boolean;
+    /**
+     * Track if extra slot has content.
+     */
+    hasExtraSlot: boolean;
+    /**
+     * Track if cover slot has content.
+     */
+    hasCoverSlot: boolean;
+    /**
+     * Track if actions slot has content.
+     */
+    hasActionsSlot: boolean;
+    /**
+     * Inspect slots before initial render.
+     * @returns void
+     * @example
+     * <x-card></x-card>
+     */
+    componentWillLoad(): void;
+    /**
+     * Detect presence of named slots.
+     *
+     * Flow:
+     * 1. Queries the shadow root (via `el`) for elements with specific `slot` attributes.
+     * 2. Updates boolean state flags (`hasTitleSlot`, `hasExtraSlot`, etc.).
+     *    - These flags control conditional rendering of card sections.
+     *
+     * @returns void
+     * @example
+     * <x-card><div slot="title">Title</div></x-card>
+     */
+    private checkSlots;
+    /**
+     * Determine whether card header should render.
+     * @returns boolean
+     * @example
+     * <x-card cardTitle="Title"></x-card>
+     */
+    private hasHead;
+    /**
+     * Render card header if content exists.
+     *
+     * Flow:
+     * 1. Checks `hasHead()` (title or extra content present).
+     * 2. If present, renders `.x-card-head` container.
+     * 3. Renders title section with prop `cardTitle` and `title` slot.
+     * 4. Renders extra section with prop `extra` and `extra` slot.
+     *
+     * @returns JSX.Element | null
+     * @example
+     * <x-card cardTitle="Title"></x-card>
+     */
+    private renderHead;
+    /**
+     * Render cover section if cover image or slot exists.
+     * @returns JSX.Element | null
+     * @example
+     * <x-card cover="/cover.png"></x-card>
+     */
+    private renderCover;
+    /**
+     * Render body content or loading skeleton.
+     * @returns JSX.Element
+     * @example
+     * <x-card loading></x-card>
+     */
+    private renderBody;
+    /**
+     * Render actions section if slot is provided.
+     * @returns JSX.Element | null
+     * @example
+     * <x-card><div slot="actions">Action</div></x-card>
+     */
+    private renderActions;
+    /**
+     * Render card structure and optional sections.
+     * @returns JSX.Element
+     * @example
+     * <x-card cardTitle="Title">Body</x-card>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,104 @@
+export declare class XCarousel {
+    /**
+     * Host element reference to count slides.
+     */
+    el: HTMLElement;
+    /**
+     * Enable autoplay rotation.
+     * @example
+     * <x-carousel autoplay></x-carousel>
+     */
+    autoplay: boolean;
+    /**
+     * Position of navigation dots.
+     * @example
+     * <x-carousel dotPosition="top"></x-carousel>
+     */
+    dotPosition: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Whether to show navigation dots.
+     * @example
+     * <x-carousel dots={false}></x-carousel>
+     */
+    dots: boolean;
+    /**
+     * Transition effect.
+     * @example
+     * <x-carousel effect="fade"></x-carousel>
+     */
+    effect: 'scrollx' | 'fade';
+    /**
+     * Active slide index.
+     */
+    activeIndex: number;
+    /**
+     * Total number of slides.
+     */
+    count: number;
+    /**
+     * Autoplay timer handle.
+     */
+    timer: any;
+    /**
+     * Initialize slide count and autoplay on load.
+     * @returns void
+     * @example
+     * <x-carousel autoplay></x-carousel>
+     */
+    componentDidLoad(): void;
+    /**
+     * Stop autoplay on disconnect.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    disconnectedCallback(): void;
+    /**
+     * Start autoplay interval.
+     * @returns void
+     * @example
+     * <x-carousel autoplay></x-carousel>
+     */
+    startTimer(): void;
+    /**
+     * Stop autoplay interval.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    stopTimer(): void;
+    /**
+     * Advance to next slide.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    next(): void;
+    /**
+     * Jump to a specific slide and reset autoplay timer.
+     * @param index - Slide index to activate.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    goTo(index: number): void;
+    /**
+     * Render carousel track and dot navigation.
+     *
+     * Flow:
+     * 1. Renders the host with classes for dot position.
+     * 2. Renders the track container.
+     *    - Applies `transform` (translateX) for 'scrollx' effect based on `activeIndex`.
+     *    - Applies `opacity` for 'fade' effect.
+     * 3. Projects slides via default slot.
+     * 4. Renders navigation dots if enabled.
+     *    - Iterates `count` times.
+     *    - Highlights the dot matching `activeIndex`.
+     *    - Binds click handler to `goTo(i)`.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-carousel><div>Slide</div></x-carousel>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,255 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import type { CascaderDropdownClassMap, CascaderDropdownStyleMap, CascaderDropdownRefCallback, CascaderMenuItemClickDetail, CascaderMenuItemHoverDetail, CascaderOption, CascaderFieldNames, CascaderExpandTrigger } from '../types';
+export declare class XCascaderDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Mapping of CSS classes applied to the dropdown's outer wrapper.
+     * Useful for conveying state like 'hidden' or 'placement'.
+     * @type {CascaderDropdownClassMap}
+     * @example
+     * <x-cascader-dropdown-content dropdownClasses={{ 'x-cascader-dropdown': true, 'hidden': false }} />
+     */
+    dropdownClasses: CascaderDropdownClassMap;
+    /**
+     * Inline CSS styles applied to the dropdown's outer wrapper.
+     * Useful for dynamic positioning or width adjustments.
+     * @type {CascaderDropdownStyleMap}
+     * @example
+     * <x-cascader-dropdown-content dropdownStyle={{ width: '240px', left: '10px' }} />
+     */
+    dropdownStyle: CascaderDropdownStyleMap;
+    /**
+     * Optional callback function to retrieve the underlying DOM element reference of the dropdown.
+     * @type {CascaderDropdownRefCallback}
+     * @example
+     * <x-cascader-dropdown-content setDropdownRef={(el) => this.myRef = el} />
+     */
+    setDropdownRef?: CascaderDropdownRefCallback;
+    /**
+     * A multi-dimensional array representing the current hierarchy of options to display.
+     * Each entry in the outer array represents a column in the cascader.
+     * @type {CascaderOption[][]}
+     * @example
+     * <x-cascader-dropdown-content activeOptions={[[{ label: 'A', value: 'a' }], [{ label: 'B', value: 'b' }]]} />
+     */
+    activeOptions: CascaderOption[][];
+    /**
+     * The list of options representing the currently selected path in the hierarchy.
+     * @type {CascaderOption[]}
+     * @example
+     * <x-cascader-dropdown-content selectedPath={[{ label: 'A', value: 'a' }]} />
+     */
+    selectedPath: CascaderOption[];
+    /**
+     * The list of options representing the path currently highlighted/hovered by the user.
+     * @type {CascaderOption[]}
+     * @example
+     * <x-cascader-dropdown-content hoveredPath={[{ label: 'A', value: 'a' }]} />
+     */
+    hoveredPath: CascaderOption[];
+    /**
+     * Whether the component is in multiple selection mode (enabling checkboxes).
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader-dropdown-content multiple={true} />
+     */
+    multiple: boolean;
+    /**
+     * Specifies which interaction (click or hover) triggers the expansion of a sub-menu.
+     * @type {CascaderExpandTrigger}
+     * @default 'click'
+     * @example
+     * <x-cascader-dropdown-content expandTrigger="hover" />
+     */
+    expandTrigger: CascaderExpandTrigger;
+    /**
+     * Custom mapping configuration for option data fields (label, value, children).
+     * @type {CascaderFieldNames}
+     * @example
+     * <x-cascader-dropdown-content fieldNames={{ label: 'name', value: 'id' }} />
+     */
+    fieldNames: CascaderFieldNames;
+    /**
+     * Content to display when no options are available in a specific column.
+     * @type {string}
+     * @default 'No data'
+     * @example
+     * <x-cascader-dropdown-content notFoundContent="Nothing here" />
+     */
+    notFoundContent: string;
+    /**
+     * Emitted when a menu item is clicked.
+     * Provides the option data and its depth in the hierarchy.
+     * @event xItemClick
+     * @example
+     * <x-cascader-dropdown-content onXItemClick={(ev) => handleItemClick(ev.detail)} />
+     */
+    xItemClick: EventEmitter<CascaderMenuItemClickDetail>;
+    /**
+     * Emitted when a menu item is hovered.
+     * This is typically used to trigger sub-menu expansion if expandTrigger is 'hover'.
+     * @event xItemHover
+     * @example
+     * <x-cascader-dropdown-content onXItemHover={(ev) => handleItemHover(ev.detail)} />
+     */
+    xItemHover: EventEmitter<CascaderMenuItemHoverDetail>;
+    /**
+     * Visible item counts per menu depth.
+     */
+    visibleCounts: number[];
+    /**
+     * Page size for incremental rendering.
+     * @example
+     * <x-cascader-dropdown-content pageSize={100}></x-cascader-dropdown-content>
+     */
+    pageSize: number;
+    /**
+     * Dropdown element reference.
+     */
+    private dropdownEl;
+    /**
+     * Stencil lifecycle: Component has loaded.
+     * Initializes visibility counts for lazy rendering.
+     */
+    componentDidLoad(): void;
+    /**
+     * WATCHER: Resets visibility counts when the available options change.
+     */
+    handleOptionsChange(): void;
+    /**
+     * Initializes the visible item counts for each column based on the pageSize.
+     * This prevents rendering thousands of DOM elements at once.
+     * @returns {void}
+     */
+    private initVisibleCounts;
+    /**
+     * Handles the scroll event on an individual menu column.
+     * Implements a threshold-based pagination/lazy rendering for long lists of options.
+     *
+     * @param {Event} e - The native scroll event.
+     * @param {number} depth - The hierarchical depth index of the column being scrolled.
+     * @returns {void}
+     */
+    private handleMenuScroll;
+    /**
+     * Stencil lifecycle: Component is removed from the DOM.
+     * Cleans up the external reference to the dropdown.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param {HTMLDivElement | null} el - Dropdown element.
+     * @returns {void}
+     */
+    private setRef;
+    /**
+     * Safe getter for an option's value based on custom `fieldNames`.
+     * @param {CascaderOption} option - The option object.
+     * @returns {string} The resolved value.
+     */
+    private getOptionValue;
+    /**
+     * Safe getter for an option's label based on custom `fieldNames`.
+     * @param {CascaderOption} option - The option object.
+     * @returns {string} The resolved label.
+     */
+    private getOptionLabel;
+    /**
+     * Safe getter for an option's children array based on custom `fieldNames`.
+     * @param {CascaderOption} option - The option object.
+     * @returns {CascaderOption[] | undefined} The resolved children array.
+     */
+    private getOptionChildren;
+    /**
+     * Determines if a specific option is part of the currently selected path.
+     * @param {CascaderOption} option - The option to check.
+     * @param {number} depth - The hierarchical level of the option.
+     * @returns {boolean} True if selected at this depth.
+     */
+    private isOptionSelected;
+    /**
+     * Determines if a specific option is currently being hovered or is part of the active path.
+     * @param {CascaderOption} option - The option to check.
+     * @param {number} depth - The hierarchical level of the option.
+     * @returns {boolean} True if active at this depth.
+     */
+    private isOptionActive;
+    /**
+     * Handles user click on a menu item.
+     * @param {CascaderOption} option - The clicked option.
+     * @param {number} depth - The menu depth.
+     * @returns {void}
+     */
+    private handleItemClick;
+    /**
+     * Handles user hover on a menu item.
+     * Only emits hover event if `expandTrigger` is set to 'hover'.
+     * @param {CascaderOption} option - The hovered option.
+     * @param {number} depth - The menu depth.
+     * @returns {void}
+     */
+    private handleItemHover;
+    /**
+     * Renders a custom checkbox icon for items in multiple selection mode.
+     * @param {boolean} checked - Current checked state of the item.
+     * @returns {JSX.Element} The rendered checkbox element.
+     */
+    private renderCheckbox;
+    /**
+     * Renders a loading spinner icon for asynchronous item loading.
+     * @returns {JSX.Element} The rendered loading icon element.
+     */
+    private renderLoadingIcon;
+    /**
+     * Renders an arrow icon indicating that a menu item has children/sub-menu.
+     * @returns {JSX.Element} The rendered expand icon element.
+     */
+    private renderExpandIcon;
+    /**
+     * Renders a single menu item (li) within a column.
+     * Handles active, selected, disabled, and loading states.
+     *
+     * @param {CascaderOption} option - The option data to render.
+     * @param {number} depth - The hierarchical level of the item.
+     * @returns {JSX.Element} The rendered list item element.
+     */
+    private renderMenuItem;
+    /**
+     * Renders a full menu column (ul) for a specific depth.
+     * Includes lazy rendering logic based on scroll position.
+     *
+     * Flow:
+     * 1. Determines the number of items to render based on `visibleCounts` (virtual scrolling/pagination).
+     * 2. Slices the options array to the visible subset.
+     * 3. Renders a `<ul>` container with a scroll listener.
+     * 4. Maps over the visible options to render `<li>` items via `renderMenuItem`.
+     *
+     * @param {CascaderOption[]} options - The list of options in this column.
+     * @param {number} depth - The hierarchical depth index.
+     * @param {boolean} isLast - Whether this is the rightmost column.
+     * @returns {JSX.Element} The rendered menu column element.
+     */
+    private renderMenu;
+    /**
+     * Renders the container for all menu columns.
+     * If no data is available, renders an empty state message.
+     * @returns {JSX.Element} The rendered menus or empty state.
+     */
+    private renderMenus;
+    /**
+     * Main render method for the dropdown content.
+     * This is typically rendered in a portal.
+     *
+     * Flow:
+     * 1. Renders a wrapper `div` with dynamic classes and styles.
+     * 2. Sets the ref for external access.
+     * 3. Calls `renderMenus` to generate the column structure.
+     *
+     * @returns {JSX.Element} The full dropdown JSX structure.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,2 @@
+export { XCascaderDropdownContent } from './cascader-dropdown-content';
+export * from './types';

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

@@ -0,0 +1,20 @@
+/**
+ * Types for Cascader Dropdown Content
+ */
+import type { CascaderOption, CascaderFieldNames, CascaderExpandTrigger } from '../types';
+export interface CascaderDropdownClassMap {
+    [key: string]: boolean;
+}
+export interface CascaderDropdownStyleMap {
+    [key: string]: string;
+}
+export type CascaderDropdownRefCallback = (el: HTMLDivElement | null) => void;
+export interface CascaderMenuItemClickDetail {
+    option: CascaderOption;
+    depth: number;
+}
+export interface CascaderMenuItemHoverDetail {
+    option: CascaderOption;
+    depth: number;
+}
+export { CascaderOption, CascaderFieldNames, CascaderExpandTrigger };