@mgdis/mg-components 5.19.3 → 5.21.0

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

@@ -1,75 +1,75 @@
 import { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType } from './mg-action-more.conf';
 export declare class MgActionMore {
-  /************
-   * Internal *
-   ************/
-  private readonly name;
-  private readonly classBase;
-  private readonly mgPopoverIdentifier;
-  private messages;
-  /**************
-   * Decorators *
-   **************/
-  /**
-   * Get component DOM element
-   */
-  element: HTMLMgActionMoreElement;
-  /**
-   * Define displaied icon
-   */
-  icon: MgActionMoreIconType;
-  validateIcon(newValue: MgActionMore['icon']): void;
-  /**
-   * Define button properties
-   */
-  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
-   */
-  expanded: boolean;
-  /************
-   * Methods *
-   ***********/
-  /**
-   * Toggle expanded props
-   */
-  private toggleExpanded;
-  /**
-   * Handle popover display change value
-   * @param event - display change updated value
-   */
-  private handleDisplayChange;
-  /**
-   * Button click handler
-   */
-  private handleButton;
-  /**
-   * Item click handler
-   * @param event - click event
-   * @param customHandler - item['mouseEventHandler']
-   */
-  private handleItemClick;
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Validate props
-   */
-  componentWillLoad(): void;
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render(): HTMLElement;
+    /************
+     * Internal *
+     ************/
+    private readonly name;
+    private readonly classBase;
+    private readonly mgPopoverIdentifier;
+    private messages;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgActionMoreElement;
+    /**
+     * Define displaied icon
+     */
+    icon: MgActionMoreIconType;
+    validateIcon(newValue: MgActionMore['icon']): void;
+    /**
+     * Define button properties
+     */
+    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
+     */
+    expanded: boolean;
+    /************
+     * Methods *
+     ***********/
+    /**
+     * Toggle expanded props
+     */
+    private toggleExpanded;
+    /**
+     * Handle popover display change value
+     * @param event - display change updated value
+     */
+    private handleDisplayChange;
+    /**
+     * Button click handler
+     */
+    private handleButton;
+    /**
+     * Item click handler
+     * @param event - click event
+     * @param customHandler - item['mouseEventHandler']
+     */
+    private handleItemClick;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Validate props
+     */
+    componentWillLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
 }

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

@@ -1,48 +1,48 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class MgDetails {
-  /************
-   * Internal *
-   ************/
-  private details;
-  /**************
-   * Decorators *
-   **************/
-  /**
-   * Displayed title when details are closed
-   */
-  toggleClosed: string;
-  /**
-   * Displayed title when details are opened
-   */
-  toggleOpened: string;
-  validateTitles(newValue: string): void;
-  /**
-   * Hide summary element
-   */
-  hideSummary: boolean;
-  /**
-   * Define if details are diplayed
-   */
-  expanded: boolean;
-  handleExpanded(newValue: boolean): void;
-  /**
-   * Emmited event when expanded change
-   */
-  expandedChange: EventEmitter<boolean>;
-  /**
-   * Handle details toggle
-   */
-  private handleToggle;
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad(): void;
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render(): HTMLElement;
+    /************
+     * Internal *
+     ************/
+    private details;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Displayed title when details are closed
+     */
+    toggleClosed: string;
+    /**
+     * Displayed title when details are opened
+     */
+    toggleOpened: string;
+    validateTitles(newValue: string): void;
+    /**
+     * Hide summary element
+     */
+    hideSummary: boolean;
+    /**
+     * Define if details are diplayed
+     */
+    expanded: boolean;
+    handleExpanded(newValue: boolean): void;
+    /**
+     * Emmited event when expanded change
+     */
+    expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;
+    /**
+     * Handle details toggle
+     */
+    private handleToggle;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
 }

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

@@ -0,0 +1,16 @@
+/**
+ * List of all possibles roles
+ */
+export declare const roles: readonly ["form", "search", "none", "presentation"];
+/**
+ * Aria Role type from roles
+ */
+export type AriaRoleType = (typeof roles)[number];
+/**
+ * List of all possibles required message status
+ */
+export declare const requiredMessageStatus: readonly ["default", "hide"];
+/**
+ * RequiredMessageStatus type from requiredMessageStatus
+ */
+export type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];

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

