@dodlhuat/basix 1.3.5 → 1.4.1

package/js/color-picker.js

@@ -0,0 +1,291 @@
+class ColorPicker {
+    container;
+    onChange;
+    canvas;
+    ctx;
+    cursor;
+    hueSlider;
+    hexInput;
+    rInput;
+    gInput;
+    bInput;
+    preview;
+    hue = 0;
+    saturation = 100;
+    brightness = 100;
+    isDragging = false;
+    abortController = new AbortController();
+    ro;
+    constructor(elementOrSelector, options = {}) {
+        const el = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!el)
+            throw new Error(`ColorPicker: element not found for "${elementOrSelector}"`);
+        this.container = el;
+        this.onChange = options.onChange;
+        this.build();
+        this.bindEvents();
+        this.ro = new ResizeObserver(() => this.resizeCanvas());
+        this.ro.observe(this.canvas.parentElement);
+        this.resizeCanvas();
+        if (options.value) {
+            this.setValue(options.value);
+        }
+        else {
+            this.updateFromHSB();
+        }
+    }
+    build() {
+        this.container.classList.add('color-picker');
+        this.container.innerHTML = `
+            <div class="color-picker__field">
+                <canvas class="color-picker__canvas"></canvas>
+                <div class="color-picker__cursor" aria-hidden="true"></div>
+            </div>
+            <div class="color-picker__controls">
+                <div class="color-picker__hue-track">
+                    <input type="range" class="color-picker__hue-slider" min="0" max="360" value="0" aria-label="Hue">
+                </div>
+                <div class="color-picker__preview" aria-hidden="true"></div>
+            </div>
+            <div class="color-picker__inputs">
+                <div class="color-picker__input-group color-picker__input-group--hex">
+                    <label>HEX</label>
+                    <input type="text" class="color-picker__hex" value="#FF0000" spellcheck="false" autocomplete="off" maxlength="7">
+                </div>
+                <div class="color-picker__input-group">
+                    <label>R</label>
+                    <input type="number" class="color-picker__r" min="0" max="255" value="255">
+                </div>
+                <div class="color-picker__input-group">
+                    <label>G</label>
+                    <input type="number" class="color-picker__g" min="0" max="255" value="0">
+                </div>
+                <div class="color-picker__input-group">
+                    <label>B</label>
+                    <input type="number" class="color-picker__b" min="0" max="255" value="0">
+                </div>
+            </div>
+        `;
+        const canvas = this.container.querySelector('.color-picker__canvas');
+        const ctx = canvas?.getContext('2d');
+        if (!canvas || !ctx)
+            throw new Error('ColorPicker: canvas context unavailable');
+        this.canvas = canvas;
+        this.ctx = ctx;
+        this.cursor = this.container.querySelector('.color-picker__cursor');
+        this.hueSlider = this.container.querySelector('.color-picker__hue-slider');
+        this.hexInput = this.container.querySelector('.color-picker__hex');
+        this.rInput = this.container.querySelector('.color-picker__r');
+        this.gInput = this.container.querySelector('.color-picker__g');
+        this.bInput = this.container.querySelector('.color-picker__b');
+        this.preview = this.container.querySelector('.color-picker__preview');
+    }
+    bindEvents() {
+        const sig = { signal: this.abortController.signal };
+        this.canvas.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            this.canvas.setPointerCapture(e.pointerId);
+            this.isDragging = true;
+            this.handleFieldInteraction(e);
+        }, sig);
+        this.canvas.addEventListener('pointermove', (e) => {
+            if (!this.isDragging)
+                return;
+            this.handleFieldInteraction(e);
+        }, sig);
+        this.canvas.addEventListener('pointerup', () => {
+            this.isDragging = false;
+        }, sig);
+        this.canvas.addEventListener('pointercancel', () => {
+            this.isDragging = false;
+        }, sig);
+        this.hueSlider.addEventListener('input', () => {
+            this.hue = +this.hueSlider.value;
+            this.drawField();
+            this.updateFromHSB();
+        }, sig);
+        this.hexInput.addEventListener('change', () => this.handleHexInput(), sig);
+        this.rInput.addEventListener('change', () => this.handleRGBInput(), sig);
+        this.gInput.addEventListener('change', () => this.handleRGBInput(), sig);
+        this.bInput.addEventListener('change', () => this.handleRGBInput(), sig);
+    }
+    resizeCanvas() {
+        const w = this.canvas.offsetWidth;
+        const h = this.canvas.offsetHeight;
+        if (w === 0 || h === 0)
+            return;
+        if (this.canvas.width === w && this.canvas.height === h)
+            return;
+        this.canvas.width = w;
+        this.canvas.height = h;
+        this.drawField();
+        this.updateCursor();
+    }
+    drawField() {
+        const { width, height } = this.canvas;
+        if (width === 0 || height === 0)
+            return;
+        const gradH = this.ctx.createLinearGradient(0, 0, width, 0);
+        gradH.addColorStop(0, '#fff');
+        gradH.addColorStop(1, `hsl(${this.hue}, 100%, 50%)`);
+        this.ctx.fillStyle = gradH;
+        this.ctx.fillRect(0, 0, width, height);
+        const gradV = this.ctx.createLinearGradient(0, 0, 0, height);
+        gradV.addColorStop(0, 'rgba(0,0,0,0)');
+        gradV.addColorStop(1, '#000');
+        this.ctx.fillStyle = gradV;
+        this.ctx.fillRect(0, 0, width, height);
+    }
+    handleFieldInteraction(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+        const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+        this.saturation = (x / rect.width) * 100;
+        this.brightness = 100 - (y / rect.height) * 100;
+        this.updateCursor();
+        this.updateFromHSB();
+    }
+    updateCursor() {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (this.saturation / 100) * rect.width;
+        const y = (1 - this.brightness / 100) * rect.height;
+        this.cursor.style.left = `${x}px`;
+        this.cursor.style.top = `${y}px`;
+        this.cursor.classList.toggle('color-picker__cursor--dark', this.brightness > 50 && this.saturation < 80);
+    }
+    updateFromHSB() {
+        const rgb = this.hsbToRgb(this.hue, this.saturation, this.brightness);
+        const hex = this.rgbToHex(rgb);
+        this.syncInputs(rgb, hex);
+        this.syncPreview(rgb);
+        this.onChange?.(hex, rgb);
+    }
+    syncInputs(rgb, hex) {
+        this.hexInput.value = hex;
+        this.rInput.value = String(rgb.r);
+        this.gInput.value = String(rgb.g);
+        this.bInput.value = String(rgb.b);
+    }
+    syncPreview(rgb) {
+        this.preview.style.backgroundColor = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
+    }
+    handleHexInput() {
+        const hex = this.hexInput.value.trim();
+        if (/^#[0-9a-f]{6}$/i.test(hex)) {
+            this.setFromRGB(this.hexToRgb(hex));
+        }
+        else {
+            this.hexInput.value = this.rgbToHex(this.hsbToRgb(this.hue, this.saturation, this.brightness));
+        }
+    }
+    handleRGBInput() {
+        const clamp = (v) => Math.max(0, Math.min(255, isNaN(v) ? 0 : v));
+        this.setFromRGB({
+            r: clamp(+this.rInput.value),
+            g: clamp(+this.gInput.value),
+            b: clamp(+this.bInput.value),
+        });
+    }
+    setFromRGB(rgb) {
+        const { h, s, v } = this.rgbToHsb(rgb);
+        this.hue = h;
+        this.saturation = s;
+        this.brightness = v;
+        this.hueSlider.value = String(this.hue);
+        this.drawField();
+        this.updateCursor();
+        this.updateFromHSB();
+    }
+    getValue() {
+        return this.rgbToHex(this.hsbToRgb(this.hue, this.saturation, this.brightness));
+    }
+    setValue(hex) {
+        if (!/^#[0-9a-f]{6}$/i.test(hex))
+            return;
+        this.setFromRGB(this.hexToRgb(hex));
+    }
+    destroy() {
+        this.abortController.abort();
+        this.ro.disconnect();
+        this.container.classList.remove('color-picker');
+        this.container.innerHTML = '';
+    }
+    hsbToRgb(h, s, v) {
+        s /= 100;
+        v /= 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
+    }
+    rgbToHsb({ r, g, b }) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            if (max === r)
+                h = ((g - b) / d) % 6;
+            else if (max === g)
+                h = (b - r) / d + 2;
+            else
+                h = (r - g) / d + 4;
+        }
+        h = Math.round(h * 60);
+        if (h < 0)
+            h += 360;
+        return {
+            h,
+            s: max === 0 ? 0 : Math.round((d / max) * 100),
+            v: Math.round(max * 100),
+        };
+    }
+    rgbToHex({ r, g, b }) {
+        return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
+    }
+    hexToRgb(hex) {
+        const m = hex.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+        return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+    }
+}
+export { ColorPicker };

