material-inspired-component-library 3.0.2 → 4.0.0

package/foundations/form/index.ts

@@ -0,0 +1,174 @@
+//
+// 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 default (() =>
+{
+    const isCVElement = (element: Element): element is
+        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFieldSetElement =>
+        'willValidate' in element;
+
+    const setErrorStateCheckbox = (element: HTMLInputElement): boolean =>
+    {
+        element.classList.toggle('micl-checkbox--error', !!element.validationMessage);
+
+        return false;
+    };
+
+    const setErrorStateTextField = (textField: HTMLElement, message: string): boolean =>
+    {
+        textField.classList.toggle('micl-textfield--error', !!message);
+
+        const supporting = textField.querySelector(
+            '.micl-textfield__supporting-text'
+        ) as HTMLElement;
+
+        if (supporting) {
+            if (!message) {
+                if ('micltext' in supporting.dataset) {
+                    supporting.textContent = supporting.dataset.micltext || '';
+                }
+            }
+            else {
+                if (!supporting.dataset.micltext) {
+                    supporting.dataset.micltext = supporting.textContent;
+                }
+                supporting.textContent = message;
+            }
+        }
+
+        return !!message && !!supporting;
+    };
+
+    const setErrorState = (element: HTMLElement): boolean =>
+    {
+        if (
+            !element.parentElement
+            || !isCVElement(element)
+        ) {
+            return false;
+        }
+        let reported = false;
+
+        if (
+            element instanceof HTMLInputElement
+            && (element.type === 'checkbox')
+            && element.classList.contains('micl-checkbox')
+        ) {
+            reported = setErrorStateCheckbox(element);
+        }
+        else if (
+            element.parentElement.classList.contains('micl-textfield-outlined')
+            || element.parentElement.classList.contains('micl-textfield-filled')
+        ) {
+            reported = setErrorStateTextField(element.parentElement, element.validationMessage);
+        }
+
+        return reported;
+    };
+
+    const clearCustomValidity = (event: Event): void =>
+    {
+        const element = event.target as Element;
+        if (isCVElement(element)) {
+            element.setCustomValidity('');
+        }
+    };
+
+    const setCustomValidityFieldSet = (fieldset: HTMLFieldSetElement): void =>
+    {
+        const message = fieldset.dataset.miclvalidateMessage || '';
+        if (!message) {
+            return;
+        }
+
+        if (fieldset.matches('[data-miclvalidate-checkboxes-name]')) {
+            const name       = fieldset.dataset.miclvalidateCheckboxesName || '';
+            const countEqual = fieldset.dataset.miclvalidateCheckboxesCountEqual || '';
+            const countMax   = fieldset.dataset.miclvalidateCheckboxesCountMax || '';
+            const countMin   = fieldset.dataset.miclvalidateCheckboxesCountMin || '';
+
+            if (name && (countEqual || countMax || countMin)) {
+                const checkedCount = fieldset.querySelectorAll<HTMLInputElement>(
+                    `input[type="checkbox"][name="${name}"]:checked`
+                ).length;
+                const expectedCountEqual = parseInt(countEqual, 10);
+                const expectedCountMax   = parseInt(countMax, 10);
+                const expectedCountMin   = parseInt(countMin, 10);
+
+                let invalid = (!isNaN(expectedCountEqual) && (checkedCount != expectedCountEqual))
+                              || (!isNaN(expectedCountMax) && (checkedCount > expectedCountMax))
+                              || (!isNaN(expectedCountMin) && (checkedCount < expectedCountMin));
+
+                fieldset.setCustomValidity(invalid ? message : '');
+
+                const firstCheckbox = fieldset.querySelector<HTMLInputElement>(
+                    `input[type="checkbox"][name="${name}"]`
+                );
+                if (firstCheckbox) {
+                    firstCheckbox.setCustomValidity(invalid ? message : '');
+                    if (invalid) {
+                        firstCheckbox.addEventListener('change', clearCustomValidity);
+                    }
+                    else {
+                        firstCheckbox.removeEventListener('change', clearCustomValidity);
+                    }
+                }
+            }
+        }
+    };
+
+    const validity = (container: HTMLFormElement | HTMLFieldSetElement, doReport?: boolean): boolean =>
+    {
+        let invalid = false;
+
+        container.querySelectorAll<HTMLFieldSetElement>(
+            'fieldset'
+        ).forEach(setCustomValidityFieldSet);
+
+        Array.from(container.elements).forEach(element =>
+        {
+            if (isCVElement(element) && element.willValidate) {
+                if (!element.checkValidity()) {
+                    invalid = true;
+                }
+                let reported = setErrorState(element);
+                if (!reported && doReport) {
+                    element.reportValidity();
+                }
+            }
+        });
+
+        return !invalid;
+    };
+
+    return {
+        validateFieldSet: (fieldset: HTMLFieldSetElement, doReport?: boolean): boolean =>
+        {
+            setCustomValidityFieldSet(fieldset);
+            return validity(fieldset, doReport);
+        },
+
+        validateForm: (form: HTMLFormElement, doReport?: boolean): boolean =>
+        {
+            return validity(form, doReport);
+        }
+    };
+})();

