@mgdis/mg-components 5.5.0 → 5.7.0

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

@@ -1,3 +1,5 @@
+import { MgIcon } from '../../../atoms/mg-icon/mg-icon';
+import { MgMenu } from './mg-menu';
 /**
  * Menu direction type
  */
@@ -5,3 +7,38 @@ export declare enum Direction {
   VERTICAL = "vertical",
   HORIZONTAL = "horizontal"
 }
+/**
+ * message 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;
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: readonly ["regular", "medium", "large"];
+/**
+ * item Size from sizes
+ */
+export type MenuSizeType = (typeof sizes)[number];

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 {HTMLMgMenuItemElement} mgMenuItemElement 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,26 @@ 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;
+  /**
+   * Method to control if one of component children have active status
+   *
+   * @returns {boolean} truthy if component has active child
+   */
+  private hasActiveChild;
   /*************
    * Lifecycle *
    *************/
@@ -106,6 +140,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-action-more/mg-action-more.conf.d.ts

@@ -0,0 +1,42 @@
+import { MgBadge } from '../../atoms/mg-badge/mg-badge';
+import { MgButton } from '../../atoms/mg-button/mg-button';
+import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';
+/**
+ * prop icon type
+ */
+export type MgActionMoreIconType = {
+  icon: MgIcon['icon'];
+};
+/**
+ * prop button type
+ */
+export type MgActionMoreButtonType = {
+  isIcon: MgButton['isIcon'];
+  variant: MgButton['variant'];
+  label?: MgButton['label'];
+};
+/**
+ * locals message type
+ */
+export type MgActionMoreMessageType = {
+  label: string;
+};
+/**
+ * prop item type
+ */
+export type MgActionMoreItemType = {
+  label: string;
+  mouseEventHandler: IMouseEventHandler;
+  status?: MgMenuItem['status'];
+  icon?: MgIcon['icon'];
+  href?: MgMenuItem['href'];
+  badge?: Pick<MgBadge, 'value' | 'label'>;
+};
+/**
+ * MouseEvent callback interface
+ */
+interface IMouseEventHandler {
+  (event: MouseEvent): void;
+}
+export {};

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

@@ -0,0 +1,81 @@
+import { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType } from './mg-action-more.conf';
+export declare class MgActionMore {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private readonly mgPopoverIdentifier;
+  private messages;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgActionMoreElement;
+  /**
+   * Define displaied icon
+   * Default: {icon: 'ellipsis'}
+   */
+  icon: MgActionMoreIconType;
+  validateIcon(newValue: MgActionMore['icon']): void;
+  /**
+   * Define button properties
+   * Default: {variant: 'flat', isIcon: true}.
+   */
+  button: MgActionMoreButtonType;
+  validateButton(newValue: MgActionMore['button']): void;
+  /**
+   * Define the menu-items elements
+   */
+  items: MgActionMoreItemType[];
+  validateItems(newValue: MgActionMore['items']): void;
+  /**
+   * Define if chevron is display
+   */
+  displayChevron: boolean;
+  validateDisplayChevron(newValue: MgActionMore['displayChevron']): void;
+  /**
+   * Menu expanded state
+   * Default: false.
+   */
+  expanded: boolean;
+  /************
+   * Merthods *
+   ***********/
+  /**
+   * Toogle expanded props
+   *
+   * @returns {void}
+   */
+  private toggleExpanded;
+  /**
+   * Button click handler
+   *
+   * @returns {void}
+   */
+  private handleButton;
+  /**
+   * Item click handler
+   *
+   * @param {MouseEvent} event click event
+   * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
+   * @returns {void}
+   */
+  private handleItemClick;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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-pagination/mg-pagination.d.ts

@@ -21,6 +21,10 @@ export declare class MgPagination {
    * Customize default value can be usefull to improve accessibility
    */
   label: string;
+  /**
+   * Hide navigation label
+   */
+  hideNavigationLabels: boolean;
   /**
    * Component total pages
    */

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
 import { Placement } from '@popperjs/core';
 export declare class MgPopover {
   /************
@@ -7,7 +8,10 @@ export declare class MgPopover {
   private popper;
   private popover;
   private closeButtonId;
+  private windows;
+  private resizeObserver;
   private messages;
+  private readonly classArrowHide;
   /**************
    * Decorators *
    **************/
@@ -24,6 +28,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 +46,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
    *