@dodlhuat/basix 1.2.8 → 1.2.9

package/js/timepicker.ts

@@ -1,202 +0,0 @@
-interface TimeSpan {
-    start: string;
-    end: string;
-}
-
-interface TimeSpanPickerOptions {
-    onChange?: (start: string, end: string) => void;
-    defaultStart?: string;
-    defaultEnd?: string;
-    fromString?: string;
-    toString?: string;
-}
-
-class TimeSpanPicker {
-    private container: HTMLElement;
-    private startTimeInput: HTMLInputElement;
-    private endTimeInput: HTMLInputElement;
-    private onChange?: (start: string, end: string) => void;
-    private readonly uid: string;
-    private fromString: string;
-    private toString: string;
-
-    constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions) {
-        const element = typeof elementOrSelector === 'string'
-            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
-                ? document.querySelector<HTMLElement>(elementOrSelector)
-                : document.getElementById(elementOrSelector))
-            : elementOrSelector;
-
-        if (!element) {
-            throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
-        }
-
-        this.container = element;
-        this.onChange = options?.onChange;
-        this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
-        this.fromString = options?.fromString ?? 'From';
-        this.toString = options?.toString ?? 'To';
-
-        this.render();
-
-        this.startTimeInput = this.queryInput('.timespan-start');
-        this.endTimeInput = this.queryInput('.timespan-end');
-
-        if (options?.defaultStart) {
-            this.startTimeInput.value = options.defaultStart;
-        }
-        if (options?.defaultEnd) {
-            this.endTimeInput.value = options.defaultEnd;
-        }
-
-        this.attachEventListeners();
-
-        // Render initial state if defaults provided
-        if (options?.defaultStart || options?.defaultEnd) {
-            this.updateUI();
-        }
-    }
-
-    private queryInput(selector: string): HTMLInputElement {
-        const input = this.container.querySelector<HTMLInputElement>(selector);
-        if (!input) {
-            throw new Error(`Input with selector "${selector}" not found`);
-        }
-        return input;
-    }
-
-    private render(): void {
-        const startId = `${this.uid}-start`;
-        const endId = `${this.uid}-end`;
-        this.container.innerHTML = `
-      <div class="timespan-picker">
-        <div class="timespan-field timespan-field-start">
-          <label for="${startId}">${this.fromString}</label>
-          <input type="time" class="timespan-start" id="${startId}"/>
-        </div>
-
-        <div class="timespan-center">
-          <span class="timespan-arrow">→</span>
-          <span class="timespan-duration"></span>
-        </div>
-
-        <div class="timespan-field timespan-field-end">
-          <label for="${endId}">${this.toString}</label>
-          <input type="time" class="timespan-end" id="${endId}"/>
-        </div>
-      </div>
-      <div class="timespan-bar" aria-hidden="true">
-        <div class="timespan-bar-fill"></div>
-      </div>
-    `;
-    }
-
-    private readonly handleStartChange = (): void => { this.handleChange(); };
-    private readonly handleEndChange = (): void => { this.handleChange(); };
-
-    private attachEventListeners(): void {
-        this.startTimeInput.addEventListener('change', this.handleStartChange);
-        this.endTimeInput.addEventListener('change', this.handleEndChange);
-    }
-
-    private toMinutes(time: string): number {
-        const [h, m] = time.split(':').map(Number);
-        return h * 60 + m;
-    }
-
-    private formatDuration(minutes: number): string {
-        const h = Math.floor(minutes / 60);
-        const m = minutes % 60;
-        if (h && m) return `${h}h ${m}m`;
-        if (h) return `${h}h`;
-        return `${m}m`;
-    }
-
-    private updateUI(): void {
-        const picker = this.container.querySelector<HTMLElement>('.timespan-picker');
-        const durationEl = this.container.querySelector<HTMLElement>('.timespan-duration');
-        const barFill = this.container.querySelector<HTMLElement>('.timespan-bar-fill');
-
-        const start = this.startTimeInput.value;
-        const end = this.endTimeInput.value;
-        const isError = !!(start && end && start >= end);
-
-        picker?.classList.toggle('is-error', isError);
-
-        if (isError) {
-            this.endTimeInput.setCustomValidity('End time must be after start time');
-            if (durationEl) durationEl.textContent = '!';
-            return;
-        }
-
-        this.endTimeInput.setCustomValidity('');
-
-        if (start && end && durationEl && barFill) {
-            const startMins = this.toMinutes(start);
-            const endMins = this.toMinutes(end);
-            const duration = endMins - startMins;
-
-            durationEl.textContent = this.formatDuration(duration);
-
-            const startPct = ((startMins / 1440) * 100).toFixed(2);
-            const widthPct = ((duration / 1440) * 100).toFixed(2);
-            barFill.style.left = `${startPct}%`;
-            barFill.style.width = `${widthPct}%`;
-        } else {
-            if (durationEl) durationEl.textContent = '';
-            if (barFill) {
-                barFill.style.left = '0';
-                barFill.style.width = '0';
-            }
-        }
-    }
-
-    private handleChange(): void {
-        this.updateUI();
-
-        const { start, end } = this.getValue();
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
-        }
-    }
-
-    public getValue(): TimeSpan {
-        return {
-            start: this.startTimeInput.value,
-            end: this.endTimeInput.value
-        };
-    }
-
-    public setValue(start: string, end: string): void {
-        this.startTimeInput.value = start;
-        this.endTimeInput.value = end;
-        this.handleChange();
-    }
-
-    public reset(): void {
-        this.startTimeInput.value = '';
-        this.endTimeInput.value = '';
-        this.endTimeInput.setCustomValidity('');
-
-        const picker = this.container.querySelector('.timespan-picker');
-        const durationEl = this.container.querySelector<HTMLElement>('.timespan-duration');
-        const barFill = this.container.querySelector<HTMLElement>('.timespan-bar-fill');
-
-        picker?.classList.remove('is-error');
-        if (durationEl) durationEl.textContent = '';
-        if (barFill) { barFill.style.left = '0'; barFill.style.width = '0'; }
-    }
-
-    public isValid(): boolean {
-        const { start, end } = this.getValue();
-        return !!(start && end && start < end);
-    }
-
-    public destroy(): void {
-        this.startTimeInput.removeEventListener('change', this.handleStartChange);
-        this.endTimeInput.removeEventListener('change', this.handleEndChange);
-    }
-}
-
-export { TimeSpanPicker };
-export type { TimeSpan, TimeSpanPickerOptions };

