material-inspired-component-library 8.1.0 → 9.0.0

package/components/iconbutton/index.ts

@@ -1,77 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const buttonSelector = 'button.micl-button--toggle';
-
-const toggleIcon = (button: HTMLButtonElement): void =>
-{
-    const selected = button.classList.contains('micl-button--selected');
-    if (button.dataset.micliconselected) {
-        button.classList.toggle(button.dataset.micliconselected, selected);
-    }
-    if (button.dataset.miclicon) {
-        button.classList.toggle(button.dataset.miclicon, !selected);
-    }
-};
-
-export default (() =>
-{
-    return {
-        command: (event: Event): void =>
-        {
-            const target = event.target as HTMLButtonElement;
-
-            if (
-                target.matches(buttonSelector)
-                && !target.disabled
-                && (event as any).command === '--micl-toggle'
-            ) {
-                target.classList.add('micl-button--toggled');
-                target.classList.toggle('micl-button--selected');
-
-                toggleIcon(target);
-            }
-        },
-
-        initialize: function(element: HTMLButtonElement): void
-        {
-            if (
-                !element.matches(buttonSelector)
-                || element.dataset.miclinitialized
-            ) {
-                return;
-            }
-            element.dataset.miclinitialized = '1';
-
-            toggleIcon(element);
-
-            element.addEventListener('command', this.command);
-        },
-
-        cleanup: function(element: HTMLButtonElement): void
-        {
-            if (element.matches(buttonSelector)) {
-                document.removeEventListener('command', this.command);
-                delete element.dataset.miclinitialized;
-            }
-        }
-    };
-})();

package/components/list/index.ts

@@ -1,138 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const listSelector = '.micl-list';
-
-const isDisabled   = (item?: HTMLElement | null) => item?.classList.contains('micl-list-item--disabled');
-const isSelectable = (item?: HTMLElement | null) => item?.matches(':has(input[type=checkbox])');
-const isSelected   = (item?: HTMLElement | null) => item?.matches(':has(input[type=checkbox]:checked)');
-
-export default
-{
-    keydown(event: KeyboardEvent | Event): void
-    {
-        const target = event.target as HTMLElement;
-
-        if (
-            !(event instanceof KeyboardEvent)
-            || !target?.matches('.micl-list-item-one,.micl-list-item-two,.micl-list-item-three')
-        ) {
-            return;
-        }
-
-        const parent = target.parentElement;
-        if (!parent) return;
-
-        const isAccordion = parent instanceof HTMLDetailsElement;
-        let items: HTMLElement[] = [];
-
-        if (isAccordion) {
-            items = Array.from(parent.parentElement?.children || [])
-                .map(details => details.querySelector(':scope > summary') as HTMLElement)
-                .filter(Boolean);
-        }
-        else if (['UL', 'OL'].includes(parent.tagName)) {
-            items = Array.from(parent.children).filter(child =>
-                child instanceof HTMLLIElement && child.getAttribute('role') !== 'separator'
-                ) as HTMLElement[];
-        }
-
-        items = items.filter(item => !isDisabled(item));
-        if (!items.length) return;
-
-        const currentIndex = items.indexOf(target);
-        if (currentIndex === -1) return;
-
-        let nextIndex = currentIndex;
-
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault(); // prevent page scrolling
-                nextIndex = (currentIndex + 1) % items.length;
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                nextIndex = (currentIndex - 1 + items.length) % items.length;
-                break;
-            case 'Tab':
-                if (!isAccordion) {
-                    const selectedIndex = items.findIndex(isSelected);
-                    nextIndex = selectedIndex === -1 ? 0 : selectedIndex;
-                }
-                break;
-            case ' ':
-            case 'Enter':
-                if (isAccordion) break;
-                if (event.key === ' ') {
-                    event.preventDefault();
-                }
-                const el = target.querySelector<HTMLElement>(
-                    'input[type=checkbox], a[href], button'
-                );
-                if (el instanceof HTMLInputElement) {
-                    el.checked = !el.checked;
-                    el.dispatchEvent(new Event('change', {
-                        bubbles   : true,
-                        cancelable: true
-                    }));
-                }
-                else {
-                    el?.click();
-                }
-                break;
-            default:
-        }
-
-        if (nextIndex !== currentIndex) {
-            if (!isAccordion) {
-                target.setAttribute('tabindex', '-1');
-                items[nextIndex].setAttribute('tabindex', '0');
-            }
-            items[nextIndex].focus();
-        }
-    },
-
-    initialize(element: HTMLElement): void
-    {
-        if (element.dataset.miclinitialized) return;
-        element.dataset.miclinitialized = '1';
-
-        element.querySelectorAll<HTMLElement>(
-            ':scope > details > summary.micl-list-item--disabled'
-        ).forEach(summary => summary.setAttribute('tabindex', '-1'));
-
-        if (!element.querySelector('li[tabindex="0"]')) return;
-
-        element.querySelectorAll<HTMLLIElement>('li:not([role="separator"])').forEach(item =>
-        {
-            if (item.getAttribute('tabindex') !== '0') {
-                item.setAttribute('tabindex', '-1');
-            }
-
-            item.querySelectorAll('a, button, input').forEach(link => link.setAttribute('tabindex', '-1'));
-
-            if (isSelectable(item)) {
-                item.setAttribute('role', 'option');
-                item.parentElement?.setAttribute('role', 'listbox');
-            }
-        });
-    }
-};

