@mgdis/mg-components 6.27.0 → 6.28.0

package/dist/collection/assets/jodit/jodit.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.13.22
+ * Version: v4.14.2
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { variants, sizes } from "./mg-button.conf";
-import { ClassList, isValidString, nextTick, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { Keys } from "../../../utils/events.utils";
 /**
@@ -95,6 +95,88 @@ export class MgButton {
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
             }
         };
+        /**
+         * Submit a native form the way a native submit button does
+         * @param form - the form to submit
+         */
+        this.dispatchSubmit = (form) => {
+            form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
+        };
+        /**
+         * Wrap a `mg-form` in the actions its public API offers, so nothing reaches into its shadow DOM
+         * @param mgForm - the owning mg-form
+         * @returns its submit and reset actions
+         */
+        this.mgFormActions = (mgForm) => ({
+            submit: () => mgForm.requestSubmit(),
+            reset: () => mgForm.reset(),
+        });
+        /**
+         * Wrap a native form in the same actions
+         * @param form - the owning form
+         * @returns its submit and reset actions
+         */
+        this.nativeFormActions = (form) => ({
+            submit: () => this.dispatchSubmit(form),
+            reset: () => form.reset(),
+        });
+        /**
+         * Resolve the form the `form` id points to. An id reference does not cross a shadow boundary, so
+         * it resolves in the tree the button belongs to — the document, or the shadow tree it sits in —
+         * the way a native form owner does. The ancestor wins when it is the one pointed at: two forms
+         * can share an identifier, and a tree-wide lookup would retain the first one.
+         * @returns the actions of the form holding that id, or null when none does
+         */
+        this.resolveOwnerById = () => {
+            const ancestorMgForm = this.element.closest('mg-form');
+            if (ancestorMgForm !== null && ancestorMgForm.identifier === this.form)
+                return this.mgFormActions(ancestorMgForm);
+            const root = this.element.getRootNode();
+            const tree = root instanceof ShadowRoot ? root : this.element.ownerDocument;
+            const mgForm = Array.from(tree.querySelectorAll('mg-form')).find((element) => element.identifier === this.form);
+            if (mgForm !== undefined)
+                return this.mgFormActions(mgForm);
+            // Resolved by id, as a native form owner is, rather than through a selector an id could break
+            const nativeForm = tree.getElementById(this.form);
+            return nativeForm instanceof HTMLFormElement ? this.nativeFormActions(nativeForm) : null;
+        };
+        /**
+         * Resolve the form owning this button: an explicit `form` id overrides the ancestor form, and an
+         * id matching nothing logs then falls back on it, so a button never loses an association it had.
+         * @returns the owning form actions, or null when the button has no form owner
+         */
+        this.resolveFormOwner = () => {
+            if (isValidString(this.form)) {
+                const ownerById = this.resolveOwnerById();
+                if (ownerById !== null)
+                    return ownerById;
+                console.error(`<mg-button> prop "form" matches no form in the button tree. Passed value: ${toString(this.form)}.`);
+            }
+            const nativeAncestor = this.element.closest('form');
+            if (nativeAncestor !== null)
+                return this.nativeFormActions(nativeAncestor);
+            const mgAncestor = this.element.closest('mg-form');
+            return mgAncestor === null ? null : this.mgFormActions(mgAncestor);
+        };
+        /**
+         * Act on the owning form. The owner is resolved here rather than on load because a native form
+         * owner is re-resolved on every submission, never captured once: the button follows a `form`
+         * changed after render, and no longer races the target form hydration.
+         */
+        this.handleFormClick = () => {
+            const isSubmit = ['submit', undefined].includes(this.type);
+            // A reset only fires from an explicit association: it has never reset a merely ancestor form
+            const isReset = this.type === 'reset' && isValidString(this.form);
+            if (!isSubmit && !isReset)
+                return;
+            const owner = this.resolveFormOwner();
+            if (owner === null)
+                return;
+            if (isSubmit)
+                owner.submit();
+            else
+                owner.reset();
+        };
     }
     validateVariant(newValue, oldValue) {
         // validate new value
@@ -193,16 +275,7 @@ export class MgButton {
      * Add listners
      */
     componentDidLoad() {
-        nextTick(() => {
-            var _a;
-            const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
-            // submit buttons should trigger form submition;
-            if (closestForm && ['submit', undefined].includes(this.type)) {
-                this.element.addEventListener('click', () => {
-                    closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
-                });
-            }
-        });
+        this.element.addEventListener('click', this.handleFormClick);
     }
     /**
      * Render component
@@ -210,7 +283,7 @@ export class MgButton {
      */
     render() {
         var _a;
-        return (h(Host, { key: '9efa9dbbcdb2965cb8fd301c86988d0b0d97b474', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '36918b5b208a9e0a9650107f4418cac35ade1ed2', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '8ad3e911d273f69441f2a405f8040cc685a0a486', icon: "loader", spin: true }), h("div", { key: 'a6b199c669ef6b15bfc345c98192290ce11e65cb', class: "mg-c-button__content" }, h("slot", { key: 'b13d317001dbf66c945cdf9e97c06338ce073c12' })))));
+        return (h(Host, { key: '815bedd3729c652a5faf06c3d451cbc67123ab63', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '2a1c20c677294870958f01c4042e8f530bf0f89d', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'db3960249deed458f86bcba16b66bbeb9aac69c1', icon: "loader", spin: true }), h("div", { key: '76a3af6c9a105b91b7f6055cc19bbb6f315be1a5', class: "mg-c-button__content" }, h("slot", { key: 'ca87921b6c58fbd055a83ea28f5ce58a618f16fe' })))));
     }
     static get is() { return "mg-button"; }
     static get encapsulation() { return "shadow"; }
