@sekiui/elements 0.0.61 → 0.0.63

package/dist/types/components/data-table/interfaces.d.ts

@@ -0,0 +1,208 @@
+/**
+ * Column definition for the data table
+ */
+export interface ColumnDef {
+    /** Data property key */
+    field: string;
+    /** Display label in header */
+    header: string;
+    /** Initial width in pixels */
+    width?: number;
+    /** Minimum width when resizing (default: 50) */
+    minWidth?: number;
+    /** Enable sorting on this column */
+    sortable?: boolean;
+    /** Enable filtering on this column */
+    filterable?: boolean;
+    /** Type of filter UI to display */
+    filterType?: 'text' | 'select' | 'number' | 'date';
+    /** Options for select filter type */
+    filterOptions?: string[];
+    /** Enable column resizing */
+    resizable?: boolean;
+    /** Pin column to left or right side */
+    pinned?: 'left' | 'right';
+    /** Initially hidden */
+    hidden?: boolean;
+    /** Text alignment in cells */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Internal column state (runtime state)
+ */
+export interface ColumnState extends ColumnDef {
+    /** Current width (may differ from initial) */
+    currentWidth: number;
+    /** Current visibility state */
+    visible: boolean;
+    /** Current order index */
+    orderIndex: number;
+}
+/**
+ * Sort state
+ */
+export interface SortState {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Filter value types
+ */
+export type FilterValue = string | string[] | {
+    min?: number;
+    max?: number;
+} | {
+    start?: string;
+    end?: string;
+};
+/**
+ * Request object passed to fetchData callback
+ */
+export interface FetchRequest {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Rows per page */
+    pageSize: number;
+    /** Current sort state */
+    sort?: SortState;
+    /** Active filters by column field */
+    filters: Record<string, FilterValue>;
+    /** Global search term */
+    search?: string;
+}
+/**
+ * Response object returned from fetchData callback
+ */
+export interface FetchResponse {
+    /** Array of row data objects */
+    rows: Record<string, unknown>[];
+    /** Total row count for pagination */
+    totalRows: number;
+}
+/**
+ * Fetch data callback function type
+ */
+export type FetchDataCallback = (request: FetchRequest) => Promise<FetchResponse>;
+/**
+ * Render expanded row callback function type
+ */
+export type RenderExpandedRowCallback = (row: Record<string, unknown>) => string;
+/**
+ * Cell formatter function type
+ */
+export type CellFormatter = (value: unknown, row: Record<string, unknown>) => string;
+/**
+ * Selection change event detail
+ */
+export interface SelectionChangeDetail {
+    /** Array of selected row keys */
+    selected: string[];
+    /** Array of selected row objects */
+    rows: Record<string, unknown>[];
+}
+/**
+ * Row expand event detail
+ */
+export interface RowExpandDetail {
+    /** Row key */
+    rowId: string;
+    /** Whether row is now expanded */
+    expanded: boolean;
+    /** Row data object */
+    row: Record<string, unknown>;
+}
+/**
+ * Row click event detail
+ */
+export interface RowClickDetail {
+    /** Row key */
+    rowId: string;
+    /** Row data object */
+    row: Record<string, unknown>;
+}
+/**
+ * Column resize event detail
+ */
+export interface ColumnResizeDetail {
+    /** Column field */
+    field: string;
+    /** New width in pixels */
+    width: number;
+}
+/**
+ * Column reorder event detail
+ */
+export interface ColumnReorderDetail {
+    /** New column order (array of field names) */
+    columns: string[];
+}
+/**
+ * Columns change event detail
+ */
+export interface ColumnsChangeDetail {
+    /** Updated column states */
+    columns: ColumnState[];
+}
+/**
+ * Sort change event detail
+ */
+export interface SortChangeDetail {
+    /** Column field */
+    field: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc';
+}
+/**
+ * Filter change event detail
+ */
+export interface FilterChangeDetail {
+    /** All active filters */
+    filters: Record<string, FilterValue>;
+}
+/**
+ * Page change event detail
+ */
+export interface PageChangeDetail {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Page size */
+    pageSize: number;
+}
+/**
+ * Text filter operators
+ */
+export type TextFilterOperator = 'contains' | 'equals' | 'startsWith' | 'endsWith';
+/**
+ * Text filter value with operator
+ */
+export interface TextFilterValue {
+    operator: TextFilterOperator;
+    value: string;
+}
+/**
+ * Internal table state
+ */
+export interface TableState {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Rows per page */
+    pageSize: number;
+    /** Current sort */
+    sort?: SortState;
+    /** Active filters */
+    filters: Record<string, FilterValue>;
+    /** Global search term */
+    search: string;
+    /** Selected row keys */
+    selectedKeys: Set<string>;
+    /** Expanded row keys */
+    expandedKeys: Set<string>;
+    /** Column states */
+    columns: ColumnState[];
+    /** Current rows */
+    rows: Record<string, unknown>[];
+    /** Total row count */
+    totalRows: number;
+    /** Loading state */
+    loading: boolean;
+}

package/dist/types/components/data-table/seki-data-table.d.ts

@@ -0,0 +1,125 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ColumnDef, FilterValue, FetchDataCallback, RenderExpandedRowCallback, SelectionChangeDetail, RowExpandDetail, RowClickDetail, ColumnResizeDetail, ColumnReorderDetail, ColumnsChangeDetail, SortChangeDetail, FilterChangeDetail, PageChangeDetail } from './interfaces';
+export declare class SekiDataTable {
+    el: HTMLElement;
+    /** Column definitions (JSON array) */
+    columns: string | ColumnDef[];
+    /** Field that uniquely identifies each row */
+    rowKey: string;
+    /** Enable row selection with checkboxes */
+    selectable: boolean;
+    /** Enable expandable row details */
+    expandable: boolean;
+    /** Allow multiple rows expanded at once */
+    multiExpand: boolean;
+    /** Show global search input */
+    searchable: boolean;
+    /** Search input placeholder */
+    searchPlaceholder: string;
+    /** Search debounce delay in ms */
+    searchDebounce: number;
+    /** Fields to include in global search */
+    searchFields: string | string[];
+    /** Show column visibility picker */
+    columnPicker: boolean;
+    /** Rows per page */
+    pageSize: number;
+    /** Page size dropdown options */
+    pageSizeOptions: string | number[];
+    /** Enable virtualized rendering */
+    virtualScroll: boolean;
+    /** Fixed row height for virtualization */
+    rowHeight: number;
+    /** Buffer rows above/below viewport */
+    bufferSize: number;
+    /** Show loading state */
+    loading: boolean;
+    /** Message when no data */
+    emptyMessage: string;
+    private state;
+    private searchInputValue;
+    /** Virtual scroll state */
+    private virtualScrollState;
+    /** Viewport height for virtual scroll */
+    private viewportHeight;
+    /** Emitted when row selection changes */
+    selectionChange: EventEmitter<SelectionChangeDetail>;
+    /** Emitted when a row is expanded/collapsed */
+    rowExpand: EventEmitter<RowExpandDetail>;
+    /** Emitted when a row is clicked */
+    rowClick: EventEmitter<RowClickDetail>;
+    /** Emitted when a column is resized */
+    columnResize: EventEmitter<ColumnResizeDetail>;
+    /** Emitted when columns are reordered */
+    columnReorder: EventEmitter<ColumnReorderDetail>;
+    /** Emitted when column visibility/order changes */
+    columnsChange: EventEmitter<ColumnsChangeDetail>;
+    /** Emitted when sort changes */
+    sortChange: EventEmitter<SortChangeDetail>;
+    /** Emitted when filters change */
+    filterChange: EventEmitter<FilterChangeDetail>;
+    /** Emitted when page/page size changes */
+    pageChange: EventEmitter<PageChangeDetail>;
+    /** Callback to fetch data */
+    fetchData?: FetchDataCallback;
+    /** Callback to render expanded row content */
+    renderExpandedRow?: RenderExpandedRowCallback;
+    private searchTimeout?;
+    private scrollContainerRef?;
+    private resizeObserver?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    columnsChanged(): void;
+    pageSizeChanged(newValue: number): void;
+    /** Get currently selected row objects */
+    getSelectedRows(): Promise<Record<string, unknown>[]>;
+    /** Get currently selected row keys */
+    getSelectedKeys(): Promise<string[]>;
+    /** Select rows by keys */
+    selectRows(keys: string[]): Promise<void>;
+    /** Select all rows on current page */
+    selectAll(): Promise<void>;
+    /** Clear all selections */
+    clearSelection(): Promise<void>;
+    /** Set a filter value */
+    setFilter(field: string, value: FilterValue): Promise<void>;
+    /** Clear a specific filter */
+    clearFilter(field: string): Promise<void>;
+    /** Clear all filters */
+    clearAllFilters(): Promise<void>;
+    /** Get current filter state */
+    getFilters(): Promise<Record<string, FilterValue>>;
+    /** Refresh data */
+    refresh(): Promise<void>;
+    private parseColumns;
+    private parsePageSizeOptions;
+    private initializeColumns;
+    private updateState;
+    private updateSelection;
+    private setupVirtualScroll;
+    private cleanupVirtualScroll;
+    private handleScroll;
+    private updateVirtualScrollState;
+    private getVirtualizedRows;
+    private loadData;
+    private handleSort;
+    private handlePageChange;
+    private handlePageSizeChange;
+    private handleSearchInput;
+    private handleClearSearch;
+    private handleRowSelect;
+    private handleSelectAll;
+    private handleRowExpand;
+    private handleRowClick;
+    private handleColumnResize;
+    private getVisibleColumns;
+    private getTotalPages;
+    private isAllSelected;
+    private isSomeSelected;
+    render(): any;
+    private resizeState;
+    private startResize;
+    private onResize;
+    private stopResize;
+}

package/dist/types/components/data-table/utils/virtual-scroll.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Virtual scroll utility for data table
+ * Calculates which rows should be rendered based on scroll position
+ */
+export interface VirtualScrollConfig {
+    /** Total number of rows */
+    totalRows: number;
+    /** Height of each row in pixels */
+    rowHeight: number;
+    /** Height of the viewport in pixels */
+    viewportHeight: number;
+    /** Current scroll position */
+    scrollTop: number;
+    /** Number of rows to render above/below visible area */
+    bufferSize: number;
+}
+export interface VirtualScrollResult {
+    /** Index of first row to render */
+    startIndex: number;
+    /** Index of last row to render (exclusive) */
+    endIndex: number;
+    /** Offset from top for the first rendered row */
+    offsetTop: number;
+    /** Total height of all rows (for scroll container) */
+    totalHeight: number;
+    /** Number of visible rows (not including buffer) */
+    visibleCount: number;
+}
+/**
+ * Calculate virtual scroll parameters
+ */
+export declare function calculateVirtualScroll(config: VirtualScrollConfig): VirtualScrollResult;
+/**
+ * Check if virtualization should be used based on row count
+ * Small datasets don't need virtualization
+ */
+export declare function shouldVirtualize(totalRows: number, threshold?: number): boolean;

package/dist/types/components/date-picker/seki-date-picker.d.ts

@@ -0,0 +1,109 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type DatePickerMode = 'single' | 'range';
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+/**
+ * seki-date-picker: A date picker component with popover calendar
+ *
+ * @component DatePicker
+ * @example
+ * <seki-date-picker placeholder="Pick a date"></seki-date-picker>
+ * <seki-date-picker mode="range" placeholder="Pick a date range"></seki-date-picker>
+ */
+export declare class SekiDatePicker {
+    el: HTMLElement;
+    /**
+     * Selection mode: single date or date range
+     * @default 'single'
+     */
+    mode: DatePickerMode;
+    /**
+     * Currently selected date (for single mode)
+     */
+    value?: Date | string;
+    /**
+     * Start of date range (for range mode)
+     */
+    rangeFrom?: Date | string;
+    /**
+     * End of date range (for range mode)
+     */
+    rangeTo?: Date | string;
+    /**
+     * Placeholder text when no date is selected
+     */
+    placeholder: string;
+    /**
+     * Format string for displaying the date
+     * @default 'PPP'
+     */
+    displayFormat: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date | string;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date | string;
+    /**
+     * Whether the date picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Form field name
+     */
+    name?: string;
+    /**
+     * Whether the field is required
+     */
+    required: boolean;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * Whether the popover is open
+     */
+    isOpen: boolean;
+    /**
+     * Emitted when a date is selected
+     */
+    sekiChange: EventEmitter<Date | DateRange>;
+    /**
+     * Emitted when the popover opens
+     */
+    sekiOpen: EventEmitter<void>;
+    /**
+     * Emitted when the popover closes
+     */
+    sekiClose: EventEmitter<void>;
+    private triggerRef?;
+    private popoverRef?;
+    private internals?;
+    componentWillLoad(): void;
+    updateFormValue(): void;
+    private parseDate;
+    private formatDisplayValue;
+    private handleTriggerClick;
+    private positionPopover;
+    private handleDateSelect;
+    private handleRangeSelect;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleDocumentClick(event: MouseEvent): void;
+    /**
+     * Open the date picker popover
+     */
+    open(): Promise<void>;
+    /**
+     * Close the date picker popover
+     */
+    close(): Promise<void>;
+    /**
+     * Toggle the date picker popover
+     */
+    toggle(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-close.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Dialog close button
+ *
+ * @slot - Custom close button content (defaults to X icon)
+ *
+ * @part close - The close button
+ */
+export declare class SekiDialogClose {
+    closeDialog: EventEmitter<void>;
+    handleClick(): void;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-content.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Dialog content panel
+ *
+ * @slot - The dialog content
+ *
+ * @part content - The content container
+ */
+export declare class SekiDialogContent {
+    el: HTMLElement;
+    private contentRef?;
+    private previousActiveElement?;
+    /**
+     * Whether pressing Escape closes the dialog
+     */
+    closeOnEscape: boolean;
+    _isOpen: boolean;
+    closeDialog: EventEmitter<void>;
+    private getContext;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-description.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Dialog description
+ *
+ * @slot - The description text
+ *
+ * @part description - The description element
+ */
+export declare class SekiDialogDescription {
+    el: HTMLElement;
+    private getContext;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-footer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dialog footer container
+ *
+ * @slot - Action buttons
+ *
+ * @part footer - The footer container
+ */
+export declare class SekiDialogFooter {
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-header.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dialog header container
+ *
+ * @slot - Title and description
+ *
+ * @part header - The header container
+ */
+export declare class SekiDialogHeader {
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-overlay.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Dialog overlay (backdrop)
+ *
+ * @part overlay - The overlay element
+ */
+export declare class SekiDialogOverlay {
+    el: HTMLElement;
+    /**
+     * Whether clicking the overlay closes the dialog
+     */
+    closeOnClick: boolean;
+    _isOpen: boolean;
+    closeDialog: EventEmitter<void>;
+    private getContext;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-title.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Dialog title
+ *
+ * @slot - The title text
+ *
+ * @part title - The title element
+ */
+export declare class SekiDialogTitle {
+    el: HTMLElement;
+    private getContext;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog-trigger.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Dialog trigger button
+ *
+ * @slot - The trigger content
+ *
+ * @part trigger - The trigger wrapper
+ */
+export declare class SekiDialogTrigger {
+    el: HTMLElement;
+    triggerClick: EventEmitter<void>;
+    handleClick(): void;
+    render(): any;
+}

package/dist/types/components/dialog/seki-dialog.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Context interface for Dialog component
+ */
+export interface DialogContext {
+    isOpen: boolean;
+    modal: boolean;
+    titleId: string;
+    descriptionId: string;
+    open: () => Promise<void>;
+    close: () => Promise<void>;
+}
+/**
+ * Dialog root component for modal dialogs
+ *
+ * @slot - Dialog trigger, overlay, and content
+ *
+ * @part dialog - The main container
+ */
+export declare class SekiDialog {
+    el: HTMLElement;
+    private static instanceCount;
+    private instanceId;
+    /**
+     * Controlled open state
+     */
+    open: boolean;
+    /**
+     * Default open state
+     */
+    defaultOpen: boolean;
+    /**
+     * Whether the dialog is modal (traps focus, blocks scroll)
+     */
+    modal: boolean;
+    /**
+     * Internal state for open
+     */
+    _isOpen: boolean;
+    /**
+     * Emitted when open state changes
+     */
+    sekiOpenChange: EventEmitter<boolean>;
+    constructor();
+    componentWillLoad(): void;
+    private get titleId();
+    private get descriptionId();
+    /**
+     * Opens the dialog
+     */
+    openDialog(): Promise<void>;
+    /**
+     * Closes the dialog
+     */
+    closeDialog(): Promise<void>;
+    handleTriggerClick(): void;
+    handleCloseRequest(): void;
+    private getContext;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/dropdown-menu/seki-dropdown-menu-checkbox.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Dropdown Menu checkbox item
+ *
+ * @slot - Item content
+ *
+ * @part item - The item container
+ * @part indicator - The checkbox indicator
+ */
+export declare class SekiDropdownMenuCheckbox {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled: boolean;
+    _checked: boolean;
+    watchChecked(newValue: boolean): void;
+    /**
+     * Emitted when the checked state changes
+     */
+    checkedChange: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}