@dodlhuat/basix 1.3.1 → 1.3.3

package/js/context-menu.js

@@ -1,9 +1,14 @@
+/** Right-click context menu with keyboard navigation and nested submenu support. */
 class ContextMenu {
-    constructor(selectorOrElement, items) {
-        this.menuEl = null;
-        this.currentTarget = null;
-        this.abortController = new AbortController();
+    items;
+    targets;
+    menuEl = null;
+    currentTarget = null;
+    abortController = new AbortController();
+    spritePath;
+    constructor(selectorOrElement, items, options = {}) {
         this.items = items;
+        this.spritePath = options.spritePath ?? null;
         if (typeof selectorOrElement === 'string') {
             this.targets = Array.from(document.querySelectorAll(selectorOrElement));
         }
@@ -25,7 +30,6 @@ class ContextMenu {
             }, { signal });
         });
         document.addEventListener('click', () => this.close(), { signal });
-        // Close on right-click outside the menu
         document.addEventListener('contextmenu', (e) => {
             if (this.menuEl && !this.menuEl.contains(e.target)) {
                 this.close();
@@ -50,7 +54,6 @@ class ContextMenu {
                 this.activateFocused();
             }
         }, { signal });
-        // Close on scroll outside the menu
         window.addEventListener('scroll', (e) => {
             if (!this.menuEl?.contains(e.target))
                 this.close();
@@ -61,14 +64,12 @@ class ContextMenu {
         this.close();
         this.menuEl = this.buildMenu(this.items);
         document.body.appendChild(this.menuEl);
-        // Use offsetWidth/offsetHeight — unaffected by CSS transform
         const w = this.menuEl.offsetWidth;
         const h = this.menuEl.offsetHeight;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         const left = x + w > vw ? vw - w - 8 : x;
         const top = y + h > vh ? vh - h - 8 : y;
-        // Set transform-origin to match the corner the menu opens from
         const originX = x + w > vw ? 'right' : 'left';
         const originY = y + h > vh ? 'bottom' : 'top';
         this.menuEl.style.left = `${left}px`;
@@ -82,7 +83,6 @@ class ContextMenu {
         const el = this.menuEl;
         this.menuEl = null;
         el.classList.remove('is-visible');
-        // Wait for exit transition then remove from DOM
         el.addEventListener('transitionend', () => el.remove(), { once: true });
         setTimeout(() => el.isConnected && el.remove(), 200);
     }
@@ -116,11 +116,16 @@ class ContextMenu {
             li.classList.add('is-destructive');
         if (def.submenu)
             li.classList.add('has-submenu');
-        // Always render icon slot — keeps label column aligned across all items
         const iconWrap = document.createElement('span');
         iconWrap.className = 'context-menu-icon';
-        if (def.icon) {
-            iconWrap.innerHTML = `<svg class="icon-svg"><use href="svg-icons/icons.svg#${def.icon}"/></svg>`;
+        if (def.icon && this.spritePath) {
+            const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgEl.setAttribute('aria-hidden', 'true');
+            svgEl.setAttribute('fill', 'currentColor');
+            const useEl = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+            useEl.setAttribute('href', `${this.spritePath}#${def.icon}`);
+            svgEl.appendChild(useEl);
+            iconWrap.appendChild(svgEl);
         }
         li.appendChild(iconWrap);
         const label = document.createElement('span');
@@ -139,7 +144,6 @@ class ContextMenu {
             li.appendChild(chevron);
             const submenuEl = this.buildMenu(def.submenu);
             li.appendChild(submenuEl);
-            // Determine flip synchronously from parent position — no rAF flash
             const shouldFlip = () => {
                 const rect = li.getBoundingClientRect();
                 return rect.right + submenuEl.offsetWidth > window.innerWidth;
@@ -179,7 +183,6 @@ class ContextMenu {
         return li;
     }
     closeAllSubmenus(menu) {
-        // Only close direct-child submenus of this menu level
         Array.from(menu.children).forEach((child) => {
             child.classList.remove('is-active');
         });

package/js/datepicker.d.ts

@@ -1,7 +1,9 @@
+/** Localised day and month names for the DatePicker. */
 interface DatePickerLocales {
     days: string[];
     months: string[];
 }
+/** Configuration options for the DatePicker. */
 interface DatePickerOptions {
     mode?: 'single' | 'range';
     startDay?: number;
@@ -10,10 +12,12 @@ interface DatePickerOptions {
     format?: (date: Date) => string;
     onSelect?: (date: Date | DateRange) => void;
 }
+/** A date range with optional start and end dates. */
 interface DateRange {
     start: Date | null;
     end: Date | null;
 }
+/** Calendar-based date (or date-range) picker that attaches to an input element. */
 declare class DatePicker {
     private input;
     private options;

package/js/datepicker.js

@@ -1,6 +1,23 @@
+import { computePosition } from './position.js';
+/** Calendar-based date (or date-range) picker that attaches to an input element. */
 class DatePicker {
+    input;
+    options;
+    currentDate;
+    selectedDate;
+    rangeStart;
+    rangeEnd;
+    viewYear;
+    viewMonth;
+    viewMode;
+    yearRangeStart;
+    selectedHours;
+    selectedMinutes;
+    calendar;
+    backdrop;
+    handleDocumentClick;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
-        this.abortController = new AbortController();
         this.input = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -96,14 +113,14 @@ class DatePicker {
             this.backdrop.classList.remove('visible');
             document.body.style.overflow = '';
             if (this.input) {
-                const rect = this.input.getBoundingClientRect();
-                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-                this.calendar.style.top = `${rect.bottom + scrollTop + 5}px`;
-                this.calendar.style.left = `${rect.left + scrollLeft}px`;
-                if (rect.left + 320 > window.innerWidth) {
-                    this.calendar.style.left = `${rect.right + scrollLeft - 320}px`;
-                }
+                this.calendar.style.display = 'block';
+                this.calendar.style.visibility = 'hidden';
+                const calRect = this.calendar.getBoundingClientRect();
+                this.calendar.style.display = '';
+                this.calendar.style.visibility = '';
+                const { left, top } = computePosition(this.input.getBoundingClientRect(), calRect, { placement: 'bottom', align: 'start', offset: 5 });
+                this.calendar.style.top = `${top}px`;
+                this.calendar.style.left = `${left}px`;
             }
             setTimeout(() => {
                 if (this.calendar.classList.contains('visible')) {
@@ -345,7 +362,6 @@ class DatePicker {
         wrapper.appendChild(label);
         const controls = document.createElement('div');
         controls.className = 'datepicker-time-controls';
-        // Hours spinner
         const hoursSpinner = this.createSpinner(this.selectedHours, 0, 23, (value) => {
             this.selectedHours = value;
             this.applyTimeToSelection();
@@ -353,7 +369,6 @@ class DatePicker {
         const separator = document.createElement('span');
         separator.className = 'datepicker-time-separator';
         separator.textContent = ':';
-        // Minutes spinner
         const minutesSpinner = this.createSpinner(this.selectedMinutes, 0, 59, (value) => {
             this.selectedMinutes = value;
             this.applyTimeToSelection();

package/js/dropdown.d.ts

@@ -1,11 +1,14 @@
+/** Configuration options for a Dropdown instance. */
 interface DropdownOptions {
     closeOnSelect?: boolean;
     allowMultipleOpen?: boolean;
 }
+/** Event detail payload for the `dropdown-select` custom event. */
 interface DropdownSelectDetail {
     text: string;
     element: HTMLElement;
 }
+/** Hierarchical dropdown menu with optional multi-open and close-on-select behaviour. */
 declare class Dropdown {
     private container;
     private trigger;
@@ -22,9 +25,6 @@ declare class Dropdown {
     private toggleSubmenu;
     private closeAllSubmenus;
     private handleSelection;
-    /**
-     * Cleanup method to remove event listeners
-     */
     destroy(): void;
 }
 export { Dropdown, DropdownSelectDetail };

package/js/dropdown.js

@@ -1,4 +1,10 @@
+/** Hierarchical dropdown menu with optional multi-open and close-on-select behaviour. */
 class Dropdown {
+    container;
+    trigger;
+    menu;
+    options;
+    abortController;
     constructor(selector, options = {}) {
         const container = document.querySelector(selector);
         if (!container) {
@@ -26,18 +32,15 @@ class Dropdown {
     }
     attachEventListeners() {
         const { signal } = this.abortController;
-        // Toggle main dropdown
         this.trigger.addEventListener('click', (e) => {
             e.stopPropagation();
             this.toggle();
         }, { signal });
-        // Close when clicking outside
         document.addEventListener('click', (e) => {
             if (!this.container.contains(e.target)) {
                 this.close();
             }
         }, { signal });
-        // Handle item clicks using event delegation
         this.menu.addEventListener('click', (e) => {
             e.stopPropagation();
             const target = e.target;
@@ -78,7 +81,6 @@ class Dropdown {
     }
     toggleSubmenu(li) {
         const isOpening = !li.classList.contains('open');
-        // Close siblings if not allowing multiple open menus
         if (isOpening && !this.options.allowMultipleOpen) {
             const parent = li.parentElement;
             if (parent) {
@@ -86,7 +88,6 @@ class Dropdown {
                 siblings.forEach((sibling) => {
                     if (sibling !== li && sibling.classList.contains('open')) {
                         sibling.classList.remove('open');
-                        // Close deeply nested open items
                         const deepOpenItems = sibling.querySelectorAll('.open');
                         deepOpenItems.forEach((el) => el.classList.remove('open'));
                     }
@@ -101,7 +102,6 @@ class Dropdown {
     }
     handleSelection(item) {
         const text = item.textContent?.trim() ?? '';
-        // Dispatch custom event with proper typing
         const event = new CustomEvent('dropdown-select', {
             detail: {
                 text,
@@ -111,9 +111,6 @@ class Dropdown {
         });
         this.container.dispatchEvent(event);
     }
-    /**
-     * Cleanup method to remove event listeners
-     */
     destroy() {
         this.abortController.abort();
         this.close();

package/js/editor.d.ts

@@ -3,6 +3,7 @@ interface EditorOptions {
      *  without #code, #preview, or #sidePanel in the DOM. */
     simple?: boolean;
 }
+/** Rich-text editor built on contenteditable with undo/redo and code/preview panels. */
 declare class Editor {
     private readonly editable;
     private readonly code;
@@ -33,7 +34,6 @@ declare class Editor {
     private insertList;
     private setAlignment;
     private setForeColor;
-    private sanitizeHTML;
     private downloadHTML;
     private refreshActiveState;
     destroy(): void;

package/js/editor.js

@@ -1,8 +1,15 @@
+import { sanitizeHtml } from './utils.js';
+/** Rich-text editor built on contenteditable with undo/redo and code/preview panels. */
 class Editor {
+    editable;
+    code;
+    preview;
+    sidePanel;
+    wordCount;
+    undoStack = [];
+    redoStack = [];
+    abortController = new AbortController();
     constructor(options = {}) {
-        this.undoStack = [];
-        this.redoStack = [];
-        this.abortController = new AbortController();
         const editable = document.getElementById('editable');
         if (!editable) {
             throw new Error('Editor: #editable element not found');
@@ -89,11 +96,11 @@ class Editor {
             const code = this.code;
             const codeActions = document.querySelectorAll('.code-actions button');
             codeActions[0]?.addEventListener('click', () => {
-                this.editable.innerHTML = this.sanitizeHTML(code.value);
+                this.editable.innerHTML = sanitizeHtml(code.value);
                 this.onContentChange();
             }, sig);
             codeActions[1]?.addEventListener('click', () => {
-                code.value = this.sanitizeHTML(code.value);
+                code.value = sanitizeHtml(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
             }, sig);
@@ -183,7 +190,7 @@ class Editor {
         if (this.code)
             this.code.value = this.editable.innerHTML.trim();
         if (this.preview)
-            this.preview.innerHTML = this.sanitizeHTML(this.editable.innerHTML);
+            this.preview.innerHTML = sanitizeHtml(this.editable.innerHTML);
         this.updateWordCount();
     }
     updateWordCount() {
@@ -407,21 +414,8 @@ class Editor {
         sel.addRange(range);
         this.onContentChange();
     }
-    sanitizeHTML(html) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, 'text/html');
-        doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
-        doc.querySelectorAll('*').forEach(el => {
-            for (const attr of Array.from(el.attributes)) {
-                if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) {
-                    el.removeAttribute(attr.name);
-                }
-            }
-        });
-        return doc.body.innerHTML;
-    }
     downloadHTML() {
-        const content = this.sanitizeHTML(this.editable.innerHTML);
+        const content = sanitizeHtml(this.editable.innerHTML);
         const html = `<!doctype html>
 <html lang="en">
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Export</title></head>

package/js/file-uploader.d.ts

@@ -1,17 +1,21 @@
+/** Event detail payload for the `upload-completed` custom event. */
 interface UploadCompletedDetail {
     fileCount: number;
     files: File[];
     results: PromiseSettledResult<unknown>[];
 }
+/** Event detail payload for the `file-validation-error` custom event. */
 interface FileValidationErrorDetail {
     file: File;
     reason: 'size' | 'type';
 }
+/** Configuration options for the FileUploader. */
 interface FileUploaderConfig {
     uploadUrl?: string;
     maxFileSize?: number;
     allowedTypes?: string[];
 }
+/** Drag-and-drop file uploader with progress tracking and XHR-based uploads. */
 declare class FileUploader {
     private container;
     private dropZone;

package/js/file-uploader.js

@@ -1,49 +1,17 @@
 import { escapeHtml } from './utils.js';
+/** Drag-and-drop file uploader with progress tracking and XHR-based uploads. */
 class FileUploader {
+    container;
+    dropZone;
+    fileInput;
+    fileList;
+    uploadBtn;
+    files = new Map();
+    uploadUrl;
+    maxFileSize;
+    allowedTypes;
+    abortControllers = new Map();
     constructor(elementOrSelector, config = {}) {
-        this.files = new Map();
-        this.abortControllers = new Map();
-        this.preventDefaults = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        this.handleDragEnter = () => {
-            this.dropZone.classList.add('drag-over');
-        };
-        this.handleDragLeave = () => {
-            this.dropZone.classList.remove('drag-over');
-        };
-        this.handleDrop = (e) => {
-            const droppedFiles = e.dataTransfer?.files;
-            if (droppedFiles) {
-                this.handleFiles(droppedFiles);
-            }
-        };
-        this.handleDropZoneClick = () => {
-            this.fileInput.click();
-        };
-        this.handleFileInputChange = (e) => {
-            const target = e.target;
-            if (target.files) {
-                this.handleFiles(target.files);
-                target.value = '';
-            }
-        };
-        this.handleUploadClick = async () => {
-            if (this.files.size === 0)
-                return;
-            this.uploadBtn.disabled = true;
-            this.uploadBtn.textContent = 'Uploading...';
-            const uploadPromises = Array.from(this.files.values()).map(({ file, element }) => this.uploadFile(file, element));
-            const results = await Promise.allSettled(uploadPromises);
-            this.uploadBtn.textContent = 'Upload Complete';
-            setTimeout(() => {
-                this.dispatchUploadCompletedEvent(results);
-                this.fileList.innerHTML = '';
-                this.files.clear();
-                this.updateUploadButton();
-            }, 1500);
-        };
         const container = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -89,6 +57,47 @@ class FileUploader {
         this.fileInput.addEventListener('change', this.handleFileInputChange);
         this.uploadBtn.addEventListener('click', this.handleUploadClick);
     }
+    preventDefaults = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    handleDragEnter = () => {
+        this.dropZone.classList.add('drag-over');
+    };
+    handleDragLeave = () => {
+        this.dropZone.classList.remove('drag-over');
+    };
+    handleDrop = (e) => {
+        const droppedFiles = e.dataTransfer?.files;
+        if (droppedFiles) {
+            this.handleFiles(droppedFiles);
+        }
+    };
+    handleDropZoneClick = () => {
+        this.fileInput.click();
+    };
+    handleFileInputChange = (e) => {
+        const target = e.target;
+        if (target.files) {
+            this.handleFiles(target.files);
+            target.value = '';
+        }
+    };
+    handleUploadClick = async () => {
+        if (this.files.size === 0)
+            return;
+        this.uploadBtn.disabled = true;
+        this.uploadBtn.textContent = 'Uploading...';
+        const uploadPromises = Array.from(this.files.values()).map(({ file, element }) => this.uploadFile(file, element));
+        const results = await Promise.allSettled(uploadPromises);
+        this.uploadBtn.textContent = 'Upload Complete';
+        setTimeout(() => {
+            this.dispatchUploadCompletedEvent(results);
+            this.fileList.innerHTML = '';
+            this.files.clear();
+            this.updateUploadButton();
+        }, 1500);
+    };
     handleFiles(fileList) {
         Array.from(fileList).forEach(file => {
             const key = this.fileKey(file);

package/js/flyout-menu.d.ts

@@ -1,3 +1,4 @@
+/** Configuration options for the FlyoutMenu. */
 interface FlyoutMenuOptions {
     triggerSelector?: string;
     menuSelector?: string;
@@ -11,6 +12,7 @@ interface FlyoutMenuOptions {
     enableHeader?: boolean;
     enableFooter?: boolean;
 }
+/** Off-canvas flyout navigation with nested submenu support. */
 declare class FlyoutMenu {
     private options;
     private menuTrigger;
@@ -19,7 +21,7 @@ declare class FlyoutMenu {
     private closeBtn;
     private submenuToggles;
     private menuLinks;
-    private submenuHandlers;
+    private abortController;
     constructor(options?: FlyoutMenuOptions);
     private init;
     private hydrateMenu;
@@ -27,8 +29,8 @@ declare class FlyoutMenu {
     private renderHeader;
     private renderFooter;
     private bindEvents;
-    private open;
-    private close;
+    open: () => void;
+    close: () => void;
     private handleSubmenu;
     private handleKeydown;
     setDirection(direction: 'left' | 'right'): void;

package/js/flyout-menu.js

@@ -1,9 +1,14 @@
+/** Off-canvas flyout navigation with nested submenu support. */
 class FlyoutMenu {
+    options;
+    menuTrigger;
+    flyoutMenu;
+    flyoutOverlay;
+    closeBtn = null;
+    submenuToggles = null;
+    menuLinks = null;
+    abortController = new AbortController();
     constructor(options = {}) {
-        this.closeBtn = null;
-        this.submenuToggles = null;
-        this.menuLinks = null;
-        this.submenuHandlers = new Map();
         this.options = {
             triggerSelector: '.menu-trigger',
             menuSelector: '#flyoutMenu',
@@ -21,10 +26,6 @@ class FlyoutMenu {
         this.menuTrigger = document.querySelector(this.options.triggerSelector);
         this.flyoutMenu = document.querySelector(this.options.menuSelector);
         this.flyoutOverlay = document.querySelector(this.options.overlaySelector);
-        this.open = this.open.bind(this);
-        this.close = this.close.bind(this);
-        this.handleSubmenu = this.handleSubmenu.bind(this);
-        this.handleKeydown = this.handleKeydown.bind(this);
         this.init();
     }
     init() {
@@ -54,16 +55,13 @@ class FlyoutMenu {
     processListItems(ul) {
         const items = Array.from(ul.children);
         items.forEach((li, index) => {
-            // Check if it has a nested UL
             const nestedUl = li.querySelector('ul');
             if (nestedUl) {
                 li.classList.add('has-submenu');
                 nestedUl.classList.add('submenu');
-                // Get text content (excluding nested UL text)
                 const textNode = Array.from(li.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '');
                 const text = textNode?.textContent?.trim() || 'Menu Item';
                 textNode?.remove();
-                // Create Toggle Button
                 const button = document.createElement('button');
                 button.className = 'submenu-toggle';
                 button.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
@@ -74,11 +72,9 @@ class FlyoutMenu {
                     </svg>
                 `;
                 li.insertBefore(button, nestedUl);
-                // Recursively process nested UL
                 this.processListItems(nestedUl);
             }
             else {
-                // Leaf node - ensure it has a link
                 const link = li.querySelector('a');
                 if (link) {
                     link.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
@@ -113,36 +109,30 @@ class FlyoutMenu {
         this.flyoutMenu.append(footer);
     }
     bindEvents() {
-        // Open
-        this.menuTrigger?.addEventListener('click', this.open);
-        // Close
-        this.closeBtn?.addEventListener('click', this.close);
-        this.flyoutOverlay?.addEventListener('click', this.close);
-        // Submenus
+        const sig = { signal: this.abortController.signal };
+        this.menuTrigger?.addEventListener('click', this.open, sig);
+        this.closeBtn?.addEventListener('click', this.close, sig);
+        this.flyoutOverlay?.addEventListener('click', this.close, sig);
         this.submenuToggles?.forEach(toggle => {
-            const handler = (e) => this.handleSubmenu(e, toggle);
-            this.submenuHandlers.set(toggle, handler);
-            toggle.addEventListener('click', handler);
+            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle), sig);
         });
-        // Close on Link Click
         this.menuLinks?.forEach(link => {
-            link.addEventListener('click', this.close);
+            link.addEventListener('click', this.close, sig);
         });
-        // Keyboard navigation
-        document.addEventListener('keydown', this.handleKeydown);
+        document.addEventListener('keydown', this.handleKeydown, sig);
     }
-    open() {
+    open = () => {
         this.flyoutMenu?.classList.add('is-open');
         this.flyoutOverlay?.classList.add('is-visible');
         document.body.style.overflow = 'hidden';
         this.menuTrigger?.setAttribute('aria-expanded', 'true');
-    }
-    close() {
+    };
+    close = () => {
         this.flyoutMenu?.classList.remove('is-open');
         this.flyoutOverlay?.classList.remove('is-visible');
         document.body.style.overflow = '';
         this.menuTrigger?.setAttribute('aria-expanded', 'false');
-    }
+    };
     handleSubmenu(e, toggle) {
         e.preventDefault();
         e.stopPropagation();
@@ -151,7 +141,6 @@ class FlyoutMenu {
         const parentUl = parentLi?.parentElement;
         if (!parentUl || !parentLi)
             return;
-        // Close other submenus at the same level
         const siblings = Array.from(parentUl.children);
         siblings.forEach(sibling => {
             if (sibling !== parentLi) {
@@ -166,11 +155,11 @@ class FlyoutMenu {
         toggle.classList.toggle('active');
         submenu?.classList.toggle('is-open');
     }
-    handleKeydown(e) {
+    handleKeydown = (e) => {
         if (e.key === 'Escape' && this.flyoutMenu?.classList.contains('is-open')) {
             this.close();
         }
-    }
+    };
     setDirection(direction) {
         if (!this.flyoutMenu)
             return;
@@ -182,19 +171,7 @@ class FlyoutMenu {
         this.options.direction = direction;
     }
     destroy() {
-        this.menuTrigger?.removeEventListener('click', this.open);
-        this.closeBtn?.removeEventListener('click', this.close);
-        this.flyoutOverlay?.removeEventListener('click', this.close);
-        this.submenuToggles?.forEach(toggle => {
-            const handler = this.submenuHandlers.get(toggle);
-            if (handler)
-                toggle.removeEventListener('click', handler);
-        });
-        this.submenuHandlers.clear();
-        this.menuLinks?.forEach(link => {
-            link.removeEventListener('click', this.close);
-        });
-        document.removeEventListener('keydown', this.handleKeydown);
+        this.abortController.abort();
         document.body.style.overflow = '';
     }
 }