@mgdis/mg-components 5.21.1 → 5.23.0

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

@@ -111,6 +111,7 @@ export declare const icons: {
     gavel: string;
     'gavel-outline': string;
     'graduation-cap': string;
+    'graduation-cap-outline': string;
     'hand-up': string;
     history: string;
     home: string;

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

@@ -1,5 +1,5 @@
 import { BadgeVariantType } from './mg-badge.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgBadge {
     /************
      * Internal *

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { VariantType, ButtonType } from './mg-button.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgButton {
     /************
      * Internal *

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

@@ -1,4 +1,4 @@
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { type VariantStyleType, type VariantType } from './mg-card.conf';
 export declare class MgCard {
     /*************

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

@@ -1,5 +1,5 @@
 import { IconVariantType, IconSizeType, IconVariantStyleType } from './mg-icon.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgIcon {
     private svg;
     /**

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

@@ -1,5 +1,5 @@
 import { TagVariantType } from './mg-tag.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgTag {
     /************
      * Internal *

package/dist/types/components/molecules/inputs/MgInput.d.ts

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from '../../../stencil-public-runtime';
 import { Width } from './MgInput.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';
 /**
  * MgInput Interface

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

@@ -64,3 +64,11 @@ export interface MgInputCheckboxListProps extends IMgInputCheckboxBase {
     checkboxes: CheckboxItem[];
     id: string;
 }
+/**
+ * Define select values button key
+ */
+export declare enum SelectValuesButtonKey {
+    EDIT = "editButton",
+    SHOW = "showButton",
+    SELECT = "selectButton"
+}

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
+import { ClassList } from '@mgdis/stencil-helpers';
+import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps, SelectValuesButtonKey } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
     /************
      * Internal *
@@ -15,6 +15,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private readonly baseClassName;
     private readonly multiStart;
     private readonly searchStart;
+    private hasOpenedPopover;
     /**************
      * Decorators *
      **************/
@@ -124,6 +125,10 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Search current page
      */
     searchResults: CheckboxItem[];
+    /**
+     * Select values button text local key
+     */
+    selectValuesButtonKey: SelectValuesButtonKey;
     /**
      * Emitted event when value change
      */
@@ -157,7 +162,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private handleInput;
     /**
      * Keyboard handler
-     * @param event - to trak "tab" key
+     * @param event - to track "tab" key
      */
     private handleKeydown;
     /**
@@ -209,11 +214,9 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      */
     private checkValidity;
     /**
-     * Render button text
-     * @param selectedValuesNb - nb of selected values
-     * @returns translated message
+     * Set button text locale key
      */
-    private renderButtonText;
+    private setButtonText;
     /**
      * Set input error message
      * @param displayError - dispay error condition
@@ -230,6 +233,11 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @returns items to display
      */
     private getDisplayItems;
+    /**
+     * get list of selected checkboxItems
+     * @returns selected checkboxItems
+     */
+    private getSelectedItems;
     /*************
      * Lifecycle *
      *************/
@@ -242,12 +250,6 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * add listeners and DOM attributed
      */
     componentDidLoad(): void;
-    /**
-     * Render checkbox multi display values
-     * @param selectedValuesNb - selected values length
-     * @returns display selected values
-     */
-    private renderCheckboxMultiDisplaySelectedValues;
     /**
      * Render checkboxes by section
      * @param checkboxes - checkboxes to render

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputDate {
     /************
      * Internal *
@@ -7,6 +7,7 @@ export declare class MgInputDate {
     private input;
     private messages;
     private locale;
+    private systemLocale;
     private hasDisplayedError;
     private handlerInProgress;
     /**************
@@ -61,6 +62,11 @@ export declare class MgInputDate {
     tooltip: string;
     /**
      * Add a help text under the input, usually expected data format and example
+     * Available string variables:
+     *  - `{pattern}`: render innerHTML pattern based on system
+     *  - `{date}`: render innerText date with a pattern base format.
+     *  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.
+     * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
      */
     helpText: string;
     /**
@@ -111,6 +117,12 @@ export declare class MgInputDate {
      * @param errorMessage - the error message to display
      */
     setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void>;