@@ -357,7 +430,7 @@ export class MgButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element."
+                    "text": "Id of the form to associate the button with, following the native `form` attribute semantics:\nit must match the `identifier` of a `mg-form`, or the `id` of a `<form>`, in the same document,\nand it overrides the ancestor form.\nIf this attribute is not set, the button is associated with its ancestor form."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -21,6 +21,8 @@ export class MgInputCheckbox {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         this.mode = 'custom';
         // style
@@ -303,6 +305,7 @@ export class MgInputCheckbox {
         this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
     }
     validateValue(newValue) {
+        this.validityCheckPending = true;
         if (isCheckboxItems(newValue)) {
             this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
             this.valueChange.emit(newValue);
@@ -435,6 +438,8 @@ export class MgInputCheckbox {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -517,8 +522,26 @@ export class MgInputCheckbox {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.checkboxItems.length > 0) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * add listeners and DOM attributed
      */
@@ -603,7 +626,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: 'e243244fb902cf960d112502e4627a787212db31', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: 'e873b2c1a5e96f5f424f21e3531c6c63c1d9ff39', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js

@@ -48,6 +48,8 @@ export class MgInputCombobox {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` or `items` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -521,10 +523,11 @@ export class MgInputCombobox {
         };
     }
     watchValue(newValue) {
+        this.validityCheckPending = true;
         this.filter = this.getValueTitle();
         this.valueChange.emit(newValue);
     }
-    watchItems(newValue) {
+    watchItems(newValue, oldValue) {
         if (this.fetchurl !== undefined && newValue === undefined) {
             // skip newValue check
             return;
@@ -547,6 +550,17 @@ export class MgInputCombobox {
         else {
             throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);
         }
+        // `oldValue` is undefined on init
+        if (oldValue !== undefined) {
+            // the input displays the value's own title, so an unoffered value cannot stay. An empty list is a
+            // reload in progress rather than an answer: the value is kept, as `mg-input-select` keeps its own.
+            if (this.value !== undefined &&
+                this.options.items.length > 0 &&
+                !this.options.items.some((option) => this.isCurrentOption(option))) {
+                this.value = undefined;
+            }
+            this.validityCheckPending = true;
+        }
     }
     watchIdentifier(newValue) {
         if (isValidString(newValue)) {
@@ -676,6 +690,8 @@ export class MgInputCombobox {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -765,8 +781,26 @@ export class MgInputCombobox {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
@@ -796,7 +830,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: '047c14310f70117e1aec89161d2261f175487be7', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: this.popoverPlacement, display: this.popoverDisplay, style: {
+        return (h("mg-input", { key: '20006f3066f661cd9cf8ec25b4090221d3925b04', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: this.popoverPlacement, display: this.popoverDisplay, style: {
                 '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js

@@ -9,6 +9,8 @@ export class MgInputDate {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -80,10 +82,6 @@ export class MgInputDate {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -105,11 +103,8 @@ export class MgInputDate {
             // when we reset the field we need to test a blank value.
             if (['Delete', 'Backspace'].includes(event.key)) {
                 event.preventDefault();
+                // validity is recomputed in componentDidUpdate, once the input actually holds the blank value
                 this.value = null;
-                this.checkValidity();
-                if (this.hasDisplayedError) {
-                    this.setErrorMessage();
-                }
             }
         };
         /**
@@ -196,6 +191,7 @@ export class MgInputDate {
         };
     }
     validateValue(newValue) {
+        this.validityCheckPending = true;
         // When the input is not fully completed or has been cleared, the value becomes an empty string.
         if (['', undefined].includes(newValue)) {
             // need to force value update to `null` to prevent extra render
@@ -288,6 +284,8 @@ export class MgInputDate {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -358,14 +356,32 @@ export class MgInputDate {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'c13dd54974bd7c8381bcefbe847fe79f2270506c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '3d3f6910dde9c32bbf3d0c853e0c778380ed40fc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));

package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js

@@ -12,6 +12,8 @@ export class MgInputFile {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -172,6 +174,7 @@ export class MgInputFile {
         };
     }
     watchValue(newValue) {
+        this.validityCheckPending = true;
         if (allItemsAreString(newValue)) {
             this.files = this.value.map((fileName) => new File([], fileName));
         }
@@ -277,6 +280,8 @@ export class MgInputFile {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -328,16 +333,34 @@ export class MgInputFile {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.inputElement !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '3c4c0ebdd1661e381f0002b2ae68dcf454097913', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'bd7665fe8c6e01ec4e04fbbbf9cc21ccc4128b17', class: "mg-c-input__file-container" }, h("input", { key: 'f27d10160115ec1ff5163a1c55aa2658779c6fd7', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
+        return (h("mg-input", { key: 'f1613e1105c1eea0c08624ffc270a74889d85ce0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '23897ae896de9569ea68bf88e26f1349eb5bc909', class: "mg-c-input__file-container" }, h("input", { key: '0601a8af1c3f17331cb671184353b8b63a5f4fa8', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
                 this.inputElement = el;
-            } }), h("mg-button", { key: 'd16c4cbd95d676bcddb895659aab37f0f9c396eb', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
+            } }), h("mg-button", { key: '5ac1076a443cc1a0bb2d7168b1d248d31faeedfd', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
                 this.fileButtonElement = el;
             } }, this.messages.input.file.browse), this.renderFiles())));
     }

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -12,6 +12,8 @@ export class MgInputNumeric {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -78,11 +80,6 @@ export class MgInputNumeric {
          */
         this.handleInput = () => {
             this.value = this.input.value;
-            // Check validity
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
         };
         /**
          * Handle focus event
@@ -232,6 +229,7 @@ export class MgInputNumeric {
     }
     validateValue(newValue) {
         var _a;
+        this.validityCheckPending = true;
         // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
         if (typeof newValue === 'string') {
             // Check if integer value starts with '0' (leading zero)
@@ -352,6 +350,8 @@ export class MgInputNumeric {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -464,14 +464,32 @@ export class MgInputNumeric {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'dbf435211890922742cbead9ab3a738b5219df44', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '8a9a2c269754aa1259e79dd5e68cc0ed6b578fd1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -8,6 +8,8 @@ export class MgInputPassword {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         /**
          * Input name
          * If not set the value equals the identifier
@@ -53,10 +55,6 @@ export class MgInputPassword {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -101,6 +99,7 @@ export class MgInputPassword {
         };
     }
     handleValue(newValue) {
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
     watchReadonly(newValue) {
@@ -181,6 +180,8 @@ export class MgInputPassword {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -243,15 +244,33 @@ export class MgInputPassword {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
         const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
-        return (h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '2d9498c380536dc32177d1ac16a513ee43944a72', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));