@mgdis/mg-components 5.10.0 → 5.10.1
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/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_31.cjs.entry.js +318 -427
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +19 -28
- package/dist/cjs/{mg-menu.conf-1942ac70.js → mg-menu.conf-196151fe.js} +16 -16
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +8 -9
- package/dist/collection/components/atoms/mg-button/mg-button.js +16 -20
- package/dist/collection/components/atoms/mg-card/mg-card.js +10 -12
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +1 -2
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +17 -19
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +1 -2
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +11 -13
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +11 -21
- package/dist/collection/components/molecules/inputs/MgInput.conf.js +4 -1
- package/dist/collection/components/molecules/inputs/MgInput.js +26 -18
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +10 -14
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +7 -12
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +14 -22
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +6 -10
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +10 -18
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +21 -32
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +16 -31
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +13 -17
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +17 -23
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +11 -18
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +20 -29
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +11 -15
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -3
- package/dist/collection/components/molecules/mg-form/mg-form.js +8 -19
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -2
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +4 -7
- package/dist/collection/components/molecules/mg-message/mg-message.js +11 -14
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +7 -11
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +11 -13
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +6 -15
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +7 -13
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +2 -4
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +20 -24
- package/dist/collection/locales/index.js +2 -2
- package/dist/collection/utils/behaviors.utils.js +16 -22
- package/dist/collection/utils/components.utils.js +21 -23
- package/dist/collection/utils/locale.utils.js +14 -14
- package/dist/collection/utils/unit.test.utils.js +7 -10
- package/dist/components/MgInput.js +30 -18
- package/dist/components/components.utils.js +21 -23
- package/dist/components/index2.js +16 -16
- package/dist/components/mg-action-more.js +9 -13
- package/dist/components/mg-badge2.js +8 -9
- package/dist/components/mg-button2.js +16 -20
- package/dist/components/mg-card2.js +8 -10
- package/dist/components/mg-character-left2.js +1 -2
- package/dist/components/mg-details.js +1 -3
- package/dist/components/mg-divider.js +1 -1
- package/dist/components/mg-form.js +7 -15
- package/dist/components/mg-icon2.js +17 -19
- package/dist/components/mg-illustrated-message.js +1 -2
- package/dist/components/mg-input-checkbox.js +9 -10
- package/dist/components/mg-input-date.js +6 -8
- package/dist/components/mg-input-numeric.js +13 -18
- package/dist/components/mg-input-password.js +5 -6
- package/dist/components/mg-input-radio.js +9 -14
- package/dist/components/mg-input-select2.js +20 -28
- package/dist/components/mg-input-text2.js +14 -23
- package/dist/components/mg-input-textarea.js +12 -13
- package/dist/components/mg-input-title2.js +1 -2
- package/dist/components/mg-input-toggle.js +16 -19
- package/dist/components/mg-item-more.js +18 -27
- package/dist/components/mg-menu-item2.js +17 -26
- package/dist/components/mg-menu2.js +9 -16
- package/dist/components/mg-message.js +11 -14
- package/dist/components/mg-modal.js +7 -11
- package/dist/components/mg-pagination.js +11 -13
- package/dist/components/mg-panel.js +6 -15
- package/dist/components/mg-popover2.js +7 -13
- package/dist/components/mg-skip-links.js +2 -4
- package/dist/components/mg-tabs.js +20 -24
- package/dist/components/mg-tag.js +11 -13
- package/dist/components/mg-tooltip2.js +11 -21
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mg-action-more_31.entry.js +318 -427
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-item-more.entry.js +19 -28
- package/dist/esm/{mg-menu.conf-2cc1bb67.js → mg-menu.conf-9ca023ee.js} +16 -16
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-a56a3157.entry.js → p-97aaca3e.entry.js} +1 -1
- package/dist/mg-components/p-d891e707.entry.js +1 -0
- package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +2 -3
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +5 -9
- package/dist/types/components/atoms/mg-card/mg-card.d.ts +2 -6
- package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts +1 -2
- package/dist/types/components/atoms/mg-divider/mg-divider.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +3 -5
- package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts +1 -2
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +3 -5
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +11 -21
- package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +2 -1
- package/dist/types/components/molecules/inputs/MgInput.d.ts +5 -5
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +5 -6
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +4 -6
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +7 -14
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +3 -4
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +5 -10
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.conf.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +9 -13
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +3 -12
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +4 -5
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +2 -6
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +10 -18
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +21 -31
- package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +3 -10
- package/dist/types/components/molecules/mg-details/mg-details.d.ts +1 -3
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +3 -11
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +1 -2
- package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +2 -7
- package/dist/types/components/molecules/mg-message/mg-message.d.ts +4 -7
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +3 -7
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +5 -9
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +4 -13
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +3 -9
- package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts +2 -4
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +15 -19
- package/dist/types/components.d.ts +22 -34
- package/dist/types/locales/index.d.ts +2 -2
- package/dist/types/utils/behaviors.utils.d.ts +14 -20
- package/dist/types/utils/components.utils.d.ts +18 -20
- package/dist/types/utils/locale.utils.d.ts +14 -14
- package/dist/types/utils/unit.test.utils.d.ts +11 -17
- package/package.json +1 -1
- package/dist/mg-components/p-eb32bb18.entry.js +0 -1
- /package/dist/mg-components/{p-73156ac9.js → p-0d3146d9.js} +0 -0
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[4,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"
|
|
20
|
+
return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[4,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-9e1091ab.js');
|
|
6
|
-
const mgMenu_conf = require('./mg-menu.conf-
|
|
6
|
+
const mgMenu_conf = require('./mg-menu.conf-196151fe.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* MgItemMore type guard
|
|
10
|
-
* @param
|
|
11
|
-
* @returns
|
|
10
|
+
* @param element - element to control type
|
|
11
|
+
* @returns truthy if element is mg-item-more
|
|
12
12
|
*/
|
|
13
13
|
const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
|
|
14
14
|
var OverflowBehaviorElements;
|
|
@@ -25,7 +25,6 @@ class OverflowBehavior {
|
|
|
25
25
|
**********/
|
|
26
26
|
/**
|
|
27
27
|
* Disconnect ResizeObserver
|
|
28
|
-
* @returns {void}
|
|
29
28
|
*/
|
|
30
29
|
this.disconnect = () => {
|
|
31
30
|
this._resizeObserver.disconnect();
|
|
@@ -35,8 +34,7 @@ class OverflowBehavior {
|
|
|
35
34
|
************/
|
|
36
35
|
/**
|
|
37
36
|
* run overflow behavior
|
|
38
|
-
* @param
|
|
39
|
-
* @returns {void}
|
|
37
|
+
* @param width - width of the container. Optional.
|
|
40
38
|
*/
|
|
41
39
|
this.run = (width) => {
|
|
42
40
|
if (this._moreElement === undefined) {
|
|
@@ -59,14 +57,13 @@ class OverflowBehavior {
|
|
|
59
57
|
};
|
|
60
58
|
/**
|
|
61
59
|
* Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
|
|
62
|
-
* @param
|
|
63
|
-
* @returns
|
|
60
|
+
* @param element - element to parse
|
|
61
|
+
* @returns children
|
|
64
62
|
*/
|
|
65
63
|
this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
|
|
66
64
|
/**
|
|
67
65
|
* Update displayed items in container from a given available space
|
|
68
|
-
* @param
|
|
69
|
-
* @returns {void}
|
|
66
|
+
* @param availableWidth - available width in container to display child items
|
|
70
67
|
*/
|
|
71
68
|
this.updateDisplayedItems = (availableWidth) => {
|
|
72
69
|
this.restoreItems();
|
|
@@ -85,10 +82,10 @@ class OverflowBehavior {
|
|
|
85
82
|
};
|
|
86
83
|
/**
|
|
87
84
|
* Utility method to know if item overflow partialy or totaly in the container
|
|
88
|
-
* @param
|
|
89
|
-
* @param
|
|
90
|
-
* @param
|
|
91
|
-
* @returns
|
|
85
|
+
* @param cumulateWidth - previous sibling elements cumulate width + item width
|
|
86
|
+
* @param item - item HTML element
|
|
87
|
+
* @param availableWidth - container available width
|
|
88
|
+
* @returns truthy if element is overflow
|
|
92
89
|
*/
|
|
93
90
|
this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
|
|
94
91
|
if (item.previousElementSibling === null || this.isMoreElement(item))
|
|
@@ -100,15 +97,14 @@ class OverflowBehavior {
|
|
|
100
97
|
};
|
|
101
98
|
/**
|
|
102
99
|
* Utility method to know if a given element is the 'MORE' element
|
|
103
|
-
* @param
|
|
104
|
-
* @returns
|
|
100
|
+
* @param element - element to match with 'MORE' element
|
|
101
|
+
* @returns truthy if element is the 'MORE' element
|
|
105
102
|
*/
|
|
106
103
|
this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
|
|
107
104
|
/**
|
|
108
105
|
* Toggle display item element
|
|
109
|
-
* @param
|
|
110
|
-
* @param
|
|
111
|
-
* @returns {void}
|
|
106
|
+
* @param item - item to control
|
|
107
|
+
* @param isHidden - is item hidden
|
|
112
108
|
*/
|
|
113
109
|
this.toggleItem = (item, isHidden) => {
|
|
114
110
|
const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
|
|
@@ -121,9 +117,8 @@ class OverflowBehavior {
|
|
|
121
117
|
};
|
|
122
118
|
/**
|
|
123
119
|
* Toggle element's hidde attribute
|
|
124
|
-
* @param
|
|
125
|
-
* @param
|
|
126
|
-
* @returns {void}
|
|
120
|
+
* @param element - element to toggle
|
|
121
|
+
* @param isHidden - element is hidden
|
|
127
122
|
*/
|
|
128
123
|
this.toggleElement = (element, isHidden) => {
|
|
129
124
|
if (isHidden)
|
|
@@ -133,7 +128,6 @@ class OverflowBehavior {
|
|
|
133
128
|
};
|
|
134
129
|
/**
|
|
135
130
|
* Remove hidden attributes on all items
|
|
136
|
-
* @returns {void}
|
|
137
131
|
*/
|
|
138
132
|
this.restoreItems = () => {
|
|
139
133
|
[...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
|
|
@@ -165,7 +159,7 @@ const MgItemMore = class {
|
|
|
165
159
|
***********/
|
|
166
160
|
/**
|
|
167
161
|
* render mg-item-more overflow element
|
|
168
|
-
* @returns
|
|
162
|
+
* @returns mg-item-more element
|
|
169
163
|
*/
|
|
170
164
|
this.renderMgMenuItemOverflowElement = () => {
|
|
171
165
|
// create menu items proxy element from item clones
|
|
@@ -214,14 +208,12 @@ const MgItemMore = class {
|
|
|
214
208
|
*************/
|
|
215
209
|
/**
|
|
216
210
|
* Disconnect overflow ResizeObserver
|
|
217
|
-
* @returns {void} run overflow resize obeserver disconnexion
|
|
218
211
|
*/
|
|
219
212
|
disconnectedCallback() {
|
|
220
213
|
this.overflowBehavior.disconnect();
|
|
221
214
|
}
|
|
222
215
|
/**
|
|
223
216
|
* Set variables and validate props
|
|
224
|
-
* @returns {void}
|
|
225
217
|
*/
|
|
226
218
|
componentWillLoad() {
|
|
227
219
|
// init variables
|
|
@@ -235,14 +227,13 @@ const MgItemMore = class {
|
|
|
235
227
|
}
|
|
236
228
|
/**
|
|
237
229
|
* Add overflow behavior
|
|
238
|
-
* @returns {void}
|
|
239
230
|
*/
|
|
240
231
|
componentDidLoad() {
|
|
241
232
|
this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
|
|
242
233
|
}
|
|
243
234
|
/**
|
|
244
235
|
* Render
|
|
245
|
-
* @returns
|
|
236
|
+
* @returns HTML Element
|
|
246
237
|
*/
|
|
247
238
|
render() {
|
|
248
239
|
return (index.h(index.Host, { role: "menuitem", "aria-haspopup": "true" }, index.h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, index.h("mg-icon", { icon: this.icon.icon, slot: "image" }), index.h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
|
|
@@ -152,19 +152,19 @@ const fr = {
|
|
|
152
152
|
|
|
153
153
|
/**
|
|
154
154
|
* Format number to the locale currency
|
|
155
|
-
* @param
|
|
156
|
-
* @param
|
|
157
|
-
* @param
|
|
158
|
-
* @returns
|
|
155
|
+
* @param number - number to format
|
|
156
|
+
* @param locale - locale to apply
|
|
157
|
+
* @param currency - currency to apply
|
|
158
|
+
* @returns formatted currency
|
|
159
159
|
*/
|
|
160
160
|
const localeCurrency = (number, locale, currency) => {
|
|
161
161
|
return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
|
|
162
162
|
};
|
|
163
163
|
/**
|
|
164
164
|
* Format number to locale
|
|
165
|
-
* @param
|
|
166
|
-
* @param
|
|
167
|
-
* @returns
|
|
165
|
+
* @param number - number to format
|
|
166
|
+
* @param locale - locale to apply
|
|
167
|
+
* @returns formatted number
|
|
168
168
|
*/
|
|
169
169
|
const localeNumber = (number, locale) => {
|
|
170
170
|
return new Intl.NumberFormat(locale).format(number);
|
|
@@ -175,9 +175,9 @@ const localeNumber = (number, locale) => {
|
|
|
175
175
|
const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
|
|
176
176
|
/**
|
|
177
177
|
* Locale date format
|
|
178
|
-
* @param
|
|
179
|
-
* @param
|
|
180
|
-
* @returns
|
|
178
|
+
* @param date - date to format
|
|
179
|
+
* @param locale - locale to apply
|
|
180
|
+
* @returns formatted date
|
|
181
181
|
*/
|
|
182
182
|
const localeDate = (date, locale) => {
|
|
183
183
|
if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
|
|
@@ -188,10 +188,10 @@ const localeDate = (date, locale) => {
|
|
|
188
188
|
/**
|
|
189
189
|
* Get locale and messages
|
|
190
190
|
* We load the defined locale but for now we only support the first subtag for messages
|
|
191
|
-
* @param
|
|
192
|
-
* @param
|
|
193
|
-
* @param
|
|
194
|
-
* @returns
|
|
191
|
+
* @param element - element we need to get the language
|
|
192
|
+
* @param messages - messages to use
|
|
193
|
+
* @param defaultLocale - default messages locale
|
|
194
|
+
* @returns messages object
|
|
195
195
|
*/
|
|
196
196
|
const getLocaleMessages = (element, messages, defaultLocale) => {
|
|
197
197
|
// Get local
|
|
@@ -211,8 +211,8 @@ const defaultLocale = 'en';
|
|
|
211
211
|
const messages = { en, fr };
|
|
212
212
|
/**
|
|
213
213
|
* Get Intl object
|
|
214
|
-
* @param
|
|
215
|
-
* @returns
|
|
214
|
+
* @param element - element we need to get the language
|
|
215
|
+
* @returns messages object
|
|
216
216
|
*/
|
|
217
217
|
const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
|
|
218
218
|
|
|
@@ -12,7 +12,7 @@ export class MgBadge {
|
|
|
12
12
|
this.label = undefined;
|
|
13
13
|
this.variant = variants[0];
|
|
14
14
|
this.outline = undefined;
|
|
15
|
-
this.
|
|
15
|
+
this.classCollection = new ClassList(['mg-badge']);
|
|
16
16
|
}
|
|
17
17
|
validateValue(newValue) {
|
|
18
18
|
if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
|
|
@@ -30,20 +30,19 @@ export class MgBadge {
|
|
|
30
30
|
}
|
|
31
31
|
else {
|
|
32
32
|
if (oldValue !== undefined) {
|
|
33
|
-
this.
|
|
33
|
+
this.classCollection.delete(`mg-badge--${oldValue}`);
|
|
34
34
|
}
|
|
35
|
-
this.
|
|
35
|
+
this.classCollection.add(`mg-badge--${newValue}`);
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
validateOutline(newValue) {
|
|
39
39
|
if (newValue)
|
|
40
|
-
this.
|
|
40
|
+
this.classCollection.add(this.classOutline);
|
|
41
41
|
else
|
|
42
|
-
this.
|
|
42
|
+
this.classCollection.delete(this.classOutline);
|
|
43
43
|
}
|
|
44
44
|
/**
|
|
45
45
|
* Check if props are well configured on init
|
|
46
|
-
* @returns {void}
|
|
47
46
|
*/
|
|
48
47
|
componentWillLoad() {
|
|
49
48
|
this.validateValue(this.value);
|
|
@@ -53,10 +52,10 @@ export class MgBadge {
|
|
|
53
52
|
}
|
|
54
53
|
/**
|
|
55
54
|
* Render
|
|
56
|
-
* @returns
|
|
55
|
+
* @returns HTML Element
|
|
57
56
|
*/
|
|
58
57
|
render() {
|
|
59
|
-
return (h("span", { class: this.
|
|
58
|
+
return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
|
|
60
59
|
}
|
|
61
60
|
static get is() { return "mg-badge"; }
|
|
62
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -150,7 +149,7 @@ export class MgBadge {
|
|
|
150
149
|
}
|
|
151
150
|
static get states() {
|
|
152
151
|
return {
|
|
153
|
-
"
|
|
152
|
+
"classCollection": {}
|
|
154
153
|
};
|
|
155
154
|
}
|
|
156
155
|
static get watchers() {
|
|
@@ -12,8 +12,7 @@ export class MgButton {
|
|
|
12
12
|
this.classFullWidth = 'mg-button--full-width';
|
|
13
13
|
/**
|
|
14
14
|
* Trigger actions onClick event
|
|
15
|
-
* @param
|
|
16
|
-
* @returns {void}
|
|
15
|
+
* @param event - click event
|
|
17
16
|
*/
|
|
18
17
|
this.handleClick = (event) => {
|
|
19
18
|
if (this.disabled)
|
|
@@ -26,8 +25,7 @@ export class MgButton {
|
|
|
26
25
|
};
|
|
27
26
|
/**
|
|
28
27
|
* Handle onKeydown event
|
|
29
|
-
* @param
|
|
30
|
-
* @returns {void}
|
|
28
|
+
* @param event - keyboard event
|
|
31
29
|
*/
|
|
32
30
|
this.handleKeydown = (event) => {
|
|
33
31
|
if (!this.disabled && event.key === ' ') {
|
|
@@ -40,8 +38,7 @@ export class MgButton {
|
|
|
40
38
|
};
|
|
41
39
|
/**
|
|
42
40
|
* Handle onKeyup event
|
|
43
|
-
* @param
|
|
44
|
-
* @returns {void}
|
|
41
|
+
* @param event - keyboard event
|
|
45
42
|
*/
|
|
46
43
|
this.handleKeyup = (event) => {
|
|
47
44
|
if (!this.disabled && event.key === ' ') {
|
|
@@ -59,7 +56,7 @@ export class MgButton {
|
|
|
59
56
|
this.isIcon = false;
|
|
60
57
|
this.disableOnClick = false;
|
|
61
58
|
this.loading = false;
|
|
62
|
-
this.
|
|
59
|
+
this.classCollection = new ClassList(['mg-button']);
|
|
63
60
|
}
|
|
64
61
|
validateVariant(newValue, oldValue) {
|
|
65
62
|
if (!variants.includes(newValue)) {
|
|
@@ -67,9 +64,9 @@ export class MgButton {
|
|
|
67
64
|
}
|
|
68
65
|
else {
|
|
69
66
|
if (oldValue !== undefined) {
|
|
70
|
-
this.
|
|
67
|
+
this.classCollection.delete(`mg-button--${oldValue}`);
|
|
71
68
|
}
|
|
72
|
-
this.
|
|
69
|
+
this.classCollection.add(`mg-button--${newValue}`);
|
|
73
70
|
}
|
|
74
71
|
}
|
|
75
72
|
validateFullWidth(newValue) {
|
|
@@ -77,10 +74,10 @@ export class MgButton {
|
|
|
77
74
|
throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
|
|
78
75
|
}
|
|
79
76
|
else if (newValue) {
|
|
80
|
-
this.
|
|
77
|
+
this.classCollection.add(this.classFullWidth);
|
|
81
78
|
}
|
|
82
79
|
else {
|
|
83
|
-
this.
|
|
80
|
+
this.classCollection.delete(this.classFullWidth);
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
disabledHandler(isDisabled) {
|
|
@@ -93,10 +90,10 @@ export class MgButton {
|
|
|
93
90
|
this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
|
|
94
91
|
// apply style
|
|
95
92
|
if (isDisabled) {
|
|
96
|
-
this.
|
|
93
|
+
this.classCollection.add(this.classDisabled);
|
|
97
94
|
}
|
|
98
95
|
else {
|
|
99
|
-
this.
|
|
96
|
+
this.classCollection.delete(this.classDisabled);
|
|
100
97
|
}
|
|
101
98
|
// emit value update
|
|
102
99
|
this.disabledChange.emit(isDisabled);
|
|
@@ -104,21 +101,20 @@ export class MgButton {
|
|
|
104
101
|
loadingHandler(newValue) {
|
|
105
102
|
// we add loading style if it newvalue is true else we remove it
|
|
106
103
|
if (newValue) {
|
|
107
|
-
this.
|
|
104
|
+
this.classCollection.add(this.classLoading);
|
|
108
105
|
}
|
|
109
106
|
else {
|
|
110
|
-
this.
|
|
107
|
+
this.classCollection.delete(this.classLoading);
|
|
111
108
|
}
|
|
112
109
|
}
|
|
113
110
|
/**
|
|
114
111
|
* Check if props are well configured on init
|
|
115
|
-
* @returns {void}
|
|
116
112
|
*/
|
|
117
113
|
componentWillLoad() {
|
|
118
114
|
this.validateVariant(this.variant);
|
|
119
115
|
this.validateFullWidth(this.fullWidth);
|
|
120
116
|
if (this.isIcon) {
|
|
121
|
-
this.
|
|
117
|
+
this.classCollection.add(`mg-button--icon`);
|
|
122
118
|
if (typeof this.label !== 'string' || this.label.trim() === '') {
|
|
123
119
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
124
120
|
}
|
|
@@ -129,10 +125,10 @@ export class MgButton {
|
|
|
129
125
|
}
|
|
130
126
|
/**
|
|
131
127
|
* Render component
|
|
132
|
-
* @returns
|
|
128
|
+
* @returns html element
|
|
133
129
|
*/
|
|
134
130
|
render() {
|
|
135
|
-
return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.
|
|
131
|
+
return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
|
|
136
132
|
}
|
|
137
133
|
static get is() { return "mg-button"; }
|
|
138
134
|
static get encapsulation() { return "shadow"; }
|
|
@@ -320,7 +316,7 @@ export class MgButton {
|
|
|
320
316
|
static get states() {
|
|
321
317
|
return {
|
|
322
318
|
"loading": {},
|
|
323
|
-
"
|
|
319
|
+
"classCollection": {}
|
|
324
320
|
};
|
|
325
321
|
}
|
|
326
322
|
static get events() {
|
|
@@ -11,7 +11,6 @@ export class MgCard {
|
|
|
11
11
|
/**
|
|
12
12
|
* Methode to set default varianStyle props
|
|
13
13
|
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
14
|
-
* @returns {void}
|
|
15
14
|
*/
|
|
16
15
|
this.setDefaultVariantStyle = () => {
|
|
17
16
|
if (this.variantStyle === undefined)
|
|
@@ -19,17 +18,17 @@ export class MgCard {
|
|
|
19
18
|
};
|
|
20
19
|
this.variant = undefined;
|
|
21
20
|
this.variantStyle = undefined;
|
|
22
|
-
this.
|
|
21
|
+
this.classCollection = new ClassList([this.baseClass]);
|
|
23
22
|
}
|
|
24
23
|
validateVariant(newValue, oldValue) {
|
|
25
24
|
if (newValue && !variants.includes(newValue))
|
|
26
25
|
throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
|
|
27
26
|
if (Boolean(newValue)) {
|
|
28
27
|
this.setDefaultVariantStyle();
|
|
29
|
-
this.
|
|
28
|
+
this.classCollection.add(`${this.baseClass}--${newValue}`);
|
|
30
29
|
}
|
|
31
30
|
if (Boolean(oldValue))
|
|
32
|
-
this.
|
|
31
|
+
this.classCollection.delete(`${this.baseClass}--${oldValue}`);
|
|
33
32
|
}
|
|
34
33
|
validateVariantStyle(newValue, oldValue) {
|
|
35
34
|
if (newValue && !variantStyles.includes(newValue))
|
|
@@ -37,16 +36,15 @@ export class MgCard {
|
|
|
37
36
|
else if (Boolean(newValue) && !variants.includes(this.variant))
|
|
38
37
|
throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
|
|
39
38
|
if (Boolean(newValue))
|
|
40
|
-
this.
|
|
39
|
+
this.classCollection.add(`${this.baseClass}--${newValue}`);
|
|
41
40
|
if (Boolean(oldValue))
|
|
42
|
-
this.
|
|
41
|
+
this.classCollection.delete(`${this.baseClass}--${oldValue}`);
|
|
43
42
|
}
|
|
44
43
|
/*************
|
|
45
44
|
* Lifecycle *
|
|
46
45
|
*************/
|
|
47
46
|
/**
|
|
48
47
|
* Check if props are well configured on init
|
|
49
|
-
* @returns {void}
|
|
50
48
|
*/
|
|
51
49
|
componentWillLoad() {
|
|
52
50
|
this.validateVariant(this.variant);
|
|
@@ -54,11 +52,11 @@ export class MgCard {
|
|
|
54
52
|
}
|
|
55
53
|
/**
|
|
56
54
|
* Render
|
|
57
|
-
* @returns
|
|
55
|
+
* @returns HTML Element
|
|
58
56
|
*/
|
|
59
57
|
render() {
|
|
60
58
|
var _a;
|
|
61
|
-
return (h("div", { class: this.
|
|
59
|
+
return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
|
|
62
60
|
}
|
|
63
61
|
static get is() { return "mg-card"; }
|
|
64
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -91,7 +89,7 @@ export class MgCard {
|
|
|
91
89
|
"optional": false,
|
|
92
90
|
"docs": {
|
|
93
91
|
"tags": [],
|
|
94
|
-
"text": "Define variant prop
|
|
92
|
+
"text": "Define variant prop"
|
|
95
93
|
},
|
|
96
94
|
"attribute": "variant",
|
|
97
95
|
"reflect": false
|
|
@@ -113,7 +111,7 @@ export class MgCard {
|
|
|
113
111
|
"optional": false,
|
|
114
112
|
"docs": {
|
|
115
113
|
"tags": [],
|
|
116
|
-
"text": "Define variantStyle prop
|
|
114
|
+
"text": "Define variantStyle prop"
|
|
117
115
|
},
|
|
118
116
|
"attribute": "variant-style",
|
|
119
117
|
"reflect": false
|
|
@@ -122,7 +120,7 @@ export class MgCard {
|
|
|
122
120
|
}
|
|
123
121
|
static get states() {
|
|
124
122
|
return {
|
|
125
|
-
"
|
|
123
|
+
"classCollection": {}
|
|
126
124
|
};
|
|
127
125
|
}
|
|
128
126
|
static get watchers() {
|
|
@@ -16,7 +16,6 @@ export class MgCharacterLeft {
|
|
|
16
16
|
*************/
|
|
17
17
|
/**
|
|
18
18
|
* Check if props are well configured on init
|
|
19
|
-
* @returns {void}
|
|
20
19
|
*/
|
|
21
20
|
componentWillLoad() {
|
|
22
21
|
this.validateMaxlength(this.maxlength);
|
|
@@ -24,7 +23,7 @@ export class MgCharacterLeft {
|
|
|
24
23
|
}
|
|
25
24
|
/**
|
|
26
25
|
* Render component
|
|
27
|
-
* @returns
|
|
26
|
+
* @returns HTML Element
|
|
28
27
|
*/
|
|
29
28
|
render() {
|
|
30
29
|
return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|