@mgdis/mg-components 5.20.0 → 5.21.1

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

@@ -27,6 +27,10 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
      * Define mg-input-checkbox input invalid
      */
     invalid: boolean;
+    /**
+     * Current page
+     */
+    currentPage: number;
     /**
      * Define checkboxes to paginate
      */
@@ -50,10 +54,6 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
      * Define section title
      */
     titleKind: SectionTitleKind;
-    /**
-     * Current page
-     */
-    currentPage: number;
     /**
      * Is checked items values expanded
      */

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

@@ -15,7 +15,7 @@ export declare class MgActionMore {
      */
     element: HTMLMgActionMoreElement;
     /**
-     * Define displaied icon
+     * Define displayed icon
      */
     icon: MgActionMoreIconType;
     validateIcon(newValue: MgActionMore['icon']): void;

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,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
+import { AriaRoleType, RequiredMessageStatusType } from './mg-form.conf';
 export declare class MgForm {
     /************
      * Internal *
@@ -29,6 +30,22 @@ export declare class MgForm {
      * 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
      */
@@ -49,7 +66,7 @@ export declare class MgForm {
     /**
      * Required message
      */
-    requiredMessage: string;
+    requiredMessageText: string;
     /**
      * Emitted event on form validity check
      * Tells if form is valid or not

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

@@ -5,8 +5,10 @@ export declare class MgItemMore {
      ************/
     private readonly name;
     private messages;
-    private menuItems;
+    private parentMenuItems;
+    private moreElementMenuItem;
     private overflowBehavior;
+    private canRenderMgMenuItemOverflowElement;
     /**************
      * Decorators *
      **************/
@@ -44,18 +46,22 @@ export declare class MgItemMore {
     /*************
      * Lifecycle *
      *************/
-    /**
-     * Disconnect overflow ResizeObserver
-     */
-    disconnectedCallback(): void;
     /**
      * Set variables and validate props
      */
     componentWillLoad(): void;
     /**
-     * Add overflow behavior
+     * Ensure parent DOM is fully rendered with timeout method before parse elements
+     */
+    componentDidLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Set OverflowBehavior when parentMenu state is upate AND defined
      */
-    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * Disconnect overflow ResizeObserver
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -61,6 +61,16 @@ export declare class MgPopover {
      * Hide popover
      */
     private hide;
+    /**
+     * Set popper listeners
+     * @param newValue - if true enable popper listners
+     */
+    private setPopperListeners;
+    /**
+     * Manage all clickOustside listeners
+     * @param action top process on elements listeners
+     */
+    private manageClickOutsideListeners;
     /**
      * Handle content hide event
      */

package/dist/types/components.d.ts

@@ -9,6 +9,7 @@ import { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } fr
 import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 import { VariantStyleType, VariantType as VariantType1 } from "./components/atoms/mg-card/mg-card.conf";
+import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Width } from "./components/molecules/inputs/MgInput.conf";
@@ -30,6 +31,7 @@ export { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } fr
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 export { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 export { VariantStyleType, VariantType as VariantType1 } from "./components/atoms/mg-card/mg-card.conf";
+export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 export { Width } from "./components/molecules/inputs/MgInput.conf";
@@ -58,7 +60,7 @@ export namespace Components {
          */
         "displayChevron": boolean;
         /**
-          * Define displaied icon
+          * Define displayed icon
          */
         "icon": MgActionMoreIconType;
         /**
@@ -171,6 +173,10 @@ export namespace Components {
         "size": 'regular' | 'full';
     }
     interface MgForm {
+        /**
+          * 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;
         /**
           * Define if form is disabled
          */
@@ -195,6 +201,10 @@ export namespace Components {
           * 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;
         /**
           * Define form valid state
          */
@@ -316,6 +326,10 @@ export namespace Components {
           * Define checkboxes to paginate
          */
         "checkboxes": CheckboxItem[];
+        /**
+          * Current page
+         */
+        "currentPage": number;
         /**
           * Define if mg-input-checkbox-list is disabled
          */
@@ -1887,7 +1901,7 @@ declare namespace LocalJSX {
          */
         "displayChevron"?: boolean;
         /**
-          * Define displaied icon
+          * Define displayed icon
          */
         "icon"?: MgActionMoreIconType;
         /**
@@ -2008,6 +2022,10 @@ declare namespace LocalJSX {
         "size"?: 'regular' | 'full';
     }
     interface MgForm {
+        /**
+          * 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;
         /**
           * Define if form is disabled
          */
@@ -2036,6 +2054,10 @@ declare namespace LocalJSX {
           * 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;
         /**
           * Define form valid state
          */
@@ -2155,6 +2177,10 @@ declare namespace LocalJSX {
           * Define checkboxes to paginate
          */
         "checkboxes"?: CheckboxItem[];
+        /**
+          * Current page
+         */
+        "currentPage"?: number;
         /**
           * Define if mg-input-checkbox-list is disabled
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.20.0",
+  "version": "5.21.1",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "4.8.2",
-    "@mgdis/img": "1.5.0",
-    "@mgdis/styles": "1.0.0"
+    "@stencil/core": "4.9.0",
+    "@mgdis/img": "1.6.0",
+    "@mgdis/styles": "1.0.2"
   },
   "devDependencies": {
     "@playwright/test": "1.40.1",
@@ -58,11 +58,11 @@
     "sass": "^1.69.5",
     "storybook": "^7.5.3",
     "ts-node": "^10.9.1",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
+    "@mgdis/linting-stencil": "1.1.0",
     "@mgdis/playwright-helpers": "1.0.0",
     "tsconfig": "1.0.0",
-    "eslint-config-stencil": "1.1.1",
-    "@mgdis/linting-stencil": "1.1.0"
+    "eslint-config-stencil": "1.1.1"
   },
   "license": "BSD-3-Clause",
   "scripts": {