material-inspired-component-library 8.1.0 → 9.0.0

package/components/snackbar/index.ts

@@ -1,118 +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 snackbarSelector = '.micl-snackbar';
-
-interface SnackbarState {
-    timeoutid?: number;
-    delay: number;
-    boundHandleToggle: (event: Event) => void;
-    boundClearTimer: () => void;
-    boundHandleMouseLeave: () => void;
-}
-
-const snackbarStates = new WeakMap<HTMLElement, SnackbarState>();
-
-const clearTimer = (element: HTMLElement): void =>
-{
-    const state = snackbarStates.get(element);
-    if (state && state.timeoutid) {
-        clearTimeout(state.timeoutid);
-        state.timeoutid = undefined;
-    }
-};
-
-const startTimer = (element: HTMLElement): void =>
-{
-    clearTimer(element);
-    const state = snackbarStates.get(element);
-    if (!state) return;
-
-    state.timeoutid = window.setTimeout(() => {
-        if (element.isConnected && element.matches(':popover-open')) {
-            element.hidePopover();
-        }
-    }, state.delay);
-};
-
-export default
-{
-    initialize: (element: HTMLElement): void =>
-    {
-        if (!element.matches(snackbarSelector) || element.dataset.miclinitialized) {
-            return;
-        }
-
-        const delayAttr = element.dataset.micldelay;
-        const delay = delayAttr ? parseInt(delayAttr, 10) : 0;
-
-        if (isNaN(delay) || delay <= 0) return;
-
-        element.dataset.miclinitialized = '1';
-
-        // Create bound handlers specifically for THIS snackbar.
-        const boundClearTimer = () => clearTimer(element);
-
-        const boundHandleToggle = (event: Event): void =>
-        {
-            const toggleEvent = event as ToggleEvent;
-            if (toggleEvent.newState === 'open') {
-                startTimer(element);
-            }
-            else {
-                clearTimer(element);
-            }
-        };
-
-        const boundHandleMouseLeave = (): void =>
-        {
-            if (element.matches(':popover-open')) {
-                startTimer(element);
-            }
-        };
-
-        // Save these references in the WeakMap.
-        snackbarStates.set(element, {
-            delay,
-            boundHandleToggle,
-            boundClearTimer,
-            boundHandleMouseLeave
-        });
-
-        element.addEventListener('toggle', boundHandleToggle);
-        element.addEventListener('mouseenter', boundClearTimer);
-        element.addEventListener('mouseleave', boundHandleMouseLeave);
-    },
-
-    cleanup: (element: HTMLElement): void =>
-    {
-        const state = snackbarStates.get(element);
-
-        if (state) {
-            clearTimer(element);
-            element.removeEventListener('toggle', state.boundHandleToggle);
-            element.removeEventListener('mouseenter', state.boundClearTimer);
-            element.removeEventListener('mouseleave', state.boundHandleMouseLeave);
-            snackbarStates.delete(element);
-        }
-        delete element.dataset.miclinitialized;
-    }
-};

package/components/stepper/index.ts

