@dodlhuat/basix 1.1.1 → 1.2.1

package/js/select.ts

@@ -1,217 +1,217 @@
-class Select {
-    private readonly element: HTMLSelectElement;
-    private readonly isMultiselect: boolean;
-
-    constructor(elementOrSelector: string | HTMLSelectElement) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLSelectElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!element) {
-            throw new Error(`Select: Element not found for selector "${elementOrSelector}"`);
-        }
-
-        this.element = element;
-        const result = Select.initElement(element);
-
-        if (result === null) {
-            throw new Error(`Select: Failed to initialize select for "${elementOrSelector}"`);
-        }
-
-        this.isMultiselect = result;
-    }
-
-    public value(): string | string[] | undefined {
-        if (!this.element) {
-            return undefined;
-        }
-
-        const selectedValues = Array.from(this.element.options)
-            .filter(option => option.selected)
-            .map(option => option.value);
-
-        return this.isMultiselect ? selectedValues : selectedValues[0];
-    }
-
-    public static init(elementOrSelector: string | HTMLSelectElement): boolean | null {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLSelectElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!element) {
-            return null;
-        }
-
-        return Select.initElement(element);
-    }
-
-    private static initElement(element: HTMLSelectElement): boolean | null {
-        if (!Select.transformSelect(element)) {
-            return null;
-        }
-
-        const selectGroup = element.closest('.select-group');
-        if (!selectGroup) {
-            throw new Error(`Select: Parent .select-group not found for "${element}"`);
-        }
-
-        const dropdown = selectGroup.querySelector('.dropdown') as HTMLElement | null;
-        if (!dropdown) {
-            throw new Error(`Select: Dropdown element not found for "${element}"`);
-        }
-
-        const selected = dropdown.querySelector('.dropdown-selected') as HTMLElement | null;
-        const options = dropdown.querySelector('.dropdown-options') as HTMLElement | null;
-
-        if (!selected || !options) {
-            throw new Error(`Select: Required dropdown elements not found for "${element}"`);
-        }
-
-        const isMulti = dropdown.dataset.multi === 'true';
-
-        // Toggle dropdown on selected element click
-        selected.addEventListener('click', () => {
-            Select.closeAllDropdowns(dropdown);
-            dropdown.classList.toggle('open');
-        });
-
-        // Handle option selection
-        options.addEventListener('click', (e: Event) => {
-            const target = e.target as HTMLElement;
-
-            if (!target.classList.contains('dropdown-option')) {
-                return;
-            }
-
-            if (isMulti) {
-                Select.handleMultiSelect(target, options, selected, element);
-            } else {
-                Select.handleSingleSelect(target, options, selected, dropdown, element);
-            }
-        });
-
-        // Close dropdown when clicking the close icon
-        const closeIcon = options.querySelector('.dropdown-options-icon') as HTMLElement | null;
-        if (closeIcon) {
-            closeIcon.addEventListener('click', () => {
-                dropdown.classList.remove('open');
-            });
-        }
-
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e: Event) => {
-            if (!dropdown.contains(e.target as Node)) {
-                dropdown.classList.remove('open');
-            }
-        });
-
-        return isMulti;
-    }
-
-    private static closeAllDropdowns(exceptDropdown?: HTMLElement): void {
-        document.querySelectorAll('.dropdown').forEach(dropdown => {
-            if (dropdown !== exceptDropdown) {
-                dropdown.classList.remove('open');
-            }
-        });
-    }
-
-    private static handleMultiSelect(
-        option: HTMLElement,
-        optionsContainer: HTMLElement,
-        selected: HTMLElement,
-        selectElement: HTMLSelectElement
-    ): void {
-        option.classList.toggle('selected');
-
-        const selectedOptions = Array.from(
-            optionsContainer.querySelectorAll('.dropdown-option.selected')
-        ) as HTMLElement[];
-
-        const values = selectedOptions.map(opt => opt.textContent?.trim() || '');
-        selected.textContent = values.length ? values.join(', ') : 'Select options';
-
-        const selectedValues = selectedOptions.map(opt => opt.dataset.value || '');
-        Array.from(selectElement.options).forEach(opt => {
-            opt.selected = selectedValues.includes(opt.value);
-        });
-    }
-
-    private static handleSingleSelect(
-        option: HTMLElement,
-        optionsContainer: HTMLElement,
-        selected: HTMLElement,
-        dropdown: HTMLElement,
-        selectElement: HTMLSelectElement
-    ): void {
-        optionsContainer.querySelectorAll('.dropdown-option').forEach(opt => {
-            opt.classList.remove('selected');
-        });
-
-        option.classList.add('selected');
-        selected.textContent = option.textContent?.trim() || '';
-        dropdown.classList.remove('open');
-        selectElement.value = option.dataset.value || '';
-    }
-
-    private static transformSelect(select: HTMLSelectElement): boolean {
-        const parent = select.closest('.select-group') as HTMLElement | null;
-
-        if (!parent) {
-            return false;
-        }
-
-        const label = parent.querySelector('label');
-        const isMulti = select.hasAttribute('multiple');
-        const labelText = label?.textContent?.trim() || 'Select';
-
-        // Create hidden wrapper for original select
-        const hiddenWrapper = document.createElement('div');
-        hiddenWrapper.classList.add('hidden');
-
-        if (label) {
-            hiddenWrapper.appendChild(label);
-        }
-        hiddenWrapper.appendChild(select);
-
-        // Create dropdown structure
-        const dropdown = document.createElement('div');
-        dropdown.className = 'dropdown';
-        dropdown.dataset.multi = String(isMulti);
-
-        const dropdownSelected = document.createElement('div');
-        dropdownSelected.className = 'dropdown-selected';
-        dropdownSelected.textContent = labelText;
-
-        const dropdownOptions = document.createElement('div');
-        dropdownOptions.className = 'dropdown-options';
-
-        // Add mobile menu
-        const optionsMenu = document.createElement('div');
-        optionsMenu.className = 'dropdown-options-menu hidden';
-        optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
-        dropdownOptions.appendChild(optionsMenu);
-
-        // Create option elements
-        Array.from(select.options).forEach(opt => {
-            const optDiv = document.createElement('div');
-            optDiv.className = 'dropdown-option';
-            optDiv.dataset.value = opt.value;
-            optDiv.textContent = opt.textContent;
-            dropdownOptions.appendChild(optDiv);
-        });
-
-        // Assemble dropdown
-        dropdown.appendChild(dropdownSelected);
-        dropdown.appendChild(dropdownOptions);
-
-        // Replace original content
-        parent.innerHTML = '';
-        parent.appendChild(hiddenWrapper);
-        parent.appendChild(dropdown);
-
-        return true;
-    }
-}
-
+class Select {
+    private readonly element: HTMLSelectElement;
+    private readonly isMultiselect: boolean;
+
+    constructor(elementOrSelector: string | HTMLSelectElement) {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector<HTMLSelectElement>(elementOrSelector)
+            : elementOrSelector;
+
+        if (!element) {
+            throw new Error(`Select: Element not found for selector "${elementOrSelector}"`);
+        }
+
+        this.element = element;
+        const result = Select.initElement(element);
+
+        if (result === null) {
+            throw new Error(`Select: Failed to initialize select for "${elementOrSelector}"`);
+        }
+
+        this.isMultiselect = result;
+    }
+
+    public value(): string | string[] | undefined {
+        if (!this.element) {
+            return undefined;
+        }
+
+        const selectedValues = Array.from(this.element.options)
+            .filter(option => option.selected)
+            .map(option => option.value);
+
+        return this.isMultiselect ? selectedValues : selectedValues[0];
+    }
+
+    public static init(elementOrSelector: string | HTMLSelectElement): boolean | null {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector<HTMLSelectElement>(elementOrSelector)
+            : elementOrSelector;
+
+        if (!element) {
+            return null;
+        }
+
+        return Select.initElement(element);
+    }
+
+    private static initElement(element: HTMLSelectElement): boolean | null {
+        if (!Select.transformSelect(element)) {
+            return null;
+        }
+
+        const selectGroup = element.closest('.select-group');
+        if (!selectGroup) {
+            throw new Error(`Select: Parent .select-group not found for "${element}"`);
+        }
+
+        const dropdown = selectGroup.querySelector('.dropdown') as HTMLElement | null;
+        if (!dropdown) {
+            throw new Error(`Select: Dropdown element not found for "${element}"`);
+        }
+
+        const selected = dropdown.querySelector('.dropdown-selected') as HTMLElement | null;
+        const options = dropdown.querySelector('.dropdown-options') as HTMLElement | null;
+
+        if (!selected || !options) {
+            throw new Error(`Select: Required dropdown elements not found for "${element}"`);
+        }
+
+        const isMulti = dropdown.dataset.multi === 'true';
+
+        // Toggle dropdown on selected element click
+        selected.addEventListener('click', () => {
+            Select.closeAllDropdowns(dropdown);
+            dropdown.classList.toggle('open');
+        });
+
+        // Handle option selection
+        options.addEventListener('click', (e: Event) => {
+            const target = e.target as HTMLElement;
+
+            if (!target.classList.contains('dropdown-option')) {
+                return;
+            }
+
+            if (isMulti) {
+                Select.handleMultiSelect(target, options, selected, element);
+            } else {
+                Select.handleSingleSelect(target, options, selected, dropdown, element);
+            }
+        });
+
+        // Close dropdown when clicking the close icon
+        const closeIcon = options.querySelector('.dropdown-options-icon') as HTMLElement | null;
+        if (closeIcon) {
+            closeIcon.addEventListener('click', () => {
+                dropdown.classList.remove('open');
+            });
+        }
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e: Event) => {
+            if (!dropdown.contains(e.target as Node)) {
+                dropdown.classList.remove('open');
+            }
+        });
+
+        return isMulti;
+    }
+
+    private static closeAllDropdowns(exceptDropdown?: HTMLElement): void {
+        document.querySelectorAll('.dropdown').forEach(dropdown => {
+            if (dropdown !== exceptDropdown) {
+                dropdown.classList.remove('open');
+            }
+        });
+    }
+
+    private static handleMultiSelect(
+        option: HTMLElement,
+        optionsContainer: HTMLElement,
+        selected: HTMLElement,
+        selectElement: HTMLSelectElement
+    ): void {
+        option.classList.toggle('selected');
+
+        const selectedOptions = Array.from(
+            optionsContainer.querySelectorAll('.dropdown-option.selected')
+        ) as HTMLElement[];
+
+        const values = selectedOptions.map(opt => opt.textContent?.trim() || '');
+        selected.textContent = values.length ? values.join(', ') : 'Select options';
+
+        const selectedValues = selectedOptions.map(opt => opt.dataset.value || '');
+        Array.from(selectElement.options).forEach(opt => {
+            opt.selected = selectedValues.includes(opt.value);
+        });
+    }
+
+    private static handleSingleSelect(
+        option: HTMLElement,
+        optionsContainer: HTMLElement,
+        selected: HTMLElement,
+        dropdown: HTMLElement,
+        selectElement: HTMLSelectElement
+    ): void {
+        optionsContainer.querySelectorAll('.dropdown-option').forEach(opt => {
+            opt.classList.remove('selected');
+        });
+
+        option.classList.add('selected');
+        selected.textContent = option.textContent?.trim() || '';
+        dropdown.classList.remove('open');
+        selectElement.value = option.dataset.value || '';
+    }
+
+    private static transformSelect(select: HTMLSelectElement): boolean {
+        const parent = select.closest('.select-group') as HTMLElement | null;
+
+        if (!parent) {
+            return false;
+        }
+
+        const label = parent.querySelector('label');
+        const isMulti = select.hasAttribute('multiple');
+        const labelText = label?.textContent?.trim() || 'Select';
+
+        // Create hidden wrapper for original select
+        const hiddenWrapper = document.createElement('div');
+        hiddenWrapper.classList.add('hidden');
+
+        if (label) {
+            hiddenWrapper.appendChild(label);
+        }
+        hiddenWrapper.appendChild(select);
+
+        // Create dropdown structure
+        const dropdown = document.createElement('div');
+        dropdown.className = 'dropdown';
+        dropdown.dataset.multi = String(isMulti);
+
+        const dropdownSelected = document.createElement('div');
+        dropdownSelected.className = 'dropdown-selected';
+        dropdownSelected.textContent = labelText;
+
+        const dropdownOptions = document.createElement('div');
+        dropdownOptions.className = 'dropdown-options';
+
+        // Add mobile menu
+        const optionsMenu = document.createElement('div');
+        optionsMenu.className = 'dropdown-options-menu hidden';
+        optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
+        dropdownOptions.appendChild(optionsMenu);
+
+        // Create option elements
+        Array.from(select.options).forEach(opt => {
+            const optDiv = document.createElement('div');
+            optDiv.className = 'dropdown-option';
+            optDiv.dataset.value = opt.value;
+            optDiv.textContent = opt.textContent;
+            dropdownOptions.appendChild(optDiv);
+        });
+
+        // Assemble dropdown
+        dropdown.appendChild(dropdownSelected);
+        dropdown.appendChild(dropdownOptions);
+
+        // Replace original content
+        parent.innerHTML = '';
+        parent.appendChild(hiddenWrapper);
+        parent.appendChild(dropdown);
+
+        return true;
+    }
+}
+
 export { Select };