package/components/menu/index.ts

@@ -1,145 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const menuSelector = '.micl-menu[popover]';
-
-export default (() =>
-{
-    const getOrigin = (invoker: Element, popover: Element): string =>
-    {
-        const invokerRect = invoker.getBoundingClientRect();
-        const popoverRect = popover.getBoundingClientRect();
-
-        return ((invokerRect.x > popoverRect.x) ? 'right ' : 'left ') +
-               ((invokerRect.y > popoverRect.y) ? 'bottom' : 'top');
-    };
-
-    const navigableItems = (list: Element): HTMLElement[] =>
-        Array.from(list.children).filter((child): child is HTMLElement =>
-            child instanceof HTMLLIElement
-            && child.getAttribute('role') !== 'separator'
-            && !child.classList.contains('micl-list-item--disabled')
-            && child.matches('.micl-list-item-one,.micl-list-item-two,.micl-list-item-three')
-        );
-
-    return {
-        initialize: (element: HTMLElement): void =>
-        {
-            if (
-                !element.matches('.micl-menu[popover]')
-                || element.dataset.miclinitialized
-            ) {
-                return;
-            }
-            element.dataset.miclinitialized = '1';
-
-            const invoker = document.querySelector(`[popovertarget="${element.id}"]`);
-
-            invoker && element.addEventListener('beforetoggle', () =>
-            {
-                element.style.transformOrigin = getOrigin(invoker, element);
-            });
-
-            element.addEventListener('keydown', (event: KeyboardEvent) =>
-            {
-                if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
-
-                const target = event.target;
-                if (
-                    !(target instanceof HTMLElement)
-                    || !target.matches('.micl-list-item-one,.micl-list-item-two,.micl-list-item-three')
-                ) {
-                    return;
-                }
-
-                const currentList = target.parentElement;
-                if (!currentList?.matches('ul.micl-list')) return;
-                if (currentList.parentElement !== element) return;
-
-                const lists = Array.from(element.querySelectorAll<HTMLElement>(':scope > ul.micl-list'));
-                if (lists.length < 2) return;
-
-                const listIndex = lists.indexOf(currentList as HTMLElement);
-                const items = navigableItems(currentList);
-                const itemIndex = items.indexOf(target);
-                if (itemIndex === -1) return;
-
-                let nextItem: HTMLElement | undefined;
-
-                if (event.key === 'ArrowDown' && itemIndex === items.length - 1) {
-                    const nextListIndex = (listIndex + 1) % lists.length;
-                    nextItem = navigableItems(lists[nextListIndex])[0];
-                }
-                else if (event.key === 'ArrowUp' && itemIndex === 0) {
-                    const prevListIndex = (listIndex - 1 + lists.length) % lists.length;
-                    const prev = navigableItems(lists[prevListIndex]);
-                    nextItem = prev[prev.length - 1];
-                }
-
-                if (nextItem) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    target.setAttribute('tabindex', '-1');
-                    nextItem.setAttribute('tabindex', '0');
-                    nextItem.focus();
-                }
-            }, true);
-
-            element.querySelectorAll<HTMLButtonElement>(
-                ':scope > ul.micl-list > li > button[popovertarget]'
-            ).forEach(submenuinvoker =>
-            {
-                if (submenuinvoker.popoverTargetElement?.matches('.micl-menu[popover]')) {
-                    const popover = submenuinvoker.popoverTargetElement as HTMLElement;
-                    const id = `--${popover.id}`;
-                    let hoverTimeout: ReturnType<typeof setTimeout>;
-
-                    submenuinvoker.style.setProperty('anchor-name', id);
-                    popover.style.insetBlockStart = `anchor(${id} start)`;
-                    popover.style.insetInlineStart = `anchor(${id} end)`;
-
-                    const scheduleClose = () =>
-                    {
-                        clearTimeout(hoverTimeout);
-                        hoverTimeout = setTimeout(() =>
-                        {
-                            if (!submenuinvoker.matches(':hover') && !popover.matches(':hover')) {
-                                popover.hidePopover();
-                            }
-                        }, 300);
-                    };
-
-                    submenuinvoker.addEventListener('mouseenter', () =>
-                    {
-                        clearTimeout(hoverTimeout);
-                        popover.showPopover();
-                    });
-                    submenuinvoker.addEventListener('mouseleave', scheduleClose);
-                    popover.addEventListener('mouseenter', () =>
-                    {
-                        clearTimeout(hoverTimeout);
-                    });
-                    popover.addEventListener('mouseleave', scheduleClose);
-                }
-            });
-        }
-    };
-})();