@@ -1,248 +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.
-
-import form from '../../foundations/form';
-
-export const stepperSelector = '.micl-stepper';
-
-const ACTIONS_SELECTOR = '.micl-stepper__action-back,.micl-stepper__action-next';
-const BUTTON_SELECTOR  = '.micl-stepper__header button[role=tab][aria-controls]';
-const STEP_CLASS       = 'micl-stepper__step';
-const STEP_SELECTOR    = '.' + STEP_CLASS;
-
-export default (() =>
-{
-    const getSelectedStep = (stepper: HTMLElement): HTMLElement | null =>
-    {
-        let step = stepper.querySelector(`${STEP_SELECTOR}[aria-current=step]`);
-        if (step) {
-            return step as HTMLElement;
-        }
-        return setSelectedStep(stepper, stepper.querySelector(STEP_SELECTOR));
-    };
-
-    const getStepNumber = (stepper: HTMLElement, step: HTMLElement): number =>
-    {
-        const allSteps = Array.from(stepper.querySelectorAll(STEP_SELECTOR));
-        const index    = allSteps.indexOf(step);
-
-        return index + 1;
-    };
-
-    const setSelectedStep = (stepper: HTMLElement, step: HTMLElement | null): HTMLElement | null =>
-    {
-        if (!step) {
-            return null;
-        }
-        let index = 0;
-        stepper.querySelectorAll(STEP_SELECTOR).forEach((e, i) =>
-        {
-            e.setAttribute('aria-current', e === step ? 'step' : 'false');
-            if (e === step) {
-                index = i;
-            }
-        });
-        const button = stepper.querySelectorAll(BUTTON_SELECTOR).item(index);
-        stepper.querySelectorAll(BUTTON_SELECTOR).forEach(e =>
-        {
-            e.setAttribute('aria-selected', e === button ? 'true' : 'false');
-        });
-        refresh(stepper, step);
-
-        return step;
-    };
-
-    const endTransitionSelected = (event: Event): void =>
-    {
-        const target = event.currentTarget as Element;
-        if ((event as TransitionEvent).propertyName !== 'transform' || !target) {
-            return;
-        }
-        target.classList.remove(
-            'micl-stepper__step--fromselected',
-            'micl-stepper__step--toselected'
-        );
-        target.removeEventListener('transitionend', endTransitionSelected);
-    };
-
-    const goToSibling = (stepper: HTMLElement, selectedStep: HTMLElement, sibling: HTMLElement): void =>
-    {
-        selectedStep.addEventListener('transitionend', endTransitionSelected);
-        selectedStep.classList.add('micl-stepper__step--fromselected');
-        selectedStep.offsetHeight;
-
-        sibling.addEventListener('transitionend', endTransitionSelected);
-        sibling.classList.add('micl-stepper__step--toselected');
-        sibling.offsetHeight;
-
-        setSelectedStep(stepper, sibling);
-    };
-
-    const isBackAction = (action: HTMLElement): boolean =>
-          action.classList.contains('micl-stepper__action-back');
-
-    const showHideActions = (stepper: HTMLElement, step: HTMLElement): void =>
-    {
-        Array.from(stepper.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR)).forEach(action =>
-        {
-            const siblingKey = isBackAction(action) ? 'previousElementSibling' : 'nextElementSibling';
-            const hasSibling = (step[siblingKey] as Element)?.classList.contains(STEP_CLASS);
-
-            action.classList.toggle('micl-hidden', !hasSibling);
-        });
-    };
-
-    const showHideElements = (stepper: HTMLElement, step: HTMLElement): void =>
-    {
-        const nrsteps      = stepper.querySelectorAll(STEP_SELECTOR).length;
-        const selectedStep = getStepNumber(stepper, step);
-
-        stepper.querySelectorAll<HTMLElement>('[data-step]').forEach(element =>
-        {
-            const stepnr = parseInt(element.dataset.step || '0', 10);
-            element.classList.toggle(
-                'micl-hidden',
-                stepnr > 0 ? stepnr != selectedStep : nrsteps + stepnr + 1 != selectedStep
-            );
-        });
-    };
-
-    const updateProgress = (stepper: HTMLElement, step: HTMLElement): void =>
-    {
-        const index      = getStepNumber(stepper, step);
-        const totalSteps = stepper.querySelectorAll(STEP_SELECTOR).length;
-        const linear     = !stepper.classList.contains('micl-stepper--nonlinear');
-        const setText    = (selector: string, content: string): void => {
-            stepper.querySelectorAll(selector).forEach(e => { e.textContent = content; });
-        };
-
-        setText('.micl-stepper__progress-current', `${index}`);
-        setText('.micl-stepper__progress-total', `${totalSteps}`);
-
-        stepper.querySelectorAll('.micl-stepper__progress-dots').forEach(dots =>
-        {
-            const fragment = document.createDocumentFragment();
-
-            dots.innerHTML = '';
-            for (let i = 1; i <= totalSteps; i++) {
-                let dot = document.createElement('span');
-                dot.classList.add('micl-stepper__progress-dot');
-                if ((linear && (i <= index)) || (!linear && (i === index))) {
-                    dot.classList.add('micl-stepper__progress--done');
-                }
-                fragment.appendChild(dot);
-            }
-            dots.appendChild(fragment);
-        });
-        stepper.querySelectorAll(BUTTON_SELECTOR).forEach((button, i) =>
-        {
-            button.classList.toggle(
-                'micl-stepper__progress--done',
-                linear ? i + 1 <= index : i + 1 === index
-            );
-        });
-    };
-
-    const refresh = (stepper: HTMLElement, step: HTMLElement): void =>
-    {
-        showHideActions(stepper, step);
-        showHideElements(stepper, step);
-        updateProgress(stepper, step);
-    };
-
-    return {
-        initialize: (stepper: HTMLElement): void =>
-        {
-            if (!stepper.matches(stepperSelector) || stepper.dataset.miclinitialized) {
-                return;
-            }
-            stepper.dataset.miclinitialized = '1';
-
-            const step   = getSelectedStep(stepper);
-            const header = stepper.querySelector('.micl-stepper__header');
-
-            if (step) {
-                refresh(stepper, step);
-
-                header?.querySelectorAll<HTMLButtonElement>(
-                    'button[role=tab][aria-controls]'
-                ).forEach(button =>
-                {
-                    button.addEventListener('click', () =>
-                    {
-                        if (
-                            ('ariaControlsElements' in Element.prototype)
-                            && button.ariaControlsElements
-                        ) {
-                            setSelectedStep(stepper, button.ariaControlsElements[0] as HTMLElement);
-                        }
-                        else {
-                            const id = button.getAttribute('aria-controls');
-                            if (id) {
-                                setSelectedStep(stepper, document.getElementById(id));
-                            }
-                        }
-                    });
-                });
-            }
-
-            Array.from(stepper.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR)).forEach(action =>
-            {
-                action.addEventListener('click', function(event: Event)
-                {
-                    const back         = isBackAction(this);
-                    const selectedStep = getSelectedStep(stepper);
-
-                    if (
-                        !selectedStep
-                        || (!back
-                            && selectedStep instanceof HTMLFieldSetElement
-                            && !form.validateFieldSet(selectedStep, true))
-                    ) {
-                        if (!back) {
-                            event.stopImmediatePropagation();
-                        }
-                        return;
-                    }
-                    const sibling = selectedStep[
-                        back ? 'previousElementSibling' : 'nextElementSibling'
-                    ] as HTMLElement;
-
-                    if (sibling?.classList.contains(STEP_CLASS)) {
-                        goToSibling(stepper, selectedStep, sibling);
-                    }
-                }, true);
-            });
-
-            if (stepper instanceof HTMLFormElement) {
-                stepper.addEventListener('submit', (event: SubmitEvent) =>
-                {
-                    if (!event.submitter?.classList.contains('micl-form--dosubmit')) {
-                        event.preventDefault();
-                    }
-                    if (!form.validateForm(stepper, true)) {
-                        event.stopImmediatePropagation();
-                    }
-                }, true);
-            }
-        }
-    };
-})();

