@dodlhuat/basix 1.4.1 → 1.4.3

package/js/datepicker.js

@@ -1,5 +1,8 @@
 import { computePosition } from './position.js';
+import { ListenerGroup } from './listeners.js';
 class DatePicker {
+    static CLOCK_OUTER_RADIUS_PERCENT = 38;
+    static CLOCK_INNER_RADIUS_PERCENT = 23;
     input;
     options;
     currentDate;
@@ -14,12 +17,12 @@ class DatePicker {
     selectedMinutes;
     calendar;
     backdrop;
-    handleDocumentClick;
-    abortController = new AbortController();
+    clockMode = 'hours';
+    listeners = new ListenerGroup();
+    showListeners = null;
+    clockListeners = null;
     constructor(elementOrSelector, options = {}) {
-        this.input = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        this.input = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!this.input) {
             throw new Error(`DatePicker: Element not found for selector "${elementOrSelector}"`);
         }
@@ -30,10 +33,7 @@ class DatePicker {
             timePicker,
             locales: {
                 days: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-                months: [
-                    'January', 'February', 'March', 'April', 'May', 'June',
-                    'July', 'August', 'September', 'October', 'November', 'December'
-                ]
+                months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
             },
             format: timePicker
                 ? (date) => {
@@ -43,7 +43,7 @@ class DatePicker {
                 }
                 : (date) => date.toDateString(),
             onSelect: () => { },
-            ...options
+            ...options,
         };
         this.currentDate = new Date();
         this.selectedDate = null;
@@ -69,7 +69,6 @@ class DatePicker {
         this.backdrop = document.createElement('div');
         this.backdrop.className = 'datepicker-backdrop';
         document.body.appendChild(this.backdrop);
-        this.backdrop.addEventListener('click', () => this.hide(), { signal: this.abortController.signal });
     }
     attachEvents() {
         const toggle = (e) => {
@@ -82,23 +81,19 @@ class DatePicker {
                 this.show();
             }
         };
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.input?.addEventListener('click', toggle, sig);
         this.backdrop.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
             this.hide();
         }, sig);
-        this.handleDocumentClick = (e) => {
-            if (this.calendar.classList.contains('mobile'))
-                return;
-            const target = e.target;
-            if (!this.calendar.contains(target) && target !== this.input) {
-                this.hide();
-            }
-        };
     }
     show() {
+        if (this.options.timePicker) {
+            this.clockMode = 'hours';
+            this.renderTimePicker();
+        }
         const isMobile = window.innerWidth <= 640;
         if (isMobile) {
             this.calendar.classList.add('mobile');
@@ -123,7 +118,13 @@ class DatePicker {
             }
             setTimeout(() => {
                 if (this.calendar.classList.contains('visible')) {
-                    document.addEventListener('click', this.handleDocumentClick);
+                    this.showListeners = new ListenerGroup();
+                    document.addEventListener('click', (e) => {
+                        const target = e.target;
+                        if (!this.calendar.contains(target) && target !== this.input) {
+                            this.hide();
+                        }
+                    }, { signal: this.showListeners.signal });
                 }
             }, 0);
         }
@@ -133,7 +134,8 @@ class DatePicker {
         this.calendar.classList.remove('visible');
         this.backdrop.classList.remove('visible');
         document.body.style.overflow = '';
-        document.removeEventListener('click', this.handleDocumentClick);
+        this.showListeners?.destroy();
+        this.showListeners = null;
     }
     render() {
         this.calendar.innerHTML = '';
@@ -151,8 +153,7 @@ class DatePicker {
         this.calendar.appendChild(header);
         this.calendar.appendChild(content);
         if (this.options.timePicker && this.viewMode === 'days') {
-            const timeSection = this.createTimePicker();
-            this.calendar.appendChild(timeSection);
+            this.calendar.appendChild(this.createTimePicker());
             const setBtn = document.createElement('button');
             setBtn.className = 'datepicker-set-btn';
             setBtn.textContent = 'Set';
@@ -163,6 +164,16 @@ class DatePicker {
             this.calendar.appendChild(setBtn);
         }
     }
+    renderTimePicker() {
+        if (!this.options.timePicker || this.viewMode !== 'days')
+            return;
+        const existing = this.calendar.querySelector('.datepicker-clock');
+        if (!existing) {
+            this.render();
+            return;
+        }
+        existing.replaceWith(this.createTimePicker());
+    }
     createHeader() {
         const header = document.createElement('div');
         header.className = 'datepicker-header';
@@ -242,6 +253,7 @@ class DatePicker {
     createMonthGrid() {
         const grid = document.createElement('div');
         grid.className = 'datepicker-grid-months';
+        const now = new Date();
         this.options?.locales?.months.forEach((month, index) => {
             const el = document.createElement('div');
             el.className = 'datepicker-month';
@@ -249,7 +261,7 @@ class DatePicker {
             if (index === this.viewMonth) {
                 el.classList.add('selected');
             }
-            if (index === new Date().getMonth() && this.viewYear === new Date().getFullYear()) {
+            if (index === now.getMonth() && this.viewYear === now.getFullYear()) {
                 el.classList.add('current');
             }
             el.onclick = (e) => {
@@ -292,7 +304,7 @@ class DatePicker {
         const days = this.options?.locales?.days ?? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
         const startDay = this.options.startDay ?? 0;
         const adjustedDays = [...days.slice(startDay), ...days.slice(0, startDay)];
-        adjustedDays.forEach(day => {
+        adjustedDays.forEach((day) => {
             const el = document.createElement('div');
             el.className = 'datepicker-day-header';
             el.textContent = day;
@@ -353,88 +365,156 @@ class DatePicker {
         return grid;
     }
     createTimePicker() {
+        this.clockListeners?.destroy();
+        this.clockListeners = new ListenerGroup();
         const wrapper = document.createElement('div');
-        wrapper.className = 'datepicker-time';
-        const label = document.createElement('div');
-        label.className = 'datepicker-time-label';
-        label.textContent = 'Time';
-        wrapper.appendChild(label);
-        const controls = document.createElement('div');
-        controls.className = 'datepicker-time-controls';
-        const hoursSpinner = this.createSpinner(this.selectedHours, 0, 23, (value) => {
-            this.selectedHours = value;
-            this.applyTimeToSelection();
-        });
-        const separator = document.createElement('span');
-        separator.className = 'datepicker-time-separator';
-        separator.textContent = ':';
-        const minutesSpinner = this.createSpinner(this.selectedMinutes, 0, 59, (value) => {
-            this.selectedMinutes = value;
-            this.applyTimeToSelection();
-        });
-        controls.appendChild(hoursSpinner);
-        controls.appendChild(separator);
-        controls.appendChild(minutesSpinner);
-        wrapper.appendChild(controls);
+        wrapper.className = 'datepicker-clock';
+        wrapper.appendChild(this.createClockHeader());
+        wrapper.appendChild(this.createClockFace());
         return wrapper;
     }
-    createSpinner(value, min, max, onChange) {
-        const spinner = document.createElement('div');
-        spinner.className = 'datepicker-time-spinner';
-        const upBtn = document.createElement('button');
-        upBtn.className = 'datepicker-time-btn';
-        upBtn.innerHTML = '&#9650;';
-        upBtn.onclick = (e) => {
+    createClockHeader() {
+        const header = document.createElement('div');
+        header.className = 'datepicker-clock-header';
+        const display = document.createElement('div');
+        display.className = 'datepicker-clock-display';
+        const hourSeg = document.createElement('span');
+        hourSeg.className = 'datepicker-clock-display-segment';
+        hourSeg.classList.toggle('active', this.clockMode === 'hours');
+        hourSeg.textContent = String(this.selectedHours).padStart(2, '0');
+        hourSeg.onclick = (e) => {
             e.stopPropagation();
-            const next = value + 1 > max ? min : value + 1;
-            onChange(next);
-            this.render();
+            this.clockMode = 'hours';
+            this.renderTimePicker();
         };
-        const display = document.createElement('input');
-        display.className = 'datepicker-time-display';
-        display.type = 'text';
-        display.inputMode = 'numeric';
-        display.value = String(value).padStart(2, '0');
-        display.maxLength = 2;
-        display.addEventListener('click', (e) => e.stopPropagation());
-        display.addEventListener('focus', () => display.select());
-        display.addEventListener('change', (e) => {
+        const separator = document.createElement('span');
+        separator.className = 'datepicker-clock-display-separator';
+        separator.textContent = ':';
+        const minuteSeg = document.createElement('span');
+        minuteSeg.className = 'datepicker-clock-display-segment';
+        minuteSeg.classList.toggle('active', this.clockMode === 'minutes');
+        minuteSeg.textContent = String(this.selectedMinutes).padStart(2, '0');
+        minuteSeg.onclick = (e) => {
             e.stopPropagation();
-            let parsed = parseInt(display.value, 10);
-            if (isNaN(parsed) || parsed < min || parsed > max) {
-                display.value = String(value).padStart(2, '0');
-                return;
+            this.clockMode = 'minutes';
+            this.renderTimePicker();
+        };
+        display.appendChild(hourSeg);
+        display.appendChild(separator);
+        display.appendChild(minuteSeg);
+        header.appendChild(display);
+        return header;
+    }
+    createClockFace() {
+        const face = document.createElement('div');
+        face.className = 'datepicker-clock-face';
+        const center = document.createElement('div');
+        center.className = 'datepicker-clock-center';
+        face.appendChild(center);
+        const hand = document.createElement('div');
+        hand.className = 'datepicker-clock-hand';
+        face.appendChild(hand);
+        if (this.clockMode === 'hours') {
+            for (let slot = 0; slot < 12; slot++) {
+                const outerValue = slot * 2;
+                const innerValue = slot * 2 + 1;
+                face.appendChild(this.createClockNumber(outerValue, this.clockPosition(slot, 12, DatePicker.CLOCK_OUTER_RADIUS_PERCENT), outerValue === this.selectedHours, false));
+                face.appendChild(this.createClockNumber(innerValue, this.clockPosition(slot, 12, DatePicker.CLOCK_INNER_RADIUS_PERCENT), innerValue === this.selectedHours, true));
             }
-            onChange(parsed);
-            this.render();
-        });
-        display.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                const next = value + 1 > max ? min : value + 1;
-                onChange(next);
-                this.render();
+        }
+        else {
+            for (let slot = 0; slot < 12; slot++) {
+                const value = slot * 5;
+                const isSelected = Math.round(this.selectedMinutes / 5) % 12 === slot;
+                face.appendChild(this.createClockNumber(value, this.clockPosition(slot, 12, DatePicker.CLOCK_OUTER_RADIUS_PERCENT), isSelected, false));
             }
-            else if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                const next = value - 1 < min ? max : value - 1;
-                onChange(next);
-                this.render();
+        }
+        const activeValue = this.clockMode === 'hours' ? this.selectedHours : this.selectedMinutes;
+        this.positionHand(hand, activeValue);
+        this.bindClockDrag(face, hand);
+        return face;
+    }
+    createClockNumber(value, position, selected, inner) {
+        const number = document.createElement('div');
+        number.className = 'datepicker-clock-number';
+        number.classList.toggle('inner', inner);
+        number.classList.toggle('selected', selected);
+        number.style.left = `${position.x}%`;
+        number.style.top = `${position.y}%`;
+        number.textContent = String(value).padStart(2, '0');
+        return number;
+    }
+    clockPosition(index, count, radiusPercent) {
+        const angle = (index / count) * 2 * Math.PI - Math.PI / 2;
+        const x = 50 + radiusPercent * Math.cos(angle);
+        const y = 50 + radiusPercent * Math.sin(angle);
+        return { x, y };
+    }
+    positionHand(hand, value) {
+        if (this.clockMode === 'hours') {
+            const slot = Math.floor(value / 2) % 12;
+            const isInner = value % 2 === 1;
+            hand.style.transform = `rotate(${(slot / 12) * 360}deg)`;
+            hand.style.height = `${isInner ? DatePicker.CLOCK_INNER_RADIUS_PERCENT : DatePicker.CLOCK_OUTER_RADIUS_PERCENT}%`;
+        }
+        else {
+            hand.style.transform = `rotate(${(value / 60) * 360}deg)`;
+            hand.style.height = `${DatePicker.CLOCK_OUTER_RADIUS_PERCENT}%`;
+        }
+    }
+    bindClockDrag(face, hand) {
+        const sig = { signal: this.clockListeners.signal };
+        let dragging = false;
+        const valueFromPointer = (e) => {
+            const rect = face.getBoundingClientRect();
+            const dx = e.clientX - (rect.left + rect.width / 2);
+            const dy = e.clientY - (rect.top + rect.height / 2);
+            const angle = Math.atan2(dy, dx) + Math.PI / 2;
+            const normalized = (angle / (2 * Math.PI) + 1) % 1;
+            const slot = Math.round(normalized * 12) % 12;
+            let value;
+            if (this.clockMode === 'hours') {
+                const distancePercent = (Math.sqrt(dx * dx + dy * dy) / rect.width) * 100;
+                const ringThreshold = (DatePicker.CLOCK_OUTER_RADIUS_PERCENT + DatePicker.CLOCK_INNER_RADIUS_PERCENT) / 2;
+                value = distancePercent > ringThreshold ? slot * 2 : slot * 2 + 1;
             }
-        });
-        const downBtn = document.createElement('button');
-        downBtn.className = 'datepicker-time-btn';
-        downBtn.innerHTML = '&#9660;';
-        downBtn.onclick = (e) => {
-            e.stopPropagation();
-            const next = value - 1 < min ? max : value - 1;
-            onChange(next);
-            this.render();
+            else {
+                value = Math.round(normalized * 60) % 60;
+            }
+            this.positionHand(hand, value);
+            return value;
         };
-        spinner.appendChild(upBtn);
-        spinner.appendChild(display);
-        spinner.appendChild(downBtn);
-        return spinner;
+        face.addEventListener('pointerdown', (e) => {
+            e.stopPropagation();
+            face.setPointerCapture(e.pointerId);
+            dragging = true;
+            valueFromPointer(e);
+        }, sig);
+        face.addEventListener('pointermove', (e) => {
+            if (!dragging)
+                return;
+            valueFromPointer(e);
+        }, sig);
+        for (const type of ['pointerup', 'pointercancel']) {
+            face.addEventListener(type, (e) => {
+                if (!dragging)
+                    return;
+                dragging = false;
+                this.selectClockValue(valueFromPointer(e));
+            }, sig);
+        }
+    }
+    selectClockValue(value) {
+        if (this.clockMode === 'hours') {
+            this.selectedHours = value;
+            this.applyTimeToSelection();
+            this.clockMode = 'minutes';
+        }
+        else {
+            this.selectedMinutes = value;
+            this.applyTimeToSelection();
+        }
+        this.renderTimePicker();
     }
     applyTimeToSelection() {
         if (this.options.mode === 'single' && this.selectedDate) {
@@ -521,7 +601,8 @@ class DatePicker {
     }
     destroy() {
         this.hide();
-        this.abortController.abort();
+        this.listeners.destroy();
+        this.clockListeners?.destroy();
         this.calendar.remove();
         this.backdrop.remove();
     }

package/js/dropdown.d.ts

@@ -11,7 +11,7 @@ declare class Dropdown {
     private trigger;
     private menu;
     private options;
-    private abortController;
+    private listeners;
     constructor(selector: string, options?: DropdownOptions);
     private init;
     private attachEventListeners;

package/js/dropdown.js

@@ -1,14 +1,14 @@
 import { bestPlacement } from './position.js';
+import { ListenerGroup } from './listeners.js';
 class Dropdown {
     container;
     trigger;
     menu;
     options;
-    abortController;
+    listeners = new ListenerGroup();
     constructor(selector, options = {}) {
         const container = document.querySelector(selector);
         if (!container) {
-            console.error(`Dropdown container not found: ${selector}`);
             throw new Error(`Dropdown container "${selector}" not found`);
         }
         this.container = container;
@@ -23,7 +23,6 @@ class Dropdown {
             closeOnSelect: options.closeOnSelect ?? true,
             allowMultipleOpen: options.allowMultipleOpen ?? false,
         };
-        this.abortController = new AbortController();
         this.init();
     }
     init() {
@@ -31,7 +30,7 @@ class Dropdown {
         this.attachEventListeners();
     }
     attachEventListeners() {
-        const { signal } = this.abortController;
+        const { signal } = this.listeners;
         this.trigger.addEventListener('click', (e) => {
             e.stopPropagation();
             this.toggle();
@@ -122,7 +121,7 @@ class Dropdown {
         this.container.dispatchEvent(event);
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.close();
     }
 }

package/js/editor.d.ts

@@ -11,7 +11,7 @@ declare class Editor {
     private readonly wordCount;
     private undoStack;
     private redoStack;
-    private abortController;
+    private listeners;
     constructor(options?: EditorOptions);
     private q;
     private qAll;

package/js/editor.js

@@ -1,4 +1,5 @@
 import { sanitizeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class Editor {
     root;
     editable;
@@ -8,7 +9,7 @@ class Editor {
     wordCount;
     undoStack = [];
     redoStack = [];
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(options = {}) {
         if (options.root instanceof HTMLElement) {
             this.root = options.root;
@@ -60,8 +61,8 @@ class Editor {
         return this.root.querySelectorAll(selector);
     }
     bindToolbar() {
-        const sig = { signal: this.abortController.signal };
-        this.qAll('[data-cmd]').forEach(btn => {
+        const sig = { signal: this.listeners.signal };
+        this.qAll('[data-cmd]').forEach((btn) => {
             btn.addEventListener('click', () => {
                 const cmd = btn.dataset.cmd;
                 const val = btn.dataset.value ?? null;
@@ -71,7 +72,7 @@ class Editor {
         });
     }
     bindActions() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.q('[data-editor-action="link"]')?.addEventListener('click', () => {
             const url = prompt('Enter URL:', 'https://');
             if (url)
@@ -120,10 +121,7 @@ class Editor {
                 this.onContentChange();
             }, sig);
             this.q('[data-editor-action="minify-code"]')?.addEventListener('click', () => {
-                code.value = code.value
-                    .replace(/\n/g, '')
-                    .replace(/>\s+</g, '><')
-                    .trim();
+                code.value = code.value.replace(/\n/g, '').replace(/>\s+</g, '><').trim();
             }, sig);
         }
         this.q('[data-editor-action="save"]')?.addEventListener('click', () => this.downloadHTML(), sig);
@@ -172,10 +170,10 @@ class Editor {
                 e.preventDefault();
                 this.redo();
             }
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
     }
     bindEditable() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.editable.addEventListener('input', () => this.onContentChange(), sig);
         this.editable.addEventListener('paste', (e) => {
             e.preventDefault();
@@ -186,12 +184,12 @@ class Editor {
         this.editable.addEventListener('mouseup', () => this.refreshActiveState(), sig);
     }
     bindTabs() {
-        const sig = { signal: this.abortController.signal };
-        this.qAll('.side-tab[data-tab]').forEach(tab => {
+        const sig = { signal: this.listeners.signal };
+        this.qAll('.side-tab[data-tab]').forEach((tab) => {
             tab.addEventListener('click', () => {
                 const target = tab.dataset.tab;
-                this.qAll('.side-tab').forEach(t => t.classList.remove('active'));
-                this.qAll('.side-panel').forEach(p => p.classList.remove('active'));
+                this.qAll('.side-tab').forEach((t) => t.classList.remove('active'));
+                this.qAll('.side-panel').forEach((p) => p.classList.remove('active'));
                 tab.classList.add('active');
                 this.q(`[data-editor="${target}"]`)?.classList.add('active');
             }, sig);
@@ -211,8 +209,11 @@ class Editor {
     updateWordCount() {
         if (!this.wordCount)
             return;
-        const text = this.editable.innerText || '';
-        const words = text.trim().split(/\s+/).filter(w => w.length > 0);
+        const text = this.editable.innerText;
+        const words = text
+            .trim()
+            .split(/\s+/)
+            .filter((w) => w.length > 0);
         const count = words.length;
         this.wordCount.textContent = `${count} word${count !== 1 ? 's' : ''}`;
     }
@@ -310,12 +311,11 @@ class Editor {
             return;
         const range = sel.getRangeAt(0);
         const container = range.commonAncestorContainer;
-        let current = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
+        let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
+        const upperTag = tagName.toUpperCase();
         let wrapper = null;
         while (current && current !== this.editable) {
-            if (current.tagName === tagName.toUpperCase()) {
+            if (current.tagName === upperTag) {
                 wrapper = current;
                 break;
             }
@@ -357,9 +357,7 @@ class Editor {
             return;
         const range = sel.getRangeAt(0);
         const container = range.commonAncestorContainer;
-        let blockElement = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
+        let blockElement = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
         while (blockElement && blockElement !== this.editable && blockElement.parentElement !== this.editable) {
             blockElement = blockElement.parentElement;
         }
@@ -377,7 +375,7 @@ class Editor {
         const range = sel.getRangeAt(0);
         const text = range.toString();
         const list = document.createElement(listTag);
-        const lines = text ? text.split('\n').filter(l => l.trim()) : [''];
+        const lines = text ? text.split('\n').filter((l) => l.trim()) : [''];
         for (const line of lines) {
             const li = document.createElement('li');
             li.textContent = line.trim() || '​';
@@ -396,15 +394,15 @@ class Editor {
     }
     setAlignment(cmd) {
         const align = {
-            justifyLeft: 'left', justifyCenter: 'center', justifyRight: 'right',
+            justifyLeft: 'left',
+            justifyCenter: 'center',
+            justifyRight: 'right',
         };
         const sel = window.getSelection();
         if (!sel || sel.rangeCount === 0)
             return;
         const container = sel.getRangeAt(0).commonAncestorContainer;
-        let block = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
+        let block = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
         while (block && block !== this.editable && block.parentElement !== this.editable) {
             block = block.parentElement;
         }
@@ -451,15 +449,13 @@ ${content}
             return;
         const range = sel.getRangeAt(0);
         const container = range.commonAncestorContainer;
-        const element = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
-        this.qAll('[data-cmd]').forEach(btn => {
+        const element = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
+        this.qAll('[data-cmd]').forEach((btn) => {
             const cmd = btn.dataset.cmd;
             let active = false;
             let current = element;
             while (current && current !== this.editable) {
-                const tag = current.tagName?.toLowerCase();
+                const tag = current.tagName.toLowerCase();
                 if ((cmd === 'bold' && (tag === 'strong' || tag === 'b')) ||
                     (cmd === 'italic' && (tag === 'em' || tag === 'i')) ||
                     (cmd === 'underline' && tag === 'u') ||
@@ -473,7 +469,7 @@ ${content}
         });
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
     }
 }
 export { Editor };

package/js/file-uploader.d.ts

@@ -22,18 +22,11 @@ declare class FileUploader {
     private uploadUrl;
     private maxFileSize?;
     private allowedTypes?;
-    private abortControllers;
+    private xhrAborts;
+    private listeners;
     constructor(elementOrSelector: string | HTMLElement, config?: FileUploaderConfig);
-    private init;
     private fileKey;
     private setupEventListeners;
-    private preventDefaults;
-    private handleDragEnter;
-    private handleDragLeave;
-    private handleDrop;
-    private handleDropZoneClick;
-    private handleFileInputChange;
-    private handleUploadClick;
     private handleFiles;
     private validateFile;
     private addFileToUI;