@mgdis/mg-components 5.7.0 → 5.8.0

package/dist/mg-components/styles/navigation-button.scss

@@ -9,7 +9,7 @@ $navigation-button-column-gap: 1rem;
     .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
     .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
       padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
-      height: calc(#{map.get($size, 'height')});
+      height: #{map.get($size, 'height')};
       &,
       ::slotted([slot='label']),
       ::slotted([slot='metadata']) {

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 import { VariantType, ButtonType } from './mg-button.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgButton {
@@ -69,6 +70,10 @@ export declare class MgButton {
    * Component classes
    */
   classList: ClassList;
+  /**
+   * Emmited event when disabled change
+   */
+  disabledChange: EventEmitter<MgButton['disabled']>;
   /**
    * Trigger actions onClick event
    *

package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts

@@ -1,5 +1,4 @@
-import { MgIcon } from '../../../atoms/mg-icon/mg-icon';
-import { MgMenu } from './mg-menu';
+import { MgItemMore } from '../../mg-item-more/mg-item-more';
 /**
  * Menu direction type
  */
@@ -8,32 +7,9 @@ export declare enum Direction {
   HORIZONTAL = "horizontal"
 }
 /**
- * message type
+ * ItemMore prop type
  */
-export type MessageType = {
-  moreLabel: string;
-  badgeLabel: string;
-};
-/**
- * more item type
- */
-export type MoreItemType = {
-  mgIcon?: {
-    icon: MgIcon['icon'];
-  };
-  slotLabel?: {
-    label?: string;
-    display?: boolean;
-  };
-  size?: MgMenu['size'];
-};
-/**
- * More item type guard
- *
- * @param {unknown} element element to control
- * @returns {boolean} truthy if element is more-item
- */
-export declare const isMoreItem: (element: unknown) => element is MoreItemType;
+export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;
 /**
  * List of all possibles sizes
  */

package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts

@@ -1,13 +1,12 @@
-import { Direction, MenuSizeType, MoreItemType } from './mg-menu.conf';
+import { Direction } from './mg-menu.conf';
+import type { MenuSizeType, ItemMoreType } from './mg-menu.conf';
 export declare class MgMenu {
   /************
    * Internal *
    ************/
   private readonly name;
-  private messages;
   private menuItems;
   private focusedMenuItem;
-  private overflowBehavior;
   /**************
    * Decorators *
    **************/
@@ -27,11 +26,11 @@ export declare class MgMenu {
   direction: Direction;
   validateDirection(newValue: MgMenu['direction']): void;
   /**
-   * Customize mg-menu "more element"
+   * Customize "mg-item-more" element
    * Used with direction: 'vertical' to manage overflow
    */
-  moreitem: MoreItemType;
-  validateMoreItem(newValue: MgMenu['moreitem']): void;
+  itemMore: ItemMoreType;
+  validateItemMore(newValue: MgMenu['itemMore']): void;
   /**
    * Define mg-menu size
    * Default: 'regular'
@@ -42,11 +41,6 @@ export declare class MgMenu {
    * is this menu a child menu. Used for conditional render.
    */
   isChildMenu: boolean;
-  /**
-   * Define if component manage child overflow
-   * Default: false
-   */
-  hasOverflow: boolean;
   /**
    * Close matching menu-item
    *
@@ -65,11 +59,11 @@ export declare class MgMenu {
    */
   private initMenuItemsListeners;
   /**
-   * render mg-menu-more
+   * render mg-item-more
    *
-   * @returns {HTMLElement} formated mg-menu-item element
+   * @returns {void}
    */
-  private renderMgMenuMore;
+  private renderMgItemMore;
   /*************
    * Lifecycle *
    *************/
@@ -86,23 +80,11 @@ export declare class MgMenu {
    */
   componentDidLoad(): ReturnType<typeof setTimeout>;
   /**
-   * Check add listeners to childs
+   * Add listeners to items
    *
    * @returns {void}
    */
   componentDidRender(): void;
-  /**
-   * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
-   */
-  disconnectedCallback(): void;
-  /**
-   * Render mg-menu-item more element for overflow behavior
-   *
-   * @returns {HTMLElement} rendered mg-menu-item more element
-   */
-  private renderMgMenuItemMore;
   /**
    * Render
    *

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts

@@ -1,3 +1,4 @@
+import { MgMenu } from '../mg-menu/mg-menu';
 /**
  * Available menu-item positions
  */
@@ -14,3 +15,7 @@ export declare enum Status {
   DISABLED = "disabled",
   ACTIVE = "active"
 }
+/**
+ * Direction type
+ */
+export type DirectionType = MgMenu['direction'];

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { MgMenu } from '../mg-menu/mg-menu';
-import { MenuSizeType } from '../mg-menu/mg-menu.conf';
 import { Status } from './mg-menu-item.conf';
+import type { MenuSizeType } from '../mg-menu/mg-menu.conf';
+import type { DirectionType } from './mg-menu-item.conf';
 export declare class MgMenuItem {
   /************
    * Internal *
@@ -20,6 +20,11 @@ export declare class MgMenuItem {
   /************
    * Props *
    ************/
+  /**
+   * Identifier is used to control mg-popover
+   * Default: createID('mg-menu-item');
+   */
+  identifier: string;
   /**
    * Define menu-item href
    * when defined menu-item contain an anchor instead of button
@@ -57,11 +62,16 @@ export declare class MgMenuItem {
   /**
    * Parent menu direction
    */
-  direction: MgMenu['direction'];
+  direction: DirectionType;
+  validateDirection(newValue: MgMenuItem['direction']): void;
   /**
    * Does component is in main menu
    */
   isInMainMenu: boolean;
+  /**
+   * Does element is item-more
+   */
+  isItemMore: boolean;
   /**
    * Does component have children. Default: false.
    */
@@ -92,9 +102,61 @@ export declare class MgMenuItem {
    * 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
    */
   private isDirection;
+  /**
+   * Update displayNotificationBadge
+   * current component notification badge have priority over the slot badge when submenu contain badge
+   *
+   * @returns {void} update displayNotificationBadge value
+   */
+  private updateDisplayNotificationBadge;
+  /**
+   * Method to control if one of component children have active status
+   *
+   * @returns {boolean} truthy if component has active child
+   */
+  private hasActiveChild;
+  /**
+   * Validate slots
+   *
+   * @param {boolean} guard prevent action whith guard. Default: false.
+   * @returns {void}
+   */
+  private validateSlot;
+  /**
+   * Update status
+   *
+   * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+   * @returns {void}
+   */
+  private updateStatus;
+  /**
+   * Init event-listeners
+   *
+   * @returns {void}
+   */
+  private initListeners;
+  /**
+   * Get mg-popover identifier
+   *
+   * @returns {MgPopover['identifier']} generated mg-popover identifier
+   */
+  private getPopoverIdentifier;
+  /**
+   * Render popover clickoutside guard for content slot
+   *
+   * @returns {void}
+   */
+  private updatePopoverGuard;
+  /**
+   * Condition to know if component should display a mg-popover
+   *
+   * @returns {boolean} truthy if component display popover
+   */
+  private displayPopover;
   /************
    * Handlers *
    ************/
@@ -112,19 +174,6 @@ export declare class MgMenuItem {
    * @returns {void}
    */
   private handlePopoverDisplay;
-  /**
-   * Update displayNotificationBadge
-   * current component notification badge have priority over the slot badge when submenu contain badge
-   *
-   * @returns {void} update displayNotificationBadge value
-   */
-  private updateDisplayNotificationBadge;
-  /**
-   * Method to control if one of component children have active status
-   *
-   * @returns {boolean} truthy if component has active child
-   */
-  private hasActiveChild;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts

@@ -0,0 +1,26 @@
+import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import { MgMenu } from '../menu/mg-menu/mg-menu';
+/**
+ * message type
+ */
+export type MessageType = {
+  moreLabel: string;
+  badgeLabel: string;
+};
+/**
+ * SlotLabel prop type
+ */
+export type SlotLabelType = {
+  label?: string;
+  display?: boolean;
+};
+/**
+ * icon prop type
+ */
+export type IconType = {
+  icon: MgIcon['icon'];
+};
+/**
+ * size type
+ */
+export type SizeType = MgMenu['size'];

package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts

@@ -0,0 +1,74 @@
+import type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';
+export declare class MgItemMore {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private messages;
+  private menuItems;
+  private overflowBehavior;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgItemMoreElement;
+  /**
+   * Define icon
+   * Default: {icon: 'ellipsis-vertical'}
+   */
+  icon: IconType;
+  validateIcon(newValue: MgItemMore['icon']): void;
+  /**
+   * Define slot label element
+   * Default: {display: false}
+   */
+  slotlabel: SlotLabelType;
+  validateSlotLabel(newValue: MgItemMore['slotlabel']): void;
+  /**
+   * Define component child menu size.
+   */
+  size: SizeType;
+  validateSize(newValue: MgItemMore['size']): void;
+  /**
+   * Define component parent menu.
+   */
+  parentMenu: HTMLMgMenuElement;
+  /***********
+   * Methods *
+   ***********/
+  /**
+   * render mg-item-more overflow element
+   *
+   * @returns {HTMLMgItemMoreElement} mg-item-more element
+   */
+  private renderMgMenuItemOverflowElement;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Disconnect overflow ResizeObserver
+   *
+   * @returns {void} run overflow resize obeserver disconnexion
+   */
+  disconnectedCallback(): void;
+  /**
+   * Set variables and validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Add overflow behavior
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components.d.ts

@@ -14,11 +14,12 @@ import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
-import { Direction, MenuSizeType, MoreItemType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
+import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
+import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 import { Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { Placement } from "@popperjs/core";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
-import { SizeType, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+import { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
     interface MgActionMore {
@@ -884,19 +885,33 @@ export namespace Components {
          */
         "value": any;
     }
+    interface MgItemMore {
+        /**
+          * Define icon Default: {icon: 'ellipsis-vertical'}
+         */
+        "icon": IconType;
+        /**
+          * Define component child menu size.
+         */
+        "size": SizeType;
+        /**
+          * Define slot label element Default: {display: false}
+         */
+        "slotlabel": SlotLabelType;
+    }
     interface MgMenu {
         /**
           * Component display direction. Default: "horizontal"
          */
         "direction": Direction;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "label": string;
+        "itemMore": ItemMoreType;
         /**
-          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+          * Menu label. Include short menu description. Required for accessibility
          */
-        "moreitem": MoreItemType;
+        "label": string;
         /**
           * Define mg-menu size Default: 'regular'
          */
@@ -911,6 +926,10 @@ export namespace Components {
           * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href": string;
+        /**
+          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+         */
+        "identifier": string;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -1060,7 +1079,7 @@ export namespace Components {
         /**
           * Define tabs size
          */
-        "size": SizeType;
+        "size": SizeType1;
     }
     interface MgTag {
         /**
@@ -1099,6 +1118,10 @@ export namespace Components {
         "placement": Placement;
     }
 }
+export interface MgButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgButtonElement;
+}
 export interface MgDetailsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgDetailsElement;
@@ -1296,6 +1319,12 @@ declare global {
         prototype: HTMLMgInputToggleElement;
         new (): HTMLMgInputToggleElement;
     };
+    interface HTMLMgItemMoreElement extends Components.MgItemMore, HTMLStencilElement {
+    }
+    var HTMLMgItemMoreElement: {
+        prototype: HTMLMgItemMoreElement;
+        new (): HTMLMgItemMoreElement;
+    };
     interface HTMLMgMenuElement extends Components.MgMenu, HTMLStencilElement {
     }
     var HTMLMgMenuElement: {
@@ -1383,6 +1412,7 @@ declare global {
         "mg-input-textarea": HTMLMgInputTextareaElement;
         "mg-input-title": HTMLMgInputTitleElement;
         "mg-input-toggle": HTMLMgInputToggleElement;
+        "mg-item-more": HTMLMgItemMoreElement;
         "mg-menu": HTMLMgMenuElement;
         "mg-menu-item": HTMLMgMenuItemElement;
         "mg-message": HTMLMgMessageElement;
@@ -1462,6 +1492,10 @@ declare namespace LocalJSX {
           * aria-label In case button text is not explicit enough
          */
         "label"?: string;
+        /**
+          * Emmited event when disabled change
+         */
+        "onDisabled-change"?: (event: MgButtonCustomEvent<MgButton['disabled']>) => void;
         /**
           * Define button type
          */
@@ -2294,19 +2328,33 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    interface MgItemMore {
+        /**
+          * Define icon Default: {icon: 'ellipsis-vertical'}
+         */
+        "icon"?: IconType;
+        /**
+          * Define component child menu size.
+         */
+        "size"?: SizeType;
+        /**
+          * Define slot label element Default: {display: false}
+         */
+        "slotlabel"?: SlotLabelType;
+    }
     interface MgMenu {
         /**
           * Component display direction. Default: "horizontal"
          */
         "direction"?: Direction;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "label": string;
+        "itemMore"?: ItemMoreType;
         /**
-          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+          * Menu label. Include short menu description. Required for accessibility
          */
-        "moreitem"?: MoreItemType;
+        "label": string;
         /**
           * Define mg-menu size Default: 'regular'
          */
@@ -2321,6 +2369,10 @@ declare namespace LocalJSX {
           * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href"?: string;
+        /**
+          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+         */
+        "identifier"?: string;
         /**
           * Emited event when status change
          */
@@ -2514,7 +2566,7 @@ declare namespace LocalJSX {
         /**
           * Define tabs size
          */
-        "size"?: SizeType;
+        "size"?: SizeType1;
     }
     interface MgTag {
         /**
@@ -2573,6 +2625,7 @@ declare namespace LocalJSX {
         "mg-input-textarea": MgInputTextarea;
         "mg-input-title": MgInputTitle;
         "mg-input-toggle": MgInputToggle;
+        "mg-item-more": MgItemMore;
         "mg-menu": MgMenu;
         "mg-menu-item": MgMenuItem;
         "mg-message": MgMessage;
@@ -2610,6 +2663,7 @@ declare module "@stencil/core" {
             "mg-input-textarea": LocalJSX.MgInputTextarea & JSXBase.HTMLAttributes<HTMLMgInputTextareaElement>;
             "mg-input-title": LocalJSX.MgInputTitle & JSXBase.HTMLAttributes<HTMLMgInputTitleElement>;
             "mg-input-toggle": LocalJSX.MgInputToggle & JSXBase.HTMLAttributes<HTMLMgInputToggleElement>;
+            "mg-item-more": LocalJSX.MgItemMore & JSXBase.HTMLAttributes<HTMLMgItemMoreElement>;
             "mg-menu": LocalJSX.MgMenu & JSXBase.HTMLAttributes<HTMLMgMenuElement>;
             "mg-menu-item": LocalJSX.MgMenuItem & JSXBase.HTMLAttributes<HTMLMgMenuItemElement>;
             "mg-message": LocalJSX.MgMessage & JSXBase.HTMLAttributes<HTMLMgMessageElement>;

package/dist/types/utils/behaviors.utils.d.ts

@@ -1,14 +1,14 @@
 export declare enum OverflowBehaviorElements {
-  MORE = "data-overflow-more",
   BASE_INDEX = "data-overflow-base-index",
   PROXY_INDEX = "data-overflow-proxy-index"
 }
 export declare class OverflowBehavior {
   private element;
   private render;
-  private resizeObserver;
-  private moreElement;
-  private children;
+  private _resizeObserver;
+  private _moreElement;
+  private _baseChildren;
+  private _proxyChildren;
   constructor(element: Element, render: () => HTMLElement);
   /**********
    * Public *
@@ -25,10 +25,17 @@ export declare class OverflowBehavior {
   /**
    * run overflow behavior
    *
-   * @param {number} width width of the container
+   * @param {number} width width of the container. Optional.
    * @returns {void}
    */
   private run;
+  /**
+   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+   *
+   * @param {Element} element element to parse
+   * @returns {Element[]} children
+   */
+  private getInteractiveItems;
   /**
    * Update displayed items in container from a given available space
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "MG Components",
   "packageManager": "pnpm@7.17.1",
   "engineStrict": true,