package/js/sidebar-nav.js

@@ -0,0 +1,41 @@
+class SidebarNav {
+    constructor(containerOrSelector, options = {}) {
+        const container = typeof containerOrSelector === 'string'
+            ? document.querySelector(containerOrSelector)
+            : containerOrSelector;
+        this.opts = {
+            toggleSelector: options.toggleSelector ?? '.sidebar-toggle',
+            breakpoint: options.breakpoint ?? 768,
+        };
+        this.nav = container?.querySelector('.sidebar-nav') ?? null;
+        this.backdrop = container?.querySelector('.sidebar-backdrop') ?? null;
+        this.toggleBtn = document.querySelector(this.opts.toggleSelector);
+        this._onToggle = () => this.toggle();
+        this._onBackdrop = () => this.close();
+        this._onResize = () => { if (window.innerWidth > this.opts.breakpoint)
+            this.close(); };
+        this.toggleBtn?.addEventListener('click', this._onToggle);
+        this.backdrop?.addEventListener('click', this._onBackdrop);
+        window.addEventListener('resize', this._onResize);
+    }
+    open() {
+        this.nav?.classList.add('is-open');
+        this.backdrop?.classList.add('is-visible');
+    }
+    close() {
+        this.nav?.classList.remove('is-open');
+        this.backdrop?.classList.remove('is-visible');
+    }
+    toggle() {
+        this.nav?.classList.contains('is-open') ? this.close() : this.open();
+    }
+    isOpen() {
+        return this.nav?.classList.contains('is-open') ?? false;
+    }
+    destroy() {
+        this.toggleBtn?.removeEventListener('click', this._onToggle);
+        this.backdrop?.removeEventListener('click', this._onBackdrop);
+        window.removeEventListener('resize', this._onResize);
+    }
+}
+export { SidebarNav };

package/js/sidebar-nav.ts

@@ -0,0 +1,66 @@
+interface SidebarNavOptions {
+    /** Selector for the toggle button. Default: '.sidebar-toggle' */
+    toggleSelector?: string;
+    /** Breakpoint (px) above which the sidebar is always visible. Default: 768 */
+    breakpoint?: number;
+}
+
+class SidebarNav {
+    private nav: HTMLElement | null;
+    private backdrop: HTMLElement | null;
+    private toggleBtn: HTMLElement | null;
+    private opts: Required<SidebarNavOptions>;
+    private _onToggle: () => void;
+    private _onBackdrop: () => void;
+    private _onResize: () => void;
+
+    constructor(containerOrSelector: string | HTMLElement, options: SidebarNavOptions = {}) {
+        const container: HTMLElement | null =
+            typeof containerOrSelector === 'string'
+                ? (document.querySelector(containerOrSelector) as HTMLElement | null)
+                : containerOrSelector;
+
+        this.opts = {
+            toggleSelector: options.toggleSelector ?? '.sidebar-toggle',
+            breakpoint: options.breakpoint ?? 768,
+        };
+
+        this.nav      = container?.querySelector('.sidebar-nav')      ?? null;
+        this.backdrop = container?.querySelector('.sidebar-backdrop')  ?? null;
+        this.toggleBtn = document.querySelector(this.opts.toggleSelector);
+
+        this._onToggle  = () => this.toggle();
+        this._onBackdrop = () => this.close();
+        this._onResize  = () => { if (window.innerWidth > this.opts.breakpoint) this.close(); };
+
+        this.toggleBtn?.addEventListener('click', this._onToggle);
+        this.backdrop?.addEventListener('click', this._onBackdrop);
+        window.addEventListener('resize', this._onResize);
+    }
+
+    open(): void {
+        this.nav?.classList.add('is-open');
+        this.backdrop?.classList.add('is-visible');
+    }
+
+    close(): void {
+        this.nav?.classList.remove('is-open');
+        this.backdrop?.classList.remove('is-visible');
+    }
+
+    toggle(): void {
+        this.nav?.classList.contains('is-open') ? this.close() : this.open();
+    }
+
+    isOpen(): boolean {
+        return this.nav?.classList.contains('is-open') ?? false;
+    }
+
+    destroy(): void {
+        this.toggleBtn?.removeEventListener('click', this._onToggle);
+        this.backdrop?.removeEventListener('click', this._onBackdrop);
+        window.removeEventListener('resize', this._onResize);
+    }
+}
+
+export { SidebarNav, SidebarNavOptions };

