@mgdis/mg-components 6.20.0 → 6.22.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.
Files changed (205) hide show
  1. package/dist/cjs/{index-TUElr4Wv.js → index-BxB20_Vw.js} +54 -0
  2. package/dist/cjs/{index-Bp6wZzau.js → index-C2viYwrR.js} +1761 -80
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/mg-action-more_37.cjs.entry.js +761 -371
  5. package/dist/cjs/mg-alert.cjs.entry.js +17 -9
  6. package/dist/cjs/mg-breadcrumb.cjs.entry.js +63 -0
  7. package/dist/cjs/mg-components.cjs.js +3 -3
  8. package/dist/cjs/mg-fieldset.cjs.entry.js +24 -7
  9. package/dist/cjs/mg-input-combobox.cjs.entry.js +49 -19
  10. package/dist/cjs/mg-input-file.cjs.entry.js +384 -0
  11. package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +40096 -15821
  12. package/dist/cjs/{mg-input.conf-D7jmj_lh.js → mg-input.conf-BNpeATnq.js} +7 -0
  13. package/dist/cjs/mg-loader.cjs.entry.js +8 -6
  14. package/dist/cjs/mg-progress.cjs.entry.js +19 -9
  15. package/dist/collection/assets/icons/index.js +1 -1
  16. package/dist/collection/collection-manifest.json +5 -3
  17. package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +1 -1
  18. package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +1 -1
  19. package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
  20. package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
  21. package/dist/collection/components/atoms/mg-icon/mg-icon.js +2 -2
  22. package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
  23. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
  24. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
  25. package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +6 -0
  26. package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +1 -1
  27. package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +2 -2
  28. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +2 -2
  29. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
  30. package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +1 -1
  31. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
  32. package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js +877 -0
  33. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +1 -1
  34. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +2 -2
  35. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
  36. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss +212 -0
  37. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.js +1 -0
  38. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js +300 -94
  39. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.js +29 -0
  40. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +163 -53
  41. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
  42. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +2 -2
  43. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
  44. package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
  45. package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +3 -36
  46. package/dist/collection/components/molecules/menus/mg-menu/mg-menu.conf.js +0 -4
  47. package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +21 -43
  48. package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +65 -38
  49. package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +2 -2
  50. package/dist/collection/components/molecules/mg-alert/mg-alert.js +1 -1
  51. package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.js +1 -0
  52. package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.js +92 -0
  53. package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
  54. package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +12 -3
  55. package/dist/collection/components/molecules/mg-form/mg-form.js +12 -2
  56. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -1
  57. package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
  58. package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
  59. package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
  60. package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
  61. package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
  62. package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
  63. package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
  64. package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
  65. package/dist/collection/components/molecules/mg-table/mg-table.js +37 -0
  66. package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js +0 -4
  67. package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +13 -33
  68. package/dist/collection/locales/en/messages.json +14 -0
  69. package/dist/collection/locales/fr/messages.json +14 -0
  70. package/dist/components/events.utils.js +1 -23
  71. package/dist/components/index.d.ts +2 -0
  72. package/dist/components/index.js +1 -1
  73. package/dist/components/index2.js +1 -408
  74. package/dist/components/index3.js +1 -476
  75. package/dist/components/mg-action-more.js +1 -254
  76. package/dist/components/mg-alert.js +1 -224
  77. package/dist/components/mg-badge.js +1 -6
  78. package/dist/components/mg-badge2.js +1 -113
  79. package/dist/components/mg-breadcrumb.d.ts +11 -0
  80. package/dist/components/mg-breadcrumb.js +1 -0
  81. package/dist/components/mg-button.js +1 -6
  82. package/dist/components/mg-button2.js +1 -275
  83. package/dist/components/mg-card.js +1 -6
  84. package/dist/components/mg-card2.js +1 -92
  85. package/dist/components/mg-character-left.js +1 -6
  86. package/dist/components/mg-character-left2.js +1 -75
  87. package/dist/components/mg-details.js +1 -104
  88. package/dist/components/mg-divider.js +1 -6
  89. package/dist/components/mg-divider2.js +1 -49
  90. package/dist/components/mg-fieldset.js +1 -209
  91. package/dist/components/mg-form.js +1 -302
  92. package/dist/components/mg-icon.js +1 -6
  93. package/dist/components/mg-icon2.js +1 -188
  94. package/dist/components/mg-illustrated-message.js +1 -129
  95. package/dist/components/mg-input-checkbox-paginated.js +1 -6
  96. package/dist/components/mg-input-checkbox-paginated2.js +1 -135
  97. package/dist/components/mg-input-checkbox.js +1 -762
  98. package/dist/components/mg-input-combobox.js +1 -940
  99. package/dist/components/mg-input-date.js +1 -463
  100. package/dist/components/mg-input-file.d.ts +11 -0
  101. package/dist/components/mg-input-file.js +1 -0
  102. package/dist/components/mg-input-numeric.js +1 -592
  103. package/dist/components/mg-input-password.js +1 -360
  104. package/dist/components/mg-input-radio.js +1 -392
  105. package/dist/components/mg-input-rich-text-editor.js +1663 -16797
  106. package/dist/components/mg-input-select.js +1 -6
  107. package/dist/components/mg-input-select2.js +1 -481
  108. package/dist/components/mg-input-text.js +1 -6
  109. package/dist/components/mg-input-text2.js +1 -514
  110. package/dist/components/mg-input-textarea.js +1 -412
  111. package/dist/components/mg-input-title.js +1 -6
  112. package/dist/components/mg-input-title2.js +1 -81
  113. package/dist/components/mg-input-toggle.js +1 -371
  114. package/dist/components/mg-input.conf.js +1 -0
  115. package/dist/components/mg-input.js +1 -6
  116. package/dist/components/mg-input2.js +1 -459
  117. package/dist/components/mg-item-more.js +1 -6
  118. package/dist/components/mg-item-more2.js +1 -505
  119. package/dist/components/mg-loader.js +1 -6
  120. package/dist/components/mg-loader2.js +1 -74
  121. package/dist/components/mg-menu-item.js +1 -6
  122. package/dist/components/mg-menu-item2.js +1 -485
  123. package/dist/components/mg-menu.js +1 -6
  124. package/dist/components/mg-message.js +1 -6
  125. package/dist/components/mg-message2.js +1 -146
  126. package/dist/components/mg-modal.js +1 -184
  127. package/dist/components/mg-pagination.js +1 -234
  128. package/dist/components/mg-panel.js +1 -350
  129. package/dist/components/mg-popover-content.js +1 -6
  130. package/dist/components/mg-popover-content2.js +1 -96
  131. package/dist/components/mg-popover.js +1 -6
  132. package/dist/components/mg-popover2.js +1 -312
  133. package/dist/components/mg-progress.js +1 -123
  134. package/dist/components/mg-skip-links.js +1 -78
  135. package/dist/components/mg-table.js +1 -319
  136. package/dist/components/mg-tabs.js +1 -6
  137. package/dist/components/mg-tabs2.js +1 -315
  138. package/dist/components/mg-tag.js +1 -133
  139. package/dist/components/mg-tooltip-content.js +1 -6
  140. package/dist/components/mg-tooltip-content2.js +1 -42
  141. package/dist/components/mg-tooltip.js +1 -6
  142. package/dist/components/mg-tooltip2.js +1 -421
  143. package/dist/components/popper.js +1 -1790
  144. package/dist/esm/{index-BluNKQ3L.js → index-DFwaH2hS.js} +1761 -80
  145. package/dist/esm/{index-CNX6lq0x.js → index-DSEloqPn.js} +54 -1
  146. package/dist/esm/loader.js +3 -3
  147. package/dist/esm/mg-action-more_37.entry.js +761 -371
  148. package/dist/esm/mg-alert.entry.js +17 -9
  149. package/dist/esm/mg-breadcrumb.entry.js +61 -0
  150. package/dist/esm/mg-components.js +4 -4
  151. package/dist/esm/mg-fieldset.entry.js +24 -7
  152. package/dist/esm/mg-input-combobox.entry.js +49 -19
  153. package/dist/esm/mg-input-file.entry.js +382 -0
  154. package/dist/esm/mg-input-rich-text-editor.entry.js +40083 -15808
  155. package/dist/esm/{mg-input.conf-DDnrE1hD.js → mg-input.conf-C9rmNQIL.js} +7 -1
  156. package/dist/esm/mg-loader.entry.js +8 -6
  157. package/dist/esm/mg-progress.entry.js +19 -9
  158. package/dist/mg-components/locales/en/messages.json +14 -0
  159. package/dist/mg-components/locales/fr/messages.json +14 -0
  160. package/dist/mg-components/mg-components.esm.js +1 -1
  161. package/dist/mg-components/p-0482eb9f.entry.js +1 -0
  162. package/dist/mg-components/{p-7132bca1.entry.js → p-2ee92f38.entry.js} +1 -1
  163. package/dist/mg-components/{p-916dfb6d.entry.js → p-3b653226.entry.js} +1 -1
  164. package/dist/mg-components/p-5745fbea.entry.js +1 -0
  165. package/dist/mg-components/p-C9rmNQIL.js +1 -0
  166. package/dist/mg-components/p-DFwaH2hS.js +2 -0
  167. package/dist/mg-components/p-DSEloqPn.js +1 -0
  168. package/dist/mg-components/p-adec7fcc.entry.js +1 -0
  169. package/dist/mg-components/p-c63f97f0.entry.js +1658 -0
  170. package/dist/mg-components/p-c8c8cfc1.entry.js +1 -0
  171. package/dist/mg-components/p-cc793586.entry.js +1 -0
  172. package/dist/mg-components/p-d5e69c95.entry.js +1 -0
  173. package/dist/types/assets/icons/index.d.ts +2 -0
  174. package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +7 -1
  175. package/dist/types/components/molecules/inputs/mg-input-file/mg-input-file.d.ts +210 -0
  176. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.d.ts +17 -0
  177. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/index.d.ts +27 -19
  178. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.d.ts +3 -0
  179. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +50 -16
  180. package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts +0 -5
  181. package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.d.ts +1 -6
  182. package/dist/types/components/molecules/menus/mg-menu/mg-menu.conf.d.ts +2 -10
  183. package/dist/types/components/molecules/menus/mg-menu/mg-menu.d.ts +7 -7
  184. package/dist/types/components/molecules/menus/mg-menu-item/mg-menu-item.d.ts +12 -8
  185. package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.d.ts +18 -0
  186. package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.d.ts +34 -0
  187. package/dist/types/components/molecules/mg-table/mg-table.d.ts +6 -0
  188. package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts +1 -9
  189. package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +4 -4
  190. package/dist/types/components.d.ts +302 -46
  191. package/dist/types/stencil-public-runtime.d.ts +76 -12
  192. package/ide/intellij/web-types.json +483 -51
  193. package/ide/vscode/css-custom-data.json +10 -2
  194. package/ide/vscode/html-custom-data.json +445 -104
  195. package/package.json +24 -23
  196. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.scss +0 -1
  197. package/dist/mg-components/p-016bd291.entry.js +0 -1
  198. package/dist/mg-components/p-186a6139.entry.js +0 -1
  199. package/dist/mg-components/p-BluNKQ3L.js +0 -2
  200. package/dist/mg-components/p-CNX6lq0x.js +0 -1
  201. package/dist/mg-components/p-DDnrE1hD.js +0 -1
  202. package/dist/mg-components/p-cd061b38.entry.js +0 -1
  203. package/dist/mg-components/p-d2c72f09.entry.js +0 -1
  204. package/dist/mg-components/p-d5a276eb.entry.js +0 -1
  205. package/ide/vscode/custom.css-data.json +0 -425
