@mgdis/mg-components 6.24.0 → 6.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-Acmyl4hv.js +5 -0
- package/dist/cjs/{index-BxB20_Vw.js → index-B6J2EllP.js} +3 -1
- package/dist/cjs/{index-BEF-cqV9.js → index-BmFwLEZT.js} +5 -1
- package/dist/cjs/{index-CpENFzEo.js → index-DrZECzp6.js} +14 -6
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +452 -261
- package/dist/cjs/mg-alert.cjs.entry.js +7 -8
- package/dist/cjs/mg-breadcrumb.cjs.entry.js +27 -10
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-fieldset.cjs.entry.js +8 -8
- package/dist/cjs/mg-illustration.cjs.entry.js +57 -0
- package/dist/cjs/mg-input-combobox.cjs.entry.js +40 -23
- package/dist/cjs/mg-input-file.cjs.entry.js +12 -11
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +2565 -4013
- package/dist/cjs/mg-loader.cjs.entry.js +5 -5
- package/dist/cjs/mg-progress.cjs.entry.js +3 -3
- package/dist/collection/assets/illustrations/index.js +1 -0
- package/dist/collection/assets/jodit/jodit.css +5821 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +1 -1
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +4 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.conf.js +4 -0
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +62 -3
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/atoms/mg-illustration/mg-illustration.conf.js +1 -0
- package/dist/collection/components/atoms/mg-illustration/mg-illustration.js +95 -0
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +9 -7
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +84 -19
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +5 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxPaginated.js +5 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +30 -22
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +69 -25
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +14 -8
- package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js +8 -7
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +21 -12
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +9 -8
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +15 -10
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.css +50 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js +29 -3
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +262 -9
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +21 -19
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +18 -13
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +7 -7
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +10 -9
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +1 -1
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +7 -5
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +18 -17
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +7 -4
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +6 -7
- package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.js +49 -6
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +6 -6
- package/dist/collection/components/molecules/mg-form/mg-form.js +16 -13
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js +4 -0
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +51 -2
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +8 -4
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +13 -4
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +2 -2
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +24 -37
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +5 -3
- package/dist/collection/components/molecules/mg-table/mg-table.js +10 -6
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +12 -9
- package/dist/collection/utils/behaviors.utils.js +3 -3
- package/dist/collection/utils/playwright.fixture.js +7 -2
- package/dist/components/mg-action-more.js +1 -1
- package/dist/components/mg-alert.js +1 -1
- package/dist/components/mg-badge2.js +1 -1
- package/dist/components/mg-breadcrumb.js +1 -1
- package/dist/components/mg-button2.js +1 -1
- package/dist/components/mg-card2.js +1 -1
- package/dist/components/mg-character-left2.js +1 -1
- package/dist/components/mg-details.js +1 -1
- package/dist/components/mg-divider2.js +1 -1
- package/dist/components/mg-fieldset.js +1 -1
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-icon2.js +1 -1
- package/dist/components/mg-illustrated-message.js +1 -1
- package/dist/components/mg-illustration.d.ts +11 -0
- package/dist/components/mg-illustration.js +1 -0
- package/dist/components/mg-input-checkbox.js +1 -1
- package/dist/components/mg-input-combobox.js +1 -1
- package/dist/components/mg-input-date.js +1 -1
- package/dist/components/mg-input-file.js +1 -1
- package/dist/components/mg-input-numeric.js +1 -1
- package/dist/components/mg-input-password.js +1 -1
- package/dist/components/mg-input-radio.js +1 -1
- package/dist/components/mg-input-rich-text-editor.js +294 -284
- package/dist/components/mg-input-select2.js +1 -1
- package/dist/components/mg-input-text2.js +1 -1
- package/dist/components/mg-input-textarea.js +1 -1
- package/dist/components/mg-input-title2.js +1 -1
- package/dist/components/mg-input-toggle.js +1 -1
- package/dist/components/mg-input2.js +1 -1
- package/dist/components/mg-item-more2.js +1 -1
- package/dist/components/mg-loader2.js +1 -1
- package/dist/components/mg-menu-item2.js +1 -1
- package/dist/components/mg-message2.js +1 -1
- package/dist/components/mg-modal.js +1 -1
- package/dist/components/mg-pagination.js +1 -1
- package/dist/components/mg-panel.js +1 -1
- package/dist/components/mg-popover-content2.js +1 -1
- package/dist/components/mg-popover2.js +1 -1
- package/dist/components/mg-progress.js +1 -1
- package/dist/components/mg-skip-links.js +1 -1
- package/dist/components/mg-table.js +1 -1
- package/dist/components/mg-tabs2.js +1 -1
- package/dist/components/mg-tag.js +1 -1
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip2.js +1 -1
- package/dist/custom-elements.json +197 -48
- package/dist/esm/{index-C7xjtdiw.js → index-91BOpzAB.js} +14 -6
- package/dist/esm/{index-DSEloqPn.js → index-BfblyCaJ.js} +3 -1
- package/dist/esm/index-Ci9Hv7DG.js +3 -0
- package/dist/esm/{index-DshvCiTL.js → index-D4bO_UCn.js} +5 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +449 -258
- package/dist/esm/mg-alert.entry.js +7 -8
- package/dist/esm/mg-breadcrumb.entry.js +27 -10
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-fieldset.entry.js +8 -8
- package/dist/esm/mg-illustration.entry.js +55 -0
- package/dist/esm/mg-input-combobox.entry.js +40 -23
- package/dist/esm/mg-input-file.entry.js +12 -11
- package/dist/esm/mg-input-rich-text-editor.entry.js +2550 -3998
- package/dist/esm/mg-loader.entry.js +5 -5
- package/dist/esm/mg-progress.entry.js +3 -3
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-206505b5.entry.js +1667 -0
- package/dist/mg-components/{p-cdb01923.entry.js → p-3ad7441c.entry.js} +1 -1
- package/dist/mg-components/p-413b4536.entry.js +1 -0
- package/dist/mg-components/p-5dff879a.entry.js +1 -0
- package/dist/mg-components/{p-08d3d957.entry.js → p-96fc508e.entry.js} +1 -1
- package/dist/mg-components/p-Ci9Hv7DG.js +1 -0
- package/dist/mg-components/p-D4bO_UCn.js +2 -0
- package/dist/mg-components/{p-d0b6d8f5.entry.js → p-ad533d08.entry.js} +1 -1
- package/dist/mg-components/p-b20f3698.entry.js +1 -0
- package/dist/mg-components/p-bf2252c9.entry.js +1 -0
- package/dist/mg-components/p-d0d12800.entry.js +1 -0
- package/dist/mg-components/p-f8e58181.entry.js +1 -0
- package/dist/types/assets/illustrations/index.d.ts +21 -0
- package/dist/types/components/atoms/mg-divider/mg-divider.conf.d.ts +9 -0
- package/dist/types/components/atoms/mg-divider/mg-divider.d.ts +13 -0
- package/dist/types/components/atoms/mg-illustration/mg-illustration.conf.d.ts +5 -0
- package/dist/types/components/atoms/mg-illustration/mg-illustration.d.ts +24 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +19 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +10 -5
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.d.ts +25 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +61 -2
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +2 -2
- package/dist/types/components/molecules/menus/mg-menu-item/mg-menu-item.d.ts +2 -2
- package/dist/types/components/molecules/mg-alert/mg-alert.d.ts +2 -2
- package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.d.ts +11 -0
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.d.ts +8 -0
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +9 -1
- package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts +1 -1
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +3 -3
- package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts +1 -1
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +1 -1
- package/dist/types/components.d.ts +158 -42
- package/ide/intellij/web-types.json +145 -65
- package/ide/vscode/css-custom-data.json +6 -2
- package/ide/vscode/html-custom-data.json +216 -33
- package/package.json +22 -22
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss +0 -212
- package/dist/mg-components/p-13feb37a.entry.js +0 -1
- package/dist/mg-components/p-7c63e469.entry.js +0 -1
- package/dist/mg-components/p-7fd3e519.entry.js +0 -1
- package/dist/mg-components/p-9953b835.entry.js +0 -1
- package/dist/mg-components/p-9c0a9fc7.entry.js +0 -1657
- package/dist/mg-components/p-DshvCiTL.js +0 -2
- package/dist/mg-components/p-a338088e.entry.js +0 -1
- /package/dist/mg-components/{p-C7xjtdiw.js → p-91BOpzAB.js} +0 -0
- /package/dist/mg-components/{p-DSEloqPn.js → p-BfblyCaJ.js} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@mgdis/mg-components",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.26.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
"name": "mg-alert",
|
|
64
|
-
"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`:
|
|
64
|
+
"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",
|
|
65
65
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-alert--docs",
|
|
66
66
|
"attributes": [
|
|
67
67
|
{
|
|
@@ -113,11 +113,11 @@
|
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
115
|
"name": "component-hide",
|
|
116
|
-
"description": "
|
|
116
|
+
"description": "Emitted event when alert is hidden"
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
119
|
"name": "component-show",
|
|
120
|
-
"description": "
|
|
120
|
+
"description": "Emitted event when alert is diplayed"
|
|
121
121
|
}
|
|
122
122
|
]
|
|
123
123
|
},
|
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
},
|
|
193
193
|
{
|
|
194
194
|
"name": "mg-breadcrumb",
|
|
195
|
-
"description": "Properties:\n- `items`: Breadcrumb items (hierarchical order: root → current page).\n\n",
|
|
195
|
+
"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",
|
|
196
196
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-breadcrumb--docs",
|
|
197
197
|
"attributes": [],
|
|
198
198
|
"js": {
|
|
@@ -207,7 +207,12 @@
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
],
|
|
210
|
-
"events": [
|
|
210
|
+
"events": [
|
|
211
|
+
{
|
|
212
|
+
"name": "item-click",
|
|
213
|
+
"description": "Emitted event when item link is clicked"
|
|
214
|
+
}
|
|
215
|
+
]
|
|
211
216
|
},
|
|
212
217
|
"css": {
|
|
213
218
|
"properties": []
|
|
@@ -521,7 +526,7 @@
|
|
|
521
526
|
},
|
|
522
527
|
{
|
|
523
528
|
"name": "--mg-c-card-border-radius-default",
|
|
524
|
-
"description": "Defines the default border radius property for the card. Default value: `--mg-b-size-
|
|
529
|
+
"description": "Defines the default border radius property for the card. Default value: `--mg-b-size-radius-xlarge`."
|
|
525
530
|
},
|
|
526
531
|
{
|
|
527
532
|
"name": "--mg-c-card-box-shadow",
|
|
@@ -634,9 +639,19 @@
|
|
|
634
639
|
},
|
|
635
640
|
{
|
|
636
641
|
"name": "mg-divider",
|
|
637
|
-
"description": "Attributes:\n- `full-width`: Define component size\n\n",
|
|
642
|
+
"description": "Attributes:\n- `direction`: Define component direction\n- `full-width`: Define component size\n\n",
|
|
638
643
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-divider--docs",
|
|
639
644
|
"attributes": [
|
|
645
|
+
{
|
|
646
|
+
"name": "direction",
|
|
647
|
+
"description": "Define component direction\n\nType: `\"horizontal\" | \"vertical\"`",
|
|
648
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-divider--docs",
|
|
649
|
+
"value": {
|
|
650
|
+
"type": "\"horizontal\" | \"vertical\"",
|
|
651
|
+
"default": "'horizontal'",
|
|
652
|
+
"required": false
|
|
653
|
+
}
|
|
654
|
+
},
|
|
640
655
|
{
|
|
641
656
|
"name": "full-width",
|
|
642
657
|
"description": "Define component size\n\nType: `boolean`",
|
|
@@ -660,7 +675,7 @@
|
|
|
660
675
|
},
|
|
661
676
|
{
|
|
662
677
|
"name": "--mg-c-divider-spacing-vertical",
|
|
663
|
-
"description": "Defines the vertical spacing
|
|
678
|
+
"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`."
|
|
664
679
|
},
|
|
665
680
|
{
|
|
666
681
|
"name": "--mg-c-divider-thickness",
|
|
@@ -964,9 +979,19 @@
|
|
|
964
979
|
},
|
|
965
980
|
{
|
|
966
981
|
"name": "mg-illustrated-message",
|
|
967
|
-
"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",
|
|
982
|
+
"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",
|
|
968
983
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs",
|
|
969
984
|
"attributes": [
|
|
985
|
+
{
|
|
986
|
+
"name": "align",
|
|
987
|
+
"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\"`",
|
|
988
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-illustrated-message--docs",
|
|
989
|
+
"value": {
|
|
990
|
+
"type": "\"center\" | \"left\" | \"right\"",
|
|
991
|
+
"default": "'center'",
|
|
992
|
+
"required": false
|
|
993
|
+
}
|
|
994
|
+
},
|
|
970
995
|
{
|
|
971
996
|
"name": "direction",
|
|
972
997
|
"description": "Define component orientation\n\nType: `\"horizontal\" | \"vertical\"`",
|
|
@@ -1001,6 +1026,34 @@
|
|
|
1001
1026
|
]
|
|
1002
1027
|
}
|
|
1003
1028
|
},
|
|
1029
|
+
{
|
|
1030
|
+
"name": "mg-illustration",
|
|
1031
|
+
"description": "Attributes:\n- `illustration`: Illustration to display, by name from\n\n",
|
|
1032
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-illustration--docs",
|
|
1033
|
+
"attributes": [
|
|
1034
|
+
{
|
|
1035
|
+
"name": "illustration",
|
|
1036
|
+
"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\"`",
|
|
1037
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/atoms-mg-illustration--docs",
|
|
1038
|
+
"value": {
|
|
1039
|
+
"type": "\"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\"",
|
|
1040
|
+
"required": true
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
],
|
|
1044
|
+
"js": {
|
|
1045
|
+
"properties": [],
|
|
1046
|
+
"events": []
|
|
1047
|
+
},
|
|
1048
|
+
"css": {
|
|
1049
|
+
"properties": [
|
|
1050
|
+
{
|
|
1051
|
+
"name": "--mg-c-illustration-color",
|
|
1052
|
+
"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>`)."
|
|
1053
|
+
}
|
|
1054
|
+
]
|
|
1055
|
+
}
|
|
1056
|
+
},
|
|
1004
1057
|
{
|
|
1005
1058
|
"name": "mg-input",
|
|
1006
1059
|
"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",
|
|
@@ -1174,7 +1227,7 @@
|
|
|
1174
1227
|
},
|
|
1175
1228
|
{
|
|
1176
1229
|
"name": "mg-input-checkbox",
|
|
1177
|
-
"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`:
|
|
1230
|
+
"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",
|
|
1178
1231
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-checkbox--docs",
|
|
1179
1232
|
"attributes": [
|
|
1180
1233
|
{
|
|
@@ -1373,7 +1426,7 @@
|
|
|
1373
1426
|
"events": [
|
|
1374
1427
|
{
|
|
1375
1428
|
"name": "input-valid",
|
|
1376
|
-
"description": "
|
|
1429
|
+
"description": "Emitted event when checking validity"
|
|
1377
1430
|
},
|
|
1378
1431
|
{
|
|
1379
1432
|
"name": "value-change",
|
|
@@ -1387,7 +1440,7 @@
|
|
|
1387
1440
|
},
|
|
1388
1441
|
{
|
|
1389
1442
|
"name": "mg-input-combobox",
|
|
1390
|
-
"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`:
|
|
1443
|
+
"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",
|
|
1391
1444
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-combobox--docs",
|
|
1392
1445
|
"attributes": [
|
|
1393
1446
|
{
|
|
@@ -1503,6 +1556,16 @@
|
|
|
1503
1556
|
"required": false
|
|
1504
1557
|
}
|
|
1505
1558
|
},
|
|
1559
|
+
{
|
|
1560
|
+
"name": "popover-placement",
|
|
1561
|
+
"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\"`",
|
|
1562
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-combobox--docs",
|
|
1563
|
+
"value": {
|
|
1564
|
+
"type": "\"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\"",
|
|
1565
|
+
"default": "'bottom-start'",
|
|
1566
|
+
"required": false
|
|
1567
|
+
}
|
|
1568
|
+
},
|
|
1506
1569
|
{
|
|
1507
1570
|
"name": "readonly",
|
|
1508
1571
|
"description": "Define if input is readonly\n\nType: `boolean`",
|
|
@@ -1594,23 +1657,23 @@
|
|
|
1594
1657
|
"events": [
|
|
1595
1658
|
{
|
|
1596
1659
|
"name": "fetch-error",
|
|
1597
|
-
"description": "
|
|
1660
|
+
"description": "Emitted event when fetch API throw an error"
|
|
1598
1661
|
},
|
|
1599
1662
|
{
|
|
1600
1663
|
"name": "filter-change",
|
|
1601
|
-
"description": "
|
|
1664
|
+
"description": "Emitted event when filter change"
|
|
1602
1665
|
},
|
|
1603
1666
|
{
|
|
1604
1667
|
"name": "input-valid",
|
|
1605
|
-
"description": "
|
|
1668
|
+
"description": "Emitted event when checking validity"
|
|
1606
1669
|
},
|
|
1607
1670
|
{
|
|
1608
1671
|
"name": "load-more",
|
|
1609
|
-
"description": "
|
|
1672
|
+
"description": "Emitted event when `load-more` is called"
|
|
1610
1673
|
},
|
|
1611
1674
|
{
|
|
1612
1675
|
"name": "value-change",
|
|
1613
|
-
"description": "
|
|
1676
|
+
"description": "Emitted event when value change"
|
|
1614
1677
|
}
|
|
1615
1678
|
]
|
|
1616
1679
|
},
|
|
@@ -1620,7 +1683,7 @@
|
|
|
1620
1683
|
},
|
|
1621
1684
|
{
|
|
1622
1685
|
"name": "mg-input-date",
|
|
1623
|
-
"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`:
|
|
1686
|
+
"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",
|
|
1624
1687
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-date--docs",
|
|
1625
1688
|
"attributes": [
|
|
1626
1689
|
{
|
|
@@ -1781,11 +1844,11 @@
|
|
|
1781
1844
|
"events": [
|
|
1782
1845
|
{
|
|
1783
1846
|
"name": "input-valid",
|
|
1784
|
-
"description": "
|
|
1847
|
+
"description": "Emitted event when checking validity"
|
|
1785
1848
|
},
|
|
1786
1849
|
{
|
|
1787
1850
|
"name": "value-change",
|
|
1788
|
-
"description": "
|
|
1851
|
+
"description": "Emitted event when value change"
|
|
1789
1852
|
}
|
|
1790
1853
|
]
|
|
1791
1854
|
},
|
|
@@ -1978,7 +2041,7 @@
|
|
|
1978
2041
|
},
|
|
1979
2042
|
{
|
|
1980
2043
|
"name": "mg-input-numeric",
|
|
1981
|
-
"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`:
|
|
2044
|
+
"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",
|
|
1982
2045
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-numeric--docs",
|
|
1983
2046
|
"attributes": [
|
|
1984
2047
|
{
|
|
@@ -2225,11 +2288,11 @@
|
|
|
2225
2288
|
"events": [
|
|
2226
2289
|
{
|
|
2227
2290
|
"name": "input-valid",
|
|
2228
|
-
"description": "
|
|
2291
|
+
"description": "Emitted event when checking validity"
|
|
2229
2292
|
},
|
|
2230
2293
|
{
|
|
2231
2294
|
"name": "value-change",
|
|
2232
|
-
"description": "
|
|
2295
|
+
"description": "Emitted event when value change"
|
|
2233
2296
|
}
|
|
2234
2297
|
]
|
|
2235
2298
|
},
|
|
@@ -2239,7 +2302,7 @@
|
|
|
2239
2302
|
},
|
|
2240
2303
|
{
|
|
2241
2304
|
"name": "mg-input-password",
|
|
2242
|
-
"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`:
|
|
2305
|
+
"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",
|
|
2243
2306
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-password--docs",
|
|
2244
2307
|
"attributes": [
|
|
2245
2308
|
{
|
|
@@ -2409,11 +2472,11 @@
|
|
|
2409
2472
|
"events": [
|
|
2410
2473
|
{
|
|
2411
2474
|
"name": "input-valid",
|
|
2412
|
-
"description": "
|
|
2475
|
+
"description": "Emitted event when checking validity"
|
|
2413
2476
|
},
|
|
2414
2477
|
{
|
|
2415
2478
|
"name": "value-change",
|
|
2416
|
-
"description": "
|
|
2479
|
+
"description": "Emitted event when value change"
|
|
2417
2480
|
}
|
|
2418
2481
|
]
|
|
2419
2482
|
},
|
|
@@ -2423,7 +2486,7 @@
|
|
|
2423
2486
|
},
|
|
2424
2487
|
{
|
|
2425
2488
|
"name": "mg-input-radio",
|
|
2426
|
-
"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`:
|
|
2489
|
+
"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",
|
|
2427
2490
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-radio--docs",
|
|
2428
2491
|
"attributes": [
|
|
2429
2492
|
{
|
|
@@ -2585,7 +2648,7 @@
|
|
|
2585
2648
|
"events": [
|
|
2586
2649
|
{
|
|
2587
2650
|
"name": "input-valid",
|
|
2588
|
-
"description": "
|
|
2651
|
+
"description": "Emitted event when checking validity"
|
|
2589
2652
|
},
|
|
2590
2653
|
{
|
|
2591
2654
|
"name": "value-change",
|
|
@@ -2599,7 +2662,7 @@
|
|
|
2599
2662
|
},
|
|
2600
2663
|
{
|
|
2601
2664
|
"name": "mg-input-rich-text-editor",
|
|
2602
|
-
"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`:
|
|
2665
|
+
"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",
|
|
2603
2666
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-rich-text-editor--docs",
|
|
2604
2667
|
"attributes": [
|
|
2605
2668
|
{
|
|
@@ -2785,6 +2848,15 @@
|
|
|
2785
2848
|
],
|
|
2786
2849
|
"js": {
|
|
2787
2850
|
"properties": [
|
|
2851
|
+
{
|
|
2852
|
+
"name": "customActions",
|
|
2853
|
+
"description": "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\nType: `RichTextEditorCustomAction[]`",
|
|
2854
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-rich-text-editor--docs",
|
|
2855
|
+
"value": {
|
|
2856
|
+
"type": "RichTextEditorCustomAction[]",
|
|
2857
|
+
"required": false
|
|
2858
|
+
}
|
|
2859
|
+
},
|
|
2788
2860
|
{
|
|
2789
2861
|
"name": "sanitizerOptions",
|
|
2790
2862
|
"description": "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\nType: `{ disallowAttributes?: Record<string, string[]>; disallowTags?: string[]; }`",
|
|
@@ -2796,13 +2868,21 @@
|
|
|
2796
2868
|
}
|
|
2797
2869
|
],
|
|
2798
2870
|
"events": [
|
|
2871
|
+
{
|
|
2872
|
+
"name": "custom-action",
|
|
2873
|
+
"description": "Emitted event when a custom action button is clicked.\nThe detail contains the action `name`."
|
|
2874
|
+
},
|
|
2799
2875
|
{
|
|
2800
2876
|
"name": "input-valid",
|
|
2801
|
-
"description": "
|
|
2877
|
+
"description": "Emitted event when checking validity"
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
"name": "selection-change",
|
|
2881
|
+
"description": "Emitted event when the text selection changes.\nThe detail contains the selected `text`, sanitized `html` and whether the selection `isCollapsed`."
|
|
2802
2882
|
},
|
|
2803
2883
|
{
|
|
2804
2884
|
"name": "value-change",
|
|
2805
|
-
"description": "
|
|
2885
|
+
"description": "Emitted event when value change"
|
|
2806
2886
|
}
|
|
2807
2887
|
]
|
|
2808
2888
|
},
|
|
@@ -2812,7 +2892,7 @@
|
|
|
2812
2892
|
},
|
|
2813
2893
|
{
|
|
2814
2894
|
"name": "mg-input-select",
|
|
2815
|
-
"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`:
|
|
2895
|
+
"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",
|
|
2816
2896
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-select--docs",
|
|
2817
2897
|
"attributes": [
|
|
2818
2898
|
{
|
|
@@ -3002,11 +3082,11 @@
|
|
|
3002
3082
|
"events": [
|
|
3003
3083
|
{
|
|
3004
3084
|
"name": "input-valid",
|
|
3005
|
-
"description": "
|
|
3085
|
+
"description": "Emitted event when checking validity"
|
|
3006
3086
|
},
|
|
3007
3087
|
{
|
|
3008
3088
|
"name": "value-change",
|
|
3009
|
-
"description": "
|
|
3089
|
+
"description": "Emitted event when value change"
|
|
3010
3090
|
}
|
|
3011
3091
|
]
|
|
3012
3092
|
},
|
|
@@ -3016,7 +3096,7 @@
|
|
|
3016
3096
|
},
|
|
3017
3097
|
{
|
|
3018
3098
|
"name": "mg-input-text",
|
|
3019
|
-
"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`:
|
|
3099
|
+
"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",
|
|
3020
3100
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-text--docs",
|
|
3021
3101
|
"attributes": [
|
|
3022
3102
|
{
|
|
@@ -3244,11 +3324,11 @@
|
|
|
3244
3324
|
"events": [
|
|
3245
3325
|
{
|
|
3246
3326
|
"name": "input-valid",
|
|
3247
|
-
"description": "
|
|
3327
|
+
"description": "Emitted event when checking validity"
|
|
3248
3328
|
},
|
|
3249
3329
|
{
|
|
3250
3330
|
"name": "value-change",
|
|
3251
|
-
"description": "
|
|
3331
|
+
"description": "Emitted event when value change"
|
|
3252
3332
|
}
|
|
3253
3333
|
]
|
|
3254
3334
|
},
|
|
@@ -3258,7 +3338,7 @@
|
|
|
3258
3338
|
},
|
|
3259
3339
|
{
|
|
3260
3340
|
"name": "mg-input-textarea",
|
|
3261
|
-
"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`:
|
|
3341
|
+
"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",
|
|
3262
3342
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-textarea--docs",
|
|
3263
3343
|
"attributes": [
|
|
3264
3344
|
{
|
|
@@ -3477,11 +3557,11 @@
|
|
|
3477
3557
|
"events": [
|
|
3478
3558
|
{
|
|
3479
3559
|
"name": "input-valid",
|
|
3480
|
-
"description": "
|
|
3560
|
+
"description": "Emitted event when checking validity"
|
|
3481
3561
|
},
|
|
3482
3562
|
{
|
|
3483
3563
|
"name": "value-change",
|
|
3484
|
-
"description": "
|
|
3564
|
+
"description": "Emitted event when value change"
|
|
3485
3565
|
}
|
|
3486
3566
|
]
|
|
3487
3567
|
},
|
|
@@ -3491,7 +3571,7 @@
|
|
|
3491
3571
|
},
|
|
3492
3572
|
{
|
|
3493
3573
|
"name": "mg-input-toggle",
|
|
3494
|
-
"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`:
|
|
3574
|
+
"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",
|
|
3495
3575
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-toggle--docs",
|
|
3496
3576
|
"attributes": [
|
|
3497
3577
|
{
|
|
@@ -3635,11 +3715,11 @@
|
|
|
3635
3715
|
"events": [
|
|
3636
3716
|
{
|
|
3637
3717
|
"name": "input-valid",
|
|
3638
|
-
"description": "
|
|
3718
|
+
"description": "Emitted event when checking validity"
|
|
3639
3719
|
},
|
|
3640
3720
|
{
|
|
3641
3721
|
"name": "value-change",
|
|
3642
|
-
"description": "
|
|
3722
|
+
"description": "Emitted event when value change"
|
|
3643
3723
|
}
|
|
3644
3724
|
]
|
|
3645
3725
|
},
|
|
@@ -3739,7 +3819,7 @@
|
|
|
3739
3819
|
},
|
|
3740
3820
|
{
|
|
3741
3821
|
"name": "mg-menu-item",
|
|
3742
|
-
"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`:
|
|
3822
|
+
"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",
|
|
3743
3823
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-menus-mg-menu-item--docs",
|
|
3744
3824
|
"attributes": [
|
|
3745
3825
|
{
|
|
@@ -3806,11 +3886,11 @@
|
|
|
3806
3886
|
"events": [
|
|
3807
3887
|
{
|
|
3808
3888
|
"name": "item-loaded",
|
|
3809
|
-
"description": "
|
|
3889
|
+
"description": "Emitted event when item is loaded"
|
|
3810
3890
|
},
|
|
3811
3891
|
{
|
|
3812
3892
|
"name": "item-updated",
|
|
3813
|
-
"description": "
|
|
3893
|
+
"description": "Emitted event when item is updated"
|
|
3814
3894
|
}
|
|
3815
3895
|
]
|
|
3816
3896
|
},
|
|
@@ -4196,19 +4276,9 @@
|
|
|
4196
4276
|
},
|
|
4197
4277
|
{
|
|
4198
4278
|
"name": "mg-popover",
|
|
4199
|
-
"description": "Attributes:\n- `
|
|
4279
|
+
"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",
|
|
4200
4280
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-popover--docs",
|
|
4201
4281
|
"attributes": [
|
|
4202
|
-
{
|
|
4203
|
-
"name": "arrow-hide",
|
|
4204
|
-
"description": "Hide popover arrow\n\nType: `boolean`",
|
|
4205
|
-
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-popover--docs",
|
|
4206
|
-
"value": {
|
|
4207
|
-
"type": "boolean",
|
|
4208
|
-
"default": "false",
|
|
4209
|
-
"required": false
|
|
4210
|
-
}
|
|
4211
|
-
},
|
|
4212
4282
|
{
|
|
4213
4283
|
"name": "close-button",
|
|
4214
4284
|
"description": "Define if popover has a cross button\n\nType: `boolean`",
|
|
@@ -4255,13 +4325,23 @@
|
|
|
4255
4325
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-popover--docs",
|
|
4256
4326
|
"value": {
|
|
4257
4327
|
"type": "\"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\"",
|
|
4258
|
-
"default": "'bottom'",
|
|
4328
|
+
"default": "'bottom-start'",
|
|
4259
4329
|
"required": false
|
|
4260
4330
|
}
|
|
4261
4331
|
}
|
|
4262
4332
|
],
|
|
4263
4333
|
"js": {
|
|
4264
|
-
"properties": [
|
|
4334
|
+
"properties": [
|
|
4335
|
+
{
|
|
4336
|
+
"name": "arrowHide",
|
|
4337
|
+
"description": "Hide popover arrow\n\nType: `never`",
|
|
4338
|
+
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-popover--docs",
|
|
4339
|
+
"value": {
|
|
4340
|
+
"type": "never",
|
|
4341
|
+
"required": false
|
|
4342
|
+
}
|
|
4343
|
+
}
|
|
4344
|
+
],
|
|
4265
4345
|
"events": [
|
|
4266
4346
|
{
|
|
4267
4347
|
"name": "component-close",
|
|
@@ -4269,7 +4349,7 @@
|
|
|
4269
4349
|
},
|
|
4270
4350
|
{
|
|
4271
4351
|
"name": "display-change",
|
|
4272
|
-
"description": "
|
|
4352
|
+
"description": "Emitted event when display value change"
|
|
4273
4353
|
}
|
|
4274
4354
|
]
|
|
4275
4355
|
},
|
|
@@ -4400,7 +4480,7 @@
|
|
|
4400
4480
|
},
|
|
4401
4481
|
{
|
|
4402
4482
|
"name": "mg-skip-links",
|
|
4403
|
-
"description": "Properties:\n- `links`: Skip links\n\nEvents:\n- `go-to-anchor`:
|
|
4483
|
+
"description": "Properties:\n- `links`: Skip links\n\nEvents:\n- `go-to-anchor`: Emitted event when link is clicked\n\n",
|
|
4404
4484
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-skip-links--docs",
|
|
4405
4485
|
"attributes": [],
|
|
4406
4486
|
"js": {
|
|
@@ -4418,7 +4498,7 @@
|
|
|
4418
4498
|
"events": [
|
|
4419
4499
|
{
|
|
4420
4500
|
"name": "go-to-anchor",
|
|
4421
|
-
"description": "
|
|
4501
|
+
"description": "Emitted event when link is clicked"
|
|
4422
4502
|
}
|
|
4423
4503
|
]
|
|
4424
4504
|
},
|
|
@@ -4487,7 +4567,7 @@
|
|
|
4487
4567
|
},
|
|
4488
4568
|
{
|
|
4489
4569
|
"name": "mg-tabs",
|
|
4490
|
-
"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`:
|
|
4570
|
+
"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",
|
|
4491
4571
|
"doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-mg-tabs--docs",
|
|
4492
4572
|
"attributes": [
|
|
4493
4573
|
{
|
|
@@ -4543,7 +4623,7 @@
|
|
|
4543
4623
|
"events": [
|
|
4544
4624
|
{
|
|
4545
4625
|
"name": "active-tab-change",
|
|
4546
|
-
"description": "
|
|
4626
|
+
"description": "Emitted event when active tab change"
|
|
4547
4627
|
}
|
|
4548
4628
|
]
|
|
4549
4629
|
},
|