material-inspired-component-library 5.0.1 → 6.0.0

package/components/datepicker/index.ts

@@ -27,17 +27,52 @@ interface DatePickerState {
     invoker : ValueElement | null;
     selected: Date;
     viewDate: Date; // the month/year currently being viewed
-    min     : Date | null;
-    max     : Date | null;
+    min     : Date;
+    max     : Date;
 }
 
 const stateMap = new WeakMap<HTMLDialogElement, DatePickerState>();
-
 const locale = new Intl.DateTimeFormat().resolvedOptions().locale;
 
-const isValueElement = (element: Element | null): element is ValueElement =>
+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 element instanceof HTMLInputElement || element instanceof HTMLButtonElement;
+    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 =>
@@ -54,15 +89,7 @@ const getFirstDayOfWeek = (): number =>
 };
 
 const firstDayOfWeek = getFirstDayOfWeek();
-
-const toLocalMidnight = (date: Date): Date =>
-{
-    const d = new Date(date);
-    d.setHours(0, 0, 0, 0);
-    return d;
-};
-
-const isValidDate = (d: Date): boolean => !isNaN(d.getTime());
+const isValidDate = (date: Date): boolean => !isNaN(date.getTime());
 
 const setText = (parent: Element | null, text: string): void =>
 {
@@ -90,23 +117,40 @@ const getCalendarDays = (
     month: number
 ): Array<{ date: Date, val: string, isCurrentMonth: boolean }> => {
 
-    const results      = [];
     const firstOfMonth = new Date(year, month, 1);
     const dayOfWeek    = firstOfMonth.getDay();
     const offset       = (dayOfWeek - firstDayOfWeek + 7) % 7;
-    const current      = new Date(year, month, 1 - offset);
-    const pad          = (n: number): string => n.toString().padStart(2, '0');
-
-    // 6 weeks * 7 days
-    for (let i = 0; i < 42; i++) {
-        results.push({
-            date: new Date(current),
-            val: `${current.getFullYear()}-${pad(current.getMonth() + 1)}-${pad(current.getDate())}`,
+
+    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
-        });
-        current.setDate(current.getDate() + 1);
+        };
+    });
+};
+
+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 results;
+    return fragment;
 };
 
 const populateContainerWithDays = (
@@ -116,19 +160,7 @@ const populateContainerWithDays = (
     isEmpty  : boolean = false
 ): void => {
     if (isEmpty) {
-        const fragment    = document.createDocumentFragment();
-        const tempDate    = new Date();
-        const startOffset = tempDate.getDay() - firstDayOfWeek;
-        tempDate.setDate(tempDate.getDate() - startOffset); 
-        
-        for (let i = 0; i < 7; i++) {
-            const span = document.createElement('span');
-            span.style.gridArea = `1 / ${i + 1}`;
-            span.textContent = tempDate.toLocaleDateString(locale, { weekday: 'narrow' });
-            span.title = tempDate.toLocaleDateString(locale, { weekday: 'long' });
-            fragment.appendChild(span);
-            tempDate.setDate(tempDate.getDate() + 1);
-        }
+        const fragment = renderCalendarHeader();
 
         days.forEach((_, index) => {
             const time = document.createElement('time');
@@ -249,62 +281,78 @@ const renderCalendar = (
 
     const input = content?.querySelector<HTMLInputElement>('.micl-datepicker__input input');
     if (input) {
-        const pad  = (n: number): string => n.toString().padStart(2, '0');
-        input.value = `${state.selected.getFullYear()}-${pad(state.selected.getMonth() + 1)}-${pad(state.selected.getDate())}`;
+        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'),
-        state.selected.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
-    );
-    setText(
-        dialog.querySelector('.micl-datepicker__month'),
-        state.viewDate.toLocaleDateString(locale, { month: 'short' })
-    );
+
+    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' })
     );
 
-    ['months', 'years'].forEach(period => {
-        const value = period === 'months' ? state.viewDate.getMonth() : state.viewDate.getFullYear();
-        const input = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__${period} input[value="${value}"]`);
-        if (input) {
-            input.checked = true;
-        }
-    });
+    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, minYear: number, maxYear: number): void =>
+const initPeriodPickers = (dialog: HTMLDialogElement, min: Date, max: Date): void =>
 {
-    ['months', 'years'].forEach(period => {
+    const minYear  = min.getFullYear();
+    const maxYear  = max.getFullYear();
+
+    ['months', 'years'].forEach(period =>
+    {
         const container = dialog.querySelector(`.micl-datepicker__${period}`);
-        if (container) {
-            container.innerHTML = '';
-            const frag = document.createDocumentFragment();
+        if (!container) {
+            return;
+        }
+        container.innerHTML = '';
+        const frag = document.createDocumentFragment();
 
-            if (period === 'months') {
-                const fmt  = new Intl.DateTimeFormat(undefined, { month: 'long' });
+        const maxMonth = max.getMonth();
 
-                for (let m = 0; m < 12; m++) {
-                    const label = document.createElement('label');
-                    label.innerHTML = `<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${m}"> ${fmt.format(new Date(2000, m, 1))}`;
-                    frag.appendChild(label);
-                }
+        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);
             }
-            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);
-                }
+            
+            [...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 inner = document.createElement('div');
+        inner.classList.add(`micl-datepicker__${period}-inner`);
+        container.appendChild(inner).appendChild(frag);
     });
 };
 