package/js/context-menu.d.ts

@@ -1,4 +1,3 @@
-/** Definition for a single context menu item including optional submenu. */
 interface ContextMenuItemDef {
     label: string;
     icon?: string;
@@ -12,10 +11,8 @@ type ContextMenuInput = ContextMenuItemDef | 'separator' | {
     group: string;
 };
 interface ContextMenuOptions {
-    /** Path to the SVG sprite file, e.g. `'svg-icons/icons.svg'`. Required to render icons. */
     spritePath?: string;
 }
-/** Right-click context menu with keyboard navigation and nested submenu support. */
 declare class ContextMenu {
     private items;
     private targets;

package/js/context-menu.js

@@ -1,4 +1,3 @@
-/** Right-click context menu with keyboard navigation and nested submenu support. */
 class ContextMenu {
     items;
     targets;
@@ -148,8 +147,6 @@ class ContextMenu {
                 const rect = li.getBoundingClientRect();
                 return rect.right + submenuEl.offsetWidth > window.innerWidth;
             };
-            // Delay timer prevents the submenu closing when mouse travels from
-            // item → submenu (mouseleave fires before mouseenter on the submenu)
             let closeTimer = null;
             const openSub = () => {
                 if (closeTimer) {

package/js/datepicker.d.ts

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

package/js/datepicker.js

@@ -1,5 +1,4 @@
 import { computePosition } from './position.js';
-/** Calendar-based date (or date-range) picker that attaches to an input element. */
 class DatePicker {
     input;
     options;

package/js/docs-nav.js

@@ -16,6 +16,7 @@ const NAV = [
         items: [
             { label: 'Inputs & Forms',   href: 'forms/inputs.html' },
             { label: 'Date Picker',      href: 'forms/datepicker.html' },
+            { label: 'Color Picker',     href: 'forms/color-picker.html' },
             { label: 'Range Slider',     href: 'forms/range-slider.html' },
             { label: 'File Uploader',    href: 'forms/file-uploader.html' },
         ],

package/js/dropdown.d.ts

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

package/js/dropdown.js

@@ -1,5 +1,4 @@
 import { bestPlacement } from './position.js';
-/** Hierarchical dropdown menu with optional multi-open and close-on-select behaviour. */
 class Dropdown {
     container;
     trigger;

package/js/editor.d.ts

@@ -1,11 +1,7 @@
 interface EditorOptions {
-    /** Hides the entire side panel (code/preview) permanently. Safe to use
-     *  without [data-editor="code"], [data-editor="preview"], or [data-editor="side-panel"] in the DOM. */
     simple?: boolean;
-    /** Root container element or CSS selector. Required when using multiple editors on one page. */
     root?: string | HTMLElement;
 }
-/** Rich-text editor built on contenteditable with undo/redo and code/preview panels. */
 declare class Editor {
     private readonly root;
     private readonly editable;

package/js/editor.js

@@ -1,5 +1,4 @@
 import { sanitizeHtml } from './utils.js';
-/** Rich-text editor built on contenteditable with undo/redo and code/preview panels. */
 class Editor {
     root;
     editable;
@@ -111,17 +110,16 @@ class Editor {
         }, sig);
         if (this.code) {
             const code = this.code;
-            const codeActions = this.qAll('.code-actions button');
-            codeActions[0]?.addEventListener('click', () => {
+            this.q('[data-editor-action="apply-code"]')?.addEventListener('click', () => {
                 this.editable.innerHTML = sanitizeHtml(code.value);
                 this.onContentChange();
             }, sig);
-            codeActions[1]?.addEventListener('click', () => {
+            this.q('[data-editor-action="sanitize-code"]')?.addEventListener('click', () => {
                 code.value = sanitizeHtml(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
             }, sig);
-            codeActions[2]?.addEventListener('click', () => {
+            this.q('[data-editor-action="minify-code"]')?.addEventListener('click', () => {
                 code.value = code.value
                     .replace(/\n/g, '')
                     .replace(/>\s+</g, '><')

package/js/file-uploader.d.ts

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

package/js/file-uploader.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Drag-and-drop file uploader with progress tracking and XHR-based uploads. */
 class FileUploader {
     container;
     dropZone;

package/js/flyout-menu.d.ts

@@ -1,4 +1,3 @@
-/** Configuration options for the FlyoutMenu. */
 interface FlyoutMenuOptions {
     triggerSelector?: string;
     menuSelector?: string;
@@ -12,7 +11,6 @@ interface FlyoutMenuOptions {
     enableHeader?: boolean;
     enableFooter?: boolean;
 }
-/** Off-canvas flyout navigation with nested submenu support. */
 declare class FlyoutMenu {
     private options;
     private menuTrigger;

package/js/flyout-menu.js

@@ -1,4 +1,3 @@
-/** Off-canvas flyout navigation with nested submenu support. */
 class FlyoutMenu {
     options;
     menuTrigger;

package/js/gallery.d.ts

@@ -1,10 +1,8 @@
-/** 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;
@@ -13,7 +11,6 @@ interface MasonryGalleryOptions {
     reload?: number;
     enableLightbox?: boolean;
 }
-/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 declare class MasonryGallery {
     private container;
     private readonly loader;
@@ -38,4 +35,4 @@ declare class MasonryGallery {
     private addToShortestColumn;
     destroy(): void;
 }
-export { MasonryGallery, ImageData };
+export { MasonryGallery, type ImageData };

package/js/gallery.js

@@ -1,6 +1,5 @@
 import { escapeHtml } from './utils.js';
 import { Lightbox } from './lightbox.js';
-/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 class MasonryGallery {
     container;
     loader;
@@ -17,11 +16,11 @@ class MasonryGallery {
             throw new Error(`Container with id "${containerId}" not found`);
         }
         this.container = container;
-        this.loader = document.querySelector(options.loaderSelector || ".loader");
+        this.loader = document.querySelector(options.loaderSelector ?? '.loader');
         this.options = {
             minColumnWidth: options.minColumnWidth ?? 250,
             scrollThreshold: options.scrollThreshold ?? 100,
-            reload: 2,
+            reload: options.reload ?? 2,
             fetchFunction: options.fetchFunction,
             enableLightbox: options.enableLightbox ?? true,
         };
@@ -54,11 +53,11 @@ class MasonryGallery {
         this.abortController = new AbortController();
         const sig = this.abortController.signal;
         let resizeTimeout;
-        window.addEventListener("resize", () => {
+        window.addEventListener('resize', () => {
             clearTimeout(resizeTimeout);
             resizeTimeout = setTimeout(() => this.reLayout(), 200);
         }, { signal: sig });
-        window.addEventListener("scroll", this.handleScroll, { passive: true, signal: sig });
+        window.addEventListener('scroll', this.handleScroll, { passive: true, signal: sig });
     }
     reLayout() {
         const items = this.columns.flatMap(col => Array.from(col.children));
@@ -84,7 +83,7 @@ class MasonryGallery {
         if (!isAutoFill)
             this.reloaded++;
         if (this.options.reload > 0 && this.reloaded > this.options.reload) {
-            console.warn("Maximum reload limit reached.");
+            console.warn('Maximum reload limit reached.');
             return;
         }
         if (this.isFetching)
@@ -96,7 +95,7 @@ class MasonryGallery {
             this.renderImages(newImages);
         }
         catch (error) {
-            throw new Error("Error loading images: " + error);
+            console.error('MasonryGallery: error loading images', error);
         }
         finally {
             this.isFetching = false;
@@ -111,16 +110,12 @@ class MasonryGallery {
     }
     toggleLoader(show) {
         if (this.loader) {
-            this.loader.classList.toggle("hidden", !show);
+            this.loader.classList.toggle('hidden', !show);
         }
     }
     renderImages(imageDataList) {
         const startIndex = this.allImages.length;
         this.allImages.push(...imageDataList);
-        // Sort columns by current height so we start filling from the shortest.
-        // Then round-robin across them — this avoids the problem where unloaded
-        // images (0 height) cause offsetHeight-based distribution to pile all
-        // new items into a single column.
         const sorted = [...this.columns].sort((a, b) => a.offsetHeight - b.offsetHeight);
         imageDataList.forEach((data, i) => {
             const item = this.createCard(data);
@@ -140,28 +135,28 @@ class MasonryGallery {
             const col = sorted[i % sorted.length];
             col.appendChild(item);
             requestAnimationFrame(() => {
-                const img = item.querySelector("img");
+                const img = item.querySelector('img');
                 if (img) {
-                    img.addEventListener("load", () => img.classList.add("loaded"), {
+                    img.addEventListener('load', () => img.classList.add('loaded'), {
                         once: true,
                     });
                     if (img.complete) {
-                        img.classList.add("loaded");
+                        img.classList.add('loaded');
                     }
                 }
             });
         });
     }
     createCard(data) {
-        const div = document.createElement("div");
-        div.className = "masonry-item";
+        const div = document.createElement('div');
+        div.className = 'masonry-item';
         div.innerHTML = `
-      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
-      <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
-      </div>
-    `;
+            <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
+            <div class="masonry-item-info">
+                <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
+                <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
+            </div>
+        `;
         return div;
     }
     addToShortestColumn(element) {

package/js/group-picker.d.ts

@@ -1,15 +1,12 @@
-/** 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: {
@@ -17,7 +14,6 @@ interface GroupPickerSelection {
         subgroupId: string;
     }[];
 }
-/** Configuration options for the GroupPicker component. */
 interface GroupPickerOptions {
     onSelectionChange?: (selection: GroupPickerSelection) => void;
     searchPlaceholder?: string;
@@ -26,7 +22,6 @@ interface GroupPickerOptions {
     emptyLabel?: string;
     selectionPlaceholder?: string;
 }
-/** Searchable picker for selecting groups and their subgroups. */
 declare class GroupPicker {
     private container;
     private data;