package/{layout → foundations/layout}/README.md

@@ -31,6 +31,11 @@ Import the layout styles into your project:
 @use "material-inspired-component-library/dist/layout";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ## Layout Components Explained
 
 ### Window

package/{layout → foundations/layout}/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../styles/shapes';
+@use '../../styles/shapes';
 
 $md-sys-window-compact-max: 599px;
 $md-sys-window-medium-min: 600px;

package/micl.ts

@@ -21,6 +21,7 @@
 
 import _bottomsheet, { bottomsheetSelector } from './components/bottomsheet';
 import _button, { buttonSelector } from './components/button';
+import _checkboxgroup, { checkboxGroupSelector } from './components/checkbox';
 import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _navigationrail, { navigationrailSelector } from './components/navigationrail';
@@ -32,7 +33,6 @@ interface ComponentEntry<T extends HTMLElement> {
     component: {
         initialize?: (element: T) => void,
         input?     : (event: Event) => void,
-        invalid?   : (event: Event) => void,
         keydown?   : (event: Event) => void,
         cleanup?   : (element: T) => void
     };
@@ -45,6 +45,7 @@ export default (() =>
     const componentMap: Record<string, ComponentEntry<any>> = {
         [bottomsheetSelector]   : { component: _bottomsheet, type: HTMLDialogElement },
         [buttonSelector]        : { component: _button, type: HTMLButtonElement },
+        [checkboxGroupSelector] : { component: _checkboxgroup, type: HTMLElement },
         [listSelector]          : { component: _list, type: HTMLElement },
         [menuSelector]          : { component: _menu, type: HTMLElement },
         [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
@@ -118,7 +119,7 @@ export default (() =>
             if (
                 (event.target as Element).matches(selector)
                 && event.target instanceof type
-                && ['input', 'invalid', 'keydown'].includes(event.type)
+                && ['input', 'keydown'].includes(event.type)
                 && typeof component[event.type as ComponentKey] === 'function'
             ) {
                 component[event.type as ComponentKey]?.(event);
@@ -163,7 +164,6 @@ export default (() =>
         // Delegated Event Handlers
         document.addEventListener('input', handleEvent);
         document.addEventListener('keydown', handleEvent);
-        document.addEventListener('invalid', handleEvent, true);
     };
 
     const loaded = () =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "CSS",
     "HTML",
     "accordion",
+    "alert",
     "app bar",
     "badge",
     "bottomsheet",
@@ -31,6 +32,7 @@
     "select",
     "sidesheet",
     "slider",
+    "stepper",
     "switch",
     "textfield"
   ],

package/styles.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use 'layout';
+@use 'foundations/layout';
 
 @use 'styles/typography';
 @use 'styles/shapes';
@@ -28,6 +28,7 @@
 @use 'styles/statelayer';
 
 @use 'components/divider';
+@use 'components/alert';
 @use 'components/radio';
 @use 'components/checkbox';
 @use 'components/switch';

package/webpack.config.js

@@ -5,7 +5,7 @@ const miniCss = require('mini-css-extract-plugin');
 const distDir = path.resolve(__dirname, 'dist');
 const docsDir = path.resolve(__dirname, 'docs');
 
-const scssFiles = glob.sync('{./layout/*.scss,./components/**/*.scss}');
+const scssFiles = glob.sync('{./foundations/**/*.scss,./components/**/*.scss}');
 const scssEntries = scssFiles.reduce((entries, filePath) => {
     const componentName = path.dirname(filePath).split('\\').pop();
     entries[componentName] = './' + filePath;