material-inspired-component-library 5.0.0 → 6.0.0

package/components/datepicker/index.ts

@@ -0,0 +1,701 @@
+//
+// 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 datepickerSelector = 'dialog.micl-dialog.micl-datepicker';
+
+type ValueElement = HTMLInputElement | HTMLButtonElement;
+
+interface DatePickerState {
+    invoker : ValueElement | null;
+    selected: Date;
+    viewDate: Date; // the month/year currently being viewed
+    min     : Date;
+    max     : Date;
+}
+
+const stateMap = new WeakMap<HTMLDialogElement, DatePickerState>();
+const locale = new Intl.DateTimeFormat().resolvedOptions().locale;
+
+const formatters = {
+    input: new Intl.DateTimeFormat(locale, {
+        year : 'numeric',
+        month: '2-digit',
+        day  : '2-digit'
+    }),
+    header: new Intl.DateTimeFormat(locale, { weekday: 'short', day: 'numeric', month: 'short' }),
+    monthLong: new Intl.DateTimeFormat(undefined, { month: 'long' }),
+    monthShort: new Intl.DateTimeFormat(locale, { month: 'short' }),
+    weekdayNarrow: new Intl.DateTimeFormat(locale, { weekday: 'narrow' }),
+    weekdayLong: new Intl.DateTimeFormat(locale, { weekday: 'long' })
+};
+
+const toLocalMidnight = (date: Date): Date =>
+{
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+
+const formatToInputDateValue = (d: Date): string =>
+{
+    const month = (d.getMonth() + 1).toString().padStart(2, '0');
+    const day   = d.getDate().toString().padStart(2, '0');
+    return `${d.getFullYear()}-${month}-${day}`;
+};
+
+const getDateFormat = (): string =>
+{
+    return formatters.input.formatToParts(new Date(2025, 0, 15)).map(part =>
+    {
+        switch (part.type) {
+            case 'day'    : return 'DD';
+            case 'month'  : return 'MM';
+            case 'year'   : return 'YYYY';
+            case 'literal': return part.value;
+            default: return '';
+        }
+    }).join('').trim();
+};
+
+const getFirstDayOfWeek = (): number =>
+{
+    try {
+        const info = (new Intl.Locale(locale) as any).getWeekInfo?.();
+        if (info) {
+            return info.firstDay === 7 ? 0 : info.firstDay;
+        }
+    }
+    catch {}
+
+    return /US|CA|MX/i.test(locale) ? 0 : 1; // Sunday for USA, Mexico and Canada, Monday as default
+};
+
+const firstDayOfWeek = getFirstDayOfWeek();
+const isValidDate = (date: Date): boolean => !isNaN(date.getTime());
+
+const setText = (parent: Element | null, text: string): void =>
+{
+    if (!parent) {
+        return;
+    }
+    if (parent.firstElementChild) {
+        let node = parent.firstChild;
+        while (node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.nodeValue = text;
+                return;
+            }
+            node = node.nextSibling;
+        }
+        parent.appendChild(document.createTextNode(text));
+    }
+    else {
+        parent.textContent = text;
+    }
+};
+
+const getCalendarDays = (
+    year : number,
+    month: number
+): Array<{ date: Date, val: string, isCurrentMonth: boolean }> => {
+
+    const firstOfMonth = new Date(year, month, 1);
+    const dayOfWeek    = firstOfMonth.getDay();
+    const offset       = (dayOfWeek - firstDayOfWeek + 7) % 7;
+
+    const startDate = new Date(year, month, 1 - offset);
+
+    return Array.from({ length: 42 }, (_, i) => {
+        const current = new Date(startDate);
+        current.setDate(startDate.getDate() + i);
+        return {
+            date          : current,
+            val           : formatToInputDateValue(current),
+            isCurrentMonth: current.getMonth() === month
+        };
+    });
+};
+
+const renderCalendarHeader = (): DocumentFragment =>
+{
+    const tempDate = new Date();
+    const startOffset = tempDate.getDay() - firstDayOfWeek;
+    tempDate.setDate(tempDate.getDate() - startOffset);
+    
+    const fragment = document.createDocumentFragment();
+    
+    for (let i = 0; i < 7; i++) {
+        const span = document.createElement('span');
+        span.style.gridArea = `1 / ${i + 1}`;
+        span.textContent = formatters.weekdayNarrow.format(tempDate);
+        span.title = formatters.weekdayLong.format(tempDate);
+        fragment.appendChild(span);
+        tempDate.setDate(tempDate.getDate() + 1);
+    }
+    return fragment;
+};
+
+const populateContainerWithDays = (
+    container: HTMLElement,
+    days     : Array<{ date: Date, val: string, isCurrentMonth: boolean }>,
+    state    : DatePickerState,
+    isEmpty  : boolean = false
+): void => {
+    if (isEmpty) {
+        const fragment = renderCalendarHeader();
+
+        days.forEach((_, index) => {
+            const time = document.createElement('time');
+            const row = Math.floor(index / 7) + 2;
+            const col = (index % 7) + 1;
+            time.style.gridArea = `${row} / ${col}`;
+            fragment.appendChild(time);
+        });
+
+        container.appendChild(fragment);
+    }
+
+    const today = toLocalMidnight(new Date());
+    container.querySelectorAll('time').forEach((el, index) =>
+    {
+        const day = days[index];
+        el.dateTime = day.val;
+        el.textContent = day.date.getDate().toString();
+        
+        const isSelected = day.date.getTime() === state.selected.getTime();
+        const isToday = day.date.getTime() === today.getTime();
+        
+        el.className = '';
+        if (!day.isCurrentMonth) el.classList.add('micl-datepicker__outside');
+        if (isSelected) el.classList.add('micl-datepicker__selected');
+        if (isToday) el.classList.add('micl-datepicker__today');
+    });
+};
+
+const renderCalendar = (
+    dialog: HTMLDialogElement,
+    state : DatePickerState,
+    amount: number = 0
+): void => {
+
+    const content   = dialog.querySelector<HTMLElement>('.micl-dialog__content');
+    const calendars = content?.querySelector<HTMLElement>('.micl-datepicker__calendars');
+    if (!calendars) {
+        return;
+    }
+
+    const startClass     = 'micl-startleft';
+    const endClass       = 'micl-startright';
+    const moveLeftClass  = 'micl-moveleft';
+    const moveRightClass = 'micl-moveright';
+
+    calendars.classList.remove(moveLeftClass, moveRightClass, startClass, endClass);
+    void calendars.offsetWidth;
+
+    if (amount !== 0) {
+        const oldCalendar = calendars.querySelector<HTMLElement>('.micl-datepicker__calendar');
+        if (!oldCalendar) {
+            return;
+        }
+
+        const newCalendar      = document.createElement('div');
+        const newCalendarInner = document.createElement('div');
+        newCalendar.classList.add('micl-datepicker__calendar');
+        newCalendarInner.classList.add('micl-datepicker__calendar-inner');
+
+        const days = getCalendarDays(state.viewDate.getFullYear(), state.viewDate.getMonth());
+        populateContainerWithDays(newCalendarInner, days, state, true);
+
+        const isNextMonth = amount > 0;
+        const startPositionClass = isNextMonth ? startClass : endClass;
+        const endTransformClass = isNextMonth ? moveLeftClass : moveRightClass;
+
+        newCalendar.appendChild(newCalendarInner);
+        if (isNextMonth) {
+            calendars.appendChild(newCalendar);
+        }
+        else {
+            calendars.prepend(newCalendar);
+        }
+
+        calendars.classList.add('micl-no-transition', startPositionClass);
+        void calendars.offsetWidth;
+
+        requestAnimationFrame(() => {
+            calendars.classList.remove('micl-no-transition', startPositionClass);
+            calendars.classList.add(endTransformClass);
+        });
+
+        const onTransitionEnd = () =>
+        {
+            calendars.removeEventListener('transitionend', onTransitionEnd);
+
+            setTimeout(() =>
+            {
+                calendars.classList.remove(endTransformClass);
+                if (oldCalendar.parentElement === calendars) {
+                    oldCalendar.remove();
+                }
+                calendars.classList.add('micl-no-transition', startClass);
+                void calendars.offsetWidth;
+
+                calendars.classList.remove('micl-no-transition', startClass);
+            }, 0);
+        };
+        calendars.addEventListener('transitionend', onTransitionEnd);
+    }
+    else {
+        let calendar = calendars.querySelector<HTMLElement>('.micl-datepicker__calendar');
+        if (!calendar) {
+            calendar = document.createElement('div');
+            calendar.classList.add('micl-datepicker__calendar');
+            calendar = calendars.appendChild(calendar);
+        }
+        let inner = calendar.querySelector<HTMLElement>('.micl-datepicker__calendar-inner');
+        if (!inner) {
+            inner = document.createElement('div');
+            inner.classList.add('micl-datepicker__calendar-inner');
+            calendar.appendChild(inner);
+        }
+        const days = getCalendarDays(state.viewDate.getFullYear(), state.viewDate.getMonth());
+        populateContainerWithDays(inner, days, state, inner.querySelectorAll('time').length === 0);
+    }
+
+    const input = content?.querySelector<HTMLInputElement>('.micl-datepicker__input input');
+    if (input) {
+        input.value = formatters.input.format(state.selected);
+        if (input.value) {
+            input.dataset.miclvalue = '1';
+        }
+        else {
+            delete input.dataset.miclvalue;
+        }
+        if (!input.dataset.micldateformat) {
+            input.dataset.micldateformat = getDateFormat();
+        }
+    }
+
+    setText(dialog.querySelector('h1, h2, h3, h4, h5, h6, .micl-heading'), formatters.header.format(state.selected));
+    setText(dialog.querySelector('.micl-datepicker__month'), formatters.monthShort.format(state.viewDate));
+    setText(
+        dialog.querySelector('.micl-datepicker__year'),
+        state.viewDate.toLocaleDateString(locale, dialog.classList.contains('micl-dialog--docked') ?
+        { year: 'numeric' } : { month: 'long', year: 'numeric' })
+    );
+
+    const monthInput = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__months input[value="${state.viewDate.getMonth()}"]`);
+    if (monthInput) monthInput.checked = true;
+    
+    const yearInput = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__years input[value="${state.viewDate.getFullYear()}"]`);
+    if (yearInput) yearInput.checked = true;
+};
+
+const initPeriodPickers = (dialog: HTMLDialogElement, min: Date, max: Date): void =>
+{
+    const minYear  = min.getFullYear();
+    const maxYear  = max.getFullYear();
+
+    ['months', 'years'].forEach(period =>
+    {
+        const container = dialog.querySelector(`.micl-datepicker__${period}`);
+        if (!container) {
+            return;
+        }
+        container.innerHTML = '';
+        const frag = document.createDocumentFragment();
+
+        const maxMonth = max.getMonth();
+
+        if (period === 'months') {
+            const months: number[] = [];
+
+            let current = new Date(min.getFullYear(), min.getMonth(), 1);
+            while (
+                current <= max
+                || (current.getMonth() === maxMonth && current.getFullYear() === maxYear)
+            ) {
+                months.push(current.getMonth());
+                current.setMonth(current.getMonth() + 1);
+            }
+            
+            [...new Set(months.sort((a, b) => a - b))].forEach(m => {
+                const label = document.createElement('label');
+                label.innerHTML = `<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${m}"> ${formatters.monthLong.format(new Date(2000, m, 1))}`;
+                frag.appendChild(label);
+            });
+        }
+        else {
+            for (let y = minYear; y <= maxYear; y++) {
+                const label = document.createElement('label');
+                label.innerHTML = `<input type="radio" name="miclyear" value="${y}"> ${y}`;
+                frag.appendChild(label);
+            }
+        }
+
+        const inner = document.createElement('div');
+        inner.classList.add(`micl-datepicker__${period}-inner`);
+        container.appendChild(inner).appendChild(frag);
+    });
+};
+
+const toggleView = (dialog: HTMLDialogElement, view: 'calendars' | 'months' | 'years' | 'input'): void =>
+{
+    if (view === 'months' || view === 'years') {
+        if (!dialog.querySelector(`.micl-datepicker__${view}.micl-datepicker__view-hidden`)) {
+            view = 'calendars';
+        }
+    }
+
+    ['calendars', 'input', 'month-selector', 'year-selector'].forEach(name =>
+    {
+        let doHide = view === 'input';
+        if (name === 'calendars' || name === 'input') {
+            doHide = view !== name;
+        }
+        dialog.querySelector(`.micl-datepicker__${name}`)?.classList.toggle(
+            'micl-datepicker__view-hidden',
+            doHide
+        );
+    });
+
+    const content = dialog.querySelector<HTMLElement>('.micl-dialog__content');
+    if (!content) {
+        return;
+    }
+    const contentHeight = parseInt(window.getComputedStyle(content).getPropertyValue('max-block-size'), 10);
+
+    ['.micl-datepicker__months', '.micl-datepicker__years'].forEach(selector =>
+    {
+        const period = content.querySelector<HTMLElement>(selector);
+        if (!period) {
+            return;
+        }
+        const selected = period.querySelector<HTMLInputElement>('input:checked');
+        const height   = 48;
+        let doHide: boolean | null = false;
+
+        if (selected && (selector.substring(18) === view)) {
+            const property = window.getComputedStyle(period).getPropertyValue('transition-duration');
+            const duration = parseFloat(property) * (property.includes('ms') ? 1 : 1000);
+            const maxScrollDistance = period.scrollHeight - contentHeight;
+            const centerTop = (contentHeight - height) / 2;
+
+            if (selected.offsetTop > centerTop) {
+                let scrollDistance = selected.offsetTop - centerTop - (height / 2);
+                if (scrollDistance > maxScrollDistance) {
+                    scrollDistance = maxScrollDistance;
+                }
+
+                const startTime = performance.now();
+                const animateScroll = (currentTime: number) => {
+                    const progress = Math.min((currentTime - startTime) / duration, 1);
+                    content.scrollTop = scrollDistance * progress;
+                    if (progress < 1) {
+                        requestAnimationFrame(animateScroll);
+                    }
+                };
+                period.classList.remove('micl-datepicker__view-hidden');
+                requestAnimationFrame(animateScroll);
+                doHide = null;
+
+                period.addEventListener('transitionend', function handler(event)
+                {
+                    if (event.propertyName === 'height' || event.propertyName === 'block-size') {
+                        content.scrollTop = scrollDistance;
+                        period.removeEventListener('transitionend', handler);
+                    }
+                });
+            }
+        }
+        else {
+            doHide = true;
+        }
+        if (doHide !== null) {
+            period.classList.toggle('micl-datepicker__view-hidden', doHide);
+        }
+    });
+
+    const mode = dialog.querySelector<HTMLElement>('.micl-datepicker__inputmode[data-miclalt]');
+    if (mode) {
+        if (!mode.dataset.miclalticon) {
+            mode.dataset.miclalticon = mode.textContent;
+        }
+        mode.textContent = (view === 'input' ? mode.dataset.miclalt : mode.dataset.miclalticon) || '';
+    }
+};
+
+const changePeriod = (dialog: HTMLDialogElement, amount: number, unit: 'month' | 'year'): void =>
+{
+    const state = stateMap.get(dialog);
+    if (!state) {
+        return;
+    }
+
+    const newDate = new Date(state.viewDate);
+    if (unit === 'month') {
+        newDate.setMonth(newDate.getMonth() + amount);
+    }
+    else {
+        newDate.setFullYear(newDate.getFullYear() + amount);
+    }
+
+    const belowMin = state.min && newDate < state.min;
+    const aboveMax = state.max && newDate > state.max;
+
+    if (belowMin || aboveMax) {
+        dialog.querySelector('.micl-datepicker__calendars')?.animate([
+            { transform: 'translateX(0)' },
+            { transform: `translateX(${belowMin ? 8 : -8}px)` },
+            { transform: 'translateX(0)' }
+        ], { duration: 500, easing: 'ease-in-out' });
+        return;
+    }
+
+    state.viewDate = newDate;
+    renderCalendar(dialog, state, unit === 'month' ? amount : 0);
+};
+
+const selectDate = (dialog: HTMLDialogElement, dateStr: string, isLocaleFormatted = false): void =>
+{
+    const state = stateMap.get(dialog);
+    if (!state) {
+        return;
+    }
+
+    let parts: number[] = [];
+    if (isLocaleFormatted) {
+        const dateformat = getDateFormat();
+        if (dateStr.length === dateformat.length) {
+            let d = '';
+            let m = '';
+            let y = '';
+            for (let i = 0; i < dateformat.length; i++) {
+                switch (dateformat[i]) {
+                    case 'D': d += dateStr[i]; break;
+                    case 'M': m += dateStr[i]; break;
+                    case 'Y': y += dateStr[i]; break;
+                    default:
+                }
+            }
+            parts = [parseInt(y, 10), parseInt(m, 10) - 1, parseInt(d, 10)];
+        }
+    }
+    else {
+        parts = dateStr.split('-').map(Number);
+        parts[1]--;
+    }
+
+    if (parts.length === 3) {
+        state.selected = new Date(parts[0], parts[1], parts[2]);
+        state.viewDate = new Date(state.selected);
+        
+        renderCalendar(dialog, state);
+    }
+};
+
+export default (() =>
+{
+    return {
+        keydown: (event: Event): void =>
+        {
+            if (
+                !(event instanceof KeyboardEvent)
+                || !(event.target instanceof Element)
+            ) {
+                return;
+            }
+            const dialog = event.target.closest(datepickerSelector) as HTMLDialogElement;
+            if (!dialog) {
+                return;
+            }
+
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    if (event.target instanceof HTMLInputElement && event.target.type === 'date') {
+                        event.preventDefault();
+                    }
+                    break;
+                case 'M':
+                    toggleView(dialog, 'months');
+                    break;
+                case 'Y':
+                    toggleView(dialog, 'years');
+                    break;
+                case 'PageUp':
+                case 'PageDown':
+                    changePeriod(dialog, event.key === 'PageUp' ? 1 : -1, event.shiftKey ? 'year' : 'month');
+                    break;
+                default:
+            }
+        },
+
+        initialize: (dialog: HTMLDialogElement): void =>
+        {
+            if (dialog.dataset.miclinitialized) {
+                return;
+            }
+
+            const form    = dialog.querySelector('form');
+            const content = dialog.querySelector('.micl-dialog__content');
+            if (!form || !content) {
+                return;
+            }
+            dialog.dataset.miclinitialized = '1';
+
+            dialog.addEventListener('click', event =>
+            {
+                const target = event.target as HTMLElement;
+                const btn    = target.closest('button');
+
+                if (btn) {
+                    const forMonth = btn.parentElement?.classList.contains('micl-datepicker__month-selector');
+                    const isNext   = btn.classList.contains('micl-datepicker__next');
+                    const isPrev   = btn.classList.contains('micl-datepicker__previous');
+                    
+                    if (isNext || isPrev) {
+                        changePeriod(dialog, isNext ? 1 : -1, forMonth ? 'month' : 'year');
+                        return;
+                    }
+                }
+
+                if (target.closest('.micl-datepicker__month')) toggleView(dialog, 'months');
+                if (target.closest('.micl-datepicker__year')) toggleView(dialog, 'years');
+
+                const mode = target.closest('.micl-datepicker__inputmode') as HTMLElement;
+                if (mode) {
+                    toggleView(dialog, !dialog.querySelector(
+                        '.micl-datepicker__input.micl-datepicker__view-hidden'
+                    ) ? 'calendars' : 'input');
+                }
+
+                const time = target.closest('time');
+                if (time && time.dateTime) {
+                    selectDate(dialog, time.dateTime);
+                }
+
+                if (
+                    target instanceof HTMLInputElement
+                    && (target.name === 'miclmonth' || target.name === 'miclyear')
+                ) {
+                    const state = stateMap.get(dialog);
+                    if (state) {
+                        const value = parseInt(target.value, 10);
+                        if (target.name === 'miclmonth') {
+                            state.viewDate.setMonth(value);
+                        }
+                        else {
+                            state.viewDate.setFullYear(value);
+                        }
+                        if (state.viewDate < state.min) {
+                            state.viewDate = state.min;
+                        }
+                        else if (state.viewDate > state.max) {
+                            state.viewDate = state.max;
+                        }
+                        renderCalendar(dialog, state);
+                        toggleView(dialog, 'calendars');
+                    }
+                }
+            });
+
+            dialog.addEventListener('beforetoggle', (event: any): void =>
+            {
+                if (event.newState !== 'open') {
+                    return;
+                }
+                const isInvoker = (e: Element | null): e is ValueElement => e instanceof HTMLInputElement || e instanceof HTMLButtonElement;
+
+                let invoker = document.activeElement;
+                if (
+                    !isInvoker(invoker)
+                    || (!invoker.dataset.datepicker && !invoker.popoverTargetElement && !(invoker as any).commandForElement)
+                ) {
+                    invoker = document.querySelector(
+                        `[data-datepicker="${dialog.id}"],[popovertarget="${dialog.id}"],[commandfor="${dialog.id}"]`
+                    );
+                }
+                if (!isInvoker(invoker)) {
+                    return;
+                }
+                
+                let initialDate = new Date();
+                let min = new Date(1900, 0, 1);
+                let max = new Date(2099, 11, 31);
+
+                if (invoker instanceof HTMLInputElement) {
+                    if (invoker.type === 'date' && invoker.valueAsDate) {
+                        initialDate = invoker.valueAsDate;
+                    }
+                    else if (invoker.value) {
+                        initialDate = new Date(invoker.value);
+                    }
+                    if (invoker.min) min = new Date(invoker.min);
+                    if (invoker.max) max = new Date(invoker.max);
+                }
+                else {
+                    const parsed = new Date(invoker.value || invoker.textContent);
+                    if (isValidDate(parsed)) {
+                        initialDate = parsed;
+                    }
+                }
+                if (!isValidDate(initialDate)) initialDate = new Date();
+                initialDate = toLocalMidnight(initialDate);
+
+                const state: DatePickerState = {
+                    invoker,
+                    selected: initialDate,
+                    viewDate: new Date(initialDate),
+                    min,
+                    max
+                };
+                stateMap.set(dialog, state);
+
+                initPeriodPickers(dialog, min, max);
+                toggleView(dialog, 'calendars');
+                renderCalendar(dialog, state);
+
+                dialog.querySelector('.micl-datepicker__input input')?.addEventListener('blur', e =>
+                {
+                    const element = e.target as HTMLInputElement;
+                    selectDate(dialog, element.value, true);
+                }, { once: true });
+            });
+
+            dialog.addEventListener('close', (): void =>
+            {
+                const state = stateMap.get(dialog);
+                if (!state?.invoker || dialog.returnValue === '') {
+                    return;
+                }
+                state.invoker.value = formatToInputDateValue(state.selected);
+
+                if (state.invoker instanceof HTMLInputElement) {
+                    state.invoker.dispatchEvent(new Event('change', { bubbles: true }));
+                    state.invoker.dispatchEvent(new Event('input', { bubbles: true }));
+                }
+                else {
+                    state.invoker.textContent = state.selected.toLocaleDateString();
+                }
+            });
+        }
+    };
+})();