@dodlhuat/basix 1.4.2 → 1.5.0

package/js/group-picker.js

@@ -1,9 +1,10 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class GroupPicker {
     container;
     data;
     options;
-    abortController;
+    listeners = new ListenerGroup();
     selectedParents = new Set();
     selectedSubs = new Map();
     expandedGroups = new Set();
@@ -12,14 +13,11 @@ class GroupPicker {
     listEl;
     selectionEl;
     constructor(selector, data, options = {}) {
-        const el = typeof selector === 'string'
-            ? document.querySelector(selector)
-            : selector;
+        const el = typeof selector === 'string' ? document.querySelector(selector) : selector;
         if (!el)
             throw new Error(`GroupPicker: Element not found for "${selector}"`);
         this.container = el;
         this.data = data;
-        this.abortController = new AbortController();
         this.options = {
             onSelectionChange: options.onSelectionChange ?? (() => { }),
             searchPlaceholder: options.searchPlaceholder ?? 'Gruppen durchsuchen...',
@@ -27,6 +25,7 @@ class GroupPicker {
             deselectLabel: options.deselectLabel ?? 'Abwählen',
             emptyLabel: options.emptyLabel ?? 'Keine Ergebnisse',
             selectionPlaceholder: options.selectionPlaceholder ?? 'Noch keine Auswahl getroffen',
+            iconBasePath: options.iconBasePath ?? 'svg-icons/',
         };
         this.init();
     }
@@ -43,7 +42,7 @@ class GroupPicker {
         const searchWrap = document.createElement('div');
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
-            <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
+            <svg class="icon-svg group-picker__search-icon" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#search"/></svg>
             <input type="text" />
         `;
         this.searchInput = searchWrap.querySelector('input');
@@ -61,7 +60,7 @@ class GroupPicker {
         for (const group of this.data) {
             const subs = group.subgroups ?? [];
             const groupMatches = group.label.toLowerCase().includes(query);
-            const matchingSubs = subs.filter(s => s.label.toLowerCase().includes(query));
+            const matchingSubs = subs.filter((s) => s.label.toLowerCase().includes(query));
             if (!groupMatches && matchingSubs.length === 0 && query)
                 continue;
             visibleCount++;
@@ -72,7 +71,7 @@ class GroupPicker {
             const empty = document.createElement('div');
             empty.className = 'group-picker__empty';
             empty.innerHTML = `
-                <span class="icon icon-search" aria-hidden="true"></span>
+                <svg class="icon-svg" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#search"/></svg>
                 <span>${this.options.emptyLabel}</span>
             `;
             this.listEl.appendChild(empty);
@@ -86,8 +85,7 @@ class GroupPicker {
         el.dataset.groupId = group.id;
         if (!hasChildren)
             el.classList.add('is-leaf');
-        const isExpanded = hasChildren && (this.expandedGroups.has(group.id) ||
-            (query.length > 0 && matchingSubs.length > 0));
+        const isExpanded = hasChildren && (this.expandedGroups.has(group.id) || (query.length > 0 && matchingSubs.length > 0));
         const isParentSelected = this.selectedParents.has(group.id);
         if (isExpanded)
             el.classList.add('is-expanded');
@@ -97,13 +95,12 @@ class GroupPicker {
         header.className = 'group-picker__group-header';
         const label = document.createElement('span');
         label.className = 'group-picker__group-label';
-        label.innerHTML = query && groupMatches
-            ? this.highlightText(group.label, query)
-            : escapeHtml(group.label);
+        label.innerHTML = query && groupMatches ? this.highlightText(group.label, query) : escapeHtml(group.label);
         if (hasChildren) {
             const chevron = document.createElement('span');
-            chevron.className = 'icon icon-navigate_next group-picker__chevron';
+            chevron.className = 'group-picker__chevron';
             chevron.setAttribute('aria-hidden', 'true');
+            chevron.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#chevron_right"/></svg>`;
             const count = document.createElement('span');
             count.className = 'badge badge-sm';
             count.textContent = `${subs.length}`;
@@ -119,11 +116,11 @@ class GroupPicker {
             actionBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
                 this.toggleParentGroup(group.id);
-            }, { signal: this.abortController.signal });
+            }, { signal: this.listeners.signal });
             header.append(chevron, label, count, actionBtn);
             header.addEventListener('click', () => {
                 this.toggleExpand(group.id);
-            }, { signal: this.abortController.signal });
+            }, { signal: this.listeners.signal });
             const subsContainer = document.createElement('div');
             subsContainer.className = 'group-picker__subgroups';
             const subsList = document.createElement('div');
