@dodlhuat/basix 1.4.2 → 1.5.0

package/js/timepicker.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class TimeSpanPicker {
     container;
     startTimeInput;
@@ -13,11 +14,13 @@ class TimeSpanPicker {
     startHandleEl;
     endHandleEl;
     dragState = null;
+    listeners = new ListenerGroup();
+    dragListeners = null;
     constructor(elementOrSelector, options) {
         const element = typeof elementOrSelector === 'string'
-            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+            ? elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
-                : document.getElementById(elementOrSelector))
+                : document.getElementById(elementOrSelector)
             : elementOrSelector;
         if (!element) {
             throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
@@ -74,17 +77,17 @@ class TimeSpanPicker {
       </div>
     `;
     }
-    handleChange = () => {
+    handleChange() {
         this.updateUI();
         const start = this.startTimeInput.value;
         const end = this.endTimeInput.value;
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
-        }
-    };
+        if (start && end)
+            this.onChange?.(start, end);
+    }
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', this.handleChange);
-        this.endTimeInput.addEventListener('change', this.handleChange);
+        const sig = { signal: this.listeners.signal };
+        this.startTimeInput.addEventListener('change', () => this.handleChange(), sig);
+        this.endTimeInput.addEventListener('change', () => this.handleChange(), sig);
     }
     attachBarListeners() {
         this.pickerEl = this.queryEl('.timespan-picker');
@@ -93,9 +96,10 @@ class TimeSpanPicker {
         this.barFillEl = this.queryEl('.timespan-bar-fill');
         this.startHandleEl = this.queryEl('.timespan-handle-start');
         this.endHandleEl = this.queryEl('.timespan-handle-end');
-        this.startHandleEl.addEventListener('pointerdown', this.onStartHandleDown);
-        this.endHandleEl.addEventListener('pointerdown', this.onEndHandleDown);
-        this.barFillEl.addEventListener('pointerdown', this.onFillDown);
+        const sig = { signal: this.listeners.signal };
+        this.startHandleEl.addEventListener('pointerdown', (e) => this.onStartHandleDown(e), sig);
+        this.endHandleEl.addEventListener('pointerdown', (e) => this.onEndHandleDown(e), sig);
+        this.barFillEl.addEventListener('pointerdown', (e) => this.onFillDown(e), sig);
     }
     beginDrag(type, clickOffsetMins = 0, rect) {
         const start = this.startTimeInput.value;
@@ -112,20 +116,22 @@ class TimeSpanPicker {
             clickOffsetMins,
         };
         this.barEl.classList.add('is-dragging');
-        document.addEventListener('pointermove', this.onPointerMove);
-        document.addEventListener('pointerup', this.onPointerUp);
+        this.dragListeners = new ListenerGroup();
+        const dragSig = { signal: this.dragListeners.signal };
+        document.addEventListener('pointermove', (e) => this.onPointerMove(e), dragSig);
+        document.addEventListener('pointerup', () => this.onPointerUp(), dragSig);
     }
-    onStartHandleDown = (e) => {
+    onStartHandleDown(e) {
         e.stopPropagation();
         e.preventDefault();
         this.beginDrag('start');
-    };
-    onEndHandleDown = (e) => {
+    }
+    onEndHandleDown(e) {
         e.stopPropagation();
         e.preventDefault();
         this.beginDrag('end');
-    };
-    onFillDown = (e) => {
+    }
+    onFillDown(e) {
         if (e.target.classList.contains('timespan-handle'))
             return;
         e.preventDefault();
@@ -135,8 +141,8 @@ class TimeSpanPicker {
         const rect = this.barEl.getBoundingClientRect();
         const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
         this.beginDrag('move', clickMins - this.toMinutes(start), rect);
-    };
-    onPointerMove = (e) => {
+    }
+    onPointerMove(e) {
         if (!this.dragState)
             return;
         e.preventDefault();
@@ -162,17 +168,16 @@ class TimeSpanPicker {
             this.endTimeInput.value = end;
         }
         this.updateUI();
-        if (this.onChange)
-            this.onChange(start, end);
-    };
-    onPointerUp = () => {
+        this.onChange?.(start, end);
+    }
+    onPointerUp() {
         if (!this.dragState)
             return;
         this.dragState = null;
         this.barEl.classList.remove('is-dragging');
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
-    };
+        this.dragListeners?.destroy();
+        this.dragListeners = null;
+    }
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
         return h * 60 + m;
@@ -225,7 +230,7 @@ class TimeSpanPicker {
     getValue() {
         return {
             start: this.startTimeInput.value,
-            end: this.endTimeInput.value
+            end: this.endTimeInput.value,
         };
     }
     setValue(start, end) {
@@ -248,13 +253,8 @@ class TimeSpanPicker {
         return !!(start && end && start < end);
     }
     destroy() {
-        this.startTimeInput.removeEventListener('change', this.handleChange);
-        this.endTimeInput.removeEventListener('change', this.handleChange);
-        this.startHandleEl.removeEventListener('pointerdown', this.onStartHandleDown);
-        this.endHandleEl.removeEventListener('pointerdown', this.onEndHandleDown);
-        this.barFillEl.removeEventListener('pointerdown', this.onFillDown);
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
+        this.listeners.destroy();
+        this.dragListeners?.destroy();
     }
 }
 export { TimeSpanPicker };

package/js/toast.d.ts

@@ -4,20 +4,23 @@ interface ToastOptions {
     header?: string;
     type?: ToastType;
     closeable?: boolean;
+    iconBasePath?: string;
 }
 declare class Toast {
     private readonly content;
     private readonly header;
     private readonly type?;
     private readonly closeable;
+    private readonly iconBasePath;
     private readonly closureIcon;
     private readonly template;
     private toastElement;
     private timerId;
+    private openListeners;
     constructor(options: ToastOptions);
     constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
     show(ms?: number): void;
-    hide: () => void;
+    hide(): void;
     private startTimer;
     destroy(): void;
     private buildTemplate;

package/js/toast.js

@@ -1,26 +1,32 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class Toast {
     content;
     header;
     type;
     closeable;
-    closureIcon = '<div class="icon icon-close close"></div>';
+    iconBasePath;
+    closureIcon;
     template;
     toastElement = null;
     timerId = null;
+    openListeners = null;
     constructor(contentOrOptions, header = '', type, closeable = true) {
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header ?? '';
             this.type = contentOrOptions.type;
             this.closeable = contentOrOptions.closeable ?? true;
+            this.iconBasePath = contentOrOptions.iconBasePath ?? 'svg-icons/';
         }
         else {
             this.content = contentOrOptions;
             this.header = header;
             this.type = type;
             this.closeable = closeable;
+            this.iconBasePath = 'svg-icons/';
         }
+        this.closureIcon = `<svg class="icon-svg close" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#close"/></svg>`;
         this.template = this.buildTemplate();
     }
     show(ms) {
@@ -37,7 +43,8 @@ class Toast {
                 this.toastElement?.classList.add('show');
                 const closeButton = this.toastElement?.querySelector('.close');
                 if (closeButton) {
-                    closeButton.addEventListener('click', this.hide);
+                    this.openListeners = new ListenerGroup();
+                    closeButton.addEventListener('click', () => this.hide(), { signal: this.openListeners.signal });
                 }
                 if (ms !== undefined && ms > 0) {
                     this.startTimer(ms);
@@ -45,18 +52,19 @@ class Toast {
             });
         });
     }
-    hide = () => {
+    hide() {
         if (this.timerId !== null) {
             clearTimeout(this.timerId);
             this.timerId = null;
         }
         this.toastElement?.classList.remove('show');
+        this.openListeners?.destroy();
+        this.openListeners = null;
         setTimeout(() => {
-            this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
             this.toastElement?.remove();
             this.toastElement = null;
         }, 150);
-    };
+    }
     startTimer(ms, elapsed = 0) {
         const stepSize = 250;
         if (elapsed >= ms) {

package/js/tooltip.d.ts

@@ -14,6 +14,7 @@ declare class Tooltip {
     private tooltipElement;
     private showTimeout;
     private isVisible;
+    private listeners;
     constructor(trigger: HTMLElement, content: string, options?: TooltipOptions);
     static initializeAll(): void;
     show(): void;
@@ -22,10 +23,6 @@ declare class Tooltip {
     private createTooltip;
     private position;
     private attachEvents;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleFocus;
-    private handleBlur;
     destroy(): void;
 }
 export { Tooltip };

package/js/tooltip.js

@@ -1,4 +1,5 @@
 import { computePosition } from './position.js';
+import { ListenerGroup } from './listeners.js';
 class Tooltip {
     static activeTooltip = null;
     static idCounter = 0;
@@ -8,6 +9,7 @@ class Tooltip {
     tooltipElement = null;
     showTimeout = null;
     isVisible = false;
+    listeners = new ListenerGroup();
     constructor(trigger, content, options = {}) {
         this.trigger = trigger;
         this.content = content;
@@ -22,7 +24,7 @@ class Tooltip {
     }
     static initializeAll() {
         const triggers = document.querySelectorAll('[data-tooltip]');
-        triggers.forEach(trigger => {
+        triggers.forEach((trigger) => {
             const content = trigger.getAttribute('data-tooltip');
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
@@ -31,7 +33,7 @@ class Tooltip {
             }
         });
         const advancedTriggers = document.querySelectorAll('[data-tooltip-id]');
-        advancedTriggers.forEach(trigger => {
+        advancedTriggers.forEach((trigger) => {
             const contentId = trigger.getAttribute('data-tooltip-id');
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
@@ -107,35 +109,24 @@ class Tooltip {
     position() {
         if (!this.tooltipElement)
             return;
-        const { left, top, placement } = computePosition(this.trigger.getBoundingClientRect(), this.tooltipElement.getBoundingClientRect(), { placement: this.options.position, offset: this.options.offset });
+        const { left, top, placement } = computePosition(this.trigger.getBoundingClientRect(), this.tooltipElement.getBoundingClientRect(), {
+            placement: this.options.position,
+            offset: this.options.offset,
+        });
         this.tooltipElement.style.left = `${left}px`;
         this.tooltipElement.style.top = `${top}px`;
         this.tooltipElement.setAttribute('data-position', placement);
     }
     attachEvents() {
-        this.trigger.addEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.addEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.addEventListener('focus', this.handleFocus);
-        this.trigger.addEventListener('blur', this.handleBlur);
+        const sig = { signal: this.listeners.signal };
+        this.trigger.addEventListener('mouseenter', () => this.show(), sig);
+        this.trigger.addEventListener('mouseleave', () => this.hide(), sig);
+        this.trigger.addEventListener('focus', () => this.show(), sig);
+        this.trigger.addEventListener('blur', () => this.hide(), sig);
     }
-    handleMouseEnter = () => {
-        this.show();
-    };
-    handleMouseLeave = () => {
-        this.hide();
-    };
-    handleFocus = () => {
-        this.show();
-    };
-    handleBlur = () => {
-        this.hide();
-    };
     destroy() {
         this.hide();
-        this.trigger.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.removeEventListener('focus', this.handleFocus);
-        this.trigger.removeEventListener('blur', this.handleBlur);
+        this.listeners.destroy();
         const previousDescribedBy = this.trigger.getAttribute('data-previous-describedby');
         if (previousDescribedBy) {
             this.trigger.setAttribute('aria-describedby', previousDescribedBy);

package/js/tree.d.ts

@@ -18,7 +18,6 @@ declare class TreeComponent {
     private selectedNode;
     private readonly options;
     constructor(elementOrSelector: string | HTMLElement, data: TreeNode[], options?: TreeOptions);
-    private init;
     render(): void;
     private renderNode;
     private createIconElement;

package/js/tree.js

@@ -22,9 +22,7 @@ class TreeComponent {
     selectedNode;
     options;
     constructor(elementOrSelector, data, options = {}) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const container = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!container) {
             throw new Error(`TreeComponent: Element not found for selector "${elementOrSelector}"`);
         }
@@ -32,14 +30,11 @@ class TreeComponent {
         this.data = data;
         this.selectedNode = null;
         this.options = options;
-        this.init();
-    }
-    init() {
         this.render();
     }
     render() {
         this.container.innerHTML = '';
-        this.data.forEach(node => {
+        this.data.forEach((node) => {
             this.renderNode(node, this.container);
         });
     }
@@ -107,7 +102,7 @@ class TreeComponent {
             childrenUl.classList.add('expanded');
             childrenUl.style.height = 'auto';
         }
-        node.children.forEach(child => {
+        node.children.forEach((child) => {
             this.renderNode(child, childrenUl);
         });
         return childrenUl;
@@ -126,13 +121,13 @@ class TreeComponent {
         }
     }
     expandChildren(container) {
-        container.style.height = container.scrollHeight + 'px';
+        container.style.height = `${container.scrollHeight}px`;
         container.addEventListener('transitionend', () => {
             container.style.height = 'auto';
         }, { once: true });
     }
     collapseChildren(container) {
-        container.style.height = container.offsetHeight + 'px';
+        container.style.height = `${container.offsetHeight}px`;
         requestAnimationFrame(() => {
             container.style.height = '0';
         });
@@ -172,7 +167,7 @@ class TreeComponent {
         });
     }
     traverseNodes(nodes, callback) {
-        nodes.forEach(node => {
+        nodes.forEach((node) => {
             callback(node);
             if (node.children.length > 0) {
                 this.traverseNodes(node.children, callback);

package/js/utils.js

@@ -9,10 +9,10 @@ const utils = {
     },
     value(element) {
         if (element.hasAttribute('value')) {
-            return element.getAttribute('value') || '';
+            return element.getAttribute('value');
         }
         if (element.hasAttribute('data-value')) {
-            return element.getAttribute('data-value') || '';
+            return element.getAttribute('data-value');
         }
         return element.innerText;
     },
@@ -26,11 +26,11 @@ const utils = {
         return undefined;
     },
     isList(element) {
-        return NodeList.prototype.isPrototypeOf(element);
+        return element instanceof NodeList;
     },
     isHidden(element) {
         return element.offsetParent === null;
-    }
+    },
 };
 function escapeHtml(text) {
     const div = document.createElement('div');
@@ -40,11 +40,10 @@ function escapeHtml(text) {
 function 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 => {
+    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:')) {
+            if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) {
                 el.removeAttribute(attr.name);
             }
         }

package/js/virtual-dropdown.d.ts

@@ -34,7 +34,7 @@ declare class VirtualDropdown {
     private filteredOptions;
     private isOpen;
     private scrollTop;
-    private abortController;
+    private listeners;
     constructor(config: VirtualDropdownConfig);
     private init;
     private renderBase;

package/js/virtual-dropdown.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class VirtualDropdown {
     container;
     options;
@@ -21,11 +22,9 @@ class VirtualDropdown {
     filteredOptions;
     isOpen;
     scrollTop;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(config) {
-        const containerElement = typeof config.container === 'string'
-            ? document.querySelector(config.container)
-            : config.container;
+        const containerElement = typeof config.container === 'string' ? document.querySelector(config.container) : config.container;
         if (!containerElement) {
             throw new Error('Container element not found');
         }
@@ -34,8 +33,8 @@ class VirtualDropdown {
         this.multiSelect = config.multiSelect ?? false;
         this.searchable = config.searchable ?? false;
         this.placeholder = config.placeholder || 'Select...';
-        this.renderLimit = config.renderLimit || 20;
-        this.itemHeight = config.itemHeight || 40;
+        this.renderLimit = config.renderLimit ?? 20;
+        this.itemHeight = config.itemHeight ?? 40;
         this.onSelect = config.onSelect ?? null;
         this.anchorName = `--vd-${Math.random().toString(36).slice(2, 9)}`;
         this.selectedValues = new Set();
@@ -87,7 +86,7 @@ class VirtualDropdown {
         return element;
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.trigger.addEventListener('click', () => this.toggle(), sig);
         this.trigger.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
@@ -122,7 +121,12 @@ class VirtualDropdown {
         }, sig);
     }
     toggle() {
-        this.isOpen ? this.close() : this.open();
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
     }
     open() {
         this.isOpen = true;
@@ -146,7 +150,7 @@ class VirtualDropdown {
         }
         else {
             const lowerQuery = query.toLowerCase();
-            this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(lowerQuery));
+            this.filteredOptions = this.options.filter((opt) => opt.label.toLowerCase().includes(lowerQuery));
         }
         this.listWrapper.scrollTop = 0;
         this.scrollTop = 0;
@@ -180,29 +184,25 @@ class VirtualDropdown {
         `;
         })
             .join('');
-        this.content.querySelectorAll('.dropdown-item').forEach(item => {
-            const handleItemClick = (e) => {
+        this.content.querySelectorAll('.dropdown-item').forEach((item) => {
+            item.addEventListener('click', (e) => {
                 e.stopPropagation();
                 const value = item.dataset.value;
-                if (value) {
+                if (value)
                     this.handleSelect(value);
-                }
-            };
-            const handleItemKeydown = (e) => {
+            });
+            item.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     const value = item.dataset.value;
-                    if (value) {
+                    if (value)
                         this.handleSelect(value);
-                    }
                 }
-            };
-            item.addEventListener('click', handleItemClick);
-            item.addEventListener('keydown', handleItemKeydown);
+            });
         });
     }
     handleSelect(valueString) {
-        const selectedOpt = this.filteredOptions.find(o => String(o.value) === valueString);
+        const selectedOpt = this.filteredOptions.find((o) => String(o.value) === valueString);
         if (!selectedOpt)
             return;
         const val = selectedOpt.value;
@@ -221,9 +221,7 @@ class VirtualDropdown {
             this.close();
         }
         this.updateTrigger();
-        if (this.onSelect) {
-            this.onSelect(Array.from(this.selectedValues));
-        }
+        this.onSelect?.(Array.from(this.selectedValues));
     }
     updateTrigger() {
         if (this.selectedValues.size === 0) {
@@ -238,7 +236,7 @@ class VirtualDropdown {
             }
             else {
                 const val = Array.from(this.selectedValues)[0];
-                const opt = this.options.find(o => o.value === val);
+                const opt = this.options.find((o) => o.value === val);
                 this.triggerText.textContent = opt ? opt.label : String(val);
             }
         }
@@ -248,8 +246,8 @@ class VirtualDropdown {
     }
     setValue(values) {
         this.selectedValues.clear();
-        values.forEach(val => {
-            if (this.options.some(opt => opt.value === val)) {
+        values.forEach((val) => {
+            if (this.options.some((opt) => opt.value === val)) {
                 this.selectedValues.add(val);
             }
         });
@@ -268,7 +266,7 @@ class VirtualDropdown {
     destroy() {
         if (this.isOpen)
             this.menu.hidePopover();
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.innerHTML = '';
         this.container.classList.remove('custom-dropdown', 'open');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",
@@ -36,6 +36,7 @@
     "eslint": "^10.5.0",
     "eslint-config-prettier": "^10.1.8",
     "prettier": "^3.8.4",
+    "sass": "^1.100.0",
     "typescript": "^6.0.0",
     "typescript-eslint": "^8.61.0"
   }

package/svg-icons/chevron_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z"/></svg>

package/svg-icons/keyboard_arrow_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z"/></svg>