@mgdis/mg-components 6.4.0 → 6.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-a3269bfc.js → index-019dd5c0.js} +3 -3
- package/dist/cjs/{index-a3269bfc.js.map → index-019dd5c0.js.map} +1 -1
- package/dist/cjs/{index-911898e4.js → index-1a5a1081.js} +270 -241
- package/dist/cjs/index-1a5a1081.js.map +1 -0
- package/dist/cjs/{index.es-325100d7.js → index.es-903492c5.js} +43 -44
- package/dist/cjs/index.es-903492c5.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +2418 -1996
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.cjs.entry.js +8 -8
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +16790 -0
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-input.conf-5bbcea79.js +23 -0
- package/dist/cjs/mg-input.conf-5bbcea79.js.map +1 -0
- package/dist/cjs/mg-loader.cjs.entry.js +6 -6
- package/dist/cjs/mg-progress.cjs.entry.js +12 -12
- package/dist/collection/assets/icons/index.js +1 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js +1 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +68 -38
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js +110 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +846 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +3 -5
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +4 -4
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +16 -17
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +19 -9
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +3 -3
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +6 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +2 -2
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js +5 -2
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +74 -17
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +3 -3
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js +2 -0
- package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js.map +1 -0
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +90 -46
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -1
- package/dist/collection/types/index.js.map +1 -1
- package/dist/collection/utils/behaviors.utils.js +4 -1
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/floating-ui.utils.js +28 -0
- package/dist/collection/utils/floating-ui.utils.js.map +1 -0
- package/dist/components/floating-ui.utils.js +2094 -0
- package/dist/components/floating-ui.utils.js.map +1 -0
- package/dist/components/index.es.js +37 -38
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +2 -2
- package/dist/components/mg-action-more.js +8 -8
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.js +6 -6
- package/dist/components/mg-badge2.js +6 -6
- package/dist/components/mg-button2.js +6 -6
- package/dist/components/mg-card2.js +1 -1
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left2.js +4 -4
- package/dist/components/mg-details.js +8 -3
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-form.js +9 -9
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +7 -7
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +69 -16
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +11 -11
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +13 -13
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +14 -14
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +4 -4
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +8 -8
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-rich-text-editor.d.ts +11 -0
- package/dist/components/mg-input-rich-text-editor.js +16866 -0
- package/dist/components/mg-input-rich-text-editor.js.map +1 -0
- package/dist/components/mg-input-select2.js +8 -8
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +11 -13
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +8 -8
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +4 -4
- package/dist/components/mg-input-toggle.js +7 -7
- package/dist/components/mg-input2.js +9 -9
- package/dist/components/mg-input2.js.map +1 -1
- package/dist/components/mg-item-more2.js +24 -22
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +4 -4
- package/dist/components/mg-menu-item2.js +30 -20
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message2.js +7 -7
- package/dist/components/mg-message2.js.map +1 -1
- package/dist/components/mg-modal.js +11 -11
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +9 -9
- package/dist/components/mg-panel.js +11 -11
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +4 -4
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +89 -47
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.js +11 -11
- package/dist/components/mg-skip-links.js +3 -3
- package/dist/components/mg-tabs.js +13 -13
- package/dist/components/mg-tag.js +4 -4
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +70 -41
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-1f32332a.js → index-5059254f.js} +270 -241
- package/dist/esm/index-5059254f.js.map +1 -0
- package/dist/esm/{index-9bd10f5d.js → index-6b7bdd63.js} +3 -3
- package/dist/esm/{index-9bd10f5d.js.map → index-6b7bdd63.js.map} +1 -1
- package/dist/esm/{index.es-a2587b72.js → index.es-b80b758c.js} +38 -39
- package/dist/esm/index.es-b80b758c.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +2370 -1948
- package/dist/esm/mg-action-more_36.entry.js.map +1 -1
- package/dist/esm/mg-alert.entry.js +8 -8
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-input-rich-text-editor.entry.js +16786 -0
- package/dist/esm/mg-input-rich-text-editor.entry.js.map +1 -0
- package/dist/esm/mg-input.conf-712c7bb6.js +16 -0
- package/dist/esm/mg-input.conf-712c7bb6.js.map +1 -0
- package/dist/esm/mg-loader.entry.js +6 -6
- package/dist/esm/mg-progress.entry.js +12 -12
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/{p-f48d964f.entry.js → p-0ae49cc4.entry.js} +2 -2
- package/dist/mg-components/p-17f0b7eb.entry.js +2 -0
- package/dist/mg-components/p-17f0b7eb.entry.js.map +1 -0
- package/dist/mg-components/p-1c126a81.entry.js +2 -0
- package/dist/mg-components/p-1c126a81.entry.js.map +1 -0
- package/dist/mg-components/p-2884f369.js +2 -0
- package/dist/mg-components/p-2884f369.js.map +1 -0
- package/dist/mg-components/{p-3b052ac0.entry.js → p-361cc090.entry.js} +2 -2
- package/dist/mg-components/p-3c6710be.js +2 -0
- package/dist/mg-components/p-3c6710be.js.map +1 -0
- package/dist/mg-components/{p-dc436f3c.js → p-4049bd40.js} +2 -2
- package/dist/mg-components/{p-0ead5317.entry.js → p-c4f37d1f.entry.js} +2 -2
- package/dist/mg-components/p-e39791fa.js +3 -0
- package/dist/mg-components/p-e39791fa.js.map +1 -0
- package/dist/types/assets/icons/index.d.ts +1 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts +6 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +7 -6
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/index.d.ts +21 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +202 -0
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +2 -6
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +3 -2
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +14 -7
- package/dist/types/components/molecules/mg-details/mg-details.d.ts +4 -0
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.d.ts +10 -3
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +17 -3
- package/dist/types/components/molecules/mg-popover/mg-popover.conf.d.ts +6 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +13 -8
- package/dist/types/components.d.ts +225 -14
- package/dist/types/types/index.d.ts +4 -0
- package/dist/types/utils/floating-ui.utils.d.ts +19 -0
- package/ide/intellij/web-types.json +374 -17
- package/ide/vscode/css-custom-data.json +4 -0
- package/ide/vscode/html-custom-data.json +289 -4
- package/package.json +25 -24
- package/dist/cjs/index-911898e4.js.map +0 -1
- package/dist/cjs/index.es-325100d7.js.map +0 -1
- package/dist/components/popper.js +0 -1794
- package/dist/components/popper.js.map +0 -1
- package/dist/esm/index-1f32332a.js.map +0 -1
- package/dist/esm/index.es-a2587b72.js.map +0 -1
- package/dist/mg-components/p-35898742.js +0 -3
- package/dist/mg-components/p-35898742.js.map +0 -1
- package/dist/mg-components/p-6810a565.entry.js +0 -2
- package/dist/mg-components/p-6810a565.entry.js.map +0 -1
- package/dist/mg-components/p-b986c107.js +0 -2
- package/dist/mg-components/p-b986c107.js.map +0 -1
- /package/dist/mg-components/{p-f48d964f.entry.js.map → p-0ae49cc4.entry.js.map} +0 -0
- /package/dist/mg-components/{p-3b052ac0.entry.js.map → p-361cc090.entry.js.map} +0 -0
- /package/dist/mg-components/{p-dc436f3c.js.map → p-4049bd40.js.map} +0 -0
- /package/dist/mg-components/{p-0ead5317.entry.js.map → p-c4f37d1f.entry.js.map} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
2
|
+
import { G as Ge, s as st, X as Xe, V as Ve, m as me, Y as Ye, Q as Qe } from './index.es.js';
|
|
3
|
+
import { a as autoUpdate, c as computePosition, o as offset, f as flip, b as shift, l as limitShift, d as arrow, i as isFloatingUIPlacement } from './floating-ui.utils.js';
|
|
3
4
|
import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
|
|
4
|
-
import { c as createPopper } from './popper.js';
|
|
5
5
|
|
|
6
6
|
const Guard = {
|
|
7
7
|
FOCUS: 'focus',
|
|
@@ -28,7 +28,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
28
28
|
* Sets an `id` attribute.
|
|
29
29
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
30
30
|
*/
|
|
31
|
-
this.identifier =
|
|
31
|
+
this.identifier = Ge('mg-tooltip');
|
|
32
32
|
/**
|
|
33
33
|
* Tooltip placement
|
|
34
34
|
*/
|
|
@@ -47,10 +47,8 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
47
47
|
this.show = () => {
|
|
48
48
|
// Make the tooltip visible
|
|
49
49
|
this.mgTooltipContent.dataset.show = '';
|
|
50
|
-
// Enable the event listeners
|
|
51
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
52
50
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
53
|
-
|
|
51
|
+
st(() => {
|
|
54
52
|
this.windows.forEach((localWindow) => {
|
|
55
53
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
56
54
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -63,8 +61,6 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
63
61
|
this.hide = () => {
|
|
64
62
|
// Hide the tooltip
|
|
65
63
|
this.mgTooltipContent.removeAttribute('data-show');
|
|
66
|
-
// Disable the event listeners
|
|
67
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
68
64
|
// Remove event listener
|
|
69
65
|
this.windows.forEach((localWindow) => {
|
|
70
66
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
@@ -154,28 +150,50 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
154
150
|
}
|
|
155
151
|
};
|
|
156
152
|
/**
|
|
157
|
-
* Set
|
|
158
|
-
* @param strategy -
|
|
153
|
+
* Set Floating UI instance
|
|
154
|
+
* @param strategy - Floating UI strategy to apply on instance
|
|
159
155
|
*/
|
|
160
|
-
this.
|
|
161
|
-
//
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
},
|
|
177
|
-
}
|
|
178
|
-
|
|
156
|
+
this.setFloatingUI = (strategy) => {
|
|
157
|
+
// Initial styles configuration
|
|
158
|
+
Object.assign(this.mgTooltipContent.style, {
|
|
159
|
+
position: strategy,
|
|
160
|
+
top: '0',
|
|
161
|
+
left: '0',
|
|
162
|
+
transform: 'translate(0, 0)',
|
|
163
|
+
});
|
|
164
|
+
// Create Floating UI instance with autoUpdate
|
|
165
|
+
this.floatingUICleanup = autoUpdate(this.tooltipedElement, this.mgTooltipContent, () => {
|
|
166
|
+
computePosition(this.tooltipedElement, this.mgTooltipContent, {
|
|
167
|
+
placement: this.placement,
|
|
168
|
+
strategy,
|
|
169
|
+
middleware: [offset(8), flip(), shift({ limiter: limitShift() }), arrow({ element: this.mgTooltipContent.querySelector('[data-floating-arrow]') })],
|
|
170
|
+
}).then(({ x, y, placement, middlewareData }) => {
|
|
171
|
+
Object.assign(this.mgTooltipContent.style, {
|
|
172
|
+
transform: !isNaN(x) && !isNaN(y) ? `translate(${x}px, ${y}px)` : undefined,
|
|
173
|
+
});
|
|
174
|
+
// Update arrow style
|
|
175
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
176
|
+
const staticSide = {
|
|
177
|
+
top: 'bottom',
|
|
178
|
+
right: 'left',
|
|
179
|
+
bottom: 'top',
|
|
180
|
+
left: 'right',
|
|
181
|
+
}[placement.split('-')[0]];
|
|
182
|
+
const arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
|
|
183
|
+
// https://floating-ui.com/docs/arrow
|
|
184
|
+
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
185
|
+
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
186
|
+
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
187
|
+
// Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
188
|
+
const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
|
|
189
|
+
Object.assign(arrowElement.style, {
|
|
190
|
+
left: numberToPx(arrowX),
|
|
191
|
+
top: numberToPx(arrowY),
|
|
192
|
+
[staticSide]: '-4px',
|
|
193
|
+
position: 'absolute',
|
|
194
|
+
});
|
|
195
|
+
this.mgTooltipContent.setAttribute('data-placement', placement);
|
|
196
|
+
});
|
|
179
197
|
});
|
|
180
198
|
};
|
|
181
199
|
/**
|
|
@@ -228,8 +246,9 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
228
246
|
// Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
|
|
229
247
|
// we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
|
|
230
248
|
this.resetGuard();
|
|
231
|
-
// update
|
|
232
|
-
this.
|
|
249
|
+
// update Floating UI instance
|
|
250
|
+
this.floatingUICleanup();
|
|
251
|
+
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
233
252
|
}).observe(mgButton, { attributes: true });
|
|
234
253
|
};
|
|
235
254
|
/**
|
|
@@ -248,19 +267,23 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
248
267
|
};
|
|
249
268
|
}
|
|
250
269
|
watchIdentifier(newValue) {
|
|
251
|
-
if (!
|
|
252
|
-
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${
|
|
270
|
+
if (!Xe(newValue)) {
|
|
271
|
+
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
|
|
253
272
|
}
|
|
254
273
|
// use renderTooltipContent to update tooltip-content id
|
|
255
274
|
this.renderTooltipContent();
|
|
256
275
|
}
|
|
257
276
|
watchMessage(newValue) {
|
|
258
|
-
if (!
|
|
259
|
-
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${
|
|
277
|
+
if (!me(newValue)) {
|
|
278
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Ve(newValue)}.`);
|
|
260
279
|
}
|
|
261
280
|
if (this.mgTooltipContent !== undefined)
|
|
262
281
|
this.mgTooltipContent.message = newValue;
|
|
263
282
|
}
|
|
283
|
+
watchPlacement(newValue) {
|
|
284
|
+
if (!isFloatingUIPlacement(newValue))
|
|
285
|
+
this.placement = 'bottom';
|
|
286
|
+
}
|
|
264
287
|
watchDisplay(newValue) {
|
|
265
288
|
if (newValue) {
|
|
266
289
|
this.show();
|
|
@@ -290,7 +313,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
290
313
|
this.mgTooltipContent.setAttribute('id', this.identifier);
|
|
291
314
|
const arrow = document.createElement('div');
|
|
292
315
|
arrow.setAttribute('slot', 'arrow');
|
|
293
|
-
arrow.dataset.
|
|
316
|
+
arrow.dataset.floatingArrow = '';
|
|
294
317
|
this.mgTooltipContent.appendChild(arrow);
|
|
295
318
|
// manage tooltipElement & tooltipedElement mouseenter/mouseleave events
|
|
296
319
|
this.mgTooltipContent.addEventListener('mouseenter', () => {
|
|
@@ -311,10 +334,11 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
311
334
|
*/
|
|
312
335
|
componentWillLoad() {
|
|
313
336
|
// Get windows to attach events
|
|
314
|
-
this.windows =
|
|
337
|
+
this.windows = Ye(window);
|
|
315
338
|
// Get tooltip element
|
|
316
339
|
this.renderTooltipContent();
|
|
317
340
|
//validate properties
|
|
341
|
+
this.watchPlacement(this.placement);
|
|
318
342
|
this.watchDisabled(this.disabled);
|
|
319
343
|
this.watchMessage(this.message);
|
|
320
344
|
this.watchIdentifier(this.identifier);
|
|
@@ -347,7 +371,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
347
371
|
// apply a11y aria
|
|
348
372
|
this.setAriaDescribedby(slotElement);
|
|
349
373
|
// set Tooltip
|
|
350
|
-
this.
|
|
374
|
+
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
351
375
|
// add document keyboard handler
|
|
352
376
|
document.addEventListener('keydown', this.handlePressEscape);
|
|
353
377
|
// check props
|
|
@@ -357,7 +381,8 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
357
381
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
358
382
|
*/
|
|
359
383
|
componentDidUpdate() {
|
|
360
|
-
this.
|
|
384
|
+
this.floatingUICleanup();
|
|
385
|
+
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
361
386
|
}
|
|
362
387
|
/**
|
|
363
388
|
* remove listeners
|
|
@@ -369,18 +394,21 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
369
394
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
370
395
|
localWindow.removeEventListener('keydown', this.handlePressEscape, false);
|
|
371
396
|
});
|
|
397
|
+
// cleanup Floating UI
|
|
398
|
+
this.floatingUICleanup();
|
|
372
399
|
}
|
|
373
400
|
/**
|
|
374
401
|
* Render
|
|
375
402
|
* @returns HTML Element
|
|
376
403
|
*/
|
|
377
404
|
render() {
|
|
378
|
-
return (h(Host, { key: '
|
|
405
|
+
return (h(Host, { key: '38823340f62287af2769d7dee3313dc83405fd87' }, h("slot", { key: '598ed57134a1163630f036328139572acb467f41' }), h("slot", { key: '8da7b05b4675b00a4b5e90a3e9b8c0532b1afac1', name: "content" })));
|
|
379
406
|
}
|
|
380
407
|
get element() { return this; }
|
|
381
408
|
static get watchers() { return {
|
|
382
409
|
"identifier": ["watchIdentifier"],
|
|
383
410
|
"message": ["watchMessage"],
|
|
411
|
+
"placement": ["watchPlacement"],
|
|
384
412
|
"display": ["watchDisplay"],
|
|
385
413
|
"disabled": ["watchDisabled"]
|
|
386
414
|
}; }
|
|
@@ -388,12 +416,13 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
388
416
|
}, [1, "mg-tooltip", {
|
|
389
417
|
"identifier": [1],
|
|
390
418
|
"message": [1],
|
|
391
|
-
"placement": [
|
|
419
|
+
"placement": [1025],
|
|
392
420
|
"display": [1028],
|
|
393
421
|
"disabled": [4]
|
|
394
422
|
}, undefined, {
|
|
395
423
|
"identifier": ["watchIdentifier"],
|
|
396
424
|
"message": ["watchMessage"],
|
|
425
|
+
"placement": ["watchPlacement"],
|
|
397
426
|
"display": ["watchDisplay"],
|
|
398
427
|
"disabled": ["watchDisabled"]
|
|
399
428
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tooltip2.js","mappings":"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","names":["createID","nextTick","isValideID","toString","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["export type GuardType = 'focus' | 'hoverTooltip' | 'hoverTooltiped' | 'disableOnClick';\n\nexport const Guard: Record<string, GuardType> = {\n FOCUS: 'focus',\n HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',\n HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',\n DISABLE_ON_CLICK: 'disableOnClick',\n};\n","/*!\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}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement, PositioningStrategy } from '@popperjs/core';\nimport { type GuardType, Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n/**\n * @slot - Element that will display the tooltip\n * @slot content - Tooltip content\n */\n@Component({\n tag: 'mg-tooltip',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n shadow: true,\n})\nexport class MgTooltip {\n /************\n * Internal *\n ************/\n\n private popper: PopperInstance;\n private mgTooltipContent: HTMLMgTooltipContentElement;\n private tooltipedElement: HTMLElement;\n private windows: Window[];\n private hasCustomTabIndex: boolean;\n\n // tooltip actions guards\n private guard: GuardType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTooltipElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-tooltip');\n @Watch('identifier')\n watchIdentifier(newValue: MgTooltip['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-tooltip> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderTooltipContent to update tooltip-content id\n this.renderTooltipContent();\n }\n\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n @Watch('message')\n watchMessage(newValue: MgTooltip['message']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tooltip> prop \"message\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n if (this.mgTooltipContent !== undefined) this.mgTooltipContent.message = newValue;\n }\n\n /**\n * Tooltip placement\n */\n @Prop() placement: Placement = 'bottom';\n\n /**\n * Display tooltip\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n watchDisplay(newValue: MgTooltip['display']): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n /**\n * Disable tooltip\n */\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgTooltip['disabled']): void {\n if (this.hasCustomTabIndex) {\n if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n else if (!this.tooltipedElement.hasAttribute('tabindex')) this.tooltipedElement.setAttribute('tabindex', '0');\n }\n }\n\n /**\n * Show tooltip\n */\n private show = (): void => {\n // Make the tooltip visible\n this.mgTooltipContent.dataset.show = '';\n // Enable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n }));\n // hide when click outside on nextTick to prevent event to trigger after creation\n nextTick(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.handleClickOutside, false);\n localWindow.addEventListener('keydown', this.handlePressEscape, false);\n });\n });\n };\n\n /**\n * Hide tooltip\n */\n private hide = (): void => {\n // Hide the tooltip\n this.mgTooltipContent.removeAttribute('data-show');\n // Disable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n }));\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keyboard', this.handlePressEscape, false);\n });\n };\n\n /**\n * Check if clicked outside of component and hide tooltip\n * @param event - mouse event\n */\n private handleClickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n };\n\n /**\n * Check if 'Escape' key is pressed of component and hide tooltip\n * @param event - keyboard event\n */\n private handlePressEscape = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.setDisplay(false);\n this.resetGuard();\n }\n };\n\n /**\n * Method to set display prop\n * @param newValue - display prop new value\n * @param condition - additionnal condition to apply display prop newValue\n */\n private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n if (!this.disabled && condition) this.display = newValue;\n };\n\n /**\n * Action for tooltip element and tooltiped element mouse listener\n * @param elementGuard - tooltip element guard\n * @param eventName - event name\n * @param conditionalGuard - guard condition\n */\n private tooltipMouseListenerAction = (elementGuard: GuardType, eventName: 'mouseenter' | 'mouseleave', conditionalGuard: GuardType): void => {\n // active FOCUS guard cancel process\n if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {\n return;\n }\n\n // Update guard by element guard\n this.guard = elementGuard;\n\n if (eventName !== 'mouseenter') {\n // process action in the next event loop macro task\n setTimeout(() => {\n this.setDisplay(false, this.guard !== conditionalGuard);\n this.resetGuard();\n }, 100);\n } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n this.setDisplay(true);\n }\n };\n\n /**\n * Method to reset guard value\n */\n private resetGuard = (): void => {\n this.guard = undefined;\n };\n\n /**\n * Update slot content when it is a mg-button\n * @param mgButton - slotted mg-button\n */\n private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';\n const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);\n // For disabled mg-button, we need to wrap it in a new element\n // We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`\n // AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button\n if (mgButton.disabled && !hasButtonWrapper) {\n // wrap mg-button in a div\n const div = document.createElement('div');\n div.classList.add(buttonWrapperClass);\n mgButton.parentNode.insertBefore(div, mgButton);\n div.appendChild(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(div);\n } else if (!mgButton.disabled && hasButtonWrapper) {\n this.element.firstElementChild.replaceWith(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(mgButton);\n }\n };\n\n /**\n * Set popper instance\n * @param strategy - popper strategy to apply on instance\n */\n private setPopper = (strategy: PositioningStrategy): void => {\n // Create popperjs tooltip\n this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement,\n strategy,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['auto'],\n },\n },\n ],\n });\n };\n\n /**\n * Define selected element to become tooltip selector and init listeners\n * @param element - tooltiped element\n */\n private setTooltipedElement = (element: HTMLElement): void => {\n this.tooltipedElement = element;\n\n // Manage tooltipedElement focus events\n this.tooltipedElement.addEventListener('focus', () => {\n this.guard = Guard.FOCUS;\n this.setDisplay(true);\n });\n\n // as `click` event is the composition of `mousedown` and `mouseup` event,\n // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n // we reset the guard on `mouseup` event to unlock tooltip\n this.tooltipedElement.addEventListener('mouseup', () => {\n this.resetGuard();\n });\n\n this.tooltipedElement.addEventListener('blur', () => {\n this.resetGuard();\n this.setDisplay(false);\n });\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.tooltipedElement.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n\n this.tooltipedElement.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n };\n\n /**\n * Set button mutation observer\n * @param mgButton - mg-button to observe\n */\n private setMgButtonMutationObserver = (mgButton: HTMLMgButtonElement): void => {\n new MutationObserver(mutationList => {\n // stop process when none of mutations attributed is disabled\n if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) return;\n\n // set guard when one of mutations is for a disabled with disabled-on-click\n if (mutationList.some((mutation: MutationRecord & { target: HTMLMgButtonElement }) => mutation.target.disabled && mutation.target.disableOnClick)) {\n this.guard = Guard.DISABLE_ON_CLICK;\n }\n\n // when the disabled-on-click guard is running we stop process\n if (this.guard === Guard.DISABLE_ON_CLICK) return;\n\n // update button wrapper\n this.setMgButtonWrapper(mgButton);\n\n // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n this.resetGuard();\n\n // update popper instance\n this.popper.update();\n }).observe(mgButton, { attributes: true });\n };\n\n /**\n * Set tooltiped element aria-describedby\n * @param element - element to update\n */\n private setAriaDescribedby = (element: HTMLElement): void => {\n // Set aria-describedby\n if (!element.hasAttribute('aria-describedby')) {\n this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n } else {\n // We ensure to have uniq ids\n element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);\n }\n };\n\n /**\n * Render tooltip content element and init listeners\n */\n private renderTooltipContent(): void {\n if (this.mgTooltipContent !== undefined) {\n this.mgTooltipContent.setAttribute('id', this.identifier);\n } else {\n this.mgTooltipContent = document.createElement('mg-tooltip-content');\n this.mgTooltipContent.setAttribute('slot', 'content');\n this.mgTooltipContent.setAttribute('id', this.identifier);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.popperArrow = '';\n this.mgTooltipContent.appendChild(arrow);\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.mgTooltipContent.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n this.mgTooltipContent.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n\n // append tooltip element to component\n this.element.appendChild(this.mgTooltipContent);\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * set variables\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n\n // Get tooltip element\n this.renderTooltipContent();\n\n //validate properties\n this.watchDisabled(this.disabled);\n this.watchMessage(this.message);\n this.watchIdentifier(this.identifier);\n }\n\n /**\n * Get slotted element\n * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n * We need to attach the focused element to the tooltip (aria-describedby)\n */\n componentDidLoad(): void {\n // get slotted element wich is not the tooltip\n const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n // Get interactive element\n const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n this.setTooltipedElement(interactiveElement || slotElement);\n\n // Check if slotted element is a disabled mg-button\n // In this case we wrap the mg-button into a div to enable the tooltip\n if (isButton(slotElement)) {\n this.setMgButtonMutationObserver(slotElement);\n this.setMgButtonWrapper(slotElement);\n }\n\n // Add tabindex to slotted element if we can't find any interactive element\n if (!this.disabled && [undefined, null].includes(interactiveElement)) {\n this.hasCustomTabIndex = true;\n slotElement.tabIndex = 0;\n // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n slotElement.setAttribute('role', 'button');\n }\n\n // apply a11y aria\n this.setAriaDescribedby(slotElement);\n\n // set Tooltip\n this.setPopper(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n\n // add document keyboard handler\n document.addEventListener('keydown', this.handlePressEscape);\n\n // check props\n this.watchDisplay(this.display);\n }\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.popper.update();\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handlePressEscape);\n this.windows?.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keydown', this.handlePressEscape, false);\n });\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-tooltip2.js","mappings":"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","names":["createID","nextTick","isValideID","toString","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["import { type ExtendedPlacement, placements } from '../../../utils/floating-ui.utils';\nexport * from '../../../utils/floating-ui.utils';\n\nexport type GuardType = 'focus' | 'hoverTooltip' | 'hoverTooltiped' | 'disableOnClick';\n\nexport const Guard: Record<string, GuardType> = {\n FOCUS: 'focus',\n HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',\n HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',\n DISABLE_ON_CLICK: 'disableOnClick',\n};\n\n/**\n * Placement type from placements\n */\nexport type TooltipPlacementType = ExtendedPlacement & (typeof placements)[number];\n","/*!\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}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Strategy, type Placement } from '@floating-ui/dom';\nimport { type GuardType, Guard, type TooltipPlacementType, isFloatingUIPlacement } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n/**\n * @slot - Element that will display the tooltip\n * @slot content - Tooltip content\n */\n@Component({\n tag: 'mg-tooltip',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n shadow: true,\n})\nexport class MgTooltip {\n /************\n * Internal *\n ************/\n\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n private mgTooltipContent: HTMLMgTooltipContentElement;\n private tooltipedElement: HTMLElement;\n private windows: Window[];\n private hasCustomTabIndex: boolean;\n\n // tooltip actions guards\n private guard: GuardType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTooltipElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-tooltip');\n @Watch('identifier')\n watchIdentifier(newValue: MgTooltip['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-tooltip> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderTooltipContent to update tooltip-content id\n this.renderTooltipContent();\n }\n\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n @Watch('message')\n watchMessage(newValue: MgTooltip['message']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tooltip> prop \"message\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n if (this.mgTooltipContent !== undefined) this.mgTooltipContent.message = newValue;\n }\n\n /**\n * Tooltip placement\n */\n @Prop({ mutable: true }) placement: TooltipPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /**\n * Display tooltip\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n watchDisplay(newValue: MgTooltip['display']): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n /**\n * Disable tooltip\n */\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgTooltip['disabled']): void {\n if (this.hasCustomTabIndex) {\n if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n else if (!this.tooltipedElement.hasAttribute('tabindex')) this.tooltipedElement.setAttribute('tabindex', '0');\n }\n }\n\n /**\n * Show tooltip\n */\n private show = (): void => {\n // Make the tooltip visible\n this.mgTooltipContent.dataset.show = '';\n // hide when click outside on nextTick to prevent event to trigger after creation\n nextTick(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.handleClickOutside, false);\n localWindow.addEventListener('keydown', this.handlePressEscape, false);\n });\n });\n };\n\n /**\n * Hide tooltip\n */\n private hide = (): void => {\n // Hide the tooltip\n this.mgTooltipContent.removeAttribute('data-show');\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keyboard', this.handlePressEscape, false);\n });\n };\n\n /**\n * Check if clicked outside of component and hide tooltip\n * @param event - mouse event\n */\n private handleClickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n };\n\n /**\n * Check if 'Escape' key is pressed of component and hide tooltip\n * @param event - keyboard event\n */\n private handlePressEscape = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.setDisplay(false);\n this.resetGuard();\n }\n };\n\n /**\n * Method to set display prop\n * @param newValue - display prop new value\n * @param condition - additionnal condition to apply display prop newValue\n */\n private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n if (!this.disabled && condition) this.display = newValue;\n };\n\n /**\n * Action for tooltip element and tooltiped element mouse listener\n * @param elementGuard - tooltip element guard\n * @param eventName - event name\n * @param conditionalGuard - guard condition\n */\n private tooltipMouseListenerAction = (elementGuard: GuardType, eventName: 'mouseenter' | 'mouseleave', conditionalGuard: GuardType): void => {\n // active FOCUS guard cancel process\n if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {\n return;\n }\n\n // Update guard by element guard\n this.guard = elementGuard;\n\n if (eventName !== 'mouseenter') {\n // process action in the next event loop macro task\n setTimeout(() => {\n this.setDisplay(false, this.guard !== conditionalGuard);\n this.resetGuard();\n }, 100);\n } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n this.setDisplay(true);\n }\n };\n\n /**\n * Method to reset guard value\n */\n private resetGuard = (): void => {\n this.guard = undefined;\n };\n\n /**\n * Update slot content when it is a mg-button\n * @param mgButton - slotted mg-button\n */\n private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';\n const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);\n // For disabled mg-button, we need to wrap it in a new element\n // We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`\n // AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button\n if (mgButton.disabled && !hasButtonWrapper) {\n // wrap mg-button in a div\n const div = document.createElement('div');\n div.classList.add(buttonWrapperClass);\n mgButton.parentNode.insertBefore(div, mgButton);\n div.appendChild(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(div);\n } else if (!mgButton.disabled && hasButtonWrapper) {\n this.element.firstElementChild.replaceWith(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(mgButton);\n }\n };\n\n /**\n * Set Floating UI instance\n * @param strategy - Floating UI strategy to apply on instance\n */\n private setFloatingUI = (strategy: Strategy): void => {\n // Initial styles configuration\n Object.assign(this.mgTooltipContent.style, {\n position: strategy,\n top: '0',\n left: '0',\n transform: 'translate(0, 0)',\n });\n\n // Create Floating UI instance with autoUpdate\n this.floatingUICleanup = autoUpdate(this.tooltipedElement, this.mgTooltipContent, () => {\n computePosition(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement as Placement,\n strategy,\n middleware: [offset(8), flip(), shift({ limiter: limitShift() }), arrow({ element: this.mgTooltipContent.querySelector('[data-floating-arrow]') })],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgTooltipContent.style, {\n transform: !isNaN(x) && !isNaN(y) ? `translate(${x}px, ${y}px)` : undefined,\n });\n\n // Update arrow style\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n const arrowElement: HTMLElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');\n // https://floating-ui.com/docs/arrow\n // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n // Due to this, either x or y will be undefined, depending on the side of placement.\n // The above code uses `isNaN` to check for null and undefined simultaneously.\n // Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!\n const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n Object.assign(arrowElement.style, {\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '-4px',\n position: 'absolute',\n });\n\n this.mgTooltipContent.setAttribute('data-placement', placement);\n });\n });\n };\n\n /**\n * Define selected element to become tooltip selector and init listeners\n * @param element - tooltiped element\n */\n private setTooltipedElement = (element: HTMLElement): void => {\n this.tooltipedElement = element;\n\n // Manage tooltipedElement focus events\n this.tooltipedElement.addEventListener('focus', () => {\n this.guard = Guard.FOCUS;\n this.setDisplay(true);\n });\n\n // as `click` event is the composition of `mousedown` and `mouseup` event,\n // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n // we reset the guard on `mouseup` event to unlock tooltip\n this.tooltipedElement.addEventListener('mouseup', () => {\n this.resetGuard();\n });\n\n this.tooltipedElement.addEventListener('blur', () => {\n this.resetGuard();\n this.setDisplay(false);\n });\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.tooltipedElement.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n\n this.tooltipedElement.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n };\n\n /**\n * Set button mutation observer\n * @param mgButton - mg-button to observe\n */\n private setMgButtonMutationObserver = (mgButton: HTMLMgButtonElement): void => {\n new MutationObserver(mutationList => {\n // stop process when none of mutations attributed is disabled\n if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) return;\n\n // set guard when one of mutations is for a disabled with disabled-on-click\n if (mutationList.some((mutation: MutationRecord & { target: HTMLMgButtonElement }) => mutation.target.disabled && mutation.target.disableOnClick)) {\n this.guard = Guard.DISABLE_ON_CLICK;\n }\n\n // when the disabled-on-click guard is running we stop process\n if (this.guard === Guard.DISABLE_ON_CLICK) return;\n\n // update button wrapper\n this.setMgButtonWrapper(mgButton);\n\n // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n this.resetGuard();\n\n // update Floating UI instance\n this.floatingUICleanup();\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n }).observe(mgButton, { attributes: true });\n };\n\n /**\n * Set tooltiped element aria-describedby\n * @param element - element to update\n */\n private setAriaDescribedby = (element: HTMLElement): void => {\n // Set aria-describedby\n if (!element.hasAttribute('aria-describedby')) {\n this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n } else {\n // We ensure to have uniq ids\n element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);\n }\n };\n\n /**\n * Render tooltip content element and init listeners\n */\n private renderTooltipContent(): void {\n if (this.mgTooltipContent !== undefined) {\n this.mgTooltipContent.setAttribute('id', this.identifier);\n } else {\n this.mgTooltipContent = document.createElement('mg-tooltip-content');\n this.mgTooltipContent.setAttribute('slot', 'content');\n this.mgTooltipContent.setAttribute('id', this.identifier);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgTooltipContent.appendChild(arrow);\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.mgTooltipContent.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n this.mgTooltipContent.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n\n // append tooltip element to component\n this.element.appendChild(this.mgTooltipContent);\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * set variables\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n\n // Get tooltip element\n this.renderTooltipContent();\n\n //validate properties\n this.watchPlacement(this.placement);\n this.watchDisabled(this.disabled);\n this.watchMessage(this.message);\n this.watchIdentifier(this.identifier);\n }\n\n /**\n * Get slotted element\n * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n * We need to attach the focused element to the tooltip (aria-describedby)\n */\n componentDidLoad(): void {\n // get slotted element wich is not the tooltip\n const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n // Get interactive element\n const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n this.setTooltipedElement(interactiveElement || slotElement);\n\n // Check if slotted element is a disabled mg-button\n // In this case we wrap the mg-button into a div to enable the tooltip\n if (isButton(slotElement)) {\n this.setMgButtonMutationObserver(slotElement);\n this.setMgButtonWrapper(slotElement);\n }\n\n // Add tabindex to slotted element if we can't find any interactive element\n if (!this.disabled && [undefined, null].includes(interactiveElement)) {\n this.hasCustomTabIndex = true;\n slotElement.tabIndex = 0;\n // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n slotElement.setAttribute('role', 'button');\n }\n\n // apply a11y aria\n this.setAriaDescribedby(slotElement);\n\n // set Tooltip\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n\n // add document keyboard handler\n document.addEventListener('keydown', this.handlePressEscape);\n\n // check props\n this.watchDisplay(this.display);\n }\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.floatingUICleanup();\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handlePressEscape);\n this.windows?.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keydown', this.handlePressEscape, false);\n });\n // cleanup Floating UI\n this.floatingUICleanup();\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|