@mgdis/mg-components 6.23.0 → 6.25.0

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

@@ -183,7 +183,7 @@
     },
     {
       "name": "--mg-c-card-border-radius-default",
-      "description": "Defines the default border radius property for the card. Default value: `--mg-b-size-12`."
+      "description": "Defines the default border radius property for the card. Default value: `--mg-b-size-radius-xlarge`."
     },
     {
       "name": "--mg-c-card-box-shadow",
@@ -239,7 +239,7 @@
     },
     {
       "name": "--mg-c-divider-spacing-vertical",
-      "description": "Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`."
+      "description": "Defines the spacing around the divider: vertical spacing when direction is \"horizontal\", horizontal spacing when direction is \"vertical\". The default value is `--mg-b-size-40`."
     },
     {
       "name": "--mg-c-divider-thickness",
@@ -257,6 +257,10 @@
       "name": "--mg-c-illustrated-message-spacing-vertical",
       "description": "Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`."
     },
+    {
+      "name": "--mg-c-illustration-color",
+      "description": "Overrides the brand-accent colour of the illustration. Unset by default, so the illustration keeps its own brand colours (as when loaded as an `<img>`)."
+    },
     {
       "name": "--mg-c-input-border-radius",
       "description": "Defines the border radius of the input. Default value is `--mg-b-size-radius`."

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

@@ -33,7 +33,7 @@
     },
     {
       "name": "mg-alert",
-      "description": "Attributes:\n- `delay`: Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds\n- `full-width`: Define if alert fits its parent element\n- `variant`: Define variant\n- `variant-style`: Define variant style\n\nEvents:\n- `component-close`: Emmited event when alert is closed\n- `component-hide`: Emited event when alert is hidden\n- `component-show`: Emited event when alert is diplayed\n\nSlots:\n- default: Alert content\n- `actions`: Actions content\n\n",
+      "description": "Attributes:\n- `delay`: Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds\n- `full-width`: Define if alert fits its parent element\n- `variant`: Define variant\n- `variant-style`: Define variant style\n\nEvents:\n- `component-close`: Emmited event when alert is closed\n- `component-hide`: Emitted event when alert is hidden\n- `component-show`: Emitted event when alert is diplayed\n\nSlots:\n- default: Alert content\n- `actions`: Actions content\n\n",
       "attributes": [
         {
           "name": "delay",
@@ -222,7 +222,7 @@
     },
     {
       "name": "mg-breadcrumb",
-      "description": "Properties:\n- `items`: Breadcrumb items (hierarchical order: root → current page).\n\n",
+      "description": "Properties:\n- `items`: Breadcrumb items (hierarchical order: root → current page).\n\nEvents:\n- `item-click`: Emitted event when item link is clicked\n\n",
       "attributes": [],
       "references": [
         {
@@ -551,8 +551,30 @@
     },
     {
       "name": "mg-divider",
-      "description": "Attributes:\n- `full-width`: Define component size\n\n",
+      "description": "Attributes:\n- `direction`: Define component direction\n- `full-width`: Define component size\n\n",
       "attributes": [
+        {
+          "name": "direction",
+          "description": "Define component direction\n\nType: `\"horizontal\" | \"vertical\"`",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ],
+          "references": [
+            {
+              "name": "Storybook",
+              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-divider--docs"
+            },
+            {
+              "name": "Sources",
+              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/atoms/mg-divider/mg-divider.tsx"
+            }
+          ]
+        },
         {
           "name": "full-width",
           "description": "Define component size\n\nType: `boolean`",
@@ -1835,6 +1857,95 @@
         }
       ]
     },
+    {
+      "name": "mg-illustration",
+      "description": "Attributes:\n- `illustration`: Illustration to display, by name from\n\n",
+      "attributes": [
+        {
+          "name": "illustration",
+          "description": "Illustration to display, by name from\n\nType: `\"aides\" | \"all-done\" | \"convention-empty\" | \"conviviale\" | \"digital-forms\" | \"digital-security\" | \"disconnected\" | \"documents\" | \"echanges\" | \"empty\" | \"missing-informations\" | \"neutral\" | \"no-data\" | \"no-result\" | \"request-sent\" | \"search-no-result\" | \"secure-data\" | \"stage\" | \"welcome\"`",
+          "values": [
+            {
+              "name": "aides"
+            },
+            {
+              "name": "all-done"
+            },
+            {
+              "name": "convention-empty"
+            },
+            {
+              "name": "conviviale"
+            },
+            {
+              "name": "digital-forms"
+            },
+            {
+              "name": "digital-security"
+            },
+            {
+              "name": "disconnected"
+            },
+            {
+              "name": "documents"
+            },
+            {
+              "name": "echanges"
+            },
+            {
+              "name": "empty"
+            },
+            {
+              "name": "missing-informations"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "no-data"
+            },
+            {
+              "name": "no-result"
+            },
+            {
+              "name": "request-sent"
+            },
+            {
+              "name": "search-no-result"
+            },
+            {
+              "name": "secure-data"
+            },
+            {
+              "name": "stage"
+            },
+            {
+              "name": "welcome"
+            }
+          ],
+          "references": [
+            {
+              "name": "Storybook",
+              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-illustration--docs"
+            },
+            {
+              "name": "Sources",
+              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/atoms/mg-illustration/mg-illustration.tsx"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Storybook",
+          "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-illustration--docs"
+        },
+        {
+          "name": "Sources",
+          "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/atoms/mg-illustration/mg-illustration.tsx"
+        }
+      ]
+    },
     {
       "name": "mg-input",
       "description": "Attributes:\n- `aria-describedby-i-ds`: Define aria-describedby ids to link with\n- `error-message`: Define error message to display\n- `help-text`: Define help text to display\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `inputs-on-bottom`: Display inputs after help-text and error message\n- `label`: Define input label\n- `label-border-display`: Define if label border is visible\nYou must pair this mode with `labelOnTop`and `fieldset` class\n- `label-heading`: Define label heading, use to define label with associated semantic\nYou must pair this mode with `labelOnTop`and `fieldset` class\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n\nSlots:\n- default: Input content\n\n",
@@ -2063,7 +2174,7 @@
     },
     {
       "name": "mg-input-checkbox",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `display-selected-values`: Display selected values list in \"multi\" type\nThis prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n- `edit-button-message`: Overwrite default \"edit\" button message\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Define input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Define input name\nIf not set the value equals the identifier\n- `readonly`: Define if mg-input-checkbox is readonly\n- `required`: Define if mg-input-checkbox is required\n- `select-button-message`: Overwrite default \"select\" button message\n- `show-button-message`: Overwrite default \"show\" button message\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define checkbox type\nWhen it's undefined the type is dynamic:\n- With 0-5 items type is 'checkbox'\n- With 5-10 items type is 'multi'\nWhen it set the type is locked to the defined value.\nWhen type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n- `valid`: Define input valid state\n\nProperties:\n- `value`: Component value\nIf item.value is `null`, checkbox will be indeterminate by default\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emitted event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `display-selected-values`: Display selected values list in \"multi\" type\nThis prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n- `edit-button-message`: Overwrite default \"edit\" button message\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Define input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Define input name\nIf not set the value equals the identifier\n- `readonly`: Define if mg-input-checkbox is readonly\n- `required`: Define if mg-input-checkbox is required\n- `select-button-message`: Overwrite default \"select\" button message\n- `show-button-message`: Overwrite default \"show\" button message\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define checkbox type\nWhen it's undefined the type is dynamic:\n- With 0-5 items type is 'checkbox'\n- With 5-10 items type is 'multi'\nWhen it set the type is locked to the defined value.\nWhen type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n- `valid`: Define input valid state\n\nProperties:\n- `value`: Component value\nIf item.value is `null`, checkbox will be indeterminate by default\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -2361,7 +2472,7 @@
     },
     {
       "name": "mg-input-combobox",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `fetchurl`: Define API url to fetch\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `items-label`: Define items label\nInclude short description. Required for accessibility.\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Define input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Define component value\n\nProperties:\n- `fetchmappings`: Define fetch request mappings.\nRequired with `fetchurl`\n- `fetchoptions`: Define fetch options object\nRequire `fetchurl` prop to be defined otherwith it will be ignored if defined\n- `items`: Define components items\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given concombobox.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `fetch-error`: Emited event when fetch API throw an error\n- `filter-change`: Emited event when filter change\n- `input-valid`: Emited event when checking validity\n- `load-more`: Emited event when `load-more` is called\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `fetchurl`: Define API url to fetch\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `items-label`: Define items label\nInclude short description. Required for accessibility.\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Define input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox.\n- `popover-placement`: Define the popover placement\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Define component value\n\nProperties:\n- `fetchmappings`: Define fetch request mappings.\nRequired with `fetchurl`\n- `fetchoptions`: Define fetch options object\nRequire `fetchurl` prop to be defined otherwith it will be ignored if defined\n- `items`: Define components items\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given concombobox.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `fetch-error`: Emitted event when fetch API throw an error\n- `filter-change`: Emitted event when filter change\n- `input-valid`: Emitted event when checking validity\n- `load-more`: Emitted event when `load-more` is called\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -2545,6 +2656,67 @@
             }
           ]
         },
+        {
+          "name": "popover-placement",
+          "description": "Define the popover placement\n\nType: `\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"`",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "auto-end"
+            },
+            {
+              "name": "auto-start"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ],
+          "references": [
+            {
+              "name": "Storybook",
+              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-combobox--docs"
+            },
+            {
+              "name": "Sources",
+              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.tsx"
+            }
+          ]
+        },
         {
           "name": "readonly",
           "description": "Define if input is readonly\n\nType: `boolean`",
@@ -2651,7 +2823,7 @@
     },
     {
       "name": "mg-input-date",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\nAvailable string variables:\n - `{pattern}`: render innerHTML pattern based on system\n - `{date}`: render innerText date with a pattern base format.\n - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\nex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Define input maximum date\nformat: yyyy-mm-dd\n- `min`: Define input minimum date\nformat: yyyy-mm-dd\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\nAvailable string variables:\n - `{pattern}`: render innerHTML pattern based on system\n - `{date}`: render innerText date with a pattern base format.\n - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\nex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Define input maximum date\nformat: yyyy-mm-dd\n- `min`: Define input minimum date\nformat: yyyy-mm-dd\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -3161,7 +3333,7 @@
     },
     {
       "name": "mg-input-numeric",
-      "description": "Attributes:\n- `currency`: Define currency\n- `decimal-length`: Override decimal length\ndecimal is the number after the decimal point\n- `disabled`: Define if input is disabled\n- `format`: Set local formatting.\nNumbers are formatted based on the locale.\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `integer-length`: Override integer length\ninteger is the number before the decimal point\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Maximum value\n- `mg-width`: Define input width\n- `min`: Minimum value\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define numeric type\n- `unit`: Define unit symbol (km, L, etc.)\n- `unit-display`: Define unit display format ('short', 'long', 'narrow')\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
+      "description": "Attributes:\n- `currency`: Define currency\n- `decimal-length`: Override decimal length\ndecimal is the number after the decimal point\n- `disabled`: Define if input is disabled\n- `format`: Set local formatting.\nNumbers are formatted based on the locale.\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `integer-length`: Override integer length\ninteger is the number before the decimal point\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `max`: Maximum value\n- `mg-width`: Define input width\n- `min`: Minimum value\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Define numeric type\n- `unit`: Define unit symbol (km, L, etc.)\n- `unit-display`: Define unit display format ('short', 'long', 'narrow')\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
       "attributes": [
         {
           "name": "currency",
@@ -3585,7 +3757,7 @@
     },
     {
       "name": "mg-input-password",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -3861,7 +4033,7 @@
     },
     {
       "name": "mg-input-radio",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emitted event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `input-vertical-list`: Define if inputs are display verticaly\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -4095,7 +4267,7 @@
     },
     {
       "name": "mg-input-rich-text-editor",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `modules`: Editor modules configuration.\nMust be passed as an array (e.g. modules=['bold', 'italic', '|', 'ul', 'ol']).\nUse `|` for a separator/divider in the toolbar.\nAvailable modules:\n- **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `eraser`\n- **Lists**: `ul` (unordered list), `ol` (ordered list)\n- **Text positioning**: `superscript`, `subscript`\n- **Colors**: `brush` (text color/background)\n- **Media**: `link`, `image`, `file`\n- **Tables**: `table`\n- **History**: `undo`, `redo`\n- **Other**: `print`, `source` (HTML source editor)\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if the editor is readonly\n- `required`: Define if input is required\n- `rows`: Define the number of visible text lines for the editor.\nImpacts the editor height. Content can grow beyond this minimum.\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Define the value of the editor\nCan be either HTML string or plain text\n\nProperties:\n- `sanitizerOptions`: Sanitizer configuration in native format.\nUse disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).\nUse \"*\" as tag key to disallow attributes on all tags.\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `getEditorHTML`: Get editor content as HTML\n- `getEditorText`: Get editor content in plain text format\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `modules`: Editor modules configuration.\nMust be passed as an array (e.g. modules=['bold', 'italic', '|', 'ul', 'ol']).\nUse `|` for a separator/divider in the toolbar.\nAvailable modules:\n- **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `eraser`\n- **Lists**: `ul` (unordered list), `ol` (ordered list)\n- **Text positioning**: `superscript`, `subscript`\n- **Colors**: `brush` (text color/background)\n- **Media**: `link`, `image`, `file`\n- **Tables**: `table`\n- **History**: `undo`, `redo`\n- **Other**: `print`, `source` (HTML source editor)\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if the editor is readonly\n- `required`: Define if input is required\n- `rows`: Define the number of visible text lines for the editor.\nImpacts the editor height. Content can grow beyond this minimum.\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Define the value of the editor\nCan be either HTML string or plain text\n\nProperties:\n- `customActions`: Inject custom action buttons in the toolbar (e.g. to insert merge fields or apply custom formatting).\nButtons are appended after the built-in `modules`.\nEach action is an object `{ name, label, icon }`:\n- `name`: unique identifier, returned in the `custom-action` event detail on click.\n- `label`: accessible label used as the button tooltip and aria-label.\n- `icon`: design system `mg-icon` name rendered inside the button, unique across actions.\nThe action behaviour is the consumer's responsibility: listen to `custom-action`,\nthen read/write the selection with `getSelectedText()` / `getSelectedHTML()` / `replaceSelection()`.\n- `sanitizerOptions`: Sanitizer configuration in native format.\nUse disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).\nUse \"*\" as tag key to disallow attributes on all tags.\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `getEditorHTML`: Get editor content as HTML\n- `getEditorText`: Get editor content in plain text format\n- `getSelectedHTML`: Get the current text selection as HTML.\nWhen a custom action is in progress, returns the selection snapshotted when the action was triggered.\n- `getSelectedText`: Get the current text selection as plain text.\nWhen a custom action is in progress, returns the selection snapshotted when the action was triggered.\n- `replaceSelection`: Replace the current text selection with the given content.\nWhen a custom action is in progress, the selection snapshotted when the action was triggered is\nrestored first, so the replacement targets the right range even after focus moved away (e.g. during\nan async network request). No-op when the editor is readonly or disabled.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `custom-action`: Emitted event when a custom action button is clicked.\nThe detail contains the action `name`.\n- `input-valid`: Emitted event when checking validity\n- `selection-change`: Emitted event when the text selection changes.\nThe detail contains the selected `text`, sanitized `html` and whether the selection `isCollapsed`.\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -4385,7 +4557,7 @@
     },
     {
       "name": "mg-input-select",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `placeholder-disabled`: Option to disable placeholder\n- `placeholder-hide`: Option to remove placeholder\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `placeholder-disabled`: Option to disable placeholder\n- `placeholder-hide`: Option to remove placeholder\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -4675,7 +4847,7 @@
     },
     {
       "name": "mg-input-text",
-      "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `icon`: Input icon\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Input type\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `datalistoptions`: Define datalist options\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
+      "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `icon`: Input icon\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `type`: Input type\n- `valid`: Define input valid state\n- `value`: Component value\n\nProperties:\n- `datalistoptions`: Define datalist options\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\nSlots:\n- `append-input`: Content to display next to the input\n\n",
       "attributes": [
         {
           "name": "character-left-hide",
@@ -5760,7 +5932,7 @@
     },
     {
       "name": "mg-input-textarea",
-      "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `resizable`: Define if input is resizable\n- `rows`: Define the number of visible text lines for the control\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `character-left-hide`: Define if component should display character left\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `pattern`: Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n- `pattern-error-message`: Define input pattern error message\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `resizable`: Define if input is resizable\n- `rows`: Define the number of visible text lines for the control\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `reset`: Reset value, validity and error state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\n",
       "attributes": [
         {
           "name": "character-left-hide",
@@ -6120,7 +6292,7 @@
     },
     {
       "name": "mg-input-toggle",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `is-icon`: Define if toggle display icon\n- `is-on-off`: Define if toggle have on/off style,\nthe left icon is hidden.\nOnly available in combination with the \"isIcon\" prop.\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n\nProperties:\n- `items`: Items are the possible options to select\n- `value`: Component value\n\nMethods:\n- `reset`: Reset value, validity, error and visual state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `item-1`: Left option toggle content\n- `item-2`: Right option toggle content\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `is-icon`: Define if toggle display icon\n- `is-on-off`: Define if toggle have on/off style,\nthe left icon is hidden.\nOnly available in combination with the \"isIcon\" prop.\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n\nProperties:\n- `items`: Items are the possible options to select\n- `value`: Component value\n\nMethods:\n- `reset`: Reset value, validity, error and visual state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emitted event when checking validity\n- `value-change`: Emitted event when value change\n\nSlots:\n- `item-1`: Left option toggle content\n- `item-2`: Right option toggle content\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -6408,7 +6580,7 @@
     },
     {
       "name": "mg-menu-item",
-      "description": "Attributes:\n- `expanded`: Define menu-item content expanded.\n- `href`: Define menu-item href\nwhen defined menu-item contain an anchor instead of button\n- `identifier`: Identifier is used to control mg-popover\n- `is-icon`: Define menu-item isIcon style.\n- `status`: Define menu-item status.\n- `target`: Define target type\n\nEvents:\n- `item-loaded`: Emited event when item is loaded\n- `item-updated`: Emited event when item is updated\n\nSlots:\n- default: Menu item content\n- `image`: Menu item image content\n- `information`: Menu item information content\n- `label`: Menu item label content\n- `metadata`: Menu item metadata content\n\n",
+      "description": "Attributes:\n- `expanded`: Define menu-item content expanded.\n- `href`: Define menu-item href\nwhen defined menu-item contain an anchor instead of button\n- `identifier`: Identifier is used to control mg-popover\n- `is-icon`: Define menu-item isIcon style.\n- `status`: Define menu-item status.\n- `target`: Define target type\n\nEvents:\n- `item-loaded`: Emitted event when item is loaded\n- `item-updated`: Emitted event when item is updated\n\nSlots:\n- default: Menu item content\n- `image`: Menu item image content\n- `information`: Menu item information content\n- `label`: Menu item label content\n- `metadata`: Menu item metadata content\n\n",
       "attributes": [
         {
           "name": "expanded",
@@ -6982,22 +7154,8 @@
     },
     {
       "name": "mg-popover",
-      "description": "Attributes:\n- `arrow-hide`: Hide popover arrow\n- `close-button`: Define if popover has a cross button\n- `disabled`: Disable popover\n- `display`: Display popover\n- `identifier`: Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`.\n- `placement`: Popover placement\n\nEvents:\n- `component-close`: Emmited event when popover is closed\n- `display-change`: Emited event when display value change\n\nSlots:\n- default: Element that will display the popover\n- `content`: popover content\n- `title`: popover title\n\n",
+      "description": "Attributes:\n- `close-button`: Define if popover has a cross button\n- `disabled`: Disable popover\n- `display`: Display popover\n- `identifier`: Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`.\n- `placement`: Popover placement\n\nProperties:\n- `arrowHide`: Hide popover arrow\n\nEvents:\n- `component-close`: Emmited event when popover is closed\n- `display-change`: Emitted event when display value change\n\nSlots:\n- default: Element that will display the popover\n- `content`: popover content\n- `title`: popover title\n\n",
       "attributes": [
-        {
-          "name": "arrow-hide",
-          "description": "Hide popover arrow\n\nType: `boolean`",
-          "references": [
-            {
-              "name": "Storybook",
-              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-popover--docs"
-            },
-            {
-              "name": "Sources",
-              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/molecules/mg-popover/mg-popover.tsx"
-            }
-          ]
-        },
         {
           "name": "close-button",
           "description": "Define if popover has a cross button\n\nType: `boolean`",
@@ -7223,7 +7381,7 @@
     },
     {
       "name": "mg-skip-links",
-      "description": "Properties:\n- `links`: Skip links\n\nEvents:\n- `go-to-anchor`: Emited event when link is clicked\n\n",
+      "description": "Properties:\n- `links`: Skip links\n\nEvents:\n- `go-to-anchor`: Emitted event when link is clicked\n\n",
       "attributes": [],
       "references": [
         {
@@ -7310,7 +7468,7 @@
     },
     {
       "name": "mg-tabs",
-      "description": "Attributes:\n- `active-tab`: Active tab number\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created.\n- `label`: Tabs label. Include short tabs description.\nRequired for accessibility\n\nProperties:\n- `items`: Tabs items\n- `size`: Size of the tabs items.\n\nEvents:\n- `active-tab-change`: Emited event when active tab change\n\nSlots:\n- `tab_content-n`: Tab content, where `n` represents the position of the tab content. It starts at 1.\n\n",
+      "description": "Attributes:\n- `active-tab`: Active tab number\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created.\n- `label`: Tabs label. Include short tabs description.\nRequired for accessibility\n\nProperties:\n- `items`: Tabs items\n- `size`: Size of the tabs items.\n\nEvents:\n- `active-tab-change`: Emitted event when active tab change\n\nSlots:\n- `tab_content-n`: Tab content, where `n` represents the position of the tab content. It starts at 1.\n\n",
       "attributes": [
         {
           "name": "active-tab",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "6.23.0",
+  "version": "6.25.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -40,41 +40,41 @@
   "dependencies": {
     "@popperjs/core": "2.11.8",
     "@stencil/core": "4.43.5",
-    "jodit": "4.12.4",
-    "@mgdis/core-ui-helpers": "1.2.0",
-    "@mgdis/sanitize-html": "1.1.2",
-    "@mgdis/styles": "2.18.0",
-    "@mgdis/img": "2.7.0"
+    "jodit": "4.13.8",
+    "@mgdis/sanitize-html": "1.1.3",
+    "@mgdis/styles": "2.20.0",
+    "@mgdis/core-ui-helpers": "1.2.2",
+    "@mgdis/img": "2.7.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.60.0",
-    "@storybook/addon-a11y": "10.4.2",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-links": "10.4.2",
-    "@storybook/html": "10.4.2",
-    "@storybook/html-vite": "10.4.2",
+    "@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",
     "@types/jest": "29.5.14",
-    "@types/node": "24.12.4",
-    "chromatic": "17.2.0",
-    "eslint": "8.57.1",
-    "eslint-plugin-storybook": "10.4.2",
+    "@types/node": "24.13.3",
+    "chromatic": "18.1.0",
+    "eslint": "9.39.5",
+    "eslint-plugin-storybook": "10.5.2",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-junit": "17.0.0",
     "jest-transform-stub": "2.0.0",
-    "react": "19.2.7",
+    "react": "19.2.8",
     "react-dom": "19.2.7",
-    "sass": "1.99.0",
-    "storybook": "10.4.2",
+    "sass": "1.101.0",
+    "storybook": "10.5.2",
     "storybook-addon-tag-badges": "3.1.0",
     "typescript": "5.9.3",
-    "vite": "8.0.16",
+    "vite": "8.1.5",
     "@core-ui/jest-config": "1.0.9",
-    "@mgdis/linting-stencil": "1.3.11"
+    "@mgdis/linting-stencil": "2.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
-    "prebuild": "node ./bin/build-icons",
+    "prebuild": "node ./bin/build-svg-assets",
     "build": "pnpm prebuild && stencil build --docs",
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
     "test": "TZ=UTC stencil test --spec --e2e",

package/dist/mg-components/p-13feb37a.entry.js

@@ -1 +0,0 @@
-import{r as e,h as r,a}from"./p-DshvCiTL.js";import{i as t}from"./p-DSEloqPn.js";import{t as i,i as s}from"./p-C7xjtdiw.js";const m=class{constructor(r){e(this,r)}validateItems(e){if(void 0===e||(r=e,!(Array.isArray(r)&&r.length>0&&r.every(((e,a)=>"object"==typeof e&&null!==e&&s(e.label)&&(a===r.length-1||s(e.href)))))))throw new Error(`<mg-breadcrumb> prop "items" is required and all values must be the same type, BreadcrumbItemType. Passed value: ${i(e)}.`);var r}renderItem(e,a){return s(e.href)?r("a",{href:e.href,"aria-label":void 0!==e.icon?e.label:void 0,"aria-current":a?"page":void 0},void 0!==e.icon?r("mg-icon",{icon:e.icon}):e.label):r("span",null,e.label)}componentWillLoad(){this.validateItems(this.items),this.messages=t(this.element).messages.breadcrumb}render(){return r("nav",{key:"af5c541e6a268af67762eb9d384269511fe0be17","aria-label":this.messages.label,class:"mg-c-breadcrumb"},r("ol",{key:"b5fdfe61eb2c826b3462bdd65cacfb73d4f00484",class:"mg-c-breadcrumb__list"},this.items.map(((e,a)=>{var t;return r("li",{key:`${a}-${null!==(t=e.href)&&void 0!==t?t:e.label}`,class:"mg-c-breadcrumb__list-item"},this.renderItem(e,a===this.items.length-1))}))))}get element(){return a(this)}static get watchers(){return{items:[{validateItems:0}]}}};m.style='a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-breadcrumb{display:block}.mg-c-breadcrumb__list{padding:0;margin:0;list-style:none}.mg-c-breadcrumb__list-item{display:inline;color:var(--mg-b-color-dark);font-weight:700}.mg-c-breadcrumb__list-item:not(:last-child)::after{content:"/";font-weight:600;margin-inline:var(--mg-b-size-8)}.mg-c-breadcrumb__list-item:has(mg-icon) a{padding:var(--mg-b-size-4);margin:calc(var(--mg-b-size-4)*-1)}.mg-c-breadcrumb__list-item mg-icon{margin-block-start:.2rem;vertical-align:top}';export{m as mg_breadcrumb}

package/dist/mg-components/p-79265ad3.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,a as o}from"./p-DshvCiTL.js";import{P as e,C as n,t as a,a as h,n as r,g as c,b as p,i as m,c as u,f as l,d as g}from"./p-C7xjtdiw.js";import{c as d,a as b,w as v,n as f}from"./p-DOi9lJXy.js";import{i as w}from"./p-DSEloqPn.js";import{K as _}from"./p-yMGqY8YG.js";const x=t=>t&&"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,y=class{constructor(s){t(this,s),this.valueChange=i(this,"value-change",7),this.filterChange=i(this,"filter-change",7),this.showMore=i(this,"load-more",7),this.inputValid=i(this,"input-valid",7),this.fetchError=i(this,"fetch-error",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.options=new e([]),this.filter="",this.classCollection=new n(["mg-c-input--combobox","mg-c-input--has-icon","mg-c-input--input-append"]),this.popoverDisplay=!1,this.handleOptionClick=t=>{this.setValue(this.options.items.find((i=>a(i.value)===t.target.dataset.value))),this.popoverDisplay=!1},this.handleResetButton=t=>{t.stopPropagation(),this.reset().then((()=>{this.input.focus()}))},this.handlePopoverDisplay=t=>{this.popoverDisplay=t.detail},this.handleFilterInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.popoverDisplay||(this.popoverDisplay=!0),this.debounce||(this.debounce=!0,setTimeout((()=>{this.filter=this.input.value,this.debounce=!1}),250))},this.handleFilterBlur=t=>{this.popoverDisplay?(t.stopImmediatePropagation(),this.input.focus()):(this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})))},this.handleFilterFocus=()=>{this.isLoading||(this.option=null)},this.handleLoadMoreButton=()=>{this.loadingWrapper({name:"load-more",cursor:h.NEXT}).then((()=>{this.input.focus()}))},this.handleFilterKeydown=t=>{var i;if(this.disabled||t.ctrlKey||t.shiftKey)return;let s=!1;switch(t.key){case _.TAB:case _.ENTER:{s=t.key===_.ENTER;const o=null!==(i=this.option)&&void 0!==i?i:this.options.items.find(this.isCurrentOption);this.popoverDisplay&&this.setValue(o),this.popoverDisplay=!1;break}case _.DOWN:case _.ARROWDOWN:case _.UP:case _.ARROWUP:{if(s=!0,this.isLoading||0===this.page.total){this.popoverDisplay=!0;break}if(Boolean(t.altKey)&&[_.DOWN,_.ARROWDOWN].includes(t.key)){this.popoverDisplay=!0;break}let i;const o=this.popoverDisplay&&x(this.option);[_.DOWN,_.ARROWDOWN].includes(t.key)?i=o?h.NEXT:h.FIRST:[_.UP,_.ARROWUP].includes(t.key)&&(i=o?h.PREVIOUS:h.LAST),this.loadingWrapper({name:"scroll",cursor:i}),this.popoverDisplay=!0;break}case _.LEFT:case _.ARROWLEFT:case _.HOME:case _.RIGHT:case _.ARROWRIGHT:case _.END:{if(!x(this.option))break;let i;s=!0,this.option=null,_.HOME===t.key?i=0:_.END===t.key&&(i=this.filter.length),"number"==typeof i&&this.input.setSelectionRange(i,i);break}case _.ESC:case _.ESCAPE:s=!0,this.popoverDisplay?this.popoverDisplay=!1:(this.setValue(null),this.filter="",this.option=null);break;default:this.option=null}s&&(t.stopPropagation(),t.preventDefault())},this.scrollToIndex=t=>{requestAnimationFrame((()=>{var i;this.popoverDisplay&&(null===(i=this.element.shadowRoot.querySelector(`li:nth-of-type(${(t||0)+this.page.baseIndex})`))||void 0===i||i.scrollIntoView({block:"nearest"}))}))},this.isCurrentOption=t=>(x(this.value)?this.value.value:this.value)===t.value,this.getValueTitle=()=>this.value&&x(this.value)?this.value.title:"string"==typeof this.value?this.value:"",this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.getFirstPage=()=>this.options.getPage(0,(t=>""===this.filter||t.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()))),this.loadingWrapper=t=>{var i;let s,o;if(null!==(i=this.loadingAction)&&void 0!==i||(this.loadingAction=t.name),Boolean(this.option)&&"load-more"!==this.loadingAction?o=this.page.items.findIndex((t=>a(t.value)===a(this.option.value))):"load-more"===this.loadingAction&&(o=this.page.items.length-this.page.baseIndex),"load-more"===t.name)this.isLoading=!0,s=this.goToNextPage;else{if(t.cursor===h.NEXT&&this.page.items.length<=this.page.total&&o+this.page.baseIndex===this.page.items.length&&o+this.page.baseIndex<this.page.total)return void this.loadMoreElement.click();s="scroll"===t.name?r:this.updatePage}return s().then((()=>{const i=""===this.filter?this.options.items:this.options.items.filter((t=>t.title.includes(this.filter)));"load-data"!==t.name&&(o=this.page.getIndexFromCursor(t.cursor,"load-more"===this.loadingAction&&o>=0?i[o]:this.option)),this.option=i[o],this.scrollToIndex(o)})).finally((()=>{requestAnimationFrame((()=>{this.isLoading=!1,this.loadingAction=void 0}))}))},this.goToNextPage=()=>(this.showMore.emit(),void 0!==this.fetchurl?this.getOptions("string"==typeof this.page.next?this.page.next:void 0).then((t=>{if(void 0!==t){const i=[...this.page.items,...t.items];this.options=new e(i,{total:t.total,next:t.next,top:i.length})}})):r((()=>{if("function"==typeof this.page.next){const t=this.page.next();this.page=new g(Object.assign(Object.assign({},t),{items:[...this.page.items,...t.items]}))}}))),this.updatePage=async()=>{if(void 0!==this.fetchurl)return this.getOptions().then((t=>{void 0!==t&&(this.options=new e(t.items,{total:t.total,next:t.next,top:t.top}))}));this.page=this.getFirstPage()},this.getOptions=async(t=this.fetchurl)=>{const i="function"==typeof this.fetchmappings.request.filterTransform?this.fetchmappings.request.filterTransform(this.filter):this.filter,s=("string"==typeof t?t:t.toString()).replaceAll(this.fetchmappings.request.filter,encodeURIComponent(i));try{const t=await fetch(s,this.fetchoptions);if(!t.ok)return void this.fetchError.emit(new Error(`${t.status} - ${t.statusText}`));const i=await t.json(),o=c(i,this.fetchmappings.response.items).map((t=>{var i;return{title:c(t,this.fetchmappings.response.itemTitle),value:null!==(i=c(t,this.fetchmappings.response.itemValue))&&void 0!==i?i:t}})),e=Number(c(i,this.fetchmappings.response.total,0));let n=c(i,this.fetchmappings.response.next);if(URL.canParse(s)&&Boolean(n)&&!URL.canParse(n)){const t=new URL(s);t.pathname.endsWith(n.split("?")[0])&&(n=new URL(n,t).toString())}return{items:o,total:e,next:n,top:o.length}}catch(t){this.fetchError.emit(t)}}}watchValue(t){this.filter=this.getValueTitle(),this.valueChange.emit(t)}watchItems(t){if(void 0===this.fetchurl||void 0!==t){if(void 0!==this.fetchurl&&void 0!==t)throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${a(t)}.`);if(Array.isArray(t)&&0===t.length)this.options=new e([]);else if(p(t))this.options=new e(t.map((t=>({title:t,value:t}))),{total:t.length});else{if(i=t,!Array.isArray(i)||!i.every(x))throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${a(t)}.`);this.options=new e(t,{total:t.length})}var i}}watchIdentifier(t){m(t)&&(this.popoverId=`${t}-popover`,this.element.dataset.mgPopoverGuard=this.popoverId)}watchReadonly(t){t?this.classCollection.add(d):this.classCollection.delete(d)}watchValidityChange(t,i,s){void 0!==this.input&&(this.input[s]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(b):this.classCollection.delete(b)}watchMgWidth(t){v.forEach((t=>{this.classCollection.delete(`mg-c-input--width-${t}`)})),void 0!==t&&this.classCollection.add(`mg-c-input--width-${this.mgWidth}`),this.classCollection=new n(this.classCollection.classes)}watchFetchUrl(t){void 0!==t&&this.loadingWrapper({name:"load-data"})}watchFetchOptions(t){if(this.fetchurl&&t&&!u(t))throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${a(t)}.`)}watchFetchMappings(t){if(void 0!==this.fetchurl&&!u(t))throw new Error('<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.');if(void 0!==t&&!(t=>{const i=u(t)&&Object.hasOwn(t,"request")&&Object.hasOwn(t,"response");if(i){const{request:i,response:s}=t;return![i,s].some((t=>!u(t)))&&!("string"!=typeof i.filter||void 0!==i.filterTransform&&"function"!=typeof i.filterTransform||"object"!=typeof s||"string"!=typeof s.total||"string"!=typeof s.items||"string"!=typeof s.next||"string"!=typeof s.itemTitle||"string"!=typeof s.itemValue&&void 0!==s.itemValue)}return i})(t))throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${a(t)}.`)}watchOptions(){this.page=this.getFirstPage()}watchFilter(t){this.loadingWrapper({name:"load-data"}),this.filterChange.emit(t)}watchPopoverDisplay(t){t?this.input.focus():(this.option=null,this.filter=this.getValueTitle(),this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})))}async setFocus(){var t;null===(t=this.input)||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,s=!1){if("boolean"!=typeof t)throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!m(i))throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&s,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.setValue(null),this.option=null,this.filter="",new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValue(t){this.value=x(t)?p(this.items||this.options.items)?t.title:Object.assign({},t):""}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=w(this.element).messages,f(this),this.watchIdentifier(this.identifier),this.watchItems(this.items),void 0!==this.fetchurl&&(this.watchFetchOptions(this.fetchoptions),this.watchFetchMappings(this.fetchmappings),this.loadingWrapper({name:"load-data"})),this.watchValue(this.value),this.watchOptions(),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){var t,i,o,e,n,h;const r=`${this.identifier}-list`,c=this.getValueTitle(),p=this.value&&!this.disabled;let m,u;return(null===(t=this.page)||void 0===t?void 0:t.items.length)>0?m="list":0===(null===(i=this.page)||void 0===i?void 0:i.items.length)&&this.filter.length>0?m="notfound":0===(null===(o=this.page)||void 0===o?void 0:o.items.length)&&(m="notavailable"),u=void 0!==(null===(e=this.option)||void 0===e?void 0:e.value)?this.option.value:"string"==typeof this.value?this.value:null===(n=this.value)||void 0===n?void 0:n.value,s("mg-input",{key:"3f9b79e5c34d691589c16d0955883109501b86fc",label:this.label,identifier:this.identifier,class:this.classCollection.classes.join(" "),ariaDescribedbyIDs:m&&"list"!==m?m:void 0,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?c&&s("b",{class:"mg-c-input__readonly-value"},c):s("mg-popover",{identifier:this.popoverId,placement:"bottom-start",display:this.popoverDisplay,"arrow-hide":!0,style:{"--mg-c-input-list-width":(null===(h=this.input)||void 0===h?void 0:h.offsetWidth)>0?`${this.input.offsetWidth}px`:void 0},"data-fallback-placement":"bottom-end","onDisplay-change":this.handlePopoverDisplay},s("div",{class:"mg-c-input__input-group-container"},s("mg-icon",{icon:"magnifying-glass"}),s("input",{type:"text",role:"combobox",class:"mg-c-input__box mg-c-input__box--width",value:this.filter,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:"off","aria-autocomplete":"list","aria-expanded":this.popoverDisplay.toString(),"aria-controls":r,"aria-invalid":(!0===this.invalid).toString(),"aria-activedescendant":l(u),onInput:this.handleFilterInput,onBlur:this.handleFilterBlur,onFocus:this.handleFilterFocus,onKeyDown:this.handleFilterKeydown,ref:t=>{null!==t&&(this.input=t)}}),p?s("mg-button",{class:"mg-c-input__box-append mg-c-input__reset",variant:"flat","is-icon":!0,label:this.messages.general.reset,"aria-controls":this.identifier,tabindex:"-1",onClick:this.handleResetButton},s("mg-icon",{icon:"cross"})):s("mg-button",{class:"mg-c-input__box-append",variant:"flat","is-icon":!0,label:this.itemsLabel,tabindex:"-1",disabled:this.disabled},s("mg-icon",{icon:"chevron-"+(this.popoverDisplay?"up":"down")}))),s("div",{slot:"content",class:"mg-c-input__popover-container"},"list"===m&&[s("ul",{key:"list",class:"mg-c-input__input-list",role:"listbox",id:r,"aria-label":this.itemsLabel,"aria-setsize":this.page.total},this.page.items.map((t=>{var i;return s("li",{role:"option",class:{"mg-c-input__input-list-item":!0,"mg-c-input__input-list-item--focus-visible":JSON.stringify(null===(i=this.option)||void 0===i?void 0:i.value)===JSON.stringify(t.value),"mg-c-input__input-list-item--selected":this.isCurrentOption(t)},key:t.title,id:l(t.value),"aria-selected":this.isCurrentOption(t).toString(),"data-value":a(t.value),onClick:this.handleOptionClick},t.title,this.isCurrentOption(t)&&s("mg-icon",{icon:"check"}))}))),this.isLoading&&s("mg-loader",{key:"loader",message:this.messages.input.combobox.search,class:{"mg-u-visually-hidden":Boolean(this.page.next)}}),this.page.next&&s("mg-button",{key:"load-more",variant:"flat",class:"mg-c-input__load-more",tabIndex:-1,disabled:this.isLoading,"full-width":!0,"disable-on-click":!0,onClick:this.handleLoadMoreButton,"aria-controls":r,ref:t=>{null!==t&&(this.loadMoreElement=t)}},s("mg-icon",{icon:"chevron-down"}),this.messages.input.showMore)],"notfound"===m&&s("p",{id:m,class:"mg-c-input__popover-info"},this.messages.input.combobox.notFound),"notavailable"===m&&s("p",{id:m,class:"mg-c-input__popover-info"},this.messages.input.combobox.notAvailable))))}get element(){return o(this)}static get watchers(){return{value:[{watchValue:0}],items:[{watchItems:0}],identifier:[{watchIdentifier:0}],readonly:[{watchReadonly:0},{watchValidityChange:0}],required:[{watchValidityChange:0}],disabled:[{watchValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],fetchurl:[{watchFetchUrl:0}],fetchoptions:[{watchFetchOptions:0}],fetchmappings:[{watchFetchMappings:0}],options:[{watchOptions:0}],filter:[{watchFilter:0}],popoverDisplay:[{watchPopoverDisplay:0}]}}};y.style=".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-popover-overflow:auto;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-min-width:var(--mg-c-input-list-width);--mg-c-popover-max-height:calc(50 * var(--mg-b-size-8) - var(--mg-b-size-32))}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}";export{y as mg_input_combobox}

package/dist/mg-components/p-7c63e469.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,a}from"./p-DshvCiTL.js";import{i}from"./p-DSEloqPn.js";import{i as r,t as s}from"./p-C7xjtdiw.js";const o=class{constructor(e){t(this,e),this.messageHide=!1}watchMessage(t){if(t&&!r(t))throw new Error(`<mg-loader> prop "message" must be a valid string. Passed value: ${s(t)}.`)}componentWillLoad(){this.messages=i(this.element).messages,this.watchMessage(this.message)}render(){return e("div",{key:"739b4cbacd8a8da056dbb1445c40fac2cf26766a",class:"mg-c-loader","aria-live":"polite"},e("mg-icon",{key:"95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba",icon:"loader",spin:!0}),e("span",{key:"f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1",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: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}";export{o as mg_loader}