@mgdis/mg-components 6.1.0 → 6.3.0

package/dist/types/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { MgActionMoreButtonType, MgActionMoreDividerType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 import { VariantStyleType, VariantType } from "./components/molecules/mg-alert/mg-alert.conf";
 import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
-import { ButtonType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
+import { ButtonType, SizeType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
 import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
@@ -20,20 +20,21 @@ import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-i
 import { OptionType, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 import { IconType as IconType1 } from "./components";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
-import { IconType as IconType2, SizeType, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
+import { IconType as IconType2, SizeType as SizeType1, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
 import { DirectionType, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 import { MgMenuStatusType, TargetType } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 import { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
 import { Placement } from "@popperjs/core";
+import { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
-import { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+import { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export { MgActionMoreButtonType, MgActionMoreDividerType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 export { VariantStyleType, VariantType } from "./components/molecules/mg-alert/mg-alert.conf";
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
-export { ButtonType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
+export { ButtonType, SizeType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
 export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 export { IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
@@ -45,15 +46,16 @@ export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-i
 export { OptionType, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 export { IconType as IconType1 } from "./components";
 export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
-export { IconType as IconType2, SizeType, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
+export { IconType as IconType2, SizeType as SizeType1, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
 export { DirectionType, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 export { MgMenuStatusType, TargetType } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 export { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 export { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 export { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
 export { Placement } from "@popperjs/core";
+export { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 export { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
-export { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+export { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 export { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
     interface MgActionMore {
@@ -131,6 +133,10 @@ export namespace Components {
           * aria-label In case button text is not explicit enough
          */
         "label"?: string;
+        /**
+          * Define button size
+         */
+        "size": SizeType;
         /**
           * Define button type
          */
@@ -217,6 +223,10 @@ export namespace Components {
           * 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;
+        /**
+          * Reset form inputs values, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Define form valid state
          */
@@ -353,6 +363,10 @@ export namespace Components {
           * Define if mg-input-checkbox is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Overwrite default "select" button message
          */
@@ -474,6 +488,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -574,6 +592,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -592,6 +614,14 @@ export namespace Components {
           * Define numeric type
          */
         "type": NumericType;
+        /**
+          * Define unit symbol (km, L, etc.)
+         */
+        "unit"?: Intl.NumberFormatOptions['unit'];
+        /**
+          * Define unit display format ('short', 'long', 'narrow')
+         */
+        "unitDisplay": Intl.NumberFormatOptions['unitDisplay'];
         /**
           * Define input pattern to validate
          */
@@ -658,6 +688,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -734,6 +768,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -822,6 +860,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -922,6 +964,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -1022,6 +1068,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => Promise<void>;
         /**
           * Define if input is resizable
          */
@@ -1116,6 +1166,10 @@ export namespace Components {
           * Define if input is readonly
          */
         "readonly": boolean;
+        /**
+          * Reset value, validity, error and visual state
+         */
+        "reset": () => Promise<void>;
         /**
           * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
           * @param valid - value indicating the validity
@@ -1143,7 +1197,7 @@ export namespace Components {
         /**
           * Define component child menu size.
          */
-        "size"?: SizeType;
+        "size"?: SizeType1;
         /**
           * Define slot label element
          */
@@ -1327,6 +1381,28 @@ export namespace Components {
          */
         "closeButton": boolean;
     }
+    interface MgProgress {
+        /**
+          * Define progress role - `progressbar` to indicate a progress, such as loading or percent completion of a task - `meter` to indicate a graphical display of a numeric value that varies within a defined range
+         */
+        "ariaRole"?: AriaRoleType1;
+        /**
+          * Define label
+         */
+        "label": string;
+        /**
+          * Define the maximum value in the range
+         */
+        "max"?: number;
+        /**
+          * Define the minimum value in the range
+         */
+        "min"?: number;
+        /**
+          * Define current value By default, it will be displayed as a percentage value. If you don’t specify the min and max props, the value should be a number within the range of 0 to 100.
+         */
+        "value"?: number;
+    }
     interface MgSkipLinks {
         /**
           * Skip links
@@ -1353,7 +1429,7 @@ export namespace Components {
         /**
           * Define tabs size
          */
-        "size": SizeType1;
+        "size": SizeType2;
     }
     interface MgTag {
         /**
@@ -1496,6 +1572,7 @@ declare global {
     interface HTMLMgAlertElementEventMap {
         "component-show": void;
         "component-hide": void;
+        "component-close": void;
     }
     interface HTMLMgAlertElement extends Components.MgAlert, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMgAlertElementEventMap>(type: K, listener: (this: HTMLMgAlertElement, ev: MgAlertCustomEvent<HTMLMgAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1839,6 +1916,7 @@ declare global {
     interface HTMLMgModalElementEventMap {
         "component-show": void;
         "component-hide": void;
+        "component-close": void;
     }
     interface HTMLMgModalElement extends Components.MgModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMgModalElementEventMap>(type: K, listener: (this: HTMLMgModalElement, ev: MgModalCustomEvent<HTMLMgModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1891,6 +1969,7 @@ declare global {
     };
     interface HTMLMgPopoverElementEventMap {
         "display-change": HTMLMgPopoverElement['display'];
+        "component-close": void;
     }
     interface HTMLMgPopoverElement extends Components.MgPopover, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMgPopoverElementEventMap>(type: K, listener: (this: HTMLMgPopoverElement, ev: MgPopoverCustomEvent<HTMLMgPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1923,6 +2002,12 @@ declare global {
         prototype: HTMLMgPopoverContentElement;
         new (): HTMLMgPopoverContentElement;
     };
+    interface HTMLMgProgressElement extends Components.MgProgress, HTMLStencilElement {
+    }
+    var HTMLMgProgressElement: {
+        prototype: HTMLMgProgressElement;
+        new (): HTMLMgProgressElement;
+    };
     interface HTMLMgSkipLinksElementEventMap {
         "go-to-anchor": string;
     }
@@ -2009,6 +2094,7 @@ declare global {
         "mg-panel": HTMLMgPanelElement;
         "mg-popover": HTMLMgPopoverElement;
         "mg-popover-content": HTMLMgPopoverContentElement;
+        "mg-progress": HTMLMgProgressElement;
         "mg-skip-links": HTMLMgSkipLinksElement;
         "mg-tabs": HTMLMgTabsElement;
         "mg-tag": HTMLMgTagElement;
@@ -2040,6 +2126,10 @@ declare namespace LocalJSX {
           * Add a delay to hide/close message when it passed Value is defined in seconds and must greater than 2 seconds
          */
         "delay"?: number;
+        /**
+          * Emmited event when alert is closed
+         */
+        "onComponent-close"?: (event: MgAlertCustomEvent<void>) => void;
         /**
           * Emited event when alert is hidden
          */
@@ -2104,6 +2194,10 @@ declare namespace LocalJSX {
           * Emmited event when disabled change
          */
         "onDisabled-change"?: (event: MgButtonCustomEvent<HTMLMgButtonElement['disabled']>) => void;
+        /**
+          * Define button size
+         */
+        "size"?: SizeType;
         /**
           * Define button type
          */
@@ -2571,6 +2665,14 @@ declare namespace LocalJSX {
           * Define numeric type
          */
         "type"?: NumericType;
+        /**
+          * Define unit symbol (km, L, etc.)
+         */
+        "unit"?: Intl.NumberFormatOptions['unit'];
+        /**
+          * Define unit display format ('short', 'long', 'narrow')
+         */
+        "unitDisplay"?: Intl.NumberFormatOptions['unitDisplay'];
         /**
           * Define input pattern to validate
          */
@@ -3110,7 +3212,7 @@ declare namespace LocalJSX {
         /**
           * Define component child menu size.
          */
-        "size"?: SizeType;
+        "size"?: SizeType1;
         /**
           * Define slot label element
          */
@@ -3205,6 +3307,10 @@ declare namespace LocalJSX {
           * Displayed modal title
          */
         "modalTitle": string;
+        /**
+          * Emmited event when modal is closed
+         */
+        "onComponent-close"?: (event: MgModalCustomEvent<void>) => void;
         /**
           * Emmited event when modal is hidden
          */
@@ -3315,6 +3421,10 @@ declare namespace LocalJSX {
           * Sets an `id` attribute. Needed by the input for accessibility `aria-decribedby`.
          */
         "identifier"?: string;
+        /**
+          * Emmited event when popover is closed
+         */
+        "onComponent-close"?: (event: MgPopoverCustomEvent<void>) => void;
         /**
           * Emited event when display value change
          */
@@ -3334,6 +3444,28 @@ declare namespace LocalJSX {
          */
         "onHide-content"?: (event: MgPopoverContentCustomEvent<void>) => void;
     }
+    interface MgProgress {
+        /**
+          * Define progress role - `progressbar` to indicate a progress, such as loading or percent completion of a task - `meter` to indicate a graphical display of a numeric value that varies within a defined range
+         */
+        "ariaRole"?: AriaRoleType1;
+        /**
+          * Define label
+         */
+        "label": string;
+        /**
+          * Define the maximum value in the range
+         */
+        "max"?: number;
+        /**
+          * Define the minimum value in the range
+         */
+        "min"?: number;
+        /**
+          * Define current value By default, it will be displayed as a percentage value. If you don’t specify the min and max props, the value should be a number within the range of 0 to 100.
+         */
+        "value"?: number;
+    }
     interface MgSkipLinks {
         /**
           * Skip links
@@ -3368,7 +3500,7 @@ declare namespace LocalJSX {
         /**
           * Define tabs size
          */
-        "size"?: SizeType1;
+        "size"?: SizeType2;
     }
     interface MgTag {
         /**
@@ -3446,6 +3578,7 @@ declare namespace LocalJSX {
         "mg-panel": MgPanel;
         "mg-popover": MgPopover;
         "mg-popover-content": MgPopoverContent;
+        "mg-progress": MgProgress;
         "mg-skip-links": MgSkipLinks;
         "mg-tabs": MgTabs;
         "mg-tag": MgTag;
@@ -3493,6 +3626,7 @@ declare module "@stencil/core" {
             "mg-panel": LocalJSX.MgPanel & JSXBase.HTMLAttributes<HTMLMgPanelElement>;
             "mg-popover": LocalJSX.MgPopover & JSXBase.HTMLAttributes<HTMLMgPopoverElement>;
             "mg-popover-content": LocalJSX.MgPopoverContent & JSXBase.HTMLAttributes<HTMLMgPopoverContentElement>;
+            "mg-progress": LocalJSX.MgProgress & JSXBase.HTMLAttributes<HTMLMgProgressElement>;
             "mg-skip-links": LocalJSX.MgSkipLinks & JSXBase.HTMLAttributes<HTMLMgSkipLinksElement>;
             "mg-tabs": LocalJSX.MgTabs & JSXBase.HTMLAttributes<HTMLMgTabsElement>;
             "mg-tag": LocalJSX.MgTag & JSXBase.HTMLAttributes<HTMLMgTagElement>;

package/dist/types/stencil-public-runtime.d.ts

@@ -1015,6 +1015,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;

package/dist/types/types/index.d.ts

@@ -10,6 +10,10 @@ export type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' |
  * Defines the possible values for variantStyle
  */
 export type VariantStyle = 'icon' | 'background' | 'bar-left' | 'full';
+/**
+ * Defines the possible values for ariaRole
+ */
+export type AriaRole = 'progressbar' | 'meter' | 'form' | 'search' | 'none' | 'presentation';
 /**
  * Defines the possible values for input error
  */