@mgdis/mg-components 5.8.2 → 5.10.0

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js

@@ -15,7 +15,6 @@ export class MgMenuItem {
      **********/
     /**
      * Toggle expanded prop value
-     *
      * @returns {void}
      */
     this.toggleExpanded = () => {
@@ -23,7 +22,6 @@ export class MgMenuItem {
     };
     /**
      * Does an Element have given Status
-     *
      * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
      * @param {MgMenuItem['status']} status to check
      * @returns {boolean} true if element with status is found
@@ -31,7 +29,6 @@ export class MgMenuItem {
     this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
     /**
      * Is component contextual direction match the given direction
-     *
      * @param {MgMenuItem['direction']} direction in parent menu
      * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
      * @returns {boolean} true is direction match the direction propertie
@@ -40,7 +37,6 @@ export class MgMenuItem {
     /**
      * Update displayNotificationBadge
      * current component notification badge have priority over the slot badge when submenu contain badge
-     *
      * @returns {void} update displayNotificationBadge value
      */
     this.updateDisplayNotificationBadge = () => {
@@ -51,7 +47,6 @@ export class MgMenuItem {
     };
     /**
      * Method to control if one of component children have active status
-     *
      * @returns {boolean} truthy if component has active child
      */
     this.hasActiveChild = () => {
@@ -60,7 +55,6 @@ export class MgMenuItem {
     };
     /**
      * Validate slots
-     *
      * @param {boolean} guard prevent action whith guard. Default: false.
      * @returns {void}
      */
@@ -80,7 +74,6 @@ export class MgMenuItem {
     };
     /**
      * Update status
-     *
      * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
      * @returns {void}
      */
@@ -91,7 +84,6 @@ export class MgMenuItem {
     };
     /**
      * Init event-listeners
-     *
      * @returns {void}
      */
     this.initListeners = () => {
@@ -108,13 +100,11 @@ export class MgMenuItem {
     };
     /**
      * Get mg-popover identifier
-     *
      * @returns {MgPopover['identifier']} generated mg-popover identifier
      */
     this.getPopoverIdentifier = () => `${this.identifier}-popover`;
     /**
      * Condition to know if component should display a mg-popover
-     *
      * @returns {boolean} truthy if component display popover
      */
     this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
@@ -123,7 +113,6 @@ export class MgMenuItem {
      ************/
     /**
      * Handle interacrtive element click
-     *
      * @param {MouseEvent} event click on element
      * @returns {void}
      */
@@ -138,7 +127,6 @@ export class MgMenuItem {
     };
     /**
      * Handle popover element display-change event
-     *
      * @param {CustomEvent} event popover display event
      * @returns {void}
      */
@@ -147,7 +135,6 @@ export class MgMenuItem {
     };
     /**
      * Render slot
-     *
      * @returns {HTMLElement} HTML Element
      */
     this.renderSlot = () => h("slot", null);
@@ -214,7 +201,6 @@ export class MgMenuItem {
   }
   /**
    * Render popover clickoutside guard for content slot
-   *
    * @returns {void}
    */
   updatePopoverGuard() {
@@ -228,7 +214,6 @@ export class MgMenuItem {
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -245,7 +230,6 @@ export class MgMenuItem {
   }
   /**
    * Check if component slots configuration
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad() {
@@ -285,7 +269,6 @@ export class MgMenuItem {
   }
   /**
    * Render ineractive element
-   *
    * @returns {HTMLElement} HTML Element
    */
   renderInteractiveElement() {
@@ -294,11 +277,10 @@ export class MgMenuItem {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
-      } }, h("mg-icon", { icon: "chevron-down" })))));
+      } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/collection/components/molecules/mg-action-more/mg-action-more.css

@@ -28,6 +28,7 @@
 :host {
   --mg-popover-padding-vertical: 1rem;
   --mg-popover-padding-horizontal: 0;
+  --mg-popover-max-width: unset;
 }
 
 .mg-action-more__chevron {

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -5,7 +5,6 @@ import { Direction } from '../menu/mg-menu/mg-menu.conf';
 import { createID } from '../../../utils/components.utils';
 /**
  * MgActionMore['items'] type guard
- *
  * @param {unknown} prop commponent items prop
  * @returns {boolean} return true if type is valid
  */
@@ -15,7 +14,6 @@ const isMgActionMoreItems = (prop) => {
 };
 /**
  * MgActionMore['button'] type guard
- *
  * @param {unknown} prop commponent button prop
  * @returns {boolean} return true if type is valid
  */
@@ -25,7 +23,6 @@ const isMgActionMoreButton = (prop) => {
 };
 /**
  * MgActionMore['icon'] type guard
- *
  * @param {unknown} prop commponent icon prop
  * @returns {boolean} return true if type is valid
  */
@@ -45,7 +42,6 @@ export class MgActionMore {
      ***********/
     /**
      * Toogle expanded props
-     *
      * @returns {void}
      */
     this.toggleExpanded = () => {
@@ -53,7 +49,6 @@ export class MgActionMore {
     };
     /**
      * Button click handler
-     *
      * @returns {void}
      */
     this.handleButton = () => {
@@ -61,7 +56,6 @@ export class MgActionMore {
     };
     /**
      * Item click handler
-     *
      * @param {MouseEvent} event click event
      * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
      * @returns {void}
@@ -101,7 +95,6 @@ export class MgActionMore {
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -113,7 +106,6 @@ export class MgActionMore {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/collection/components/molecules/mg-details/mg-details.css

@@ -40,9 +40,6 @@
   gap: 0.6rem;
   min-height: calc(var(--font-size) * var(--line-height));
 }
-.mg-details__toggle mg-icon {
-  align-self: self-end;
-}
 
 .mg-details__details {
   margin-top: 1.5rem;

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

@@ -3,7 +3,6 @@ export class MgDetails {
   constructor() {
     /**
      * Handle details toggle
-     *
      * @returns {void}
      */
     this.handleToggle = () => {
@@ -27,7 +26,6 @@ export class MgDetails {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -36,11 +34,10 @@ export class MgDetails {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,6 @@ export class MgForm {
     /**
      * Define required message based on mg-inputs required elements
      * Also
-     *
      * @returns {void}
      */
     this.setRequiredMessage = () => {
@@ -34,7 +33,6 @@ export class MgForm {
     };
     /**
      * Check if form is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -47,7 +45,6 @@ export class MgForm {
     };
     /**
      * Handle Form Submit
-     *
      * @param {SubmitEvent} event submit event
      * @returns {void}
      */
@@ -57,7 +54,6 @@ export class MgForm {
     };
     /**
      * Set mgInputs
-     *
      * @returns {void}
      */
     this.setMgInputs = () => {
@@ -89,7 +85,6 @@ export class MgForm {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -105,7 +100,6 @@ export class MgForm {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -133,7 +127,6 @@ export class MgForm {
   }
   /**
    * Add slot listeners
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -152,7 +145,6 @@ export class MgForm {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -10,7 +10,6 @@ export class MgIllustratedMessage {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -26,7 +25,6 @@ export class MgIllustratedMessage {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js

@@ -13,7 +13,6 @@ export class MgItemMore {
      ***********/
     /**
      * render mg-item-more overflow element
-     *
      * @returns {HTMLMgItemMoreElement} mg-item-more element
      */
     this.renderMgMenuItemOverflowElement = () => {
@@ -63,7 +62,6 @@ export class MgItemMore {
    *************/
   /**
    * Disconnect overflow ResizeObserver
-   *
    * @returns {void} run overflow resize obeserver disconnexion
    */
   disconnectedCallback() {
@@ -71,7 +69,6 @@ export class MgItemMore {
   }
   /**
    * Set variables and validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -86,7 +83,6 @@ export class MgItemMore {
   }
   /**
    * Add overflow behavior
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -94,7 +90,6 @@ export class MgItemMore {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -9,34 +9,15 @@
   display: inline-block;
   min-height: var(--default-size);
 }
-.mg-message__bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.3rem;
-  height: 100%;
-}
-.mg-message.mg-message--info .mg-message__bar {
-  background-color: hsl(var(--color-info));
-}
 .mg-message.mg-message--info .mg-message__icon {
   color: hsl(var(--color-info));
 }
-.mg-message.mg-message--warning .mg-message__bar {
-  background-color: hsl(var(--color-warning));
-}
 .mg-message.mg-message--warning .mg-message__icon {
   color: hsl(var(--color-warning));
 }
-.mg-message.mg-message--success .mg-message__bar {
-  background-color: hsl(var(--color-success));
-}
 .mg-message.mg-message--success .mg-message__icon {
   color: hsl(var(--color-success));
 }
-.mg-message.mg-message--danger .mg-message__bar {
-  background-color: hsl(var(--color-danger));
-}
 .mg-message.mg-message--danger .mg-message__icon {
   color: hsl(var(--color-danger));
 }
@@ -87,6 +68,7 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }
 
 .mg-message,

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

@@ -18,7 +18,6 @@ export class MgMessage {
     this.isHovered = false;
     /**
      * Set timer
-     *
      * @returns {void}
      */
     this.setTimer = () => {
@@ -26,7 +25,6 @@ export class MgMessage {
     };
     /**
      * Clear timer
-     *
      * @returns {void}
      */
     this.clearTimer = () => {
@@ -34,7 +32,6 @@ export class MgMessage {
     };
     /**
      * Event to add on element
-     *
      * @param {MouseEvent | FocusEvent} event  event
      * @returns {void}
      */
@@ -59,8 +56,7 @@ export class MgMessage {
     };
     /**
      * Get icon corresponding to variant
-     *
-     * @returns {string} icon
+     * @returns {MgIcon['icon'] | undefined} icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -85,7 +81,7 @@ export class MgMessage {
     this.hasActions = false;
   }
   validateDelay(newValue) {
-    if (newValue && newValue < 2) {
+    if (newValue !== undefined && newValue < 2) {
       throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
     }
   }
@@ -154,11 +150,10 @@ export class MgMessage {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   static get is() { return "mg-message"; }
   static get encapsulation() { return "shadow"; }
@@ -213,9 +208,14 @@ export class MgMessage {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "VariantType",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "VariantType": {
+              "location": "import",
+              "path": "./mg-message.conf"
+            }
+          }
         },
         "required": false,
         "optional": false,

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

@@ -62,4 +62,5 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }

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

@@ -44,7 +44,6 @@ export class MgModal {
      *************/
     /**
      * Handle close button
-     *
      * @returns {void}
      */
     this.handleClose = () => {
@@ -77,7 +76,6 @@ export class MgModal {
   }
   /**
    * Handle 'escape' key down
-   *
    * @param {KeyboardEvent} event keydown event
    * @returns {void}
    */
@@ -92,7 +90,6 @@ export class MgModal {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -112,7 +109,6 @@ export class MgModal {
   }
   /**
    * Add observer on component to set focus when displayed
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -128,7 +124,6 @@ export class MgModal {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -185,7 +180,7 @@ export class MgModal {
       },
       "closeButton": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

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

@@ -16,7 +16,6 @@ import { initLocales } from './../../../locales';
  * range(1, 1) = [1]
  * range(1, 5) = [1, 2, 3, 4, 5]
  * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
- *
  * @param {number} start start range
  * @param {number} end start end
  * @param {number} step step size
@@ -27,7 +26,6 @@ export class MgPagination {
   constructor() {
     /**
      * Change current page from target
-     *
      * @param {number} target target page
      * @returns {void}
      */
@@ -39,7 +37,6 @@ export class MgPagination {
      ************/
     /**
      * select handler
-     *
      * @param {InputEvent} event value change event
      * @returns {void}
      */
@@ -49,7 +46,6 @@ export class MgPagination {
     };
     /**
      * Go to 'previous/next' page button handler
-     *
      * @param {string} action navigation action
      * @param {boolean} disabled button disable state
      * @returns {void}
@@ -82,7 +78,6 @@ export class MgPagination {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -98,7 +93,6 @@ export class MgPagination {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -52,4 +52,5 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }