@dodlhuat/basix 1.0.0

package/js/timepicker.js

@@ -0,0 +1,98 @@
+class TimeSpanPicker {
+    constructor(containerId, options) {
+        const element = document.getElementById(containerId);
+        if (!element) {
+            throw new Error(`Container with id "${containerId}" not found`);
+        }
+        this.container = element;
+        this.onChange = options?.onChange;
+        this.render();
+        // Query the inputs after rendering
+        this.startTimeInput = this.queryInput('.timespan-start');
+        this.endTimeInput = this.queryInput('.timespan-end');
+        // Set default values if provided
+        if (options?.defaultStart) {
+            this.startTimeInput.value = options.defaultStart;
+        }
+        if (options?.defaultEnd) {
+            this.endTimeInput.value = options.defaultEnd;
+        }
+        this.attachEventListeners();
+    }
+    queryInput(selector) {
+        const input = this.container.querySelector(selector);
+        if (!input) {
+            throw new Error(`Input with selector "${selector}" not found`);
+        }
+        return input;
+    }
+    render() {
+        this.container.innerHTML = `
+      <div class="timespan-picker">
+        <div class="timespan-field">
+          <label for="timespan-start">from</label>
+          <input
+            type="time"
+            class="timespan-start"
+            id="timespan-start"
+          />
+        </div>
+
+        <div class="timespan-separator">-</div>
+
+        <div class="timespan-field">
+          <label for="timespan-end">to</label>
+          <input
+            type="time"
+            class="timespan-end"
+            id="timespan-end"
+          />
+        </div>
+      </div>
+    `;
+    }
+    attachEventListeners() {
+        this.startTimeInput.addEventListener('change', () => this.handleChange());
+        this.endTimeInput.addEventListener('change', () => this.handleChange());
+    }
+    handleChange() {
+        const start = this.startTimeInput.value;
+        const end = this.endTimeInput.value;
+        // Validate that end time is after start time
+        if (start && end && start >= end) {
+            this.endTimeInput.setCustomValidity('Endzeit muss nach Startzeit liegen');
+        }
+        else {
+            this.endTimeInput.setCustomValidity('');
+        }
+        // Trigger onChange callback if both values are present
+        if (this.onChange && start && end) {
+            this.onChange(start, end);
+        }
+    }
+    getValue() {
+        return {
+            start: this.startTimeInput.value,
+            end: this.endTimeInput.value
+        };
+    }
+    setValue(start, end) {
+        this.startTimeInput.value = start;
+        this.endTimeInput.value = end;
+        this.handleChange();
+    }
+    reset() {
+        this.startTimeInput.value = '';
+        this.endTimeInput.value = '';
+        this.endTimeInput.setCustomValidity('');
+    }
+    isValid() {
+        const { start, end } = this.getValue();
+        return !!(start && end && start < end);
+    }
+    destroy() {
+        this.startTimeInput.removeEventListener('change', () => this.handleChange());
+        this.endTimeInput.removeEventListener('change', () => this.handleChange());
+    }
+}
+export { TimeSpanPicker };

package/js/timepicker.ts

