@dodlhuat/basix 1.2.1 → 1.2.3

package/js/scrollbar.ts

@@ -9,6 +9,8 @@ class Scrollbar {
     private static readonly instances = new WeakMap<HTMLElement, Scrollbar>();
     private static activeInstance: Scrollbar | null = null;
     private static globalListenersInstalled = false;
+    private static instanceCount = 0;
+    private static globalListenerAbortController: AbortController | null = null;
 
     private readonly container!: HTMLElement;
     private readonly viewport!: HTMLElement;
@@ -32,21 +34,7 @@ class Scrollbar {
     private readonly boundUpdateThumb!: () => void;
     private readonly boundContainerWheel!: (e: WheelEvent) => void;
 
-    constructor(elementOrSelector: string | HTMLElement) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!container) {
-            throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
-        }
-
-        // Return existing instance if already initialized
-        const existingInstance = Scrollbar.instances.get(container);
-        if (existingInstance) {
-            return existingInstance as any;
-        }
-
+    private constructor(container: HTMLElement) {
         this.container = container;
 
         // Query and validate required elements
@@ -75,7 +63,8 @@ class Scrollbar {
         this.attachEventListeners();
         Scrollbar.instances.set(container, this);
 
-        // Install global listeners once for all instances
+        // Track instances and install global listeners once for all
+        Scrollbar.instanceCount++;
         if (!Scrollbar.globalListenersInstalled) {
             Scrollbar.installGlobalListeners();
         }
@@ -112,18 +101,20 @@ class Scrollbar {
     }
 
     private static installGlobalListeners(): void {
-        // Route pointer events to the active scrollbar instance
+        const ac = new AbortController();
+        Scrollbar.globalListenerAbortController = ac;
+
         document.addEventListener('pointermove', (e: PointerEvent) => {
             Scrollbar.activeInstance?.boundPointerMove(e);
-        }, { passive: false });
+        }, { passive: false, signal: ac.signal });
 
         document.addEventListener('pointerup', (e: PointerEvent) => {
             Scrollbar.activeInstance?.boundPointerUp(e);
-        });
+        }, { signal: ac.signal });
 
         document.addEventListener('pointercancel', (e: PointerEvent) => {
             Scrollbar.activeInstance?.boundPointerUp(e);
-        });
+        }, { signal: ac.signal });
 
         Scrollbar.globalListenersInstalled = true;
     }
@@ -300,26 +291,45 @@ class Scrollbar {
         if (Scrollbar.activeInstance === this) {
             Scrollbar.activeInstance = null;
         }
+
+        // Uninstall global listeners when last instance is destroyed
+        Scrollbar.instanceCount--;
+        if (Scrollbar.instanceCount === 0) {
+            Scrollbar.globalListenerAbortController?.abort();
+            Scrollbar.globalListenerAbortController = null;
+            Scrollbar.globalListenersInstalled = false;
+        }
     }
 
     // Static factory methods
+    public static create(elementOrSelector: string | HTMLElement): Scrollbar {
+        const container = typeof elementOrSelector === 'string'
+            ? document.querySelector<HTMLElement>(elementOrSelector)
+            : elementOrSelector;
+
+        if (!container) {
+            throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
+        }
+
+        const existing = Scrollbar.instances.get(container);
+        if (existing) return existing;
+
+        return new Scrollbar(container);
+    }
+
     public static initAll(selector: string): Scrollbar[] {
         const containers = document.querySelectorAll<HTMLElement>(selector);
-        return Array.from(containers).map(container => new Scrollbar(container));
+        return Array.from(containers).map(container => Scrollbar.create(container));
     }
 
     public static initOne(elementOrSelector: string | HTMLElement): Scrollbar {
-        return new Scrollbar(elementOrSelector);
+        return Scrollbar.create(elementOrSelector);
     }
 
     public static getInstance(container: HTMLElement): Scrollbar | undefined {
         return Scrollbar.instances.get(container);
     }
 
-    public static destroyAll(): void {
-        // Note: WeakMap doesn't support iteration, so this is a no-op
-        // Individual instances should be destroyed by calling destroy()
-    }
 }
 
 export { Scrollbar, ScrollbarElements };

package/js/select.js