@@ -384,6 +432,14 @@ const toggleView = (dialog: HTMLDialogElement, view: 'calendars' | 'months' | 'y
             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 =>
@@ -401,25 +457,58 @@ const changePeriod = (dialog: HTMLDialogElement, amount: number, unit: 'month' |
         newDate.setFullYear(newDate.getFullYear() + amount);
     }
 
-    if (state.min && newDate < state.min) return;
-    if (state.max && newDate > state.max) return;
+    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): void =>
+const selectDate = (dialog: HTMLDialogElement, dateStr: string, isLocaleFormatted = false): void =>
 {
     const state = stateMap.get(dialog);
     if (!state) {
         return;
     }
 
-    const parts = dateStr.split('-').map(Number);
-    state.selected = new Date(parts[0], parts[1] - 1, parts[2]);
-    state.viewDate = new Date(state.selected);
-    
-    renderCalendar(dialog, state);
+    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 (() =>
@@ -446,8 +535,10 @@ export default (() =>
                     }
                     break;
                 case 'M':
+                    toggleView(dialog, 'months');
+                    break;
                 case 'Y':
-                    toggleView(dialog, event.key === 'M' ? 'months' : 'years');
+                    toggleView(dialog, 'years');
                     break;
                 case 'PageUp':
                 case 'PageDown':
@@ -491,11 +582,9 @@ export default (() =>
 
                 const mode = target.closest('.micl-datepicker__inputmode') as HTMLElement;
                 if (mode) {
-                    const icon = mode.textContent;
-                    mode.textContent = mode.dataset.alticon || icon;
-                    mode.dataset.alticon = icon;
-                    const inputHidden = !!dialog.querySelector('.micl-datepicker__input.micl-datepicker__view-hidden');
-                    toggleView(dialog, inputHidden ? 'input' : 'calendars');
+                    toggleView(dialog, !dialog.querySelector(
+                        '.micl-datepicker__input.micl-datepicker__view-hidden'
+                    ) ? 'calendars' : 'input');
                 }
 
                 const time = target.closest('time');
@@ -516,6 +605,12 @@ export default (() =>
                         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');
                     }
@@ -527,23 +622,24 @@ export default (() =>
                 if (event.newState !== 'open') {
                     return;
                 }
+                const isInvoker = (e: Element | null): e is ValueElement => e instanceof HTMLInputElement || e instanceof HTMLButtonElement;
 
                 let invoker = document.activeElement;
                 if (
-                    !isValueElement(invoker)
-                    || (!invoker.dataset.datepicker && !invoker.getAttribute('popovertarget'))
+                    !isInvoker(invoker)
+                    || (!invoker.dataset.datepicker && !invoker.popoverTargetElement && !(invoker as any).commandForElement)
                 ) {
                     invoker = document.querySelector(
-                        `[data-datepicker="${dialog.id}"],[popovertarget="${dialog.id}"]`
+                        `[data-datepicker="${dialog.id}"],[popovertarget="${dialog.id}"],[commandfor="${dialog.id}"]`
                     );
                 }
-                if (!isValueElement(invoker)) {
+                if (!isInvoker(invoker)) {
                     return;
                 }
-
+                
                 let initialDate = new Date();
-                let min: Date | null = null;
-                let max: Date | null = null;
+                let min = new Date(1900, 0, 1);
+                let max = new Date(2099, 11, 31);
 
                 if (invoker instanceof HTMLInputElement) {
                     if (invoker.type === 'date' && invoker.valueAsDate) {
@@ -564,28 +660,33 @@ export default (() =>
                 if (!isValidDate(initialDate)) initialDate = new Date();
                 initialDate = toLocalMidnight(initialDate);
 
-                stateMap.set(dialog, {
-                    invoker: invoker as ValueElement,
+                const state: DatePickerState = {
+                    invoker,
                     selected: initialDate,
                     viewDate: new Date(initialDate),
                     min,
                     max
-                });
+                };
+                stateMap.set(dialog, state);
 
-                initPeriodPickers(dialog, min ? min.getFullYear() : 1900, max ? max.getFullYear() : 2099);
+                initPeriodPickers(dialog, min, max);
                 toggleView(dialog, 'calendars');
-                renderCalendar(dialog, stateMap.get(dialog)!);
+                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 || !state.invoker || dialog.returnValue === '') {
+                if (!state?.invoker || dialog.returnValue === '') {
                     return;
                 }
-                const pad  = (n: number): string => n.toString().padStart(2, '0');
-                const date = `${state.selected.getFullYear()}-${pad(state.selected.getMonth() + 1)}-${pad(state.selected.getDate())}`;
-                state.invoker.value = date;
+                state.invoker.value = formatToInputDateValue(state.selected);
 
                 if (state.invoker instanceof HTMLInputElement) {
                     state.invoker.dispatchEvent(new Event('change', { bubbles: true }));

package/components/iconbutton/README.md

@@ -67,9 +67,18 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 **Example: A selected toggle button**
 
 ```HTML
-<button type="button" class="micl-iconbutton-outlined-l micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
+<button
+  type="button"
+  id="id0"
+  class="micl-iconbutton-outlined-l micl-button--toggle micl-button--selected material-symbols-outlined"
+  commandfor="id0"
+  command="--micl-toggle"
+  aria-label="Control Panel"
+>settings</button>
 ```
 
+The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
+
 ## Icons
 The examples above use [Google Material Symbols](https://fonts.google.com/icons). For buttons using these icons, a fill-style of `1` is applied when the button is active or hovered over. To enable this effect, ensure your `link` tag includes `FILL@0..1`.
 

package/components/iconbutton/index.ts

@@ -19,58 +19,42 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const buttonSelector = 'button[popovertarget],button.micl-button--toggle';
+export const buttonSelector = 'button.micl-button--toggle';
 
 export default (() =>
 {
-    const onClick = (event: Event) =>
-    {
-        if (!event.target || !(event.target instanceof HTMLButtonElement)) {
-            return;
-        }
-        if (event.target.popoverTargetElement instanceof HTMLDialogElement) {
-            if (event.target.popoverTargetElement.open) {
-                event.target.popoverTargetElement.close();
-            }
-            else {
-                event.target.popoverTargetElement.showModal();
-            }
-        }
-        if (event.target.classList.contains('micl-button--toggle')) {
-            event.target.classList.add('micl-button--toggled');
-            event.target.classList.toggle('micl-button--selected');
-            if (!!event.target.dataset.miclalt) {
-                [event.target.textContent, event.target.dataset.miclalt] =
-                [event.target.dataset.miclalt, event.target.textContent];
+    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');
             }
-        }
-    };
+        },
 
-    return {
-        initialize: (element: HTMLButtonElement) =>
+        initialize: function(element: HTMLButtonElement): void
         {
             if (
-                !element.matches('button[popovertarget],button.micl-button--toggle')
+                !element.matches(buttonSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
             }
             element.dataset.miclinitialized = '1';
 
-            if (
-                (element.popoverTargetElement instanceof HTMLDialogElement)
-                && !element.popoverTargetElement.hasAttribute('popover')
-            ) {
-                element.addEventListener('click', onClick);
-            }
-            else if (element.classList.contains('micl-button--toggle')) {
-                element.addEventListener('click', onClick);
-            }
+            element.addEventListener('command', this.command);
         },
-        cleanup: (element: HTMLButtonElement) =>
+
+        cleanup: function(element: HTMLButtonElement): void
         {
-            if (element.matches('button[popovertarget],button.micl-button--toggle')) {
-                document.removeEventListener('click', onClick);
+            if (element.matches(buttonSelector)) {
+                document.removeEventListener('command', this.command);
                 delete element.dataset.miclinitialized;
             }
         }

package/components/textfield/index.ts

@@ -44,6 +44,59 @@ export default (() =>
         }
     };
 
+    const formatAsDate = (input: HTMLInputElement, inputType: string): void =>
+    {
+        const partsRegex = /([DMY]{2,4})([^DMY])?([DMY]{2,4})([^DMY])?([DMY]{2,4})/;
+        const match      = (input.dataset.micldateformat || '').match(partsRegex);
+        if (!match) {
+            return;
+        }
+
+        const components = [
+            { type: match[1], length: match[1].length, separator: match[2] || '' },
+            { type: match[3], length: match[3].length, separator: match[4] || '' },
+            { type: match[5], length: match[5].length, separator: '' }
+        ];
+
+        input.maxLength = components.reduce((sum, c) => sum + c.length + (c.separator ? 1 : 0), 0);
+
+        let value = input.value.replace(/\D/g, ''); // remove all non-digits
+        let formattedValue = '';
+        let valueIndex = 0;
+        let cursorPosition = input.selectionStart || 0;
+
+        for (let i = 0; i < components.length; i++) {
+            const comp = components[i];
+            if (value.length < valueIndex) break;
+
+            const segment = value.substring(valueIndex, valueIndex + comp.length);
+            formattedValue += segment;
+            valueIndex += segment.length;
+            
+            if (segment.length === comp.length && comp.separator) {
+                formattedValue += comp.separator;
+            }
+        }
+
+        const prevLength = input.value.length;
+        input.value = formattedValue.substring(0, input.maxLength);
+        const newLength = input.value.length;
+
+        if (inputType.startsWith('deleteContent')) {
+            if (cursorPosition > 0) {
+                input.setSelectionRange(cursorPosition, cursorPosition);
+            }
+        }
+        else {
+            if (newLength > prevLength && newLength > cursorPosition) {
+                input.setSelectionRange(newLength, newLength);
+            }
+            else {
+                input.setSelectionRange(cursorPosition, cursorPosition);
+            }
+        }
+    };
+
     return {
         initialize: (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
         {
@@ -110,6 +163,9 @@ export default (() =>
                 return;
             }
 
+            if (event.target instanceof HTMLInputElement && event.target.dataset.micldateformat) {
+                formatAsDate(event.target, (event as InputEvent).inputType);
+            }
             if (event.target.value) {
                 event.target.dataset.miclvalue = '1';
             }