@@ -0,0 +1,131 @@
+interface TimeSpan {
+    start: string;
+    end: string;
+}
+
+interface TimeSpanPickerOptions {
+    onChange?: (start: string, end: string) => void;
+    defaultStart?: string;
+    defaultEnd?: string;
+}
+
+class TimeSpanPicker {
+    private container: HTMLElement;
+    private startTimeInput: HTMLInputElement;
+    private endTimeInput: HTMLInputElement;
+    private onChange?: (start: string, end: string) => void;
+
+    constructor(containerId: string, options?: TimeSpanPickerOptions) {
+        const element = document.getElementById(containerId);
+        if (!element) {
+            throw new Error(`Container with id "${containerId}" not found`);
+        }
+
+        this.container = element;
+        this.onChange = options?.onChange;
+
+        this.render();
+
+        // Query the inputs after rendering
+        this.startTimeInput = this.queryInput('.timespan-start');
+        this.endTimeInput = this.queryInput('.timespan-end');
+
+        // Set default values if provided
+        if (options?.defaultStart) {
+            this.startTimeInput.value = options.defaultStart;
+        }
+        if (options?.defaultEnd) {
+            this.endTimeInput.value = options.defaultEnd;
+        }
+
+        this.attachEventListeners();
+    }
+
+    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 {
+        this.container.innerHTML = `
+      <div class="timespan-picker">
+        <div class="timespan-field">
+          <label for="timespan-start">from</label>
+          <input
+            type="time"
+            class="timespan-start"
+            id="timespan-start"
+          />
+        </div>
+
+        <div class="timespan-separator">-</div>
+
+        <div class="timespan-field">
+          <label for="timespan-end">to</label>
+          <input
+            type="time"
+            class="timespan-end"
+            id="timespan-end"
+          />
+        </div>
+      </div>
+    `;
+    }
+
+    private attachEventListeners(): void {
+        this.startTimeInput.addEventListener('change', () => this.handleChange());
+        this.endTimeInput.addEventListener('change', () => this.handleChange());
+    }
+
+    private handleChange(): void {
+        const start = this.startTimeInput.value;
+        const end = this.endTimeInput.value;
+
+        // Validate that end time is after start time
+        if (start && end && start >= end) {
+            this.endTimeInput.setCustomValidity('Endzeit muss nach Startzeit liegen');
+        } else {
+            this.endTimeInput.setCustomValidity('');
+        }
+
+        // Trigger onChange callback if both values are present
+        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('');
+    }
+
+    public isValid(): boolean {
+        const {start, end} = this.getValue();
+        return !!(start && end && start < end);
+    }
+
+    public destroy(): void {
+        this.startTimeInput.removeEventListener('change', () => this.handleChange());
+        this.endTimeInput.removeEventListener('change', () => this.handleChange());
+    }
+}
+
+export {TimeSpanPicker};
+export type {TimeSpan, TimeSpanPickerOptions};

package/js/toast.js

