@dodlhuat/basix 1.2.2 → 1.2.4

package/js/modal.ts

@@ -1,3 +1,5 @@
+import { sanitizeHtml } from './utils.js';
+
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
 
 type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
@@ -81,7 +83,7 @@ class Modal {
     }
 
     public hide(): void {
-        const wrapper = document.querySelector('.modal-wrapper');
+        const wrapper = this.modalWrapper;
         if (!wrapper) return;
 
         // Remove event listeners
@@ -123,13 +125,13 @@ class Modal {
 
         if (this.header !== undefined) {
             const headerClass = `header ${this.type}-bg`;
-            parts.push(`<div class="${headerClass}">${this.header}</div>`);
+            parts.push(`<div class="${headerClass}">${sanitizeHtml(this.header)}</div>`);
         }
 
-        parts.push(this.content);
+        parts.push(sanitizeHtml(this.content));
 
         if (this.footer !== undefined) {
-            parts.push(`<div class="footer">${this.footer}</div>`);
+            parts.push(`<div class="footer">${sanitizeHtml(this.footer)}</div>`);
         }
 
         parts.push('</div>');

package/js/popover.js

@@ -1,4 +1,5 @@
 import { computePosition } from './position.js';
+import { sanitizeHtml } from './utils.js';
 // Must match $arrow in popover.scss
 const ARROW_SIZE = 6;
 class Popover {
@@ -119,9 +120,10 @@ class Popover {
         // Wrap plain content in .popover-body so it gets proper padding.
         // Skip wrapping when content already uses structured popover elements.
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
+        const safeContent = sanitizeHtml(this.opts.content);
         el.innerHTML = hasStructure
-            ? this.opts.content
-            : `<div class="popover-body">${this.opts.content}</div>`;
+            ? safeContent
+            : `<div class="popover-body">${safeContent}</div>`;
         this.trigger.setAttribute('aria-expanded', 'true');
         this.trigger.setAttribute('aria-controls', id);
         return el;

package/js/popover.ts

@@ -1,5 +1,6 @@
 import { computePosition } from './position.js';
 import type { Placement } from './position.js';
+import { sanitizeHtml } from './utils.js';
 
 type PopoverPlacement = Placement | 'auto';
 type PopoverAlign     = 'start' | 'center' | 'end';
@@ -142,9 +143,10 @@ class Popover {
         // Wrap plain content in .popover-body so it gets proper padding.
         // Skip wrapping when content already uses structured popover elements.
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
+        const safeContent = sanitizeHtml(this.opts.content);
         el.innerHTML = hasStructure
-            ? this.opts.content
-            : `<div class="popover-body">${this.opts.content}</div>`;
+            ? safeContent
+            : `<div class="popover-body">${safeContent}</div>`;
 
         this.trigger.setAttribute('aria-expanded', 'true');
         this.trigger.setAttribute('aria-controls', id);

package/js/push-menu.js

@@ -9,7 +9,8 @@ class PushMenu {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
         }
         this.buildPanels();
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+        this.boundHandleNavigationChange = this.handleNavigationChange.bind(this);
+        this.elements.navigation.addEventListener('change', this.boundHandleNavigationChange);
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
         this.initialized = true;
     }
@@ -179,7 +180,7 @@ class PushMenu {
     static destroy() {
         if (!this.initialized)
             return;
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
         this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
         this.close();

package/js/push-menu.ts

@@ -19,6 +19,7 @@ class PushMenu {
 
     private static initialized = false;
     private static panelStack: HTMLElement[] = [];
+    private static boundHandleNavigationChange: () => void;
 
     public static init(): void {
         if (this.initialized) {
@@ -34,7 +35,8 @@ class PushMenu {
 
         this.buildPanels();
 
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+        this.boundHandleNavigationChange = this.handleNavigationChange.bind(this);
+        this.elements.navigation.addEventListener('change', this.boundHandleNavigationChange);
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
 
         this.initialized = true;
@@ -252,7 +254,7 @@ class PushMenu {
     public static destroy(): void {
         if (!this.initialized) return;
 
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
         this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
 

package/js/scrollbar.js

@@ -1,20 +1,9 @@
 class Scrollbar {
-    constructor(elementOrSelector) {
+    constructor(container) {
         this.dragging = false;
         this.activePointerId = null;
         this.startPointerY = 0;
         this.startThumbTop = 0;
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(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;
-        }
         this.container = container;
         // Query and validate required elements
         const elements = this.getRequiredElements(container);
@@ -37,7 +26,8 @@ class Scrollbar {
         // Initialize
         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();
         }
@@ -64,16 +54,17 @@ class Scrollbar {
         return Math.max(absoluteMin, parsed || defaultMin);
     }
     static installGlobalListeners() {
-        // Route pointer events to the active scrollbar instance
+        const ac = new AbortController();
+        Scrollbar.globalListenerAbortController = ac;
         document.addEventListener('pointermove', (e) => {
             Scrollbar.activeInstance?.boundPointerMove(e);
-        }, { passive: false });
+        }, { passive: false, signal: ac.signal });
         document.addEventListener('pointerup', (e) => {
             Scrollbar.activeInstance?.boundPointerUp(e);
-        });
+        }, { signal: ac.signal });
         document.addEventListener('pointercancel', (e) => {
             Scrollbar.activeInstance?.boundPointerUp(e);
-        });
+        }, { signal: ac.signal });
         Scrollbar.globalListenersInstalled = true;
     }
     attachEventListeners() {
@@ -209,24 +200,41 @@ 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
+    static create(elementOrSelector) {
+        const container = typeof elementOrSelector === 'string'
+            ? document.querySelector(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);
+    }
     static initAll(selector) {
         const containers = document.querySelectorAll(selector);
-        return Array.from(containers).map(container => new Scrollbar(container));
+        return Array.from(containers).map(container => Scrollbar.create(container));
     }
     static initOne(elementOrSelector) {
-        return new Scrollbar(elementOrSelector);
+        return Scrollbar.create(elementOrSelector);
     }
     static getInstance(container) {
         return Scrollbar.instances.get(container);
     }
-    static destroyAll() {
-        // Note: WeakMap doesn't support iteration, so this is a no-op
-        // Individual instances should be destroyed by calling destroy()
-    }
 }
 Scrollbar.instances = new WeakMap();
 Scrollbar.activeInstance = null;
 Scrollbar.globalListenersInstalled = false;
+Scrollbar.instanceCount = 0;
+Scrollbar.globalListenerAbortController = null;
 export { Scrollbar };

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 };