@mgdis/mg-components 6.23.0 → 6.25.0

package/dist/mg-components/p-f8e58181.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t,a}from"./p-D4bO_UCn.js";import{i}from"./p-BfblyCaJ.js";import{i as r,t as s}from"./p-91BOpzAB.js";const o=class{constructor(t){e(this,t),this.messageHide=!1}watchMessage(e){if(e&&!r(e))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${s(e)}.`)}componentWillLoad(){this.messages=i(this.element).messages,this.watchMessage(this.message)}render(){return t("div",{key:"a2e3880baccec9691a9fd6abbdb9e01d452136aa",class:"mg-c-loader","aria-live":"polite"},t("mg-icon",{key:"044153b87e799f1f51cb3c9c6236bf6b8b328cf5",icon:"loader",spin:!0}),t("span",{key:"5e4293bd33bd2a51b7557ebf26037991e4fc853e",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgress))}get element(){return a(this)}static get watchers(){return{message:[{watchMessage:0}]}}};o.style=".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}";export{o as mg_loader}

package/dist/types/assets/illustrations/index.d.ts

@@ -0,0 +1,21 @@
+export declare const illustrations: {
+    aides: string;
+    'all-done': string;
+    'convention-empty': string;
+    conviviale: string;
+    'digital-forms': string;
+    'digital-security': string;
+    disconnected: string;
+    documents: string;
+    echanges: string;
+    empty: string;
+    'missing-informations': string;
+    neutral: string;
+    'no-data': string;
+    'no-result': string;
+    'request-sent': string;
+    'search-no-result': string;
+    'secure-data': string;
+    stage: string;
+    welcome: string;
+};

package/dist/types/components/atoms/mg-divider/mg-divider.conf.d.ts

@@ -0,0 +1,9 @@
+import type { Direction } from '../../../types';
+/**
+ * List of all possibles directions
+ */
+export declare const directions: readonly ["horizontal", "vertical"];
+/**
+ * Divider direction type
+ */
+export type DividerDirectionType = Direction & (typeof directions)[number];

package/dist/types/components/atoms/mg-divider/mg-divider.d.ts

@@ -1,3 +1,4 @@
+import { type DividerDirectionType } from './mg-divider.conf';
 export declare class MgDivider {
     /**************
      * Decorators *
@@ -6,6 +7,18 @@ export declare class MgDivider {
      * Define component size
      */
     fullWidth: boolean;
+    /**
+     * Define component direction
+     */
+    direction: DividerDirectionType;
+    validateDirection(newValue: DividerDirectionType | ''): void;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components/atoms/mg-illustration/mg-illustration.conf.d.ts

@@ -0,0 +1,5 @@
+import { illustrations } from '../../../assets/illustrations';
+/**
+ * List of all possibles illustrations
+ */
+export type IllustrationType = keyof typeof illustrations;

package/dist/types/components/atoms/mg-illustration/mg-illustration.d.ts

@@ -0,0 +1,24 @@
+import { type IllustrationType } from './mg-illustration.conf';
+/**
+ * @part illustration - The inlined illustration SVG. Recolor its brand accent through the `--mg-b-color-app` custom property.
+ */
+export declare class MgIllustration {
+    /**
+     * Illustration HTML Element
+     */
+    element: HTMLMgIllustrationElement;
+    /**
+     * Illustration to display, by name from @mgdis/img.
+     */
+    illustration: IllustrationType;
+    validateIllustration(newValue: MgIllustration['illustration']): void;
+    /**
+     * Render illustration in shadowroot
+     * @param illustration - illustration to render
+     */
+    private renderIllustration;
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad(): void;
+}

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

@@ -11,6 +11,7 @@ export declare class MgInput {
     private readonly slotLabel;
     private readonly slotError;
     private readonly slotHelpText;
+    private readonly blockLevelContentRegExp;
     private errorMessageSlotElement;
     private helptextMessageSlotElement;
     private readonly classInput;
@@ -127,6 +128,23 @@ export declare class MgInput {
      * Render input label
      */
     private renderLabel;
+    /**
+     * Get the semantic tag name for a slotted message.
+     * Phrasing (textual/inline) content uses <p> (RGAA 8.9); block-level content falls back to
+     * <div> to avoid invalid nesting such as <p><p>…</p></p> (RGAA 8.2).
+     * @param content - the HTML content that will be injected in the slot
+     * @returns the tag name to use
+     */
+    private getSlotMessageTagName;
+    /**
+     * Get the existing slotted element or (re)create it with the expected tag.
+     * The element is recreated when its current tag no longer matches the expected one
+     * (e.g. the content switched from text to block HTML), keeping the slot id and position.
+     * @param slot - the slot name
+     * @param tagName - the expected tag name
+     * @returns the slotted element
+     */
+    private getSlotMessageElement;
     /**
      * Render error message
      */

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

@@ -167,7 +167,7 @@ export declare class MgInputCheckbox implements Omit<IMgInputCheckboxListProps,
      */
     valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;
     /**

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList, Paginate } from '@mgdis/core-ui-helpers/dist/utils';
+import { type Placement } from '@popperjs/core';
 import { type RequestMappingType, type ResponseMappingType } from './mg-input-combobox.conf';
 import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 import type { Option } from '../../../../types';
@@ -90,6 +91,10 @@ export declare class MgInputCombobox {
      */
     mgWidth: Width;
     watchMgWidth(newValue: MgInputCombobox['mgWidth']): void;
+    /**
+     * Define the popover placement
+     */
+    popoverPlacement: Placement;
     /**
      * Add a tooltip message next to the input
      */
@@ -192,23 +197,23 @@ export declare class MgInputCombobox {
     popoverDisplay: boolean;
     watchPopoverDisplay(newValue: MgInputCombobox['popoverDisplay']): void;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputComboboxElement['value']>;
     /**
-     * Emited event when filter change
+     * Emitted event when filter change
      */
     filterChange: EventEmitter<string>;
     /**
-     * Emited event when `load-more` is called
+     * Emitted event when `load-more` is called
      */
     showMore: EventEmitter<void>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputComboboxElement['valid']>;
     /**
-     * Emited event when fetch API throw an error
+     * Emitted event when fetch API throw an error
      */
     fetchError: EventEmitter<Error>;
     /**

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

@@ -105,11 +105,11 @@ export declare class MgInputDate {
      */
     errorMessage: string;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputDateElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;
     /**

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

@@ -153,11 +153,11 @@ export declare class MgInputNumeric {
      */
     hasFocus: boolean;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<number>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputNumericElement['valid']>;
     /**

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

@@ -105,11 +105,11 @@ export declare class MgInputPassword {
      */
     displayPassword: boolean;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputPasswordElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputPasswordElement['valid']>;
     /**

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

@@ -111,7 +111,7 @@ export declare class MgInputRadio {
      */
     valueChange: EventEmitter<HTMLMgInputRadioElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputRadioElement['valid']>;
     /**

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

@@ -1,4 +1,5 @@
 import type { IJodit, ButtonsOption } from 'jodit/esm/types';
+import type { RichTextEditorCustomAction } from '../mg-input-rich-text-editor.conf';
 /**
  * Configuration options for defineEditor function
  * Combines component-specific options with Jodit configuration
@@ -9,9 +10,12 @@ export type DefineEditorConfig = {
     disabled?: boolean;
     placeholder?: string;
     modules: ButtonsOption;
+    customActions?: RichTextEditorCustomAction[];
     rows?: number;
     handleTextChange: () => void;
     handleFocus: () => void;
     handleBlur: () => void;
+    handleCustomAction?: (name: string) => void;
+    handleSelectionChange?: () => void;
 };
 export type { IJodit, ButtonsOption };

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

@@ -1,3 +1,28 @@
 import type { ButtonsOption } from './editor/editor.conf';
+import type { IconType } from '../../../atoms/mg-icon/mg-icon.conf';
+/**
+ * Custom toolbar action injected by the consumer.
+ * Each action is rendered as a toolbar button appended after the built-in modules.
+ * The editor stays decoupled from the underlying editor library: consumers only
+ * declare the action, then react through the `custom-action` event and the
+ * selection methods (`getSelectedText`, `getSelectedHTML`, `replaceSelection`).
+ */
+export type RichTextEditorCustomAction = {
+    /** Unique action name. Returned in the `custom-action` event detail when the button is clicked. */
+    name: string;
+    /** Accessible label, used as the button tooltip and aria-label. */
+    label: string;
+    /** Icon rendered inside the button. Must be one of the design system `mg-icon` names. */
+    icon: IconType;
+};
+/** Payload emitted by the `selection-change` event. */
+export type SelectionChange = {
+    /** Plain text of the current selection. */
+    text: string;
+    /** Sanitized HTML of the current selection. */
+    html: string;
+    /** Whether the selection is collapsed (i.e. empty, no range selected). */
+    isCollapsed: boolean;
+};
 /** Default toolbar modules when the modules prop is not set. */
 export declare const DEFAULT_MODULES: ButtonsOption;

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

@@ -3,6 +3,7 @@ import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
 import { type TooltipPosition } from '../mg-input/mg-input.conf';
 import { type SanitizerOptions } from '@mgdis/sanitize-html';
 import type { ButtonsOption } from './editor/editor.conf';
+import { type RichTextEditorCustomAction, type SelectionChange } from './mg-input-rich-text-editor.conf';
 export declare class MgInputRichTextEditor {
     /************
      * Internal *
@@ -12,6 +13,7 @@ export declare class MgInputRichTextEditor {
     private currentTitleElement;
     private sanitizer;
     private messages;
+    private savedSelection;
     private hasDisplayedError;
     private customErrorMessage;
     /**************
@@ -110,6 +112,18 @@ export declare class MgInputRichTextEditor {
      */
     modules?: ButtonsOption;
     watchModules(newValue: MgInputRichTextEditor['modules']): void;
+    /**
+     * Inject custom action buttons in the toolbar (e.g. to insert merge fields or apply custom formatting).
+     * Buttons are appended after the built-in `modules`.
+     * Each action is an object `{ name, label, icon }`:
+     * - `name`: unique identifier, returned in the `custom-action` event detail on click.
+     * - `label`: accessible label used as the button tooltip and aria-label.
+     * - `icon`: design system `mg-icon` name rendered inside the button, unique across actions.
+     * The action behaviour is the consumer's responsibility: listen to `custom-action`,
+     * then read/write the selection with `getSelectedText()` / `getSelectedHTML()` / `replaceSelection()`.
+     */
+    customActions?: RichTextEditorCustomAction[];
+    watchCustomActions(newValue: MgInputRichTextEditor['customActions']): void;
     /**
      * Sanitizer configuration in native format.
      * Use disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).
@@ -134,13 +148,23 @@ export declare class MgInputRichTextEditor {
      */
     errorMessage: string;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<boolean>;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<string>;
+    /**
+     * Emitted event when a custom action button is clicked.
+     * The detail contains the action `name`.
+     */
+    customAction: EventEmitter<string>;
+    /**
+     * Emitted event when the text selection changes.
+     * The detail contains the selected `text`, sanitized `html` and whether the selection `isCollapsed`.
+     */
+    selectionChange: EventEmitter<SelectionChange>;
     /**
      * Set focus on input.
      */
@@ -155,6 +179,26 @@ export declare class MgInputRichTextEditor {
      * @returns Plain text content of the editor
      */
     getEditorText(): Promise<string>;
+    /**
+     * Get the current text selection as plain text.
+     * When a custom action is in progress, returns the selection snapshotted when the action was triggered.
+     * @returns Plain text of the selection (empty string if nothing is selected)
+     */
+    getSelectedText(): Promise<string>;
+    /**
+     * Get the current text selection as HTML.
+     * When a custom action is in progress, returns the selection snapshotted when the action was triggered.
+     * @returns Sanitized HTML of the selection (empty string if nothing is selected)
+     */
+    getSelectedHTML(): Promise<string>;
+    /**
+     * Replace the current text selection with the given content.
+     * When a custom action is in progress, the selection snapshotted when the action was triggered is
+     * restored first, so the replacement targets the right range even after focus moved away (e.g. during
+     * an async network request). No-op when the editor is readonly or disabled.
+     * @param content - HTML (or plain text) content to insert in place of the selection. It is sanitized.
+     */
+    replaceSelection(content: string): Promise<void>;
     /**
      * Display input error if it exists.
      */
@@ -210,6 +254,21 @@ export declare class MgInputRichTextEditor {
      * Handle `text-change` event
      */
     private handleTextChange;
+    /**
+     * Capture the current selection (plain text, sanitized HTML and a cloned range).
+     * @returns Selection snapshot
+     */
+    private captureSelection;
+    /**
+     * Handle a custom action button click.
+     * Snapshots the current selection then emits the `custom-action` event with the action name.
+     * @param name - the triggered action name
+     */
+    private handleCustomAction;
+    /**
+     * Handle Jodit `changeSelection` event: emit the `selection-change` event.
+     */
+    private handleSelectionChange;
     /**
      * Initialize sanitizer with current sanitizerOptions
      */

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

@@ -119,11 +119,11 @@ export declare class MgInputSelect {
      */
     valueExist: boolean;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;
     /**

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

@@ -144,11 +144,11 @@ export declare class MgInputText {
      */
     errorMessage: string;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputTextElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputTextElement['valid']>;
     /**

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

@@ -125,11 +125,11 @@ export declare class MgInputTextarea {
      */
     errorMessage: string;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;
     /**

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

@@ -103,11 +103,11 @@ export declare class MgInputToggle {
      */
     valid: boolean;
     /**
-     * Emited event when value change
+     * Emitted event when value change
      */
     valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;
     /**
-     * Emited event when checking validity
+     * Emitted event when checking validity
      */
     inputValid: EventEmitter<boolean>;
     /**

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

@@ -61,11 +61,11 @@ export declare class MgMenuItem {
      * Events *
      *********/
     /**
-     * Emited event when item is loaded
+     * Emitted event when item is loaded
      */
     itemLoaded: EventEmitter<void>;
     /**
-     * Emited event when item is updated
+     * Emitted event when item is updated
      */
     itemUpdated: EventEmitter<void>;
     /**********

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

@@ -54,11 +54,11 @@ export declare class MgAlert {
      */
     hasActions: boolean;
     /**
-     * Emited event when alert is diplayed
+     * Emitted event when alert is diplayed
      */
     componentShow: EventEmitter<void>;
     /**
-     * Emited event when alert is hidden
+     * Emitted event when alert is hidden
      */
     componentHide: EventEmitter<void>;
     /**

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 import { BreadcrumbItemType } from './mg-breadcrumb.conf';
 export declare class MgBreadcrumb {
     /************
@@ -15,10 +16,20 @@ export declare class MgBreadcrumb {
      * Breadcrumb items (hierarchical order: root → current page).
      */
     items: BreadcrumbItemType[];
+    /**
+     * Emitted event when item link is clicked
+     */
+    itemClick: EventEmitter<BreadcrumbItemType>;
     validateItems(newValue: MgBreadcrumb['items']): void;
     /***********
      * Methods *
      **********/
+    /**
+     * Handle item link click: emit item-click event and conditionally prevent native navigation
+     * @param event - mouse event
+     * @param item - the clicked breadcrumb item
+     */
+    private handleItemClick;
     /**
      * Render a single breadcrumb item (link or current page)
      * @param item - The breadcrumb item

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

@@ -24,7 +24,7 @@ export declare class MgPopoverContent {
      */
     classCollection: ClassList;
     /**
-     * Emited event when close button is clicked
+     * Emitted event when close button is clicked
      */
     hideContent: EventEmitter<void>;
     /**

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

@@ -33,9 +33,9 @@ export declare class MgPopover {
     placement: Placement;
     /**
      * Hide popover arrow
+     * @deprecated this prop is deprecated and will be removed in future releases. The popover arrow has been removed.
      */
-    arrowHide: boolean;
-    validateArrowHide(newValue: MgPopover['arrowHide']): void;
+    arrowHide: never;
     /**
      * Define if popover has a cross button
      */
@@ -51,7 +51,7 @@ export declare class MgPopover {
      */
     disabled: boolean;
     /**
-     * Emited event when display value change
+     * Emitted event when display value change
      */
     displayChange: EventEmitter<HTMLMgPopoverElement['display']>;
     /**

package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts

@@ -18,7 +18,7 @@ export declare class MgSkipLinks {
     links: SkipLink[];
     validateLinks(links: SkipLink[]): void;
     /**
-     * Emited event when link is clicked
+     * Emitted event when link is clicked
      */
     goToAnchor: EventEmitter<string>;
     /***********

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

@@ -55,7 +55,7 @@ export declare class MgTabs {
      */
     classCollection: ClassList;
     /**
-     * Emited event when active tab change
+     * Emitted event when active tab change
      */
     activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;
     /**