@mgdis/mg-components 3.1.0 → 3.2.0

package/dist/types/components.d.ts

@@ -21,7 +21,7 @@ export namespace Components {
         /**
           * Define if button is using outline style
          */
-        "outline"?: boolean;
+        "outline": boolean;
         /**
           * Badge value
          */
@@ -29,9 +29,13 @@ export namespace Components {
         /**
           * Define button variant
          */
-        "variant"?: string;
+        "variant": string;
     }
     interface MgButton {
+        /**
+          * Prop to set aria-controls on button element
+         */
+        "controls": string;
         /**
           * Option to set input disable on click, in order to prevent multi-click. Parent component have to remove the attribute 'disabled' when the process ends.
          */
@@ -40,10 +44,18 @@ export namespace Components {
           * Disable button
          */
         "disabled": boolean;
+        /**
+          * Prop to set aria-expanded on button element
+         */
+        "expanded": boolean;
+        /**
+          * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+         */
+        "haspopup": boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
           * Define if button is round. Used for icon button.
          */
@@ -75,6 +87,37 @@ export namespace Components {
          */
         "template": string;
     }
+    interface MgForm {
+        /**
+          * Define if form is disabled
+         */
+        "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
+         */
+        "identifier": string;
+        /**
+          * Define form invalid state
+         */
+        "invalid": boolean;
+        /**
+          * Input name If not set the value equals the identifier
+         */
+        "name": string;
+        /**
+          * Define if form is readonly
+         */
+        "readonly": boolean;
+        /**
+          * Define form valid state
+         */
+        "valid": boolean;
+    }
     interface MgIcon {
         /**
           * Icon to display
@@ -98,6 +141,11 @@ export namespace Components {
           * Define if input is disabled
          */
         "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -105,17 +153,17 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
           * Define if inputs are display verticaly
          */
         "inputVerticalList": boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -129,7 +177,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define if input is readonly
          */
@@ -143,7 +191,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -156,6 +204,11 @@ export namespace Components {
           * Define if input is disabled
          */
         "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -163,13 +216,13 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -191,7 +244,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define if input is readonly
          */
@@ -205,7 +258,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -222,6 +275,11 @@ export namespace Components {
           * Define if input is disabled
          */
         "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -229,7 +287,7 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
           * Override integer length integer is the number before the decimal point
          */
@@ -239,7 +297,7 @@ export namespace Components {
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -261,7 +319,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
          */
@@ -300,6 +358,11 @@ export namespace Components {
           * Define if input is disabled
          */
         "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -307,13 +370,13 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -327,7 +390,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
          */
@@ -345,7 +408,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -362,6 +425,11 @@ export namespace Components {
           * Define if input is disabled
          */
         "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -375,7 +443,7 @@ export namespace Components {
          */
         "inputVerticalList": boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
@@ -383,7 +451,7 @@ export namespace Components {
          */
         "items": string[] | RadioOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -411,7 +479,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -424,6 +492,11 @@ export namespace Components {
           * Define if input is disabled
          */
         "disabled": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -441,7 +514,7 @@ export namespace Components {
          */
         "items": string[] | SelectOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -506,6 +579,11 @@ export namespace Components {
           * Define if component should display character left
          */
         "displayCharacterLeft": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -517,13 +595,13 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -541,7 +619,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define input pattern to validate
          */
@@ -562,6 +640,11 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Public method to play input focus
+          * @returns
+         */
+        "setFocus": () => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -571,7 +654,7 @@ export namespace Components {
          */
         "type": 'text' | 'search';
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -596,6 +679,11 @@ export namespace Components {
           * Define if component should display character left
          */
         "displayCharacterLeft": boolean;
+        /**
+          * Public method to display errors
+          * @returns
+         */
+        "displayError": () => Promise<void>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -603,13 +691,13 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -627,7 +715,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define input pattern to validate
          */
@@ -657,7 +745,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -695,21 +783,22 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
           * Define if toggle display icon
          */
-        "isIcon"?: boolean;
+        "isIcon": boolean;
         /**
           * Define if toggle have on/off style
          */
-        "isOnOff"?: boolean;
+        "isOnOff": boolean;
         /**
-          * Items are the possible options to select Required
+          * Items are the possible options to select
+          * @returns
          */
         "items": string[] | ToggleValue[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -723,7 +812,7 @@ export namespace Components {
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define if input is readonly
          */
@@ -735,7 +824,7 @@ export namespace Components {
         /**
           * Component value
          */
-        "value"?: any;
+        "value": any;
     }
     interface MgMessage {
         /**
@@ -759,6 +848,24 @@ export namespace Components {
          */
         "variant": string;
     }
+    interface MgModal {
+        /**
+          * Define if modal has a cross button
+         */
+        "closeButton": boolean;
+        /**
+          * Define if modal is hidden
+         */
+        "hide": boolean;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
+         */
+        "identifier": string;
+        /**
+          * Displayed modal title required
+         */
+        "modalTitle": string;
+    }
     interface MgPagination {
         /**
           * Component current page
@@ -767,7 +874,7 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
           * Panignation label. Is a short description. Customize default value can be usefull to improve accessibility
          */
@@ -777,6 +884,24 @@ export namespace Components {
          */
         "totalPages": number;
     }
+    interface MgPanel {
+        /**
+          * Panel is opened
+         */
+        "expanded": boolean;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
+         */
+        "identifier": string;
+        /**
+          * Panel title
+         */
+        "panelTitle": string;
+        /**
+          * Panel title is editabled
+         */
+        "titleEditable": boolean;
+    }
     interface MgPopover {
         /**
           * Define if popover has a cross button
@@ -821,7 +946,7 @@ export namespace Components {
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "identifier"?: string;
+        "identifier": string;
         /**
           * Tabs items Required
          */
@@ -830,16 +955,20 @@ export namespace Components {
           * Tabs label. Include short tabs description. Required for accessibility
          */
         "label": string;
+        /**
+          * Define tabs size
+         */
+        "size": string;
     }
     interface MgTag {
         /**
           * Define if button is using outline style
          */
-        "outline"?: boolean;
+        "outline": boolean;
         /**
           * Define button variant
          */
-        "variant"?: string;
+        "variant": string;
     }
     interface MgTooltip {
         /**
@@ -897,6 +1026,12 @@ declare global {
         prototype: HTMLMgCharacterLeftElement;
         new (): HTMLMgCharacterLeftElement;
     };
+    interface HTMLMgFormElement extends Components.MgForm, HTMLStencilElement {
+    }
+    var HTMLMgFormElement: {
+        prototype: HTMLMgFormElement;
+        new (): HTMLMgFormElement;
+    };
     interface HTMLMgIconElement extends Components.MgIcon, HTMLStencilElement {
     }
     var HTMLMgIconElement: {
@@ -969,12 +1104,24 @@ declare global {
         prototype: HTMLMgMessageElement;
         new (): HTMLMgMessageElement;
     };
+    interface HTMLMgModalElement extends Components.MgModal, HTMLStencilElement {
+    }
+    var HTMLMgModalElement: {
+        prototype: HTMLMgModalElement;
+        new (): HTMLMgModalElement;
+    };
     interface HTMLMgPaginationElement extends Components.MgPagination, HTMLStencilElement {
     }
     var HTMLMgPaginationElement: {
         prototype: HTMLMgPaginationElement;
         new (): HTMLMgPaginationElement;
     };
+    interface HTMLMgPanelElement extends Components.MgPanel, HTMLStencilElement {
+    }
+    var HTMLMgPanelElement: {
+        prototype: HTMLMgPanelElement;
+        new (): HTMLMgPanelElement;
+    };
     interface HTMLMgPopoverElement extends Components.MgPopover, HTMLStencilElement {
     }
     var HTMLMgPopoverElement: {
@@ -1003,6 +1150,7 @@ declare global {
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
         "mg-character-left": HTMLMgCharacterLeftElement;
+        "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
         "mg-input-checkbox": HTMLMgInputCheckboxElement;
         "mg-input-date": HTMLMgInputDateElement;
@@ -1015,7 +1163,9 @@ declare global {
         "mg-input-title": HTMLMgInputTitleElement;
         "mg-input-toggle": HTMLMgInputToggleElement;
         "mg-message": HTMLMgMessageElement;
+        "mg-modal": HTMLMgModalElement;
         "mg-pagination": HTMLMgPaginationElement;
+        "mg-panel": HTMLMgPanelElement;
         "mg-popover": HTMLMgPopoverElement;
         "mg-tabs": HTMLMgTabsElement;
         "mg-tag": HTMLMgTagElement;
@@ -1042,6 +1192,10 @@ declare namespace LocalJSX {
         "variant"?: string;
     }
     interface MgButton {
+        /**
+          * Prop to set aria-controls on button element
+         */
+        "controls"?: string;
         /**
           * Option to set input disable on click, in order to prevent multi-click. Parent component have to remove the attribute 'disabled' when the process ends.
          */
@@ -1050,6 +1204,14 @@ declare namespace LocalJSX {
           * Disable button
          */
         "disabled"?: boolean;
+        /**
+          * Prop to set aria-expanded on button element
+         */
+        "expanded"?: boolean;
+        /**
+          * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+         */
+        "haspopup"?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -1085,6 +1247,36 @@ declare namespace LocalJSX {
          */
         "template"?: string;
     }
+    interface MgForm {
+        /**
+          * Define if form is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
+         */
+        "identifier"?: string;
+        /**
+          * Define form invalid state
+         */
+        "invalid"?: boolean;
+        /**
+          * Input name If not set the value equals the identifier
+         */
+        "name"?: string;
+        /**
+          * Emitted event on form validity check Tells if form is valid or not
+         */
+        "onForm-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Define if form is readonly
+         */
+        "readonly"?: boolean;
+        /**
+          * Define form valid state
+         */
+        "valid"?: boolean;
+    }
     interface MgIcon {
         /**
           * Icon to display
@@ -1121,11 +1313,11 @@ declare namespace LocalJSX {
          */
         "inputVerticalList"?: boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1140,6 +1332,10 @@ declare namespace LocalJSX {
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
+        /**
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
         /**
           * Emitted event when value change
          */
@@ -1157,7 +1353,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1179,11 +1375,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1207,7 +1403,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
         "onValue-change"?: (event: CustomEvent<string>) => void;
         /**
@@ -1223,7 +1423,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1257,7 +1457,7 @@ declare namespace LocalJSX {
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1281,7 +1481,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
         "onValue-change"?: (event: CustomEvent<number>) => void;
         /**
@@ -1331,11 +1535,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1351,7 +1555,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
         "onValue-change"?: (event: CustomEvent<string>) => void;
         /**
@@ -1371,7 +1579,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1401,7 +1609,7 @@ declare namespace LocalJSX {
          */
         "inputVerticalList"?: boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
@@ -1409,7 +1617,7 @@ declare namespace LocalJSX {
          */
         "items": string[] | RadioOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1424,6 +1632,10 @@ declare namespace LocalJSX {
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
+        /**
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
         /**
           * Emitted event when value change
          */
@@ -1441,7 +1653,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1471,7 +1683,7 @@ declare namespace LocalJSX {
          */
         "items": string[] | SelectOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1487,9 +1699,13 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
+         */
+        "onValue-change"?: (event: CustomEvent<any>) => void;
         /**
           * Input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
          */
@@ -1553,11 +1769,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1577,7 +1793,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
         "onValue-change"?: (event: CustomEvent<string>) => void;
         /**
@@ -1609,7 +1829,7 @@ declare namespace LocalJSX {
          */
         "type"?: 'text' | 'search';
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1643,11 +1863,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1667,7 +1887,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
         "onValue-change"?: (event: CustomEvent<string>) => void;
         /**
@@ -1699,7 +1923,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1747,11 +1971,12 @@ declare namespace LocalJSX {
          */
         "isOnOff"?: boolean;
         /**
-          * Items are the possible options to select Required
+          * Items are the possible options to select
+          * @returns
          */
         "items": string[] | ToggleValue[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1767,7 +1992,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
         "onValue-change"?: (event: CustomEvent<any>) => void;
         /**
@@ -1801,11 +2030,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Emmited event when message is hidden
+          * Emited event when message is hidden
          */
         "onComponent-hide"?: (event: CustomEvent<string>) => void;
         /**
-          * Emmited event when message is diplayed
+          * Emited event when message is diplayed
          */
         "onComponent-show"?: (event: CustomEvent<string>) => void;
         /**
@@ -1813,6 +2042,32 @@ declare namespace LocalJSX {
          */
         "variant"?: string;
     }
+    interface MgModal {
+        /**
+          * Define if modal has a cross button
+         */
+        "closeButton"?: boolean;
+        /**
+          * Define if modal is hidden
+         */
+        "hide"?: boolean;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
+         */
+        "identifier"?: string;
+        /**
+          * Displayed modal title required
+         */
+        "modalTitle": string;
+        /**
+          * Emmited event when modal is hidden
+         */
+        "onComponent-hide"?: (event: CustomEvent<string>) => void;
+        /**
+          * Emmited event when modal is diplayed
+         */
+        "onComponent-show"?: (event: CustomEvent<string>) => void;
+    }
     interface MgPagination {
         /**
           * Component current page
@@ -1835,6 +2090,28 @@ declare namespace LocalJSX {
          */
         "totalPages"?: number;
     }
+    interface MgPanel {
+        /**
+          * Panel is opened
+         */
+        "expanded"?: boolean;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
+         */
+        "identifier"?: string;
+        /**
+          * Emmited event when title change
+         */
+        "onTitle-change"?: (event: CustomEvent<string>) => void;
+        /**
+          * Panel title
+         */
+        "panelTitle": string;
+        /**
+          * Panel title is editabled
+         */
+        "titleEditable"?: boolean;
+    }
     interface MgPopover {
         /**
           * Define if popover has a cross button
@@ -1888,6 +2165,10 @@ declare namespace LocalJSX {
           * Tabs label. Include short tabs description. Required for accessibility
          */
         "label": string;
+        /**
+          * Define tabs size
+         */
+        "size"?: string;
     }
     interface MgTag {
         /**
@@ -1939,6 +2220,7 @@ declare namespace LocalJSX {
         "mg-badge": MgBadge;
         "mg-button": MgButton;
         "mg-character-left": MgCharacterLeft;
+        "mg-form": MgForm;
         "mg-icon": MgIcon;
         "mg-input-checkbox": MgInputCheckbox;
         "mg-input-date": MgInputDate;
@@ -1951,7 +2233,9 @@ declare namespace LocalJSX {
         "mg-input-title": MgInputTitle;
         "mg-input-toggle": MgInputToggle;
         "mg-message": MgMessage;
+        "mg-modal": MgModal;
         "mg-pagination": MgPagination;
+        "mg-panel": MgPanel;
         "mg-popover": MgPopover;
         "mg-tabs": MgTabs;
         "mg-tag": MgTag;
@@ -1965,6 +2249,7 @@ declare module "@stencil/core" {
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
             "mg-character-left": LocalJSX.MgCharacterLeft & JSXBase.HTMLAttributes<HTMLMgCharacterLeftElement>;
+            "mg-form": LocalJSX.MgForm & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
             "mg-input-checkbox": LocalJSX.MgInputCheckbox & JSXBase.HTMLAttributes<HTMLMgInputCheckboxElement>;
             "mg-input-date": LocalJSX.MgInputDate & JSXBase.HTMLAttributes<HTMLMgInputDateElement>;
@@ -1977,7 +2262,9 @@ declare module "@stencil/core" {
             "mg-input-title": LocalJSX.MgInputTitle & JSXBase.HTMLAttributes<HTMLMgInputTitleElement>;
             "mg-input-toggle": LocalJSX.MgInputToggle & JSXBase.HTMLAttributes<HTMLMgInputToggleElement>;
             "mg-message": LocalJSX.MgMessage & JSXBase.HTMLAttributes<HTMLMgMessageElement>;
+            "mg-modal": LocalJSX.MgModal & JSXBase.HTMLAttributes<HTMLMgModalElement>;
             "mg-pagination": LocalJSX.MgPagination & JSXBase.HTMLAttributes<HTMLMgPaginationElement>;
+            "mg-panel": LocalJSX.MgPanel & JSXBase.HTMLAttributes<HTMLMgPanelElement>;
             "mg-popover": LocalJSX.MgPopover & JSXBase.HTMLAttributes<HTMLMgPopoverElement>;
             "mg-tabs": LocalJSX.MgTabs & JSXBase.HTMLAttributes<HTMLMgTabsElement>;
             "mg-tag": LocalJSX.MgTag & JSXBase.HTMLAttributes<HTMLMgTagElement>;