@mgdis/mg-components 5.25.2 → 5.27.0

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,17 @@
 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';
 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 +50,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 +64,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 +82,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 +119,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 +192,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,14 @@
 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';
 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 +42,7 @@ export declare class MgInputToggle {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     /**
      * Define if label is visible
      */
@@ -52,25 +51,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 +78,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 +132,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

@@ -29,7 +29,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,14 @@ 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';
 export declare class MgMenuItem {
     /************
      * Internal *
      ************/
     private readonly name;
     private readonly navigationButton;
-    private badgeLabel;
+    private messages;
     /**************
      * Decorators *
      **************/
@@ -28,16 +28,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 *

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'>;
 };
 /**

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

@@ -1,4 +1,4 @@
-import { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType } from './mg-action-more.conf';
+import type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType } from './mg-action-more.conf';
 export declare class MgActionMore {
     /************
      * Internal *
@@ -14,25 +14,25 @@ export declare class MgActionMore {
      * Get component DOM element
      */
     element: HTMLMgActionMoreElement;
+    /**
+     * Define the menu-items elements
+     */
+    items: MgActionMoreItemType[];
+    validateItems(newValue: MgActionMore['items']): void;
     /**
      * Define displayed icon
      */
-    icon: MgActionMoreIconType;
+    icon?: MgActionMoreIconType;
     validateIcon(newValue: MgActionMore['icon']): void;
     /**
      * Define button properties
      */
-    button: MgActionMoreButtonType;
+    button?: MgActionMoreButtonType;
     validateButton(newValue: MgActionMore['button']): void;
-    /**
-     * Define the menu-items elements
-     */
-    items: MgActionMoreItemType[];
-    validateItems(newValue: MgActionMore['items']): void;
     /**
      * Define if chevron is display
      */
-    displayChevron: boolean;
+    displayChevron?: boolean;
     validateDisplayChevron(newValue: MgActionMore['displayChevron']): void;
     /**
      * Menu expanded state

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

@@ -39,18 +39,18 @@ export declare class MgForm {
      * As **this element is an accessibility requirement in the view**,
      * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.
      */
-    requiredMessage: RequiredMessageStatusType;
+    requiredMessage?: RequiredMessageStatusType;
     validateRequiredMessage(newValue: any): void;
     /**
      * Define `<form/>` element aria role
      * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
      */
-    ariaRole: AriaRoleType;
+    ariaRole?: AriaRoleType;
     validateAriaRole(newValue: MgForm['ariaRole']): void;
     /**
      * Define if slotted mg-component's label are displayed on top
      */
-    labelOnTop: boolean;
+    labelOnTop?: boolean;
     handlelabelOnTop(newValue: MgForm['labelOnTop']): void;
     /**
      * Define if form is disabled

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

@@ -1,12 +1,5 @@
-import { MgIcon } from '../../atoms/mg-icon/mg-icon';
-import { MgMenu } from '../menu/mg-menu/mg-menu';
-/**
- * message type
- */
-export type MessageType = {
-    moreLabel: string;
-    badgeLabel: string;
-};
+import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import type { MgMenu } from '../menu/mg-menu/mg-menu';
 /**
  * SlotLabel prop type
  */
@@ -17,9 +10,7 @@ export type SlotLabelType = {
 /**
  * icon prop type
  */
-export type IconType = {
-    icon: MgIcon['icon'];
-};
+export type IconType = Pick<MgIcon, 'icon'>;
 /**
  * size type
  */

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

@@ -19,17 +19,17 @@ export declare class MgItemMore {
     /**
      * Define icon
      */
-    icon: IconType;
+    icon?: IconType;
     validateIcon(newValue: MgItemMore['icon']): void;
     /**
      * Define slot label element
      */
-    slotlabel: SlotLabelType;
+    slotlabel?: SlotLabelType;
     validateSlotLabel(newValue: MgItemMore['slotlabel']): void;
     /**
      * Define component child menu size.
      */
-    size: SizeType;
+    size?: SizeType;
     validateSize(newValue: MgItemMore['size']): void;
     /**
      * Define component parent menu.
@@ -52,6 +52,7 @@ export declare class MgItemMore {
     componentWillLoad(): void;
     /**
      * Ensure parent DOM is fully rendered with timeout method before parse elements
+     * @returns timeout
      */
     componentDidLoad(): ReturnType<typeof setTimeout>;
     /**

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

@@ -13,12 +13,12 @@ export declare class MgLoader {
     /**
      * Override loader message
      */
-    message: string;
+    message?: string;
     watchMessage(newValue: MgLoader['message']): void;
     /**
      * Hide message
      */
-    messageHide: boolean;
+    messageHide?: boolean;
     /*************
      * Lifecycle *
      *************/