@dodlhuat/basix 1.2.7 → 1.2.8

package/js/modal.d.ts

@@ -0,0 +1,28 @@
+type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
+interface ModalOptions {
+    content: string;
+    header?: string;
+    footer?: string;
+    closeable?: boolean;
+    type?: ModalType;
+}
+declare class Modal {
+    private content;
+    private readonly header?;
+    private readonly footer?;
+    private readonly closeable;
+    private readonly type;
+    private template;
+    private modalWrapper;
+    constructor(options: ModalOptions);
+    constructor(content: string, header?: string, footer?: string, closeable?: boolean, type?: ModalType);
+    show(): void;
+    hide(): void;
+    private handleEscape;
+    private handleBackgroundClick;
+    private buildTemplate;
+    updateContent(content: string): void;
+    isVisible(): boolean;
+    destroy(): void;
+}
+export { Modal, type ModalOptions, type ModalType };

package/js/popover.d.ts

@@ -0,0 +1,46 @@
+import type { Placement } from './position.js';
+type PopoverPlacement = Placement | 'auto';
+type PopoverAlign = 'start' | 'center' | 'end';
+type PopoverTrigger = 'click' | 'hover';
+interface PopoverOptions {
+    content: string;
+    placement?: PopoverPlacement;
+    align?: PopoverAlign;
+    offset?: number;
+    arrow?: boolean;
+    triggerMode?: PopoverTrigger;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    className?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare class Popover {
+    private static openPopovers;
+    private static idCounter;
+    private readonly trigger;
+    private readonly opts;
+    private popoverEl;
+    private _isOpen;
+    private hoverTimer;
+    constructor(triggerEl: HTMLElement | string, options: PopoverOptions);
+    get isOpen(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    destroy(): void;
+    static closeAll(): void;
+    /** Declarative init — reads [data-popover="#selector"] attributes */
+    static initAll(): void;
+    private buildEl;
+    private reposition;
+    private onClick;
+    private onMouseEnter;
+    private onMouseLeave;
+    private onOutsideClick;
+    private onEscape;
+    private attachTrigger;
+    private detachTrigger;
+}
+export { Popover };
+export type { PopoverOptions, PopoverPlacement, PopoverAlign, PopoverTrigger };

package/js/position.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared floating-element positioning utility.
+ * Used by Tooltip and Popover.
+ */
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+interface PositionOptions {
+    placement: Placement | 'auto';
+    align?: Align;
+    offset?: number;
+    margin?: number;
+    arrowSize?: number;
+}
+interface PositionResult {
+    left: number;
+    top: number;
+    placement: Placement;
+    arrowOffset?: number;
+}
+/** Pick the placement with the most available space, preferring bottom > top > right > left. */
+declare function bestPlacement(trigger: DOMRect, floating: DOMRect, offset: number): Placement;
+/** Flip to opposite side if preferred placement doesn't fit. */
+declare function maybeFlip(placement: Placement, trigger: DOMRect, floating: DOMRect, offset: number): Placement;
+/**
+ * Compute `left` / `top` for a `position: fixed` floating element anchored to a trigger.
+ * Handles placement resolution (auto + flip), cross-axis alignment, viewport clamping,
+ * and optional arrow offset calculation.
+ */
+declare function computePosition(trigger: DOMRect, floating: DOMRect, opts: PositionOptions): PositionResult;
+export { computePosition, bestPlacement, maybeFlip };
+export type { Placement, Align, PositionOptions, PositionResult };

package/js/push-menu.d.ts

@@ -0,0 +1,31 @@
+interface PushMenuElements {
+    navigation: HTMLElement | null;
+    content: HTMLElement | null;
+    menu: HTMLElement | null;
+    header: HTMLElement | null;
+    controlIcon: HTMLElement | null;
+    backdrop: HTMLElement | null;
+}
+declare class PushMenu {
+    private static elements;
+    private static initialized;
+    private static panelStack;
+    private static boundHandleNavigationChange;
+    static init(): void;
+    private static buildPanels;
+    private static extractSubPanels;
+    static openPanel(panel: HTMLElement): void;
+    static goBack(): void;
+    private static resetPanels;
+    private static handleNavigationChange;
+    static pushToggle(): void;
+    private static toggleClass;
+    private static clickNav;
+    private static handleBackdropClick;
+    static open(): void;
+    static close(): void;
+    static isOpen(): boolean;
+    static destroy(): void;
+    static refresh(): void;
+}
+export { PushMenu, type PushMenuElements };

package/js/range-slider.d.ts

@@ -0,0 +1,9 @@
+declare class RangeSlider {
+    private readonly input;
+    constructor(input: HTMLInputElement);
+    static initAll(selector?: string): void;
+    private update;
+    private handleInput;
+    destroy(): void;
+}
+export { RangeSlider };

package/js/scroll.d.ts

@@ -0,0 +1,15 @@
+interface ScrollOptions {
+    behavior?: ScrollBehavior;
+    offset?: number;
+    block?: ScrollLogicalPosition;
+}
+declare class Scroll {
+    static to(target: string | Element, options?: ScrollOptions): void;
+}
+declare global {
+    interface Window {
+        Scroll: typeof Scroll;
+    }
+}
+export { Scroll };
+export type { ScrollOptions };

package/js/scrollbar.d.ts

@@ -0,0 +1,48 @@
+interface ScrollbarElements {
+    viewport: HTMLElement;
+    content: HTMLElement;
+    track: HTMLElement;
+    thumb: HTMLElement;
+}
+declare class Scrollbar {
+    private static readonly instances;
+    private static activeInstance;
+    private static globalListenersInstalled;
+    private static instanceCount;
+    private static globalListenerAbortController;
+    private readonly container;
+    private readonly viewport;
+    private readonly content;
+    private readonly track;
+    private readonly thumb;
+    private readonly MIN_THUMB_HEIGHT;
+    private readonly ro;
+    private dragging;
+    private activePointerId;
+    private startPointerY;
+    private startThumbTop;
+    private readonly boundPointerMove;
+    private readonly boundPointerUp;
+    private readonly boundThumbPointerDown;
+    private readonly boundTrackClick;
+    private readonly boundViewportScroll;
+    private readonly boundUpdateThumb;
+    private readonly boundContainerWheel;
+    private constructor();
+    private getRequiredElements;
+    private getMinThumbHeight;
+    private static installGlobalListeners;
+    private attachEventListeners;
+    private updateThumb;
+    private handleThumbPointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handleTrackClick;
+    private handleContainerWheel;
+    destroy(): void;
+    static create(elementOrSelector: string | HTMLElement): Scrollbar;
+    static initAll(selector: string): Scrollbar[];
+    static initOne(elementOrSelector: string | HTMLElement): Scrollbar;
+    static getInstance(container: HTMLElement): Scrollbar | undefined;
+}
+export { Scrollbar, ScrollbarElements };

package/js/select.d.ts

@@ -0,0 +1,16 @@
+declare class Select {
+    private readonly element;
+    private readonly isMultiselect;
+    private readonly dropdown;
+    private readonly documentClickHandler;
+    constructor(elementOrSelector: string | HTMLSelectElement);
+    destroy(): void;
+    value(): string | string[] | undefined;
+    static init(elementOrSelector: string | HTMLSelectElement): boolean | null;
+    private static initElement;
+    private static closeAllDropdowns;
+    private static handleMultiSelect;
+    private static handleSingleSelect;
+    private static transformSelect;
+}
+export { Select };

package/js/sidebar-nav.d.ts

@@ -0,0 +1,22 @@
+interface SidebarNavOptions {
+    /** Selector for the toggle button. Default: '.sidebar-toggle' */
+    toggleSelector?: string;
+    /** Breakpoint (px) above which the sidebar is always visible. Default: 768 */
+    breakpoint?: number;
+}
+declare class SidebarNav {
+    private nav;
+    private backdrop;
+    private toggleBtn;
+    private opts;
+    private _onToggle;
+    private _onBackdrop;
+    private _onResize;
+    constructor(containerOrSelector: string | HTMLElement, options?: SidebarNavOptions);
+    open(): void;
+    close(): void;
+    toggle(): void;
+    isOpen(): boolean;
+    destroy(): void;
+}
+export { SidebarNav, SidebarNavOptions };

package/js/stepper.d.ts

@@ -0,0 +1,26 @@
+interface StepperOptions {
+    defaultStep?: number;
+    clickable?: boolean;
+    onChange?: (current: number, previous: number) => void;
+}
+declare class Stepper {
+    private container;
+    private steps;
+    private connectors;
+    private current;
+    private readonly onChange?;
+    private abortController;
+    constructor(elementOrSelector: string | HTMLElement, options?: StepperOptions);
+    private render;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    setError(index: number): void;
+    clearError(index: number): void;
+    getStep(): number;
+    getStepCount(): number;
+    isFirst(): boolean;
+    isLast(): boolean;
+    destroy(): void;
+}
+export { Stepper, type StepperOptions };

package/js/table.d.ts

@@ -0,0 +1,98 @@
+interface TableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+}
+interface TableRow {
+    [key: string]: string | number | boolean;
+}
+interface TableOptions {
+    data?: TableRow[];
+    columns?: TableColumn[];
+    pageSize?: number;
+}
+declare class Table {
+    private container;
+    private data;
+    private columns;
+    private pageSize;
+    private currentPage;
+    private sortColumn;
+    private sortDirection;
+    private filterText;
+    private tableBody;
+    private tableHeader;
+    private paginationContainer;
+    private abortController;
+    constructor(elementOrSelector: string | HTMLElement, options?: TableOptions);
+    /**
+     * Parses an existing HTML table in the DOM to extract data and columns
+     */
+    private parseTableFromDOM;
+    /**
+     * Initializes the table by rendering controls, structure, and content
+     */
+    private init;
+    /**
+     * Renders the search and page size controls
+     */
+    private renderControls;
+    /**
+     * Creates the table structure (table, thead, tbody, pagination container)
+     */
+    private renderTableStructure;
+    /**
+     * Returns filtered and sorted data based on current state
+     */
+    private getFilteredAndSortedData;
+    /**
+     * Renders the table body, pagination, and header sort indicators
+     */
+    private render;
+    /**
+     * Renders the table body rows
+     */
+    private renderBody;
+    /**
+     * Updates the sort direction indicators in table headers
+     */
+    private updateHeaderSortIcons;
+    /**
+     * Renders pagination controls and info
+     */
+    private renderPagination;
+    /**
+     * Handles search input changes
+     */
+    private handleSearch;
+    /**
+     * Handles column header clicks for sorting
+     */
+    private handleSort;
+    /**
+     * Handles page size changes
+     */
+    private handlePageSizeChange;
+    /**
+     * Sets the current page and re-renders
+     */
+    private setPage;
+    /**
+     * Assigns a unique ID to an element, incrementing if necessary
+     */
+    private assignUniqueId;
+    /**
+     * Public API: Updates the table data and re-renders
+     */
+    setData(data: TableRow[]): void;
+    /**
+     * Public API: Updates the columns and re-renders
+     */
+    setColumns(columns: TableColumn[]): void;
+    /**
+     * Public API: Gets the current filtered and sorted data
+     */
+    getData(): TableRow[];
+    destroy(): void;
+}
+export { Table, TableRow, TableColumn, TableOptions };

package/js/tabs.d.ts

@@ -0,0 +1,57 @@
+type TabLayout = 'horizontal' | 'vertical';
+type MenuPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TabsOptions {
+    layout?: TabLayout;
+    defaultTab?: number;
+    menuPos?: MenuPosition;
+    onChange?: (index: number) => void;
+}
+declare class Tabs {
+    private container;
+    private options;
+    private tabItems;
+    private tabPanels;
+    private currentTab;
+    constructor(elementOrSelector: string | HTMLElement, options?: TabsOptions);
+    /**
+     * Initializes the tabs component
+     */
+    private init;
+    /**
+     * Binds click events to tab items
+     */
+    private bindEvents;
+    /**
+     * Handles keyboard navigation (Arrow keys, Home, End)
+     */
+    private handleKeyboardNavigation;
+    /**
+     * Activates a tab by index
+     */
+    private activateTab;
+    /**
+     * Public API: Programmatically activate a tab
+     */
+    goToTab(index: number): void;
+    /**
+     * Public API: Get the currently active tab index
+     */
+    getCurrentTab(): number;
+    /**
+     * Public API: Get the total number of tabs
+     */
+    getTabCount(): number;
+    /**
+     * Public API: Enable a tab
+     */
+    enableTab(index: number): void;
+    /**
+     * Public API: Disable a tab
+     */
+    disableTab(index: number): void;
+    /**
+     * Public API: Destroy the tabs instance and clean up
+     */
+    destroy(): void;
+}
+export { Tabs };

package/js/theme.d.ts

@@ -0,0 +1,65 @@
+type ThemeMode = 'light' | 'dark';
+declare class Theme {
+    private static readonly STORAGE_KEY;
+    private static root;
+    private static elements;
+    private static mediaQuery;
+    /**
+     * Initializes the theme system with toggle functionality and system preference detection
+     */
+    static init(): void;
+    /**
+     * Safely retrieves the saved theme from localStorage
+     */
+    private static getSavedTheme;
+    /**
+     * Safely saves the theme to localStorage
+     */
+    private static saveTheme;
+    /**
+     * Gets the system-preferred theme
+     */
+    private static getSystemTheme;
+    /**
+     * Gets the current active theme
+     */
+    private static getCurrentTheme;
+    /**
+     * Applies a theme to the document
+     */
+    private static applyTheme;
+    /**
+     * Toggles between light and dark theme
+     */
+    private static toggleTheme;
+    /**
+     * Binds click event to toggle button
+     */
+    private static bindToggleClick;
+    /**
+     * Binds keyboard shortcut (Ctrl/Cmd+J) for theme toggle
+     */
+    private static bindKeyboardShortcut;
+    /**
+     * Binds listener for system theme changes
+     * Only applies if user hasn't explicitly saved a preference
+     */
+    private static bindSystemThemeChange;
+    /**
+     * Public API: Get the current theme
+     */
+    static getTheme(): ThemeMode;
+    /**
+     * Public API: Set the theme programmatically
+     */
+    static setTheme(theme: ThemeMode): void;
+    /**
+     * Public API: Reset to system preference
+     */
+    static resetToSystem(): void;
+    /**
+     * Public API: Check if user has a saved preference
+     */
+    static hasSavedPreference(): boolean;
+}
+export { Theme };

package/js/timepicker.d.ts

@@ -0,0 +1,37 @@
+interface TimeSpan {
+    start: string;
+    end: string;
+}
+interface TimeSpanPickerOptions {
+    onChange?: (start: string, end: string) => void;
+    defaultStart?: string;
+    defaultEnd?: string;
+    fromString?: string;
+    toString?: string;
+}
+declare class TimeSpanPicker {
+    private container;
+    private startTimeInput;
+    private endTimeInput;
+    private onChange?;
+    private readonly uid;
+    private fromString;
+    private toString;
+    constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions);
+    private queryInput;
+    private render;
+    private readonly handleStartChange;
+    private readonly handleEndChange;
+    private attachEventListeners;
+    private toMinutes;
+    private formatDuration;
+    private updateUI;
+    private handleChange;
+    getValue(): TimeSpan;
+    setValue(start: string, end: string): void;
+    reset(): void;
+    isValid(): boolean;
+    destroy(): void;
+}
+export { TimeSpanPicker };
+export type { TimeSpan, TimeSpanPickerOptions };

