@dodlhuat/basix 1.2.7 → 1.2.9

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.2.7
+# Basix 1.2.9
 
 Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to
 include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.

package/js/bottom-sheet.d.ts

@@ -0,0 +1,37 @@
+interface BottomSheetOptions {
+    content: string;
+    header?: string;
+    footer?: string;
+    closeable?: boolean;
+    snapHeight?: 'auto' | 'half' | 'full';
+    onClose?: () => void;
+}
+declare class BottomSheet {
+    private readonly content;
+    private readonly header?;
+    private readonly footer?;
+    private readonly closeable;
+    private snapHeight;
+    private readonly onClose?;
+    private wrapper;
+    private sheet;
+    private handle;
+    private body;
+    private dragStartY;
+    private currentDragY;
+    private isDragging;
+    constructor(options: BottomSheetOptions);
+    show(): void;
+    hide(): void;
+    snapTo(height: 'auto' | 'half' | 'full'): void;
+    private handleEscape;
+    private handleBackdropClick;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    private updateScrollMask;
+    private buildTemplate;
+    isVisible(): boolean;
+    destroy(): void;
+}
+export { BottomSheet, type BottomSheetOptions };

package/js/calendar.d.ts

@@ -0,0 +1,115 @@
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    allDay?: boolean;
+    className?: string;
+}
+export type CalendarView = 'month' | 'week' | 'agenda';
+export interface CalendarLocale {
+    monthNames: string[];
+    dayNamesShort: string[];
+    dayNamesFull: string[];
+    firstDayOfWeek: number;
+    today: string;
+    month: string;
+    week: string;
+    agenda: string;
+    allDay: string;
+    noEvents: string;
+}
+export interface CalendarOptions {
+    container: HTMLElement | string;
+    events?: CalendarEvent[];
+    view?: CalendarView;
+    locale?: Partial<CalendarLocale>;
+    showOutsideDays?: boolean;
+    onDayClick?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onChange?: (date: Date, view: CalendarView) => void;
+    className?: string;
+    iconBasePath?: string;
+}
+interface SpanLayout {
+    event: CalendarEvent;
+    colStart: number;
+    colEnd: number;
+    lane: number;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+}
+interface TimedEventLayout {
+    event: CalendarEvent;
+    top: number;
+    height: number;
+    col: number;
+    cols: number;
+}
+export declare const CalendarLogic: {
+    getMonthGrid(year: number, month: number, firstDayOfWeek: number): Date[];
+    getWeekDays(date: Date, firstDayOfWeek: number): Date[];
+    isSameDay(a: Date, b: Date): boolean;
+    isToday(date: Date): boolean;
+    isCurrentMonth(date: Date, year: number, month: number): boolean;
+    startOfDay(d: Date): Date;
+    isMultiDay(event: CalendarEvent): boolean;
+    getEventsForDay(events: CalendarEvent[], day: Date): CalendarEvent[];
+    getAllDayEvents(events: CalendarEvent[], day: Date): CalendarEvent[];
+    getTimedEvents(events: CalendarEvent[], day: Date): CalendarEvent[];
+    getEventPosition(event: CalendarEvent, day: Date): {
+        top: number;
+        height: number;
+    };
+    formatTime(date: Date): string;
+    /** Compute horizontal span layout for a set of events within a 7-day row. */
+    computeSpanLayout(weekDays: Date[], events: CalendarEvent[]): SpanLayout[];
+    /** Compute side-by-side column layout for overlapping timed events in a day column. */
+    computeTimedLayout(events: CalendarEvent[], day: Date): TimedEventLayout[];
+    nowLinePct(): number;
+};
+export declare class CalendarRenderer {
+    private locale;
+    constructor(locale: CalendarLocale);
+    renderWeekdayHeaders(): string;
+    renderEvent(event: CalendarEvent, compact?: boolean): string;
+    renderSpanBar(layout: SpanLayout): string;
+    renderMonthDay(date: Date, currentMonth: number, currentYear: number, events: CalendarEvent[], showOutsideDays: boolean): string;
+    renderWeekRow(weekDays: Date[], currentMonth: number, currentYear: number, events: CalendarEvent[], showOutsideDays: boolean): string;
+    renderMonthView(year: number, month: number, events: CalendarEvent[], showOutsideDays: boolean, firstDayOfWeek: number): string;
+    renderWeekView(date: Date, events: CalendarEvent[], firstDayOfWeek: number, showNowLine?: boolean): string;
+    renderAgendaView(year: number, month: number, events: CalendarEvent[]): string;
+}
+export declare class Calendar {
+    private container;
+    private options;
+    private locale;
+    private renderer;
+    private currentDate;
+    private currentView;
+    private events;
+    private nowLineTimer;
+    constructor(options: CalendarOptions);
+    setView(view: CalendarView): void;
+    next(): void;
+    prev(): void;
+    today(): void;
+    addEvent(event: CalendarEvent): void;
+    removeEvent(id: string): void;
+    setEvents(events: CalendarEvent[]): void;
+    getEvents(): CalendarEvent[];
+    destroy(): void;
+    private getTitle;
+    private buildHeader;
+    private buildBody;
+    private render;
+    private scrollToNow;
+    private startNowLineTimer;
+    private clearNowLineTimer;
+    private readonly boundHandleClick;
+    private readonly boundHandleKeydown;
+    private attachEvents;
+    private handleClick;
+    private handleKeydown;
+}
+export {};