package/js/toast.ts

@@ -1,134 +0,0 @@
-import { escapeHtml } from './utils.js';
-
-type ToastType = 'success' | 'error' | 'warning' | 'info';
-
-interface ToastOptions {
-    content: string;
-    header?: string;
-    type?: ToastType;
-    closeable?: boolean;
-}
-
-class Toast {
-    private readonly content: string;
-    private readonly header: string;
-    private readonly type?: ToastType;
-    private readonly closeable: boolean;
-    private readonly closureIcon: string = '<div class="icon icon-close close"></div>';
-    private readonly template: string;
-    private toastElement: HTMLDivElement | null = null;
-    private timerId: number | null = null;
-
-    constructor(options: ToastOptions);
-    constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
-    constructor(
-        contentOrOptions: string | ToastOptions,
-        header: string = '',
-        type?: ToastType,
-        closeable: boolean = true
-    ) {
-        if (typeof contentOrOptions === 'object') {
-            this.content = contentOrOptions.content;
-            this.header = contentOrOptions.header ?? '';
-            this.type = contentOrOptions.type;
-            this.closeable = contentOrOptions.closeable ?? true;
-        } else {
-            this.content = contentOrOptions;
-            this.header = header;
-            this.type = type;
-            this.closeable = closeable;
-        }
-
-        this.template = this.buildTemplate();
-    }
-
-    public show(ms?: number): void {
-        const div = document.createElement('div');
-        div.className = 'toast';
-
-        if (this.type) {
-            div.classList.add(this.type);
-        }
-
-        div.innerHTML = this.template;
-        document.body.appendChild(div);
-        this.toastElement = div;
-
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                this.toastElement?.classList.add('show');
-
-                const closeButton = this.toastElement?.querySelector<HTMLElement>('.close');
-                if (closeButton) {
-                    closeButton.addEventListener('click', this.handleClose);
-                }
-
-                if (ms !== undefined && ms > 0) {
-                    this.startTimer(ms);
-                }
-            });
-        });
-    }
-
-    public hide = (): void => {
-        if (this.timerId !== null) {
-            clearTimeout(this.timerId);
-            this.timerId = null;
-        }
-
-        this.toastElement?.classList.remove('show');
-
-        setTimeout(() => {
-            const closeButton = this.toastElement?.querySelector<HTMLElement>('.close');
-            if (closeButton) {
-                closeButton.removeEventListener('click', this.handleClose);
-            }
-
-            this.toastElement?.remove();
-            this.toastElement = null;
-        }, 150);
-    };
-
-    private handleClose = (): void => {
-        this.hide();
-    };
-
-    private startTimer(ms: number, elapsed: number = 0): void {
-        const stepSize = 250;
-
-        if (elapsed >= ms) {
-            this.hide();
-            return;
-        }
-
-        this.timerId = window.setTimeout(() => {
-            elapsed += stepSize;
-            const width = 100 - (100 / ms) * elapsed;
-
-            const barElement = this.toastElement?.querySelector<HTMLElement>('.bar');
-            if (barElement) {
-                barElement.style.width = `${width}%`;
-                this.startTimer(ms, elapsed);
-            }
-        }, stepSize);
-    }
-
-    private buildTemplate(): string {
-        const parts: string[] = ['<div class="bar"></div>'];
-
-        if (this.closeable) {
-            parts.push(this.closureIcon);
-        }
-
-        if (this.header) {
-            parts.push(`<div class="header">${escapeHtml(this.header)}</div>`);
-        }
-
-        parts.push(`<div class="content">${escapeHtml(this.content)}</div>`);
-
-        return parts.join('');
-    }
-}
-
-export { Toast };
-export type { ToastOptions, ToastType };

