@dodlhuat/basix 1.4.1 → 1.4.3

package/js/range-slider.js

@@ -1,12 +1,14 @@
+import { ListenerGroup } from './listeners.js';
 class RangeSlider {
     input;
+    listeners = new ListenerGroup();
     constructor(input) {
         this.input = input;
         this.update();
-        this.input.addEventListener('input', this.handleInput);
+        this.input.addEventListener('input', () => this.update(), { signal: this.listeners.signal });
     }
     static initAll(selector = '.range-slider input[type="range"]') {
-        document.querySelectorAll(selector).forEach(input => {
+        document.querySelectorAll(selector).forEach((input) => {
             new RangeSlider(input);
         });
     }
@@ -16,12 +18,70 @@ class RangeSlider {
         const pct = ((+this.input.value - min) / (max - min)) * 100;
         this.input.style.setProperty('--range-fill', `${pct}%`);
     }
-    handleInput = () => {
-        this.update();
-    };
     destroy() {
-        this.input.removeEventListener('input', this.handleInput);
+        this.listeners.destroy();
         this.input.style.removeProperty('--range-fill');
     }
 }
-export { RangeSlider };
+class RangeSliderRange {
+    container;
+    startInput;
+    endInput;
+    fill;
+    fillCreatedByUs;
+    listeners = new ListenerGroup();
+    constructor(container) {
+        const inputs = container.querySelectorAll('input[type="range"]');
+        if (inputs.length !== 2) {
+            throw new Error('RangeSliderRange: container must contain exactly two range inputs');
+        }
+        this.container = container;
+        this.startInput = inputs[0];
+        this.endInput = inputs[1];
+        const existingFill = container.querySelector('.range-slider-fill');
+        this.fillCreatedByUs = !existingFill;
+        this.fill = existingFill ?? document.createElement('div');
+        this.fill.classList.add('range-slider-fill');
+        if (this.fillCreatedByUs) {
+            container.insertBefore(this.fill, container.firstChild);
+        }
+        this.update();
+        const signal = this.listeners.signal;
+        this.startInput.addEventListener('input', () => this.handleInput(this.startInput), { signal });
+        this.endInput.addEventListener('input', () => this.handleInput(this.endInput), { signal });
+    }
+    static initAll(selector = '.range-slider--range') {
+        document.querySelectorAll(selector).forEach((container) => {
+            new RangeSliderRange(container);
+        });
+    }
+    values() {
+        return [+this.startInput.value, +this.endInput.value];
+    }
+    handleInput(moved) {
+        if (moved === this.startInput && +this.startInput.value > +this.endInput.value) {
+            this.startInput.value = this.endInput.value;
+        }
+        else if (moved === this.endInput && +this.endInput.value < +this.startInput.value) {
+            this.endInput.value = this.startInput.value;
+        }
+        this.update();
+    }
+    update() {
+        const min = this.startInput.min !== '' ? +this.startInput.min : 0;
+        const max = this.startInput.max !== '' ? +this.startInput.max : 100;
+        const startPct = ((+this.startInput.value - min) / (max - min)) * 100;
+        const endPct = ((+this.endInput.value - min) / (max - min)) * 100;
+        this.container.style.setProperty('--range-start', `${startPct}%`);
+        this.container.style.setProperty('--range-end', `${endPct}%`);
+    }
+    destroy() {
+        this.listeners.destroy();
+        this.container.style.removeProperty('--range-start');
+        this.container.style.removeProperty('--range-end');
+        if (this.fillCreatedByUs) {
+            this.fill.remove();
+        }
+    }
+}
+export { RangeSlider, RangeSliderRange };

package/js/scroll.js

@@ -4,14 +4,11 @@ class Scroll {
         const offset = fixedHeader ? fixedHeader.offsetHeight : 0;
         const settings = {
             behavior: 'smooth',
-            offset: offset,
+            offset,
             block: 'start',
-            ...options
+            ...options,
         };
-        let el = target instanceof Element ? target : null;
-        if (typeof target === 'string') {
-            el = document.querySelector(target);
-        }
+        const el = typeof target === 'string' ? document.querySelector(target) : target;
         if (!el)
             return;
         const rect = el.getBoundingClientRect();
@@ -19,7 +16,7 @@ class Scroll {
         const offsetTop = rect.top + scrollTop - settings.offset;
         window.scrollTo({
             top: offsetTop,
-            behavior: settings.behavior
+            behavior: settings.behavior,
         });
     }
 }

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;