@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.
Files changed (131) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mg-action-more_31.cjs.entry.js +318 -427
  3. package/dist/cjs/mg-components.cjs.js +1 -1
  4. package/dist/cjs/mg-item-more.cjs.entry.js +19 -28
  5. package/dist/cjs/{mg-menu.conf-1942ac70.js → mg-menu.conf-196151fe.js} +16 -16
  6. package/dist/collection/components/atoms/mg-badge/mg-badge.js +8 -9
  7. package/dist/collection/components/atoms/mg-button/mg-button.js +16 -20
  8. package/dist/collection/components/atoms/mg-card/mg-card.js +10 -12
  9. package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +1 -2
  10. package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
  11. package/dist/collection/components/atoms/mg-icon/mg-icon.js +17 -19
  12. package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +1 -2
  13. package/dist/collection/components/atoms/mg-tag/mg-tag.js +11 -13
  14. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +11 -21
  15. package/dist/collection/components/molecules/inputs/MgInput.conf.js +4 -1
  16. package/dist/collection/components/molecules/inputs/MgInput.js +26 -18
  17. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +10 -14
  18. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +7 -12
  19. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +14 -22
  20. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +6 -10
  21. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +10 -18
  22. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +21 -32
  23. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +16 -31
  24. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +13 -17
  25. package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +17 -23
  26. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +11 -18
  27. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +20 -29
  28. package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +11 -15
  29. package/dist/collection/components/molecules/mg-details/mg-details.js +1 -3
  30. package/dist/collection/components/molecules/mg-form/mg-form.js +8 -19
  31. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -2
  32. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +4 -7
  33. package/dist/collection/components/molecules/mg-message/mg-message.js +11 -14
  34. package/dist/collection/components/molecules/mg-modal/mg-modal.js +7 -11
  35. package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +11 -13
  36. package/dist/collection/components/molecules/mg-panel/mg-panel.js +6 -15
  37. package/dist/collection/components/molecules/mg-popover/mg-popover.js +7 -13
  38. package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +2 -4
  39. package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +20 -24
  40. package/dist/collection/locales/index.js +2 -2
  41. package/dist/collection/utils/behaviors.utils.js +16 -22
  42. package/dist/collection/utils/components.utils.js +21 -23
  43. package/dist/collection/utils/locale.utils.js +14 -14
  44. package/dist/collection/utils/unit.test.utils.js +7 -10
  45. package/dist/components/MgInput.js +30 -18
  46. package/dist/components/components.utils.js +21 -23
  47. package/dist/components/index2.js +16 -16
  48. package/dist/components/mg-action-more.js +9 -13
  49. package/dist/components/mg-badge2.js +8 -9
  50. package/dist/components/mg-button2.js +16 -20
  51. package/dist/components/mg-card2.js +8 -10
  52. package/dist/components/mg-character-left2.js +1 -2
  53. package/dist/components/mg-details.js +1 -3
  54. package/dist/components/mg-divider.js +1 -1
  55. package/dist/components/mg-form.js +7 -15
  56. package/dist/components/mg-icon2.js +17 -19
  57. package/dist/components/mg-illustrated-message.js +1 -2
  58. package/dist/components/mg-input-checkbox.js +9 -10
  59. package/dist/components/mg-input-date.js +6 -8
  60. package/dist/components/mg-input-numeric.js +13 -18
  61. package/dist/components/mg-input-password.js +5 -6
  62. package/dist/components/mg-input-radio.js +9 -14
  63. package/dist/components/mg-input-select2.js +20 -28
  64. package/dist/components/mg-input-text2.js +14 -23
  65. package/dist/components/mg-input-textarea.js +12 -13
  66. package/dist/components/mg-input-title2.js +1 -2
  67. package/dist/components/mg-input-toggle.js +16 -19
  68. package/dist/components/mg-item-more.js +18 -27
  69. package/dist/components/mg-menu-item2.js +17 -26
  70. package/dist/components/mg-menu2.js +9 -16
  71. package/dist/components/mg-message.js +11 -14
  72. package/dist/components/mg-modal.js +7 -11
  73. package/dist/components/mg-pagination.js +11 -13
  74. package/dist/components/mg-panel.js +6 -15
  75. package/dist/components/mg-popover2.js +7 -13
  76. package/dist/components/mg-skip-links.js +2 -4
  77. package/dist/components/mg-tabs.js +20 -24
  78. package/dist/components/mg-tag.js +11 -13
  79. package/dist/components/mg-tooltip2.js +11 -21
  80. package/dist/esm/loader.js +1 -1
  81. package/dist/esm/mg-action-more_31.entry.js +318 -427
  82. package/dist/esm/mg-components.js +1 -1
  83. package/dist/esm/mg-item-more.entry.js +19 -28
  84. package/dist/esm/{mg-menu.conf-2cc1bb67.js → mg-menu.conf-9ca023ee.js} +16 -16
  85. package/dist/mg-components/mg-components.esm.js +1 -1
  86. package/dist/mg-components/{p-a56a3157.entry.js → p-97aaca3e.entry.js} +1 -1
  87. package/dist/mg-components/p-d891e707.entry.js +1 -0
  88. package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +2 -3
  89. package/dist/types/components/atoms/mg-button/mg-button.d.ts +5 -9
  90. package/dist/types/components/atoms/mg-card/mg-card.d.ts +2 -6
  91. package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts +1 -2
  92. package/dist/types/components/atoms/mg-divider/mg-divider.d.ts +1 -1
  93. package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +3 -5
  94. package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts +1 -2
  95. package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +3 -5
  96. package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +11 -21
  97. package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +2 -1
  98. package/dist/types/components/molecules/inputs/MgInput.d.ts +5 -5
  99. package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +5 -6
  100. package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +4 -6
  101. package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +7 -14
  102. package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +3 -4
  103. package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +5 -10
  104. package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.conf.d.ts +2 -2
  105. package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +9 -13
  106. package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +3 -12
  107. package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +4 -5
  108. package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +2 -6
  109. package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +10 -18
  110. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +21 -31
  111. package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +3 -10
  112. package/dist/types/components/molecules/mg-details/mg-details.d.ts +1 -3
  113. package/dist/types/components/molecules/mg-form/mg-form.d.ts +3 -11
  114. package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +1 -2
  115. package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +2 -7
  116. package/dist/types/components/molecules/mg-message/mg-message.d.ts +4 -7
  117. package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +3 -7
  118. package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +5 -9
  119. package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +4 -13
  120. package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +3 -9
  121. package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts +2 -4
  122. package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +15 -19
  123. package/dist/types/components.d.ts +22 -34
  124. package/dist/types/locales/index.d.ts +2 -2
  125. package/dist/types/utils/behaviors.utils.d.ts +14 -20
  126. package/dist/types/utils/components.utils.d.ts +18 -20
  127. package/dist/types/utils/locale.utils.d.ts +14 -14
  128. package/dist/types/utils/unit.test.utils.d.ts +11 -17
  129. package/package.json +1 -1
  130. package/dist/mg-components/p-eb32bb18.entry.js +0 -1
  131. /package/dist/mg-components/{p-73156ac9.js → p-0d3146d9.js} +0 -0
