@mgdis/mg-components 6.4.0 → 6.6.0

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

@@ -0,0 +1,202 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '@mgdis/stencil-helpers';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
+import { type EditorOptionsType } from './editor';
+export declare class MgInputRichTextEditor {
+    /************
+     * Internal *
+     ************/
+    private editor;
+    private wrapperElement;
+    private messages;
+    private hasDisplayedError;
+    private readonly classFocus;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgInputRichTextEditorElement;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * Define the value of the editor
+     * Can be either HTML string or plain text
+     */
+    value: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop?: boolean;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
+    /**
+     * 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;
+    /**
+     * Define the number of visible text lines for the control
+     */
+    rows: number;
+    /**
+     * Define if input is required
+     */
+    required: boolean;
+    /**
+     * Define if the editor is readonly
+     */
+    readonly: boolean;
+    watchReadonly(newValue: MgInputRichTextEditor['readonly']): void;
+    /**
+     * Define if input is disabled
+     */
+    disabled: boolean;
+    watchDisabled(newValue: MgInputRichTextEditor['disabled']): void;
+    handleValidityChange(): 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;
+    /**
+     * Define input pattern error message
+     */
+    patternErrorMessage?: string;
+    validatePattern(newValue: string): void;
+    /**
+     * Add a tooltip message next to the input
+     */
+    tooltip?: string;
+    /**
+     * Define tooltip position
+     */
+    tooltipPosition: TooltipPosition;
+    /**
+     * Add a help text under the input, usually expected data format and example
+     */
+    helpText?: string;
+    /**
+     * Define input valid state
+     */
+    valid: boolean;
+    /**
+     * Define input invalid state
+     */
+    invalid: boolean;
+    /**
+     * Editor modules configuration
+     */
+    modules?: EditorOptionsType['modules'];
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Error message to display
+     */
+    errorMessage: string;
+    /**
+     * Emited event when checking validity
+     */
+    inputValid: EventEmitter<boolean>;
+    /**
+     * Emited event when value change
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Get editor content as HTML
+     * @returns HTML content of the editor
+     */
+    getHTML(): Promise<string>;
+    /**
+     * Get editor content as plain text
+     * @returns Plain text content of the editor
+     */
+    getText(): Promise<string>;
+    /**
+     * Display input error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
+     */
+    setError(valid: MgInputRichTextEditor['valid'], errorMessage: string): Promise<void>;
+    /**
+     * Reset value, validity and error state
+     */
+    reset(): Promise<void>;
+    /**
+     * Check if the field is empty taking into account the value format
+     * @returns truthy is value is invalid
+     */
+    private isEmpty;
+    /**
+     * Extract the text without HTML tags from value
+     * @returns text content
+     */
+    private getTextContent;
+    /**
+     * Get pattern validity
+     * @returns is pattern valid
+     */
+    private getPatternValidity;
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    private setValidity;
+    /**
+     * Check if input is valid
+     */
+    private checkValidity;
+    /**
+     * Set input error message
+     * @param errorMessage - errorMessage override
+     */
+    private setErrorMessage;
+    /**
+     * Handle focus event
+     */
+    private handleFocus;
+    /**
+     * Handles the blur event on the editor
+     * Checks validity and displays error messages if necessary
+     */
+    private handleBlur;
+    /**
+     * Handle `text-change` event
+     */
+    private handleTextChange;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * add listeners and render editor element
+     */
+    componentDidLoad(): void;
+    /**
+     * Render
+     * @returns HTML mg-input Element
+     */
+    render(): HTMLMgInputElement;
+}

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

@@ -1,13 +1,9 @@
-import type { Size } from '../../../../types';
+import type { Size, Direction } from '../../../../types';
 import type { MgItemMore } from '../../internals/mg-item-more/mg-item-more';
-/**
- * Menu direction type
- */
-export type DirectionType = 'vertical' | 'horizontal';
 /**
  * Menu direction values
  */
-export declare const Direction: Record<string, DirectionType>;
+export declare const directions: Record<string, Direction>;
 /**
  * ItemMore prop type
  */

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

@@ -1,4 +1,5 @@
-import type { MenuSizeType, ItemMoreType, DirectionType } from './mg-menu.conf';
+import type { MenuSizeType, ItemMoreType } from './mg-menu.conf';
+import { Direction } from '../../../../types';
 /**
  * @slot - Menu content
  */
