@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -2,7 +2,7 @@
  * type CheckboxItem
  * use to match checkbox attributes
  */
-export declare type CheckboxItem = {
+export type CheckboxItem = {
   id: string;
   title: string;
   value: boolean | null;
@@ -12,7 +12,7 @@ export declare type CheckboxItem = {
  * type CheckboxValue
  * use to match returned value
  */
-export declare type CheckboxValue = {
+export type CheckboxValue = {
   title: string;
   value: boolean | null;
   disabled?: boolean;

package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.conf.d.ts

@@ -2,7 +2,7 @@
  * type RadioOption
  * use to match radio attributes
  */
-export declare type RadioOption = {
+export type RadioOption = {
   title: string;
   value: unknown;
   disabled?: boolean;

package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.conf.d.ts

@@ -2,7 +2,7 @@
  * type SelectOption
  * use to match select>option attributes
  */
-export declare type SelectOption = {
+export type SelectOption = {
   title: string;
   value: unknown;
   disabled?: boolean;
@@ -12,7 +12,7 @@ export declare type SelectOption = {
  * type OptGroup
  * use to match select>optgroup attributes
  */
-export declare type OptGroup = {
+export type OptGroup = {
   group: string;
   options: SelectOption[];
 };

package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.d.ts

@@ -2,7 +2,7 @@
  * type ToggleValue
  * use to match toggle input attributes
  */
-export declare type ToggleValue = {
+export type ToggleValue = {
   title: string;
   value: unknown;
 };

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

@@ -9,6 +9,11 @@ declare const _default: {
         type: string;
       };
     };
+    moreitem: {
+      control: {
+        type: string;
+      };
+    };
   };
 };
 export default _default;

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/doc/mg-menu-item.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const MgMenuItem: any;
+export declare const MgMenuItemAsLink: any;
 export declare const MgMenuItemWhitIcon: any;
 export declare const MgMenuItemWhitBadge: any;
 export declare const MgMenuItemWhitBadgeAndIcon: any;

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

@@ -6,7 +6,7 @@ export declare class MgForm {
    ************/
   private mgInputs;
   private mgButtons;
-  private classAllRequired;
+  private readonly classAllRequired;
   private form;
   private messages;
   /**************

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

@@ -4,9 +4,11 @@ export declare class MgMessage {
   /************
    * Internal *
    ************/
-  private classHide;
+  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-modal/mg-modal.d.ts

@@ -5,7 +5,7 @@ export declare class MgModal {
    * Internal *
    ************/
   private modalFocusableElements;
-  private classHide;
+  private readonly classHide;
   private closeButtonId;
   private titleId;
   private messages;

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/doc/mg-skip-links.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgSkipLinks: any;

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

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

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SkipLink } from './mg-skip-links.conf';
+export declare class MgSkipLinks {
+  /************
+   * Internal *
+   ************/
+  private messages;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgSkipLinksElement;
+  /**
+   * Skip links
+   */
+  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 *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -5,9 +5,10 @@ export declare class MgTabs {
   /************
    * Internal *
    ************/
-  private tabPanel;
+  private readonly tabPanel;
+  private readonly buttonTabBaseClass;
+  private tabFocus;
   private startIndex;
-  private buttonTabBaseClass;
   /**************
    * 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
    *