@mgdis/mg-components 3.3.0 → 4.1.0

package/dist/types/components.d.ts

@@ -6,12 +6,15 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BadgeType } from "./components/atoms/mg-badge/mg-badge.conf";
+import { ButtonType } from "./components/atoms/mg-button/mg-button.conf";
 import { CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 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 {
         /**
@@ -48,6 +51,10 @@ export namespace Components {
           * Prop to set aria-expanded on button element
          */
         "expanded": boolean;
+        /**
+          * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
+         */
+        "form": string;
         /**
           * 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.
          */
@@ -64,6 +71,10 @@ export namespace Components {
           * aria-label In case button text is not explicit enough
          */
         "label": string;
+        /**
+          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+         */
+        "type": ButtonType;
         /**
           * Define button variant
          */
@@ -82,10 +93,20 @@ export namespace Components {
           * Add maximum length
          */
         "maxlength": number;
+    }
+    interface MgDetails {
         /**
-          * Template to display remaining characters. Must have {counter} inside
+          * Define if details are diplayed
          */
-        "template": string;
+        "expanded": boolean;
+        /**
+          * Displayed title when details are closed
+         */
+        "toggleClosed": string;
+        /**
+          * Displayed title when details are opened
+         */
+        "toggleOpened": string;
     }
     interface MgForm {
         /**
@@ -136,6 +157,12 @@ export namespace Components {
          */
         "variant": string;
     }
+    interface MgIllustratedMessage {
+        /**
+          * Define illustration size
+         */
+        "size": 'regular' | 'small';
+    }
     interface MgInputCheckbox {
         /**
           * Define if input is disabled
@@ -267,6 +294,10 @@ export namespace Components {
         "value": string;
     }
     interface MgInputNumeric {
+        /**
+          * Define currency
+         */
+        "currency": string;
         /**
           * Override decimal length decimal is the number after the decimal point
          */
@@ -312,6 +343,10 @@ export namespace Components {
           * Maximum value
          */
         "max": number;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Minimum value
          */
@@ -348,10 +383,6 @@ export namespace Components {
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputPassword {
         /**
@@ -387,6 +418,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
          */
@@ -415,10 +450,6 @@ export namespace Components {
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputRadio {
         /**
@@ -525,6 +556,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
          */
@@ -561,16 +596,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
          */
@@ -616,6 +643,10 @@ export namespace Components {
           * Input max length
          */
         "maxlength": number;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -661,16 +692,8 @@ export namespace Components {
           * 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
          */
@@ -712,6 +735,10 @@ export namespace Components {
           * Input max length
          */
         "maxlength": number;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -736,6 +763,10 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Define if input is resizable
+         */
+        "resizable": 'none' | 'both' | 'horizontal' | 'vertical';
         /**
           * Define the number of visible text lines for the control
          */
@@ -752,10 +783,6 @@ export namespace Components {
           * Component value
          */
         "value": string;
-        /**
-          * Define input width
-         */
-        "width": Width;
     }
     interface MgInputTitle {
         /**
@@ -934,21 +961,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 {
         /**
@@ -1002,23 +1015,77 @@ 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 MgDetailsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgDetailsElement;
+}
+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 MgPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgPopoverElement;
+}
+export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgTabsElement;
+}
 declare global {
     interface HTMLMgBadgeElement extends Components.MgBadge, HTMLStencilElement {
     }
@@ -1038,6 +1105,12 @@ declare global {
         prototype: HTMLMgCharacterLeftElement;
         new (): HTMLMgCharacterLeftElement;
     };
+    interface HTMLMgDetailsElement extends Components.MgDetails, HTMLStencilElement {
+    }
+    var HTMLMgDetailsElement: {
+        prototype: HTMLMgDetailsElement;
+        new (): HTMLMgDetailsElement;
+    };
     interface HTMLMgFormElement extends Components.MgForm, HTMLStencilElement {
     }
     var HTMLMgFormElement: {
@@ -1050,6 +1123,12 @@ declare global {
         prototype: HTMLMgIconElement;
         new (): HTMLMgIconElement;
     };
+    interface HTMLMgIllustratedMessageElement extends Components.MgIllustratedMessage, HTMLStencilElement {
+    }
+    var HTMLMgIllustratedMessageElement: {
+        prototype: HTMLMgIllustratedMessageElement;
+        new (): HTMLMgIllustratedMessageElement;
+    };
     interface HTMLMgInputCheckboxElement extends Components.MgInputCheckbox, HTMLStencilElement {
     }
     var HTMLMgInputCheckboxElement: {
@@ -1162,8 +1241,10 @@ declare global {
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
         "mg-character-left": HTMLMgCharacterLeftElement;
+        "mg-details": HTMLMgDetailsElement;
         "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
+        "mg-illustrated-message": HTMLMgIllustratedMessageElement;
         "mg-input-checkbox": HTMLMgInputCheckboxElement;
         "mg-input-date": HTMLMgInputDateElement;
         "mg-input-numeric": HTMLMgInputNumericElement;
@@ -1220,6 +1301,10 @@ declare namespace LocalJSX {
           * Prop to set aria-expanded on button element
          */
         "expanded"?: boolean;
+        /**
+          * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
+         */
+        "form"?: string;
         /**
           * 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.
          */
@@ -1236,6 +1321,10 @@ declare namespace LocalJSX {
           * aria-label In case button text is not explicit enough
          */
         "label"?: string;
+        /**
+          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+         */
+        "type"?: ButtonType;
         /**
           * Define button variant
          */
@@ -1254,10 +1343,24 @@ declare namespace LocalJSX {
           * Add maximum length
          */
         "maxlength": number;
+    }
+    interface MgDetails {
+        /**
+          * Define if details are diplayed
+         */
+        "expanded"?: boolean;
         /**
-          * Template to display remaining characters. Must have {counter} inside
+          * Emmited event when expanded change
          */
-        "template"?: string;
+        "onExpanded-change"?: (event: MgDetailsCustomEvent<boolean>) => void;
+        /**
+          * Displayed title when details are closed
+         */
+        "toggleClosed"?: string;
+        /**
+          * Displayed title when details are opened
+         */
+        "toggleOpened"?: string;
     }
     interface MgForm {
         /**
@@ -1276,10 +1379,14 @@ declare namespace LocalJSX {
           * Input name If not set the value equals the identifier
          */
         "name"?: string;
+        /**
+          * Emitted event on form submit
+         */
+        "onForm-submit"?: (event: MgFormCustomEvent<boolean>) => void;
         /**
           * Emitted event on form validity check Tells if form is valid or not
          */
-        "onForm-valid"?: (event: CustomEvent<boolean>) => void;
+        "onForm-valid"?: (event: MgFormCustomEvent<boolean>) => void;
         /**
           * Define if form is readonly
          */
@@ -1307,6 +1414,12 @@ declare namespace LocalJSX {
          */
         "variant"?: string;
     }
+    interface MgIllustratedMessage {
+        /**
+          * Define illustration size
+         */
+        "size"?: 'regular' | 'small';
+    }
     interface MgInputCheckbox {
         /**
           * Define if input is disabled
@@ -1347,11 +1460,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "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
          */
@@ -1417,11 +1530,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "onInput-valid"?: (event: MgInputDateCustomEvent<boolean>) => void;
         /**
           * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onValue-change"?: (event: MgInputDateCustomEvent<string>) => void;
         /**
           * Define if input is readonly
          */
@@ -1444,6 +1557,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface MgInputNumeric {
+        /**
+          * Define currency
+         */
+        "currency"?: string;
         /**
           * Override decimal length decimal is the number after the decimal point
          */
@@ -1484,6 +1601,10 @@ declare namespace LocalJSX {
           * Maximum value
          */
         "max"?: number;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Minimum value
          */
@@ -1495,11 +1616,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "onInput-valid"?: (event: MgInputNumericCustomEvent<boolean>) => void;
         /**
           * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<number>) => void;
+        "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.
          */
@@ -1528,10 +1649,6 @@ declare namespace LocalJSX {
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputPassword {
         /**
@@ -1562,6 +1679,10 @@ 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
          */
@@ -1569,11 +1690,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "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.
          */
@@ -1598,10 +1719,6 @@ declare namespace LocalJSX {
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputRadio {
         /**
@@ -1647,11 +1764,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "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
          */
@@ -1706,6 +1823,10 @@ 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
          */
@@ -1713,11 +1834,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "onInput-valid"?: (event: MgInputSelectCustomEvent<boolean>) => void;
         /**
           * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<any>) => void;
+        "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.
          */
@@ -1750,16 +1871,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
          */
@@ -1800,6 +1913,10 @@ declare namespace LocalJSX {
           * Input max length
          */
         "maxlength"?: number;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -1807,11 +1924,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "onInput-valid"?: (event: MgInputTextCustomEvent<boolean>) => void;
         /**
           * Emited event when value change
          */
-        "onValue-change"?: (event: CustomEvent<string>) => void;
+        "onValue-change"?: (event: MgInputTextCustomEvent<string>) => void;
         /**
           * Define input pattern to validate
          */
@@ -1848,16 +1965,8 @@ declare namespace LocalJSX {
           * 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
          */
@@ -1894,6 +2003,10 @@ declare namespace LocalJSX {
           * Input max length
          */
         "maxlength"?: number;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -1901,11 +2014,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "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
          */
@@ -1926,6 +2039,10 @@ declare namespace LocalJSX {
           * Define if input is required
          */
         "required"?: boolean;
+        /**
+          * Define if input is resizable
+         */
+        "resizable"?: 'none' | 'both' | 'horizontal' | 'vertical';
         /**
           * Define the number of visible text lines for the control
          */
@@ -1942,10 +2059,6 @@ declare namespace LocalJSX {
           * Component value
          */
         "value"?: string;
-        /**
-          * Define input width
-         */
-        "width"?: Width;
     }
     interface MgInputTitle {
         /**
@@ -2006,11 +2119,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: CustomEvent<boolean>) => void;
+        "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
          */
@@ -2044,11 +2157,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when message is hidden
          */
-        "onComponent-hide"?: (event: CustomEvent<string>) => void;
+        "onComponent-hide"?: (event: MgMessageCustomEvent<string>) => void;
         /**
           * Emited event when message is diplayed
          */
-        "onComponent-show"?: (event: CustomEvent<string>) => void;
+        "onComponent-show"?: (event: MgMessageCustomEvent<string>) => void;
         /**
           * Message variant
          */
@@ -2074,11 +2187,11 @@ declare namespace LocalJSX {
         /**
           * Emmited event when modal is hidden
          */
-        "onComponent-hide"?: (event: CustomEvent<string>) => void;
+        "onComponent-hide"?: (event: MgModalCustomEvent<string>) => void;
         /**
           * Emmited event when modal is diplayed
          */
-        "onComponent-show"?: (event: CustomEvent<string>) => void;
+        "onComponent-show"?: (event: MgModalCustomEvent<string>) => void;
     }
     interface MgPagination {
         /**
@@ -2096,7 +2209,7 @@ 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
          */
@@ -2118,11 +2231,11 @@ declare namespace LocalJSX {
         /**
           * Emmited event when expanded change
          */
-        "onExpanded-change"?: (event: CustomEvent<boolean>) => void;
+        "onExpanded-change"?: (event: MgPanelCustomEvent<boolean>) => void;
         /**
           * Emmited event when title change
          */
-        "onTitle-change"?: (event: CustomEvent<string>) => void;
+        "onTitle-change"?: (event: MgPanelCustomEvent<string>) => void;
         /**
           * Panel title
          */
@@ -2157,24 +2270,14 @@ declare namespace LocalJSX {
           * Sets an `id` attribute. Needed by the input for accessibility `aria-decribedby`.
          */
         "identifier"?: string;
+        /**
+          * Emited event when display value change
+         */
+        "onDisplay-change"?: (event: MgPopoverCustomEvent<boolean>) => void;
         /**
           * 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 {
         /**
@@ -2196,7 +2299,7 @@ declare namespace LocalJSX {
         /**
           * Emited event when active tab change
          */
-        "onActive-tab-change"?: (event: CustomEvent<number>) => void;
+        "onActive-tab-change"?: (event: MgTabsCustomEvent<number>) => void;
         /**
           * Define tabs size
          */
@@ -2232,28 +2335,16 @@ 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-details": MgDetails;
         "mg-form": MgForm;
         "mg-icon": MgIcon;
+        "mg-illustrated-message": MgIllustratedMessage;
         "mg-input-checkbox": MgInputCheckbox;
         "mg-input-date": MgInputDate;
         "mg-input-numeric": MgInputNumeric;
@@ -2281,8 +2372,10 @@ 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-details": LocalJSX.MgDetails & JSXBase.HTMLAttributes<HTMLMgDetailsElement>;
             "mg-form": LocalJSX.MgForm & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
+            "mg-illustrated-message": LocalJSX.MgIllustratedMessage & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;
             "mg-input-checkbox": LocalJSX.MgInputCheckbox & JSXBase.HTMLAttributes<HTMLMgInputCheckboxElement>;
             "mg-input-date": LocalJSX.MgInputDate & JSXBase.HTMLAttributes<HTMLMgInputDateElement>;
             "mg-input-numeric": LocalJSX.MgInputNumeric & JSXBase.HTMLAttributes<HTMLMgInputNumericElement>;