@mgdis/mg-components 3.1.0 → 4.0.0

package/dist/types/components.d.ts

@@ -11,7 +11,9 @@ import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
+import { Placement } from "./components/molecules/mg-popover/mg-popover.conf";
 import { TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+import { Placement as Placement1 } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export namespace Components {
     interface MgBadge {
         /**
@@ -21,7 +23,7 @@ export namespace Components {
         /**
           * Define if button is using outline style
          */
-        "outline"?: boolean;
+        "outline": boolean;
         /**
           * Badge value
          */
@@ -29,9 +31,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 +46,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.
          */
@@ -70,10 +84,37 @@ export namespace Components {
           * Add maximum length
          */
         "maxlength": number;
+    }
+    interface MgForm {
         /**
-          * Template to display remaining characters. Must have {counter} inside
+          * Define if form is disabled
          */
-        "template": string;
+        "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 {
         /**
@@ -98,6 +139,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 +151,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 +175,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 +189,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -156,6 +202,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 +214,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 +242,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 +256,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -214,6 +265,10 @@ export namespace Components {
         "value": string;
     }
     interface MgInputNumeric {
+        /**
+          * Define currency
+         */
+        "currency": string;
         /**
           * Override decimal length decimal is the number after the decimal point
          */
@@ -222,6 +277,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 +289,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 +299,7 @@ export namespace Components {
          */
         "invalid": boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -254,6 +314,10 @@ export namespace Components {
           * Maximum value
          */
         "max": number;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Minimum value
          */
@@ -261,7 +325,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.
          */
@@ -290,16 +354,17 @@ export namespace Components {
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputPassword {
         /**
           * 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 +372,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;
         /**
@@ -324,10 +389,14 @@ export namespace Components {
           * Define if label is displayed on top
          */
         "labelOnTop": boolean;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * 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,23 +414,24 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputRadio {
         /**
           * 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 +445,7 @@ export namespace Components {
          */
         "inputVerticalList": boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid": boolean;
         /**
@@ -383,7 +453,7 @@ export namespace Components {
          */
         "items": string[] | RadioOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -411,7 +481,7 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid": boolean;
         /**
@@ -424,6 +494,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 +516,7 @@ export namespace Components {
          */
         "items": string[] | SelectOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -452,6 +527,10 @@ export namespace Components {
           * Define if label is displayed on top
          */
         "labelOnTop": boolean;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -488,16 +567,8 @@ export namespace Components {
           * Component value
          */
         "value": any;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputText {
-        /**
-          * Template to use for characters left sentence
-         */
-        "characterLeftTemplate": string;
         /**
           * Define if input is disabled
          */
@@ -506,6 +577,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 +593,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;
         /**
@@ -538,10 +614,14 @@ export namespace Components {
           * Input max length
          */
         "maxlength": number;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define input pattern to validate
          */
@@ -562,6 +642,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,23 +656,15 @@ export namespace Components {
          */
         "type": 'text' | 'search';
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputTextarea {
-        /**
-          * Template to use for characters left sentence
-         */
-        "characterLeftTemplate": string;
         /**
           * Define if input is disabled
          */
@@ -596,6 +673,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 +685,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;
         /**
@@ -624,10 +706,14 @@ export namespace Components {
           * Input max length
          */
         "maxlength": number;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Input name If not set the value equals the identifier
          */
-        "name"?: string;
+        "name": string;
         /**
           * Define input pattern to validate
          */
@@ -649,7 +735,11 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Define input pattern error message
+          * Define if input is resizable
+         */
+        "resizable": 'none' | 'both' | 'horizontal' | 'vertical';
+        /**
+          * Define the number of visible text lines for the control
          */
         "rows": number;
         /**
@@ -657,17 +747,13 @@ export namespace Components {
          */
         "tooltip": string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid": boolean;
         /**
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputTitle {
         /**
@@ -695,21 +781,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 +810,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 +822,7 @@ export namespace Components {
         /**
           * Component value
          */
-        "value"?: any;
+        "value": any;
     }
     interface MgMessage {
         /**
@@ -759,6 +846,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 +872,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 +882,36 @@ export namespace Components {
          */
         "totalPages": number;
     }
+    interface MgPanel {
+        /**
+          * Disable possibility to toggle expand
+         */
+        "expandToggleDisabled": boolean;
+        /**
+          * 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;
+        /**
+          * Panel title pattern
+         */
+        "titlePattern": string;
+        /**
+          * Panel title pattern error message
+         */
+        "titlePatternErrorMessage": string;
+    }
     interface MgPopover {
         /**
           * Define if popover has a cross button
@@ -797,21 +932,7 @@ export namespace Components {
         /**
           * Popover placement
          */
-        "placement": | 'auto'
-    | 'auto-start'
-    | 'auto-end'
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
+        "placement": Placement;
     }
     interface MgTabs {
         /**
@@ -821,7 +942,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 +951,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 {
         /**
@@ -861,23 +986,69 @@ export namespace Components {
         /**
           * Tooltip placement
          */
-        "placement": | 'auto'
-    | 'auto-start'
-    | 'auto-end'
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
+        "placement": Placement1;
     }
 }
+export interface MgFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgFormElement;
+}
+export interface MgInputCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputCheckboxElement;
+}
+export interface MgInputDateCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputDateElement;
+}
+export interface MgInputNumericCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputNumericElement;
+}
+export interface MgInputPasswordCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputPasswordElement;
+}
+export interface MgInputRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputRadioElement;
+}
+export interface MgInputSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputSelectElement;
+}
+export interface MgInputTextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputTextElement;
+}
+export interface MgInputTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputTextareaElement;
+}
+export interface MgInputToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputToggleElement;
+}
+export interface MgMessageCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgMessageElement;
+}
+export interface MgModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgModalElement;
+}
+export interface MgPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgPaginationElement;
+}
+export interface MgPanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgPanelElement;
+}
+export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgTabsElement;
+}
 declare global {
     interface HTMLMgBadgeElement extends Components.MgBadge, HTMLStencilElement {
     }
@@ -897,6 +1068,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 +1146,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 +1192,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 +1205,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 +1234,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 +1246,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.
          */
@@ -1080,10 +1284,36 @@ declare namespace LocalJSX {
           * Add maximum length
          */
         "maxlength": number;
+    }
+    interface MgForm {
+        /**
+          * Define if form is disabled
+         */
+        "disabled"?: boolean;
         /**
-          * Template to display remaining characters. Must have {counter} inside
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
-        "template"?: string;
+        "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: MgFormCustomEvent<boolean>) => void;
+        /**
+          * Define if form is readonly
+         */
+        "readonly"?: boolean;
+        /**
+          * Define form valid state
+         */
+        "valid"?: boolean;
     }
     interface MgIcon {
         /**
@@ -1121,11 +1351,11 @@ declare namespace LocalJSX {
          */
         "inputVerticalList"?: boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1140,10 +1370,14 @@ declare namespace LocalJSX {
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
+        /**
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: MgInputCheckboxCustomEvent<boolean>) => void;
         /**
           * Emitted event when value change
          */
-        "onValue-change"?: (event: CustomEvent<CheckboxValue[]>) => void;
+        "onValue-change"?: (event: MgInputCheckboxCustomEvent<CheckboxValue[]>) => void;
         /**
           * Define if input is readonly
          */
@@ -1157,7 +1391,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1179,11 +1413,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,9 +1441,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: MgInputDateCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
+         */
+        "onValue-change"?: (event: MgInputDateCustomEvent<string>) => void;
         /**
           * Define if input is readonly
          */
@@ -1223,7 +1461,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1232,6 +1470,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface MgInputNumeric {
+        /**
+          * Define currency
+         */
+        "currency"?: string;
         /**
           * Override decimal length decimal is the number after the decimal point
          */
@@ -1257,7 +1499,7 @@ declare namespace LocalJSX {
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1272,6 +1514,10 @@ declare namespace LocalJSX {
           * Maximum value
          */
         "max"?: number;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Minimum value
          */
@@ -1281,9 +1527,13 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
          */
-        "onValue-change"?: (event: CustomEvent<number>) => void;
+        "onInput-valid"?: (event: MgInputNumericCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
+         */
+        "onValue-change"?: (event: MgInputNumericCustomEvent<number>) => 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.
          */
@@ -1312,10 +1562,6 @@ declare namespace LocalJSX {
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputPassword {
         /**
@@ -1331,11 +1577,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1346,14 +1592,22 @@ declare namespace LocalJSX {
           * Define if label is displayed on top
          */
         "labelOnTop"?: boolean;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: MgInputPasswordCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onValue-change"?: (event: MgInputPasswordCustomEvent<string>) => 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.
          */
@@ -1371,17 +1625,13 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputRadio {
         /**
@@ -1401,7 +1651,7 @@ declare namespace LocalJSX {
          */
         "inputVerticalList"?: boolean;
         /**
-          * Force invalid component
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
@@ -1409,7 +1659,7 @@ declare namespace LocalJSX {
          */
         "items": string[] | RadioOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1424,10 +1674,14 @@ declare namespace LocalJSX {
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
+        /**
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: MgInputRadioCustomEvent<boolean>) => void;
         /**
           * Emitted event when value change
          */
-        "onValue-change"?: (event: CustomEvent<any>) => void;
+        "onValue-change"?: (event: MgInputRadioCustomEvent<any>) => void;
         /**
           * Define if input is readonly
          */
@@ -1441,7 +1695,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Force valid component
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
@@ -1471,7 +1725,7 @@ declare namespace LocalJSX {
          */
         "items": string[] | SelectOption[];
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1482,14 +1736,22 @@ declare namespace LocalJSX {
           * Define if label is displayed on top
          */
         "labelOnTop"?: boolean;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onInput-valid"?: (event: MgInputSelectCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
+         */
+        "onValue-change"?: (event: MgInputSelectCustomEvent<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.
          */
@@ -1522,16 +1784,8 @@ declare namespace LocalJSX {
           * Component value
          */
         "value"?: any;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputText {
-        /**
-          * Template to use for characters left sentence
-         */
-        "characterLeftTemplate"?: string;
         /**
           * Define if input is disabled
          */
@@ -1553,11 +1807,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1572,14 +1826,22 @@ declare namespace LocalJSX {
           * Input max length
          */
         "maxlength"?: number;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onInput-valid"?: (event: MgInputTextCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
+         */
+        "onValue-change"?: (event: MgInputTextCustomEvent<string>) => void;
         /**
           * Define input pattern to validate
          */
@@ -1609,23 +1871,15 @@ declare namespace LocalJSX {
          */
         "type"?: 'text' | 'search';
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputTextarea {
-        /**
-          * Template to use for characters left sentence
-         */
-        "characterLeftTemplate"?: string;
         /**
           * Define if input is disabled
          */
@@ -1643,11 +1897,11 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Define input pattern error message
+          * Define input invalid state
          */
         "invalid"?: boolean;
         /**
-          * Input label Required
+          * Input label
          */
         "label": string;
         /**
@@ -1662,14 +1916,22 @@ declare namespace LocalJSX {
           * Input max length
          */
         "maxlength"?: number;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: MgInputTextareaCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onValue-change"?: (event: MgInputTextareaCustomEvent<string>) => void;
         /**
           * Define input pattern to validate
          */
@@ -1691,7 +1953,11 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * Define input pattern error message
+          * Define if input is resizable
+         */
+        "resizable"?: 'none' | 'both' | 'horizontal' | 'vertical';
+        /**
+          * Define the number of visible text lines for the control
          */
         "rows"?: number;
         /**
@@ -1699,17 +1965,13 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define input pattern to validate
+          * Define input valid state
          */
         "valid"?: boolean;
         /**
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputTitle {
         /**
@@ -1747,11 +2009,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,9 +2030,13 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emmited event when value change
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: MgInputToggleCustomEvent<boolean>) => void;
+        /**
+          * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<any>) => void;
+        "onValue-change"?: (event: MgInputToggleCustomEvent<any>) => void;
         /**
           * Define if input is readonly
          */
@@ -1801,18 +2068,44 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Emmited event when message is hidden
+          * Emited event when message is hidden
          */
-        "onComponent-hide"?: (event: CustomEvent<string>) => void;
+        "onComponent-hide"?: (event: MgMessageCustomEvent<string>) => void;
         /**
-          * Emmited event when message is diplayed
+          * Emited event when message is diplayed
          */
-        "onComponent-show"?: (event: CustomEvent<string>) => void;
+        "onComponent-show"?: (event: MgMessageCustomEvent<string>) => void;
         /**
           * Message variant
          */
         "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: MgModalCustomEvent<string>) => void;
+        /**
+          * Emmited event when modal is diplayed
+         */
+        "onComponent-show"?: (event: MgModalCustomEvent<string>) => void;
+    }
     interface MgPagination {
         /**
           * Component current page
@@ -1829,12 +2122,50 @@ declare namespace LocalJSX {
         /**
           * Emmited event when current page change
          */
-        "onCurrent-page-change"?: (event: CustomEvent<number>) => void;
+        "onCurrent-page-change"?: (event: MgPaginationCustomEvent<number>) => void;
         /**
           * Component total pages
          */
         "totalPages"?: number;
     }
+    interface MgPanel {
+        /**
+          * Disable possibility to toggle expand
+         */
+        "expandToggleDisabled"?: boolean;
+        /**
+          * 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 expanded change
+         */
+        "onExpanded-change"?: (event: MgPanelCustomEvent<boolean>) => void;
+        /**
+          * Emmited event when title change
+         */
+        "onTitle-change"?: (event: MgPanelCustomEvent<string>) => void;
+        /**
+          * Panel title
+         */
+        "panelTitle": string;
+        /**
+          * Panel title is editabled
+         */
+        "titleEditable"?: boolean;
+        /**
+          * Panel title pattern
+         */
+        "titlePattern"?: string;
+        /**
+          * Panel title pattern error message
+         */
+        "titlePatternErrorMessage"?: string;
+    }
     interface MgPopover {
         /**
           * Define if popover has a cross button
@@ -1855,21 +2186,7 @@ declare namespace LocalJSX {
         /**
           * Popover placement
          */
-        "placement"?: | 'auto'
-    | 'auto-start'
-    | 'auto-end'
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
+        "placement"?: Placement;
     }
     interface MgTabs {
         /**
@@ -1888,6 +2205,14 @@ declare namespace LocalJSX {
           * Tabs label. Include short tabs description. Required for accessibility
          */
         "label": string;
+        /**
+          * Emited event when active tab change
+         */
+        "onActive-tab-change"?: (event: MgTabsCustomEvent<number>) => void;
+        /**
+          * Define tabs size
+         */
+        "size"?: string;
     }
     interface MgTag {
         /**
@@ -1919,26 +2244,13 @@ declare namespace LocalJSX {
         /**
           * Tooltip placement
          */
-        "placement"?: | 'auto'
-    | 'auto-start'
-    | 'auto-end'
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
+        "placement"?: Placement1;
     }
     interface IntrinsicElements {
         "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 +2263,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 +2279,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 +2292,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>;