@mgdis/mg-components 5.26.0 → 5.27.1

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { type TooltipPosition, type Width } from '../MgInput.conf';
-import { type NumericType, type Format } from './mg-input-numeric.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
+import { type NumericType, type Format } from './mg-input-numeric.conf';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
+/**
+ * @slot append-input - Content to display next to the input
+ */
 export declare class MgInputNumeric {
     /************
      * Internal *
@@ -42,7 +45,7 @@ export declare class MgInputNumeric {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -51,7 +54,7 @@ export declare class MgInputNumeric {
      * 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.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Define if input is required
      */
@@ -60,27 +63,30 @@ export declare class MgInputNumeric {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputNumeric['readonly']): void;
     /**
      * Maximum value
      */
-    max: number;
+    max?: number;
     /**
      * Minimum value
      */
-    min: number;
+    min?: number;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputNumeric['disabled']): void;
     /**
      * Define input width
      */
-    mgWidth: Width;
+    mgWidth?: Width;
+    watchMgWidth(newValue: MgInputNumeric['mgWidth']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -88,7 +94,7 @@ export declare class MgInputNumeric {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define numeric type
      */

package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { type TooltipPosition, type Width } from '../MgInput.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 export declare class MgInputPassword {
     /************
      * Internal *
@@ -37,7 +37,7 @@ export declare class MgInputPassword {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -46,7 +46,7 @@ export declare class MgInputPassword {
      * 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.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Define if input is required
      */
@@ -55,19 +55,22 @@ export declare class MgInputPassword {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputPassword['readonly']): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputPassword['disabled']): void;
     /**
      * Define input width
      */
     mgWidth: Width;
+    watchMgWidth(newValue: MgInputPassword['mgWidth']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -75,7 +78,7 @@ export declare class MgInputPassword {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */
@@ -92,6 +95,10 @@ export declare class MgInputPassword {
      * Error message to display
      */
     errorMessage: string;
+    /**
+     * Indicates if password is displayed or not
+     */
+    displayPassword: boolean;
     /**
      * Emited event when value change
      */
@@ -126,6 +133,10 @@ export declare class MgInputPassword {
      * Handle blur event
      */
     private handleBlur;
+    /**
+     * Toggle display-pasword value
+     */
+    private toggleDisplayPassword;
     /**
      * Check if input is valid
      */

package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts

@@ -1,12 +1,13 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { RadioOption } from './mg-input-radio.conf';
-import { type TooltipPosition } from '../MgInput.conf';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
 export declare class MgInputRadio {
     /************
      * Internal *
      ************/
     private inputs;
+    private readonly classVerticalList;
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
@@ -52,6 +53,7 @@ export declare class MgInputRadio {
      * Define if inputs are display verticaly
      */
     inputVerticalList: boolean;
+    watchInputVerticalList(newValue: MgInputRadio['inputVerticalList']): void;
     /**
      * Define if input is required
      */
@@ -60,15 +62,17 @@ export declare class MgInputRadio {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputRadio['readonly']): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputRadio['disabled']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -76,7 +80,7 @@ export declare class MgInputRadio {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */

package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { type TooltipPosition, type Width } from '../MgInput.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { SelectOption, OptGroup } from './mg-input-select.conf';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 export declare class MgInputSelect {
     /************
      * Internal *
@@ -43,7 +43,7 @@ export declare class MgInputSelect {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -69,19 +69,22 @@ export declare class MgInputSelect {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputSelect['readonly']): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputSelect['disabled']): void;
     /**
      * Define input width
      */
     mgWidth: Width;
+    watchMgWidth(newValue: MgInputSelect['mgWidth']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -89,7 +92,7 @@ export declare class MgInputSelect {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */

package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts

@@ -1,14 +1,20 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { type TooltipPosition, type Width } from '../MgInput.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { TextType } from './mg-input-text.conf';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
+import { IconType } from '../../../../components';
+/**
+ * @slot append-input - Content to display next to the input
+ */
 export declare class MgInputText {
     /************
      * Internal *
      ************/
-    private classFocus;
-    private classIsInputGroupAppend;
-    private classHasIcon;
+    private readonly classFocus;
+    private readonly classIsInputGroupAppend;
+    private readonly classHasIcon;
+    private readonly classHasButtonsGroupAppend;
+    private readonly classIsAppendInputSlotContent;
     private characterLeftId;
     private datalistId;
     private input;
@@ -47,12 +53,12 @@ export declare class MgInputText {
     /**
      * Input icon
      */
-    icon: string;
+    icon?: IconType;
     validateIcon(newValue: string): void;
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -61,7 +67,7 @@ export declare class MgInputText {
      * 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.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Define datalist options
      */
@@ -79,29 +85,32 @@ export declare class MgInputText {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputText['readonly']): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputText['disabled']): void;
     /**
      * Define input width
      */
     mgWidth: Width;
+    watchMgWidth(newValue: MgInputText['mgWidth']): void;
     /**
      * Define input pattern to validate
      * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.
      */
-    pattern: string;
+    pattern?: string;
     /**
      * Define input pattern error message
      */
-    patternErrorMessage: string;
+    patternErrorMessage?: string;
     validatePattern(newValue: string): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -113,7 +122,7 @@ export declare class MgInputText {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */
@@ -186,7 +195,7 @@ export declare class MgInputText {
      */
     private validateAppendSlot;
     /**
-     * Methode to control datalist display condition
+     * Method to control datalist display condition
      * @returns true if display condition success
      */
     private hasDatalist;

package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { type TooltipPosition, type Width } from '../MgInput.conf';
 import { ClassList } from '@mgdis/stencil-helpers';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 export declare class MgInputTextarea {
     /************
      * Internal *
      ************/
-    private classFocus;
-    private classHasDisplayCharacterLeft;
+    private readonly classFocus;
+    private readonly classHasDisplayCharacterLeft;
     private characterLeftId;
     private input;
     private messages;
@@ -40,7 +40,7 @@ export declare class MgInputTextarea {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -49,7 +49,7 @@ export declare class MgInputTextarea {
      * 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.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Input max length
      */
@@ -62,24 +62,27 @@ export declare class MgInputTextarea {
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputTextarea['readonly']): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
     handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    validateDisabled(newValue: MgInputTextarea['disabled']): void;
     /**
      * Define input width
      */
     mgWidth: Width;
+    watchMgWidth(newValue: MgInputTextarea['mgWidth']): void;
     /**
      * Define input pattern to validate
      * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.
      */
-    pattern: string;
+    pattern?: string;
     /**
      * Define input pattern error message
      */
-    patternErrorMessage: string;
+    patternErrorMessage?: string;
     validatePattern(newValue: string): void;
     /**
      * Define the number of visible text lines for the control
@@ -88,7 +91,7 @@ export declare class MgInputTextarea {
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -101,7 +104,7 @@ export declare class MgInputTextarea {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Define input valid state
      */

package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts

@@ -1,15 +1,18 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { ToggleValue } from './mg-input-toggle.conf';
-import { type TooltipPosition } from '../MgInput.conf';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
+/**
+ * @slot item-1 - Left option toggle content
+ * @slot item-2 - Right option toggle content
+ */
 export declare class MgInputToggle {
     /************
      * Internal *
      ************/
-    private classDisabled;
-    private classIsActive;
-    private classOnOff;
-    private classIcon;
+    private readonly classIsActive;
+    private readonly classOnOff;
+    private readonly classIcon;
     /**************
      * Decorators *
      **************/
@@ -43,7 +46,7 @@ export declare class MgInputToggle {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -52,25 +55,26 @@ export declare class MgInputToggle {
      * Define if toggle have on/off style
      */
     isOnOff: boolean;
-    handleIsOnOff(newValue: MgInputToggle['isOnOff']): void;
+    watchIsOnOff(newValue: MgInputToggle['isOnOff']): void;
     /**
      * Define if toggle display icon
      */
     isIcon: boolean;
-    handleIsIcon(newValue: MgInputToggle['isIcon']): void;
+    watchIsIcon(newValue: MgInputToggle['isIcon']): void;
     /**
      * Define if input is readonly
      */
     readonly: boolean;
+    watchReadonly(newValue: MgInputToggle['readonly']): void;
     /**
      * Define if input is disabled
      */
     disabled: boolean;
-    handleDisabled(newValue: MgInputToggle['disabled']): void;
+    watchDisabled(newValue: MgInputToggle['disabled']): void;
     /**
      * Add a tooltip message next to the input
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Define tooltip position
      */
@@ -78,7 +82,7 @@ export declare class MgInputToggle {
     /**
      * Add a help text under the input, usually expected data format and example
      */
-    helpText: string;
+    helpText?: string;
     /**
      * Component classes
      */
@@ -132,7 +136,7 @@ export declare class MgInputToggle {
     private validateSlots;
     /**
      * Get checked item
-     * @param checked
+     * @param checked - checked item
      * @returns toggle value
      */
     private getCheckedItem;

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

@@ -1,5 +1,8 @@
 import { Direction } from './mg-menu.conf';
 import type { MenuSizeType, ItemMoreType } from './mg-menu.conf';
+/**
+ * @slot - Menu content
+ */
 export declare class MgMenu {
     /************
      * Internal *
@@ -29,7 +32,7 @@ export declare class MgMenu {
      * Customize "mg-item-more" element
      * Used with direction: 'vertical' to manage overflow
      */
-    itemmore: ItemMoreType;
+    itemmore?: ItemMoreType;
     validateItemMore(newValue: MgMenu['itemmore']): void;
     /**
      * Define mg-menu size

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts

@@ -19,3 +19,11 @@ export declare enum Status {
  * Direction type
  */
 export type DirectionType = MgMenu['direction'];
+/**
+ * List of all possibles target
+ */
+export declare const targets: readonly ["_blank", "_self", "_parent", "_top"];
+/**
+ * VariantType type from link target
+ */
+export type TargetType = (typeof targets)[number];

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -2,14 +2,21 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
 import { Status } from './mg-menu-item.conf';
 import type { MenuSizeType } from '../mg-menu/mg-menu.conf';
-import type { DirectionType } from './mg-menu-item.conf';
+import type { DirectionType, TargetType } from './mg-menu-item.conf';
+/**
+ * @slot - Menu item content
+ * @slot image - Menu item image content
+ * @slot label - Menu item label content
+ * @slot information - Menu item information content
+ * @slot metadata - Menu item metadata content
+ */
 export declare class MgMenuItem {
     /************
      * Internal *
      ************/
     private readonly name;
     private readonly navigationButton;
-    private badgeLabel;
+    private messages;
     /**************
      * Decorators *
      **************/
@@ -28,16 +35,21 @@ export declare class MgMenuItem {
      * Define menu-item href
      * when defined menu-item contain an anchor instead of button
      */
-    href: string;
+    href?: string;
+    /**
+     * Define target type
+     */
+    target?: TargetType;
+    watchTarget(newValue: MgMenuItem['target']): void;
     /**
      * Define menu-item status.
      */
-    status: Status;
+    status?: Status;
     validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
     /**
      * Define menu-item content expanded.
      */
-    expanded: boolean;
+    expanded?: boolean;
     validateExpanded(newValue: MgMenuItem['expanded']): void;
     /**********
      * Events *
@@ -50,6 +62,10 @@ export declare class MgMenuItem {
      * Emited event when item is loaded
      */
     itemLoaded: EventEmitter<void>;
+    /**
+     * Emited event when item is updated
+     */
+    itemUpdated: EventEmitter<void>;
     /**********
      * States *
      *********/
@@ -178,6 +194,10 @@ export declare class MgMenuItem {
      * @returns HTML Element
      */
     private renderSlot;
+    /**
+     * Emit event when component is updated
+     */
+    componentShouldUpdate(): Promise<void>;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts

@@ -1,22 +1,15 @@
-import { MgBadge } from '../../atoms/mg-badge/mg-badge';
-import { MgButton } from '../../atoms/mg-button/mg-button';
-import { MgIcon } from '../../atoms/mg-icon/mg-icon';
-import { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';
+import type { MgBadge } from '../../atoms/mg-badge/mg-badge';
+import type { MgButton } from '../../atoms/mg-button/mg-button';
+import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import type { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';
 /**
  * prop icon type
  */
-export type MgActionMoreIconType = {
-    icon: MgIcon['icon'];
-};
+export type MgActionMoreIconType = Pick<MgIcon, 'icon'>;
 /**
  * prop button type
  */
-export type MgActionMoreButtonType = {
-    isIcon: MgButton['isIcon'];
-    variant: MgButton['variant'];
-    label?: MgButton['label'];
-    disabled?: MgButton['disabled'];
-};
+export type MgActionMoreButtonType = Pick<MgButton, 'isIcon' | 'variant' | 'label' | 'disabled'>;
 /**
  * locals message type
  */
@@ -26,12 +19,10 @@ export type MgActionMoreMessageType = {
 /**
  * prop item type
  */
-export type MgActionMoreItemType = {
+export type MgActionMoreItemType = Pick<MgMenuItem, 'status' | 'href' | 'target'> & {
     label: string;
     mouseEventHandler: IMouseEventHandler;
-    status?: MgMenuItem['status'];
     icon?: MgIcon['icon'];
-    href?: MgMenuItem['href'];
     badge?: Pick<MgBadge, 'value' | 'label'>;
 };
 /**