@mgdis/mg-components 5.29.0 → 6.1.0

package/dist/types/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.d.ts

@@ -1,4 +1,7 @@
 import type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';
+/**
+ * @internal
+ */
 export declare class MgItemMore {
     /************
      * Internal *

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

@@ -1,11 +1,13 @@
-import { MgItemMore } from '../../mg-item-more/mg-item-more';
+import type { Size } from '../../../../types';
+import type { MgItemMore } from '../../internals/mg-item-more/mg-item-more';
 /**
  * Menu direction type
  */
-export declare enum Direction {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
+export type DirectionType = 'vertical' | 'horizontal';
+/**
+ * Menu direction values
+ */
+export declare const Direction: Record<string, DirectionType>;
 /**
  * ItemMore prop type
  */
@@ -13,8 +15,8 @@ export type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;
 /**
  * List of all possibles sizes
  */
-export declare const sizes: readonly ["regular", "medium", "large"];
+export declare const sizes: readonly ["medium", "large", "xlarge"];
 /**
  * item Size from sizes
  */
-export type MenuSizeType = (typeof sizes)[number];
+export type MenuSizeType = Size & (typeof sizes)[number];

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

@@ -1,5 +1,4 @@
-import { Direction } from './mg-menu.conf';
-import type { MenuSizeType, ItemMoreType } from './mg-menu.conf';
+import type { MenuSizeType, ItemMoreType, DirectionType } from './mg-menu.conf';
 /**
  * @slot - Menu content
  */
@@ -27,7 +26,7 @@ export declare class MgMenu {
     /**
      * Component display direction.
      */
-    direction: Direction;
+    direction: DirectionType;
     validateDirection(newValue: MgMenu['direction']): void;
     /**
      * Customize "mg-item-more" element

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

@@ -1,24 +1,12 @@
-import { MgMenu } from '../mg-menu/mg-menu';
+import { Status as StatusType } from '../../../../types';
 /**
- * Available menu-item positions
+ * Available menu item status type
  */
-export declare enum ElementPosition {
-    FIRST = "first",
-    LAST = "last"
-}
+export type MgMenuStatusType = StatusType & ('visible' | 'hidden' | 'disabled' | 'active');
 /**
- * Available menu item status
+ * Available menu item status values
  */
-export declare enum Status {
-    VISIBLE = "visible",
-    HIDDEN = "hidden",
-    DISABLED = "disabled",
-    ACTIVE = "active"
-}
-/**
- * Direction type
- */
-export type DirectionType = MgMenu['direction'];
+export declare const Status: Record<string, StatusType>;
 /**
  * List of all possibles target
  */

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

@@ -1,8 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { Status } from './mg-menu-item.conf';
-import type { MenuSizeType } from '../mg-menu/mg-menu.conf';
-import type { DirectionType, TargetType } from './mg-menu-item.conf';
+import { type MenuSizeType, type DirectionType } from '../mg-menu/mg-menu.conf';
+import { type MgMenuStatusType, type TargetType } from './mg-menu-item.conf';
 /**
  * @slot - Menu item content
  * @slot image - Menu item image content
@@ -31,6 +30,7 @@ export declare class MgMenuItem {
      * Identifier is used to control mg-popover
      */
     identifier: string;
+    watchIdentifier(newValue: MgMenuItem['identifier']): void;
     /**
      * Define menu-item href
      * when defined menu-item contain an anchor instead of button
@@ -44,7 +44,7 @@ export declare class MgMenuItem {
     /**
      * Define menu-item status.
      */
-    status?: Status;
+    status?: MgMenuStatusType;
     validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
     /**
      * Define menu-item content expanded.
@@ -196,6 +196,7 @@ export declare class MgMenuItem {
     private renderSlot;
     /**
      * Emit event when component is updated
+     * @returns promise process wich emit the 'item-updated' event
      */
     componentShouldUpdate(): Promise<void>;
     /**

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

@@ -22,9 +22,15 @@ export type MgActionMoreMessageType = {
 export type MgActionMoreItemType = Pick<MgMenuItem, 'status' | 'href' | 'target'> & {
     label: string;
     mouseEventHandler: IMouseEventHandler;
-    icon?: MgIcon['icon'];
+    icon?: Pick<MgIcon, 'icon'> & Partial<Pick<MgIcon, 'variant' | 'variantStyle'>>;
     badge?: Pick<MgBadge, 'value' | 'label'>;
 };
+/**
+ * prop item divider type
+ */
+export type MgActionMoreDividerType = {
+    isDivider: boolean;
+};
 /**
  * MouseEvent callback interface
  */

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

@@ -1,4 +1,4 @@
-import type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType } from './mg-action-more.conf';
+import type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreDividerType } from './mg-action-more.conf';
 export declare class MgActionMore {
     /************
      * Internal *
@@ -17,7 +17,7 @@ export declare class MgActionMore {
     /**
      * Define the menu-items elements
      */
-    items: MgActionMoreItemType[];
+    items: (MgActionMoreItemType | MgActionMoreDividerType)[];
     validateItems(newValue: MgActionMore['items']): void;
     /**
      * Define displayed icon

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

@@ -0,0 +1,17 @@
+import type { Variant, VariantStyle } from '../../../types';
+/**
+ * List available variants
+ */
+export declare const variants: readonly ["info", "warning", "success", "danger"];
+/**
+ * Variant type
+ */
+export type VariantType = Variant & (typeof variants)[number];
+/**
+ * List available variant styles
+ */
+export declare const variantStyles: readonly ["bar-left", "background"];
+/**
+ * VariantStyle type
+ */
+export type VariantStyleType = VariantStyle & (typeof variantStyles)[number];

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

@@ -0,0 +1,89 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '@mgdis/stencil-helpers';
+import { VariantStyleType, VariantType } from './mg-alert.conf';
+/**
+ * @slot - Alert content
+ * @slot actions - Actions content
+ */
+export declare class MgAlert {
+    /************
+     * Internal *
+     ************/
+    private readonly classCloseButton;
+    private storedTimer;
+    private isFocused;
+    private isHovered;
+    private messages;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgAlertElement;
+    /**
+     * Add a delay to hide/close message when it passed
+     * Value is defined in seconds and must greater than 2 seconds
+     */
+    delay?: number;
+    watchDelay(newValue: MgAlert['delay']): void;
+    /**
+     * Define variant
+     */
+    variant?: VariantType;
+    watchVariant(newValue: MgAlert['variant']): void;
+    /**
+     * Define variant style
+     */
+    variantStyle?: VariantStyleType;
+    watchVariantStyle(newValue: MgAlert['variantStyle']): void;
+    /**
+     * Watch hidden prop
+     */
+    watchHidden(newValue: boolean): void;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Define if component is using actions slot
+     */
+    hasActions: boolean;
+    /**
+     * Emited event when alert is diplayed
+     */
+    componentShow: EventEmitter<void>;
+    /**
+     * Emited event when alert is hidden
+     */
+    componentHide: EventEmitter<void>;
+    /**
+     * Set timer
+     */
+    private setTimer;
+    /**
+     * Clear timer
+     */
+    private clearTimer;
+    /**
+     * Event to add on element
+     * @param event - event
+     */
+    private timerEvents;
+    /**
+     * Handle close button
+     */
+    private handleClose;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

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

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @slot summary - Summary content
+ * @slot details - Details content
+ */
 export declare class MgDetails {
     /************
      * Internal *

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

@@ -1,6 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { AriaRoleType, RequiredMessageStatusType } from './mg-form.conf';
+/**
+ * @slot - Form content
+ * @slot actions - Actions content
+ */
 export declare class MgForm {
     /************
      * Internal *
@@ -22,6 +26,7 @@ export declare class MgForm {
      * If not set, it will be created.
      */
     identifier: string;
+    watchIdentifier(newValue: MgForm['identifier']): void;
     /**
      * Input name
      * If not set the value equals the identifier

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

@@ -0,0 +1,10 @@
+import type { Size } from '../../../types';
+/**
+ * List of all possibles sizes
+ */
+declare const sizes: readonly ["medium", "small"];
+/**
+ * IllustratedMessage size type
+ */
+export type IllustratedMessageSizeType = Size & (typeof sizes)[number];
+export {};

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

@@ -1,3 +1,9 @@
+import type { IllustratedMessageSizeType } from './mg-illustrated-message.conf';
+/**
+ * @slot illustration - Illustration content
+ * @slot title - Title content
+ * @slot details - Details content
+ */
 export declare class MgIllustratedMessage {
     /**************
      * Decorators *
@@ -9,7 +15,7 @@ export declare class MgIllustratedMessage {
     /**
      * Define illustration size
      */
-    size: 'regular' | 'small';
+    size: IllustratedMessageSizeType;
     /**
      * Define component orientation
      */

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

@@ -1,8 +1,17 @@
+import type { Variant, VariantStyle } from '../../../types';
 /**
- * List of all possibles message variants
+ * List available variants
  */
 export declare const variants: readonly ["info", "warning", "success", "danger"];
 /**
  * Variant type
  */
-export type VariantType = (typeof variants)[number];
+export type VariantType = Variant & (typeof variants)[number];
+/**
+ * List available variant styles
+ */
+export declare const variantStyles: readonly ["bar-left", "background"];
+/**
+ * VariantStyle type
+ */
+export type VariantStyleType = VariantStyle & (typeof variantStyles)[number];

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

@@ -1,16 +1,14 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { VariantType } from './mg-message.conf';
+import { VariantStyleType, VariantType } from './mg-message.conf';
+/**
+ * @slot - Message content
+ * @slot actions - Actions content
+ */
 export declare class MgMessage {
     /************
      * Internal *
      ************/
-    private readonly classHide;
-    private closeButtonId;
-    private storedTimer;
-    private isFocused;
-    private isHovered;
-    private messages;
+    private readonly classBase;
     /**************
      * Decorators *
      **************/
@@ -19,39 +17,15 @@ export declare class MgMessage {
      */
     element: HTMLMgMessageElement;
     /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    identifier: string;
-    /**
-     * Add a delay to hide/close message when it passed
-     * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)
-     */
-    delay?: number;
-    validateDelay(newValue: MgMessage['delay']): void;
-    /**
-     * Message variant
+     * Define variant
      */
     variant: VariantType;
-    validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void;
-    /**
-     * Define if message has a cross button
-     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
-     */
-    closeButton: boolean;
-    validateCloseButton(newValue: MgMessage['closeButton']): void;
-    /**
-     * Define if message is hidden
-     */
-    hide: boolean;
-    validateHide(newValue: MgMessage['hide']): void;
+    watchVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void;
     /**
-     * Define if aria role is unset
-     * For a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.
-     * By toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.
-     * Be careful to set the mode according to the context needs.
+     * Define variant style
      */
-    noAriaRole?: boolean;
+    variantStyle: VariantStyleType;
+    watchVariantStyle(newValue: MgMessage['variantStyle'], oldValue?: MgMessage['variantStyle']): void;
     /**
      * Component classes
      */
@@ -60,31 +34,6 @@ export declare class MgMessage {
      * Define if component is using actions slot
      */
     hasActions: boolean;
-    /**
-     * Emited event when message is diplayed
-     */
-    componentShow: EventEmitter<void>;
-    /**
-     * Emited event when message is hidden
-     */
-    componentHide: EventEmitter<void>;
-    /**
-     * Set timer
-     */
-    private setTimer;
-    /**
-     * Clear timer
-     */
-    private clearTimer;
-    /**
-     * Event to add on element
-     * @param event - event
-     */
-    private timerEvents;
-    /**
-     * Handle close button
-     */
-    private handleClose;
     /**
      * Get icon corresponding to variant
      * @returns icon

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

@@ -1,13 +1,15 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { DialogRoleType } from './mg-modal.conf';
+/**
+ * @slot - Modal content
+ * @slot actions - Actions content
+ */
 export declare class MgModal {
     /************
      * Internal *
      ************/
-    private modalFocusableElements;
-    private closeButtonElement;
-    private readonly classHide;
+    private dialog;
     private titleId;
     private messages;
     private bodyOverflow;
@@ -23,6 +25,7 @@ export declare class MgModal {
      * If not set, it will be created.
      */
     identifier: string;
+    watchIdentifier(newValue: MgModal['identifier']): void;
     /**
      * Modal dialog role.
      */
@@ -38,18 +41,14 @@ export declare class MgModal {
      */
     closeButton: boolean;
     /**
-     * Define if modal is hidden
+     * Define if modal is open
      */
-    hide: boolean;
-    validateHide(newValue: MgModal['hide']): void;
+    open: boolean;
+    watchOpen(newValue: boolean): void;
     /**
      * Define if component is using actions slot
      */
     hasActions: boolean;
-    /**
-     * Define if component is using content slot
-     */
-    hasContent: boolean;
     /**
      * Component classes
      */
@@ -62,35 +61,11 @@ export declare class MgModal {
      * Emmited event when modal is hidden
      */
     componentHide: EventEmitter<void>;
+    /***********
+     * Handles *
+     ***********/
     /**
-     * Handle 'escape' key down
-     * @param event - keydown event
-     */
-    handleKeyDown(event: KeyboardEvent): void;
-    /**
-     * Handle last focusable element
-     * @param event - keyboard event
-     */
-    private handleLastFocusableElement;
-    /**
-     * Handle first focusable element
-     * @param event - keyboard event
-     */
-    private handleFirstFocusableElement;
-    /**
-     * Get last focusablmeElement
-     * @returns last modal focusable element
-     */
-    private getLastFocusableElement;
-    /**
-     * Method to manage focus on modal focusable elements
-     */
-    private setFocus;
-    /*************
-     * Handlers *
-     *************/
-    /**
-     * Handle close button
+     * Closes the modal.
      */
     private handleClose;
     /*************
@@ -101,7 +76,7 @@ export declare class MgModal {
      */
     componentWillLoad(): void;
     /**
-     * Add observer on component to set focus when displayed
+     * Define open state on component load
      */
     componentDidLoad(): void;
     /**

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

@@ -1,4 +1,4 @@
-export declare enum NavigationAction {
-    NEXT = "next",
-    PREVIOUS = "previous"
-}
+export declare const NavigationAction: {
+    NEXT: string;
+    PREVIOUS: string;
+};

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

@@ -16,6 +16,7 @@ export declare class MgPagination {
      * If not set, it will be created.
      */
     identifier: string;
+    watchIdentifier(newValue: MgPagination['identifier']): void;
     /**
      * Panignation label. Is a short description.
      * Customize default value can be usefull to improve accessibility

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

@@ -1,6 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
+/**
+ * @slot - Panel content
+ * @slot header-right - Header right panel content
+ */
 export declare class MgPanel {
     /************
      * Internal *
@@ -19,6 +23,7 @@ export declare class MgPanel {
      * If not set, it will be created.
      */
     identifier: string;
+    watchIdentifier(newValue: MgPanel['identifier']): void;
     /**
      * Panel title
      */

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

@@ -24,7 +24,7 @@ export declare class MgPopover {
      * Needed by the input for accessibility `aria-decribedby`.
      */
     identifier: string;
-    validateIdentifier(): void;
+    validateIdentifier(newValue: MgPopover['identifier']): void;
     /**
      * Popover placement
      */

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

@@ -1,14 +1,10 @@
-import { MgBadge } from '../../atoms/mg-badge/mg-badge';
-import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import type { Size, Status as StatusType } from '../../../types';
+import type { MgBadge } from '../../atoms/mg-badge/mg-badge';
+import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
 /**
  * Available tabs items status
  */
-export declare enum Status {
-    VISIBLE = "visible",
-    HIDDEN = "hidden",
-    DISABLED = "disabled",
-    ACTIVE = "active"
-}
+export declare const Status: Record<string, StatusType>;
 /**
  * type TabItem
  * use to match tabs items
@@ -19,13 +15,13 @@ export type TabItem = {
     badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & {
         role: 'notification' | 'information';
     };
-    status: Status;
+    status: StatusType;
 };
 /**
  * List of all possibles sizes
  */
-export declare const sizes: readonly ["regular", "large"];
+export declare const sizes: readonly ["medium", "large"];
 /**
  * Variant type from variants
  */
-export type SizeType = (typeof sizes)[number];
+export type SizeType = Size & (typeof sizes)[number];

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

@@ -24,6 +24,7 @@ export declare class MgTabs {
      * If not set, it will be created.
      */
     identifier: string;
+    watchIdentifier(newValue: MgTabs['identifier']): void;
     /**
      * Tabs label. Include short tabs description.
      * Required for accessibility
@@ -99,6 +100,11 @@ export declare class MgTabs {
      * @param event - mouse event
      */
     private handleKeydown;
+    /**
+     * Reset focus on document click
+     * @param event - mouse event
+     */
+    private handleDocumentClick;
     /**
      * Method to reset focus behavior
      */
@@ -118,6 +124,10 @@ export declare class MgTabs {
      * add listners
      */
     componentDidLoad(): void;
+    /**
+     * remove listeners
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element