package/js/carousel.d.ts

@@ -0,0 +1,34 @@
+interface CarouselOptions {
+    loop?: boolean;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+}
+declare class Carousel {
+    private root;
+    private options;
+    private track;
+    private slides;
+    private slideWidth;
+    private currentIndex;
+    private prevButton;
+    private nextButton;
+    private dotsNav;
+    private dots;
+    private autoPlayTimer;
+    private abortController;
+    constructor(elementOrSelector: string | HTMLElement, options?: CarouselOptions);
+    private init;
+    private setupDOM;
+    private bindEvents;
+    private moveToSlide;
+    private moveToNextSlide;
+    private moveToPrevSlide;
+    private updateDots;
+    private addTouchSupport;
+    private startAutoPlay;
+    private pauseAutoPlay;
+    private resumeAutoPlay;
+    destroy(): void;
+}
+export { Carousel };
+export type { CarouselOptions };

package/js/chart.d.ts

@@ -0,0 +1,73 @@
+export type ChartType = 'line' | 'area' | 'column' | 'bar' | 'pie';
+export type ChartCurve = 'smooth' | 'linear' | 'step';
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+}
+export interface ChartSeries {
+    name: string;
+    data: ChartDataPoint[];
+    color?: string;
+}
+export interface ChartOptions {
+    type: ChartType;
+    series: ChartSeries[];
+    title?: string;
+    subtitle?: string;
+    /** Inner chart height in px. Default: 280 */
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    animate?: boolean;
+    /** Line interpolation for line/area charts. Default: 'smooth' */
+    curve?: ChartCurve;
+    /** Fixed y-axis minimum. Default: 0 */
+    yMin?: number;
+    /** Fixed y-axis maximum. Default: auto (max value × 1.1) */
+    yMax?: number;
+    onPointClick?: (series: ChartSeries, point: ChartDataPoint, index: number) => void;
+}
+declare class Chart {
+    private container;
+    private opts;
+    private tooltip;
+    private colors;
+    private abortController;
+    private resizeTimer;
+    private resizeObserver;
+    constructor(selector: string | HTMLElement, options: ChartOptions);
+    private render;
+    private renderLineOrArea;
+    private renderColumn;
+    private renderBar;
+    private renderPie;
+    private renderHGrid;
+    private renderXAxisLine;
+    private renderXLabels;
+    private renderYLabels;
+    private buildPath;
+    private linearPath;
+    private stepPath;
+    /** Smooth cubic bezier path through points (Catmull-Rom → cubic bezier) */
+    private smoothPath;
+    private arcPath;
+    private polar;
+    private buildHeader;
+    private buildLegend;
+    private buildPieLegend;
+    private showTooltip;
+    private moveTooltip;
+    private hideTooltip;
+    private onPoint;
+    private onBar;
+    private resolveColors;
+    private div;
+    private createSVG;
+    private svgEl;
+    private fmt;
+    private attachResizeObserver;
+    update(series: ChartSeries[]): void;
+    setType(type: ChartType): void;
+    destroy(): void;
+}
+export { Chart };

