@mgdis/mg-components 5.23.2 → 5.25.0

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

@@ -0,0 +1,34 @@
+export declare class MgLoader {
+    /************
+     * Internal *
+     ************/
+    private messages;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgLoaderElement;
+    /**
+     * Override loader message
+     */
+    message: string;
+    watchMessage(newValue: MgLoader['message']): void;
+    /**
+     * Hide message
+     */
+    messageHide: boolean;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

package/dist/types/components.d.ts

@@ -12,7 +12,8 @@ import { VariantStyleType, VariantType as VariantType1 } from "./components/atom
 import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
-import { Width } from "./components/molecules/inputs/MgInput.conf";
+import { TooltipPosition, Width } from "./components/molecules/inputs/MgInput.conf";
+import { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
@@ -34,7 +35,8 @@ export { VariantStyleType, VariantType as VariantType1 } from "./components/atom
 export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
-export { Width } from "./components/molecules/inputs/MgInput.conf";
+export { TooltipPosition, Width } from "./components/molecules/inputs/MgInput.conf";
+export { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 export { TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
@@ -193,6 +195,10 @@ export namespace Components {
           * Define form invalid state
          */
         "invalid": boolean;
+        /**
+          * Define if slotted mg-component's label are displayed on top
+         */
+        "labelOnTop": boolean;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -305,6 +311,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define checkbox type When it's undefined the type is dynamic: - With 0-5 items type is 'checkbox' - With 5-10 items type is 'multi' When it set the type is locked to the defined value. When type is dynamic OR with 'multi' type AND Over 10 items "search" feature is enabled
          */
@@ -418,6 +428,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define input valid state
          */
@@ -444,6 +458,10 @@ export namespace Components {
           * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
+        /**
+          * Set local formatting. Numbers are formatted based on the locale. When type is set to `currency`, formatting has no effect.
+         */
+        "format": Format;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -510,10 +528,14 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define numeric type
          */
-        "type": string;
+        "type": NumericType;
         /**
           * Define input pattern to validate
          */
@@ -586,6 +608,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define input valid state
          */
@@ -658,6 +684,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define input valid state
          */
@@ -742,6 +772,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define input valid state
          */
@@ -809,7 +843,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Define input pattern to validate
+          * 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;
         /**
@@ -842,6 +876,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Input type
          */
@@ -905,7 +943,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Define input pattern to validate
+          * 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;
         /**
@@ -942,6 +980,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Define input valid state
          */
@@ -1024,6 +1066,10 @@ export namespace Components {
           * Add a tooltip message next to the input
          */
         "tooltip": string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
         /**
           * Component value
          */
@@ -1043,6 +1089,16 @@ export namespace Components {
          */
         "slotlabel": SlotLabelType;
     }
+    interface MgLoader {
+        /**
+          * Override loader message
+         */
+        "message": string;
+        /**
+          * Hide message
+         */
+        "messageHide": boolean;
+    }
     interface MgMenu {
         /**
           * Component display direction.
@@ -1671,6 +1727,12 @@ declare global {
         prototype: HTMLMgItemMoreElement;
         new (): HTMLMgItemMoreElement;
     };
+    interface HTMLMgLoaderElement extends Components.MgLoader, HTMLStencilElement {
+    }
+    var HTMLMgLoaderElement: {
+        prototype: HTMLMgLoaderElement;
+        new (): HTMLMgLoaderElement;
+    };
     interface HTMLMgMenuElement extends Components.MgMenu, HTMLStencilElement {
     }
     var HTMLMgMenuElement: {
@@ -1875,6 +1937,7 @@ declare global {
         "mg-input-title": HTMLMgInputTitleElement;
         "mg-input-toggle": HTMLMgInputToggleElement;
         "mg-item-more": HTMLMgItemMoreElement;
+        "mg-loader": HTMLMgLoaderElement;
         "mg-menu": HTMLMgMenuElement;
         "mg-menu-item": HTMLMgMenuItemElement;
         "mg-message": HTMLMgMessageElement;
@@ -2038,6 +2101,10 @@ declare namespace LocalJSX {
           * Define form invalid state
          */
         "invalid"?: boolean;
+        /**
+          * Define if slotted mg-component's label are displayed on top
+         */
+        "labelOnTop"?: boolean;
         /**
           * Input name If not set the value equals the identifier
          */
@@ -2156,6 +2223,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define checkbox type When it's undefined the type is dynamic: - With 0-5 items type is 'checkbox' - With 5-10 items type is 'multi' When it set the type is locked to the defined value. When type is dynamic OR with 'multi' type AND Over 10 items "search" feature is enabled
          */
@@ -2271,6 +2342,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define input valid state
          */
@@ -2293,6 +2368,10 @@ declare namespace LocalJSX {
           * Define if input is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Set local formatting. Numbers are formatted based on the locale. When type is set to `currency`, formatting has no effect.
+         */
+        "format"?: Format;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -2361,10 +2440,14 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define numeric type
          */
-        "type"?: string;
+        "type"?: NumericType;
         /**
           * Define input pattern to validate
          */
@@ -2435,6 +2518,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define input valid state
          */
@@ -2505,6 +2592,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define input valid state
          */
@@ -2587,6 +2678,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define input valid state
          */
@@ -2658,7 +2753,7 @@ declare namespace LocalJSX {
          */
         "onValue-change"?: (event: MgInputTextCustomEvent<HTMLMgInputTextElement['value']>) => void;
         /**
-          * Define input pattern to validate
+          * 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;
         /**
@@ -2681,6 +2776,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Input type
          */
@@ -2748,7 +2847,7 @@ declare namespace LocalJSX {
          */
         "onValue-change"?: (event: MgInputTextareaCustomEvent<HTMLMgInputTextareaElement['value']>) => void;
         /**
-          * Define input pattern to validate
+          * 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;
         /**
@@ -2779,6 +2878,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Define input valid state
          */
@@ -2863,6 +2966,10 @@ declare namespace LocalJSX {
           * Add a tooltip message next to the input
          */
         "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
         /**
           * Component value
          */
@@ -2882,6 +2989,16 @@ declare namespace LocalJSX {
          */
         "slotlabel"?: SlotLabelType;
     }
+    interface MgLoader {
+        /**
+          * Override loader message
+         */
+        "message"?: string;
+        /**
+          * Hide message
+         */
+        "messageHide"?: boolean;
+    }
     interface MgMenu {
         /**
           * Component display direction.
@@ -3207,6 +3324,7 @@ declare namespace LocalJSX {
         "mg-input-title": MgInputTitle;
         "mg-input-toggle": MgInputToggle;
         "mg-item-more": MgItemMore;
+        "mg-loader": MgLoader;
         "mg-menu": MgMenu;
         "mg-menu-item": MgMenuItem;
         "mg-message": MgMessage;
@@ -3251,6 +3369,7 @@ declare module "@stencil/core" {
             "mg-input-title": LocalJSX.MgInputTitle & JSXBase.HTMLAttributes<HTMLMgInputTitleElement>;
             "mg-input-toggle": LocalJSX.MgInputToggle & JSXBase.HTMLAttributes<HTMLMgInputToggleElement>;
             "mg-item-more": LocalJSX.MgItemMore & JSXBase.HTMLAttributes<HTMLMgItemMoreElement>;
+            "mg-loader": LocalJSX.MgLoader & JSXBase.HTMLAttributes<HTMLMgLoaderElement>;
             "mg-menu": LocalJSX.MgMenu & JSXBase.HTMLAttributes<HTMLMgMenuElement>;
             "mg-menu-item": LocalJSX.MgMenuItem & JSXBase.HTMLAttributes<HTMLMgMenuItemElement>;
             "mg-message": LocalJSX.MgMessage & JSXBase.HTMLAttributes<HTMLMgMessageElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.23.2",
+  "version": "5.25.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,48 +24,48 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "@stencil/core": "4.12.0",
-    "@mgdis/img": "1.6.1",
-    "@mgdis/stencil-helpers": "1.0.1",
-    "@mgdis/styles": "1.1.1"
+    "@stencil/core": "4.12.4",
+    "@mgdis/img": "1.7.0",
+    "@mgdis/stencil-helpers": "1.0.3",
+    "@mgdis/styles": "1.2.1"
   },
   "devDependencies": {
-    "@playwright/test": "1.41.1",
+    "@playwright/test": "1.42.1",
     "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
-    "@storybook/addon-a11y": "7.6.12",
-    "@storybook/addon-actions": "7.6.12",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addon-interactions": "7.6.12",
-    "@storybook/addon-links": "7.6.12",
-    "@storybook/addon-mdx-gfm": "7.6.12",
-    "@storybook/blocks": "7.6.12",
-    "@storybook/html": "7.6.12",
-    "@storybook/html-vite": "7.6.12",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-actions": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addon-mdx-gfm": "7.6.17",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/html": "7.6.17",
+    "@storybook/html-vite": "7.6.17",
     "@storybook/testing-library": "0.2.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.11.15",
-    "chromatic": "10.6.1",
-    "eslint": "8.56.0",
-    "eslint-plugin-storybook": "0.6.15",
+    "@types/node": "20.11.24",
+    "chromatic": "11.0.0",
+    "eslint": "8.57.0",
+    "eslint-plugin-storybook": "0.8.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-stub": "2.0.0",
-    "prettier": "3.2.4",
-    "puppeteer": "21.10.0",
+    "prettier": "3.2.5",
+    "puppeteer": "22.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-textarea-autosize": "8.5.3",
-    "sass": "1.70.0",
-    "storybook": "7.6.12",
+    "sass": "1.71.1",
+    "storybook": "7.6.17",
     "ts-node": "10.9.2",
     "typescript": "5.3.3",
-    "vite": "5.0.12",
-    "vite-plugin-turbosnap": "^1.0.3",
-    "@mgdis/linting-stencil": "1.1.0",
-    "eslint-config-stencil": "1.1.2",
-    "tsconfig": "1.0.1",
-    "@mgdis/playwright-helpers": "1.0.1"
+    "vite": "5.1.5",
+    "vite-plugin-turbosnap": "1.0.3",
+    "@mgdis/linting-stencil": "1.1.1",
+    "@mgdis/playwright-helpers": "1.0.2",
+    "eslint-config-stencil": "1.1.4",
+    "tsconfig": "1.0.1"
   },
   "license": "BSD-3-Clause",
   "scripts": {