package/js/toast.d.ts

@@ -0,0 +1,26 @@
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+interface ToastOptions {
+    content: string;
+    header?: string;
+    type?: ToastType;
+    closeable?: boolean;
+}
+declare class Toast {
+    private readonly content;
+    private readonly header;
+    private readonly type?;
+    private readonly closeable;
+    private readonly closureIcon;
+    private readonly template;
+    private toastElement;
+    private timerId;
+    constructor(options: ToastOptions);
+    constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
+    show(ms?: number): void;
+    hide: () => void;
+    private handleClose;
+    private startTimer;
+    private buildTemplate;
+}
+export { Toast };
+export type { ToastOptions, ToastType };

package/js/tooltip.d.ts

@@ -0,0 +1,34 @@
+interface TooltipOptions {
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    offset?: number;
+    delay?: number;
+    className?: string;
+    /** Set to true when content is trusted HTML (e.g. from data-tooltip-id).
+     *  Defaults to false — content is treated as plain text and escaped. */
+    isHtml?: boolean;
+}
+declare class Tooltip {
+    private static activeTooltip;
+    private static idCounter;
+    private readonly trigger;
+    private readonly content;
+    private readonly options;
+    private tooltipElement;
+    private showTimeout;
+    private isVisible;
+    constructor(trigger: HTMLElement, content: string, options?: TooltipOptions);
+    static initializeAll(): void;
+    show(): void;
+    hide(): void;
+    private static hideActive;
+    private createTooltip;
+    private position;
+    private attachEvents;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocus;
+    private handleBlur;
+    destroy(): void;
+}
+export { Tooltip };
+export type { TooltipOptions };