package/js/code-viewer.d.ts

@@ -0,0 +1,16 @@
+type SupportedLanguage = 'javascript' | 'js' | 'html' | 'css';
+declare class CodeViewer {
+    private container;
+    private code;
+    private language;
+    constructor(elementOrSelector: string | HTMLElement, code: string, language?: SupportedLanguage);
+    private highlight;
+    private escape;
+    private highlightJavaScript;
+    private highlightHTML;
+    private highlightCSS;
+    private copyCode;
+    private render;
+}
+export { CodeViewer };
+export type { SupportedLanguage };

package/js/context-menu.d.ts

@@ -0,0 +1,31 @@
+interface ContextMenuItemDef {
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    destructive?: boolean;
+    action?: (target: HTMLElement) => void;
+    submenu?: ContextMenuInput[];
+}
+type ContextMenuInput = ContextMenuItemDef | 'separator' | {
+    group: string;
+};
+declare class ContextMenu {
+    private items;
+    private targets;
+    private menuEl;
+    private currentTarget;
+    private abortController;
+    constructor(selectorOrElement: string | HTMLElement | HTMLElement[], items: ContextMenuInput[]);
+    private init;
+    private open;
+    private close;
+    private buildMenu;
+    private buildItem;
+    private closeAllSubmenus;
+    private getFocusableItems;
+    private moveFocus;
+    private activateFocused;
+    destroy(): void;
+}
+export { ContextMenu, type ContextMenuInput, type ContextMenuItemDef };

package/js/datepicker.d.ts

@@ -0,0 +1,55 @@
+interface DatePickerLocales {
+    days: string[];
+    months: string[];
+}
+interface DatePickerOptions {
+    mode?: 'single' | 'range';
+    startDay?: number;
+    timePicker?: boolean;
+    locales?: DatePickerLocales;
+    format?: (date: Date) => string;
+    onSelect?: (date: Date | DateRange) => void;
+}
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+declare class DatePicker {
+    private input;
+    private options;
+    private currentDate;
+    private selectedDate;
+    private rangeStart;
+    private rangeEnd;
+    private viewYear;
+    private viewMonth;
+    private viewMode;
+    private yearRangeStart;
+    private selectedHours;
+    private selectedMinutes;
+    private calendar;
+    private backdrop;
+    private handleDocumentClick;
+    private abortController;
+    constructor(elementOrSelector: string | HTMLInputElement, options?: DatePickerOptions);
+    private init;
+    private createCalendarElement;
+    private attachEvents;
+    private show;
+    private hide;
+    private render;
+    private createHeader;
+    private navigate;
+    private createMonthGrid;
+    private createYearGrid;
+    private createGrid;
+    private createTimePicker;
+    private createSpinner;
+    private applyTimeToSelection;
+    private changeMonth;
+    private handleDateClick;
+    private updateInput;
+    destroy(): void;
+}
+export { DatePicker };
+export type { DatePickerOptions, DatePickerLocales, DateRange };

package/js/dropdown.d.ts

@@ -0,0 +1,30 @@
+interface DropdownOptions {
+    closeOnSelect?: boolean;
+    allowMultipleOpen?: boolean;
+}
+interface DropdownSelectDetail {
+    text: string;
+    element: HTMLElement;
+}
+declare class Dropdown {
+    private container;
+    private trigger;
+    private menu;
+    private options;
+    private abortController;
+    constructor(selector: string, options?: DropdownOptions);
+    private init;
+    private attachEventListeners;
+    private setupItems;
+    toggle(): void;
+    close(): void;
+    open(): void;
+    private toggleSubmenu;
+    private closeAllSubmenus;
+    private handleSelection;
+    /**
+     * Cleanup method to remove event listeners
+     */
+    destroy(): void;
+}
+export { Dropdown, DropdownSelectDetail };

