@mgdis/mg-components 6.0.0 → 6.2.0

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

@@ -23,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-progress/mg-progress.conf.d.ts

@@ -0,0 +1,9 @@
+import { AriaRole } from '../../../types';
+/**
+ * List of all possibles roles
+ */
+export declare const roles: readonly ["progressbar", "meter"];
+/**
+ * Aria Role type from roles
+ */
+export type AriaRoleType = AriaRole & (typeof roles)[number];

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

@@ -0,0 +1,47 @@
+import { AriaRoleType } from './mg-progress.conf';
+export declare class MgProgress {
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Define label
+     */
+    label: string;
+    watchLabel(newValue: MgProgress['label']): void;
+    /**
+     * 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?: AriaRoleType;
+    watchAriaRole(newValue: MgProgress['ariaRole']): void;
+    /**
+     * 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;
+    watchValue(newValue: MgProgress['value']): void;
+    /**
+     * Define the minimum value in the range
+     */
+    min?: number;
+    watchMin(newValue: MgProgress['min']): void;
+    /**
+     * Define the maximum value in the range
+     */
+    max?: number;
+    watchMax(newValue: MgProgress['max']): void;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

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

package/dist/types/components.d.ts

@@ -27,6 +27,7 @@ import { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } fr
 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 { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
@@ -52,6 +53,7 @@ export { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } fr
 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 { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
@@ -217,6 +219,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 +359,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 +484,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 +588,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 +610,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 +684,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 +764,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 +856,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 +960,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 +1064,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 +1162,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
@@ -1327,6 +1377,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
@@ -1923,6 +1995,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 +2087,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;
@@ -2571,6 +2650,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
          */
@@ -3334,6 +3421,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
@@ -3446,6 +3555,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 +3603,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;
@@ -1564,6 +1566,10 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
+        onBeforeToggle?: (event: Event) => void;
+        onBeforeToggleCapture?: (event: Event) => void;
+        onToggle?: (event: Event) => void;
+        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

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
  */