@mgdis/mg-components 6.25.0 → 6.26.0

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

@@ -11,7 +11,8 @@ export declare class MgInput {
     private readonly slotLabel;
     private readonly slotError;
     private readonly slotHelpText;
-    private readonly blockLevelContentRegExp;
+    private readonly blockLevelTags;
+    private readonly openingTagRegExp;
     private errorMessageSlotElement;
     private helptextMessageSlotElement;
     private readonly classInput;

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

@@ -15,3 +15,11 @@ export declare const directions: readonly ["vertical", "horizontal"];
  * IllustratedMessage direction type
  */
 export type IllustratedMessageDirectionType = Direction & (typeof directions)[number];
+/**
+ * List of all possibles horizontal alignments
+ */
+export declare const aligns: readonly ["left", "center", "right"];
+/**
+ * IllustratedMessage align type
+ */
+export type IllustratedMessageAlignType = (typeof aligns)[number];

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

@@ -1,5 +1,5 @@
 import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
-import { type IllustratedMessageDirectionType, type IllustratedMessageSizeType } from './mg-illustrated-message.conf';
+import { type IllustratedMessageAlignType, type IllustratedMessageDirectionType, type IllustratedMessageSizeType } from './mg-illustrated-message.conf';
 /**
  * @slot illustration - Illustration content
  * @slot title - Title content
@@ -23,6 +23,14 @@ export declare class MgIllustratedMessage {
      */
     direction: IllustratedMessageDirectionType;
     watchDirection(newValue: IllustratedMessageDirectionType, oldValue?: IllustratedMessageDirectionType): void;
+    /**
+     * Define the horizontal alignment of the message inside its container.
+     * The message is sized to its content, so `align` positions it in both the vertical and
+     * horizontal directions. When the content is wide enough to fill the container there is
+     * no room left, so `align` has no visible effect.
+     */
+    align: IllustratedMessageAlignType;
+    watchAlign(newValue: IllustratedMessageAlignType, oldValue?: IllustratedMessageAlignType): void;
     /**
      * Component classes
      */

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import { DividerDirectionType } from "./components/atoms/mg-divider/mg-divider.c
 import { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-import { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+import { IllustratedMessageAlignType, IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 import { IllustrationType } from "./components/atoms/mg-illustration/mg-illustration.conf";
 import { CheckboxType, ICheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Direction, Option, Option as ToggleOption } from "./types";
@@ -51,7 +51,7 @@ export { DividerDirectionType } from "./components/atoms/mg-divider/mg-divider.c
 export { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-export { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+export { IllustratedMessageAlignType, IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 export { IllustrationType } from "./components/atoms/mg-illustration/mg-illustration.conf";
 export { CheckboxType, ICheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 export { Direction, Option, Option as ToggleOption } from "./types";
@@ -379,6 +379,11 @@ export namespace Components {
         "variantStyle": IconVariantStyleType;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define the horizontal alignment of the message inside its container. The message is sized to its content, so `align` positions it in both the vertical and horizontal directions. When the content is wide enough to fill the container there is no room left, so `align` has no visible effect.
+          * @default 'center'
+         */
+        "align": IllustratedMessageAlignType;
         /**
           * Define component orientation
           * @default 'vertical'
@@ -3202,6 +3207,11 @@ declare namespace LocalJSX {
         "variantStyle"?: IconVariantStyleType;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define the horizontal alignment of the message inside its container. The message is sized to its content, so `align` positions it in both the vertical and horizontal directions. When the content is wide enough to fill the container there is no room left, so `align` has no visible effect.
+          * @default 'center'
+         */
+        "align"?: IllustratedMessageAlignType;
         /**
           * Define component orientation
           * @default 'vertical'
@@ -4980,6 +4990,7 @@ declare namespace LocalJSX {
     interface MgIllustratedMessageAttributes {
         "size": IllustratedMessageSizeType;
         "direction": IllustratedMessageDirectionType;
+        "align": IllustratedMessageAlignType;
     }
     interface MgIllustrationAttributes {
         "illustration": IllustrationType;

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.25.0",
+  "version": "6.26.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -979,9 +979,19 @@
         },
         {
           "name": "mg-illustrated-message",
-          "description": "Attributes:\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
+          "description": "Attributes:\n- `align`: Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs",
           "attributes": [
+            {
+              "name": "align",
+              "description": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n\nType: `\"center\" | \"left\" | \"right\"`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs",
+              "value": {
+                "type": "\"center\" | \"left\" | \"right\"",
+                "default": "'center'",
+                "required": false
+              }
+            },
             {
               "name": "direction",
               "description": "Define component orientation\n\nType: `\"horizontal\" | \"vertical\"`",

package/ide/vscode/html-custom-data.json

@@ -1796,8 +1796,33 @@
     },
     {
       "name": "mg-illustrated-message",
-      "description": "Attributes:\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
+      "description": "Attributes:\n- `align`: Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n- `direction`: Define component orientation\n- `size`: Define illustration size\n\nSlots:\n- `details`: Details content\n- `illustration`: Illustration content\n- `title`: Title content\n\n",
       "attributes": [
+        {
+          "name": "align",
+          "description": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect.\n\nType: `\"center\" | \"left\" | \"right\"`",
+          "values": [
+            {
+              "name": "center"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ],
+          "references": [
+            {
+              "name": "Storybook",
+              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs"
+            },
+            {
+              "name": "Sources",
+              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"
+            }
+          ]
+        },
         {
           "name": "direction",
           "description": "Define component orientation\n\nType: `\"horizontal\" | \"vertical\"`",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "6.25.0",
+  "version": "6.26.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -40,32 +40,32 @@
   "dependencies": {
     "@popperjs/core": "2.11.8",
     "@stencil/core": "4.43.5",
-    "jodit": "4.13.8",
+    "jodit": "4.13.10",
+    "@mgdis/core-ui-helpers": "1.3.0",
+    "@mgdis/img": "2.7.2",
     "@mgdis/sanitize-html": "1.1.3",
-    "@mgdis/styles": "2.20.0",
-    "@mgdis/core-ui-helpers": "1.2.2",
-    "@mgdis/img": "2.7.2"
+    "@mgdis/styles": "2.21.0"
   },
   "devDependencies": {
     "@playwright/test": "1.61.1",
-    "@storybook/addon-a11y": "10.5.2",
-    "@storybook/addon-docs": "10.5.2",
-    "@storybook/addon-links": "10.5.2",
-    "@storybook/html": "10.5.2",
-    "@storybook/html-vite": "10.5.2",
+    "@storybook/addon-a11y": "10.5.4",
+    "@storybook/addon-docs": "10.5.4",
+    "@storybook/addon-links": "10.5.4",
+    "@storybook/html": "10.5.4",
+    "@storybook/html-vite": "10.5.4",
     "@types/jest": "29.5.14",
     "@types/node": "24.13.3",
     "chromatic": "18.1.0",
     "eslint": "9.39.5",
-    "eslint-plugin-storybook": "10.5.2",
+    "eslint-plugin-storybook": "10.5.4",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-junit": "17.0.0",
     "jest-transform-stub": "2.0.0",
     "react": "19.2.8",
-    "react-dom": "19.2.7",
+    "react-dom": "19.2.8",
     "sass": "1.101.0",
-    "storybook": "10.5.2",
+    "storybook": "10.5.4",
     "storybook-addon-tag-badges": "3.1.0",
     "typescript": "5.9.3",
     "vite": "8.1.5",
@@ -74,7 +74,7 @@
   },
   "license": "BSD-3-Clause",
   "scripts": {
-    "prebuild": "node ./bin/build-svg-assets",
+    "prebuild": "node ./bin/build-svg-assets && node ./bin/build-jodit-styles",
     "build": "pnpm prebuild && stencil build --docs",
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
     "test": "TZ=UTC stencil test --spec --e2e",

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss

@@ -1,212 +0,0 @@
-:host {
-  /**
-   * Colors - Base
-   */
-  --jd-color-white: rgb(255 255 255);
-  --jd-color-dark: rgb(76 76 76);
-  --jd-color-default: var(--jd-color-dark);
-  --jd-color-gray: rgb(218 218 218);
-  --jd-color-gray-dark: rgb(165 165 165);
-  --jd-color-red: rgb(255 59 59);
-  --jd-color-blue: rgb(181 214 253);
-  --jd-color-light-blue: rgb(181 214 253 / 50%);
-  --jd-color-light-red: rgb(255 59 59 / 40%);
-  --jd-color-error: var(--jd-color-red);
-
-  /**
-   * Colors - Background
-   */
-  --jd-color-background-default: var(--jd-color-white);
-  --jd-color-background-light-gray: rgb(245 245 246);
-  --jd-color-background-gray: var(--jd-color-gray);
-  --jd-color-background-gray-hover: rgb(248 248 248);
-  --jd-color-background-active: rgb(33 150 243);
-  --jd-color-background-button-hover: rgb(236 235 233);
-  --jd-color-background-button-hover-opacity30: rgb(234 234 234 / 30%);
-  --jd-color-background-button-hover-opacity40: rgb(219 219 219 / 40%);
-  --jd-color-background-button-hover-opacity60: rgb(219 219 219 / 60%);
-  --jd-color-background-filebrowser-folders: rgb(248 249 250);
-  --jd-color-background-progress: rgb(185 31 31);
-  --jd-color-background-selection: rgb(181 214 253);
-  --jd-color-background-selection-opacity50: rgb(181 214 253 / 99.5%);
-  --jd-color-panel: rgb(249 249 249);
-  --jd-color-source-area: rgb(50 50 50);
-  --jd-info-background: rgb(233 233 233);
-
-  /**
-   * Colors - Border
-   */
-  --jd-color-border: var(--jd-color-gray);
-  --jd-color-border-dark: var(--jd-color-dark);
-  --jd-color-border-active: rgb(181 181 181);
-  --jd-color-border-selected: rgb(30 136 229);
-  --jd-color-separator: var(--jd-color-border);
-  --jd-color-resizer: rgb(200 200 200);
-
-  /**
-   * Colors - Text
-   */
-  --jd-color-text: rgb(34 34 34);
-  --jd-color-text-icons: rgb(0 0 0 / 75%);
-  --jd-color-text-selection: var(--jd-color-white);
-  --jd-color-icon: var(--jd-color-dark);
-  --jd-color-label: var(--jd-color-gray-dark);
-  --jd-color-placeholder: var(--jd-color-gray-dark);
-  --jd-color-folder-title: rgb(177 177 177);
-  --jd-color-selection: var(--jd-color-dark);
-
-  /**
-   * Colors - Button
-   */
-  --jd-color-button-background-hover: rgb(220 220 220);
-  --jd-color-button-background-hover-opacity40: rgb(219 219 219 / 40%);
-  --jd-color-button-background-hover-opacity60: rgb(219 219 219 / 60%);
-
-  /**
-   * Colors - Selection
-   */
-  --jd-color-selection-area: rgb(189 189 189);
-  --jd-color-table-cell-background-hover: rgb(0 0 0 / 5%);
-
-  /**
-   * Colors - Dark mode
-   */
-  --jd-dark-background-color: rgb(87 87 87);
-  --jd-dark-background-darknes: rgb(53 53 53);
-  --jd-dark-background-ligher: rgb(192 192 192);
-  --jd-dark-border-color: rgb(68 68 68);
-  --jd-dark-color-border-selected: rgb(21 47 95);
-  --jd-dark-icon-color: rgb(192 192 192);
-  --jd-dark-text-color: rgb(209 204 204);
-  --jd-dark-text-color-opacity50: rgb(206 206 206 / 50%);
-  --jd-dark-text-color-opacity80: rgb(206 206 206 / 80%);
-  --jd-dark-toolbar-color: rgb(95 92 92);
-  --jd-dark-toolbar-seperator-color1: rgb(81 81 81 / 41%);
-  --jd-dark-toolbar-seperator-color2: rgb(104 103 103);
-  --jd-dark-toolbar-seperator-color3: rgb(105 105 105 / 75%);
-  --jd-dark-toolbar-seperator-color-opacity80: rgb(105 105 105 / 80%);
-
-  /**
-   * Colors - Special
-   */
-  --jd-color-picker-cell-size: 2.4rem;
-  --jd-image-editor-resizer-border-color: rgb(5 255 0);
-  --jd-image-editor-resizer-target-bg-color: rgb(140 120 120);
-  --jd-image-editor-resizer-target-border-color: rgb(56 56 56);
-  --jd-resizer-border-color: rgb(152 193 241);
-  --jd-resizer-handle-color: rgb(91 164 243);
-  --jd-resizer-handle-hover-color: rgb(83 126 187);
-
-  /**
-   * Colors - Em (Alert/Message)
-   */
-  --jd-em-color-bg: rgb(207 226 255);
-  --jd-em-color-border: rgb(182 212 254);
-  --jd-em-color-color: rgb(8 66 152);
-
-  /**
-   * Sizes - Buttons
-   */
-  --jd-button-icon-size: 1.4rem;
-  --jd-button-trigger-size: 1.4rem;
-  --jd-button-df-size: calc((var(--jd-button-icon-size) - 0.4rem) * 2);
-  --jd-button-size: calc(var(--jd-button-icon-size) + var(--jd-button-df-size) + var(--jd-margin-v) * 2);
-
-  /**
-   * Sizes - Icons
-   */
-  --jd-icon-size: 1.2rem;
-  --jd-icon-loader-size: 4.8rem;
-
-  /**
-   * Sizes - Height
-   */
-  --jd-height: 1.8rem;
-  --jd-height-element-default: 1.8rem;
-  --jd-height-search: 3rem;
-  --jd-input-height: 3.2rem;
-  --jd-switche-height: 3.2rem;
-  --jd-viewer-height: 2.4rem;
-
-  /**
-   * Sizes - Width
-   */
-  --jd-width-default: 18rem;
-  --jd-width-element-default: 1.8rem;
-  --jd-width-input-min: var(--jd-width-default);
-  --jd-width-search: 32rem;
-  --jd-width-search-count-box: 15%;
-  --jd-width-search-input-box: 60%;
-  --jd-viewer-width: 7rem;
-  --jd-switche-width: 6rem;
-  --jd-col-size: 15rem;
-  --jd-first-column: 31%;
-  --jd-image-editor-resizer-target-size: padding-default;
-
-  /**
-   * Sizes - Spacing
-   */
-  --jd-padding-default: 0.8rem;
-  --jd-margin-v: 0.2rem;
-  --jd-switche-slider-margin: 0.4rem;
-  --jd-em-padding: calc(1rem / 2) 1rem;
-
-  /**
-   * Sizes - Other
-   */
-  --jd-resizer-handle-size: 1rem;
-  --jd-switche-slider-size: calc(var(--jd-switche-height) - var(--jd-switche-slider-margin) * 2);
-  --jd-cols: 4;
-
-  /**
-   * Border and radius
-   */
-  --jd-border-radius-default: 0.3rem;
-  --jd-em-border-radius: 0.375rem;
-
-  /**
-   * Font
-   */
-  --jd-font-default: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
-  --jd-font-size-default: 1.4rem;
-  --jd-font-size-small: 1.1rem;
-  --jd-em-font-size: 1rem;
-
-  /**
-   * Shadow
-   */
-  --jd-box-shadow-1: 0 0.8rem 1.6rem rgb(0 0 0 / 19%);
-  --jd-box-shadow-blur: 1.6rem;
-  --jd-box-shadow-tabs: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
-  --jd-popup-box-shadow: 0 0.4rem 0.1rem -0.2rem rgb(76 76 76 / 20%), 0 0.3rem 0.3rem 0 rgb(76 76 76 / 15%), 0 0.1rem 0.4rem 0 rgb(76 76 76 / 13%);
-  --jd-popup-max-height: max(50vh, 35rem);
-  --jd-focus-input-box-shadow: 0 0 0 0.05rem rgb(0 123 255 / 25%);
-
-  /**
-   * Z-index
-   */
-  --jd-z-index-dialog: 20000004;
-  --jd-z-index-dialog-overlay: 20000003;
-  --jd-z-index-popup: 10000001;
-  --jd-z-index-full-size: 100000;
-  --jd-z-index-context-menu: 30000005;
-  --jd-z-index-tooltip: 30000006;
-
-  /**
-   * Animation and transition
-   */
-  --jd-anl-color-new-line: var(--jd-color-border);
-  --jd-anl-handle-offset: calc(100% - var(--jd-anl-handle-size));
-  --jd-anl-handle-size: 2rem;
-  --jd-timeout-button-active: 0.1s;
-  --jd-transform-button-active: 0.95;
-
-  /**
-   * Tooltip
-   */
-  --jd-tooltip-color: rgb(255 255 255);
-  --jd-tooltip-background-color: rgb(0 0 0 / 70%);
-  --jd-tooltip-sfx-shadow: rgb(0 0 0 / 15%);
-  --jd-tooltip-border-width: 0;
-  --jd-tooltip-border-color: rgb(229 229 229);
-}