@@ -3,8 +3,8 @@ import { createID, ClassList, allItemsAreString } from '../../../utils/component
3
3
  import { sizes, Status } from './mg-tabs.conf';
4
4
  /**
5
5
  * type TabItem validation function
6
- * @param {TabItem} tab tab item
7
- * @returns {boolean} tab item type is valid
6
+ * @param tab - tab item
7
+ * @returns tab item type is valid
8
8
  */
9
9
  const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
10
10
  export class MgTabs {
@@ -18,32 +18,32 @@ export class MgTabs {
18
18
  this.startIndex = 1;
19
19
  /**
20
20
  * Method to know if given tab has the given status
21
- * @param {TabItem} tab item tab key to set to ACTIVE status
22
- * @param {Status} status status to valide
23
- * @returns {boolean} status comparaison
21
+ * @param tab - item tab key to set to ACTIVE status
22
+ * @param status - status to valide
23
+ * @returns status comparaison
24
24
  */
25
25
  this.tabHasStatus = (tab, status) => tab.status === status;
26
26
  /**
27
27
  * Method to get element id from index
28
- * @param {string} element to get id
29
- * @param {number} index to generate id
30
- * @returns {string} generated element id
28
+ * @param element - to get id
29
+ * @param index - to generate id
30
+ * @returns generated element id
31
31
  */
32
32
  this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
33
33
  /**
34
34
  * Method to get tab item index
35
- * @param {number} index to get
36
- * @returns {number} index
35
+ * @param index - to get
36
+ * @returns index
37
37
  */
38
38
  this.getTabItemIndex = (index) => index + this.startIndex;
39
39
  /**
40
40
  * Method to get the active-tab value
41
- * @returns {number} of the active-tab
41
+ * @returns of the active-tab
42
42
  */
43
43
  this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
44
44
  /**
45
45
  * Handle click events on tabs
46
- * @param {MouseEvent} event mouse event
46
+ * @param event - mouse event
47
47
  */
48
48
  this.handleClick = (event) => {
49
49
  const tabId = event.currentTarget.dataset.index;
@@ -58,14 +58,13 @@ export class MgTabs {
58
58
  };
59
59
  /**
60
60
  * get navigation button class from given status
61
- * @param {Status} status button tab status
62
- * @returns {string} button class/selector variant
61
+ * @param status - button tab status
62
+ * @returns button class/selector variant
63
63
  */
64
64
  this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
65
65
  /**
66
66
  * Handle keyboard event on tabs
67
- * @param {MouseEvent} event mouse event
68
- * @returns {void}
67
+ * @param event - mouse event
69
68
  */
70
69
  this.handleKeydown = (event) => {
71
70
  const parent = event.target.parentElement;
@@ -103,7 +102,6 @@ export class MgTabs {
103
102
  };
104
103
  /**
105
104
  * Method to reset focus behavior
106
- * @returns {void}
107
105
  */
108
106
  this.resetFocus = () => {
109
107
  // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
@@ -128,7 +126,7 @@ export class MgTabs {
128
126
  this.items = undefined;
129
127
  this.activeTab = undefined;
130
128
  this.tabs = [];
131
- this.classList = new ClassList(['mg-tabs']);
129
+ this.classCollection = new ClassList(['mg-tabs']);
132
130
  }
133
131
  validateLabel(newValue) {
134
132
  if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -139,7 +137,7 @@ export class MgTabs {
139
137
  if (!sizes.includes(newValue)) {
140
138
  throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
141
139
  }
142
- this.classList.add(`mg-tabs--size-${this.size}`);
140
+ this.classCollection.add(`mg-tabs--size-${this.size}`);
143
141
  }
144
142
  validateItems(newValue) {
145
143
  // String array
@@ -182,7 +180,6 @@ export class MgTabs {
182
180
  *************/
183
181
  /**
184
182
  * Check if component props are well configured on init
185
- * @returns {void}
186
183
  */
187
184
  componentWillLoad() {
188
185
  // Check tabs format
@@ -194,7 +191,6 @@ export class MgTabs {
194
191
  }
195
192
  /**
196
193
  * add listners
197
- * @returns {void}
198
194
  */
199
195
  componentDidLoad() {
200
196
  document.addEventListener('click', (event) => {
@@ -204,10 +200,10 @@ export class MgTabs {
204
200
  }
205
201
  /**
206
202
  * Render
207
- * @returns {HTMLElement} HTML Element
203
+ * @returns HTML Element
208
204
  */
209
205
  render() {
210
- return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
206
+ return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
211
207
  [`${this.buttonTabBaseClass}`]: true,
212
208
  [`${this.buttonTabBaseClass}--horizontal`]: true,
213
209
  [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -329,7 +325,7 @@ export class MgTabs {
329
325
  static get states() {
330
326
  return {
331
327
  "tabs": {},
332
- "classList": {}
328
+ "classCollection": {}
333
329
  };
334
330
  }
335
331
  static get events() {
@@ -5,7 +5,7 @@ const defaultLocale = 'en';
5
5
  const messages = { en, fr };
6
6
  /**
7
7
  * Get Intl object
8
- * @param {HTMLElement} element element we need to get the language
9
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
8
+ * @param element - element we need to get the language
9
+ * @returns messages object
10
10
  */
11
11
  export const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * MgItemMore type guard
3
- * @param {HTMLElement} element element to control type
4
- * @returns {boolean} truthy if element is mg-item-more
3
+ * @param element - element to control type
4
+ * @returns truthy if element is mg-item-more
5
5
  */
6
6
  const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
7
7
  export var OverflowBehaviorElements;
@@ -18,7 +18,6 @@ export class OverflowBehavior {
18
18
  **********/
19
19
  /**
20
20
  * Disconnect ResizeObserver
21
- * @returns {void}
22
21
  */
23
22
  this.disconnect = () => {
24
23
  this._resizeObserver.disconnect();
@@ -28,8 +27,7 @@ export class OverflowBehavior {
28
27
  ************/
29
28
  /**
30
29
  * run overflow behavior
31
- * @param {number} width width of the container. Optional.
32
- * @returns {void}
30
+ * @param width - width of the container. Optional.
33
31
  */
34
32
  this.run = (width) => {
35
33
  if (this._moreElement === undefined) {
@@ -52,14 +50,13 @@ export class OverflowBehavior {
52
50
  };
53
51
  /**
54
52
  * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
55
- * @param {Element} element element to parse
56
- * @returns {Element[]} children
53
+ * @param element - element to parse
54
+ * @returns children
57
55
  */
58
56
  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)); };
59
57
  /**
60
58
  * Update displayed items in container from a given available space
61
- * @param {number} availableWidth available width in container to display child items
62
- * @returns {void}
59
+ * @param availableWidth - available width in container to display child items
63
60
  */
64
61
  this.updateDisplayedItems = (availableWidth) => {
65
62
  this.restoreItems();
@@ -78,10 +75,10 @@ export class OverflowBehavior {
78
75
  };
79
76
  /**
80
77
  * Utility method to know if item overflow partialy or totaly in the container
81
- * @param {number} cumulateWidth previous sibling elements cumulate width + item width
82
- * @param {HTMLElement} item item HTML element
83
- * @param {number} availableWidth container available width
84
- * @returns {boolean} truthy if element is overflow
78
+ * @param cumulateWidth - previous sibling elements cumulate width + item width
79
+ * @param item - item HTML element
80
+ * @param availableWidth - container available width
81
+ * @returns truthy if element is overflow
85
82
  */
86
83
  this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
87
84
  if (item.previousElementSibling === null || this.isMoreElement(item))
@@ -93,15 +90,14 @@ export class OverflowBehavior {
93
90
  };
94
91
  /**
95
92
  * Utility method to know if a given element is the 'MORE' element
96
- * @param {Element} element element to match with 'MORE' element
97
- * @returns {boolean} truthy if element is the 'MORE' element
93
+ * @param element - element to match with 'MORE' element
94
+ * @returns truthy if element is the 'MORE' element
98
95
  */
99
96
  this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
100
97
  /**
101
98
  * Toggle display item element
102
- * @param {HTMLElement} item item to control
103
- * @param {boolean} isHidden is item hidden
104
- * @returns {void}
99
+ * @param item - item to control
100
+ * @param isHidden - is item hidden
105
101
  */
106
102
  this.toggleItem = (item, isHidden) => {
107
103
  const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
@@ -114,9 +110,8 @@ export class OverflowBehavior {
114
110
  };
115
111
  /**
116
112
  * Toggle element's hidde attribute
117
- * @param {Element} element element to toggle
118
- * @param {boolean} isHidden element is hidden
119
- * @returns {void}
113
+ * @param element - element to toggle
114
+ * @param isHidden - element is hidden
120
115
  */
121
116
  this.toggleElement = (element, isHidden) => {
122
117
  if (isHidden)
@@ -126,7 +121,6 @@ export class OverflowBehavior {
126
121
  };
127
122
  /**
128
123
  * Remove hidden attributes on all items
129
- * @returns {void}
130
124
  */
131
125
  this.restoreItems = () => {
132
126
  [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * Create random ID
3
- * @param {string} prefix add prefix to created ID
4
- * @param {number} length ID length
5
- * @returns {string} ID
3
+ * @param prefix - add prefix to created ID
4
+ * @param length - ID length
5
+ * @returns ID
6
6
  */
7
7
  export const createID = (prefix = '', length = 10) => {
8
8
  let ID = '';
@@ -21,8 +21,7 @@ export class ClassList {
21
21
  constructor(classlist = []) {
22
22
  /**
23
23
  * Add class
24
- * @param {string} className class name to add
25
- * @returns {void}
24
+ * @param className - class name to add
26
25
  */
27
26
  this.add = (className) => {
28
27
  if (!this.has(className)) {
@@ -31,8 +30,7 @@ export class ClassList {
31
30
  };
32
31
  /**
33
32
  * Delete class
34
- * @param {string} className class name to delete
35
- * @returns {void}
33
+ * @param className - class name to delete
36
34
  */
37
35
  this.delete = (className) => {
38
36
  const index = this.classes.indexOf(className);
@@ -42,15 +40,15 @@ export class ClassList {
42
40
  };
43
41
  /**
44
42
  * Check if class exist in list
45
- * @param {string} className class name to check
46
- * @returns {boolean} class name is in the list
43
+ * @param className - class name to check
44
+ * @returns class name is in the list
47
45
  */
48
46
  this.has = (className) => {
49
47
  return this.classes.includes(className);
50
48
  };
51
49
  /**
52
50
  * Join classes seperated by spaces
53
- * @returns {string} joined values
51
+ * @returns joined values
54
52
  */
55
53
  this.join = () => {
56
54
  return this.classes.join(' ');
@@ -60,15 +58,15 @@ export class ClassList {
60
58
  }
61
59
  /**
62
60
  * Check if all items are string
63
- * @param {unknown} items items to check
64
- * @returns {boolean} all items are string
61
+ * @param items - items to check
62
+ * @returns all items are string
65
63
  */
66
64
  export const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
67
65
  /**
68
66
  * Check if element is a heading
69
- * @param {Element} element slotted element
70
- * @param {string[]} tagNames allowed tag names list
71
- * @returns {boolean} element is a heading
67
+ * @param element - slotted element
68
+ * @param tagNames - allowed tag names list
69
+ * @returns element is a heading
72
70
  */
73
71
  export const isTagName = (element, tagNames) => {
74
72
  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
@@ -79,8 +77,8 @@ export const isTagName = (element, tagNames) => {
79
77
  export const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
80
78
  /**
81
79
  * Get windows
82
- * @param {Window} localWindow the window we are lookink for other windows
83
- * @returns {Window[]} The list of windows found
80
+ * @param localWindow - the window we are lookink for other windows
81
+ * @returns The list of windows found
84
82
  */
85
83
  export const getWindows = (localWindow) => {
86
84
  const parentWindows = getParentWindows(localWindow);
@@ -89,9 +87,9 @@ export const getWindows = (localWindow) => {
89
87
  };
90
88
  /**
91
89
  * Get parent windows
92
- * @param {Window} localWindow the window we are lookink for parents
93
- * @param {Window[]} windows The list of allready found windows
94
- * @returns {Window[]} The list of windows found
90
+ * @param localWindow - the window we are lookink for parents
91
+ * @param windows - The list of allready found windows
92
+ * @returns The list of windows found
95
93
  */
96
94
  export const getParentWindows = (localWindow, windows = []) => {
97
95
  // Check if is in iframe
@@ -111,9 +109,9 @@ export const getParentWindows = (localWindow, windows = []) => {
111
109
  };
112
110
  /**
113
111
  * Get child windows
114
- * @param {Window} localWindow the window we are lookink for children
115
- * @param {Window[]} windows The list of allready found windows
116
- * @returns {Window[]} The list of windows found
112
+ * @param localWindow - the window we are lookink for children
113
+ * @param windows - The list of allready found windows
114
+ * @returns The list of windows found
117
115
  */
118
116
  const getChildWindows = (localWindow, windows = []) => {
119
117
  if (localWindow.frames.length > 0) {
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Format number to the locale currency
3
- * @param {number} number number to format
4
- * @param {string} locale locale to apply
5
- * @param {string} currency currency to apply
6
- * @returns {string} formatted currency
3
+ * @param number - number to format
4
+ * @param locale - locale to apply
5
+ * @param currency - currency to apply
6
+ * @returns formatted currency
7
7
  */
8
8
  export const localeCurrency = (number, locale, currency) => {
9
9
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
10
10
  };
11
11
  /**
12
12
  * Format number to locale
13
- * @param {number} number number to format
14
- * @param {string} locale locale to apply
15
- * @returns {string} formatted number
13
+ * @param number - number to format
14
+ * @param locale - locale to apply
15
+ * @returns formatted number
16
16
  */
17
17
  export const localeNumber = (number, locale) => {
18
18
  return new Intl.NumberFormat(locale).format(number);
@@ -23,9 +23,9 @@ export const localeNumber = (number, locale) => {
23
23
  export const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
24
24
  /**
25
25
  * Locale date format
26
- * @param {string} date date to format
27
- * @param {string} locale locale to apply
28
- * @returns {string} formatted date
26
+ * @param date - date to format
27
+ * @param locale - locale to apply
28
+ * @returns formatted date
29
29
  */
30
30
  export const localeDate = (date, locale) => {
31
31
  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
@@ -36,10 +36,10 @@ export const localeDate = (date, locale) => {
36
36
  /**
37
37
  * Get locale and messages
38
38
  * We load the defined locale but for now we only support the first subtag for messages
39
- * @param {HTMLElement} element element we need to get the language
40
- * @param {unknown} messages messages to use
41
- * @param {string} defaultLocale default messages locale
42
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
39
+ * @param element - element we need to get the language
40
+ * @param messages - messages to use
41
+ * @param defaultLocale - default messages locale
42
+ * @returns messages object
43
43
  */
44
44
  export const getLocaleMessages = (element, messages, defaultLocale) => {
45
45
  // Get local
@@ -1,8 +1,8 @@
1
1
  import { MockCustomEvent } from '@stencil/core/mock-doc';
2
2
  /**
3
3
  * Clone Deep function
4
- * @param {unknown} obj object to clone
5
- * @returns {unknown} cloned json
4
+ * @param obj - object to clone
5
+ * @returns cloned json
6
6
  */
7
7
  export const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
8
8
  export const setupMutationObserverMock = ({ disconnect, observe, takeRecords }) => {
@@ -42,11 +42,11 @@ export const setupResizeObserverMock = ({ disconnect, observe }) => {
42
42
  };
43
43
  /**
44
44
  * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
45
- * @returns {void}
46
45
  * @example
47
46
  * ```
48
47
  * setupSubmitEventMock();
49
48
  * ```
49
+ * @returns custom event mock
50
50
  */
51
51
  export const setupSubmitEventMock = () => {
52
52
  class SubmitEvent extends MockCustomEvent {
@@ -65,10 +65,9 @@ export const setupSubmitEventMock = () => {
65
65
  };
66
66
  /**
67
67
  * force popover id when component use randomed identifier
68
- * @param {Element} component element wich include mg-popover
69
- * @param {string} id new fixed id
70
- * @param {string} interactiveElement element where attribute 'aria-controls' is set
71
- * @returns {void}
68
+ * @param component - element wich include mg-popover
69
+ * @param id - new fixed id
70
+ * @param interactiveElement - element where attribute 'aria-controls' is set
72
71
  */
73
72
  export const forcePopoverId = (component, id, interactiveElement = 'button') => {
74
73
  const popover = component.shadowRoot.querySelector('mg-popover');
@@ -79,11 +78,10 @@ export const forcePopoverId = (component, id, interactiveElement = 'button') =>
79
78
  };
80
79
  /**
81
80
  * fix popper console.error in test
82
- * it is generated in @popperjs/core/dist/cjs/popper.js l.1859
81
+ * it is generated in `@popperjs/core/dist/cjs/popper.js l.1859`
83
82
  * this is due to internal function isHTMLElement(), so we can not mock it directly.
84
83
  * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
85
84
  * so we only override the console.error side effect for this error
86
- * @returns {void}
87
85
  */
88
86
  export const mockConsoleError = () => {
89
87
  jest.spyOn(console, 'error').mockImplementation(error => {
@@ -95,7 +93,6 @@ export const mockConsoleError = () => {
95
93
  /**
96
94
  * Add missing window.frames property to test context
97
95
  * usefull for component with iframe listeners, ex: mg-popover
98
- * @returns {void}
99
96
  */
100
97
  export const mockWindowFrames = () => {
101
98
  Object.defineProperty(window, 'frames', {
@@ -1,11 +1,16 @@
1
1
  import { h } from '@stencil/core/internal/client';
2
2
 
3
+ /**
4
+ * Possible input width
5
+ */
6
+ const widths = [2, 4, 16, 'full'];
7
+
3
8
  /**
4
9
  * Apply in all input child node the aria-describedby attribute
5
- * @param {VNode[]} children Represent scoped elements
6
- * @param {Set<string>} ariaDescribedbyIDs List of IDs
7
- * @param {FunctionalUtilities} utils Stencil.js utils
8
- * @returns {VNode[]} Children with aria-describedby attribute
10
+ * @param children - Represent scoped elements
11
+ * @param ariaDescribedbyIDs - List of IDs
12
+ * @param utils - Stencil.js utils
13
+ * @returns Children with aria-describedby attribute
9
14
  */
10
15
  const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
11
16
  if (['input', 'select', 'textarea'].includes(child.vtag)) {
@@ -18,29 +23,36 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
18
23
  });
19
24
  /**
20
25
  * Add classes based on props
21
- * @param {MgInputProps} props MgInput Interface Props
26
+ * @param props - MgInput Interface Props
22
27
  */
23
28
  const manageClasses = (props) => {
24
- props.classList.add('mg-input');
29
+ props.classCollection.add('mg-input');
25
30
  if (props.labelOnTop)
26
- props.classList.add('mg-input--label-on-top');
31
+ props.classCollection.add('mg-input--label-on-top');
32
+ else
33
+ props.classCollection.delete('mg-input--label-on-top');
27
34
  if (props.readonly)
28
- props.classList.add('mg-input--readonly');
35
+ props.classCollection.add('mg-input--readonly');
36
+ else
37
+ props.classCollection.delete('mg-input--readonly');
38
+ widths.forEach(width => {
39
+ props.classCollection.delete(`mg-input--width-${width}`);
40
+ });
29
41
  if (props.mgWidth !== undefined)
30
- props.classList.add(`mg-input--width-${props.mgWidth}`);
42
+ props.classCollection.add(`mg-input--width-${props.mgWidth}`);
31
43
  };
32
44
  /**
33
45
  * Get tagname
34
- * @param {boolean} isFieldset is fieldset
35
- * @returns {string} tag name
46
+ * @param isFieldset - is fieldset
47
+ * @returns tag name
36
48
  */
37
49
  const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
38
50
  /**
39
51
  * Get input template
40
- * @param {MgInputProps} props MgInput Interface Props
41
- * @param {VNode[]} children Represent scoped elements
42
- * @param {FunctionalUtilities} utils Stencil.js utils
43
- * @returns {VNode[]} input template
52
+ * @param props - MgInput Interface Props
53
+ * @param children - Represent scoped elements
54
+ * @param utils - Stencil.js utils
55
+ * @returns input template
44
56
  */
45
57
  const MgInput = (props, children, utils) => {
46
58
  /**
@@ -96,17 +108,17 @@ const MgInput = (props, children, utils) => {
96
108
  const TagName = getTagName(props.isFieldset);
97
109
  /**
98
110
  * Get tooltip node
99
- * @returns {VNode[]} mg-tooltip
111
+ * @returns mg-tooltip
100
112
  */
101
113
  const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
102
114
  h("mg-icon", { icon: "info-circle" })));
103
115
  /**
104
116
  * Get input title (label) node
105
117
  * Display asterisk only if not disabled and not readonly
106
- * @returns {VNode[]} mg-input-title
118
+ * @returns mg-input-title
107
119
  */
108
120
  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
109
- return (h(TagName, { class: props.classList.join() },
121
+ return (h(TagName, { class: props.classCollection.join() },
110
122
  props.labelOnTop ? (h("div", { class: "mg-input__title" },
111
123
  getInputTitle(),
112
124
  !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * Create random ID
3
- * @param {string} prefix add prefix to created ID
4
- * @param {number} length ID length
5
- * @returns {string} ID
3
+ * @param prefix - add prefix to created ID
4
+ * @param length - ID length
5
+ * @returns ID
6
6
  */
7
7
  const createID = (prefix = '', length = 10) => {
8
8
  let ID = '';
@@ -21,8 +21,7 @@ class ClassList {
21
21
  constructor(classlist = []) {
22
22
  /**
23
23
  * Add class
24
- * @param {string} className class name to add
25
- * @returns {void}
24
+ * @param className - class name to add
26
25
  */
27
26
  this.add = (className) => {
28
27
  if (!this.has(className)) {
@@ -31,8 +30,7 @@ class ClassList {
31
30
  };
32
31
  /**
33
32
  * Delete class
34
- * @param {string} className class name to delete
35
- * @returns {void}
33
+ * @param className - class name to delete
36
34
  */
37
35
  this.delete = (className) => {
38
36
  const index = this.classes.indexOf(className);
@@ -42,15 +40,15 @@ class ClassList {
42
40
  };
43
41
  /**
44
42
  * Check if class exist in list
45
- * @param {string} className class name to check
46
- * @returns {boolean} class name is in the list
43
+ * @param className - class name to check
44
+ * @returns class name is in the list
47
45
  */
48
46
  this.has = (className) => {
49
47
  return this.classes.includes(className);
50
48
  };
51
49
  /**
52
50
  * Join classes seperated by spaces
53
- * @returns {string} joined values
51
+ * @returns joined values
54
52
  */
55
53
  this.join = () => {
56
54
  return this.classes.join(' ');
@@ -60,15 +58,15 @@ class ClassList {
60
58
  }
61
59
  /**
62
60
  * Check if all items are string
63
- * @param {unknown} items items to check
64
- * @returns {boolean} all items are string
61
+ * @param items - items to check
62
+ * @returns all items are string
65
63
  */
66
64
  const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
67
65
  /**
68
66
  * Check if element is a heading
69
- * @param {Element} element slotted element
70
- * @param {string[]} tagNames allowed tag names list
71
- * @returns {boolean} element is a heading
67
+ * @param element - slotted element
68
+ * @param tagNames - allowed tag names list
69
+ * @returns element is a heading
72
70
  */
73
71
  const isTagName = (element, tagNames) => {
74
72
  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
@@ -79,8 +77,8 @@ const isTagName = (element, tagNames) => {
79
77
  const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
80
78
  /**
81
79
  * Get windows
82
- * @param {Window} localWindow the window we are lookink for other windows
83
- * @returns {Window[]} The list of windows found
80
+ * @param localWindow - the window we are lookink for other windows
81
+ * @returns The list of windows found
84
82
  */
85
83
  const getWindows = (localWindow) => {
86
84
  const parentWindows = getParentWindows(localWindow);
@@ -89,9 +87,9 @@ const getWindows = (localWindow) => {
89
87
  };
90
88
  /**
91
89
  * Get parent windows
92
- * @param {Window} localWindow the window we are lookink for parents
93
- * @param {Window[]} windows The list of allready found windows
94
- * @returns {Window[]} The list of windows found
90
+ * @param localWindow - the window we are lookink for parents
91
+ * @param windows - The list of allready found windows
92
+ * @returns The list of windows found
95
93
  */
96
94
  const getParentWindows = (localWindow, windows = []) => {
97
95
  // Check if is in iframe
@@ -111,9 +109,9 @@ const getParentWindows = (localWindow, windows = []) => {
111
109
  };
112
110
  /**
113
111
  * Get child windows
114
- * @param {Window} localWindow the window we are lookink for children
115
- * @param {Window[]} windows The list of allready found windows
116
- * @returns {Window[]} The list of windows found
112
+ * @param localWindow - the window we are lookink for children
113
+ * @param windows - The list of allready found windows
114
+ * @returns The list of windows found
117
115
  */
118
116
  const getChildWindows = (localWindow, windows = []) => {
119
117
  if (localWindow.frames.length > 0) {