package/components/navigationrail/index.ts

@@ -1,87 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const navigationrailSelector = '.micl-navigationrail';
-
-interface NavigationRailState {
-    boundHandleClick: (event: Event) => void;
-}
-
-const navigationrailStates = new WeakMap<HTMLElement, NavigationRailState>();
-
-export default
-{
-    initialize: (element: HTMLElement): void =>
-    {
-        if (!element.matches(navigationrailSelector) || element.dataset.miclinitialized) {
-            return;
-        }
-
-        element.dataset.miclinitialized = '1';
-
-        const boundHandleClick = (event: Event): void =>
-        {
-            const clickedItem = (event.target as HTMLElement).closest<HTMLAnchorElement>(
-                'a.micl-navigationrail__item'
-            );
-
-            if (clickedItem) {
-                const allItems = element.querySelectorAll<HTMLAnchorElement>(
-                    'a.micl-navigationrail__item'
-                );
-                allItems.forEach(item => item.removeAttribute('aria-current'));
-
-                clickedItem.setAttribute('aria-current', 'page');
-            }
-        };
-
-        navigationrailStates.set(element, { boundHandleClick });
-
-        element.addEventListener('click', boundHandleClick);
-    },
-
-    keydown: (event: Event): void =>
-    {
-        if (
-            !(event instanceof KeyboardEvent)
-            || !(event.target instanceof HTMLElement)
-            || !event.target.matches('.micl-navigationrail__item')
-        ) {
-            return;
-        }
-
-        if (event.keyCode === 32 || event.key === ' ') {
-            event.preventDefault();
-            event.target.click();
-        }
-    },
-
-    cleanup: (element: HTMLElement): void =>
-    {
-        const state = navigationrailStates.get(element);
-
-        if (state) {
-            element.removeEventListener('click', state.boundHandleClick);
-        }
-
-        delete element.dataset.miclinitialized;
-    }
-};

package/components/progressindicator/index.ts

@@ -1,77 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const progressindicatorSelector = 'progress.micl-progress-linear,progress.micl-progress-circular';
-
-export default (() =>
-{
-    // <progress> emits no input/change events when its value/max change, so a
-    // per-instance MutationObserver mirrors the determinate attributes into the
-    // CSS custom properties the SCSS reads. Indeterminate progress (no value
-    // attribute) is handled entirely in CSS via the :indeterminate pseudo-class.
-    const observers = new WeakMap<HTMLProgressElement, MutationObserver>();
-
-    const setVars = (element: HTMLProgressElement): void =>
-    {
-        // position is value/max for determinate, or -1 when indeterminate.
-        const fraction = element.position;
-
-        if (fraction < 0) {
-            element.style.removeProperty('--md-comp-progress-value');
-            element.style.removeProperty('--md-comp-progress-max');
-            element.style.removeProperty('--md-comp-progress-fraction');
-            element.style.removeProperty('--md-comp-progress-amplitude-scale');
-            return;
-        }
-
-        // The Expressive wave amplitude eases to zero over the final 10% so the
-        // active indicator settles into a straight line as it completes.
-        const scale = Math.max(0, Math.min(1, (1 - fraction) / 0.1));
-
-        element.style.setProperty('--md-comp-progress-value', String(element.value));
-        element.style.setProperty('--md-comp-progress-max', String(element.max || 1));
-        element.style.setProperty('--md-comp-progress-fraction', String(fraction));
-        element.style.setProperty('--md-comp-progress-amplitude-scale', String(scale));
-    };
-
-    return {
-        initialize: (element: HTMLProgressElement): void =>
-        {
-            if (!element.matches(progressindicatorSelector)) {
-                return;
-            }
-
-            setVars(element);
-
-            const observer = new MutationObserver(() => setVars(element));
-            observer.observe(element, { attributes: true, attributeFilter: ['value', 'max'] });
-            observers.set(element, observer);
-        },
-        cleanup: (element: HTMLProgressElement): void =>
-        {
-            const observer = observers.get(element);
-            if (observer) {
-                observer.disconnect();
-                observers.delete(element);
-            }
-        }
-    };
-})();