@@ -1,421 +1 @@
1
- import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
- import { c as createID, n as nextTick, a as isValideID, t as toString, i as isValidString, g as getWindows, l as focusableElements } from './index2.js';
3
- import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
4
- import { c as createPopper } from './popper.js';
5
-
6
- const Guard = {
7
- FOCUS: 'focus',
8
- HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',
9
- HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',
10
- DISABLE_ON_CLICK: 'disableOnClick',
11
- };
12
-
13
- const mgTooltipCss = "/*!\n * @prop --mg-c-tooltip-border-radius: Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-tooltip-color-background: Defines the background color of the tooltip. Default value: `--mg-b-color-dark`.\n * @prop --mg-c-tooltip-color-text: Defines the font color of the tooltip. Default value: `--mg-b-color-light`.\n */:host{display:inline-block}";
14
-
15
- /**
16
- * HTMLMgButtonElement type guard
17
- * @param element - element to check
18
- * @returns return true if type is HTMLMgButtonElement
19
- */
20
- const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
21
- const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLElement {
22
- constructor(registerHost) {
23
- super();
24
- if (registerHost !== false) {
25
- this.__registerHost();
26
- }
27
- this.__attachShadow();
28
- /**
29
- * Sets an `id` attribute.
30
- * Needed by the input for accessibility `aria-decribedby`.
31
- */
32
- this.identifier = createID('mg-tooltip');
33
- /**
34
- * Tooltip placement
35
- */
36
- this.placement = 'bottom';
37
- /**
38
- * Display tooltip
39
- */
40
- this.display = false;
41
- /**
42
- * Disable tooltip
43
- */
44
- this.disabled = false;
45
- /**
46
- * Show tooltip
47
- */
48
- this.show = () => {
49
- // Make the tooltip visible
50
- this.mgTooltipContent.dataset.show = '';
51
- // Enable the event listeners
52
- this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
53
- // hide when click outside on nextTick to prevent event to trigger after creation
54
- nextTick(() => {
55
- this.windows.forEach((localWindow) => {
56
- localWindow.addEventListener('click', this.handleClickOutside, false);
57
- localWindow.addEventListener('keydown', this.handlePressEscape, false);
58
- });
59
- });
60
- };
61
- /**
62
- * Hide tooltip
63
- */
64
- this.hide = () => {
65
- // Hide the tooltip
66
- this.mgTooltipContent.removeAttribute('data-show');
67
- // Disable the event listeners
68
- this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
69
- // Remove event listener
70
- this.windows.forEach((localWindow) => {
71
- localWindow.removeEventListener('click', this.handleClickOutside, false);
72
- localWindow.removeEventListener('keyboard', this.handlePressEscape, false);
73
- });
74
- };
75
- /**
76
- * Check if clicked outside of component and hide tooltip
77
- * @param event - mouse event
78
- */
79
- this.handleClickOutside = (event) => {
80
- if (event.target.closest('mg-tooltip') !== this.element)
81
- this.setDisplay(false);
82
- };
83
- /**
84
- * Check if 'Escape' key is pressed of component and hide tooltip
85
- * @param event - keyboard event
86
- */
87
- this.handlePressEscape = (event) => {
88
- if (event.code === 'Escape') {
89
- this.setDisplay(false);
90
- this.resetGuard();
91
- }
92
- };
93
- /**
94
- * Method to set display prop
95
- * @param newValue - display prop new value
96
- * @param condition - additionnal condition to apply display prop newValue
97
- */
98
- this.setDisplay = (newValue, condition = true) => {
99
- if (!this.disabled && condition)
100
- this.display = newValue;
101
- };
102
- /**
103
- * Action for tooltip element and tooltiped element mouse listener
104
- * @param elementGuard - tooltip element guard
105
- * @param eventName - event name
106
- * @param conditionalGuard - guard condition
107
- */
108
- this.tooltipMouseListenerAction = (elementGuard, eventName, conditionalGuard) => {
109
- // active FOCUS guard cancel process
110
- if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
111
- return;
112
- }
113
- // Update guard by element guard
114
- this.guard = elementGuard;
115
- if (eventName !== 'mouseenter') {
116
- // process action in the next event loop macro task
117
- setTimeout(() => {
118
- this.setDisplay(false, this.guard !== conditionalGuard);
119
- this.resetGuard();
120
- }, 100);
121
- }
122
- else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
123
- this.setDisplay(true);
124
- }
125
- };
126
- /**
127
- * Method to reset guard value
128
- */
129
- this.resetGuard = () => {
130
- this.guard = undefined;
131
- };
132
- /**
133
- * Update slot content when it is a mg-button
134
- * @param mgButton - slotted mg-button
135
- */
136
- this.setMgButtonWrapper = (mgButton) => {
137
- const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';
138
- const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);
139
- // For disabled mg-button, we need to wrap it in a new element
140
- // We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`
141
- // AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button
142
- if (mgButton.disabled && !hasButtonWrapper) {
143
- // wrap mg-button in a div
144
- const div = document.createElement('div');
145
- div.classList.add(buttonWrapperClass);
146
- mgButton.parentNode.insertBefore(div, mgButton);
147
- div.appendChild(mgButton);
148
- // update tooltipElement
149
- this.setTooltipedElement(div);
150
- }
151
- else if (!mgButton.disabled && hasButtonWrapper) {
152
- this.element.firstElementChild.replaceWith(mgButton);
153
- // update tooltipElement
154
- this.setTooltipedElement(mgButton);
155
- }
156
- };
157
- /**
158
- * Set popper instance
159
- * @param strategy - popper strategy to apply on instance
160
- */
161
- this.setPopper = (strategy) => {
162
- // Create popperjs tooltip
163
- this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
164
- placement: this.placement,
165
- strategy,
166
- modifiers: [
167
- {
168
- name: 'offset',
169
- options: {
170
- offset: [0, 8],
171
- },
172
- },
173
- {
174
- name: 'flip',
175
- options: {
176
- fallbackPlacements: ['auto'],
177
- },
178
- },
179
- ],
180
- });
181
- };
182
- /**
183
- * Define selected element to become tooltip selector and init listeners
184
- * @param element - tooltiped element
185
- */
186
- this.setTooltipedElement = (element) => {
187
- this.tooltipedElement = element;
188
- // Manage tooltipedElement focus events
189
- this.tooltipedElement.addEventListener('focus', () => {
190
- this.guard = Guard.FOCUS;
191
- this.setDisplay(true);
192
- });
193
- // as `click` event is the composition of `mousedown` and `mouseup` event,
194
- // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
195
- // we reset the guard on `mouseup` event to unlock tooltip
196
- this.tooltipedElement.addEventListener('mouseup', () => {
197
- this.resetGuard();
198
- });
199
- this.tooltipedElement.addEventListener('blur', () => {
200
- this.resetGuard();
201
- this.setDisplay(false);
202
- });
203
- // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
204
- this.tooltipedElement.addEventListener('mouseenter', () => {
205
- this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
206
- });
207
- this.tooltipedElement.addEventListener('mouseleave', () => {
208
- this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
209
- });
210
- };
211
- /**
212
- * Set button mutation observer
213
- * @param mgButton - mg-button to observe
214
- */
215
- this.setMgButtonMutationObserver = (mgButton) => {
216
- new MutationObserver(mutationList => {
217
- // stop process when none of mutations attributed is disabled
218
- if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
219
- return;
220
- // set guard when one of mutations is for a disabled with disabled-on-click
221
- if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
222
- this.guard = Guard.DISABLE_ON_CLICK;
223
- }
224
- // when the disabled-on-click guard is running we stop process
225
- if (this.guard === Guard.DISABLE_ON_CLICK)
226
- return;
227
- // update button wrapper
228
- this.setMgButtonWrapper(mgButton);
229
- // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
230
- // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
231
- this.resetGuard();
232
- // update popper instance
233
- this.popper.update();
234
- }).observe(mgButton, { attributes: true });
235
- };
236
- /**
237
- * Set tooltiped element aria-describedby
238
- * @param element - element to update
239
- */
240
- this.setAriaDescribedby = (element) => {
241
- // Set aria-describedby
242
- if (!element.hasAttribute('aria-describedby')) {
243
- this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
244
- }
245
- else {
246
- // We ensure to have uniq ids
247
- element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
248
- }
249
- };
250
- }
251
- watchIdentifier(newValue) {
252
- if (!isValideID(newValue)) {
253
- throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
254
- }
255
- // use renderTooltipContent to update tooltip-content id
256
- this.renderTooltipContent();
257
- }
258
- watchMessage(newValue) {
259
- if (!isValidString(newValue)) {
260
- throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${toString(newValue)}.`);
261
- }
262
- if (this.mgTooltipContent !== undefined)
263
- this.mgTooltipContent.message = newValue;
264
- }
265
- watchDisplay(newValue) {
266
- if (newValue) {
267
- this.show();
268
- }
269
- else {
270
- this.hide();
271
- }
272
- }
273
- watchDisabled(newValue) {
274
- if (this.hasCustomTabIndex) {
275
- if (newValue)
276
- this.tooltipedElement.removeAttribute('tabindex');
277
- else if (!this.tooltipedElement.hasAttribute('tabindex'))
278
- this.tooltipedElement.setAttribute('tabindex', '0');
279
- }
280
- }
281
- /**
282
- * Render tooltip content element and init listeners
283
- */
284
- renderTooltipContent() {
285
- if (this.mgTooltipContent !== undefined) {
286
- this.mgTooltipContent.setAttribute('id', this.identifier);
287
- }
288
- else {
289
- this.mgTooltipContent = document.createElement('mg-tooltip-content');
290
- this.mgTooltipContent.setAttribute('slot', 'content');
291
- this.mgTooltipContent.setAttribute('id', this.identifier);
292
- const arrow = document.createElement('div');
293
- arrow.setAttribute('slot', 'arrow');
294
- arrow.dataset.popperArrow = '';
295
- this.mgTooltipContent.appendChild(arrow);
296
- // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
297
- this.mgTooltipContent.addEventListener('mouseenter', () => {
298
- this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);
299
- });
300
- this.mgTooltipContent.addEventListener('mouseleave', () => {
301
- this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);
302
- });
303
- // append tooltip element to component
304
- this.element.appendChild(this.mgTooltipContent);
305
- }
306
- }
307
- /*************
308
- * Lifecycle *
309
- *************/
310
- /**
311
- * set variables
312
- */
313
- componentWillLoad() {
314
- // Get windows to attach events
315
- this.windows = getWindows(window);
316
- // Get tooltip element
317
- this.renderTooltipContent();
318
- //validate properties
319
- this.watchDisabled(this.disabled);
320
- this.watchMessage(this.message);
321
- this.watchIdentifier(this.identifier);
322
- }
323
- /**
324
- * Get slotted element
325
- * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
326
- * We need to attach the focused element to the tooltip (aria-describedby)
327
- */
328
- componentDidLoad() {
329
- var _a;
330
- // get slotted element wich is not the tooltip
331
- const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
332
- // Get interactive element
333
- const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
334
- this.setTooltipedElement(interactiveElement || slotElement);
335
- // Check if slotted element is a disabled mg-button
336
- // In this case we wrap the mg-button into a div to enable the tooltip
337
- if (isButton(slotElement)) {
338
- this.setMgButtonMutationObserver(slotElement);
339
- this.setMgButtonWrapper(slotElement);
340
- }
341
- // Add tabindex to slotted element if we can't find any interactive element
342
- if (!this.disabled && [undefined, null].includes(interactiveElement)) {
343
- this.hasCustomTabIndex = true;
344
- slotElement.tabIndex = 0;
345
- // Add role on non-interactive element to work with "aria-describedby" for screen readers
346
- slotElement.setAttribute('role', 'button');
347
- }
348
- // apply a11y aria
349
- this.setAriaDescribedby(slotElement);
350
- // set Tooltip
351
- this.setPopper(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
352
- // add document keyboard handler
353
- document.addEventListener('keydown', this.handlePressEscape);
354
- // check props
355
- this.watchDisplay(this.display);
356
- }
357
- /**
358
- * update popper position after props change on component did update hook to benefit from render ended
359
- */
360
- componentDidUpdate() {
361
- this.popper.update();
362
- }
363
- /**
364
- * remove listeners
365
- */
366
- disconnectedCallback() {
367
- var _a;
368
- document.removeEventListener('keydown', this.handlePressEscape);
369
- (_a = this.windows) === null || _a === void 0 ? void 0 : _a.forEach((localWindow) => {
370
- localWindow.removeEventListener('click', this.handleClickOutside, false);
371
- localWindow.removeEventListener('keydown', this.handlePressEscape, false);
372
- });
373
- }
374
- /**
375
- * Render
376
- * @returns HTML Element
377
- */
378
- render() {
379
- return (h(Host, { key: '1f5ee653d58185c2ab15b213ad323adaabca605f' }, h("slot", { key: 'd0c615db4429e84a295d01269c268f9239da85c5' }), h("slot", { key: 'e6c6deb2f94ab883da2a62fa53cb299f5ec83a06', name: "content" })));
380
- }
381
- get element() { return this; }
382
- static get watchers() { return {
383
- "identifier": ["watchIdentifier"],
384
- "message": ["watchMessage"],
385
- "display": ["watchDisplay"],
386
- "disabled": ["watchDisabled"]
387
- }; }
388
- static get style() { return mgTooltipCss; }
389
- }, [257, "mg-tooltip", {
390
- "identifier": [1],
391
- "message": [1],
392
- "placement": [1],
393
- "display": [1028],
394
- "disabled": [4]
395
- }, undefined, {
396
- "identifier": ["watchIdentifier"],
397
- "message": ["watchMessage"],
398
- "display": ["watchDisplay"],
399
- "disabled": ["watchDisabled"]
400
- }]);
401
- function defineCustomElement() {
402
- if (typeof customElements === "undefined") {
403
- return;
404
- }
405
- const components = ["mg-tooltip", "mg-tooltip-content"];
406
- components.forEach(tagName => { switch (tagName) {
407
- case "mg-tooltip":
408
- if (!customElements.get(tagName)) {
409
- customElements.define(tagName, MgTooltip);
410
- }
411
- break;
412
- case "mg-tooltip-content":
413
- if (!customElements.get(tagName)) {
414
- defineCustomElement$1();
415
- }
416
- break;
417
- } });
418
- }
419
- defineCustomElement();
420
-
421
- export { MgTooltip as M, defineCustomElement as d };
1
+ import{transformTag as t,proxyCustomElement as i,HTMLElement as s,h as e,Host as h}from"@stencil/core/internal/client";import{c as o,n as a,a as n,t as d,i as c,g as l,l as r}from"./index2.js";import{d as m}from"./mg-tooltip-content2.js";import{c as p}from"./popper.js";const b={FOCUS:"focus",HOVER_TOOLTIP_ELEMENT:"hoverTooltip",HOVER_TOOLTIPED_ELEMENT:"hoverTooltiped",DISABLE_ON_CLICK:"disableOnClick"},u=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.identifier=o("mg-tooltip"),this.placement="bottom",this.display=!1,this.disabled=!1,this.show=()=>{this.mgTooltipContent.dataset.show="",this.popper.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:!0}]}))),a((()=>{this.windows.forEach((t=>{t.addEventListener("click",this.handleClickOutside,!1),t.addEventListener("keydown",this.handlePressEscape,!1)}))}))},this.hide=()=>{this.mgTooltipContent.removeAttribute("data-show"),this.popper.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:!1}]}))),this.windows.forEach((t=>{t.removeEventListener("click",this.handleClickOutside,!1),t.removeEventListener("keyboard",this.handlePressEscape,!1)}))},this.handleClickOutside=t=>{t.target.closest("mg-tooltip")!==this.element&&this.setDisplay(!1)},this.handlePressEscape=t=>{"Escape"===t.code&&(this.setDisplay(!1),this.resetGuard())},this.setDisplay=(t,i=!0)=>{!this.disabled&&i&&(this.display=t)},this.tooltipMouseListenerAction=(t,i,s)=>{[b.FOCUS,b.DISABLE_ON_CLICK].includes(this.guard)||(this.guard=t,"mouseenter"!==i?setTimeout((()=>{this.setDisplay(!1,this.guard!==s),this.resetGuard()}),100):this.guard===b.HOVER_TOOLTIPED_ELEMENT&&this.setDisplay(!0))},this.resetGuard=()=>{this.guard=void 0},this.setMgButtonWrapper=t=>{const i="mg-c-tooltip__mg-button-wrapper",s=t.parentElement.classList.contains(i);if(t.disabled&&!s){const s=document.createElement("div");s.classList.add(i),t.parentNode.insertBefore(s,t),s.appendChild(t),this.setTooltipedElement(s)}else!t.disabled&&s&&(this.element.firstElementChild.replaceWith(t),this.setTooltipedElement(t))},this.setPopper=t=>{this.popper=p(this.tooltipedElement,this.mgTooltipContent,{placement:this.placement,strategy:t,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"flip",options:{fallbackPlacements:["auto"]}}]})},this.setTooltipedElement=t=>{this.tooltipedElement=t,this.tooltipedElement.addEventListener("focus",(()=>{this.guard=b.FOCUS,this.setDisplay(!0)})),this.tooltipedElement.addEventListener("mouseup",(()=>{this.resetGuard()})),this.tooltipedElement.addEventListener("blur",(()=>{this.resetGuard(),this.setDisplay(!1)})),this.tooltipedElement.addEventListener("mouseenter",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIPED_ELEMENT,"mouseenter",b.HOVER_TOOLTIP_ELEMENT)})),this.tooltipedElement.addEventListener("mouseleave",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIPED_ELEMENT,"mouseleave",b.HOVER_TOOLTIP_ELEMENT)}))},this.setMgButtonMutationObserver=t=>{new MutationObserver((i=>{i.some((t=>["aria-disabled","disabled"].includes(t.attributeName)))&&(i.some((t=>t.target.disabled&&t.target.disableOnClick))&&(this.guard=b.DISABLE_ON_CLICK),this.guard!==b.DISABLE_ON_CLICK&&(this.setMgButtonWrapper(t),this.resetGuard(),this.popper.update()))})).observe(t,{attributes:!0})},this.setAriaDescribedby=t=>{t.hasAttribute("aria-describedby")?t.setAttribute("aria-describedby",`${[...new Set([...t.getAttribute("aria-describedby").split(" "),this.identifier])].join(" ")}`):this.tooltipedElement.setAttribute("aria-describedby",this.identifier)}}watchIdentifier(t){if(!n(t))throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${d(t)}.`);this.renderTooltipContent()}watchMessage(t){if(!c(t))throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${d(t)}.`);void 0!==this.mgTooltipContent&&(this.mgTooltipContent.message=t)}watchDisplay(t){t?this.show():this.hide()}watchDisabled(t){this.hasCustomTabIndex&&(t?this.tooltipedElement.removeAttribute("tabindex"):this.tooltipedElement.hasAttribute("tabindex")||this.tooltipedElement.setAttribute("tabindex","0"))}renderTooltipContent(){if(void 0!==this.mgTooltipContent)this.mgTooltipContent.setAttribute("id",this.identifier);else{this.mgTooltipContent=document.createElement("mg-tooltip-content"),this.mgTooltipContent.setAttribute("slot","content"),this.mgTooltipContent.setAttribute("id",this.identifier);const t=document.createElement("div");t.setAttribute("slot","arrow"),t.dataset.popperArrow="",this.mgTooltipContent.appendChild(t),this.mgTooltipContent.addEventListener("mouseenter",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIP_ELEMENT,"mouseenter",b.HOVER_TOOLTIPED_ELEMENT)})),this.mgTooltipContent.addEventListener("mouseleave",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIP_ELEMENT,"mouseleave",b.HOVER_TOOLTIPED_ELEMENT)})),this.element.appendChild(this.mgTooltipContent)}}componentWillLoad(){this.windows=l(window),this.renderTooltipContent(),this.watchDisabled(this.disabled),this.watchMessage(this.message),this.watchIdentifier(this.identifier)}componentDidLoad(){var t;const i=this.element.querySelector(`*:not(#${this.identifier})`),s=i.matches(r)?i:null===(t=i.shadowRoot)||void 0===t?void 0:t.querySelector(r);var e;this.setTooltipedElement(s||i),"object"==typeof(e=i)&&["MG-BUTTON","BUTTON"].includes(e.tagName)&&(this.setMgButtonMutationObserver(i),this.setMgButtonWrapper(i)),!this.disabled&&[void 0,null].includes(s)&&(this.hasCustomTabIndex=!0,i.tabIndex=0,i.setAttribute("role","button")),this.setAriaDescribedby(i),this.setPopper(null!==this.element.closest("mg-popover")?"absolute":"fixed"),document.addEventListener("keydown",this.handlePressEscape),this.watchDisplay(this.display)}componentDidUpdate(){this.popper.update()}disconnectedCallback(){var t;document.removeEventListener("keydown",this.handlePressEscape),null===(t=this.windows)||void 0===t||t.forEach((t=>{t.removeEventListener("click",this.handleClickOutside,!1),t.removeEventListener("keydown",this.handlePressEscape,!1)}))}render(){return e(h,{key:"8d1a0690f0b44381de181c2ea1f9e4c883a1af57"},e("slot",{key:"ae45df312e6a251a72b8ace11eb154c5ad13b4ae"}),e("slot",{key:"fdbb17e42291cd785ff188df14029bcd59ba4c13",name:"content"}))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],message:[{watchMessage:0}],display:[{watchDisplay:0}],disabled:[{watchDisabled:0}]}}static get style(){return":host{display:inline-block}"}},[257,"mg-tooltip",{identifier:[1],message:[1],placement:[1],display:[1028],disabled:[4]},void 0,{identifier:[{watchIdentifier:0}],message:[{watchMessage:0}],display:[{watchDisplay:0}],disabled:[{watchDisabled:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-tooltip":customElements.get(t(i))||customElements.define(t(i),u);break;case"mg-tooltip-content":customElements.get(t(i))||m()}}))}f();export{u as M,f as d}