@@ -144,14 +141,14 @@ class GroupPicker {
                     if (!isParentSelected) {
                         this.toggleSubgroup(group.id, sub.id);
                     }
-                }, { signal: this.abortController.signal });
+                }, { signal: this.listeners.signal });
                 subsList.appendChild(subEl);
             }
             subsContainer.appendChild(subsList);
             el.append(header, subsContainer);
             if (isExpanded) {
                 requestAnimationFrame(() => {
-                    subsContainer.style.height = subsContainer.scrollHeight + 'px';
+                    subsContainer.style.height = `${subsContainer.scrollHeight}px`;
                     subsContainer.addEventListener('transitionend', () => {
                         subsContainer.style.height = 'auto';
                     }, { once: true });
@@ -160,12 +157,13 @@ class GroupPicker {
         }
         else {
             const checkEl = document.createElement('span');
-            checkEl.className = 'icon icon-check group-picker__leaf-check';
+            checkEl.className = 'group-picker__leaf-check';
             checkEl.setAttribute('aria-hidden', 'true');
+            checkEl.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#check"/></svg>`;
             header.append(label, checkEl);
             header.addEventListener('click', () => {
                 this.toggleParentGroup(group.id);
-            }, { signal: this.abortController.signal });
+            }, { signal: this.listeners.signal });
             el.appendChild(header);
         }
         return el;
@@ -173,17 +171,17 @@ class GroupPicker {
     renderSelection() {
         this.selectionEl.innerHTML = '';
         for (const groupId of this.selectedParents) {
-            const group = this.data.find(g => g.id === groupId);
+            const group = this.data.find((g) => g.id === groupId);
             if (!group)
                 continue;
             this.selectionEl.appendChild(this.createChip(group.label, true, () => this.toggleParentGroup(groupId)));
         }
         for (const [groupId, subs] of this.selectedSubs) {
-            const group = this.data.find(g => g.id === groupId);
+            const group = this.data.find((g) => g.id === groupId);
             if (!group)
                 continue;
             for (const subId of subs) {
-                const sub = group.subgroups?.find(s => s.id === subId);
+                const sub = group.subgroups?.find((s) => s.id === subId);
                 if (!sub)
                     continue;
                 this.selectionEl.appendChild(this.createChip(sub.label, false, () => this.toggleSubgroup(groupId, subId)));
@@ -192,16 +190,14 @@ class GroupPicker {
     }
     createChip(label, isParent, onRemove) {
         const chip = document.createElement('span');
-        chip.className = isParent
-            ? 'chip closeable group-picker__chip--parent'
-            : 'chip closeable';
+        chip.className = isParent ? 'chip closeable group-picker__chip--parent' : 'chip closeable';
         const btn = document.createElement('button');
         btn.setAttribute('aria-label', `${label} entfernen`);
-        btn.innerHTML = `<span class="icon icon-close"></span>`;
+        btn.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#close"/></svg>`;
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
             onRemove();
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
         chip.append(document.createTextNode(label), btn);
         return chip;
     }
@@ -229,7 +225,7 @@ class GroupPicker {
         else {
             subs.add(subId);
         }
-        const group = this.data.find(g => g.id === groupId);
+        const group = this.data.find((g) => g.id === groupId);
         if (group && subs.size === (group.subgroups ?? []).length) {
             this.selectedSubs.delete(groupId);
             this.selectedParents.add(groupId);
@@ -244,7 +240,7 @@ class GroupPicker {
             this.expandedGroups.delete(groupId);
             groupEl?.classList.remove('is-expanded');
             if (subsEl) {
-                subsEl.style.height = subsEl.scrollHeight + 'px';
+                subsEl.style.height = `${subsEl.scrollHeight}px`;
                 requestAnimationFrame(() => {
                     subsEl.style.height = '0';
                 });
@@ -254,7 +250,7 @@ class GroupPicker {
             this.expandedGroups.add(groupId);
             groupEl?.classList.add('is-expanded');
             if (subsEl) {
-                subsEl.style.height = subsEl.scrollHeight + 'px';
+                subsEl.style.height = `${subsEl.scrollHeight}px`;
                 subsEl.addEventListener('transitionend', () => {
                     if (this.expandedGroups.has(groupId)) {
                         subsEl.style.height = 'auto';
@@ -275,7 +271,7 @@ class GroupPicker {
                 this.searchQuery = this.searchInput.value;
                 this.renderGroups();
             }, 120);
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
     }
     emitChange() {
         const selection = this.getSelection();
@@ -322,7 +318,7 @@ class GroupPicker {
         this.emitChange();
     }
     expandAll() {
-        this.data.forEach(g => this.expandedGroups.add(g.id));
+        this.data.forEach((g) => this.expandedGroups.add(g.id));
         this.renderGroups();
     }
     collapseAll() {
@@ -330,7 +326,7 @@ class GroupPicker {
         this.renderGroups();
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.innerHTML = '';
         this.container.classList.remove('group-picker');
     }

package/js/lightbox.d.ts

@@ -12,6 +12,7 @@ interface LightboxOptions {
     startIndex?: number;
     onOpen?: () => void;
     onClose?: () => void;
+    iconBasePath?: string;
 }
 declare class Lightbox {
     private images;
@@ -19,15 +20,16 @@ declare class Lightbox {
     private readonly closeable;
     private readonly onOpen?;
     private readonly onClose?;
+    private readonly iconBasePath;
     private wrapper;
     private imgEl;
     private captionEl;
     private counterEl;
     private isZoomed;
-    private abortController;
+    private listeners;
     constructor(options: LightboxOptions);
     show(): void;
-    hide: () => void;
+    hide(): void;
     next(): void;
     prev(): void;
     isVisible(): boolean;
@@ -41,6 +43,6 @@ declare class Lightbox {
     private handleBackgroundClick;
     private addTouchSupport;
     private buildTemplate;
-    static bind(selector?: string): void;
+    static bind(selector?: string, iconBasePath?: string): void;
 }
 export { Lightbox, type LightboxOptions, type LightboxImage };

package/js/lightbox.js

@@ -1,15 +1,17 @@
+import { ListenerGroup } from './listeners.js';
 class Lightbox {
     images;
     currentIndex;
     closeable;
     onOpen;
     onClose;
+    iconBasePath;
     wrapper = null;
     imgEl = null;
     captionEl = null;
     counterEl = null;
     isZoomed = false;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(options) {
         if (options.images && options.images.length > 0) {
             this.images = options.images;
@@ -21,6 +23,7 @@ class Lightbox {
         this.closeable = options.closeable ?? true;
         this.onOpen = options.onOpen;
         this.onClose = options.onClose;
+        this.iconBasePath = options.iconBasePath ?? 'svg-icons/';
     }
     show() {
         this.hide();
@@ -36,12 +39,12 @@ class Lightbox {
         this.imgEl = wrapper.querySelector('.lightbox-img');
         this.captionEl = wrapper.querySelector('.lightbox-caption');
         this.counterEl = wrapper.querySelector('.lightbox-counter');
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         if (this.closeable) {
-            wrapper.querySelector('.lightbox-close')?.addEventListener('click', this.hide, sig);
-            wrapper.querySelector('.lightbox-background')?.addEventListener('click', this.handleBackgroundClick, sig);
+            wrapper.querySelector('.lightbox-close')?.addEventListener('click', () => this.hide(), sig);
+            wrapper.querySelector('.lightbox-background')?.addEventListener('click', (e) => this.handleBackgroundClick(e), sig);
         }
-        document.addEventListener('keydown', this.handleKeydown, sig);
+        document.addEventListener('keydown', (e) => this.handleKeydown(e), sig);
         if (this.images.length > 1) {
             wrapper.querySelector('.lightbox-prev')?.addEventListener('click', () => this.prev(), sig);
             wrapper.querySelector('.lightbox-next')?.addEventListener('click', () => this.next(), sig);
@@ -57,12 +60,11 @@ class Lightbox {
         });
         this.onOpen?.();
     }
-    hide = () => {
+    hide() {
         const wrapper = this.wrapper;
         if (!wrapper)
             return;
-        this.abortController.abort();
-        this.abortController = new AbortController();
+        this.listeners.reset();
         document.body.style.overflow = '';
         wrapper.classList.remove('is-visible');
         setTimeout(() => {
@@ -76,7 +78,7 @@ class Lightbox {
             }
             this.onClose?.();
         }, 300);
-    };
+    }
     next() {
         if (this.images.length <= 1)
             return;
@@ -137,7 +139,7 @@ class Lightbox {
             return;
         const prevIdx = (index - 1 + this.images.length) % this.images.length;
         const nextIdx = (index + 1) % this.images.length;
-        [prevIdx, nextIdx].forEach(i => {
+        [prevIdx, nextIdx].forEach((i) => {
             const img = new Image();
             img.src = this.images[i].src;
         });
@@ -164,7 +166,7 @@ class Lightbox {
         this.imgEl.classList.toggle('is-zoomed', this.isZoomed);
         this.wrapper?.querySelector('.lightbox-img-wrap')?.classList.toggle('is-zoomed', this.isZoomed);
     }
-    handleKeydown = (e) => {
+    handleKeydown(e) {
         switch (e.key) {
             case 'Escape':
                 if (this.closeable)
@@ -180,11 +182,11 @@ class Lightbox {
                 this.trapFocus(e);
                 break;
         }
-    };
+    }
     trapFocus(e) {
         if (!this.wrapper)
             return;
-        const focusable = Array.from(this.wrapper.querySelectorAll('button:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])')).filter(el => el.offsetParent !== null);
+        const focusable = Array.from(this.wrapper.querySelectorAll('button:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])')).filter((el) => el.offsetParent !== null);
         if (focusable.length === 0)
             return;
         const first = focusable[0];
@@ -202,11 +204,11 @@ class Lightbox {
             }
         }
     }
-    handleBackgroundClick = (e) => {
+    handleBackgroundClick(e) {
         if (e.target?.classList.contains('lightbox-background')) {
             this.hide();
         }
-    };
+    }
     addTouchSupport() {
         const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
         if (!wrap)
@@ -216,20 +218,26 @@ class Lightbox {
         wrap.addEventListener('touchstart', (e) => {
             startX = e.touches[0].clientX;
             isDragging = true;
-        }, { passive: true, signal: this.abortController.signal });
+        }, { passive: true, signal: this.listeners.signal });
         wrap.addEventListener('touchend', (e) => {
             if (!isDragging)
                 return;
             const deltaX = e.changedTouches[0].clientX - startX;
             if (Math.abs(deltaX) > 50) {
-                deltaX < 0 ? this.next() : this.prev();
+                if (deltaX < 0) {
+                    this.next();
+                }
+                else {
+                    this.prev();
+                }
             }
             isDragging = false;
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
     }
     buildTemplate() {
+        const icon = (name) => `<svg class="icon-svg" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#${name}"/></svg>`;
         return `
-            ${this.closeable ? '<button class="lightbox-close" aria-label="Close lightbox"><span class="icon icon-close"></span></button>' : ''}
+            ${this.closeable ? `<button class="lightbox-close" aria-label="Close lightbox">${icon('close')}</button>` : ''}
             <div class="lightbox" role="document">
                 <div class="lightbox-img-wrap">
                     <div class="lightbox-spinner"><div class="spinner"></div></div>
@@ -239,24 +247,20 @@ class Lightbox {
                 <div class="lightbox-counter" hidden></div>
             </div>
             <button class="lightbox-prev" aria-label="Previous image" hidden>
-                <span class="icon icon-navigate_before"></span>
+                ${icon('chevron_left')}
             </button>
             <button class="lightbox-next" aria-label="Next image" hidden>
-                <span class="icon icon-navigate_next"></span>
+                ${icon('chevron_right')}
             </button>
             <div class="lightbox-background"></div>
         `;
     }
-    static bind(selector = '[data-lightbox]') {
+    static bind(selector = '[data-lightbox]', iconBasePath) {
         const elements = document.querySelectorAll(selector);
         const groups = new Map();
-        elements.forEach(el => {
+        elements.forEach((el) => {
             const groupKey = el.dataset.lightbox || `__solo__${el.dataset.lightboxId ?? Math.random()}`;
-            const src = el instanceof HTMLAnchorElement
-                ? el.href
-                : el instanceof HTMLImageElement
-                    ? el.src
-                    : (el.dataset.src ?? '');
+            const src = el instanceof HTMLAnchorElement ? el.href : el instanceof HTMLImageElement ? el.src : (el.dataset.src ?? '');
             const imgChild = el.querySelector('img');
             const alt = el instanceof HTMLImageElement ? el.alt : (imgChild?.alt ?? '');
             const caption = el.dataset.lightboxCaption;
@@ -264,14 +268,15 @@ class Lightbox {
                 groups.set(groupKey, []);
             groups.get(groupKey).push({ el, image: { src, alt, caption } });
         });
-        groups.forEach(items => {
+        groups.forEach((items) => {
             items.forEach(({ el }, idx) => {
                 el.style.cursor = 'zoom-in';
-                el.addEventListener('click', e => {
+                el.addEventListener('click', (e) => {
                     e.preventDefault();
                     new Lightbox({
-                        images: items.map(i => i.image),
+                        images: items.map((i) => i.image),
                         startIndex: idx,
+                        iconBasePath,
                     }).show();
                 });
             });

package/js/listeners.d.ts

@@ -0,0 +1,7 @@
+declare class ListenerGroup {
+    private controller;
+    get signal(): AbortSignal;
+    reset(): void;
+    destroy(): void;
+}
+export { ListenerGroup };

package/js/listeners.js

@@ -0,0 +1,14 @@
+class ListenerGroup {
+    controller = new AbortController();
+    get signal() {
+        return this.controller.signal;
+    }
+    reset() {
+        this.controller.abort();
+        this.controller = new AbortController();
+    }
+    destroy() {
+        this.controller.abort();
+    }
+}
+export { ListenerGroup };

package/js/modal.d.ts

@@ -5,6 +5,7 @@ interface ModalOptions {
     footer?: string;
     closeable?: boolean;
     type?: ModalType;
+    iconBasePath?: string;
 }
 declare class Modal {
     private content;
@@ -12,12 +13,14 @@ declare class Modal {
     private readonly footer?;
     private readonly closeable;
     private readonly type;
+    private readonly iconBasePath;
     private template;
     private modalWrapper;
+    private listeners;
     constructor(options: ModalOptions);
     constructor(content: string, header?: string, footer?: string, closeable?: boolean, type?: ModalType);
     show(): void;
-    hide: () => void;
+    hide(): void;
     private handleEscape;
     private handleBackgroundClick;
     private buildTemplate;

package/js/modal.js

@@ -1,13 +1,15 @@
 import { sanitizeHtml } from './utils.js';
-const CLOSE_ICON = '<div class="icon icon-close close"></div>';
+import { ListenerGroup } from './listeners.js';
 class Modal {
     content;
     header;
     footer;
     closeable;
     type;
+    iconBasePath;
     template;
     modalWrapper = null;
+    listeners = new ListenerGroup();
     constructor(contentOrOptions, header, footer, closeable = true, type = 'default') {
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
@@ -15,6 +17,7 @@ class Modal {
             this.footer = contentOrOptions.footer;
             this.closeable = contentOrOptions.closeable ?? true;
             this.type = contentOrOptions.type ?? 'default';
+            this.iconBasePath = contentOrOptions.iconBasePath ?? 'svg-icons/';
         }
         else {
             this.content = contentOrOptions;
@@ -22,6 +25,7 @@ class Modal {
             this.footer = footer;
             this.closeable = closeable;
             this.type = type;
+            this.iconBasePath = 'svg-icons/';
         }
         this.template = this.buildTemplate();
     }
@@ -32,31 +36,22 @@ class Modal {
         wrapper.innerHTML = this.template;
         document.body.append(wrapper);
         this.modalWrapper = wrapper;
+        const sig = { signal: this.listeners.signal };
         if (this.closeable) {
-            const closeBtn = wrapper.querySelector('.close');
-            closeBtn?.addEventListener('click', this.hide);
-        }
-        const background = wrapper.querySelector('.modal-background');
-        if (this.closeable && background) {
-            background.addEventListener('click', this.handleBackgroundClick);
-        }
-        if (this.closeable) {
-            document.addEventListener('keydown', this.handleEscape);
+            wrapper.querySelector('.close')?.addEventListener('click', () => this.hide(), sig);
+            wrapper.querySelector('.modal-background')?.addEventListener('click', (e) => this.handleBackgroundClick(e), sig);
+            document.addEventListener('keydown', (e) => this.handleEscape(e), sig);
         }
         document.body.style.overflow = 'hidden';
         requestAnimationFrame(() => {
             wrapper.classList.add('is-visible');
         });
     }
-    hide = () => {
+    hide() {
         const wrapper = this.modalWrapper;
         if (!wrapper)
             return;
-        const closeBtn = wrapper.querySelector('.close');
-        closeBtn?.removeEventListener('click', this.hide);
-        const background = wrapper.querySelector('.modal-background');
-        background?.removeEventListener('click', this.handleBackgroundClick);
-        document.removeEventListener('keydown', this.handleEscape);
+        this.listeners.reset();
         document.body.style.overflow = '';
         wrapper.classList.remove('is-visible');
         setTimeout(() => {
@@ -65,21 +60,21 @@ class Modal {
                 this.modalWrapper = null;
             }
         }, 300);
-    };
-    handleEscape = (e) => {
+    }
+    handleEscape(e) {
         if (e.key === 'Escape') {
             this.hide();
         }
-    };
-    handleBackgroundClick = (e) => {
+    }
+    handleBackgroundClick(e) {
         if (e.target?.classList.contains('modal-background')) {
             this.hide();
         }
-    };
+    }
     buildTemplate() {
         const parts = [`<div class="modal modal-${this.type}">`];
         if (this.closeable) {
-            parts.push(CLOSE_ICON);
+            parts.push(`<svg class="icon-svg close" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#close"/></svg>`);
         }
         if (this.header !== undefined) {
             const headerClass = `header ${this.type}-bg`;

package/js/popover.d.ts

@@ -21,8 +21,9 @@ declare class Popover {
     private readonly trigger;
     private readonly opts;
     private popoverEl;
-    private _isOpen;
     private hoverTimer;
+    private listeners;
+    private openListeners;
     constructor(triggerEl: HTMLElement | string, options: PopoverOptions);
     get isOpen(): boolean;
     open(): void;
@@ -39,7 +40,6 @@ declare class Popover {
     private onOutsideClick;
     private onEscape;
     private attachTrigger;
-    private detachTrigger;
 }
 export { Popover };
 export type { PopoverOptions, PopoverPlacement, PopoverAlign, PopoverTrigger };