package/js/tree.d.ts

@@ -0,0 +1,40 @@
+type NodeType = 'file' | 'folder';
+interface TreeOptions {
+    onSelect?: (node: TreeNode) => void;
+}
+declare class TreeNode {
+    label: string;
+    type: NodeType;
+    children: TreeNode[];
+    expanded: boolean;
+    selected: boolean;
+    element: HTMLDivElement | null;
+    childrenContainer: HTMLUListElement | null;
+    constructor(label: string, type?: NodeType, children?: TreeNode[]);
+}
+declare class TreeComponent {
+    private container;
+    private data;
+    private selectedNode;
+    private readonly options;
+    constructor(elementOrSelector: string | HTMLElement, data: TreeNode[], options?: TreeOptions);
+    private init;
+    render(): void;
+    private renderNode;
+    private createIconElement;
+    private createLabelElement;
+    private createChildrenContainer;
+    private toggleNode;
+    private expandChildren;
+    private collapseChildren;
+    selectNode(node: TreeNode): void;
+    expandAll(): void;
+    collapseAll(): void;
+    private traverseNodes;
+    destroy(): void;
+    getSelectedNode(): TreeNode | null;
+    findNodeByLabel(label: string): TreeNode | null;
+    private findNode;
+}
+export { TreeComponent, TreeNode };
+export type { NodeType, TreeOptions };

package/js/tsconfig.json

@@ -5,6 +5,7 @@
     "outDir": ".",
     "rootDir": ".",
     "strict": true,
+    "declaration": true,
     "types": [],
   },
   "include": [

package/js/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Utility functions for DOM manipulation and element handling
+ */
+interface Utils {
+    ready(fn: () => void): void;
+    value(element: HTMLElement): string;
+    text(element: HTMLElement): string;
+    attribute(element: HTMLElement, attribute: string): string | undefined;
+    isList(element: HTMLElement | NodeList): boolean;
+    isHidden(element: HTMLElement): boolean;
+}
+declare const utils: Utils;
+/**
+ * Escape a plain-text string so it is safe to inject into innerHTML.
+ * Use this whenever inserting user-controlled strings into HTML templates.
+ */
+declare function escapeHtml(text: string): string;
+/**
+ * Sanitize an HTML string by removing dangerous elements and attributes
+ * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
+ * Use this when a component intentionally accepts rich HTML from callers.
+ */
+declare function sanitizeHtml(html: string): string;
+export { utils, escapeHtml, sanitizeHtml };