package/js/stepper.js

@@ -0,0 +1,80 @@
+class Stepper {
+    constructor(elementOrSelector, options = {}) {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!element)
+            throw new Error(`Stepper: element not found`);
+        this.container = element;
+        this.steps = Array.from(this.container.querySelectorAll('.stepper-step'));
+        this.connectors = Array.from(this.container.querySelectorAll('.stepper-connector'));
+        this.onChange = options.onChange;
+        this.current = options.defaultStep ?? 0;
+        if (this.steps.length === 0) {
+            console.warn('Stepper: no .stepper-step elements found');
+            return;
+        }
+        if (options.clickable) {
+            this.container.classList.add('stepper-clickable');
+            this.steps.forEach((step, i) => {
+                step.addEventListener('click', () => this.goTo(i));
+            });
+        }
+        this.render();
+    }
+    render() {
+        this.steps.forEach((step, i) => {
+            step.classList.remove('active', 'completed');
+            if (i < this.current)
+                step.classList.add('completed');
+            else if (i === this.current)
+                step.classList.add('active');
+        });
+        this.connectors.forEach((connector, i) => {
+            connector.classList.toggle('completed', i < this.current);
+        });
+    }
+    next() {
+        if (this.current < this.steps.length - 1) {
+            this.goTo(this.current + 1);
+        }
+    }
+    prev() {
+        if (this.current > 0) {
+            this.goTo(this.current - 1);
+        }
+    }
+    goTo(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        const previous = this.current;
+        this.current = index;
+        this.render();
+        if (this.onChange && previous !== index) {
+            this.onChange(index, previous);
+        }
+    }
+    setError(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        this.steps[index].classList.add('error');
+    }
+    clearError(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        this.steps[index].classList.remove('error');
+    }
+    getStep() {
+        return this.current;
+    }
+    getStepCount() {
+        return this.steps.length;
+    }
+    isFirst() {
+        return this.current === 0;
+    }
+    isLast() {
+        return this.current === this.steps.length - 1;
+    }
+}
+export { Stepper };