package/js/tooltip.ts

@@ -1,196 +0,0 @@
-// tooltip.ts
-import { computePosition } from './position.js';
-import type { Placement } from './position.js';
-
-interface TooltipOptions {
-    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
-    offset?: number;
-    delay?: number;
-    className?: string;
-    /** Set to true when content is trusted HTML (e.g. from data-tooltip-id).
-     *  Defaults to false — content is treated as plain text and escaped. */
-    isHtml?: boolean;
-}
-
-class Tooltip {
-    private static activeTooltip: Tooltip | null = null;
-    private static idCounter: number = 0;
-
-    private readonly trigger: HTMLElement;
-    private readonly content: string;
-    private readonly options: Required<TooltipOptions>;
-    private tooltipElement: HTMLDivElement | null = null;
-    private showTimeout: number | null = null;
-    private isVisible: boolean = false;
-
-    constructor(trigger: HTMLElement, content: string, options: TooltipOptions = {}) {
-        this.trigger = trigger;
-        this.content = content;
-        this.options = {
-            position: options.position ?? 'auto',
-            offset: options.offset ?? 8,
-            delay: options.delay ?? 0,
-            className: options.className ?? '',
-            isHtml: options.isHtml ?? false,
-        };
-
-        this.attachEvents();
-    }
-
-    public static initializeAll(): void {
-        const triggers = document.querySelectorAll<HTMLElement>('[data-tooltip]');
-        triggers.forEach(trigger => {
-            const content = trigger.getAttribute('data-tooltip');
-            const position = (trigger.getAttribute('data-tooltip-position') as TooltipOptions['position']) ?? 'auto';
-            const className = trigger.getAttribute('data-tooltip-class') ?? '';
-
-            if (content) {
-                new Tooltip(trigger, content, { position, className, isHtml: false });
-            }
-        });
-
-        // Also support content from separate elements
-        const advancedTriggers = document.querySelectorAll<HTMLElement>('[data-tooltip-id]');
-        advancedTriggers.forEach(trigger => {
-            const contentId = trigger.getAttribute('data-tooltip-id');
-            const position = (trigger.getAttribute('data-tooltip-position') as TooltipOptions['position']) ?? 'auto';
-            const className = trigger.getAttribute('data-tooltip-class') ?? '';
-
-            if (contentId) {
-                const contentElement = document.getElementById(contentId);
-                if (contentElement) {
-                    const content = contentElement.innerHTML;
-                    new Tooltip(trigger, content, { position, className, isHtml: true });
-                }
-            }
-        });
-    }
-
-    public show(): void {
-        if (this.showTimeout !== null) {
-            clearTimeout(this.showTimeout);
-        }
-
-        this.showTimeout = window.setTimeout(() => {
-            Tooltip.hideActive();
-            this.createTooltip();
-            this.position();
-            
-            requestAnimationFrame(() => {
-                this.tooltipElement?.classList.add('visible');
-                this.isVisible = true;
-                Tooltip.activeTooltip = this;
-            });
-        }, this.options.delay);
-    }
-
-    public hide(): void {
-        if (this.showTimeout !== null) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = null;
-        }
-
-        if (!this.tooltipElement) return;
-
-        this.tooltipElement.classList.remove('visible');
-        this.isVisible = false;
-
-        setTimeout(() => {
-            this.tooltipElement?.remove();
-            this.tooltipElement = null;
-
-            if (Tooltip.activeTooltip === this) {
-                Tooltip.activeTooltip = null;
-            }
-        }, 200);
-    }
-
-    private static hideActive(): void {
-        if (Tooltip.activeTooltip) {
-            Tooltip.activeTooltip.hide();
-        }
-    }
-
-    private createTooltip(): void {
-        const tooltip = document.createElement('div');
-        tooltip.className = 'tooltip';
-        tooltip.id = `tooltip-${++Tooltip.idCounter}`;
-        tooltip.setAttribute('role', 'tooltip');
-
-        const tooltipContent = document.createElement('div');
-        tooltipContent.className = 'tooltip-content';
-        if (this.options.isHtml) {
-            tooltipContent.innerHTML = this.content;
-        } else {
-            tooltipContent.textContent = this.content;
-        }
-        tooltip.appendChild(tooltipContent);
-
-        if (this.options.className) {
-            tooltip.classList.add(this.options.className);
-        }
-
-        document.body.appendChild(tooltip);
-        this.tooltipElement = tooltip;
-
-        const previousDescribedBy = this.trigger.getAttribute('aria-describedby');
-        this.trigger.setAttribute('aria-describedby', tooltip.id);
-        this.trigger.setAttribute('data-previous-describedby', previousDescribedBy || '');
-    }
-
-    private position(): void {
-        if (!this.tooltipElement) return;
-
-        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);
-    }
-
-    private attachEvents(): void {
-        this.trigger.addEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.addEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.addEventListener('focus', this.handleFocus);
-        this.trigger.addEventListener('blur', this.handleBlur);
-    }
-
-    private handleMouseEnter = (): void => {
-        this.show();
-    };
-
-    private handleMouseLeave = (): void => {
-        this.hide();
-    };
-
-    private handleFocus = (): void => {
-        this.show();
-    };
-
-    private handleBlur = (): void => {
-        this.hide();
-    };
-
-    public destroy(): void {
-        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);
-
-        const previousDescribedBy = this.trigger.getAttribute('data-previous-describedby');
-        if (previousDescribedBy) {
-            this.trigger.setAttribute('aria-describedby', previousDescribedBy);
-        } else {
-            this.trigger.removeAttribute('aria-describedby');
-        }
-        this.trigger.removeAttribute('data-previous-describedby');
-    }
-}
-
-export { Tooltip };
-export type { TooltipOptions };