+    /**
+     * Format help text to display
+     * @param helpText - help text format
+     * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
+     */
+    private formatHelpText;
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -146,6 +158,11 @@ export declare class MgInputDate {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Render pattern
+     * @returns translated html pattern
+     */
+    private renderPattern;
     /**
      * Render
      * @returns HTML Element

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputNumeric {
     /************
      * Internal *

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 { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputPassword {
     /************
      * Internal *

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { RadioOption } from './mg-input-radio.conf';
 export declare class MgInputRadio {
     /************

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { SelectOption, OptGroup } from './mg-input-select.conf';
 export declare class MgInputSelect {
     /************

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { TextType } from './mg-input-text.conf';
 export declare class MgInputText {
     /************

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputTextarea {
     /************
      * Internal *

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { ToggleValue } from './mg-input-toggle.conf';
 export declare class MgInputToggle {
     /************

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+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';

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { AriaRoleType, RequiredMessageStatusType } from './mg-form.conf';
 export declare class MgForm {
     /************

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { VariantType } from './mg-message.conf';
 export declare class MgMessage {
     /************

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { DialogRoleType } from './mg-modal.conf';
 export declare class MgModal {
     /************

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
 export declare class MgPanel {
     /************

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgPopoverContent {
     /************
      * Internal *

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { TabItem, SizeType } from './mg-tabs.conf';
 export declare class MgTabs {
     /************

package/dist/types/components.d.ts

@@ -365,7 +365,7 @@ export namespace Components {
          */
         "displayError": () => Promise<void>;
         /**
-          * Add a help text under the input, usually expected data format and example
+          * Add a help text under the input, usually expected data format and example Available string variables:  - `{pattern}`: render innerHTML pattern based on system  - `{date}`: render innerText date with a pattern base format.  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text. ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
          */
         "helpText": string;
         /**
@@ -2216,7 +2216,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Add a help text under the input, usually expected data format and example
+          * Add a help text under the input, usually expected data format and example Available string variables:  - `{pattern}`: render innerHTML pattern based on system  - `{date}`: render innerText date with a pattern base format.  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text. ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
          */
         "helpText"?: string;
         /**

package/dist/types/locales/index.d.ts

@@ -1,177 +1,3 @@
-declare const messages: {
-    en: {
-        errors: {
-            required: string;
-            date: {
-                badInput: string;
-                min: string;
-                max: string;
-                minMax: string;
-            };
-            numeric: {
-                min: string;
-                max: string;
-                minMax: string;
-            };
-        };
-        nbCharLeft: string;
-        input: {
-            select: {
-                placeholder: string;
-            };
-            checkbox: {
-                selectedValues: string;
-                selectedValue: string;
-                editButton: string;
-                selectButton: string;
-                showButton: string;
-                label: string;
-                result: string;
-                results: string;
-                searchResults: string;
-                noResult: string;
-                sections: {
-                    selected: {
-                        title: string;
-                        titlePlurial: string;
-                        action: string;
-                    };
-                    notSelected: {
-                        title: string;
-                        titlePlurial: string;
-                        action: string;
-                    };
-                };
-            };
-        };
-        form: {
-            required: string;
-            requiredSingle: string;
-            allRequired: string;
-            allRequiredSingle: string;
-        };
-        message: {
-            closeButton: string;
-        };
-        modal: {
-            closeButton: string;
-        };
-        pagination: {
-            label: string;
-            page: string;
-            pages: string;
-            nextPage: string;
-            previousPage: string;
-            selectPage: string;
-        };
-        panel: {
-            editLabel: string;
-        };
-        skipLinks: {
-            navLabel: string;
-        };
-        general: {
-            confirm: string;
-            cancel: string;
-            close: string;
-            next: string;
-            previous: string;
-        };
-        plusMenu: {
-            moreLabel: string;
-            badgeLabel: string;
-        };
-        actionMore: {
-            label: string;
-        };
-    };
-    fr: {
-        errors: {
-            required: string;
-            date: {
-                badInput: string;
-                min: string;
-                max: string;
-                minMax: string;
-            };
-            numeric: {
-                min: string;
-                max: string;
-                minMax: string;
-            };
-        };
-        nbCharLeft: string;
-        input: {
-            select: {
-                placeholder: string;
-            };
-            checkbox: {
-                selectedValues: string;
-                selectedValue: string;
-                editButton: string;
-                selectButton: string;
-                showButton: string;
-                label: string;
-                result: string;
-                results: string;
-                searchResults: string;
-                noResult: string;
-                sections: {
-                    selected: {
-                        title: string;
-                        titlePlurial: string;
-                        action: string;
-                    };
-                    notSelected: {
-                        title: string;
-                        titlePlurial: string;
-                        action: string;
-                    };
-                };
-            };
-        };
-        form: {
-            required: string;
-            requiredSingle: string;
-            allRequired: string;
-            allRequiredSingle: string;
-        };
-        message: {
-            closeButton: string;
-        };
-        modal: {
-            closeButton: string;
-        };
-        pagination: {
-            label: string;
-            page: string;
-            pages: string;
-            nextPage: string;
-            previousPage: string;
-            selectPage: string;
-        };
-        panel: {
-            editLabel: string;
-        };
-        skipLinks: {
-            navLabel: string;
-        };
-        general: {
-            confirm: string;
-            cancel: string;
-            close: string;
-            next: string;
-            previous: string;
-        };
-        plusMenu: {
-            moreLabel: string;
-            badgeLabel: string;
-        };
-        actionMore: {
-            label: string;
-        };
-    };
-};
 /**
  * Get Intl object
  * @param element - element we need to get the language
@@ -179,6 +5,5 @@ declare const messages: {
  */
 export declare const initLocales: (element: HTMLElement) => {
     locale: string;
-    messages: Record<string, unknown>;
+    messages: import("@mgdis/stencil-helpers/dist/locale/index.conf").ObjectType;
 };
-export {};

package/dist/types/utils/unit.test.utils.d.ts

@@ -1,76 +1,3 @@
-import { MockCustomEvent } from '@stencil/core/mock-doc';
-/**
- * Clone Deep function
- * @param obj - object to clone
- * @returns cloned json
- */
-export declare const cloneDeep: (obj: unknown) => unknown;
-/**
- * Utility function that mocks the `MutationObserver` API. Recommended to execute inside `beforeEach`.
- * @param mutationObserverMock - Parameter that is sent to the `Object.defineProperty`
- * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
- * mock the mutation observer, but its methods.
- * You can manually fire an intersection entry:
- * @param mutationObserverMock - configuration object
- * @returns Mocked MutationObserver
- * @example
- * ```
- * let fireMo;
- * setupMutationObserverMock({
- *   observe: function () {
- *     fireMo = this.cb;
- *   },
- * });
- * ...
- * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;
- * ```
- */
-type SetupMutationObserverMockParams = {
-    disconnect: MutationObserver['disconnect'];
-    observe: MutationObserver['observe'];
-    takeRecords: MutationObserver['takeRecords'];
-};
-export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams) => typeof MutationObserver;
-type setupResizeObserverMockParams = {
-    disconnect: ResizeObserver['disconnect'];
-    observe: ResizeObserver['observe'];
-};
-/**
- * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.
- * @param resizeObserverMock - Parameter that is sent to the `Object.defineProperty`
- * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
- * mock the resize observer, but its methods.
- * You can manually fire an intersection entry:
- * @param resizeObserverMock - configuration object
- * @returns Mocked ResizeObserver
- * @example
- * ```
- * let fireRo;
- * setupResizeObserverMock({
- *   observe: function () {
- *     fireRo = this.cb;
- *   },
- * });
- * ...
- * fireRo([{
- *  borderBoxSize: ResizeObserverSize[],
- *  contentBoxSize: ResizeObserverSize[],
- *  contentRect: DOMRectReadOnly,
- *  devicePixelContentBoxSize: ResizeObserverSize[],
- *  target: yourMockElemenet
- * }]);;
- * ```
- */
-export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
-/**
- * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
- * @example
- * ```
- * setupSubmitEventMock();
- * ```
- * @returns custom event mock
- */
-export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
 /**
  * force popover id when component use randomed identifier
  * @param component - element wich include mg-popover
@@ -78,17 +5,8 @@ export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
  * @param interactiveElement - element where attribute 'aria-controls' is set
  */
 export declare const forcePopoverId: (component: Element, id: string, interactiveElement?: string) => void;
-/**
- * fix popper console.error in test
- * it is generated in `@popperjs/core/dist/cjs/popper.js l.1859`
- * this is due to internal function isHTMLElement(), so we can not mock it directly.
- * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
- * so we only override the console.error side effect for this error
- */
-export declare const mockConsoleError: () => void;
 /**
  * Add missing window.frames property to test context
  * usefull for component with iframe listeners, ex: mg-popover
  */
 export declare const mockWindowFrames: () => void;
-export {};