@mgdis/mg-components 6.26.0 → 6.27.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.13.22
  * 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-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

@@ -295,9 +295,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.
@@ -605,7 +603,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: '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));
     }
     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

@@ -352,11 +352,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 +418,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 +455,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 }));
                     }
                 });
             }
@@ -778,7 +796,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: '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: {
                 '--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/mg-details/mg-details.js

@@ -55,7 +55,11 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '78dbeab3b3e6c245bda8fad5900b70727fd47595', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
+        return (h("details", { key: '12eac25682e22d65ace61f6697656459d1494903', class: {
+                'mg-c-details': true,
+                'mg-c-details--hide-summary': this.hideSummary,
+                'mg-c-details--empty-summary': this.isEmptySummary,
+            }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'd6d621db04bca17297f770a633fcb17711f99ecf' }, h("slot", { key: '245aad29a2f2cd93e3a5426ce1e010ab6f5b5e07', name: "summary" }), h("span", { key: 'ebfe3c80a00b9b7a38a670f536a3984420ec3945', class: "mg-c-details__toggle" }, h("mg-icon", { key: '73c4eb27b3d6aa9168bf6af9fa118afc51b8ee1a', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '96730ec386137f7f3aa463b76c20547a5922f294', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '8ac6eee499e613a543fd2a2ea9d954719d48005d', class: "mg-c-details__details" }, h("slot", { key: '37af4674491d7857163dcc48424e652cfcefbed6', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-form/mg-form.js

@@ -39,6 +39,10 @@ export class MgForm {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-form']);
+        /**
+         * Whether the form has slotted actions
+         */
+        this.hasActions = false;
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -205,6 +209,8 @@ export class MgForm {
         this.validateAriaRole(this.ariaRole);
         this.validateRequiredMessage(this.requiredMessage);
         this.handlelabelOnTop(this.labelOnTop);
+        // Detect slotted actions
+        this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
         // Set button form identifier
@@ -239,6 +245,7 @@ export class MgForm {
             if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
                 this.setMgInputs();
                 this.checkValidity();
+                this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
             }
         }).observe(this.element, observerOptions);
     }
@@ -247,7 +254,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
+        return (h("form", { key: 'c851e6f19af32f28cad695daa1f42ddff10796a0', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7f92b35872c938e87959acac8841937ad503d98f', innerHTML: this.requiredMessageText }), h("slot", { key: 'e75e90f1fe3076d93df82a7a426b17d82035e0cf' }), !this.readonly && !this.disabled && this.hasActions && (h("div", { key: 'a472cf024a61d6be1665d149749ce7d560a00473', class: "mg-c-form__actions" }, h("slot", { key: 'f9098c711cb2d2714057c4f14d6df295b75de774', name: "actions" })))));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }
@@ -458,7 +465,8 @@ export class MgForm {
     static get states() {
         return {
             "classCollection": {},
-            "requiredMessageText": {}
+            "requiredMessageText": {},
+            "hasActions": {}
         };
     }
     static get events() {

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -100,7 +100,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'daffbfe09d4ccae7b2380d2dcd0f6157acf7a849', class: this.classCollection.join() }, h("div", { key: '503631e106a43186d1031ebfd8bb5fa9e7aaa568', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '6291af5e6155e38e3cfb63acf3ca774e22d385f6', name: "illustration" })), h("div", { key: '7c7518be3413c7e9cadb149a255505d20525b6c7', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '742dc8a06f3f7ab06e4e67b370a750100585c384', name: "title" }), h("slot", { key: '3da2b7d35d1076d4cb87337f9a21e149c72f9141', name: "details" }))));
+        return (h("div", { key: 'b914eadabb438b17c1cddc6b6e0167facf264a37', class: this.classCollection.join() }, h("div", { key: 'c2c55e775db2a622948ebd0d2efef8336520a52a', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '1b549999f75245d17d7c4ba5696af25921c1725a', name: "illustration" })), h("div", { key: '6f19510b6775bbd366dbb4127ad1ca7b1be8a261', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'db37d12c2812c8fca129f4d0f24cb011198ba474', name: "title" }), h("slot", { key: '2a1aaf4fe8ea18a971c741c03e05d146584567a7', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-loader/mg-loader.js

@@ -29,7 +29,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'a2e3880baccec9691a9fd6abbdb9e01d452136aa', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '044153b87e799f1f51cb3c9c6236bf6b8b328cf5', icon: "loader", spin: true }), h("span", { key: '5e4293bd33bd2a51b7557ebf26037991e4fc853e', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: '55e8bc6908f1cd83f9ffc0e30dd28ede501e30d8', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '4306e748a509ac3c546d565bf2bed74529ce3c24', icon: "loader", spin: true }), h("span", { key: '6636df5f58654f6de7f0b79e8e4dd32e4fe2bfc7', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-message/mg-message.js

@@ -100,9 +100,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'a182451917bfe33de32c893d9eeedd52b11f8b15', class: this.classCollection.join() }, h("mg-card", { key: '9dd0da031d97f669e885a1681b72e5a086e79c0b', shadow: this.variantStyle !== 'background' }, h("span", { key: '158c2470a10ab9d677e2031c28ad0d43c09e4cf2', class: "mg-c-message__icon" }, h("mg-icon", { key: 'f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf', icon: this.getIcon() })), h("div", { key: '56a7299983c30ea4527bb19a46ac0677b6e8c40e', class: "mg-c-message__content" }, h("span", { key: '744ad763177f92bdbac37d43a5a58f221ff97e69', class: "mg-c-message__content-slot" }, h("slot", { key: '14b7f22e206bd074336287809574b2a5abfe5bf5' })), this.hasActions && [
+        return (h("div", { key: 'ac4ce18faacbbc2e1f1ecaa03f4ddb4693c9f821', class: this.classCollection.join() }, h("mg-card", { key: '25ce44964f85c27386138f9e2f2e6f9c066810b4', shadow: this.variantStyle !== 'background' }, h("span", { key: '1ec4146aefe5f7a41eb92947b3dfd2d975517de2', class: "mg-c-message__icon" }, h("mg-icon", { key: '24e7c80b674e260e47d6134a996a8da774e5eb68', icon: this.getIcon() })), h("div", { key: '5344654d4373a0f4636d062b16a861a12eda19f0', class: "mg-c-message__content" }, h("span", { key: '63bd0aecd75f348be533a92cf63697eaa35db77b', class: "mg-c-message__content-slot" }, h("slot", { key: '4321f84c6b1679b163b0115b78e4801eeece2e25' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '104be326f73ded002cba9a471491ca614227e3d5', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '42c8d32832a41bb6dce997078aabaa8a40c16f5c', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }
@@ -189,7 +189,7 @@ export class MgMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "full-width",
                 "defaultValue": "false"
             }

package/dist/collection/components/molecules/mg-modal/mg-modal.js

@@ -106,11 +106,11 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: '3b802b99d96be80d8071c89be6537269866e6fff', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '30175543565cfaad83c561b8316ee7af057d6439', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: '4985b4af69968577ffd36a6a2b1f96274703d146', shadow: true }, h("div", { key: 'c4aed6d29dc5ee00f323dcbaecff9532f370ec98', class: "mg-c-modal__dialog" }, h("header", { key: '3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '55205da6c8991444ff53da7224b28c7475b0e173', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'da7fdea3a124a559cb637beea9d5565c1f777eea', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '77c2ab2bcacdda9fa179b480651507a1d6584686', icon: "cross" })))), h("h1", { key: 'cedb5efc709de2d18e81409139da790349a48bb8', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '7f24e65244836c08dbf7465f8c80970080003bcd', class: "mg-c-modal__content" }, h("slot", { key: '36d7c2a0ef1bb1024887da08298391962285bbf8' })), this.hasActions && (h("footer", { key: '5967d650e4e58726641a3c960d82aa7ee588e38f', class: "mg-c-modal__footer" }, h("slot", { key: 'c275b8235acb658ded3db7c69b931000a5ff14d2', name: "actions" })))))));
+            } }, h("mg-card", { key: 'b1ddb9603f4956c171fd4e0f5193236b7fc5a739', shadow: true }, h("div", { key: '9d6e8f1d4e19088a31f6785176cee3c099dce111', class: "mg-c-modal__dialog" }, h("header", { key: 'f2e85f730ff4a4dd94df7640d1bb6e3b89c94fbf', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'ab1c36f6bbbeed4ba54342a1cae4b08bc3befbb7', class: "mg-c-modal__close-button" }, h("mg-button", { key: '7d3658b31d901dd6b95610e7cbb1d28a47f178f3', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '662f7ee9badfe12dff1c2df58572c8829bf32bff', icon: "cross" })))), h("h1", { key: '8e2ec325dacc29c31806c9525dc4e56ce7f1232b', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '5bc09995ddda790ec1015737176d24484b4b178c', class: "mg-c-modal__content" }, h("slot", { key: 'c3ff57659beb9e0d523ed0a20ad9768c549f6332' })), this.hasActions && (h("footer", { key: '30336eb46581adbc144a9f8275489e5f9a1b9bcd', class: "mg-c-modal__footer" }, h("slot", { key: 'fc2cc4e0b3c300801d1cf928a8d1ef825c8775bc', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-panel/mg-panel.js

@@ -245,7 +245,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '33e6da36cbb92f19bcd957de7758c1a13ced5e83', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'df278e46b4604d8c5dce2abeffb2e979b02f34e9', shadow: this.shadow }, h("header", { key: 'b68012115af4bb5b62b6357fc07cbf50876ac08f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '3dfec67e6531fc0dff866e102ac36bd6c6a48834', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '56c63dd0b0e98968594ff713c2c6ee2a3269b74b' })))));
+        return (h("section", { key: 'b578e1389d1bbd5e035121c350d5c39b9bdf8a5e', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '44f71cd6cb5973719608d04d1581d440a53f5d7d', shadow: this.shadow }, h("header", { key: 'fb3b381c2c574bca89391e9007afc0552cce9a14', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ee1ee946f594900680e2182a41de5d86dd515212', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '7f878c18e3e5d60a7619312b16336858313f1eae' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js

@@ -46,7 +46,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '7035d8f560b811596c9c641abc7fe28ee9fdf3a2' }, h("mg-card", { key: 'badc81425100283dac69cad111514d8c3edfba45', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'cb20d8c7db741051b532c3b1653d578df859f0d0', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '389dc26f4cfdbb899b2b9eb4b27ceb6369209b2f', icon: "cross" }))), h("div", { key: '29b6721af3b6e06760affd6565e740bbc667f457', class: "mg-c-popover-content__title" }, h("slot", { key: '5834364d298a4e65a9170f003d0ec1f5e8868c4a', name: "title" })), h("slot", { key: '8398f497064fe097151ca263225349a9d84d4f36', name: "content" }))));
+        return (h(Host, { key: 'e019ee038ec460eb854f0c3e1735dbf5d107b76c' }, h("mg-card", { key: 'ddcfa4488e4e1d88f9f04cbe1adbce5571810dc2', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'ecd864254f96e0e4d855f4fd17ea6cefd9606a75', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: 'ef52183b075b47d9fc81b7ec0074c790c51741aa', icon: "cross" }))), h("div", { key: 'df62e551869ec69e902788d20aa50b169bdfc0ee', class: "mg-c-popover-content__title" }, h("slot", { key: '5a4eada9d48368a34094ba22f83d23c0abd92223', name: "title" })), h("slot", { key: 'bfa7298291aed96a01a45cf2921a5646a022287f', name: "content" }))));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-popover/mg-popover.js

@@ -240,7 +240,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '431539cd450da49af5587372a12cbe33956ec5b1' }, h("slot", { key: '30e66567cc00667665b70306b3c9ba2fa541fa1e' }), h("slot", { key: '7fcfcd55904128ef4f7a66e16a31a957e5b7af75', name: "content" })));
+        return (h(Host, { key: 'c8f404452600fb8c3c4219c3873d407c9546fa9c' }, h("slot", { key: '0031a6cef5ecab29b82c38a6cdfeef61277e7f57' }), h("slot", { key: 'ececc678b5d54aaad029adcf7d9681471cf78701', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-progress/mg-progress.js

@@ -65,7 +65,7 @@ export class MgProgress {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '3682d5f1980678e39594dab8223805deb4b425d4', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '001d511a866ec0526c4ffd01a8a90448b6f40819', class: "mg-c-progress" }, h("div", { key: '504fa583f5b8186236871f3f2cd886acb40614ef', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '044c9297d5a12c9d8c6d3b76d17dd2ba6a1a9719', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: 'c0df3a5d374a8e5761efcd1e340775e5a33b17b4', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '9481f0fdb3bb5b9c0a27cd47113207537dcf0eec', class: "mg-c-progress" }, h("div", { key: '67bf52635d482d56a8b0a85f31da78c243054e22', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '9a55b0bf8132bcec41350941d2bbd470194d7981', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -38,7 +38,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '9208da538e001be23c8cc78e8a34498cd072cdc6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'fcd69f398fad6964d5c017bb652ad7b8de34dee6', class: "mg-c-skip-links__list", role: "list" }, this.links.map((link) => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '972bbcd87ccb46025324b4dc8e3ded00407e2b77', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'a4673c4b29484e654f4adb5d7c669d4ad372760f', class: "mg-c-skip-links__list", role: "list" }, this.links.map((link) => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-tabs/mg-tabs.js

@@ -226,7 +226,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '37be8d325dfea3a7b828236f3cc21da57be28154', class: this.classCollection.join() }, h("header", { key: 'd88f10c0331984a759f8abc311f11d913fb25206', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: '6f741baa1d25495fd980586c2cad6203cbb69906', class: this.classCollection.join() }, h("header", { key: '1dd40593a076db2d6c883b2f066e8c96938175bf', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),