@dodlhuat/basix 1.3.1 → 1.3.3

package/js/gallery.d.ts

@@ -1,8 +1,10 @@
+/** A single image record for MasonryGallery. */
 interface ImageData {
     src: string;
     title: string;
     desc: string;
 }
+/** Configuration options for MasonryGallery. */
 interface MasonryGalleryOptions {
     fetchFunction: () => Promise<ImageData[]>;
     minColumnWidth?: number;
@@ -10,6 +12,7 @@ interface MasonryGalleryOptions {
     loaderSelector?: string;
     reload?: number;
 }
+/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 declare class MasonryGallery {
     private container;
     private readonly loader;
@@ -22,6 +25,7 @@ declare class MasonryGallery {
     constructor(containerId: string, options: MasonryGalleryOptions);
     private init;
     private setupLayout;
+    private buildColumns;
     private addEventListeners;
     private reLayout;
     private handleScroll;

package/js/gallery.js

@@ -1,19 +1,15 @@
 import { escapeHtml } from './utils.js';
+/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 class MasonryGallery {
+    container;
+    loader;
+    options;
+    columns = [];
+    isFetching = false;
+    resizeObserver = null;
+    abortController = null;
+    reloaded = 0;
     constructor(containerId, options) {
-        this.columns = [];
-        this.isFetching = false;
-        this.resizeObserver = null;
-        this.abortController = null;
-        this.reloaded = 0;
-        this.handleScroll = () => {
-            if (this.isFetching)
-                return;
-            const rect = this.container.getBoundingClientRect();
-            if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
-                this.loadMoreImages();
-            }
-        };
         const container = document.getElementById(containerId);
         if (!container) {
             throw new Error(`Container with id "${containerId}" not found`);
@@ -37,54 +33,49 @@ class MasonryGallery {
         const containerWidth = this.container.getBoundingClientRect().width;
         const numColumns = Math.max(1, Math.floor(containerWidth / this.options.minColumnWidth));
         if (this.columns.length !== numColumns) {
-            this.container.innerHTML = "";
-            this.columns = [];
-            for (let i = 0; i < numColumns; i++) {
-                const col = document.createElement("div");
-                col.className = "masonry-column";
-                this.container.appendChild(col);
-                this.columns.push(col);
-            }
+            this.buildColumns(numColumns);
+        }
+    }
+    buildColumns(count) {
+        this.container.innerHTML = '';
+        this.columns = [];
+        for (let i = 0; i < count; i++) {
+            const col = document.createElement('div');
+            col.className = 'masonry-column';
+            this.container.appendChild(col);
+            this.columns.push(col);
         }
     }
     addEventListeners() {
+        this.abortController = new AbortController();
+        const sig = this.abortController.signal;
         let resizeTimeout;
         window.addEventListener("resize", () => {
             clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                this.reLayout();
-            }, 200);
-        });
-        this.abortController = new AbortController();
-        window.addEventListener("scroll", this.handleScroll, {
-            passive: true,
-            signal: this.abortController.signal,
-        });
+            resizeTimeout = setTimeout(() => this.reLayout(), 200);
+        }, { signal: sig });
+        window.addEventListener("scroll", this.handleScroll, { passive: true, signal: sig });
     }
     reLayout() {
-        const items = [];
-        this.columns.forEach((col) => {
-            Array.from(col.children).forEach((child) => {
-                items.push(child);
-            });
-            col.innerHTML = "";
-        });
+        const items = this.columns.flatMap(col => Array.from(col.children));
         const availableWidth = Math.min(1200, window.innerWidth - 40);
         const numColumns = Math.max(1, Math.floor(availableWidth / this.options.minColumnWidth));
         if (this.columns.length !== numColumns) {
-            this.container.innerHTML = "";
-            this.columns = [];
-            for (let i = 0; i < numColumns; i++) {
-                const col = document.createElement("div");
-                col.className = "masonry-column";
-                this.container.appendChild(col);
-                this.columns.push(col);
-            }
+            this.buildColumns(numColumns);
         }
-        items.forEach((item) => {
-            this.addToShortestColumn(item);
-        });
+        else {
+            this.columns.forEach(col => { col.innerHTML = ''; });
+        }
+        items.forEach(item => this.addToShortestColumn(item));
     }
+    handleScroll = () => {
+        if (this.isFetching)
+            return;
+        const rect = this.container.getBoundingClientRect();
+        if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
+            this.loadMoreImages();
+        }
+    };
     async loadMoreImages(isAutoFill = false) {
         if (!isAutoFill)
             this.reloaded++;
@@ -106,8 +97,6 @@ class MasonryGallery {
         finally {
             this.isFetching = false;
             this.toggleLoader(false);
-            // If the rendered content doesn't fill the viewport, auto-load the next
-            // batch without waiting for a scroll event (multi-column layout is shorter)
             requestAnimationFrame(() => {
                 const rect = this.container.getBoundingClientRect();
                 if (rect.bottom <= window.innerHeight + this.options.scrollThreshold) {

package/js/group-picker.d.ts

@@ -1,12 +1,15 @@
+/** A single subgroup item within a GroupPicker group. */
 interface SubgroupData {
     id: string;
     label: string;
 }
+/** A group with an optional list of subgroups for GroupPicker. */
 interface GroupData {
     id: string;
     label: string;
     subgroups?: SubgroupData[];
 }
+/** The current selection state returned by GroupPicker. */
 interface GroupPickerSelection {
     parentGroups: string[];
     subgroups: {
@@ -14,6 +17,7 @@ interface GroupPickerSelection {
         subgroupId: string;
     }[];
 }
+/** Configuration options for the GroupPicker component. */
 interface GroupPickerOptions {
     onSelectionChange?: (selection: GroupPickerSelection) => void;
     searchPlaceholder?: string;
@@ -22,6 +26,7 @@ interface GroupPickerOptions {
     emptyLabel?: string;
     selectionPlaceholder?: string;
 }
+/** Searchable picker for selecting groups and their subgroups. */
 declare class GroupPicker {
     private container;
     private data;

package/js/group-picker.js

@@ -1,11 +1,18 @@
 import { escapeHtml } from './utils.js';
+/** Searchable picker for selecting groups and their subgroups. */
 class GroupPicker {
+    container;
+    data;
+    options;
+    abortController;
+    selectedParents = new Set();
+    selectedSubs = new Map();
+    expandedGroups = new Set();
+    searchQuery = '';
+    searchInput;
+    listEl;
+    selectionEl;
     constructor(selector, data, options = {}) {
-        // State
-        this.selectedParents = new Set();
-        this.selectedSubs = new Map();
-        this.expandedGroups = new Set();
-        this.searchQuery = '';
         const el = typeof selector === 'string'
             ? document.querySelector(selector)
             : selector;
@@ -31,11 +38,9 @@ class GroupPicker {
     }
     render() {
         this.container.innerHTML = '';
-        // Selection summary — Basix .chips container
         this.selectionEl = document.createElement('div');
         this.selectionEl.className = 'chips group-picker__selection';
         this.selectionEl.dataset.placeholder = this.options.selectionPlaceholder;
-        // Search — Basix form input with font icon overlay
         const searchWrap = document.createElement('div');
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
@@ -44,7 +49,6 @@ class GroupPicker {
     `;
         this.searchInput = searchWrap.querySelector('input');
         this.searchInput.placeholder = this.options.searchPlaceholder;
-        // List
         this.listEl = document.createElement('div');
         this.listEl.className = 'group-picker__list';
         this.container.append(this.selectionEl, searchWrap, this.listEl);
@@ -99,15 +103,12 @@ class GroupPicker {
             ? this.highlightText(group.label, query)
             : escapeHtml(group.label);
         if (hasChildren) {
-            // Chevron — Basix font icon
             const chevron = document.createElement('span');
             chevron.className = 'icon icon-navigate_next group-picker__chevron';
             chevron.setAttribute('aria-hidden', 'true');
-            // Count — Basix badge
             const count = document.createElement('span');
             count.className = 'badge badge-sm';
             count.textContent = `${subs.length}`;
-            // Action button — Basix button, button-primary when selected
             const actionBtn = document.createElement('button');
             actionBtn.className = 'group-picker__group-action';
             if (isParentSelected) {
@@ -125,14 +126,12 @@ class GroupPicker {
             header.addEventListener('click', () => {
                 this.toggleExpand(group.id);
             }, { signal: this.abortController.signal });
-            // Subgroups — Basix .chips container
             const subsContainer = document.createElement('div');
             subsContainer.className = 'group-picker__subgroups';
             const subsList = document.createElement('div');
             subsList.className = 'chips group-picker__subgroup-list';
             const displaySubs = query && !groupMatches ? matchingSubs : subs;
             for (const sub of displaySubs) {
-                // Subgroup chip — Basix .chip.clickable
                 const subEl = document.createElement('span');
                 subEl.className = 'chip clickable group-picker__subgroup';
                 subEl.dataset.subId = sub.id;
@@ -162,7 +161,6 @@ class GroupPicker {
             }
         }
         else {
-            // Leaf group — Basix font icon check mark
             const checkEl = document.createElement('span');
             checkEl.className = 'icon icon-check group-picker__leaf-check';
             checkEl.setAttribute('aria-hidden', 'true');
@@ -194,7 +192,6 @@ class GroupPicker {
             }
         }
     }
-    // Basix .chip.closeable structure
     createChip(label, isParent, onRemove) {
         const chip = document.createElement('span');
         chip.className = isParent
@@ -210,7 +207,6 @@ class GroupPicker {
         chip.append(document.createTextNode(label), btn);
         return chip;
     }
-    // State management
     toggleParentGroup(groupId) {
         if (this.selectedParents.has(groupId)) {
             this.selectedParents.delete(groupId);
@@ -299,7 +295,6 @@ class GroupPicker {
         const regex = new RegExp(`(${escapedQuery})`, 'gi');
         return safeText.replace(regex, '<mark>$1</mark>');
     }
-    // Public API
     getSelection() {
         const parentGroups = [...this.selectedParents];
         const subgroups = [];

package/js/lightbox.d.ts

@@ -1,8 +1,10 @@
+/** A single image entry for the Lightbox gallery. */
 interface LightboxImage {
     src: string;
     alt?: string;
     caption?: string;
 }
+/** Configuration options for a Lightbox instance. */
 interface LightboxOptions {
     src?: string;
     alt?: string;
@@ -13,6 +15,7 @@ interface LightboxOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
+/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 declare class Lightbox {
     private images;
     private currentIndex;

package/js/lightbox.js

@@ -1,11 +1,17 @@
+/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 class Lightbox {
+    images;
+    currentIndex;
+    closeable;
+    onOpen;
+    onClose;
+    wrapper = null;
+    imgEl = null;
+    captionEl = null;
+    counterEl = null;
+    isZoomed = false;
+    abortController = new AbortController();
     constructor(options) {
-        this.wrapper = null;
-        this.imgEl = null;
-        this.captionEl = null;
-        this.counterEl = null;
-        this.isZoomed = false;
-        this.abortController = new AbortController();
         if (options.images && options.images.length > 0) {
             this.images = options.images;
         }

package/js/modal.d.ts

@@ -1,4 +1,5 @@
 type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
+/** Configuration options for a Modal dialog. */
 interface ModalOptions {
     content: string;
     header?: string;
@@ -6,6 +7,7 @@ interface ModalOptions {
     closeable?: boolean;
     type?: ModalType;
 }
+/** Overlay dialog with optional header, footer, close button, and type variants. */
 declare class Modal {
     private content;
     private readonly header?;
@@ -17,7 +19,7 @@ declare class Modal {
     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,8 +1,15 @@
 import { sanitizeHtml } from './utils.js';
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
+/** Overlay dialog with optional header, footer, close button, and type variants. */
 class Modal {
+    content;
+    header;
+    footer;
+    closeable;
+    type;
+    template;
+    modalWrapper = null;
     constructor(contentOrOptions, header, footer, closeable = true, type = 'default') {
-        this.modalWrapper = null;
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header;
@@ -18,9 +25,6 @@ class Modal {
             this.type = type;
         }
         this.template = this.buildTemplate();
-        this.hide = this.hide.bind(this);
-        this.handleEscape = this.handleEscape.bind(this);
-        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
     }
     show() {
         this.hide();
@@ -45,11 +49,10 @@ class Modal {
             wrapper.classList.add('is-visible');
         });
     }
-    hide() {
+    hide = () => {
         const wrapper = this.modalWrapper;
         if (!wrapper)
             return;
-        // Remove event listeners
         const closeBtn = wrapper.querySelector('.close');
         closeBtn?.removeEventListener('click', this.hide);
         const background = wrapper.querySelector('.modal-background');
@@ -63,17 +66,17 @@ 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">'];
         if (this.closeable) {

package/js/popover.d.ts

@@ -2,6 +2,7 @@ import type { Placement } from './position.js';
 type PopoverPlacement = Placement | 'auto';
 type PopoverAlign = 'start' | 'center' | 'end';
 type PopoverTrigger = 'click' | 'hover';
+/** Configuration options for a Popover instance. */
 interface PopoverOptions {
     content: string;
     placement?: PopoverPlacement;
@@ -15,6 +16,7 @@ interface PopoverOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
+/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 declare class Popover {
     private static openPopovers;
     private static idCounter;

package/js/popover.js

@@ -1,31 +1,16 @@
 import { computePosition } from './position.js';
 import { sanitizeHtml } from './utils.js';
-// Must match $arrow in popover.scss
 const ARROW_SIZE = 6;
+/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 class Popover {
+    static openPopovers = new Set();
+    static idCounter = 0;
+    trigger;
+    opts;
+    popoverEl = null;
+    _isOpen = false;
+    hoverTimer = null;
     constructor(triggerEl, options) {
-        this.popoverEl = null;
-        this._isOpen = false;
-        this.hoverTimer = null;
-        // ── Event handlers ─────────────────────────────────────────────────────────
-        this.onClick = () => { this.toggle(); };
-        this.onMouseEnter = () => {
-            if (this.hoverTimer !== null)
-                clearTimeout(this.hoverTimer);
-            this.open();
-        };
-        this.onMouseLeave = () => {
-            this.hoverTimer = window.setTimeout(() => this.close(), 120);
-        };
-        this.onOutsideClick = (e) => {
-            const t = e.target;
-            if (!this.popoverEl?.contains(t) && !this.trigger.contains(t))
-                this.close();
-        };
-        this.onEscape = (e) => {
-            if (e.key === 'Escape')
-                this.close();
-        };
         const el = typeof triggerEl === 'string'
             ? document.querySelector(triggerEl)
             : triggerEl;
@@ -47,7 +32,6 @@ class Popover {
         };
         this.attachTrigger();
     }
-    // ── Public API ─────────────────────────────────────────────────────────────
     get isOpen() { return this._isOpen; }
     open() {
         if (this._isOpen)
@@ -109,7 +93,6 @@ class Popover {
             });
         });
     }
-    // ── Build ──────────────────────────────────────────────────────────────────
     buildEl() {
         const id = `popover-${++Popover.idCounter}`;
         const el = document.createElement('div');
@@ -117,8 +100,6 @@ class Popover {
         el.id = id;
         el.setAttribute('role', 'dialog');
         el.setAttribute('data-arrow', String(this.opts.arrow));
-        // Wrap plain content in .popover-body so it gets proper padding.
-        // Skip wrapping when content already uses structured popover elements.
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
         const safeContent = sanitizeHtml(this.opts.content);
         el.innerHTML = hasStructure
@@ -128,7 +109,6 @@ class Popover {
         this.trigger.setAttribute('aria-controls', id);
         return el;
     }
-    // ── Positioning ────────────────────────────────────────────────────────────
     reposition() {
         if (!this.popoverEl)
             return;
@@ -145,6 +125,24 @@ class Popover {
         this.popoverEl.style.left = `${left}px`;
         this.popoverEl.style.top = `${top}px`;
     }
+    onClick = () => { this.toggle(); };
+    onMouseEnter = () => {
+        if (this.hoverTimer !== null)
+            clearTimeout(this.hoverTimer);
+        this.open();
+    };
+    onMouseLeave = () => {
+        this.hoverTimer = window.setTimeout(() => this.close(), 120);
+    };
+    onOutsideClick = (e) => {
+        const t = e.target;
+        if (!this.popoverEl?.contains(t) && !this.trigger.contains(t))
+            this.close();
+    };
+    onEscape = (e) => {
+        if (e.key === 'Escape')
+            this.close();
+    };
     attachTrigger() {
         if (this.opts.triggerMode === 'click') {
             this.trigger.addEventListener('click', this.onClick);
@@ -160,6 +158,4 @@ class Popover {
         this.trigger.removeEventListener('mouseleave', this.onMouseLeave);
     }
 }
-Popover.openPopovers = new Set();
-Popover.idCounter = 0;
 export { Popover };

package/js/position.d.ts

@@ -4,6 +4,7 @@
  */
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 type Align = 'start' | 'center' | 'end';
+/** Options accepted by `computePosition`. */
 interface PositionOptions {
     placement: Placement | 'auto';
     align?: Align;
@@ -11,6 +12,7 @@ interface PositionOptions {
     margin?: number;
     arrowSize?: number;
 }
+/** Result returned by `computePosition`. */
 interface PositionResult {
     left: number;
     top: number;

package/js/position.js

@@ -44,7 +44,6 @@ function computePosition(trigger, floating, opts) {
     const placement = opts.placement === 'auto'
         ? bestPlacement(trigger, floating, offset)
         : maybeFlip(opts.placement, trigger, floating, offset);
-    // Main-axis offset
     let left = 0, top = 0;
     switch (placement) {
         case 'top':
@@ -60,7 +59,6 @@ function computePosition(trigger, floating, opts) {
             left = trigger.right + offset;
             break;
     }
-    // Cross-axis alignment
     if (placement === 'top' || placement === 'bottom') {
         switch (align) {
             case 'start':
@@ -87,13 +85,11 @@ function computePosition(trigger, floating, opts) {
                 break;
         }
     }
-    // Clamp to viewport
     const l = Math.max(margin, Math.min(window.innerWidth - floating.width - margin, left));
     const t = Math.max(margin, Math.min(window.innerHeight - floating.height - margin, top));
-    // Arrow offset: keep arrow centred on the trigger even after viewport clamping
     let arrowOffset;
     if (opts.arrowSize !== undefined) {
-        const minOff = opts.arrowSize + 8; // min distance from rounded corner
+        const minOff = opts.arrowSize + 8;
         if (placement === 'top' || placement === 'bottom') {
             const raw = trigger.left + trigger.width / 2 - l;
             arrowOffset = Math.max(minOff, Math.min(floating.width - minOff, raw));

package/js/push-menu.d.ts

@@ -1,3 +1,4 @@
+/** DOM element references managed by the PushMenu static class. */
 interface PushMenuElements {
     navigation: HTMLElement | null;
     content: HTMLElement | null;
@@ -6,6 +7,7 @@ interface PushMenuElements {
     controlIcon: HTMLElement | null;
     backdrop: HTMLElement | null;
 }
+/** Static class that manages a push-style side navigation panel. */
 declare class PushMenu {
     private static elements;
     private static initialized;
@@ -19,7 +21,6 @@ declare class PushMenu {
     private static resetPanels;
     private static handleNavigationChange;
     static pushToggle(): void;
-    private static toggleClass;
     private static clickNav;
     private static handleBackdropClick;
     static open(): void;