@mgdis/mg-components 6.5.0 → 6.6.1

package/dist/mg-components/{p-1a162791.entry.js → p-c4f37d1f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as a}from"./p-e39791fa.js";import{i}from"./p-d9731ebc.js";import{m as r,V as s}from"./p-b6c1a6ce.js";const o=".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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !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}";const n=o;const m=class{constructor(t){e(this,t)}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:"8a6e91e7b727d2fa1478183c27caf11856cae5ce",class:"mg-c-loader","aria-live":"polite"},t("mg-icon",{key:"2417aafbc9d468413295dc89e4513cdd69a054b9",icon:"loader",spin:true}),t("span",{key:"23b5dbb5cd4cb2a062bbf1442737334fac2f4fba",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgess))}get element(){return a(this)}static get watchers(){return{message:["watchMessage"]}}};m.style=n;export{m as mg_loader};
-//# sourceMappingURL=p-1a162791.entry.js.map
+import{r as e,h as t,g as a}from"./p-e39791fa.js";import{i}from"./p-4049bd40.js";import{m as r,V as s}from"./p-3c6710be.js";const o=".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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !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}";const n=o;const m=class{constructor(t){e(this,t)}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:"b9442e1060b119499a8f35444be6b371d340dffc",class:"mg-c-loader","aria-live":"polite"},t("mg-icon",{key:"9ef418d26dd97c570147c99948509368a8abe84b",icon:"loader",spin:true}),t("span",{key:"4cff50728afc076ffa202fa1b3973573d2a073e8",class:{"mg-u-visually-hidden":this.messageHide}},this.message||this.messages.loader.inProgess))}get element(){return a(this)}static get watchers(){return{message:["watchMessage"]}}};m.style=n;export{m as mg_loader};
+//# sourceMappingURL=p-c4f37d1f.entry.js.map

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

@@ -133,6 +133,7 @@ export declare const icons: {
     'interrogation-circle-outline': string;
     key: string;
     laptop: string;
+    layers: string;
     'life-ring': string;
     'lines-rectangle': string;
     'lines-rectangle-outline': string;

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

@@ -0,0 +1,21 @@
+import Quill, { type QuillOptions } from 'quill';
+export type EditorOptionsType = QuillOptions & {
+    value: string;
+    handleTextChange: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+};
+export type EditorType = Quill;
+interface IdefineEditor {
+    (wrapperElement: HTMLElement, config: EditorOptionsType): EditorType;
+}
+/**
+ * Fixes for handling text selection in Quill when used within the Shadow DOM.
+ * - Fixes focus detection
+ * - Adapts native range handling to work with the Shadow DOM
+ * - Correctly manages text selection across Shadow DOM boundaries
+ * - Sets up selection change events
+ * @returns Quill instance
+ */
+export declare const defineEditor: IdefineEditor;
+export {};

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,7 +79,7 @@ export declare class MgMenuItem {
     /**
      * Parent menu direction
      */
-    direction: DirectionType;
+    direction: Direction;
     validateDirection(newValue: MgMenuItem['direction'], oldValue: MgMenuItem['direction']): void;
     /**
      * Does element is item-more
@@ -97,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

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