@dodlhuat/basix 1.4.2 → 1.4.3

package/js/scrollbar.d.ts

@@ -9,19 +9,19 @@ declare class Scrollbar {
     private static activeInstance;
     private static globalListenersInstalled;
     private static instanceCount;
-    private static globalListenerAbortController;
+    private static globalListeners;
     private readonly container;
     private readonly viewport;
     private readonly content;
     private readonly track;
     private readonly thumb;
     private readonly MIN_THUMB_HEIGHT;
-    private readonly ro;
+    private readonly resizeObserver;
     private dragging;
     private activePointerId;
     private startPointerY;
     private startThumbTop;
-    private abortController;
+    private listeners;
     private constructor();
     private getRequiredElements;
     private getMinThumbHeight;

package/js/scrollbar.js

@@ -1,21 +1,22 @@
+import { ListenerGroup } from './listeners.js';
 class Scrollbar {
     static instances = new WeakMap();
     static activeInstance = null;
     static globalListenersInstalled = false;
     static instanceCount = 0;
-    static globalListenerAbortController = null;
+    static globalListeners = null;
     container;
     viewport;
     content;
     track;
     thumb;
     MIN_THUMB_HEIGHT;
-    ro;
+    resizeObserver;
     dragging = false;
     activePointerId = null;
     startPointerY = 0;
     startThumbTop = 0;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(container) {
         this.container = container;
         const elements = this.getRequiredElements(container);
@@ -24,14 +25,14 @@ class Scrollbar {
         this.track = elements.track;
         this.thumb = elements.thumb;
         this.MIN_THUMB_HEIGHT = this.getMinThumbHeight();
-        this.ro = new ResizeObserver(this.updateThumb);
+        this.resizeObserver = new ResizeObserver(() => this.updateThumb());
         this.attachEventListeners();
         Scrollbar.instances.set(container, this);
         Scrollbar.instanceCount++;
         if (!Scrollbar.globalListenersInstalled) {
             Scrollbar.installGlobalListeners();
         }
-        requestAnimationFrame(this.updateThumb);
+        requestAnimationFrame(() => this.updateThumb());
     }
     getRequiredElements(container) {
         const viewport = container.querySelector('.viewport');
@@ -44,39 +45,37 @@ class Scrollbar {
         return { viewport, content, track, thumb };
     }
     getMinThumbHeight() {
-        const cssValue = getComputedStyle(document.documentElement)
-            .getPropertyValue('--thumb-min')
-            .trim();
+        const cssValue = getComputedStyle(document.documentElement).getPropertyValue('--thumb-min').trim();
         const parsed = parseInt(cssValue, 10);
         const defaultMin = 28;
         const absoluteMin = 16;
         return Math.max(absoluteMin, parsed || defaultMin);
     }
     static installGlobalListeners() {
-        const ac = new AbortController();
-        Scrollbar.globalListenerAbortController = ac;
+        const listeners = new ListenerGroup();
+        Scrollbar.globalListeners = listeners;
         document.addEventListener('pointermove', (e) => {
             Scrollbar.activeInstance?.handlePointerMove(e);
-        }, { passive: false, signal: ac.signal });
+        }, { passive: false, signal: listeners.signal });
         document.addEventListener('pointerup', (e) => {
             Scrollbar.activeInstance?.handlePointerUp(e);
-        }, { signal: ac.signal });
+        }, { signal: listeners.signal });
         document.addEventListener('pointercancel', (e) => {
             Scrollbar.activeInstance?.handlePointerUp(e);
-        }, { signal: ac.signal });
+        }, { signal: listeners.signal });
         Scrollbar.globalListenersInstalled = true;
     }
     attachEventListeners() {
-        const sig = { signal: this.abortController.signal };
-        this.viewport.addEventListener('scroll', this.updateThumb, { passive: true, signal: sig.signal });
-        this.thumb.addEventListener('pointerdown', this.handleThumbPointerDown, sig);
-        this.track.addEventListener('click', this.handleTrackClick, sig);
-        this.container.addEventListener('wheel', this.handleContainerWheel, { passive: false, signal: sig.signal });
-        window.addEventListener('resize', this.updateThumb, sig);
-        this.ro.observe(this.viewport);
-        this.ro.observe(this.content);
-    }
-    updateThumb = () => {
+        const sig = { signal: this.listeners.signal };
+        this.viewport.addEventListener('scroll', () => this.updateThumb(), { ...sig, passive: true });
+        this.thumb.addEventListener('pointerdown', (e) => this.handleThumbPointerDown(e), sig);
+        this.track.addEventListener('click', (e) => this.handleTrackClick(e), sig);
+        this.container.addEventListener('wheel', (e) => this.handleContainerWheel(e), { ...sig, passive: false });
+        window.addEventListener('resize', () => this.updateThumb(), sig);
+        this.resizeObserver.observe(this.viewport);
+        this.resizeObserver.observe(this.content);
+    }
+    updateThumb() {
         const viewportHeight = this.viewport.clientHeight;
         const contentHeight = this.content.scrollHeight;
         const trackHeight = this.track.clientHeight;
@@ -93,8 +92,8 @@ class Scrollbar {
         const scrollRatio = this.viewport.scrollTop / (maxScroll || 1);
         const thumbTop = scrollRatio * (maxThumbTop || 0);
         this.thumb.style.top = `${thumbTop}px`;
-    };
-    handleThumbPointerDown = (e) => {
+    }
+    handleThumbPointerDown(e) {
         e.preventDefault();
         this.dragging = true;
         this.activePointerId = e.pointerId;
@@ -110,8 +109,8 @@ class Scrollbar {
         const trackRect = this.track.getBoundingClientRect();
         this.startThumbTop = thumbRect.top - trackRect.top;
         document.body.style.userSelect = 'none';
-    };
-    handlePointerMove = (e) => {
+    }
+    handlePointerMove(e) {
         if (!this.dragging || this.activePointerId !== e.pointerId) {
             return;
         }
@@ -127,8 +126,8 @@ class Scrollbar {
         const maxScroll = contentHeight - viewportHeight;
         const scrollRatio = newThumbTop / (maxThumbTop || 1);
         this.viewport.scrollTop = scrollRatio * (maxScroll || 0);
-    };
-    handlePointerUp = (e) => {
+    }
+    handlePointerUp(e) {
         if (!this.dragging || this.activePointerId !== e.pointerId) {
             return;
         }
@@ -142,8 +141,8 @@ class Scrollbar {
         this.activePointerId = null;
         Scrollbar.activeInstance = null;
         document.body.style.userSelect = '';
-    };
-    handleTrackClick = (e) => {
+    }
+    handleTrackClick(e) {
         if (e.target === this.thumb) {
             return;
         }
@@ -160,8 +159,8 @@ class Scrollbar {
         const scrollRatio = clampedThumbTop / (maxThumbTop || 1);
         const scrollTop = scrollRatio * (maxScroll || 0);
         this.viewport.scrollTo({ top: scrollTop, behavior: 'smooth' });
-    };
-    handleContainerWheel = (e) => {
+    }
+    handleContainerWheel(e) {
         const { scrollTop, scrollHeight, clientHeight } = this.viewport;
         const scrollable = scrollHeight > clientHeight;
         const atTop = scrollTop === 0 && e.deltaY < 0;
@@ -170,25 +169,23 @@ class Scrollbar {
             e.preventDefault();
         }
         this.viewport.scrollTop += e.deltaY;
-    };
+    }
     destroy() {
-        this.abortController.abort();
-        this.ro.disconnect();
+        this.listeners.destroy();
+        this.resizeObserver.disconnect();
         Scrollbar.instances.delete(this.container);
         if (Scrollbar.activeInstance === this) {
             Scrollbar.activeInstance = null;
         }
         Scrollbar.instanceCount--;
         if (Scrollbar.instanceCount === 0) {
-            Scrollbar.globalListenerAbortController?.abort();
-            Scrollbar.globalListenerAbortController = null;
+            Scrollbar.globalListeners?.destroy();
+            Scrollbar.globalListeners = null;
             Scrollbar.globalListenersInstalled = false;
         }
     }
     static create(elementOrSelector) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const container = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!container) {
             throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
         }
@@ -199,7 +196,7 @@ class Scrollbar {
     }
     static initAll(selector) {
         const containers = document.querySelectorAll(selector);
-        return Array.from(containers).map(container => Scrollbar.create(container));
+        return Array.from(containers).map((container) => Scrollbar.create(container));
     }
     static initOne(elementOrSelector) {
         return Scrollbar.create(elementOrSelector);

package/js/select.d.ts

@@ -2,7 +2,7 @@ declare class Select {
     private readonly element;
     private readonly isMultiselect;
     private readonly dropdown;
-    private readonly documentClickHandler;
+    private listeners;
     constructor(elementOrSelector: string | HTMLSelectElement);
     destroy(): void;
     value(): string | string[];

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');
@@ -146,7 +142,7 @@ class Select {
         optionsMenu.className = 'dropdown-options-menu hidden';
         optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
         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

@@ -12,7 +12,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,11 +7,9 @@ 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,
@@ -20,7 +19,7 @@ class SidebarNav {
         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 +29,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,7 +43,7 @@ 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');
@@ -61,13 +60,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;