package/js/editor.d.ts

@@ -0,0 +1,41 @@
+interface EditorOptions {
+    /** Hides the entire side panel (code/preview) permanently. Safe to use
+     *  without #code, #preview, or #sidePanel in the DOM. */
+    simple?: boolean;
+}
+declare class Editor {
+    private readonly editable;
+    private readonly code;
+    private readonly preview;
+    private readonly sidePanel;
+    private readonly wordCount;
+    private undoStack;
+    private redoStack;
+    private abortController;
+    constructor(options?: EditorOptions);
+    private bindToolbar;
+    private bindActions;
+    private bindKeyboard;
+    private bindEditable;
+    private bindTabs;
+    private onContentChange;
+    private syncViews;
+    private updateWordCount;
+    private saveState;
+    private undo;
+    private redo;
+    private exec;
+    private insertText;
+    private insertImage;
+    private toggleInlineStyle;
+    private createLink;
+    private formatBlock;
+    private insertList;
+    private setAlignment;
+    private setForeColor;
+    private sanitizeHTML;
+    private downloadHTML;
+    private refreshActiveState;
+    destroy(): void;
+}
+export { Editor };

package/js/file-uploader.d.ts

@@ -0,0 +1,48 @@
+interface UploadCompletedDetail {
+    fileCount: number;
+    files: File[];
+    results: PromiseSettledResult<unknown>[];
+}
+interface FileValidationErrorDetail {
+    file: File;
+    reason: 'size' | 'type';
+}
+interface FileUploaderConfig {
+    uploadUrl?: string;
+    maxFileSize?: number;
+    allowedTypes?: string[];
+}
+declare class FileUploader {
+    private container;
+    private dropZone;
+    private fileInput;
+    private fileList;
+    private uploadBtn;
+    private files;
+    private uploadUrl;
+    private maxFileSize?;
+    private allowedTypes?;
+    private abortControllers;
+    constructor(elementOrSelector: string | HTMLElement, config?: FileUploaderConfig);
+    private init;
+    private fileKey;
+    private setupEventListeners;
+    private preventDefaults;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDrop;
+    private handleDropZoneClick;
+    private handleFileInputChange;
+    private handleUploadClick;
+    private handleFiles;
+    private validateFile;
+    private addFileToUI;
+    private uploadFile;
+    private removeFile;
+    private updateUploadButton;
+    private dispatchUploadCompletedEvent;
+    private formatSize;
+    destroy(): void;
+}
+export { FileUploader };
+export type { FileUploaderConfig, UploadCompletedDetail, FileValidationErrorDetail };

package/js/flyout-menu.d.ts

@@ -0,0 +1,37 @@
+interface FlyoutMenuOptions {
+    triggerSelector?: string;
+    menuSelector?: string;
+    overlaySelector?: string;
+    closeSelector?: string;
+    submenuToggleSelector?: string;
+    linkSelector?: string;
+    direction?: 'right' | 'left';
+    title?: string;
+    footerText?: string;
+    enableHeader?: boolean;
+    enableFooter?: boolean;
+}
+declare class FlyoutMenu {
+    private options;
+    private menuTrigger;
+    private readonly flyoutMenu;
+    private flyoutOverlay;
+    private closeBtn;
+    private submenuToggles;
+    private menuLinks;
+    private submenuHandlers;
+    constructor(options?: FlyoutMenuOptions);
+    private init;
+    private hydrateMenu;
+    private processListItems;
+    private renderHeader;
+    private renderFooter;
+    private bindEvents;
+    private open;
+    private close;
+    private handleSubmenu;
+    private handleKeydown;
+    setDirection(direction: 'left' | 'right'): void;
+    destroy(): void;
+}
+export { FlyoutMenu, type FlyoutMenuOptions };

