@mgdis/mg-components 6.26.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.10
+ * Version: v4.14.2
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */
@@ -3841,6 +3841,19 @@ a + .jodit-file-browser-tree__source-title {
 .jodit-color-picker__color-item:active {
   border: 2px solid var(--jd-color-border-selected);
 }
+.jodit-color-picker__extra {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.jodit-color-picker__hex input {
+  width: 80px;
+  padding: 2px 4px;
+  border: 1px solid var(--jd-color-border);
+  border-radius: var(--jd-border-radius-default);
+  font-family: monospace;
+  font-size: var(--jd-font-size-small, 12px);
+}
 .jodit-color-picker__native svg {
   display: inline-block;
   width: 16px;

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/atoms/mg-tooltip/mg-tooltip.js

@@ -30,6 +30,13 @@ export class MgTooltip {
          * Disable tooltip
          */
         this.disabled = false;
+        /**
+         * Toggle the popper scroll and resize listeners, only needed while the tooltip is visible
+         * @param enabled - listeners state to apply
+         */
+        this.setPopperEventListeners = (enabled) => {
+            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled }] })));
+        };
         /**
          * Show tooltip
          */
@@ -37,7 +44,7 @@ export class MgTooltip {
             // Make the tooltip visible
             this.mgTooltipContent.dataset.show = '';
             // Enable the event listeners
-            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+            this.setPopperEventListeners(true);
             // hide when click outside on nextTick to prevent event to trigger after creation
             nextTick(() => {
                 this.windows.forEach((localWindow) => {
@@ -53,7 +60,7 @@ export class MgTooltip {
             // Hide the tooltip
             this.mgTooltipContent.removeAttribute('data-show');
             // Disable the event listeners
-            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+            this.setPopperEventListeners(false);
             // Remove event listener
             this.windows.forEach((localWindow) => {
                 localWindow.removeEventListener('click', this.handleClickOutside, false);
@@ -117,6 +124,47 @@ export class MgTooltip {
         this.resetGuard = () => {
             this.guard = undefined;
         };
+        /**
+         * Display tooltip when the tooltiped element takes focus
+         */
+        this.handleTooltipedElementFocus = () => {
+            this.guard = Guard.FOCUS;
+            this.setDisplay(true);
+        };
+        /**
+         * Hide tooltip when the tooltiped element loses focus
+         */
+        this.handleTooltipedElementBlur = () => {
+            this.resetGuard();
+            this.setDisplay(false);
+        };
+        /**
+         * Display tooltip when the tooltiped element is hovered
+         */
+        this.handleTooltipedElementMouseenter = () => {
+            this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
+        };
+        /**
+         * Hide tooltip when the tooltiped element is not hovered anymore
+         */
+        this.handleTooltipedElementMouseleave = () => {
+            this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
+        };
+        /**
+         * Manage all tooltiped element listeners
+         * @param element - element to bind or unbind
+         * @param action - process to apply on element listeners
+         */
+        this.manageTooltipedElementListeners = (element, action) => {
+            element[action]('focus', this.handleTooltipedElementFocus);
+            // as `click` event is the composition of `mousedown` and `mouseup` event,
+            // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
+            // we reset the guard on `mouseup` event to unlock tooltip
+            element[action]('mouseup', this.resetGuard);
+            element[action]('blur', this.handleTooltipedElementBlur);
+            element[action]('mouseenter', this.handleTooltipedElementMouseenter);
+            element[action]('mouseleave', this.handleTooltipedElementMouseleave);
+        };
         /**
          * Update slot content when it is a mg-button
          * @param mgButton - slotted mg-button
@@ -143,10 +191,11 @@ export class MgTooltip {
             }
         };
         /**
-         * Set popper instance
-         * @param strategy - popper strategy to apply on instance
+         * Set popper instance on the current tooltiped element
          */
-        this.setPopper = (strategy) => {
+        this.setPopper = () => {
+            // mg-popover content is already `fixed`: position a nested tooltip relatively to it
+            const strategy = this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed';
             // Create popperjs tooltip
             this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
                 placement: this.placement,
@@ -172,29 +221,20 @@ export class MgTooltip {
          * @param element - tooltiped element
          */
         this.setTooltipedElement = (element) => {
+            // unbind the previous element so its listeners do not stack up on every `disabled` toggle
+            if (this.tooltipedElement !== undefined) {
+                this.manageTooltipedElementListeners(this.tooltipedElement, 'removeEventListener');
+            }
             this.tooltipedElement = element;
-            // Manage tooltipedElement focus events
-            this.tooltipedElement.addEventListener('focus', () => {
-                this.guard = Guard.FOCUS;
-                this.setDisplay(true);
-            });
-            // as `click` event is the composition of `mousedown` and `mouseup` event,
-            // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
-            // we reset the guard on `mouseup` event to unlock tooltip
-            this.tooltipedElement.addEventListener('mouseup', () => {
-                this.resetGuard();
-            });
-            this.tooltipedElement.addEventListener('blur', () => {
-                this.resetGuard();
-                this.setDisplay(false);
-            });
-            // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-            this.tooltipedElement.addEventListener('mouseenter', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
-            });
-            this.tooltipedElement.addEventListener('mouseleave', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
-            });
+            this.manageTooltipedElementListeners(this.tooltipedElement, 'addEventListener');
+            // popper freezes its reference element, so re-create it to follow the new one.
+            // The initial instance comes from `componentDidLoad`.
+            if (this.popper !== undefined) {
+                this.popper.destroy();
+                this.setPopper();
+                // a fresh instance has its listeners enabled, realign them
+                this.setPopperEventListeners(this.display);
+            }
         };
         /**
          * Set button mutation observer
@@ -222,17 +262,36 @@ export class MgTooltip {
             }).observe(mgButton, { attributes: true });
         };
         /**
-         * Set tooltiped element aria-describedby
-         * @param element - element to update
+         * Reconcile the tooltiped element a11y: the tooltip is restituted — `aria-describedby` exposed, and a
+         * non-interactive element made focusable (`tabindex` + `role`) — unless it is disabled and not displayed.
+         * Pre-existing `aria-describedby` ids are preserved.
          */
-        this.setAriaDescribedby = (element) => {
-            // Set aria-describedby
-            if (!element.hasAttribute('aria-describedby')) {
-                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
+        this.updateTooltipedElementA11y = () => {
+            const restitute = !this.disabled || this.display;
+            const currentValue = this.tooltipedElement.getAttribute('aria-describedby');
+            const ids = new Set(currentValue !== null ? currentValue.split(' ') : []);
+            if (restitute) {
+                ids.add(this.identifier);
+            }
+            else {
+                ids.delete(this.identifier);
+            }
+            if (ids.size > 0) {
+                this.tooltipedElement.setAttribute('aria-describedby', [...ids].join(' '));
             }
             else {
-                // We ensure to have uniq ids
-                element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
+                this.tooltipedElement.removeAttribute('aria-describedby');
+            }
+            if (this.hasCustomTabIndex) {
+                if (restitute) {
+                    this.tooltipedElement.setAttribute('role', 'button');
+                    if (!this.tooltipedElement.hasAttribute('tabindex'))
+                        this.tooltipedElement.setAttribute('tabindex', '0');
+                }
+                else {
+                    this.tooltipedElement.removeAttribute('role');
+                    this.tooltipedElement.removeAttribute('tabindex');
+                }
             }
         };
     }
@@ -257,14 +316,11 @@ export class MgTooltip {
         else {
             this.hide();
         }
+        this.updateTooltipedElementA11y();
     }
-    watchDisabled(newValue) {
-        if (this.hasCustomTabIndex) {
-            if (newValue)
-                this.tooltipedElement.removeAttribute('tabindex');
-            else if (!this.tooltipedElement.hasAttribute('tabindex'))
-                this.tooltipedElement.setAttribute('tabindex', '0');
-        }
+    watchDisabled() {
+        // Only fires on runtime changes; the initial reconcile is done in componentDidLoad via watchDisplay.
+        this.updateTooltipedElementA11y();
     }
     /**
      * Render tooltip content element and init listeners
@@ -304,7 +360,6 @@ export class MgTooltip {
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
-        this.watchDisabled(this.disabled);
         this.watchMessage(this.message);
         this.watchIdentifier(this.identifier);
     }
@@ -333,20 +388,13 @@ export class MgTooltip {
         if (this.element.querySelector('mg-button[full-width]') !== null) {
             this.element.classList.add('mg-c-tooltip--full-width');
         }
-        // Add tabindex to slotted element if we can't find any interactive element
-        if (!this.disabled && [undefined, null].includes(interactiveElement)) {
-            this.hasCustomTabIndex = true;
-            slotElement.tabIndex = 0;
-            // Add role on non-interactive element to work with "aria-describedby" for screen readers
-            slotElement.setAttribute('role', 'button');
-        }
-        // apply a11y aria
-        this.setAriaDescribedby(slotElement);
+        // Non-interactive slotted element (no focusable element found): needs synthesized focus to be reachable.
+        this.hasCustomTabIndex = [undefined, null].includes(interactiveElement);
         // set Tooltip
-        this.setPopper(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
+        this.setPopper();
         // add document keyboard handler
         document.addEventListener('keydown', this.handlePressEscape);
-        // check props
+        // check props (also does the initial a11y reconcile)
         this.watchDisplay(this.display);
     }
     /**
@@ -371,7 +419,7 @@ export class MgTooltip {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '5cd926147c1b6723065c5334699764f32a8a06c9' }, h("slot", { key: 'a1b208798c79e34a207f3bedb2ad9662e02e83e2' }), h("slot", { key: '4f332961968fd3541caf47c2fd9072720fa2ee71', name: "content" })));
+        return (h(Host, { key: '1e9cfc59c335510c21d159253e3f8e1b4256a465' }, h("slot", { key: 'c52d57e3302d4865a2365ac62c931af2948bdf03' }), h("slot", { key: '527b5d8ae562ed1f5faed74356f10be5aca10ac4', name: "content" })));
     }
     static get is() { return "mg-tooltip"; }
     static get encapsulation() { return "shadow"; }

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
@@ -295,9 +297,7 @@ export class MgInputCheckbox {
          * Renders the readonly value of the input.
          * @returns The rendered readonly value.
          */
-        this.renderReadonly = (readonlyValue) => {
-            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map((value) => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
-        };
+        this.renderReadonly = (readonlyValue) => (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
         /**
          * Renders the MgInputCheckboxList component.
          * @returns The rendered MgInputCheckboxList component.
@@ -305,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);
@@ -437,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;
@@ -519,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
      */
@@ -605,7 +626,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '8e403fd79ca8a9bb2db5545e946a3763eb156551', 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
@@ -352,11 +354,29 @@ export class MgInputCombobox {
                 }
             }
         };
+        /**
+         * Check if an option matches the current filter
+         * @param option - option to match
+         * @returns true if the option matches the filter
+         */
+        this.matchFilter = (option) => this.filter === '' || option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase());
+        /**
+         * Get all the options matching the current filter
+         * @returns filtered options
+         */
+        this.getFilteredOptions = () => this.options.items.filter(this.matchFilter);
         /**
          * Get first page with filter applied
          * @returns first page with filter applied
          */
-        this.getFirstPage = () => this.options.getPage(0, (option) => this.filter === '' || option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));
+        this.getFirstPage = () => {
+            const page = this.options.getPage(0, this.matchFilter);
+            // `Paginate` keeps the unfiltered total: realign it with the filtered options, except in
+            // `fetchurl` mode where the total counts the options left to load
+            if (this.fetchurl === undefined)
+                page.total = this.getFilteredOptions().length;
+            return page;
+        };
         /**
          * Loading wrapper with a given action
          * @param action - wrapped loading action
@@ -400,9 +420,7 @@ export class MgInputCombobox {
             return promise()
                 .then(() => {
                 // parse full items list from options
-                const options = this.filter === ''
-                    ? this.options.items
-                    : this.options.items.filter((option) => option.title.includes(this.filter));
+                const options = this.getFilteredOptions();
                 // update visual focus
                 if (action.name !== 'load-data') {
                     index = this.page.getIndexFromCursor(action.cursor, this.loadingAction === 'load-more' && index >= 0 ? options[index] : this.option);
@@ -439,7 +457,9 @@ export class MgInputCombobox {
                 return nextTick(() => {
                     if (typeof this.page.next === 'function') {
                         const nextPage = this.page.next();
-                        this.page = new Page(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items] }));
+                        this.page = new Page(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items],
+                            // `Paginate` keeps the unfiltered total, realign it as in `getFirstPage`
+                            total: this.getFilteredOptions().length }));
                     }
                 });
             }
@@ -503,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;
@@ -529,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)) {
@@ -658,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;
@@ -747,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
@@ -778,7 +830,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'c8cff9468c9bfdcc6dd5c96c1452ad81620e050c', 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)