@@ -1,107 +1,124 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
+import { AriaRoleType, RequiredMessageStatusType } from './mg-form.conf';
 export declare class MgForm {
-  /************
-   * Internal *
-   ************/
-  private mgInputs;
-  private mgButtons;
-  private readonly classAllRequired;
-  private messages;
-  /**************
-   * Decorators *
-   **************/
-  /**
-   * Get component DOM element
-   */
-  element: HTMLMgFormElement;
-  /**
-   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-   * If not set, it will be created.
-   */
-  identifier: string;
-  /**
-   * Input name
-   * If not set the value equals the identifier
-   */
-  name: string;
-  /**
-   * Define if form is readonly
-   */
-  readonly: boolean;
-  /**
-   * Define if form is disabled
-   */
-  disabled: boolean;
-  handleAttributeChange(): void;
-  /**
-   * Define form valid state
-   */
-  valid: boolean;
-  /**
-   * Define form invalid state
-   */
-  invalid: boolean;
-  /**
-   * Component classes
-   */
-  classCollection: ClassList;
-  /**
-   * Required message
-   */
-  requiredMessage: string;
-  /**
-   * Emitted event on form validity check
-   * Tells if form is valid or not
-   */
-  formValid: EventEmitter<boolean>;
-  /**
-   * Emitted event on form submit
-   */
-  formSubmit: EventEmitter<boolean>;
-  /**
-   * Display input error if it exists.
-   */
-  displayError(): Promise<void>;
-  /**
-   * Define required message based on mg-inputs required elements
-   */
-  private setRequiredMessage;
-  /**
-   * Returns a required message based on the count of required inputs.
-   * @param requiredInputs - An array of required input elements.
-   * @param keySingle - The key for the singular message format.
-   * @param keyPlural - The key for the plural message format.
-   * @returns The appropriate required message based on the count of required inputs.
-   */
-  private getRequiredMessageBasedOnCount;
-  /**
-   * Check if form is valid
-   */
-  private checkValidity;
-  /**
-   * Handle Form Submit
-   * @param event - submit event
-   */
-  private handleFormSubmit;
-  /**
-   * Set mgInputs
-   */
-  private setMgInputs;
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad(): void;
-  /**
-   * Add slot listeners
-   */
-  componentDidLoad(): void;
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render(): HTMLElement;
+    /************
+     * Internal *
+     ************/
+    private mgInputs;
+    private mgButtons;
+    private readonly classAllRequired;
+    private messages;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgFormElement;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    identifier: string;
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Define if form is readonly
+     */
+    readonly: boolean;
+    /**
+     * Define when required message is display.
+     * When it is unset, component use it internal logic to manage "required message" help text display.
+     * When you set the prop to `default`, you override the component internal logique to torce it display "required message" help text.
+     * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.
+     * As **this element is an accessibility requirement in the view**,
+     * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.
+     */
+    requiredMessage: RequiredMessageStatusType;
+    validateRequiredMessage(newValue: any): void;
+    /**
+     * Define `<form/>` element aria role
+     * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+     */
+    ariaRole: AriaRoleType;
+    validateAriaRole(newValue: MgForm['ariaRole']): void;
+    /**
+     * Define if form is disabled
+     */
+    disabled: boolean;
+    handleAttributeChange(): void;
+    /**
+     * Define form valid state
+     */
+    valid: boolean;
+    /**
+     * Define form invalid state
+     */
+    invalid: boolean;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Required message
+     */
+    requiredMessageText: string;
+    /**
+     * Emitted event on form validity check
+     * Tells if form is valid or not
+     */
+    formValid: EventEmitter<HTMLMgFormElement['valid']>;
+    /**
+     * Emitted event on form submit
+     */
+    formSubmit: EventEmitter<boolean>;
+    /**
+     * Display input error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Define required message based on mg-inputs required elements
+     */
+    private setRequiredMessage;
+    /**
+     * Returns a required message based on the count of required inputs.
+     * @param requiredInputs - An array of required input elements.
+     * @param keySingle - The key for the singular message format.
+     * @param keyPlural - The key for the plural message format.
+     * @returns The appropriate required message based on the count of required inputs.
+     */
+    private getRequiredMessageBasedOnCount;
+    /**
+     * Check if form is valid
+     */
+    private checkValidity;
+    /**
+     * Handle Form Submit
+     * @param event - submit event
+     */
+    private handleFormSubmit;
+    /**
+     * Set mgInputs
+     */
+    private setMgInputs;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Add slot listeners
+     */
+    componentDidLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
 }

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

@@ -1,29 +1,29 @@
 export declare class MgIllustratedMessage {
-  /**************
-   * Decorators *
-   **************/
-  /**
-   * Get component DOM element
-   */
-  element: HTMLMgIllustratedMessageElement;
-  /**
-   * Define illustration size
-   */
-  size: 'regular' | 'small';
-  /**
-   * Define component orientation
-   */
-  direction: 'vertical' | 'horizontal';
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentDidLoad(): void;
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render(): HTMLElement;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgIllustratedMessageElement;
+    /**
+     * Define illustration size
+     */
+    size: 'regular' | 'small';
+    /**
+     * Define component orientation
+     */
+    direction: 'vertical' | 'horizontal';
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentDidLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
 }

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

@@ -4,21 +4,21 @@ import { MgMenu } from '../menu/mg-menu/mg-menu';
  * message type
  */
 export type MessageType = {
-  moreLabel: string;
-  badgeLabel: string;
+    moreLabel: string;
+    badgeLabel: string;
 };
 /**
  * SlotLabel prop type
  */
 export type SlotLabelType = {
-  label?: string;
-  display?: boolean;
+    label?: string;
+    display?: boolean;
 };
 /**
  * icon prop type
  */
 export type IconType = {
-  icon: MgIcon['icon'];
+    icon: MgIcon['icon'];
 };
 /**
  * size type