package/js/gallery.d.ts

@@ -0,0 +1,35 @@
+interface ImageData {
+    src: string;
+    title: string;
+    desc: string;
+}
+interface MasonryGalleryOptions {
+    fetchFunction: () => Promise<ImageData[]>;
+    minColumnWidth?: number;
+    scrollThreshold?: number;
+    loaderSelector?: string;
+    reload?: number;
+}
+declare class MasonryGallery {
+    private container;
+    private readonly loader;
+    private options;
+    private columns;
+    private isFetching;
+    private resizeObserver;
+    private abortController;
+    private reloaded;
+    constructor(containerId: string, options: MasonryGalleryOptions);
+    private init;
+    private setupLayout;
+    private addEventListeners;
+    private reLayout;
+    private handleScroll;
+    private loadMoreImages;
+    private toggleLoader;
+    private renderImages;
+    private createCard;
+    private addToShortestColumn;
+    destroy(): void;
+}
+export { MasonryGallery, ImageData };

package/js/group-picker.d.ts

@@ -0,0 +1,59 @@
+interface SubgroupData {
+    id: string;
+    label: string;
+}
+interface GroupData {
+    id: string;
+    label: string;
+    subgroups?: SubgroupData[];
+}
+interface GroupPickerSelection {
+    parentGroups: string[];
+    subgroups: {
+        groupId: string;
+        subgroupId: string;
+    }[];
+}
+interface GroupPickerOptions {
+    onSelectionChange?: (selection: GroupPickerSelection) => void;
+    searchPlaceholder?: string;
+    selectAllLabel?: string;
+    deselectLabel?: string;
+    emptyLabel?: string;
+    selectionPlaceholder?: string;
+}
+declare class GroupPicker {
+    private container;
+    private data;
+    private options;
+    private abortController;
+    private selectedParents;
+    private selectedSubs;
+    private expandedGroups;
+    private searchQuery;
+    private searchInput;
+    private listEl;
+    private selectionEl;
+    constructor(selector: string | HTMLElement, data: GroupData[], options?: GroupPickerOptions);
+    private init;
+    private render;
+    private renderGroups;
+    private createGroupElement;
+    private renderSelection;
+    private createChip;
+    private toggleParentGroup;
+    private toggleSubgroup;
+    private toggleExpand;
+    private refresh;
+    private attachEvents;
+    private emitChange;
+    private highlightText;
+    getSelection(): GroupPickerSelection;
+    clearSelection(): void;
+    setSelection(selection: GroupPickerSelection): void;
+    expandAll(): void;
+    collapseAll(): void;
+    destroy(): void;
+}
+export { GroupPicker };
+export type { GroupData, SubgroupData, GroupPickerSelection, GroupPickerOptions };

package/js/lightbox.d.ts

@@ -0,0 +1,46 @@
+interface LightboxImage {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+interface LightboxOptions {
+    src?: string;
+    alt?: string;
+    caption?: string;
+    closeable?: boolean;
+    images?: LightboxImage[];
+    startIndex?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare class Lightbox {
+    private images;
+    private currentIndex;
+    private readonly closeable;
+    private readonly onOpen?;
+    private readonly onClose?;
+    private wrapper;
+    private imgEl;
+    private captionEl;
+    private counterEl;
+    private isZoomed;
+    private abortController;
+    constructor(options: LightboxOptions);
+    show(): void;
+    hide(): void;
+    next(): void;
+    prev(): void;
+    isVisible(): boolean;
+    destroy(): void;
+    private loadImage;
+    private preloadAdjacent;
+    private updateNav;
+    private toggleZoom;
+    private handleKeydown;
+    private trapFocus;
+    private handleBackgroundClick;
+    private addTouchSupport;
+    private buildTemplate;
+    static bind(selector?: string): void;
+}
+export { Lightbox, type LightboxOptions, type LightboxImage };