@@ -11,7 +11,18 @@ class Select {
         if (result === null) {
             throw new Error(`Select: Failed to initialize select for "${elementOrSelector}"`);
         }
-        this.isMultiselect = result;
+        this.isMultiselect = result.isMulti;
+        this.dropdown = result.dropdown;
+        this.documentClickHandler = (e) => {
+            if (this.dropdown && !this.dropdown.contains(e.target)) {
+                this.dropdown.classList.remove('open');
+            }
+        };
+        document.addEventListener('click', this.documentClickHandler);
+    }
+    destroy() {
+        document.removeEventListener('click', this.documentClickHandler);
+        this.dropdown?.classList.remove('open');
     }
     value() {
         if (!this.element) {
@@ -29,7 +40,16 @@ class Select {
         if (!element) {
             return null;
         }
-        return Select.initElement(element);
+        const result = Select.initElement(element);
+        if (!result)
+            return null;
+        // Static init path: add document listener without lifecycle management
+        document.addEventListener('click', (e) => {
+            if (!result.dropdown.contains(e.target)) {
+                result.dropdown.classList.remove('open');
+            }
+        });
+        return result.isMulti;
     }
     static initElement(element) {
         if (!Select.transformSelect(element)) {
@@ -74,13 +94,7 @@ class Select {
                 dropdown.classList.remove('open');
             });
         }
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!dropdown.contains(e.target)) {
-                dropdown.classList.remove('open');
-            }
-        });
-        return isMulti;
+        return { isMulti, dropdown };
     }
     static closeAllDropdowns(exceptDropdown) {
         document.querySelectorAll('.dropdown').forEach(dropdown => {

package/js/select.ts

@@ -1,6 +1,8 @@
 class Select {
     private readonly element: HTMLSelectElement;
     private readonly isMultiselect: boolean;
+    private readonly dropdown: HTMLElement | null;
+    private readonly documentClickHandler: (e: Event) => void;
 
     constructor(elementOrSelector: string | HTMLSelectElement) {
         const element = typeof elementOrSelector === 'string'
@@ -18,7 +20,20 @@ class Select {
             throw new Error(`Select: Failed to initialize select for "${elementOrSelector}"`);
         }
 
-        this.isMultiselect = result;
+        this.isMultiselect = result.isMulti;
+        this.dropdown = result.dropdown;
+
+        this.documentClickHandler = (e: Event) => {
+            if (this.dropdown && !this.dropdown.contains(e.target as Node)) {
+                this.dropdown.classList.remove('open');
+            }
+        };
+        document.addEventListener('click', this.documentClickHandler);
+    }
+
+    public destroy(): void {
+        document.removeEventListener('click', this.documentClickHandler);
+        this.dropdown?.classList.remove('open');
     }
 
     public value(): string | string[] | undefined {
@@ -42,10 +57,20 @@ class Select {
             return null;
         }
 
-        return Select.initElement(element);
+        const result = Select.initElement(element);
+        if (!result) return null;
+
+        // Static init path: add document listener without lifecycle management
+        document.addEventListener('click', (e: Event) => {
+            if (!result.dropdown.contains(e.target as Node)) {
+                result.dropdown.classList.remove('open');
+            }
+        });
+
+        return result.isMulti;
     }
 
-    private static initElement(element: HTMLSelectElement): boolean | null {
+    private static initElement(element: HTMLSelectElement): { isMulti: boolean; dropdown: HTMLElement } | null {
         if (!Select.transformSelect(element)) {
             return null;
         }
@@ -98,14 +123,7 @@ class Select {
             });
         }
 
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e: Event) => {
-            if (!dropdown.contains(e.target as Node)) {
-                dropdown.classList.remove('open');
-            }
-        });
-
-        return isMulti;
+        return { isMulti, dropdown };
     }
 
     private static closeAllDropdowns(exceptDropdown?: HTMLElement): void {

package/js/stepper.js

@@ -1,5 +1,6 @@
 class Stepper {
     constructor(elementOrSelector, options = {}) {
+        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -17,7 +18,7 @@ class Stepper {
         if (options.clickable) {
             this.container.classList.add('stepper-clickable');
             this.steps.forEach((step, i) => {
-                step.addEventListener('click', () => this.goTo(i));
+                step.addEventListener('click', () => this.goTo(i), { signal: this.abortController.signal });
             });
         }
         this.render();
@@ -76,5 +77,8 @@ class Stepper {
     isLast() {
         return this.current === this.steps.length - 1;
     }
+    destroy() {
+        this.abortController.abort();
+    }
 }
 export { Stepper };

package/js/stepper.ts

@@ -10,6 +10,7 @@ class Stepper {
     private connectors: HTMLElement[];
     private current: number;
     private readonly onChange?: (current: number, previous: number) => void;
+    private abortController = new AbortController();
 
     constructor(elementOrSelector: string | HTMLElement, options: StepperOptions = {}) {
         const element = typeof elementOrSelector === 'string'
@@ -32,7 +33,7 @@ class Stepper {
         if (options.clickable) {
             this.container.classList.add('stepper-clickable');
             this.steps.forEach((step, i) => {
-                step.addEventListener('click', () => this.goTo(i));
+                step.addEventListener('click', () => this.goTo(i), { signal: this.abortController.signal });
             });
         }
 
@@ -99,6 +100,10 @@ class Stepper {
     public isLast(): boolean {
         return this.current === this.steps.length - 1;
     }
+
+    public destroy(): void {
+        this.abortController.abort();
+    }
 }
 
 export { Stepper, type StepperOptions };

package/js/table.js

@@ -1,6 +1,7 @@
 import { Select } from "./select.js";
 class Table {
     constructor(elementOrSelector, options = {}) {
+        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -74,7 +75,7 @@ class Table {
         searchInput.className = 'search-input';
         searchInput.addEventListener('input', (e) => {
             this.handleSearch(e.target.value);
-        });
+        }, { signal: this.abortController.signal });
         controlsDiv.appendChild(searchInput);
         // Page size selector
         const selectGroup = document.createElement('div');
@@ -93,7 +94,7 @@ class Table {
         });
         pageSizeSelect.addEventListener('change', (e) => {
             this.handlePageSizeChange(parseInt(e.target.value, 10));
-        });
+        }, { signal: this.abortController.signal });
         this.assignUniqueId(pageSizeSelect, 'page-size-select-0');
         selectGroup.appendChild(pageSizeSelect);
         controlsDiv.appendChild(selectGroup);
@@ -117,7 +118,7 @@ class Table {
             th.dataset.key = col.key;
             if (col.sortable !== false) {
                 th.classList.add('sortable');
-                th.addEventListener('click', () => this.handleSort(col.key));
+                th.addEventListener('click', () => this.handleSort(col.key), { signal: this.abortController.signal });
             }
             tr.appendChild(th);
         });
@@ -355,5 +356,9 @@ class Table {
     getData() {
         return this.getFilteredAndSortedData();
     }
+    destroy() {
+        this.abortController.abort();
+        this.container.innerHTML = '';
+    }
 }
 export { Table };

package/js/table.ts

@@ -30,6 +30,7 @@ class Table {
     private tableBody!: HTMLTableSectionElement;
     private tableHeader!: HTMLTableSectionElement;
     private paginationContainer!: HTMLDivElement;
+    private abortController = new AbortController();
 
     constructor(elementOrSelector: string | HTMLElement, options: TableOptions = {}) {
         const element = typeof elementOrSelector === 'string'
@@ -118,7 +119,7 @@ class Table {
         searchInput.className = 'search-input';
         searchInput.addEventListener('input', (e) => {
             this.handleSearch((e.target as HTMLInputElement).value);
-        });
+        }, { signal: this.abortController.signal });
         controlsDiv.appendChild(searchInput);
 
         // Page size selector
@@ -142,7 +143,7 @@ class Table {
 
         pageSizeSelect.addEventListener('change', (e) => {
             this.handlePageSizeChange(parseInt((e.target as HTMLSelectElement).value, 10));
-        });
+        }, { signal: this.abortController.signal });
 
         this.assignUniqueId(pageSizeSelect, 'page-size-select-0');
         selectGroup.appendChild(pageSizeSelect);
@@ -172,7 +173,7 @@ class Table {
 
             if (col.sortable !== false) {
                 th.classList.add('sortable');
-                th.addEventListener('click', () => this.handleSort(col.key));
+                th.addEventListener('click', () => this.handleSort(col.key), { signal: this.abortController.signal });
             }
 
             tr.appendChild(th);
@@ -448,6 +449,11 @@ class Table {
     public getData(): TableRow[] {
         return this.getFilteredAndSortedData();
     }
+
+    public destroy(): void {
+        this.abortController.abort();
+        this.container.innerHTML = '';
+    }
 }
 
 export { Table, TableRow, TableColumn, TableOptions };

package/js/timepicker.js

@@ -1,11 +1,18 @@
 class TimeSpanPicker {
-    constructor(containerId, options) {
-        const element = document.getElementById(containerId);
+    constructor(elementOrSelector, options) {
+        this.handleStartChange = () => { this.handleChange(); };
+        this.handleEndChange = () => { this.handleChange(); };
+        const element = typeof elementOrSelector === 'string'
+            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+                ? document.querySelector(elementOrSelector)
+                : document.getElementById(elementOrSelector))
+            : elementOrSelector;
         if (!element) {
-            throw new Error(`Container with id "${containerId}" not found`);
+            throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
         }
         this.container = element;
         this.onChange = options?.onChange;
+        this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
         this.render();
         this.startTimeInput = this.queryInput('.timespan-start');
         this.endTimeInput = this.queryInput('.timespan-end');
@@ -29,15 +36,13 @@ class TimeSpanPicker {
         return input;
     }
     render() {
+        const startId = `${this.uid}-start`;
+        const endId = `${this.uid}-end`;
         this.container.innerHTML = `
       <div class="timespan-picker">
         <div class="timespan-field timespan-field-start">
-          <label for="timespan-start">From</label>
-          <input
-            type="time"
-            class="timespan-start"
-            id="timespan-start"
-          />
+          <label for="${startId}">From</label>
+          <input type="time" class="timespan-start" id="${startId}"/>
         </div>
 
         <div class="timespan-center">
@@ -46,12 +51,8 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="timespan-end">To</label>
-          <input
-            type="time"
-            class="timespan-end"
-            id="timespan-end"
-          />
+          <label for="${endId}">To</label>
+          <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>
       <div class="timespan-bar" aria-hidden="true">
@@ -60,8 +61,8 @@ class TimeSpanPicker {
     `;
     }
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', () => this.handleChange());
-        this.endTimeInput.addEventListener('change', () => this.handleChange());
+        this.startTimeInput.addEventListener('change', this.handleStartChange);
+        this.endTimeInput.addEventListener('change', this.handleEndChange);
     }
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
@@ -148,10 +149,8 @@ class TimeSpanPicker {
         return !!(start && end && start < end);
     }
     destroy() {
-        const startHandler = () => this.handleChange();
-        const endHandler = () => this.handleChange();
-        this.startTimeInput.removeEventListener('change', startHandler);
-        this.endTimeInput.removeEventListener('change', endHandler);
+        this.startTimeInput.removeEventListener('change', this.handleStartChange);
+        this.endTimeInput.removeEventListener('change', this.handleEndChange);
     }
 }
 export { TimeSpanPicker };

package/js/timepicker.ts

@@ -14,15 +14,22 @@ class TimeSpanPicker {
     private startTimeInput: HTMLInputElement;
     private endTimeInput: HTMLInputElement;
     private onChange?: (start: string, end: string) => void;
+    private readonly uid: string;
+
+    constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions) {
+        const element = typeof elementOrSelector === 'string'
+            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+                ? document.querySelector<HTMLElement>(elementOrSelector)
+                : document.getElementById(elementOrSelector))
+            : elementOrSelector;
 
-    constructor(containerId: string, options?: TimeSpanPickerOptions) {
-        const element = document.getElementById(containerId);
         if (!element) {
-            throw new Error(`Container with id "${containerId}" not found`);
+            throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
         }
 
         this.container = element;
         this.onChange = options?.onChange;
+        this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
 
         this.render();
 
@@ -53,15 +60,13 @@ class TimeSpanPicker {
     }
 
     private render(): void {
+        const startId = `${this.uid}-start`;
+        const endId = `${this.uid}-end`;
         this.container.innerHTML = `
       <div class="timespan-picker">
         <div class="timespan-field timespan-field-start">
-          <label for="timespan-start">From</label>
-          <input
-            type="time"
-            class="timespan-start"
-            id="timespan-start"
-          />
+          <label for="${startId}">From</label>
+          <input type="time" class="timespan-start" id="${startId}"/>
         </div>
 
         <div class="timespan-center">
@@ -70,12 +75,8 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="timespan-end">To</label>
-          <input
-            type="time"
-            class="timespan-end"
-            id="timespan-end"
-          />
+          <label for="${endId}">To</label>
+          <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>
       <div class="timespan-bar" aria-hidden="true">
@@ -84,9 +85,12 @@ class TimeSpanPicker {
     `;
     }
 
+    private readonly handleStartChange = (): void => { this.handleChange(); };
+    private readonly handleEndChange = (): void => { this.handleChange(); };
+
     private attachEventListeners(): void {
-        this.startTimeInput.addEventListener('change', () => this.handleChange());
-        this.endTimeInput.addEventListener('change', () => this.handleChange());
+        this.startTimeInput.addEventListener('change', this.handleStartChange);
+        this.endTimeInput.addEventListener('change', this.handleEndChange);
     }
 
     private toMinutes(time: string): number {
@@ -183,10 +187,8 @@ class TimeSpanPicker {
     }
 
     public destroy(): void {
-        const startHandler = () => this.handleChange();
-        const endHandler = () => this.handleChange();
-        this.startTimeInput.removeEventListener('change', startHandler);
-        this.endTimeInput.removeEventListener('change', endHandler);
+        this.startTimeInput.removeEventListener('change', this.handleStartChange);
+        this.endTimeInput.removeEventListener('change', this.handleEndChange);
     }
 }
 

package/js/toast.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class Toast {
     constructor(contentOrOptions, header = '', type, closeable = true) {
         this.closureIcon = '<div class="icon icon-close close"></div>';
@@ -79,15 +80,10 @@ class Toast {
             parts.push(this.closureIcon);
         }
         if (this.header) {
-            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
+            parts.push(`<div class="header">${escapeHtml(this.header)}</div>`);
         }
-        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+        parts.push(`<div class="content">${escapeHtml(this.content)}</div>`);
         return parts.join('');
     }
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
 }
 export { Toast };

package/js/toast.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 
 interface ToastOptions {
@@ -119,19 +121,13 @@ class Toast {
         }
 
         if (this.header) {
-            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
+            parts.push(`<div class="header">${escapeHtml(this.header)}</div>`);
         }
 
-        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+        parts.push(`<div class="content">${escapeHtml(this.content)}</div>`);
 
         return parts.join('');
     }
-
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
 }
 
 export { Toast };

package/js/tooltip.js

@@ -23,7 +23,8 @@ class Tooltip {
             position: options.position ?? 'auto',
             offset: options.offset ?? 8,
             delay: options.delay ?? 0,
-            className: options.className ?? ''
+            className: options.className ?? '',
+            isHtml: options.isHtml ?? false,
         };
         this.attachEvents();
     }
@@ -34,7 +35,7 @@ class Tooltip {
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
             if (content) {
-                new Tooltip(trigger, content, { position, className });
+                new Tooltip(trigger, content, { position, className, isHtml: false });
             }
         });
         // Also support content from separate elements
@@ -47,7 +48,7 @@ class Tooltip {
                 const contentElement = document.getElementById(contentId);
                 if (contentElement) {
                     const content = contentElement.innerHTML;
-                    new Tooltip(trigger, content, { position, className });
+                    new Tooltip(trigger, content, { position, className, isHtml: true });
                 }
             }
         });
@@ -94,7 +95,15 @@ class Tooltip {
         tooltip.className = 'tooltip';
         tooltip.id = `tooltip-${++Tooltip.idCounter}`;
         tooltip.setAttribute('role', 'tooltip');
-        tooltip.innerHTML = `<div class="tooltip-content">${this.content}</div>`;
+        const tooltipContent = document.createElement('div');
+        tooltipContent.className = 'tooltip-content';
+        if (this.options.isHtml) {
+            tooltipContent.innerHTML = this.content;
+        }
+        else {
+            tooltipContent.textContent = this.content;
+        }
+        tooltip.appendChild(tooltipContent);
         if (this.options.className) {
             tooltip.classList.add(this.options.className);
         }