@mgdis/mg-components 5.28.2 → 6.0.0

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { TextType } from './mg-input-text.conf';
+import { OptionType, TextType } from './mg-input-text.conf';
 import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 import { IconType } from '../../../../components';
 /**
@@ -17,6 +17,7 @@ export declare class MgInputText {
     private readonly classIsAppendInputSlotContent;
     private characterLeftId;
     private datalistId;
+    private slotContent;
     private input;
     private messages;
     private hasDisplayedError;
@@ -31,7 +32,7 @@ export declare class MgInputText {
     /**
      * Component value
      */
-    value: string;
+    value: any;
     handleValue(newValue: string): void;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
@@ -71,7 +72,7 @@ export declare class MgInputText {
     /**
      * Define datalist options
      */
-    datalistoptions: string[];
+    datalistoptions: string[] | OptionType[];
     validateDatalistoptions(newValue: MgInputText['datalistoptions']): void;
     /**
      * Input max length
@@ -118,7 +119,7 @@ export declare class MgInputText {
     /**
      * Define if component should display character left
      */
-    displayCharacterLeft: boolean;
+    characterLeftHide: boolean;
     /**
      * Add a help text under the input, usually expected data format and example
      */
@@ -207,6 +208,11 @@ export declare class MgInputText {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Renders the readonly content of the input component.
+     * @returns The readonly content element.
+     */
+    private renderReadonly;
     /**
      * Render
      * @returns HTML Element

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

@@ -6,7 +6,7 @@ export declare class MgInputTextarea {
      * Internal *
      ************/
     private readonly classFocus;
-    private readonly classHasDisplayCharacterLeft;
+    private readonly classDisplayCharacterLeft;
     private characterLeftId;
     private input;
     private messages;
@@ -99,8 +99,8 @@ export declare class MgInputTextarea {
     /**
      * Define if component should display character left
      */
-    displayCharacterLeft: boolean;
-    validateDisplayCharacterLeft(newValue: boolean): void;
+    characterLeftHide: boolean;
+    validatecharacterLeftHide(newValue: boolean): void;
     /**
      * Add a help text under the input, usually expected data format and example
      */

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

@@ -1,5 +1,5 @@
-import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
-import type { MgMenu } from '../menu/mg-menu/mg-menu';
+import type { MgMenu } from '../../menu/mg-menu/mg-menu';
+import type { MgIcon } from '../../../atoms/mg-icon/mg-icon';
 /**
  * SlotLabel prop type
  */

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
@@ -44,7 +43,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 +195,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 *

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;
@@ -38,18 +40,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 +60,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 +75,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-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 *

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];