@mgdis/mg-components 5.5.0 → 5.6.0

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

@@ -1,11 +1,13 @@
-import { Direction } from './mg-menu.conf';
+import { Direction, MenuSizeType, MoreItemType } from './mg-menu.conf';
 export declare class MgMenu {
   /************
    * Internal *
    ************/
   private readonly name;
+  private messages;
   private menuItems;
   private focusedMenuItem;
+  private overflowBehavior;
   /**************
    * Decorators *
    **************/
@@ -24,22 +26,50 @@ export declare class MgMenu {
    */
   direction: Direction;
   validateDirection(newValue: MgMenu['direction']): void;
+  /**
+   * Customize mg-menu "more element"
+   * Used with direction: 'vertical' to manage overflow
+   */
+  moreitem: MoreItemType;
+  validateMoreItem(newValue: MgMenu['moreitem']): void;
+  /**
+   * Define mg-menu size
+   * Default: 'regular'
+   */
+  size: MenuSizeType;
+  validateSize(newValue: MgMenu['size']): void;
   /**
    * 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
    *
-   * @param {HTMLMgMenuItemElement} item menu-item to close
+   * @param {HTMLElement} item menu-item to close
    * @param {boolean} condition addionnal condition
    * @returns {void}
    */
   private closeMenuItem;
+  /*************
+   * Methods *
+   *************/
   /**
    * Store menu-items on component init and add listeners
+   *
+   * @returns {void}
    */
-  private initMenuItems;
+  private initMenuItemsListeners;
+  /**
+   * render mg-menu-more
+   *
+   * @returns {HTMLElement} formated mg-menu-item element
+   */
+  private renderMgMenuMore;
   /*************
    * Lifecycle *
    *************/
@@ -55,6 +85,24 @@ export declare class MgMenu {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Check add listeners to childs
+   *
+   * @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

@@ -14,11 +14,3 @@ export declare enum Status {
   DISABLED = "disabled",
   ACTIVE = "active"
 }
-/**
- * List of all possibles sizes
- */
-export declare const sizes: readonly ["regular", "medium", "large"];
-/**
- * item Size from sizes
- */
-export declare type MenuItemSizeType = typeof sizes[number];

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

@@ -1,12 +1,15 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
 import { MgMenu } from '../mg-menu/mg-menu';
-import { MenuItemSizeType, Status } from './mg-menu-item.conf';
+import { MenuSizeType } from '../mg-menu/mg-menu.conf';
+import { Status } from './mg-menu-item.conf';
 export declare class MgMenuItem {
   /************
    * Internal *
    ************/
   private readonly name;
   private readonly navigationButton;
+  private badgeLabel;
   /**************
    * Decorators *
    **************/
@@ -18,7 +21,7 @@ export declare class MgMenuItem {
    * Props *
    ************/
   /**
-   * Define menu-item badge
+   * Define menu-item href
    * when defined menu-item contain an anchor instead of button
    */
   href: string;
@@ -27,19 +30,26 @@ export declare class MgMenuItem {
    */
   status: Status;
   validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
-  /**
-   * Define menu-item size. Default: "large".
-   */
-  size: MenuItemSizeType;
-  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
   /**
    * Define menu-item content expanded. Default: false.
    */
   expanded: boolean;
   validateExpanded(newValue: MgMenuItem['expanded']): void;
-  /************
+  /**********
+   * Events *
+   *********/
+  /**
+   * Emited event when status change
+   */
+  statusChange: EventEmitter<MgMenuItem['status']>;
+  /**********
    * States *
-   ************/
+   *********/
+  /**
+   * Define menu-item size. Default: "regular".
+   */
+  size: MenuSizeType;
+  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
   /**
    * Component button classes
    */
@@ -57,9 +67,13 @@ export declare class MgMenuItem {
    */
   hasChildren: boolean;
   validateHasChildren(newValue: boolean): void;
-  /************
+  /**
+   * Does component should display notification badge.
+   */
+  displayNotificationBadge: boolean;
+  /***********
    * Methods *
-   ************/
+   **********/
   /**
    * Toggle expanded prop value
    *
@@ -67,20 +81,20 @@ export declare class MgMenuItem {
    */
   private toggleExpanded;
   /**
-   * Does an HTMLElement contain child with given Status
+   * Does an Element have given Status
    *
-   * @param {HTMLElement} element to parse
+   * @param {Element} element to parse
    * @param {MgMenuItem['status']} status to check
    * @returns {boolean} true if element with status is found
    */
-  private hasChildElementStatus;
+  private hasStatus;
   /**
    * Is component contextual direction match the given direction
    *
    * @param {MgMenuItem['direction']} direction in parent menu
    * @returns {boolean} true is direction match the direction propertie
    */
-  private isdirection;
+  private isDirection;
   /************
    * Handlers *
    ************/
@@ -91,6 +105,20 @@ export declare class MgMenuItem {
    * @returns {void}
    */
   private handleElementCLick;
+  /**
+   * Handle popover element display-change event
+   *
+   * @param {CustomEvent} event popover display event
+   * @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;
   /*************
    * Lifecycle *
    *************/
@@ -106,6 +134,18 @@ export declare class MgMenuItem {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render ineractive element
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  private renderInteractiveElement;
+  /**
+   * Render slot
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  private renderSlot;
   /**
    * Render
    *

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

@@ -7,6 +7,8 @@ export declare class MgMessage {
   private readonly classHide;
   private closeButtonId;
   private storedTimer;
+  private isFocused;
+  private isHovered;
   private messages;
   /**************
    * Decorators *
@@ -59,13 +61,28 @@ export declare class MgMessage {
    */
   componentHide: EventEmitter<string>;
   /**
-   * Handle close button
+   * Set timer
+   *
+   * @returns {void}
    */
-  private handleClose;
+  private setTimer;
   /**
-   * Hide component whith delay
+   * Clear timer
+   *
+   * @returns {void}
    */
-  private hideWithDelay;
+  private clearTimer;
+  /**
+   * Event to add on element
+   *
+   * @param {MouseEvent | FocusEvent} event  event
+   * @returns {void}
+   */
+  private timerEvents;
+  /**
+   * Handle close button
+   */
+  private handleClose;
   /**
    * Get icon corresponding to variant
    *

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { Placement } from '@popperjs/core';
+import { ClassList } from '../../../utils/components.utils';
 export declare class MgPopover {
   /************
    * Internal *
@@ -7,7 +8,9 @@ export declare class MgPopover {
   private popper;
   private popover;
   private closeButtonId;
+  private windows;
   private messages;
+  private readonly classArrowHide;
   /**************
    * Decorators *
    **************/
@@ -24,6 +27,11 @@ export declare class MgPopover {
    * Popover placement
    */
   placement: Placement;
+  /**
+   * Hide popover arrow
+   */
+  arrowHide: boolean;
+  validateArrowHide(newValue: MgPopover['arrowHide']): void;
   /**
    * Define if popover has a cross button
    */
@@ -37,6 +45,10 @@ export declare class MgPopover {
    * Disable popover
    */
   disabled: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
   /**
    * Emited event when display value change
    */

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

@@ -1,7 +1,7 @@
 /**
  * type SkipLink
  */
-export declare type SkipLink = {
+export type SkipLink = {
   href: string;
   label: string;
 };

package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 import { SkipLink } from './mg-skip-links.conf';
 export declare class MgSkipLinks {
   /************
@@ -16,6 +17,20 @@ export declare class MgSkipLinks {
    */
   links: SkipLink[];
   validateLinks(links: SkipLink[]): void;
+  /**
+   * Emited event when link is clicked
+   */
+  goToAnchor: EventEmitter<string>;
+  /***********
+   * Methods *
+   **********/
+  /**
+   * Handle link click and emit go-to-anchor event
+   *
+   * @param {MouseEvent} event mouse event
+   * @returns {void}
+   */
+  private handleLinkCLick;
   /*************
    * Lifecycle *
    *************/

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

@@ -13,10 +13,12 @@ export declare enum Status {
  * type TabItem
  * use to match tabs items
  */
-export declare type TabItem = {
+export type TabItem = {
   label: string;
   icon?: MgIcon['icon'];
-  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'>;
+  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & {
+    role: 'notification' | 'information';
+  };
   status: Status;
 };
 /**
@@ -26,4 +28,4 @@ export declare const sizes: readonly ["regular", "large"];
 /**
  * Variant type from variants
  */
-export declare type SizeType = typeof sizes[number];
+export type SizeType = (typeof sizes)[number];

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

@@ -7,6 +7,7 @@ export declare class MgTabs {
    ************/
   private readonly tabPanel;
   private readonly buttonTabBaseClass;
+  private tabFocus;
   private startIndex;
   /**************
    * Decorators *
@@ -39,7 +40,6 @@ export declare class MgTabs {
   validateItems(newValue: MgTabs['items']): void;
   /**
    * Active tab number
-   * default: first is 1
    */
   activeTab: number;
   validateActiveTab(newValue: MgTabs['activeTab']): void;
@@ -55,13 +55,6 @@ export declare class MgTabs {
    * Emited event when active tab change
    */
   activeTabChange: EventEmitter<number>;
-  /**
-   * Method to set active tab
-   *
-   * @param {number} tabKey item tab key to set to ACTIVE status
-   * @returns {void}
-   */
-  private setActiveTab;
   /**
    * Method to know if given tab has the given status
    *
@@ -69,7 +62,7 @@ export declare class MgTabs {
    * @param {Status} status status to valide
    * @returns {boolean} status comparaison
    */
-  private tabHasGivenStatus;
+  private tabHasStatus;
   /**
    * Method to get element id from index
    *
@@ -79,12 +72,18 @@ export declare class MgTabs {
    */
   private getElementId;
   /**
-   * Method to get tab index
+   * Method to get tab item index
    *
    * @param {number} index to get
    * @returns {number} index
    */
-  private getTabIndex;
+  private getTabItemIndex;
+  /**
+   * Method to get the active-tab value
+   *
+   * @returns {number} of the active-tab
+   */
+  private getActiveTab;
   /**
    * Handle click events on tabs
    *
@@ -95,7 +94,6 @@ export declare class MgTabs {
    * get navigation button class from given status
    *
    * @param {Status} status button tab status
-   * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
    * @returns {string} button class/selector variant
    */
   private getNavigationButtonClass;
@@ -106,6 +104,12 @@ export declare class MgTabs {
    * @returns {void}
    */
   private handleKeydown;
+  /**
+   * Method to reset focus behavior
+   *
+   * @returns {void}
+   */
+  private resetFocus;
   /**
    * Validate slots setting
    */
@@ -119,6 +123,12 @@ export declare class MgTabs {
    * @returns {void}
    */
   componentWillLoad(): void;
+  /**
+   * add listners
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
   /**
    * Render
    *

package/dist/types/components.d.ts

@@ -13,8 +13,8 @@ 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 } from "./components/molecules/menu/mg-menu/mg-menu.conf";
-import { MenuItemSizeType, Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
+import { Direction, MenuSizeType, MoreItemType } 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";
@@ -874,6 +874,14 @@ export namespace Components {
           * Menu label. Include short menu description. Required for accessibility
          */
         "label": string;
+        /**
+          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+         */
+        "moreitem": MoreItemType;
+        /**
+          * Define mg-menu size Default: 'regular'
+         */
+        "size": MenuSizeType;
     }
     interface MgMenuItem {
         /**
@@ -881,13 +889,9 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Define menu-item badge when defined menu-item contain an anchor instead of button
+          * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href": string;
-        /**
-          * Define menu-item size. Default: "large".
-         */
-        "size": MenuItemSizeType;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -982,6 +986,10 @@ export namespace Components {
         "titlePatternErrorMessage": string;
     }
     interface MgPopover {
+        /**
+          * Hide popover arrow
+         */
+        "arrowHide": boolean;
         /**
           * Define if popover has a cross button
          */
@@ -1011,7 +1019,7 @@ export namespace Components {
     }
     interface MgTabs {
         /**
-          * Active tab number default: first is 1
+          * Active tab number
          */
         "activeTab": number;
         /**
@@ -1112,6 +1120,10 @@ export interface MgInputToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgInputToggleElement;
 }
+export interface MgMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgMenuItemElement;
+}
 export interface MgMessageCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgMessageElement;
@@ -1132,6 +1144,10 @@ export interface MgPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgPopoverElement;
 }
+export interface MgSkipLinksCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgSkipLinksElement;
+}
 export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgTabsElement;
@@ -2239,6 +2255,14 @@ declare namespace LocalJSX {
           * Menu label. Include short menu description. Required for accessibility
          */
         "label": string;
+        /**
+          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+         */
+        "moreitem"?: MoreItemType;
+        /**
+          * Define mg-menu size Default: 'regular'
+         */
+        "size"?: MenuSizeType;
     }
     interface MgMenuItem {
         /**
@@ -2246,13 +2270,13 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * Define menu-item badge when defined menu-item contain an anchor instead of button
+          * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href"?: string;
         /**
-          * Define menu-item size. Default: "large".
+          * Emited event when status change
          */
-        "size"?: MenuItemSizeType;
+        "onStatus-change"?: (event: MgMenuItemCustomEvent<MgMenuItem['status']>) => void;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -2375,6 +2399,10 @@ declare namespace LocalJSX {
         "titlePatternErrorMessage"?: string;
     }
     interface MgPopover {
+        /**
+          * Hide popover arrow
+         */
+        "arrowHide"?: boolean;
         /**
           * Define if popover has a cross button
          */
@@ -2405,10 +2433,14 @@ declare namespace LocalJSX {
           * Skip links
          */
         "links"?: SkipLink[];
+        /**
+          * Emited event when link is clicked
+         */
+        "onGo-to-anchor"?: (event: MgSkipLinksCustomEvent<string>) => void;
     }
     interface MgTabs {
         /**
-          * Active tab number default: first is 1
+          * Active tab number
          */
         "activeTab"?: number;
         /**

package/dist/types/locales/index.d.ts

@@ -51,6 +51,10 @@ declare const messages: {
       next: string;
       previous: string;
     };
+    plusMenu: {
+      moreLabel: string;
+      badgeLabel: string;
+    };
   };
   fr: {
     errors: {
@@ -62,13 +66,7 @@ declare const messages: {
         minMax: string;
       };
       numeric: {
-        min: string; /**
-         * Get Intl object
-         * We load the defined locale but for now we only support the first subtag for messages
-         *
-         * @param {HTMLElement} element element we need to get the language
-         * @returns {{ locale: string; messages: unknown }} messages object
-         */
+        min: string;
         max: string;
         minMax: string;
       };
@@ -110,17 +108,20 @@ declare const messages: {
       next: string;
       previous: string;
     };
+    plusMenu: {
+      moreLabel: string;
+      badgeLabel: string;
+    };
   };
 };
 /**
  * Get Intl object
- * We load the defined locale but for now we only support the first subtag for messages
  *
  * @param {HTMLElement} element element we need to get the language
  * @returns {{ locale: string; messages: unknown }} messages object
  */
 export declare const initLocales: (element: HTMLElement) => {
   locale: string;
-  messages: any;
+  messages: unknown;
 };
 export {};