@dodlhuat/basix 1.4.2 → 1.5.0

package/js/select.js

@@ -1,12 +1,11 @@
+import { ListenerGroup } from './listeners.js';
 class Select {
     element;
     isMultiselect;
     dropdown;
-    documentClickHandler;
+    listeners = new ListenerGroup();
     constructor(elementOrSelector) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`Select: Element not found for selector "${elementOrSelector}"`);
         }
@@ -17,39 +16,36 @@ class Select {
         }
         this.isMultiselect = result.isMulti;
         this.dropdown = result.dropdown;
-        this.documentClickHandler = (e) => {
+        document.addEventListener('click', (e) => {
             if (this.dropdown && !this.dropdown.contains(e.target)) {
                 this.dropdown.classList.remove('open');
             }
-        };
-        document.addEventListener('click', this.documentClickHandler);
+        }, { signal: this.listeners.signal });
     }
     destroy() {
-        document.removeEventListener('click', this.documentClickHandler);
+        this.listeners.destroy();
         this.dropdown?.classList.remove('open');
     }
     value() {
         const selectedValues = Array.from(this.element.options)
-            .filter(option => option.selected)
-            .map(option => option.value);
+            .filter((option) => option.selected)
+            .map((option) => option.value);
         return this.isMultiselect ? selectedValues : selectedValues[0];
     }
     static init(elementOrSelector) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element)
             return null;
         const result = Select.initElement(element);
         if (!result)
             return null;
-        const handler = (e) => {
+        const listeners = new ListenerGroup();
+        document.addEventListener('click', (e) => {
             if (!result.dropdown.contains(e.target)) {
                 result.dropdown.classList.remove('open');
             }
-        };
-        document.addEventListener('click', handler);
-        return () => document.removeEventListener('click', handler);
+        }, { signal: listeners.signal });
+        return () => listeners.destroy();
     }
     static initElement(element) {
         if (!Select.transformSelect(element)) {
@@ -94,7 +90,7 @@ class Select {
         return { isMulti, dropdown };
     }
     static closeAllDropdowns(exceptDropdown) {
-        document.querySelectorAll('.dropdown').forEach(dropdown => {
+        document.querySelectorAll('.dropdown').forEach((dropdown) => {
             if (dropdown !== exceptDropdown) {
                 dropdown.classList.remove('open');
             }
@@ -103,15 +99,15 @@ class Select {
     static handleMultiSelect(option, optionsContainer, selected, selectElement) {
         option.classList.toggle('selected');
         const selectedOptions = Array.from(optionsContainer.querySelectorAll('.dropdown-option.selected'));
-        const values = selectedOptions.map(opt => opt.textContent?.trim() || '');
+        const values = selectedOptions.map((opt) => opt.textContent?.trim() || '');
         selected.textContent = values.length ? values.join(', ') : 'Select options';
-        const selectedValues = selectedOptions.map(opt => opt.dataset.value || '');
-        Array.from(selectElement.options).forEach(opt => {
+        const selectedValues = selectedOptions.map((opt) => opt.dataset.value || '');
+        Array.from(selectElement.options).forEach((opt) => {
             opt.selected = selectedValues.includes(opt.value);
         });
     }
     static handleSingleSelect(option, optionsContainer, selected, dropdown, selectElement) {
-        optionsContainer.querySelectorAll('.dropdown-option').forEach(opt => {
+        optionsContainer.querySelectorAll('.dropdown-option').forEach((opt) => {
             opt.classList.remove('selected');
         });
         option.classList.add('selected');
@@ -144,9 +140,9 @@ class Select {
         dropdownOptions.className = 'dropdown-options';
         const optionsMenu = document.createElement('div');
         optionsMenu.className = 'dropdown-options-menu hidden';
-        optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
+        optionsMenu.innerHTML = 'Select options<svg class="icon-svg dropdown-options-icon" aria-hidden="true"><use href="svg-icons/icons.svg#close"/></svg>';
         dropdownOptions.appendChild(optionsMenu);
-        Array.from(select.options).forEach(opt => {
+        Array.from(select.options).forEach((opt) => {
             const optDiv = document.createElement('div');
             optDiv.className = 'dropdown-option';
             optDiv.dataset.value = opt.value;

package/js/sidebar-nav.d.ts

@@ -3,6 +3,7 @@ interface SidebarNavOptions {
     breakpoint?: number;
     swipeThreshold?: number;
     swipeEdge?: number;
+    iconBasePath?: string;
 }
 declare class SidebarNav {
     private nav;
@@ -12,7 +13,7 @@ declare class SidebarNav {
     private opts;
     private touchStartX;
     private touchStartY;
-    private abortController;
+    private listeners;
     constructor(containerOrSelector: string | HTMLElement, options?: SidebarNavOptions);
     open(): void;
     close(): void;

package/js/sidebar-nav.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class SidebarNav {
     nav;
     backdrop;
@@ -6,21 +7,20 @@ class SidebarNav {
     opts;
     touchStartX = 0;
     touchStartY = 0;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(containerOrSelector, options = {}) {
-        const container = typeof containerOrSelector === 'string'
-            ? document.querySelector(containerOrSelector)
-            : containerOrSelector;
+        const container = typeof containerOrSelector === 'string' ? document.querySelector(containerOrSelector) : containerOrSelector;
         this.opts = {
             toggleSelector: options.toggleSelector ?? '.sidebar-toggle',
             breakpoint: options.breakpoint ?? 768,
             swipeThreshold: options.swipeThreshold ?? 60,
             swipeEdge: options.swipeEdge ?? 20,
+            iconBasePath: options.iconBasePath ?? 'svg-icons/',
         };
         this.nav = container?.querySelector('.sidebar-nav') ?? null;
         this.backdrop = container?.querySelector('.sidebar-backdrop') ?? null;
         this.toggleBtn = document.querySelector(this.opts.toggleSelector);
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.toggleBtn?.addEventListener('click', () => this.toggle(), sig);
         this.backdrop?.addEventListener('click', () => this.close(), sig);
         window.addEventListener('resize', () => {
@@ -30,7 +30,7 @@ class SidebarNav {
         document.addEventListener('touchstart', (e) => {
             this.touchStartX = e.touches[0].clientX;
             this.touchStartY = e.touches[0].clientY;
-        }, { passive: true, signal: this.abortController.signal });
+        }, { ...sig, passive: true });
         document.addEventListener('touchend', (e) => {
             if (window.innerWidth > this.opts.breakpoint)
                 return;
@@ -44,11 +44,11 @@ class SidebarNav {
             else if (this.isOpen() && dx <= -this.opts.swipeThreshold) {
                 this.close();
             }
-        }, { passive: true, signal: this.abortController.signal });
+        }, { ...sig, passive: true });
         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.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${this.opts.iconBasePath}icons.svg#close"/></svg>`;
         this.closeBtn.addEventListener('click', () => this.close(), sig);
         this.nav?.append(this.closeBtn);
     }
@@ -61,13 +61,18 @@ class SidebarNav {
         this.backdrop?.classList.remove('is-visible');
     }
     toggle() {
-        this.nav?.classList.contains('is-open') ? this.close() : this.open();
+        if (this.nav?.classList.contains('is-open')) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
     }
     isOpen() {
         return this.nav?.classList.contains('is-open') ?? false;
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.closeBtn?.remove();
     }
 }

package/js/stepper.d.ts

@@ -11,7 +11,7 @@ declare class Stepper {
     private current;
     private readonly onChange?;
     private readonly iconBasePath;
-    private abortController;
+    private listeners;
     private injectedConnectors;
     constructor(elementOrSelector: string | HTMLElement, options?: StepperOptions);
     private injectConnectors;

package/js/stepper.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class Stepper {
     container;
     steps;
@@ -5,12 +6,10 @@ class Stepper {
     current;
     onChange;
     iconBasePath;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     injectedConnectors = false;
     constructor(elementOrSelector, options = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element)
             throw new Error('Stepper: element not found');
         this.container = element;
@@ -27,7 +26,7 @@ class Stepper {
         if (options.clickable) {
             this.container.classList.add('stepper-clickable');
             this.steps.forEach((step, i) => {
-                step.addEventListener('click', () => this.goTo(i), { signal: this.abortController.signal });
+                step.addEventListener('click', () => this.goTo(i), { signal: this.listeners.signal });
             });
         }
         this.render();
@@ -88,9 +87,8 @@ class Stepper {
         const previous = this.current;
         this.current = index;
         this.render();
-        if (this.onChange && previous !== index) {
-            this.onChange(index, previous);
-        }
+        if (previous !== index)
+            this.onChange?.(index, previous);
     }
     setError(index) {
         if (index < 0 || index >= this.steps.length)
@@ -115,12 +113,12 @@ class Stepper {
         return this.current === this.steps.length - 1;
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         if (this.injectedConnectors) {
-            this.connectors.forEach(c => c.remove());
+            this.connectors.forEach((c) => c.remove());
             this.connectors = [];
         }
-        this.steps.forEach(step => step.removeAttribute('aria-current'));
+        this.steps.forEach((step) => step.removeAttribute('aria-current'));
     }
 }
 export { Stepper };

package/js/table.d.ts

@@ -23,7 +23,7 @@ declare class Table {
     private tableBody;
     private tableHeader;
     private paginationContainer;
-    private abortController;
+    private listeners;
     constructor(elementOrSelector: string | HTMLElement, options?: TableOptions);
     private parseTableFromDOM;
     private init;

package/js/table.js

@@ -1,4 +1,5 @@
 import { Select } from './select.js';
+import { ListenerGroup } from './listeners.js';
 class Table {
     container;
     data;
@@ -11,11 +12,9 @@ class Table {
     tableBody;
     tableHeader;
     paginationContainer;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, options = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`Table: Element not found for selector "${elementOrSelector}"`);
         }
@@ -44,10 +43,10 @@ class Table {
         this.columns = Array.from(ths).map((th, index) => ({
             key: `col${index}`,
             label: th.textContent?.trim() || '',
-            sortable: true
+            sortable: true,
         }));
         const trs = tbody.querySelectorAll('tr');
-        this.data = Array.from(trs).map(tr => {
+        this.data = Array.from(trs).map((tr) => {
             const row = {};
             const tds = tr.querySelectorAll('td');
             tds.forEach((td, index) => {
@@ -73,7 +72,7 @@ class Table {
         searchInput.className = 'search-input';
         searchInput.addEventListener('input', (e) => {
             this.handleSearch(e.target.value);
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
         controlsDiv.appendChild(searchInput);
         const selectGroup = document.createElement('div');
         selectGroup.className = 'select-group';
@@ -82,7 +81,7 @@ class Table {
         selectGroup.appendChild(label);
         const pageSizeSelect = document.createElement('select');
         pageSizeSelect.className = 'page-size-select';
-        [5, 10, 20, 50].forEach(size => {
+        [5, 10, 20, 50].forEach((size) => {
             const option = document.createElement('option');
             option.value = String(size);
             option.textContent = `${size} per page`;
@@ -91,7 +90,7 @@ class Table {
         });
         pageSizeSelect.addEventListener('change', (e) => {
             this.handlePageSizeChange(parseInt(e.target.value, 10));
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
         this.assignUniqueId(pageSizeSelect, 'page-size-select-0');
         selectGroup.appendChild(pageSizeSelect);
         controlsDiv.appendChild(selectGroup);
@@ -105,13 +104,13 @@ class Table {
         const thead = document.createElement('thead');
         const tbody = document.createElement('tbody');
         const tr = document.createElement('tr');
-        this.columns.forEach(col => {
+        this.columns.forEach((col) => {
             const th = document.createElement('th');
             th.textContent = col.label;
             th.dataset.key = col.key;
             if (col.sortable !== false) {
                 th.classList.add('sortable');
-                th.addEventListener('click', () => this.handleSort(col.key), { signal: this.abortController.signal });
+                th.addEventListener('click', () => this.handleSort(col.key), { signal: this.listeners.signal });
             }
             tr.appendChild(th);
         });
@@ -131,17 +130,18 @@ class Table {
         let processedData = [...this.data];
         if (this.filterText) {
             const lowerFilter = this.filterText.toLowerCase();
-            processedData = processedData.filter(row => {
-                return this.columns.some(col => {
+            processedData = processedData.filter((row) => {
+                return this.columns.some((col) => {
                     const val = String(row[col.key] ?? '').toLowerCase();
                     return val.includes(lowerFilter);
                 });
             });
         }
         if (this.sortColumn) {
+            const col = this.sortColumn;
             processedData.sort((a, b) => {
-                const valA = a[this.sortColumn];
-                const valB = b[this.sortColumn];
+                const valA = a[col];
+                const valB = b[col];
                 if (valA == null && valB == null)
                     return 0;
                 if (valA == null)
@@ -186,9 +186,9 @@ class Table {
             this.tableBody.appendChild(tr);
             return;
         }
-        data.forEach(row => {
+        data.forEach((row) => {
             const tr = document.createElement('tr');
-            this.columns.forEach(col => {
+            this.columns.forEach((col) => {
                 const td = document.createElement('td');
                 td.textContent = String(row[col.key] ?? '');
                 td.setAttribute('data-label', col.label);
@@ -199,7 +199,7 @@ class Table {
     }
     updateHeaderSortIcons() {
         const ths = this.tableHeader.querySelectorAll('th');
-        ths.forEach(th => {
+        ths.forEach((th) => {
             th.classList.remove('sort-asc', 'sort-desc');
             if (th.dataset.key === this.sortColumn) {
                 th.classList.add(this.sortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
@@ -216,14 +216,15 @@ class Table {
         this.paginationContainer.appendChild(info);
         const buttonsDiv = document.createElement('div');
         buttonsDiv.className = 'pagination-buttons';
+        const sig = { signal: this.listeners.signal };
         const prevBtn = document.createElement('button');
         prevBtn.className = 'page-btn';
         prevBtn.textContent = 'Previous';
         prevBtn.disabled = this.currentPage === 1;
-        prevBtn.addEventListener('click', () => this.setPage(this.currentPage - 1));
+        prevBtn.addEventListener('click', () => this.setPage(this.currentPage - 1), sig);
         buttonsDiv.appendChild(prevBtn);
         let startPage = Math.max(1, this.currentPage - 2);
-        let endPage = Math.min(totalPages, startPage + 4);
+        const endPage = Math.min(totalPages, startPage + 4);
         if (endPage - startPage < 4) {
             startPage = Math.max(1, endPage - 4);
         }
@@ -231,14 +232,14 @@ class Table {
             const btn = document.createElement('button');
             btn.className = `page-btn ${i === this.currentPage ? 'active' : ''}`;
             btn.textContent = String(i);
-            btn.addEventListener('click', () => this.setPage(i));
+            btn.addEventListener('click', () => this.setPage(i), sig);
             buttonsDiv.appendChild(btn);
         }
         const nextBtn = document.createElement('button');
         nextBtn.className = 'page-btn';
         nextBtn.textContent = 'Next';
         nextBtn.disabled = this.currentPage === totalPages;
-        nextBtn.addEventListener('click', () => this.setPage(this.currentPage + 1));
+        nextBtn.addEventListener('click', () => this.setPage(this.currentPage + 1), sig);
         buttonsDiv.appendChild(nextBtn);
         this.paginationContainer.appendChild(buttonsDiv);
     }
@@ -298,7 +299,7 @@ class Table {
         return this.getFilteredAndSortedData();
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.innerHTML = '';
     }
 }

package/js/tabs.d.ts

@@ -12,7 +12,7 @@ declare class Tabs {
     private tabItems;
     private tabPanels;
     private currentTab;
-    private abortController;
+    private listeners;
     constructor(elementOrSelector: string | HTMLElement, options?: TabsOptions);
     private init;
     private bindEvents;

package/js/tabs.js

@@ -1,14 +1,13 @@
+import { ListenerGroup } from './listeners.js';
 class Tabs {
     container;
     options;
     tabItems;
     tabPanels;
     currentTab;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, options = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
@@ -18,7 +17,7 @@ class Tabs {
             layout,
             defaultTab: options.defaultTab ?? 0,
             menuPos: options.menuPos ?? (layout === 'vertical' ? 'left' : 'top'),
-            onChange: options.onChange
+            onChange: options.onChange,
         };
         this.currentTab = this.options.defaultTab;
         this.tabItems = this.container.querySelectorAll('.tab-item');
@@ -29,8 +28,6 @@ class Tabs {
         if (this.options.layout === 'vertical') {
             this.container.classList.add('tabs-vertical');
         }
-        this.tabItems = this.container.querySelectorAll('.tab-item');
-        this.tabPanels = this.container.querySelectorAll('.tab-panel');
         if (this.tabItems.length === 0) {
             console.warn('No tab items found in container');
             return;
@@ -46,16 +43,13 @@ class Tabs {
         this.activateTab(this.options.defaultTab);
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.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.addEventListener('keydown', (e) => this.handleKeyboardNavigation(e, 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');
@@ -114,7 +108,7 @@ class Tabs {
             console.warn(`Invalid tab index: ${index}`);
             return;
         }
-        this.tabItems.forEach((item, i) => {
+        this.tabItems.forEach((item) => {
             item.classList.remove('active');
             item.setAttribute('tabindex', '-1');
             item.setAttribute('aria-selected', 'false');
@@ -130,9 +124,8 @@ class Tabs {
         this.tabPanels[index].setAttribute('aria-hidden', 'false');
         const previousTab = this.currentTab;
         this.currentTab = index;
-        if (this.options.onChange && previousTab !== index) {
-            this.options.onChange(index);
-        }
+        if (previousTab !== index)
+            this.options.onChange?.(index);
     }
     goToTab(index) {
         this.activateTab(index);
@@ -169,7 +162,7 @@ class Tabs {
         }
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.classList.remove('tabs-vertical');
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');

package/js/theme.d.ts

@@ -1,6 +1,7 @@
 type ThemeMode = 'light' | 'dark';
 declare class Theme {
     private static readonly STORAGE_KEY;
+    private static readonly isMac;
     private static root;
     private static elements;
     private static mediaQuery;

package/js/theme.js

@@ -1,5 +1,6 @@
 class Theme {
     static STORAGE_KEY = 'theme';
+    static isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
     static root;
     static elements = null;
     static mediaQuery = null;
@@ -99,14 +100,11 @@ class Theme {
     static bindToggleClick() {
         if (!this.elements)
             return;
-        this.elements.toggleBtn.addEventListener('click', () => {
-            this.toggleTheme();
-        });
+        this.elements.toggleBtn.addEventListener('click', () => this.toggleTheme());
     }
     static bindKeyboardShortcut() {
         window.addEventListener('keydown', (ev) => {
-            const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
-            const modifierPressed = isMac ? ev.metaKey : ev.ctrlKey;
+            const modifierPressed = Theme.isMac ? ev.metaKey : ev.ctrlKey;
             if (modifierPressed && ev.key.toLowerCase() === 'j') {
                 ev.preventDefault();
                 this.toggleTheme();
@@ -116,18 +114,11 @@ class Theme {
     static bindSystemThemeChange() {
         if (!this.mediaQuery)
             return;
-        const handler = (e) => {
+        this.mediaQuery.addEventListener('change', (e) => {
             if (!this.getSavedTheme()) {
-                const matches = 'matches' in e ? e.matches : e.matches;
-                this.applyTheme(matches ? 'dark' : 'light');
+                this.applyTheme(e.matches ? 'dark' : 'light');
             }
-        };
-        if ('addEventListener' in this.mediaQuery) {
-            this.mediaQuery.addEventListener('change', handler);
-        }
-        else if ('addListener' in this.mediaQuery) {
-            this.mediaQuery.addListener(handler);
-        }
+        });
     }
     static getTheme() {
         return this.getCurrentTheme();

package/js/timepicker.d.ts

@@ -24,18 +24,20 @@ declare class TimeSpanPicker {
     private startHandleEl;
     private endHandleEl;
     private dragState;
+    private listeners;
+    private dragListeners;
     constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions);
     private queryEl;
     private render;
-    private readonly handleChange;
+    private handleChange;
     private attachEventListeners;
     private attachBarListeners;
     private beginDrag;
-    private readonly onStartHandleDown;
-    private readonly onEndHandleDown;
-    private readonly onFillDown;
-    private readonly onPointerMove;
-    private readonly onPointerUp;
+    private onStartHandleDown;
+    private onEndHandleDown;
+    private onFillDown;
+    private onPointerMove;
+    private onPointerUp;
     private toMinutes;
     private minutesToTime;
     private snap;