@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
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"components/molecules/inputs/mg-input-numeric/mg-input-numeric.js",
|
|
21
21
|
"components/molecules/inputs/mg-input-password/mg-input-password.js",
|
|
22
22
|
"components/molecules/inputs/mg-input-radio/mg-input-radio.js",
|
|
23
|
+
"components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js",
|
|
23
24
|
"components/molecules/inputs/mg-input-select/mg-input-select.js",
|
|
24
25
|
"components/molecules/inputs/mg-input-text/mg-input-text.js",
|
|
25
26
|
"components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
|
|
@@ -42,7 +43,7 @@
|
|
|
42
43
|
],
|
|
43
44
|
"compiler": {
|
|
44
45
|
"name": "@stencil/core",
|
|
45
|
-
"version": "4.
|
|
46
|
+
"version": "4.25.1",
|
|
46
47
|
"typescriptVersion": "5.5.4"
|
|
47
48
|
},
|
|
48
49
|
"collections": [],
|
|
@@ -123,7 +123,7 @@ export class MgIcon {
|
|
|
123
123
|
"mutable": false,
|
|
124
124
|
"complexType": {
|
|
125
125
|
"original": "IconType",
|
|
126
|
-
"resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"copy\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
|
|
126
|
+
"resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"copy\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
|
|
127
127
|
"references": {
|
|
128
128
|
"IconType": {
|
|
129
129
|
"location": "import",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-tooltip.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mg-tooltip.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx"],"names":[],"mappings":"AACA,cAAc,kCAAkC,CAAC;AAIjD,MAAM,CAAC,MAAM,KAAK,GAA8B;IAC9C,KAAK,EAAE,OAAO;IACd,qBAAqB,EAAE,cAAc;IACrC,uBAAuB,EAAE,gBAAgB;IACzC,gBAAgB,EAAE,gBAAgB;CACnC,CAAC","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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString } from "@mgdis/stencil-helpers";
|
|
3
|
-
import {
|
|
4
|
-
import { Guard } from "./mg-tooltip.conf";
|
|
3
|
+
import { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow } from "@floating-ui/dom";
|
|
4
|
+
import { Guard, isFloatingUIPlacement } from "./mg-tooltip.conf";
|
|
5
5
|
/**
|
|
6
6
|
* HTMLMgButtonElement type guard
|
|
7
7
|
* @param element - element to check
|
|
@@ -37,8 +37,6 @@ export class MgTooltip {
|
|
|
37
37
|
this.show = () => {
|
|
38
38
|
// Make the tooltip visible
|
|
39
39
|
this.mgTooltipContent.dataset.show = '';
|
|
40
|
-
// Enable the event listeners
|
|
41
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
42
40
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
43
41
|
nextTick(() => {
|
|
44
42
|
this.windows.forEach((localWindow) => {
|
|
@@ -53,8 +51,6 @@ export class MgTooltip {
|
|
|
53
51
|
this.hide = () => {
|
|
54
52
|
// Hide the tooltip
|
|
55
53
|
this.mgTooltipContent.removeAttribute('data-show');
|
|
56
|
-
// Disable the event listeners
|
|
57
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
58
54
|
// Remove event listener
|
|
59
55
|
this.windows.forEach((localWindow) => {
|
|
60
56
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
@@ -144,28 +140,50 @@ export class MgTooltip {
|
|
|
144
140
|
}
|
|
145
141
|
};
|
|
146
142
|
/**
|
|
147
|
-
* Set
|
|
148
|
-
* @param strategy -
|
|
143
|
+
* Set Floating UI instance
|
|
144
|
+
* @param strategy - Floating UI strategy to apply on instance
|
|
149
145
|
*/
|
|
150
|
-
this.
|
|
151
|
-
//
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
},
|
|
167
|
-
}
|
|
168
|
-
|
|
146
|
+
this.setFloatingUI = (strategy) => {
|
|
147
|
+
// Initial styles configuration
|
|
148
|
+
Object.assign(this.mgTooltipContent.style, {
|
|
149
|
+
position: strategy,
|
|
150
|
+
top: '0',
|
|
151
|
+
left: '0',
|
|
152
|
+
transform: 'translate(0, 0)',
|
|
153
|
+
});
|
|
154
|
+
// Create Floating UI instance with autoUpdate
|
|
155
|
+
this.floatingUICleanup = autoUpdate(this.tooltipedElement, this.mgTooltipContent, () => {
|
|
156
|
+
computePosition(this.tooltipedElement, this.mgTooltipContent, {
|
|
157
|
+
placement: this.placement,
|
|
158
|
+
strategy,
|
|
159
|
+
middleware: [offset(8), flip(), shift({ limiter: limitShift() }), arrow({ element: this.mgTooltipContent.querySelector('[data-floating-arrow]') })],
|
|
160
|
+
}).then(({ x, y, placement, middlewareData }) => {
|
|
161
|
+
Object.assign(this.mgTooltipContent.style, {
|
|
162
|
+
transform: !isNaN(x) && !isNaN(y) ? `translate(${x}px, ${y}px)` : undefined,
|
|
163
|
+
});
|
|
164
|
+
// Update arrow style
|
|
165
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
166
|
+
const staticSide = {
|
|
167
|
+
top: 'bottom',
|
|
168
|
+
right: 'left',
|
|
169
|
+
bottom: 'top',
|
|
170
|
+
left: 'right',
|
|
171
|
+
}[placement.split('-')[0]];
|
|
172
|
+
const arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
|
|
173
|
+
// https://floating-ui.com/docs/arrow
|
|
174
|
+
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
175
|
+
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
176
|
+
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
177
|
+
// Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
178
|
+
const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
|
|
179
|
+
Object.assign(arrowElement.style, {
|
|
180
|
+
left: numberToPx(arrowX),
|
|
181
|
+
top: numberToPx(arrowY),
|
|
182
|
+
[staticSide]: '-4px',
|
|
183
|
+
position: 'absolute',
|
|
184
|
+
});
|
|
185
|
+
this.mgTooltipContent.setAttribute('data-placement', placement);
|
|
186
|
+
});
|
|
169
187
|
});
|
|
170
188
|
};
|
|
171
189
|
/**
|
|
@@ -218,8 +236,9 @@ export class MgTooltip {
|
|
|
218
236
|
// Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
|
|
219
237
|
// we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
|
|
220
238
|
this.resetGuard();
|
|
221
|
-
// update
|
|
222
|
-
this.
|
|
239
|
+
// update Floating UI instance
|
|
240
|
+
this.floatingUICleanup();
|
|
241
|
+
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
223
242
|
}).observe(mgButton, { attributes: true });
|
|
224
243
|
};
|
|
225
244
|
/**
|
|
@@ -251,6 +270,10 @@ export class MgTooltip {
|
|
|
251
270
|
if (this.mgTooltipContent !== undefined)
|
|
252
271
|
this.mgTooltipContent.message = newValue;
|
|
253
272
|
}
|
|
273
|
+
watchPlacement(newValue) {
|
|
274
|
+
if (!isFloatingUIPlacement(newValue))
|
|
275
|
+
this.placement = 'bottom';
|
|
276
|
+
}
|
|
254
277
|
watchDisplay(newValue) {
|
|
255
278
|
if (newValue) {
|
|
256
279
|
this.show();
|
|
@@ -280,7 +303,7 @@ export class MgTooltip {
|
|
|
280
303
|
this.mgTooltipContent.setAttribute('id', this.identifier);
|
|
281
304
|
const arrow = document.createElement('div');
|
|
282
305
|
arrow.setAttribute('slot', 'arrow');
|
|
283
|
-
arrow.dataset.
|
|
306
|
+
arrow.dataset.floatingArrow = '';
|
|
284
307
|
this.mgTooltipContent.appendChild(arrow);
|
|
285
308
|
// manage tooltipElement & tooltipedElement mouseenter/mouseleave events
|
|
286
309
|
this.mgTooltipContent.addEventListener('mouseenter', () => {
|
|
@@ -305,6 +328,7 @@ export class MgTooltip {
|
|
|
305
328
|
// Get tooltip element
|
|
306
329
|
this.renderTooltipContent();
|
|
307
330
|
//validate properties
|
|
331
|
+
this.watchPlacement(this.placement);
|
|
308
332
|
this.watchDisabled(this.disabled);
|
|
309
333
|
this.watchMessage(this.message);
|
|
310
334
|
this.watchIdentifier(this.identifier);
|
|
@@ -337,7 +361,7 @@ export class MgTooltip {
|
|
|
337
361
|
// apply a11y aria
|
|
338
362
|
this.setAriaDescribedby(slotElement);
|
|
339
363
|
// set Tooltip
|
|
340
|
-
this.
|
|
364
|
+
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
341
365
|
// add document keyboard handler
|
|
342
366
|
document.addEventListener('keydown', this.handlePressEscape);
|
|
343
367
|
// check props
|
|
@@ -347,7 +371,8 @@ export class MgTooltip {
|
|
|
347
371
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
348
372
|
*/
|
|
349
373
|
componentDidUpdate() {
|
|
350
|
-
this.
|
|
374
|
+
this.floatingUICleanup();
|
|
375
|
+
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
351
376
|
}
|
|
352
377
|
/**
|
|
353
378
|
* remove listeners
|
|
@@ -359,13 +384,15 @@ export class MgTooltip {
|
|
|
359
384
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
360
385
|
localWindow.removeEventListener('keydown', this.handlePressEscape, false);
|
|
361
386
|
});
|
|
387
|
+
// cleanup Floating UI
|
|
388
|
+
this.floatingUICleanup();
|
|
362
389
|
}
|
|
363
390
|
/**
|
|
364
391
|
* Render
|
|
365
392
|
* @returns HTML Element
|
|
366
393
|
*/
|
|
367
394
|
render() {
|
|
368
|
-
return (h(Host, { key: '
|
|
395
|
+
return (h(Host, { key: '38823340f62287af2769d7dee3313dc83405fd87' }, h("slot", { key: '598ed57134a1163630f036328139572acb467f41' }), h("slot", { key: '8da7b05b4675b00a4b5e90a3e9b8c0532b1afac1', name: "content" })));
|
|
369
396
|
}
|
|
370
397
|
static get is() { return "mg-tooltip"; }
|
|
371
398
|
static get encapsulation() { return "shadow"; }
|
|
@@ -422,15 +449,15 @@ export class MgTooltip {
|
|
|
422
449
|
},
|
|
423
450
|
"placement": {
|
|
424
451
|
"type": "string",
|
|
425
|
-
"mutable":
|
|
452
|
+
"mutable": true,
|
|
426
453
|
"complexType": {
|
|
427
|
-
"original": "
|
|
454
|
+
"original": "TooltipPlacementType",
|
|
428
455
|
"resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
|
|
429
456
|
"references": {
|
|
430
|
-
"
|
|
457
|
+
"TooltipPlacementType": {
|
|
431
458
|
"location": "import",
|
|
432
|
-
"path": "
|
|
433
|
-
"id": "
|
|
459
|
+
"path": "./mg-tooltip.conf",
|
|
460
|
+
"id": "src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx::TooltipPlacementType"
|
|
434
461
|
}
|
|
435
462
|
}
|
|
436
463
|
},
|
|
@@ -496,6 +523,9 @@ export class MgTooltip {
|
|
|
496
523
|
}, {
|
|
497
524
|
"propName": "message",
|
|
498
525
|
"methodName": "watchMessage"
|
|
526
|
+
}, {
|
|
527
|
+
"propName": "placement",
|
|
528
|
+
"methodName": "watchPlacement"
|
|
499
529
|
}, {
|
|
500
530
|
"propName": "display",
|
|
501
531
|
"methodName": "watchDisplay"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-tooltip.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"file":"mg-tooltip.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
@@ -237,7 +237,7 @@ export class MgInput {
|
|
|
237
237
|
*/
|
|
238
238
|
render() {
|
|
239
239
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
240
|
-
return (h(Host, { key: '
|
|
240
|
+
return (h(Host, { key: '77264d2ab6e11c17aa41084e1a92a1f73ca0dfdb', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '4ad77f1659c1b89fd162a9a5c12cdedaaa6be803', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'b542d2b90f48a2cc40cde20f1ee17e69770f13c6', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'ef262dc7bfef3b06bc261b2755c317e5c8d8c710', class: "mg-c-input__input-container" }, h("div", { key: '4ec59056ceebad738164f242dd272a5bdb89aaa0', class: "mg-c-input__input" }, h("slot", { key: '1cefe1817b4c33cac440fe6cde1cb780bde52c05' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '568732b397b397195f123376ef1a958a8043dc28', class: "mg-c-input__help-text" }, h("slot", { key: '98092704188057b00b24815ab03d874b96d46b4c', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'd72f798a577b626b8b7d0de4094b68c4fd105535', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: 'd258365216d2a3f1810776b06f603aa392e12808', name: this.slotError }))))));
|
|
241
241
|
}
|
|
242
242
|
static get is() { return "mg-input"; }
|
|
243
243
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input/mg-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAwB,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzI;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;IALpB;QAamB,cAAS,GAAG,OAAO,CAAC;QACpB,cAAS,GAAG,OAAO,CAAC;QACpB,iBAAY,GAAG,WAAW,CAAC;QAM5C,QAAQ;QACS,eAAU,GAAG,YAAY,CAAC;QAC1B,kBAAa,GAAG,uBAAuB,CAAC;QACxC,oBAAe,GAAG,0BAA0B,CAAC;QA6C9D;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAcnC;;WAEG;QACK,oBAAe,GAAoB,OAAO,CAAC;QAQnD;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QA6ElC;;WAEG;QACM,eAAU,GAAY,KAAK,CAAC;QAErC;;WAEG;QACM,eAAU,GAAY,KAAK,CAAC;QAErC;;WAEG;QACM,eAAU,GAAY,KAAK,CAAC;QAErC;;WAEG;QACM,mBAAc,GAAY,KAAK,CAAC;QA8GzC;;;WAGG;QACK,kBAAa,GAAG,GAAyB,EAAE,CAAC,CAClD,kBAAY,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YACzE,eAAS,IAAI,EAAC,aAAa,GAAW,CAC3B,CACd,CAAC;KAiCH;IAlTC,eAAe,CAAC,QAA+B;QAC7C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,gFAAgF,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACzH,CAAC;aAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,gEAAgE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACvG,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,UAAU,YAAY,CAAC;YACjD,IAAI,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;QACpD,CAAC;IACH,CAAC;IAYD,eAAe,CAAC,QAA+B;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAQD,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC;IAYD,oBAAoB,CAAC,QAAoC;QACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzC,MAAM,IAAI,KAAK,CAAC,qDAAqD,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5I,CAAC;IACH,CAAC;IAYD,iBAAiB,CAAC,QAAiC;;QACjD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC/C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAClD,MAAA,IAAI,CAAC,uBAAuB,0CAAE,MAAM,EAAE,CAAC;YACvC,IAAI,CAAC,uBAAuB,GAAG,SAAS,CAAC;QAC3C,CAAC;IACH,CAAC;IAOD,aAAa,CAAC,QAA6B;;QACzC,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,MAAA,IAAI,CAAC,0BAA0B,0CAAE,MAAM,EAAE,CAAC;YAC1C,IAAI,CAAC,0BAA0B,GAAG,SAAS,CAAC;QAC9C,CAAC;IACH,CAAC;IAUD,uBAAuB;QACrB,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO;QAC5B,WAAW;QACX,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC5D,YAAY;QACZ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;gBAAE,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxF,CAAC;QAED,gBAAgB;QAChB,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAClG,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uCAAuC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACvF,IAAG,kBAAkB,CAAC,IAAI;gBAAE,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;gBAC1G,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,8DAA8D;IAE9D,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9C,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACjE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAsBD;;OAEG;IACH,8DAA8D;IAM9D,UAAU;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,KAAK,CAAC,2EAA2E,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACtH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED;;kBAEc;IAEd;;OAEG;IACK,WAAW;QACjB,IAAI,gBAAgB,GAA4B,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QAEvG,2CAA2C;QAC3C,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,MAAM,EAAE,CAAC;QAE3B,uBAAuB;QACvB,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC5D;YACE,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC;YACxB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC;YAC/B,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;YACxC,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;YACvE,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;SAC1C,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE;YACxB,gBAAgB,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,uBAAuB;QACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QAC9C,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QAE/B,gBAAgB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC7C,CAAC;IAED;;OAEG;IACK,kBAAkB;QACxB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACtF,IAAI,IAAI,CAAC,uBAAuB,KAAK,IAAI,EAAE,CAAC;YAC1C,IAAI,CAAC,uBAAuB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC7D,IAAI,CAAC,uBAAuB,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACzD,CAAC;QACD,IAAI,CAAC,uBAAuB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACtE,IAAI,CAAC,uBAAuB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;IAC7D,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAC5F,IAAI,IAAI,CAAC,0BAA0B,KAAK,IAAI,EAAE,CAAC;YAC7C,IAAI,CAAC,0BAA0B,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAChE,IAAI,CAAC,0BAA0B,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC5D,CAAC;QACD,IAAI,CAAC,0BAA0B,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACpE,IAAI,CAAC,0BAA0B,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC5D,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5C,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YACvG,MAAM,IAAI,KAAK,CAAC,sDAAsD,IAAI,CAAC,UAAU,oCAAoC,CAAC,CAAC;QAC7H,CAAC;IACH,CAAC;IAYD;;;OAGG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;QACpD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,qBAAmB,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC,CAAC,CAAC,SAAS;YACpJ,4DAAK,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,sBAAsB,EAAE,IAAI,CAAC,SAAS,EAAE;gBAC/E,6DAAM,IAAI,EAAE,IAAI,CAAC,SAAS,GAAS;gBAClC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE,CAC7G;YACN,4DAAK,KAAK,EAAC,6BAA6B;gBACtC,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,8DAAa;oBACZ,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,eAAe,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAC7G;gBACL,IAAI,CAAC,0BAA0B,IAAI,CAClC,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAE,IAAI,CAAC,YAAY,GAAS,CAClC,CACP;gBACA,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IAAI,CACxC,4DAAK,KAAK,EAAC,mBAAmB,eAAW,WAAW;oBAClD,6DAAM,IAAI,EAAE,IAAI,CAAC,SAAS,GAAS,CAC/B,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/**\n * @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n */\n@Component({\n tag: 'mg-input',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n shadow: true,\n})\nexport class MgInput {\n /************\n * Internal *\n ************/\n\n // HTML selectors\n private helpTextId: string;\n private helpTextErrorId: string;\n private readonly slotLabel = 'label';\n private readonly slotError = 'error';\n private readonly slotHelpText = 'help-text';\n\n // slots elements\n private errorMessageSlotElement: HTMLElement;\n private helptextMessageSlotElement: HTMLElement;\n\n // style\n private readonly classInput = 'mg-c-input';\n private readonly classHasError = 'mg-c-input--has-error';\n private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgInput['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n } else if (!isValideID(newValue)) {\n console.error(`<mg-input> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n } else {\n this.helpTextId = `${this.identifier}-help-text`;\n this.helpTextErrorId = `${this.identifier}-error`;\n }\n }\n\n /**\n * Define input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n if (newValue) {\n this.element.classList.add(this.classLabelOnTop);\n } else {\n this.element.classList.remove(this.classLabelOnTop);\n }\n }\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide: boolean = false;\n @Watch('labelHide')\n @Watch('labelOnTop')\n watchLabelConfig(): void {\n if (this.labelHide && this.labelOnTop) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n @Watch('tooltipPosition')\n watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n if (!tooltipPositions.includes(newValue)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define if input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Define error message to display\n */\n @Prop() errorMessage?: string;\n @Watch('errorMessage')\n watchErrorMessage(newValue: MgInput['errorMessage']): void {\n if (newValue !== undefined) {\n this.element.classList.add(this.classHasError);\n this.renderErrorMessage();\n } else {\n this.element.classList.remove(this.classHasError);\n this.errorMessageSlotElement?.remove();\n this.errorMessageSlotElement = undefined;\n }\n }\n\n /**\n * Define help text to display\n */\n @Prop() helpText?: string;\n @Watch('helpText')\n watchHelpText(newValue: MgInput['helpText']): void {\n if (newValue && !this.isReadonly) {\n this.renderHelpText();\n } else {\n this.helptextMessageSlotElement?.remove();\n this.helptextMessageSlotElement = undefined;\n }\n }\n\n /**\n * Define aria-describedby ids to link with\n */\n @Prop() ariaDescribedbyIDs: string[];\n @Watch('identifier')\n @Watch('errorMessage')\n @Watch('helpText')\n @Watch('ariaDescribedbyIDs')\n watchAriaDescribedbyIDs(): void {\n if (this.isReadonly) return;\n // a11y IDs\n const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n // Help text\n if (this.helpText !== undefined) {\n this.renderHelpText();\n if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n }\n\n // Error Message\n if (this.errorMessage !== undefined) {\n this.renderErrorMessage();\n if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n }\n\n this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n if(ariaDescribedbyIDs.size) element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n else element.removeAttribute('aria-describedby');\n });\n }\n\n /**\n * Component classes\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n watchClass(): void {\n if (!this.element.classList.contains(this.classInput)) {\n this.element.classList.add(this.classInput);\n }\n this.isFieldset = this.element.classList.contains(classFieldset);\n this.isReadonly = this.element.classList.contains(classReadonly);\n this.isDisabled = this.element.classList.contains(classDisabled);\n this.isVerticalList = this.element.classList.contains(classVerticalList);\n }\n\n /**\n * Element is fieldset\n */\n @State() isFieldset: boolean = false;\n\n /**\n * Element is readonly\n */\n @State() isReadonly: boolean = false;\n\n /**\n * Element is disabled\n */\n @State() isDisabled: boolean = false;\n\n /**\n * Element is disabled\n */\n @State() isVerticalList: boolean = false;\n\n /**\n * Trigger label update\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n @Watch('label')\n @Watch('required')\n @Watch('isReadonly')\n @Watch('isFieldset')\n watchLabel(): void {\n if (!isValidString(this.label)) {\n throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n } else {\n this.watchAriaDescribedbyIDs();\n this.renderLabel();\n }\n }\n\n /************\n * Methods *\n ************/\n\n /**\n * Render input label\n */\n private renderLabel(): void {\n let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n // first remove previous labelslot if exist\n labelSlotElement?.remove();\n\n // create title element\n labelSlotElement = document.createElement('mg-input-title');\n [\n ['slot', this.slotLabel],\n ['identifier', this.identifier],\n ['readonly', this.isReadonly.toString()],\n ['required', ((this.required && !this.isDisabled) || false).toString()],\n ['is-legend', this.isFieldset.toString()],\n ].forEach(([attr, val]) => {\n labelSlotElement.setAttribute(attr, val);\n });\n\n // create label element\n const label = document.createElement('span');\n label.classList.add('mg-c-input-title__text');\n label.textContent = this.label;\n\n labelSlotElement.appendChild(label);\n this.element.appendChild(labelSlotElement);\n }\n\n /**\n * Render error message\n */\n private renderErrorMessage(): void {\n this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n if (this.errorMessageSlotElement === null) {\n this.errorMessageSlotElement = document.createElement('div');\n this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n this.element.appendChild(this.errorMessageSlotElement);\n }\n this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n this.errorMessageSlotElement.innerHTML = this.errorMessage;\n }\n\n /**\n * Render help text message\n */\n private renderHelpText(): void {\n this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n if (this.helptextMessageSlotElement === null) {\n this.helptextMessageSlotElement = document.createElement('div');\n this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n this.element.appendChild(this.helptextMessageSlotElement);\n }\n this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n this.helptextMessageSlotElement.innerHTML = this.helpText;\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.watchLabel();\n this.watchClass();\n this.watchLabelOnTop(this.labelOnTop);\n this.watchLabelConfig();\n this.watchTooltipPosition(this.tooltipPosition);\n this.watchHelpText(this.helpText);\n this.watchErrorMessage(this.errorMessage);\n }\n\n /**\n * Validate slots\n */\n componentDidLoad(): void {\n this.watchAriaDescribedbyIDs();\n if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n }\n }\n\n /**\n * Get tooltip node\n * @returns mg-tooltip\n */\n private renderTooltip = (): HTMLMgTooltipElement => (\n <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const isGroup = this.isFieldset && !this.isReadonly;\n return (\n <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n <slot name={this.slotLabel}></slot>\n {this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n </div>\n <div class=\"mg-c-input__input-container\">\n <div class=\"mg-c-input__input\">\n <slot></slot>\n {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()}\n </div>\n {this.helptextMessageSlotElement && (\n <div class=\"mg-c-input__help-text\">\n <slot name={this.slotHelpText}></slot>\n </div>\n )}\n {!this.isDisabled && this.errorMessage && (\n <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n <slot name={this.slotError}></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-input.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input/mg-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/**\n * @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n */\n@Component({\n tag: 'mg-input',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n shadow: true,\n})\nexport class MgInput {\n /************\n * Internal *\n ************/\n\n // HTML selectors\n private helpTextId: string;\n private helpTextErrorId: string;\n private readonly slotLabel = 'label';\n private readonly slotError = 'error';\n private readonly slotHelpText = 'help-text';\n\n // slots elements\n private errorMessageSlotElement: HTMLElement;\n private helptextMessageSlotElement: HTMLElement;\n\n // style\n private readonly classInput = 'mg-c-input';\n private readonly classHasError = 'mg-c-input--has-error';\n private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgInput['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n } else if (!isValideID(newValue)) {\n console.error(`<mg-input> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n } else {\n this.helpTextId = `${this.identifier}-help-text`;\n this.helpTextErrorId = `${this.identifier}-error`;\n }\n }\n\n /**\n * Define input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n if (newValue) {\n this.element.classList.add(this.classLabelOnTop);\n } else {\n this.element.classList.remove(this.classLabelOnTop);\n }\n }\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide: boolean = false;\n @Watch('labelHide')\n @Watch('labelOnTop')\n watchLabelConfig(): void {\n if (this.labelHide && this.labelOnTop) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n @Watch('tooltipPosition')\n watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n if (!tooltipPositions.includes(newValue)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define if input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Define error message to display\n */\n @Prop() errorMessage?: string;\n @Watch('errorMessage')\n watchErrorMessage(newValue: MgInput['errorMessage']): void {\n if (newValue !== undefined) {\n this.element.classList.add(this.classHasError);\n this.renderErrorMessage();\n } else {\n this.element.classList.remove(this.classHasError);\n this.errorMessageSlotElement?.remove();\n this.errorMessageSlotElement = undefined;\n }\n }\n\n /**\n * Define help text to display\n */\n @Prop() helpText?: string;\n @Watch('helpText')\n watchHelpText(newValue: MgInput['helpText']): void {\n if (newValue && !this.isReadonly) {\n this.renderHelpText();\n } else {\n this.helptextMessageSlotElement?.remove();\n this.helptextMessageSlotElement = undefined;\n }\n }\n\n /**\n * Define aria-describedby ids to link with\n */\n @Prop() ariaDescribedbyIDs: string[];\n @Watch('identifier')\n @Watch('errorMessage')\n @Watch('helpText')\n @Watch('ariaDescribedbyIDs')\n watchAriaDescribedbyIDs(): void {\n if (this.isReadonly) return;\n // a11y IDs\n const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n // Help text\n if (this.helpText !== undefined) {\n this.renderHelpText();\n if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n }\n\n // Error Message\n if (this.errorMessage !== undefined) {\n this.renderErrorMessage();\n if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n }\n\n this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n if (ariaDescribedbyIDs.size) element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n else element.removeAttribute('aria-describedby');\n });\n }\n\n /**\n * Component classes\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n watchClass(): void {\n if (!this.element.classList.contains(this.classInput)) {\n this.element.classList.add(this.classInput);\n }\n this.isFieldset = this.element.classList.contains(classFieldset);\n this.isReadonly = this.element.classList.contains(classReadonly);\n this.isDisabled = this.element.classList.contains(classDisabled);\n this.isVerticalList = this.element.classList.contains(classVerticalList);\n }\n\n /**\n * Element is fieldset\n */\n @State() isFieldset: boolean = false;\n\n /**\n * Element is readonly\n */\n @State() isReadonly: boolean = false;\n\n /**\n * Element is disabled\n */\n @State() isDisabled: boolean = false;\n\n /**\n * Element is disabled\n */\n @State() isVerticalList: boolean = false;\n\n /**\n * Trigger label update\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n @Watch('label')\n @Watch('required')\n @Watch('isReadonly')\n @Watch('isFieldset')\n watchLabel(): void {\n if (!isValidString(this.label)) {\n throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n } else {\n this.watchAriaDescribedbyIDs();\n this.renderLabel();\n }\n }\n\n /************\n * Methods *\n ************/\n\n /**\n * Render input label\n */\n private renderLabel(): void {\n let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n // first remove previous labelslot if exist\n labelSlotElement?.remove();\n\n // create title element\n labelSlotElement = document.createElement('mg-input-title');\n [\n ['slot', this.slotLabel],\n ['identifier', this.identifier],\n ['readonly', this.isReadonly.toString()],\n ['required', ((this.required && !this.isDisabled) || false).toString()],\n ['is-legend', this.isFieldset.toString()],\n ].forEach(([attr, val]) => {\n labelSlotElement.setAttribute(attr, val);\n });\n\n // create label element\n const label = document.createElement('span');\n label.classList.add('mg-c-input-title__text');\n label.textContent = this.label;\n\n labelSlotElement.appendChild(label);\n this.element.appendChild(labelSlotElement);\n }\n\n /**\n * Render error message\n */\n private renderErrorMessage(): void {\n this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n if (this.errorMessageSlotElement === null) {\n this.errorMessageSlotElement = document.createElement('div');\n this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n this.element.appendChild(this.errorMessageSlotElement);\n }\n this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n this.errorMessageSlotElement.innerHTML = this.errorMessage;\n }\n\n /**\n * Render help text message\n */\n private renderHelpText(): void {\n this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n if (this.helptextMessageSlotElement === null) {\n this.helptextMessageSlotElement = document.createElement('div');\n this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n this.element.appendChild(this.helptextMessageSlotElement);\n }\n this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n this.helptextMessageSlotElement.innerHTML = this.helpText;\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.watchLabel();\n this.watchClass();\n this.watchLabelOnTop(this.labelOnTop);\n this.watchLabelConfig();\n this.watchTooltipPosition(this.tooltipPosition);\n this.watchHelpText(this.helpText);\n this.watchErrorMessage(this.errorMessage);\n }\n\n /**\n * Validate slots\n */\n componentDidLoad(): void {\n this.watchAriaDescribedbyIDs();\n if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n }\n }\n\n /**\n * Get tooltip node\n * @returns mg-tooltip\n */\n private renderTooltip = (): HTMLMgTooltipElement => (\n <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const isGroup = this.isFieldset && !this.isReadonly;\n return (\n <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n <slot name={this.slotLabel}></slot>\n {this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n </div>\n <div class=\"mg-c-input__input-container\">\n <div class=\"mg-c-input__input\">\n <slot></slot>\n {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()}\n </div>\n {this.helptextMessageSlotElement && (\n <div class=\"mg-c-input__help-text\">\n <slot name={this.slotHelpText}></slot>\n </div>\n )}\n {!this.isDisabled && this.errorMessage && (\n <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n <slot name={this.slotError}></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -512,7 +512,7 @@ export class MgInputCheckbox {
|
|
|
512
512
|
else {
|
|
513
513
|
inputContent = this.renderCheckboxMulti();
|
|
514
514
|
}
|
|
515
|
-
return (h("mg-input", { key: '
|
|
515
|
+
return (h("mg-input", { key: '29c4a52d2f3a0e3d3b2a6f55ce3374aa818cf4eb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
|
|
516
516
|
}
|
|
517
517
|
static get is() { return "mg-input-checkbox"; }
|
|
518
518
|
static get encapsulation() { return "shadow"; }
|