@@ -23,7 +24,7 @@ export declare class MgMenu {
     /**
      * Component display direction.
      */
-    direction: DirectionType;
+    direction: Direction;
     validateDirection(newValue: MgMenu['direction']): void;
     /**
      * Customize "mg-item-more" element

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

@@ -1,7 +1,8 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { type MenuSizeType, type DirectionType } from '../mg-menu/mg-menu.conf';
+import { type MenuSizeType } from '../mg-menu/mg-menu.conf';
 import { type MgMenuStatusType, type TargetType } from './mg-menu-item.conf';
+import { Direction } from '../../../../types';
 /**
  * @slot - Menu item content
  * @slot image - Menu item image content
@@ -78,12 +79,8 @@ export declare class MgMenuItem {
     /**
      * Parent menu direction
      */
-    direction: DirectionType;
+    direction: Direction;
     validateDirection(newValue: MgMenuItem['direction'], oldValue: MgMenuItem['direction']): void;
-    /**
-     * Does component is in main menu
-     */
-    isInMainMenu: boolean;
     /**
      * Does element is item-more
      */
@@ -101,7 +98,7 @@ export declare class MgMenuItem {
      * direction value in dataset
      * @param newValue - new direction value
      */
-    watchDataStyleDirection(newValue: DirectionType): void;
+    watchDataStyleDirection(newValue: Direction): void;
     /**
      * has focus value in dataset
      * @param newValue - new direction value
@@ -110,6 +107,11 @@ export declare class MgMenuItem {
     /***********
      * Methods *
      **********/
+    /**
+     * Get parent menu
+     * @returns parent menu
+     */
+    private getParentMenu;
     /**
      * Does an Element have given Status
      * @param mgMenuItemElement - to parse
@@ -139,6 +141,11 @@ export declare class MgMenuItem {
      * @returns true is direction match the direction propertie
      */
     private isDirection;
+    /**
+     * Does component is in main menu
+     * @returns true if component is in main menu
+     */
+    private isInMainMenu;
     /**
      * Update displayNotificationBadge
      * current component notification badge have priority over the slot badge when submenu contain badge

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

@@ -11,6 +11,10 @@ export declare class MgDetails {
     /**************
      * Decorators *
      **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgDetailsElement;
     /**
      * Displayed title when details are closed
      */

package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.d.ts

@@ -1,10 +1,17 @@
-import type { Size } from '../../../types';
+import type { Size, Direction } from '../../../types';
 /**
  * List of all possibles sizes
  */
-declare const sizes: readonly ["medium", "small"];
+export declare const sizes: readonly ["small", "medium", "large"];
 /**
  * IllustratedMessage size type
  */
 export type IllustratedMessageSizeType = Size & (typeof sizes)[number];
-export {};
+/**
+ * List of all possibles directions
+ */
+export declare const directions: readonly ["vertical", "horizontal"];
+/**
+ * IllustratedMessage direction type
+ */
+export type IllustratedMessageDirectionType = Direction & (typeof directions)[number];

package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts

@@ -1,4 +1,5 @@
-import type { IllustratedMessageSizeType } from './mg-illustrated-message.conf';
+import { ClassList } from '@mgdis/stencil-helpers';
+import { type IllustratedMessageDirectionType, type IllustratedMessageSizeType } from './mg-illustrated-message.conf';
 /**
  * @slot illustration - Illustration content
  * @slot title - Title content
@@ -16,17 +17,30 @@ export declare class MgIllustratedMessage {
      * Define illustration size
      */
     size: IllustratedMessageSizeType;
+    watchSize(newValue: IllustratedMessageSizeType, oldValue?: IllustratedMessageSizeType): void;
     /**
      * Define component orientation
      */
-    direction: 'vertical' | 'horizontal';
+    direction: IllustratedMessageDirectionType;
+    watchDirection(newValue: IllustratedMessageDirectionType, oldValue?: IllustratedMessageDirectionType): void;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /***********
+     * Methods *
+     ***********/
+    /**
+     * Validate slots
+     */
+    private validateSlots;
     /*************
      * Lifecycle *
      *************/
     /**
      * Check if component props are well configured on init
      */
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -0,0 +1,6 @@
+import { type ExtendedPlacement, placements } from '../../../utils/floating-ui.utils';
+export * from '../../../utils/floating-ui.utils';
+/**
+ * Placement type from placements
+ */
+export type PopoverPlacementType = ExtendedPlacement & (typeof placements)[number];

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from '@popperjs/core';
+import { type PopoverPlacementType } from './mg-popover.conf';
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
@@ -8,10 +8,10 @@ export declare class MgPopover {
     /************
      * Internal *
      ************/
-    private popper;
     private mgPopover;
     private mgPopoverContent;
     private windows;
+    private floatingUICleanup;
     /**************
      * Decorators *
      **************/
@@ -28,7 +28,8 @@ export declare class MgPopover {
     /**
      * Popover placement
      */
-    placement: Placement;
+    placement: PopoverPlacementType;
+    watchPlacement(newValue: any): void;
     /**
      * Hide popover arrow
      */
@@ -69,11 +70,6 @@ export declare class MgPopover {
      * Hide popover
      */
     private hide;
-    /**
-     * Set popper listeners
-     * @param newValue - if true enable popper listners
-     */
-    private setPopperListeners;
     /**
      * Manage all clickOustside listeners
      * @param action - top process on elements listeners
@@ -87,6 +83,11 @@ export declare class MgPopover {
      * Render popover content element
      */
     private renderPopoverContent;
+    /**
+     * Set up Floating UI positioning and arrow behavior
+     * @param interactiveElement - Element that triggers the popover
+     */
+    private setFloatingUI;
     /*************
      * Lifecycle *
      *************/
@@ -102,6 +103,10 @@ export declare class MgPopover {
      * Check if component props are well configured on init
      */
     componentDidLoad(): void;
+    /**
+     * Cleanup when component is disconnected
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element