@dodlhuat/basix 1.3.5 → 1.4.0

package/js/sidebar-nav.d.ts

@@ -1,29 +1,18 @@
-/** Configuration options for a SidebarNav instance. */
 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;
-    /** Minimum horizontal swipe distance (px) to trigger open/close. Default: 60 */
     swipeThreshold?: number;
-    /** Width of the left-edge zone (px) that triggers open on swipe-right. Default: 20 */
     swipeEdge?: number;
 }
-/** Collapsible sidebar navigation with backdrop, swipe gestures, and responsive breakpoint support. */
 declare class SidebarNav {
     private nav;
     private backdrop;
     private toggleBtn;
     private closeBtn;
     private opts;
-    private _touchStartX;
-    private _touchStartY;
-    private _onToggle;
-    private _onBackdrop;
-    private _onResize;
-    private _onClose;
-    private _onTouchStart;
-    private _onTouchEnd;
+    private touchStartX;
+    private touchStartY;
+    private abortController;
     constructor(containerOrSelector: string | HTMLElement, options?: SidebarNavOptions);
     open(): void;
     close(): void;
@@ -31,4 +20,4 @@ declare class SidebarNav {
     isOpen(): boolean;
     destroy(): void;
 }
-export { SidebarNav, SidebarNavOptions };
+export { SidebarNav, type SidebarNavOptions };

package/js/sidebar-nav.js

@@ -1,18 +1,12 @@
-/** Collapsible sidebar navigation with backdrop, swipe gestures, and responsive breakpoint support. */
 class SidebarNav {
     nav;
     backdrop;
     toggleBtn;
     closeBtn = null;
     opts;
-    _touchStartX = 0;
-    _touchStartY = 0;
-    _onToggle;
-    _onBackdrop;
-    _onResize;
-    _onClose;
-    _onTouchStart;
-    _onTouchEnd;
+    touchStartX = 0;
+    touchStartY = 0;
+    abortController = new AbortController();
     constructor(containerOrSelector, options = {}) {
         const container = typeof containerOrSelector === 'string'
             ? document.querySelector(containerOrSelector)
@@ -26,39 +20,36 @@ class SidebarNav {
         this.nav = container?.querySelector('.sidebar-nav') ?? null;
         this.backdrop = container?.querySelector('.sidebar-backdrop') ?? null;
         this.toggleBtn = document.querySelector(this.opts.toggleSelector);
-        this._onToggle = () => this.toggle();
-        this._onBackdrop = () => this.close();
-        this._onResize = () => { if (window.innerWidth > this.opts.breakpoint)
-            this.close(); };
-        this._onClose = () => this.close();
-        this._onTouchStart = (e) => {
-            this._touchStartX = e.touches[0].clientX;
-            this._touchStartY = e.touches[0].clientY;
-        };
-        this._onTouchEnd = (e) => {
+        const sig = { signal: this.abortController.signal };
+        this.toggleBtn?.addEventListener('click', () => this.toggle(), sig);
+        this.backdrop?.addEventListener('click', () => this.close(), sig);
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > this.opts.breakpoint)
+                this.close();
+        }, sig);
+        document.addEventListener('touchstart', (e) => {
+            this.touchStartX = e.touches[0].clientX;
+            this.touchStartY = e.touches[0].clientY;
+        }, { passive: true, signal: this.abortController.signal });
+        document.addEventListener('touchend', (e) => {
             if (window.innerWidth > this.opts.breakpoint)
                 return;
-            const dx = e.changedTouches[0].clientX - this._touchStartX;
-            const dy = e.changedTouches[0].clientY - this._touchStartY;
+            const dx = e.changedTouches[0].clientX - this.touchStartX;
+            const dy = e.changedTouches[0].clientY - this.touchStartY;
             if (Math.abs(dx) < Math.abs(dy))
                 return;
-            if (!this.isOpen() && this._touchStartX <= this.opts.swipeEdge && dx >= this.opts.swipeThreshold) {
+            if (!this.isOpen() && this.touchStartX <= this.opts.swipeEdge && dx >= this.opts.swipeThreshold) {
                 this.open();
             }
             else if (this.isOpen() && dx <= -this.opts.swipeThreshold) {
                 this.close();
             }
-        };
-        this.toggleBtn?.addEventListener('click', this._onToggle);
-        this.backdrop?.addEventListener('click', this._onBackdrop);
-        window.addEventListener('resize', this._onResize);
-        document.addEventListener('touchstart', this._onTouchStart, { passive: true });
-        document.addEventListener('touchend', this._onTouchEnd, { passive: true });
+        }, { passive: true, signal: this.abortController.signal });
         this.closeBtn = document.createElement('button');
         this.closeBtn.className = 'sidebar-close';
         this.closeBtn.setAttribute('aria-label', 'Close navigation');
         this.closeBtn.innerHTML = '<div class="icon icon-close"></div>';
-        this.closeBtn.addEventListener('click', this._onClose);
+        this.closeBtn.addEventListener('click', () => this.close(), sig);
         this.nav?.append(this.closeBtn);
     }
     open() {
@@ -76,13 +67,8 @@ class SidebarNav {
         return this.nav?.classList.contains('is-open') ?? false;
     }
     destroy() {
-        this.toggleBtn?.removeEventListener('click', this._onToggle);
-        this.backdrop?.removeEventListener('click', this._onBackdrop);
-        window.removeEventListener('resize', this._onResize);
-        this.closeBtn?.removeEventListener('click', this._onClose);
+        this.abortController.abort();
         this.closeBtn?.remove();
-        document.removeEventListener('touchstart', this._onTouchStart);
-        document.removeEventListener('touchend', this._onTouchEnd);
     }
 }
 export { SidebarNav };

package/js/stepper.d.ts

@@ -1,18 +1,21 @@
-/** Configuration options for a Stepper instance. */
 interface StepperOptions {
     defaultStep?: number;
     clickable?: boolean;
     onChange?: (current: number, previous: number) => void;
+    iconBasePath?: string;
 }
-/** Multi-step progress indicator with clickable steps and connector state. */
 declare class Stepper {
     private container;
     private steps;
     private connectors;
     private current;
     private readonly onChange?;
+    private readonly iconBasePath;
     private abortController;
+    private injectedConnectors;
     constructor(elementOrSelector: string | HTMLElement, options?: StepperOptions);
+    private injectConnectors;
+    private checkSvg;
     private render;
     next(): void;
     prev(): void;

package/js/stepper.js

@@ -1,26 +1,29 @@
-/** Multi-step progress indicator with clickable steps and connector state. */
 class Stepper {
     container;
     steps;
     connectors;
     current;
     onChange;
+    iconBasePath;
     abortController = new AbortController();
+    injectedConnectors = false;
     constructor(elementOrSelector, options = {}) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
         if (!element)
-            throw new Error(`Stepper: element not found`);
+            throw new Error('Stepper: element not found');
         this.container = element;
         this.steps = Array.from(this.container.querySelectorAll('.stepper-step'));
-        this.connectors = Array.from(this.container.querySelectorAll('.stepper-connector'));
         this.onChange = options.onChange;
+        this.iconBasePath = options.iconBasePath ?? 'svg-icons/';
         this.current = options.defaultStep ?? 0;
         if (this.steps.length === 0) {
             console.warn('Stepper: no .stepper-step elements found');
+            this.connectors = [];
             return;
         }
+        this.connectors = this.injectConnectors();
         if (options.clickable) {
             this.container.classList.add('stepper-clickable');
             this.steps.forEach((step, i) => {
@@ -29,13 +32,41 @@ class Stepper {
         }
         this.render();
     }
+    injectConnectors() {
+        const injected = [];
+        for (let i = 0; i < this.steps.length - 1; i++) {
+            const connector = document.createElement('div');
+            connector.className = 'stepper-connector';
+            this.steps[i].insertAdjacentElement('afterend', connector);
+            injected.push(connector);
+        }
+        this.injectedConnectors = true;
+        return injected;
+    }
+    checkSvg() {
+        return `<svg class="icon-svg" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#check"/></svg>`;
+    }
     render() {
         this.steps.forEach((step, i) => {
-            step.classList.remove('active', 'completed');
-            if (i < this.current)
+            step.classList.remove('active', 'completed', 'error');
+            const indicator = step.querySelector('.stepper-indicator');
+            if (i < this.current) {
                 step.classList.add('completed');
-            else if (i === this.current)
+                step.removeAttribute('aria-current');
+                if (indicator)
+                    indicator.innerHTML = this.checkSvg();
+            }
+            else if (i === this.current) {
                 step.classList.add('active');
+                step.setAttribute('aria-current', 'step');
+                if (indicator)
+                    indicator.textContent = String(i + 1);
+            }
+            else {
+                step.removeAttribute('aria-current');
+                if (indicator)
+                    indicator.textContent = String(i + 1);
+            }
         });
         this.connectors.forEach((connector, i) => {
             connector.classList.toggle('completed', i < this.current);
@@ -85,6 +116,11 @@ class Stepper {
     }
     destroy() {
         this.abortController.abort();
+        if (this.injectedConnectors) {
+            this.connectors.forEach(c => c.remove());
+            this.connectors = [];
+        }
+        this.steps.forEach(step => step.removeAttribute('aria-current'));
     }
 }
 export { Stepper };

package/js/table.d.ts

@@ -1,20 +1,16 @@
-/** Descriptor for a single table column. */
 interface TableColumn {
     key: string;
     label: string;
     sortable?: boolean;
 }
-/** A single data row, keyed by column key. */
 interface TableRow {
     [key: string]: string | number | boolean;
 }
-/** Configuration options for a Table instance. */
 interface TableOptions {
     data?: TableRow[];
     columns?: TableColumn[];
     pageSize?: number;
 }
-/** Dynamic data table with sorting, filtering, and pagination. */
 declare class Table {
     private container;
     private data;
@@ -29,74 +25,23 @@ declare class Table {
     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 };
+export { Table, type TableRow, type TableColumn, type TableOptions };

package/js/table.js

@@ -1,5 +1,4 @@
-import { Select } from "./select.js";
-/** Dynamic data table with sorting, filtering, and pagination. */
+import { Select } from './select.js';
 class Table {
     container;
     data;
@@ -21,9 +20,9 @@ class Table {
             throw new Error(`Table: Element not found for selector "${elementOrSelector}"`);
         }
         this.container = element;
-        this.data = options.data || [];
-        this.columns = options.columns || [];
-        this.pageSize = options.pageSize || 10;
+        this.data = options.data ?? [];
+        this.columns = options.columns ?? [];
+        this.pageSize = options.pageSize ?? 10;
         this.currentPage = 1;
         this.sortColumn = null;
         this.sortDirection = 'asc';
@@ -33,9 +32,6 @@ class Table {
         }
         this.init();
     }
-    /**
-     * Parses an existing HTML table in the DOM to extract data and columns
-     */
     parseTableFromDOM() {
         const table = this.container.querySelector('table');
         if (!table)
@@ -63,17 +59,11 @@ class Table {
         });
         this.container.innerHTML = '';
     }
-    /**
-     * Initializes the table by rendering controls, structure, and content
-     */
     init() {
         this.renderControls();
         this.renderTableStructure();
         this.render();
     }
-    /**
-     * Renders the search and page size controls
-     */
     renderControls() {
         const controlsDiv = document.createElement('div');
         controlsDiv.className = 'table-controls';
@@ -108,9 +98,6 @@ class Table {
         this.container.appendChild(controlsDiv);
         new Select('#' + pageSizeSelect.id);
     }
-    /**
-     * Creates the table structure (table, thead, tbody, pagination container)
-     */
     renderTableStructure() {
         const wrapper = document.createElement('div');
         wrapper.className = 'table-wrapper';
@@ -140,9 +127,6 @@ class Table {
         this.tableHeader = thead;
         this.paginationContainer = paginationDiv;
     }
-    /**
-     * Returns filtered and sorted data based on current state
-     */
     getFilteredAndSortedData() {
         let processedData = [...this.data];
         if (this.filterText) {
@@ -173,9 +157,6 @@ class Table {
         }
         return processedData;
     }
-    /**
-     * Renders the table body, pagination, and header sort indicators
-     */
     render() {
         const processedData = this.getFilteredAndSortedData();
         const totalItems = processedData.length;
@@ -193,9 +174,6 @@ class Table {
         this.renderPagination(totalItems, totalPages, startIndex, endIndex);
         this.updateHeaderSortIcons();
     }
-    /**
-     * Renders the table body rows
-     */
     renderBody(data) {
         this.tableBody.innerHTML = '';
         if (data.length === 0) {
@@ -219,9 +197,6 @@ class Table {
             this.tableBody.appendChild(tr);
         });
     }
-    /**
-     * Updates the sort direction indicators in table headers
-     */
     updateHeaderSortIcons() {
         const ths = this.tableHeader.querySelectorAll('th');
         ths.forEach(th => {
@@ -231,9 +206,6 @@ class Table {
             }
         });
     }
-    /**
-     * Renders pagination controls and info
-     */
     renderPagination(totalItems, totalPages, startIndex, endIndex) {
         this.paginationContainer.innerHTML = '';
         if (totalItems === 0)
@@ -270,17 +242,11 @@ class Table {
         buttonsDiv.appendChild(nextBtn);
         this.paginationContainer.appendChild(buttonsDiv);
     }
-    /**
-     * Handles search input changes
-     */
     handleSearch(text) {
         this.filterText = text;
         this.currentPage = 1;
         this.render();
     }
-    /**
-     * Handles column header clicks for sorting
-     */
     handleSort(key) {
         if (this.sortColumn === key) {
             this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
@@ -291,24 +257,15 @@ class Table {
         }
         this.render();
     }
-    /**
-     * Handles page size changes
-     */
     handlePageSizeChange(size) {
         this.pageSize = size;
         this.currentPage = 1;
         this.render();
     }
-    /**
-     * Sets the current page and re-renders
-     */
     setPage(page) {
         this.currentPage = page;
         this.render();
     }
-    /**
-     * Assigns a unique ID to an element, incrementing if necessary
-     */
     assignUniqueId(element, baseId) {
         if (!element || !baseId)
             return null;
@@ -327,25 +284,16 @@ class Table {
         element.id = uniqueId;
         return uniqueId;
     }
-    /**
-     * Public API: Updates the table data and re-renders
-     */
     setData(data) {
         this.data = data;
         this.currentPage = 1;
         this.render();
     }
-    /**
-     * Public API: Updates the columns and re-renders
-     */
     setColumns(columns) {
         this.columns = columns;
         this.container.innerHTML = '';
         this.init();
     }
-    /**
-     * Public API: Gets the current filtered and sorted data
-     */
     getData() {
         return this.getFilteredAndSortedData();
     }

package/js/tabs.d.ts

@@ -1,59 +1,28 @@
 type TabLayout = 'horizontal' | 'vertical';
 type MenuPosition = 'top' | 'bottom' | 'left' | 'right';
-/** Configuration options for a Tabs instance. */
 interface TabsOptions {
     layout?: TabLayout;
     defaultTab?: number;
     menuPos?: MenuPosition;
     onChange?: (index: number) => void;
 }
-/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 declare class Tabs {
     private container;
     private options;
     private tabItems;
     private tabPanels;
     private currentTab;
+    private abortController;
     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 };