package/components/slider/index.ts

@@ -1,149 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export const sliderSelector = 'input[type=range].micl-slider-xs,input[type=range].micl-slider-s,input[type=range].micl-slider-m,input[type=range].micl-slider-l,input[type=range].micl-slider-xl';
-
-export default (() =>
-{
-    const
-        tick  = String.fromCharCode(8226),
-        blank = String.fromCharCode(8201),
-        getTickValues = (element: HTMLInputElement, max: number, min: number): number[] =>
-        {
-            const values: number[] = [];
-
-            if (!!element.list && (max > min)) {
-                element.list.querySelectorAll<HTMLOptionElement>('option[value]').forEach(option =>
-                {
-                    let value = parseFloat(option.value);
-                    if (!isNaN(value) && (value >= min) && (value <= max)) {
-                        values.push(value);
-                    }
-                });
-            }
-            return values;
-        },
-        getWrapper = (element: HTMLInputElement): null | HTMLElement =>
-        {
-            return element.parentElement?.classList.contains('micl-slider__container') ?
-                   element.parentElement : null;
-        },
-        setMax = (element: HTMLInputElement): void =>
-        {
-            let max = element.max || '100';
-            getWrapper(element)?.style.setProperty('--md-sys-slider-max', max);
-            element.style.setProperty('--md-sys-slider-max', max);
-        },
-        setMin = (element: HTMLInputElement): void =>
-        {
-            let min = element.min || '0';
-            getWrapper(element)?.style.setProperty('--md-sys-slider-min', min);
-            element.style.setProperty('--md-sys-slider-min', min);
-        },
-        setTickString = (element: HTMLInputElement, tickString: string): void =>
-        {
-            // getWrapper(element)?.dataset.miclsliderticks = tickString;
-            element.dataset.miclsliderticks = tickString;
-        },
-        setValue = (element: HTMLInputElement): void =>
-        {
-            let tip = JSON.stringify(element.value + ''),
-                wrapper = getWrapper(element);
-            if (wrapper) {
-                wrapper.style.setProperty('--md-sys-slider-value', element.value);
-                wrapper.style.setProperty('--md-sys-slider-tip', tip);
-            }
-            element.style.setProperty('--md-sys-slider-value', element.value);
-            element.style.setProperty('--md-sys-slider-tip', tip);
-        },
-        setVars = (element: HTMLInputElement): void =>
-        {
-            let wrapper = getWrapper(element);
-            if (wrapper) {
-                const computedStyles = window.getComputedStyle(element);
-                ['--md-sys-slider-handle-height', '--md-sys-slider-track-height'].forEach(name => {
-                    wrapper.style.setProperty(name, computedStyles.getPropertyValue(name));
-                });
-            }
-        };
-
-    return {
-        initialize: (element: HTMLInputElement): void =>
-        {
-            if (!element.matches(sliderSelector)) {
-                return;
-            }
-
-            setMax(element);
-            setMin(element);
-            setValue(element);
-            setVars(element);
-
-            const max  = parseFloat(element.max);
-            const min  = parseFloat(element.min);
-            const rect = element.getBoundingClientRect();
-            const percentages = getTickValues(element, max, min).sort((a, b) => a - b).map(value => {
-                return Math.round(100 * (value - min) / (max - min));
-            });
-
-            if (percentages.length > 0) {
-                const canvas = document.createElement('canvas');
-                const ctx    = canvas.getContext('2d');
-
-                if (ctx) {
-                    ctx.font = window.getComputedStyle(element).getPropertyValue('font');
-                    let blankWidth   = ctx.measureText(blank).width,
-                        tickWidth    = ctx.measureText(tick).width,
-                        totalWidth   = rect.width - 10,
-                        currentWidth = 0,
-                        tickString   = '';
-
-                    percentages.forEach(percentage =>
-                    {
-                        let position = (totalWidth * percentage) / 100,
-                            nrBlanks = Math.round((position - currentWidth) / blankWidth) - 1;
-                        for (let i = 0; i < nrBlanks; i++) {
-                            tickString   += blank;
-                            currentWidth += blankWidth;
-                        }
-                        tickString += tick;
-                        currentWidth += tickWidth;
-                    });
-                    setTickString(element, tickString);
-                }
-                canvas.remove();
-            }
-            else {
-                setTickString(element, tick);
-            }
-        },
-        input: (event: Event): void =>
-        {
-            if (
-                (event.target as Element).matches(sliderSelector)
-                && event.target instanceof HTMLInputElement
-                && !event.target.disabled
-            ) {
-                setValue(event.target);
-            }
-        }
-    };
-})();