@@ -0,0 +1,93 @@
+class Toast {
+    constructor(contentOrOptions, header = '', type, closeable = true) {
+        this.closureIcon = '<div class="icon icon-close close"></div>';
+        this.toastElement = null;
+        this.timerId = null;
+        this.hide = () => {
+            if (this.timerId !== null) {
+                clearTimeout(this.timerId);
+                this.timerId = null;
+            }
+            this.toastElement?.classList.remove('show');
+            setTimeout(() => {
+                const closeButton = this.toastElement?.querySelector('.close');
+                if (closeButton) {
+                    closeButton.removeEventListener('click', this.handleClose);
+                }
+                this.toastElement?.remove();
+                this.toastElement = null;
+            }, 150);
+        };
+        this.handleClose = () => {
+            this.hide();
+        };
+        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();
+    }
+    show(ms) {
+        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('.close');
+                if (closeButton) {
+                    closeButton.addEventListener('click', this.handleClose);
+                }
+                if (ms !== undefined && ms > 0) {
+                    this.startTimer(ms);
+                }
+            });
+        });
+    }
+    startTimer(ms, elapsed = 0) {
+        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('.bar');
+            if (barElement) {
+                barElement.style.width = `${width}%`;
+                this.startTimer(ms, elapsed);
+            }
+        }, stepSize);
+    }
+    buildTemplate() {
+        const parts = ['<div class="bar"></div>'];
+        if (this.closeable) {
+            parts.push(this.closureIcon);
+        }
+        if (this.header) {
+            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
+        }
+        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+        return parts.join('');
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+export { Toast };

package/js/toast.ts

@@ -0,0 +1,138 @@
+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">${this.escapeHtml(this.header)}</div>`);
+        }
+
+        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+
+        return parts.join('');
+    }
+
+    private escapeHtml(text: string): string {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+export { Toast };
+export type { ToastOptions, ToastType };

package/js/tooltip.js

@@ -0,0 +1,193 @@
+class Tooltip {
+    constructor(trigger, content, options = {}) {
+        this.tooltipElement = null;
+        this.showTimeout = null;
+        this.isVisible = false;
+        this.handleMouseEnter = () => {
+            this.show();
+        };
+        this.handleMouseLeave = () => {
+            this.hide();
+        };
+        this.handleFocus = () => {
+            this.show();
+        };
+        this.handleBlur = () => {
+            this.hide();
+        };
+        this.trigger = trigger;
+        this.content = content;
+        this.options = {
+            position: options.position ?? 'auto',
+            offset: options.offset ?? 8,
+            delay: options.delay ?? 0,
+            className: options.className ?? ''
+        };
+        this.attachEvents();
+    }
+    static initializeAll() {
+        const triggers = document.querySelectorAll('[data-tooltip]');
+        triggers.forEach(trigger => {
+            const content = trigger.getAttribute('data-tooltip');
+            const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
+            const className = trigger.getAttribute('data-tooltip-class') ?? '';
+            if (content) {
+                new Tooltip(trigger, content, { position, className });
+            }
+        });
+        // Also support content from separate elements
+        const advancedTriggers = document.querySelectorAll('[data-tooltip-id]');
+        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') ?? '';
+            if (contentId) {
+                const contentElement = document.getElementById(contentId);
+                if (contentElement) {
+                    const content = contentElement.innerHTML;
+                    new Tooltip(trigger, content, { position, className });
+                }
+            }
+        });
+    }
+    show() {
+        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);
+    }
+    hide() {
+        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);
+    }
+    static hideActive() {
+        if (Tooltip.activeTooltip) {
+            Tooltip.activeTooltip.hide();
+        }
+    }
+    createTooltip() {
+        const tooltip = document.createElement('div');
+        tooltip.className = 'tooltip';
+        tooltip.id = `tooltip-${++Tooltip.idCounter}`;
+        tooltip.setAttribute('role', 'tooltip');
+        tooltip.innerHTML = `<div class="tooltip-content">${this.content}</div>`;
+        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 || '');
+    }
+    position() {
+        if (!this.tooltipElement)
+            return;
+        const triggerRect = this.trigger.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        let position = this.options.position;
+        if (position === 'auto') {
+            position = this.determineAutoPosition(triggerRect, tooltipRect);
+        }
+        const coords = this.calculatePosition(position, triggerRect, tooltipRect);
+        this.tooltipElement.style.left = `${coords.left}px`;
+        this.tooltipElement.style.top = `${coords.top}px`;
+        this.tooltipElement.setAttribute('data-position', position);
+    }
+    determineAutoPosition(triggerRect, tooltipRect) {
+        const spaceTop = triggerRect.top;
+        const spaceBottom = window.innerHeight - triggerRect.bottom;
+        const spaceLeft = triggerRect.left;
+        const spaceRight = window.innerWidth - triggerRect.right;
+        const canFitTop = spaceTop >= tooltipRect.height + this.options.offset;
+        const canFitBottom = spaceBottom >= tooltipRect.height + this.options.offset;
+        const canFitLeft = spaceLeft >= tooltipRect.width + this.options.offset;
+        const canFitRight = spaceRight >= tooltipRect.width + this.options.offset;
+        if (canFitTop && spaceTop >= Math.max(spaceBottom, spaceLeft, spaceRight)) {
+            return 'top';
+        }
+        else if (canFitBottom && spaceBottom >= Math.max(spaceTop, spaceLeft, spaceRight)) {
+            return 'bottom';
+        }
+        else if (canFitLeft && spaceLeft >= Math.max(spaceTop, spaceBottom, spaceRight)) {
+            return 'left';
+        }
+        else if (canFitRight) {
+            return 'right';
+        }
+        return spaceBottom > spaceTop ? 'bottom' : 'top';
+    }
+    calculatePosition(position, triggerRect, tooltipRect) {
+        let left = 0;
+        let top = 0;
+        switch (position) {
+            case 'top':
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                top = triggerRect.top - tooltipRect.height - this.options.offset;
+                break;
+            case 'bottom':
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                top = triggerRect.bottom + this.options.offset;
+                break;
+            case 'left':
+                left = triggerRect.left - tooltipRect.width - this.options.offset;
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+            case 'right':
+                left = triggerRect.right + this.options.offset;
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+        }
+        // Clamp to viewport
+        const margin = 8;
+        left = Math.max(margin, Math.min(window.innerWidth - tooltipRect.width - margin, left));
+        top = Math.max(margin, Math.min(window.innerHeight - tooltipRect.height - margin, top));
+        return { left, top };
+    }
+    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);
+    }
+    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);
+        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');
+    }
+}
+Tooltip.activeTooltip = null;
+Tooltip.idCounter = 0;
+export { Tooltip };