package/components/textfield/index.ts

@@ -1,188 +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 textfieldSelector = '.micl-textfield-outlined > input,.micl-textfield-filled > input';
-export const textareaSelector  = '.micl-textfield-outlined > textarea,.micl-textfield-filled > textarea';
-export const selectSelector = '.micl-textfield-filled > select,.micl-textfield-outlined > select';
-
-export default (() =>
-{
-    const isTextFieldElement = (target: EventTarget | null): target is
-        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
-        (target as Element).matches(`${textfieldSelector},${selectSelector},${textareaSelector}`);
-
-    const setCounter = (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
-    {
-        if (
-            !input.parentElement
-            || input instanceof HTMLSelectElement
-            || !input.maxLength
-        ) {
-            return;
-        }
-        const counter = input.parentElement.querySelector('.micl-textfield__character-counter');
-        if (counter) {
-            counter.textContent = `${input.value.length}/${input.maxLength}`;
-        }
-    };
-
-    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);
-            }
-        }
-    };
-
-    const refreshTextField = (event: Event): void =>
-    {
-        if (
-            !isTextFieldElement(event.target)
-            || !event.target.dataset.miclinitialized
-            || event.target.disabled
-        ) {
-            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';
-        }
-        else {
-            delete event.target.dataset.miclvalue;
-        }
-
-        setCounter(event.target);
-    };
-
-    return {
-        initialize: (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
-        {
-            if (input.dataset.miclinitialized) {
-                return;
-            }
-            input.dataset.miclinitialized = '1';
-
-            if (input.value) {
-                input.dataset.miclvalue = '1';
-            }
-
-            if (input instanceof HTMLSelectElement) {
-                input.addEventListener('mousedown', () =>
-                {
-                    const rect       = input.getBoundingClientRect();
-                    const spaceAbove = rect.top;
-                    const spaceBelow = window.innerHeight - rect.bottom;
-
-                    !input.matches(':open') && input.style.setProperty(
-                        '--md-comp-select-picker-origin',
-                        spaceAbove > spaceBelow ? 'left bottom' : 'left top'
-                    );
-                });
-            }
-
-            if (input.matches('input[type=time][data-timepicker],input[type=date][data-datepicker]')) {
-                const picker = !input.dataset.timepicker ? (!input.dataset.datepicker ? null :
-                               document.getElementById(input.dataset.datepicker)) :
-                               document.getElementById(input.dataset.timepicker);
-                if (picker instanceof HTMLDialogElement) {
-                    input.addEventListener('click', (event: Event) =>
-                    {
-                        event.preventDefault();
-                        picker.showModal();
-                    });
-                    input.addEventListener('keydown', (event: Event) =>
-                    {
-                        if (!(event instanceof KeyboardEvent)) {
-                            return;
-                        }
-                        switch (event.key) {
-                            case 'Enter':
-                            case ' ':
-                                event.preventDefault();
-                                picker.showModal();
-                                break;
-                            default:
-                        }
-                    });
-                }
-            }
-
-            setCounter(input);
-        },
-
-        change: (event: Event): void =>
-        {
-            refreshTextField(event);
-        },
-        input: (event: Event): void =>
-        {
-            refreshTextField(event);
-        }
-    };
-})();