@dodlhuat/basix 1.3.5 → 1.4.0

package/js/tabs.js

@@ -1,10 +1,10 @@
-/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 class Tabs {
     container;
     options;
     tabItems;
     tabPanels;
     currentTab;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
@@ -13,11 +13,11 @@ class Tabs {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
         this.container = element;
-        const layout = options.layout || 'horizontal';
+        const layout = options.layout ?? 'horizontal';
         this.options = {
             layout,
             defaultTab: options.defaultTab ?? 0,
-            menuPos: options.menuPos || (layout === 'vertical' ? 'left' : 'top'),
+            menuPos: options.menuPos ?? (layout === 'vertical' ? 'left' : 'top'),
             onChange: options.onChange
         };
         this.currentTab = this.options.defaultTab;
@@ -25,9 +25,6 @@ class Tabs {
         this.tabPanels = this.container.querySelectorAll('.tab-panel');
         this.init();
     }
-    /**
-     * Initializes the tabs component
-     */
     init() {
         if (this.options.layout === 'vertical') {
             this.container.classList.add('tabs-vertical');
@@ -48,19 +45,17 @@ class Tabs {
         this.bindEvents();
         this.activateTab(this.options.defaultTab);
     }
-    /**
-     * Binds click events to tab items
-     */
     bindEvents() {
+        const sig = { signal: this.abortController.signal };
         this.tabItems.forEach((item, index) => {
             item.addEventListener('click', (e) => {
                 e.preventDefault();
                 this.activateTab(index);
-            });
+            }, sig);
             item.addEventListener('keydown', (e) => {
                 const keyEvent = e;
                 this.handleKeyboardNavigation(keyEvent, index);
-            });
+            }, sig);
             item.setAttribute('role', 'tab');
             item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
             item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
@@ -70,9 +65,6 @@ class Tabs {
             panel.setAttribute('aria-hidden', index === this.options.defaultTab ? 'false' : 'true');
         });
     }
-    /**
-     * Handles keyboard navigation (Arrow keys, Home, End)
-     */
     handleKeyboardNavigation(e, currentIndex) {
         let newIndex = currentIndex;
         const isVertical = this.options.layout === 'vertical';
@@ -117,9 +109,6 @@ class Tabs {
             this.tabItems[newIndex].focus();
         }
     }
-    /**
-     * Activates a tab by index
-     */
     activateTab(index) {
         if (index < 0 || index >= this.tabItems.length) {
             console.warn(`Invalid tab index: ${index}`);
@@ -145,30 +134,18 @@ class Tabs {
             this.options.onChange(index);
         }
     }
-    /**
-     * Public API: Programmatically activate a tab
-     */
     goToTab(index) {
         this.activateTab(index);
         if (this.tabItems[index]) {
             this.tabItems[index].focus();
         }
     }
-    /**
-     * Public API: Get the currently active tab index
-     */
     getCurrentTab() {
         return this.currentTab;
     }
-    /**
-     * Public API: Get the total number of tabs
-     */
     getTabCount() {
         return this.tabItems.length;
     }
-    /**
-     * Public API: Enable a tab
-     */
     enableTab(index) {
         if (index < 0 || index >= this.tabItems.length)
             return;
@@ -177,9 +154,6 @@ class Tabs {
         tab.removeAttribute('aria-disabled');
         tab.style.pointerEvents = '';
     }
-    /**
-     * Public API: Disable a tab
-     */
     disableTab(index) {
         if (index < 0 || index >= this.tabItems.length)
             return;
@@ -194,14 +168,8 @@ class Tabs {
             }
         }
     }
-    /**
-     * Public API: Destroy the tabs instance and clean up
-     */
     destroy() {
-        this.tabItems.forEach((item) => {
-            const newItem = item.cloneNode(true);
-            item.parentNode?.replaceChild(newItem, item);
-        });
+        this.abortController.abort();
         this.container.classList.remove('tabs-vertical');
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');

package/js/theme.d.ts

@@ -1,66 +1,22 @@
 type ThemeMode = 'light' | 'dark';
-/** Static class for managing light/dark theme switching with system preference and localStorage persistence. */
 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/theme.js

@@ -1,12 +1,8 @@
-/** Static class for managing light/dark theme switching with system preference and localStorage persistence. */
 class Theme {
     static STORAGE_KEY = 'theme';
     static root;
     static elements = null;
     static mediaQuery = null;
-    /**
-     * Initializes the theme system with toggle functionality and system preference detection
-     */
     static init() {
         this.root = document.documentElement;
         const toggleBtn = document.getElementById('theme-toggle');
@@ -31,9 +27,6 @@ class Theme {
         this.bindKeyboardShortcut();
         this.bindSystemThemeChange();
     }
-    /**
-     * Safely retrieves the saved theme from localStorage
-     */
     static getSavedTheme() {
         try {
             const saved = localStorage.getItem(this.STORAGE_KEY);
@@ -44,9 +37,6 @@ class Theme {
             return null;
         }
     }
-    /**
-     * Safely saves the theme to localStorage
-     */
     static saveTheme(theme) {
         try {
             localStorage.setItem(this.STORAGE_KEY, theme);
@@ -55,22 +45,13 @@ class Theme {
             console.warn('localStorage.setItem failed', e);
         }
     }
-    /**
-     * Gets the system-preferred theme
-     */
     static getSystemTheme() {
         return this.mediaQuery?.matches ? 'dark' : 'light';
     }
-    /**
-     * Gets the current active theme
-     */
     static getCurrentTheme() {
         const current = this.root.getAttribute('data-theme');
         return current === 'dark' ? 'dark' : 'light';
     }
-    /**
-     * Applies a theme to the document
-     */
     static applyTheme(theme) {
         if (!this.elements)
             return;
@@ -99,9 +80,6 @@ class Theme {
             }
         }
     }
-    /**
-     * Toggles between light and dark theme
-     */
     static toggleTheme() {
         if (!this.elements)
             return;
@@ -118,9 +96,6 @@ class Theme {
             }
         }
     }
-    /**
-     * Binds click event to toggle button
-     */
     static bindToggleClick() {
         if (!this.elements)
             return;
@@ -128,9 +103,6 @@ class Theme {
             this.toggleTheme();
         });
     }
-    /**
-     * Binds keyboard shortcut (Ctrl/Cmd+J) for theme toggle
-     */
     static bindKeyboardShortcut() {
         window.addEventListener('keydown', (ev) => {
             const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
@@ -141,10 +113,6 @@ class Theme {
             }
         });
     }
-    /**
-     * Binds listener for system theme changes
-     * Only applies if user hasn't explicitly saved a preference
-     */
     static bindSystemThemeChange() {
         if (!this.mediaQuery)
             return;
@@ -161,22 +129,13 @@ class Theme {
             this.mediaQuery.addListener(handler);
         }
     }
-    /**
-     * Public API: Get the current theme
-     */
     static getTheme() {
         return this.getCurrentTheme();
     }
-    /**
-     * Public API: Set the theme programmatically
-     */
     static setTheme(theme) {
         this.saveTheme(theme);
         this.applyTheme(theme);
     }
-    /**
-     * Public API: Reset to system preference
-     */
     static resetToSystem() {
         try {
             localStorage.removeItem(this.STORAGE_KEY);
@@ -187,9 +146,6 @@ class Theme {
             console.warn('Failed to reset theme', e);
         }
     }
-    /**
-     * Public API: Check if user has a saved preference
-     */
     static hasSavedPreference() {
         return this.getSavedTheme() !== null;
     }

package/js/timepicker.d.ts

@@ -1,17 +1,14 @@
-/** A start/end time pair as HH:MM strings. */
 interface TimeSpan {
     start: string;
     end: string;
 }
-/** Configuration options for a TimeSpanPicker instance. */
 interface TimeSpanPickerOptions {
     onChange?: (start: string, end: string) => void;
     defaultStart?: string;
     defaultEnd?: string;
     fromString?: string;
-    toString?: string;
+    toLabel?: string;
 }
-/** Interactive time-range picker with a draggable bar and dual time inputs. */
 declare class TimeSpanPicker {
     private container;
     private startTimeInput;

package/js/timepicker.js

@@ -1,4 +1,3 @@
-/** Interactive time-range picker with a draggable bar and dual time inputs. */
 class TimeSpanPicker {
     container;
     startTimeInput;
@@ -27,7 +26,7 @@ class TimeSpanPicker {
         this.onChange = options?.onChange;
         this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
         this.fromString = options?.fromString ?? 'From';
-        this.toLabel = options?.toString ?? 'To';
+        this.toLabel = options?.toLabel ?? 'To';
         this.render();
         this.startTimeInput = this.queryEl('.timespan-start');
         this.endTimeInput = this.queryEl('.timespan-end');

package/js/toast.d.ts

@@ -1,12 +1,10 @@
 type ToastType = 'success' | 'error' | 'warning' | 'info';
-/** Options for creating a Toast notification. */
 interface ToastOptions {
     content: string;
     header?: string;
     type?: ToastType;
     closeable?: boolean;
 }
-/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 declare class Toast {
     private readonly content;
     private readonly header;

package/js/toast.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 class Toast {
     content;
     header;

package/js/tooltip.d.ts

@@ -1,14 +1,10 @@
-/** Configuration options for a Tooltip instance. */
 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;
 }
-/** Lightweight tooltip that positions itself relative to a trigger element. */
 declare class Tooltip {
     private static activeTooltip;
     private static idCounter;

package/js/tooltip.js

@@ -1,5 +1,4 @@
 import { computePosition } from './position.js';
-/** Lightweight tooltip that positions itself relative to a trigger element. */
 class Tooltip {
     static activeTooltip = null;
     static idCounter = 0;

package/js/tree.d.ts

@@ -1,9 +1,7 @@
 type NodeType = 'file' | 'folder';
-/** Configuration options for a TreeComponent instance. */
 interface TreeOptions {
     onSelect?: (node: TreeNode) => void;
 }
-/** Represents a single node in a tree structure, either a file or folder. */
 declare class TreeNode {
     label: string;
     type: NodeType;
@@ -14,7 +12,6 @@ declare class TreeNode {
     childrenContainer: HTMLUListElement | null;
     constructor(label: string, type?: NodeType, children?: TreeNode[]);
 }
-/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 declare class TreeComponent {
     private container;
     private data;

package/js/tree.js

@@ -1,4 +1,3 @@
-/** Represents a single node in a tree structure, either a file or folder. */
 class TreeNode {
     label;
     type;
@@ -17,7 +16,6 @@ class TreeNode {
         this.childrenContainer = null;
     }
 }
-/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 class TreeComponent {
     container;
     data;
@@ -81,18 +79,18 @@ class TreeComponent {
         iconDiv.className = 'tree-icon';
         if (type === 'folder') {
             iconDiv.innerHTML = `
-        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
+                <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            `;
         }
         else {
             iconDiv.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            `;
         }
         return iconDiv;
     }

package/js/utils.d.ts

@@ -1,4 +1,3 @@
-/** Shape of the `utils` helper object. */
 interface Utils {
     ready(fn: () => void): void;
     value(element: HTMLElement): string;
@@ -8,15 +7,6 @@ interface Utils {
     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 };

package/js/utils.js

@@ -1,22 +1,12 @@
 const utils = {
-    /**
-     * Execute a function when the DOM is ready
-     * @param fn - Callback function to execute
-     */
     ready(fn) {
-        if (document.readyState === "complete" || document.readyState === "interactive") {
+        if (document.readyState === 'complete' || document.readyState === 'interactive') {
             setTimeout(fn, 1);
         }
         else {
-            document.addEventListener("DOMContentLoaded", fn);
+            document.addEventListener('DOMContentLoaded', fn);
         }
     },
-    /**
-     * Get the value of an element from various sources
-     * Priority: value attribute > data-value attribute > innerText
-     * @param element - HTML element to get value from
-     * @returns The element's value as a string
-     */
     value(element) {
         if (element.hasAttribute('value')) {
             return element.getAttribute('value') || '';
@@ -26,57 +16,27 @@ const utils = {
         }
         return element.innerText;
     },
-    /**
-     * Get the text content of an element
-     * @param element - HTML element to get text from
-     * @returns The element's inner text
-     */
     text(element) {
         return element.innerText;
     },
-    /**
-     * Get an attribute value from an element
-     * @param element - HTML element to get attribute from
-     * @param attribute - Name of the attribute to retrieve
-     * @returns The attribute value or undefined if not present
-     */
     attribute(element, attribute) {
         if (element.hasAttribute(attribute)) {
             return element.getAttribute(attribute) || undefined;
         }
         return undefined;
     },
-    /**
-     * Check if an element is a NodeList
-     * @param element - Element or NodeList to check
-     * @returns True if the element is a NodeList
-     */
     isList(element) {
         return NodeList.prototype.isPrototypeOf(element);
     },
-    /**
-     * Check if an element is hidden
-     * @param element - HTML element to check
-     * @returns True if the element is hidden
-     */
     isHidden(element) {
         return element.offsetParent === null;
     }
 };
-/**
- * Escape a plain-text string so it is safe to inject into innerHTML.
- * Use this whenever inserting user-controlled strings into HTML templates.
- */
 function escapeHtml(text) {
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
 }
-/**
- * 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.
- */
 function sanitizeHtml(html) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');

package/js/virtual-dropdown.d.ts

@@ -1,9 +1,7 @@
-/** A single selectable option for a VirtualDropdown. */
 interface DropdownOption {
     label: string;
     value: string | number;
 }
-/** Configuration for a VirtualDropdown instance. */
 interface VirtualDropdownConfig {
     container: string | HTMLElement;
     options: DropdownOption[];
@@ -14,7 +12,6 @@ interface VirtualDropdownConfig {
     itemHeight?: number;
     onSelect?: (selectedValues: Array<string | number>) => void;
 }
-/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 declare class VirtualDropdown {
     private readonly container;
     private readonly options;
@@ -37,7 +34,7 @@ declare class VirtualDropdown {
     private filteredOptions;
     private isOpen;
     private scrollTop;
-    private boundHandlers;
+    private abortController;
     constructor(config: VirtualDropdownConfig);
     private init;
     private renderBase;
@@ -55,4 +52,5 @@ declare class VirtualDropdown {
     clearSelection(): void;
     destroy(): void;
 }
-export { VirtualDropdown, DropdownOption, VirtualDropdownConfig };
+export { VirtualDropdown };
+export type { DropdownOption, VirtualDropdownConfig };