@ng-matero/extensions 15.5.1 → 16.0.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/alert/alert.d.ts +1 -1
- package/button/button-loading.d.ts +1 -1
- package/checkbox-group/checkbox-group.d.ts +1 -1
- package/colorpicker/colorpicker-input.d.ts +1 -1
- package/colorpicker/colorpicker-toggle.d.ts +1 -1
- package/colorpicker/colorpicker.d.ts +2 -2
- package/datetimepicker/calendar-body.d.ts +1 -1
- package/datetimepicker/calendar.d.ts +1 -1
- package/datetimepicker/clock.d.ts +1 -1
- package/datetimepicker/clock.scss +1 -4
- package/datetimepicker/datetimepicker-input.d.ts +1 -1
- package/datetimepicker/datetimepicker-toggle.d.ts +1 -1
- package/datetimepicker/datetimepicker.d.ts +2 -2
- package/datetimepicker/month-view.d.ts +1 -1
- package/datetimepicker/multi-year-view.d.ts +1 -1
- package/datetimepicker/time.d.ts +2 -2
- package/datetimepicker/year-view.d.ts +1 -1
- package/esm2022/alert/alert-module.mjs +19 -0
- package/esm2022/alert/alert.mjs +53 -0
- package/esm2022/button/button-loading.mjs +77 -0
- package/esm2022/button/button-module.mjs +21 -0
- package/esm2022/checkbox-group/checkbox-group-module.mjs +22 -0
- package/esm2022/checkbox-group/checkbox-group.mjs +234 -0
- package/esm2022/colorpicker/colorpicker-input.mjs +229 -0
- package/esm2022/colorpicker/colorpicker-module.mjs +64 -0
- package/esm2022/colorpicker/colorpicker-toggle.mjs +103 -0
- package/esm2022/colorpicker/colorpicker.mjs +367 -0
- package/esm2022/column-resize/column-resize-directives/column-resize-flex.mjs +46 -0
- package/esm2022/column-resize/column-resize-directives/column-resize.mjs +46 -0
- package/esm2022/column-resize/column-resize-module.mjs +29 -0
- package/esm2022/column-resize/column-resize-notifier.mjs +49 -0
- package/esm2022/column-resize/column-resize.mjs +83 -0
- package/esm2022/column-resize/column-size-store.mjs +21 -0
- package/esm2022/column-resize/event-dispatcher.mjs +68 -0
- package/esm2022/column-resize/overlay-handle.mjs +147 -0
- package/esm2022/column-resize/resizable.mjs +200 -0
- package/esm2022/column-resize/resize-strategy.mjs +235 -0
- package/{esm2020 → esm2022}/core/datetime/datetime-adapter.mjs +1 -1
- package/esm2022/core/datetime/datetime.module.mjs +44 -0
- package/esm2022/core/datetime/native-datetime-adapter.mjs +139 -0
- package/esm2022/core/pipes/is-template-ref.pipe.mjs +15 -0
- package/esm2022/core/pipes/pipes.module.mjs +20 -0
- package/esm2022/core/pipes/to-observable.pipe.mjs +16 -0
- package/esm2022/datetimepicker/calendar-body.mjs +79 -0
- package/esm2022/datetimepicker/calendar.mjs +672 -0
- package/esm2022/datetimepicker/clock.mjs +354 -0
- package/esm2022/datetimepicker/datetimepicker-input.mjs +350 -0
- package/esm2022/datetimepicker/datetimepicker-intl.mjs +64 -0
- package/esm2022/datetimepicker/datetimepicker-module.mjs +83 -0
- package/esm2022/datetimepicker/datetimepicker-toggle.mjs +106 -0
- package/esm2022/datetimepicker/datetimepicker.mjs +529 -0
- package/esm2022/datetimepicker/month-view.mjs +149 -0
- package/esm2022/datetimepicker/multi-year-view.mjs +215 -0
- package/esm2022/datetimepicker/time.mjs +458 -0
- package/esm2022/datetimepicker/year-view.mjs +139 -0
- package/esm2022/dialog/dialog-container.mjs +36 -0
- package/esm2022/dialog/dialog-module.mjs +25 -0
- package/esm2022/dialog/dialog.mjs +75 -0
- package/esm2022/drawer/drawer-container.mjs +253 -0
- package/esm2022/drawer/drawer-module.mjs +23 -0
- package/esm2022/drawer/drawer.mjs +167 -0
- package/esm2022/grid/cell.mjs +117 -0
- package/{esm2020 → esm2022}/grid/column-menu.mjs +6 -5
- package/esm2022/grid/column-resize/column-resize-directives/column-resize-flex.mjs +38 -0
- package/esm2022/grid/column-resize/column-resize-directives/column-resize.mjs +38 -0
- package/esm2022/grid/column-resize/column-resize-module.mjs +44 -0
- package/esm2022/grid/column-resize/overlay-handle.mjs +61 -0
- package/esm2022/grid/column-resize/resizable-directives/resizable.mjs +63 -0
- package/esm2022/grid/column-resize/resize-strategy.mjs +43 -0
- package/esm2022/grid/expansion-toggle.mjs +65 -0
- package/esm2022/grid/grid-module.mjs +137 -0
- package/esm2022/grid/grid-pipes.mjs +113 -0
- package/esm2022/grid/grid-utils.mjs +64 -0
- package/esm2022/grid/grid.mjs +630 -0
- package/esm2022/loader/loader-module.mjs +21 -0
- package/esm2022/loader/loader.mjs +70 -0
- package/esm2022/popover/popover-content.mjs +92 -0
- package/esm2022/popover/popover-module.mjs +25 -0
- package/esm2022/popover/popover-target.mjs +18 -0
- package/esm2022/popover/popover-trigger.mjs +472 -0
- package/esm2022/popover/popover.mjs +384 -0
- package/esm2022/progress/progress-module.mjs +19 -0
- package/esm2022/progress/progress.mjs +56 -0
- package/esm2022/select/option.mjs +58 -0
- package/esm2022/select/select-module.mjs +75 -0
- package/esm2022/select/select.mjs +561 -0
- package/esm2022/select/templates.mjs +135 -0
- package/esm2022/slider/slider-module.mjs +20 -0
- package/esm2022/slider/slider.mjs +1116 -0
- package/esm2022/split/split-module.mjs +20 -0
- package/esm2022/split/split-pane.mjs +150 -0
- package/esm2022/split/split.mjs +635 -0
- package/esm2022/tooltip/tooltip-module.mjs +25 -0
- package/esm2022/tooltip/tooltip.mjs +930 -0
- package/{fesm2020 → fesm2022}/mtxAlert.mjs +7 -7
- package/{fesm2020 → fesm2022}/mtxAlert.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxButton.mjs +7 -7
- package/{fesm2015 → fesm2022}/mtxButton.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxCheckboxGroup.mjs +13 -13
- package/{fesm2020 → fesm2022}/mtxCheckboxGroup.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxColorpicker.mjs +41 -41
- package/{fesm2020 → fesm2022}/mtxColorpicker.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxColumnResize.mjs +46 -46
- package/{fesm2015 → fesm2022}/mtxColumnResize.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxCore.mjs +26 -26
- package/fesm2022/mtxCore.mjs.map +1 -0
- package/{fesm2020 → fesm2022}/mtxDatetimepicker.mjs +84 -80
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -0
- package/{fesm2020 → fesm2022}/mtxDialog.mjs +10 -10
- package/{fesm2015 → fesm2022}/mtxDialog.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxDrawer.mjs +10 -10
- package/{fesm2020 → fesm2022}/mtxDrawer.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxGrid.mjs +120 -120
- package/{fesm2020 → fesm2022}/mtxGrid.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxLoader.mjs +7 -7
- package/{fesm2020 → fesm2022}/mtxLoader.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxPopover.mjs +19 -19
- package/{fesm2020 → fesm2022}/mtxPopover.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxProgress.mjs +7 -7
- package/{fesm2015 → fesm2022}/mtxProgress.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxSelect.mjs +67 -67
- package/{fesm2015 → fesm2022}/mtxSelect.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxSlider.mjs +7 -7
- package/{fesm2020 → fesm2022}/mtxSlider.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxSplit.mjs +10 -10
- package/{fesm2020 → fesm2022}/mtxSplit.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/mtxTooltip.mjs +16 -16
- package/{fesm2015 → fesm2022}/mtxTooltip.mjs.map +1 -1
- package/grid/cell.d.ts +1 -1
- package/grid/column-menu.d.ts +1 -1
- package/grid/column-resize/resizable-directives/resizable.d.ts +1 -1
- package/grid/expansion-toggle.d.ts +1 -1
- package/grid/grid.d.ts +2 -2
- package/loader/loader.d.ts +1 -1
- package/package.json +69 -109
- package/popover/popover-trigger.d.ts +1 -1
- package/popover/popover.d.ts +1 -1
- package/progress/progress.d.ts +1 -1
- package/select/option.d.ts +1 -1
- package/select/select.d.ts +1 -1
- package/slider/slider.d.ts +1 -1
- package/split/split-pane.d.ts +1 -1
- package/split/split.d.ts +1 -1
- package/tooltip/tooltip.d.ts +1 -1
- package/tooltip/tooltip.scss +1 -4
- package/esm2020/alert/alert-module.mjs +0 -18
- package/esm2020/alert/alert.mjs +0 -52
- package/esm2020/button/button-loading.mjs +0 -76
- package/esm2020/button/button-module.mjs +0 -20
- package/esm2020/checkbox-group/checkbox-group-module.mjs +0 -21
- package/esm2020/checkbox-group/checkbox-group.mjs +0 -233
- package/esm2020/colorpicker/colorpicker-input.mjs +0 -228
- package/esm2020/colorpicker/colorpicker-module.mjs +0 -63
- package/esm2020/colorpicker/colorpicker-toggle.mjs +0 -101
- package/esm2020/colorpicker/colorpicker.mjs +0 -365
- package/esm2020/column-resize/column-resize-directives/column-resize-flex.mjs +0 -45
- package/esm2020/column-resize/column-resize-directives/column-resize.mjs +0 -45
- package/esm2020/column-resize/column-resize-module.mjs +0 -28
- package/esm2020/column-resize/column-resize-notifier.mjs +0 -47
- package/esm2020/column-resize/column-resize.mjs +0 -82
- package/esm2020/column-resize/column-size-store.mjs +0 -20
- package/esm2020/column-resize/event-dispatcher.mjs +0 -67
- package/esm2020/column-resize/overlay-handle.mjs +0 -146
- package/esm2020/column-resize/resizable.mjs +0 -199
- package/esm2020/column-resize/resize-strategy.mjs +0 -232
- package/esm2020/core/datetime/datetime.module.mjs +0 -42
- package/esm2020/core/datetime/native-datetime-adapter.mjs +0 -138
- package/esm2020/core/pipes/is-template-ref.pipe.mjs +0 -14
- package/esm2020/core/pipes/pipes.module.mjs +0 -19
- package/esm2020/core/pipes/to-observable.pipe.mjs +0 -15
- package/esm2020/datetimepicker/calendar-body.mjs +0 -78
- package/esm2020/datetimepicker/calendar.mjs +0 -671
- package/esm2020/datetimepicker/clock.mjs +0 -349
- package/esm2020/datetimepicker/datetimepicker-input.mjs +0 -349
- package/esm2020/datetimepicker/datetimepicker-intl.mjs +0 -63
- package/esm2020/datetimepicker/datetimepicker-module.mjs +0 -82
- package/esm2020/datetimepicker/datetimepicker-toggle.mjs +0 -104
- package/esm2020/datetimepicker/datetimepicker.mjs +0 -527
- package/esm2020/datetimepicker/month-view.mjs +0 -148
- package/esm2020/datetimepicker/multi-year-view.mjs +0 -214
- package/esm2020/datetimepicker/time.mjs +0 -456
- package/esm2020/datetimepicker/year-view.mjs +0 -138
- package/esm2020/dialog/dialog-container.mjs +0 -35
- package/esm2020/dialog/dialog-module.mjs +0 -24
- package/esm2020/dialog/dialog.mjs +0 -74
- package/esm2020/drawer/drawer-container.mjs +0 -252
- package/esm2020/drawer/drawer-module.mjs +0 -22
- package/esm2020/drawer/drawer.mjs +0 -166
- package/esm2020/grid/cell.mjs +0 -116
- package/esm2020/grid/column-resize/column-resize-directives/column-resize-flex.mjs +0 -37
- package/esm2020/grid/column-resize/column-resize-directives/column-resize.mjs +0 -37
- package/esm2020/grid/column-resize/column-resize-module.mjs +0 -42
- package/esm2020/grid/column-resize/overlay-handle.mjs +0 -60
- package/esm2020/grid/column-resize/resizable-directives/resizable.mjs +0 -62
- package/esm2020/grid/column-resize/resize-strategy.mjs +0 -42
- package/esm2020/grid/expansion-toggle.mjs +0 -64
- package/esm2020/grid/grid-module.mjs +0 -136
- package/esm2020/grid/grid-pipes.mjs +0 -108
- package/esm2020/grid/grid-utils.mjs +0 -63
- package/esm2020/grid/grid.mjs +0 -628
- package/esm2020/loader/loader-module.mjs +0 -20
- package/esm2020/loader/loader.mjs +0 -69
- package/esm2020/popover/popover-content.mjs +0 -90
- package/esm2020/popover/popover-module.mjs +0 -24
- package/esm2020/popover/popover-target.mjs +0 -17
- package/esm2020/popover/popover-trigger.mjs +0 -471
- package/esm2020/popover/popover.mjs +0 -383
- package/esm2020/progress/progress-module.mjs +0 -18
- package/esm2020/progress/progress.mjs +0 -55
- package/esm2020/select/option.mjs +0 -57
- package/esm2020/select/select-module.mjs +0 -74
- package/esm2020/select/select.mjs +0 -560
- package/esm2020/select/templates.mjs +0 -124
- package/esm2020/slider/slider-module.mjs +0 -19
- package/esm2020/slider/slider.mjs +0 -1115
- package/esm2020/split/split-module.mjs +0 -19
- package/esm2020/split/split-pane.mjs +0 -149
- package/esm2020/split/split.mjs +0 -634
- package/esm2020/tooltip/tooltip-module.mjs +0 -24
- package/esm2020/tooltip/tooltip.mjs +0 -926
- package/fesm2015/mtxAlert.mjs +0 -74
- package/fesm2015/mtxAlert.mjs.map +0 -1
- package/fesm2015/mtxButton.mjs +0 -99
- package/fesm2015/mtxCheckboxGroup.mjs +0 -256
- package/fesm2015/mtxCheckboxGroup.mjs.map +0 -1
- package/fesm2015/mtxColorpicker.mjs +0 -767
- package/fesm2015/mtxColorpicker.mjs.map +0 -1
- package/fesm2015/mtxColumnResize.mjs +0 -959
- package/fesm2015/mtxCore.mjs +0 -374
- package/fesm2015/mtxCore.mjs.map +0 -1
- package/fesm2015/mtxDatetimepicker.mjs +0 -3164
- package/fesm2015/mtxDatetimepicker.mjs.map +0 -1
- package/fesm2015/mtxDialog.mjs +0 -130
- package/fesm2015/mtxDrawer.mjs +0 -578
- package/fesm2015/mtxDrawer.mjs.map +0 -1
- package/fesm2015/mtxGrid.mjs +0 -1514
- package/fesm2015/mtxGrid.mjs.map +0 -1
- package/fesm2015/mtxLoader.mjs +0 -93
- package/fesm2015/mtxLoader.mjs.map +0 -1
- package/fesm2015/mtxPopover.mjs +0 -1027
- package/fesm2015/mtxPopover.mjs.map +0 -1
- package/fesm2015/mtxProgress.mjs +0 -77
- package/fesm2015/mtxSelect.mjs +0 -814
- package/fesm2015/mtxSlider.mjs +0 -1139
- package/fesm2015/mtxSlider.mjs.map +0 -1
- package/fesm2015/mtxSplit.mjs +0 -1025
- package/fesm2015/mtxSplit.mjs.map +0 -1
- package/fesm2015/mtxTooltip.mjs +0 -982
- package/fesm2020/mtxButton.mjs.map +0 -1
- package/fesm2020/mtxColumnResize.mjs.map +0 -1
- package/fesm2020/mtxCore.mjs.map +0 -1
- package/fesm2020/mtxDatetimepicker.mjs.map +0 -1
- package/fesm2020/mtxDialog.mjs.map +0 -1
- package/fesm2020/mtxProgress.mjs.map +0 -1
- package/fesm2020/mtxSelect.mjs.map +0 -1
- package/fesm2020/mtxTooltip.mjs.map +0 -1
- package/fesm2020/ng-matero-extensions.mjs +0 -9
- package/fesm2020/ng-matero-extensions.mjs.map +0 -1
- /package/{esm2020 → esm2022}/alert/mtxAlert.mjs +0 -0
- /package/{esm2020 → esm2022}/alert/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/button/mtxButton.mjs +0 -0
- /package/{esm2020 → esm2022}/button/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/checkbox-group/interfaces.mjs +0 -0
- /package/{esm2020 → esm2022}/checkbox-group/mtxCheckboxGroup.mjs +0 -0
- /package/{esm2020 → esm2022}/checkbox-group/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/colorpicker/colorpicker-animations.mjs +0 -0
- /package/{esm2020 → esm2022}/colorpicker/mtxColorpicker.mjs +0 -0
- /package/{esm2020 → esm2022}/colorpicker/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/column-resize/column-resize-directives/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/column-resize/mtxColumnResize.mjs +0 -0
- /package/{esm2020 → esm2022}/column-resize/polyfill.mjs +0 -0
- /package/{esm2020 → esm2022}/column-resize/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/column-resize/resize-ref.mjs +0 -0
- /package/{esm2020 → esm2022}/column-resize/selectors.mjs +0 -0
- /package/{esm2020 → esm2022}/core/datetime/datetime-formats.mjs +0 -0
- /package/{esm2020 → esm2022}/core/datetime/index.mjs +0 -0
- /package/{esm2020 → esm2022}/core/datetime/native-datetime-formats.mjs +0 -0
- /package/{esm2020 → esm2022}/core/mtxCore.mjs +0 -0
- /package/{esm2020 → esm2022}/core/pipes/index.mjs +0 -0
- /package/{esm2020 → esm2022}/core/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/datetimepicker/datetimepicker-animations.mjs +0 -0
- /package/{esm2020 → esm2022}/datetimepicker/datetimepicker-errors.mjs +0 -0
- /package/{esm2020 → esm2022}/datetimepicker/datetimepicker-filtertype.mjs +0 -0
- /package/{esm2020 → esm2022}/datetimepicker/datetimepicker-types.mjs +0 -0
- /package/{esm2020 → esm2022}/datetimepicker/mtxDatetimepicker.mjs +0 -0
- /package/{esm2020 → esm2022}/datetimepicker/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/dialog/dialog-config.mjs +0 -0
- /package/{esm2020 → esm2022}/dialog/mtxDialog.mjs +0 -0
- /package/{esm2020 → esm2022}/dialog/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/drawer-animation.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/drawer-config.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/drawer-ref.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/mtxDrawer.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/grid/column-resize/column-resize-directives/common.mjs +0 -0
- /package/{esm2020 → esm2022}/grid/column-resize/resizable-directives/common.mjs +0 -0
- /package/{esm2020 → esm2022}/grid/interfaces.mjs +0 -0
- /package/{esm2020 → esm2022}/grid/mtxGrid.mjs +0 -0
- /package/{esm2020 → esm2022}/grid/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/loader/mtxLoader.mjs +0 -0
- /package/{esm2020 → esm2022}/loader/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/ng-matero-extensions.mjs +0 -0
- /package/{esm2020 → esm2022}/popover/mtxPopover.mjs +0 -0
- /package/{esm2020 → esm2022}/popover/popover-animations.mjs +0 -0
- /package/{esm2020 → esm2022}/popover/popover-errors.mjs +0 -0
- /package/{esm2020 → esm2022}/popover/popover-interfaces.mjs +0 -0
- /package/{esm2020 → esm2022}/popover/popover-types.mjs +0 -0
- /package/{esm2020 → esm2022}/popover/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/progress/mtxProgress.mjs +0 -0
- /package/{esm2020 → esm2022}/progress/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/select/mtxSelect.mjs +0 -0
- /package/{esm2020 → esm2022}/select/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/slider/mtxSlider.mjs +0 -0
- /package/{esm2020 → esm2022}/slider/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/split/interfaces.mjs +0 -0
- /package/{esm2020 → esm2022}/split/mtxSplit.mjs +0 -0
- /package/{esm2020 → esm2022}/split/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/split/utils.mjs +0 -0
- /package/{esm2020 → esm2022}/tooltip/mtxTooltip.mjs +0 -0
- /package/{esm2020 → esm2022}/tooltip/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/tooltip/tooltip-animations.mjs +0 -0
- /package/{fesm2015 → fesm2022}/ng-matero-extensions.mjs +0 -0
- /package/{fesm2015 → fesm2022}/ng-matero-extensions.mjs.map +0 -0
package/fesm2015/mtxTooltip.mjs
DELETED
|
@@ -1,982 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, TemplateRef, ElementRef, Directive, Inject, Input, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as i5 from '@angular/common';
|
|
4
|
-
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
5
|
-
import * as i3 from '@angular/cdk/a11y';
|
|
6
|
-
import { A11yModule } from '@angular/cdk/a11y';
|
|
7
|
-
import * as i1 from '@angular/cdk/overlay';
|
|
8
|
-
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
9
|
-
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
10
|
-
import { MatCommonModule } from '@angular/material/core';
|
|
11
|
-
import * as i6 from '@ng-matero/extensions/core';
|
|
12
|
-
import { MtxPipesModule } from '@ng-matero/extensions/core';
|
|
13
|
-
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
14
|
-
import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
15
|
-
import * as i2 from '@angular/cdk/platform';
|
|
16
|
-
import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
|
|
17
|
-
import { ComponentPortal } from '@angular/cdk/portal';
|
|
18
|
-
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
19
|
-
import { Subject } from 'rxjs';
|
|
20
|
-
import { takeUntil, take } from 'rxjs/operators';
|
|
21
|
-
import * as i4 from '@angular/cdk/bidi';
|
|
22
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
23
|
-
|
|
24
|
-
/** Time in ms to throttle repositioning after scroll events. */
|
|
25
|
-
const SCROLL_THROTTLE_MS = 20;
|
|
26
|
-
/**
|
|
27
|
-
* Creates an error to be thrown if the user supplied an invalid tooltip position.
|
|
28
|
-
* @docs-private
|
|
29
|
-
*/
|
|
30
|
-
function getMtxTooltipInvalidPositionError(position) {
|
|
31
|
-
return Error(`Tooltip position "${position}" is invalid.`);
|
|
32
|
-
}
|
|
33
|
-
/** Injection token that determines the scroll handling while a tooltip is visible. */
|
|
34
|
-
const MTX_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('mtx-tooltip-scroll-strategy');
|
|
35
|
-
/** @docs-private */
|
|
36
|
-
function MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay) {
|
|
37
|
-
return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS });
|
|
38
|
-
}
|
|
39
|
-
/** @docs-private */
|
|
40
|
-
const MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
|
|
41
|
-
provide: MTX_TOOLTIP_SCROLL_STRATEGY,
|
|
42
|
-
deps: [Overlay],
|
|
43
|
-
useFactory: MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY,
|
|
44
|
-
};
|
|
45
|
-
/** @docs-private */
|
|
46
|
-
function MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
|
|
47
|
-
return {
|
|
48
|
-
showDelay: 0,
|
|
49
|
-
hideDelay: 0,
|
|
50
|
-
touchendHideDelay: 1500,
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
/** Injection token to be used to override the default options for `mtxTooltip`. */
|
|
54
|
-
const MTX_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('mtx-tooltip-default-options', {
|
|
55
|
-
providedIn: 'root',
|
|
56
|
-
factory: MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
|
|
57
|
-
});
|
|
58
|
-
/**
|
|
59
|
-
* CSS class that will be attached to the overlay panel.
|
|
60
|
-
* @deprecated
|
|
61
|
-
* @breaking-change 13.0.0 remove this variable
|
|
62
|
-
*/
|
|
63
|
-
const TOOLTIP_PANEL_CLASS = 'mtx-mdc-tooltip-panel';
|
|
64
|
-
const PANEL_CLASS = 'tooltip-panel';
|
|
65
|
-
/** Options used to bind passive event listeners. */
|
|
66
|
-
const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
|
|
67
|
-
/**
|
|
68
|
-
* Time between the user putting the pointer on a tooltip
|
|
69
|
-
* trigger and the long press event being fired.
|
|
70
|
-
*/
|
|
71
|
-
const LONGPRESS_DELAY = 500;
|
|
72
|
-
// These constants were taken from MDC's `numbers` object. We can't import them from MDC,
|
|
73
|
-
// because they have some top-level references to `window` which break during SSR.
|
|
74
|
-
const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
|
|
75
|
-
const UNBOUNDED_ANCHOR_GAP = 8;
|
|
76
|
-
const MIN_HEIGHT = 24;
|
|
77
|
-
const MAX_WIDTH = 200;
|
|
78
|
-
class _MtxTooltipBase {
|
|
79
|
-
/** Allows the user to define the position of the tooltip relative to the parent element */
|
|
80
|
-
get position() {
|
|
81
|
-
return this._position;
|
|
82
|
-
}
|
|
83
|
-
set position(value) {
|
|
84
|
-
var _a;
|
|
85
|
-
if (value !== this._position) {
|
|
86
|
-
this._position = value;
|
|
87
|
-
if (this._overlayRef) {
|
|
88
|
-
this._updatePosition(this._overlayRef);
|
|
89
|
-
(_a = this._tooltipInstance) === null || _a === void 0 ? void 0 : _a.show(0);
|
|
90
|
-
this._overlayRef.updatePosition();
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
get positionAtOrigin() {
|
|
95
|
-
return this._positionAtOrigin;
|
|
96
|
-
}
|
|
97
|
-
set positionAtOrigin(value) {
|
|
98
|
-
this._positionAtOrigin = coerceBooleanProperty(value);
|
|
99
|
-
this._detach();
|
|
100
|
-
this._overlayRef = null;
|
|
101
|
-
}
|
|
102
|
-
/** Disables the display of the tooltip. */
|
|
103
|
-
get disabled() {
|
|
104
|
-
return this._disabled;
|
|
105
|
-
}
|
|
106
|
-
set disabled(value) {
|
|
107
|
-
this._disabled = coerceBooleanProperty(value);
|
|
108
|
-
// If tooltip is disabled, hide immediately.
|
|
109
|
-
if (this._disabled) {
|
|
110
|
-
this.hide(0);
|
|
111
|
-
}
|
|
112
|
-
else {
|
|
113
|
-
this._setupPointerEnterEventsIfNeeded();
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
/** The default delay in ms before showing the tooltip after show is called */
|
|
117
|
-
get showDelay() {
|
|
118
|
-
return this._showDelay;
|
|
119
|
-
}
|
|
120
|
-
set showDelay(value) {
|
|
121
|
-
this._showDelay = coerceNumberProperty(value);
|
|
122
|
-
}
|
|
123
|
-
/** The default delay in ms before hiding the tooltip after hide is called */
|
|
124
|
-
get hideDelay() {
|
|
125
|
-
return this._hideDelay;
|
|
126
|
-
}
|
|
127
|
-
set hideDelay(value) {
|
|
128
|
-
this._hideDelay = coerceNumberProperty(value);
|
|
129
|
-
if (this._tooltipInstance) {
|
|
130
|
-
this._tooltipInstance._mouseLeaveHideDelay = this._hideDelay;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
/** The message to be displayed in the tooltip */
|
|
134
|
-
get message() {
|
|
135
|
-
return this._message;
|
|
136
|
-
}
|
|
137
|
-
set message(value) {
|
|
138
|
-
this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message, 'tooltip');
|
|
139
|
-
// TODO: If the message is a TemplateRef, it's hard to support a11y.
|
|
140
|
-
// If the message is not a string (e.g. number), convert it to a string and trim it.
|
|
141
|
-
// Must convert with `String(value)`, not `${value}`, otherwise Closure Compiler optimises
|
|
142
|
-
// away the string-conversion: https://github.com/angular/components/issues/20684
|
|
143
|
-
this._message = value instanceof TemplateRef ? value : value != null ? `${value}`.trim() : '';
|
|
144
|
-
if (!this._message && this._isTooltipVisible()) {
|
|
145
|
-
this.hide(0);
|
|
146
|
-
}
|
|
147
|
-
else {
|
|
148
|
-
this._setupPointerEnterEventsIfNeeded();
|
|
149
|
-
this._updateTooltipMessage();
|
|
150
|
-
this._ngZone.runOutsideAngular(() => {
|
|
151
|
-
// The `AriaDescriber` has some functionality that avoids adding a description if it's the
|
|
152
|
-
// same as the `aria-label` of an element, however we can't know whether the tooltip trigger
|
|
153
|
-
// has a data-bound `aria-label` or when it'll be set for the first time. We can avoid the
|
|
154
|
-
// issue by deferring the description by a tick so Angular has time to set the `aria-label`.
|
|
155
|
-
Promise.resolve().then(() => {
|
|
156
|
-
this._ariaDescriber.describe(this._elementRef.nativeElement, this.message, 'tooltip');
|
|
157
|
-
});
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
/** Context to be passed to the tooltip. */
|
|
162
|
-
get tooltipContext() {
|
|
163
|
-
return this._tooltipContext;
|
|
164
|
-
}
|
|
165
|
-
set tooltipContext(value) {
|
|
166
|
-
this._tooltipContext = value;
|
|
167
|
-
this._setTooltipContext(this._tooltipContext);
|
|
168
|
-
}
|
|
169
|
-
/** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
|
|
170
|
-
get tooltipClass() {
|
|
171
|
-
return this._tooltipClass;
|
|
172
|
-
}
|
|
173
|
-
set tooltipClass(value) {
|
|
174
|
-
this._tooltipClass = value;
|
|
175
|
-
if (this._tooltipInstance) {
|
|
176
|
-
this._setTooltipClass(this._tooltipClass);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
constructor(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, _document) {
|
|
180
|
-
this._overlay = _overlay;
|
|
181
|
-
this._elementRef = _elementRef;
|
|
182
|
-
this._scrollDispatcher = _scrollDispatcher;
|
|
183
|
-
this._viewContainerRef = _viewContainerRef;
|
|
184
|
-
this._ngZone = _ngZone;
|
|
185
|
-
this._platform = _platform;
|
|
186
|
-
this._ariaDescriber = _ariaDescriber;
|
|
187
|
-
this._focusMonitor = _focusMonitor;
|
|
188
|
-
this._dir = _dir;
|
|
189
|
-
this._defaultOptions = _defaultOptions;
|
|
190
|
-
this._position = 'below';
|
|
191
|
-
this._positionAtOrigin = false;
|
|
192
|
-
this._disabled = false;
|
|
193
|
-
this._viewInitialized = false;
|
|
194
|
-
this._pointerExitEventsInitialized = false;
|
|
195
|
-
this._viewportMargin = 8;
|
|
196
|
-
this._cssClassPrefix = 'mtx';
|
|
197
|
-
this._showDelay = this._defaultOptions.showDelay;
|
|
198
|
-
this._hideDelay = this._defaultOptions.hideDelay;
|
|
199
|
-
/**
|
|
200
|
-
* How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
|
|
201
|
-
* uses a long press gesture to show and hide, however it can conflict with the native browser
|
|
202
|
-
* gestures. To work around the conflict, Angular Material disables native gestures on the
|
|
203
|
-
* trigger, but that might not be desirable on particular elements (e.g. inputs and draggable
|
|
204
|
-
* elements). The different values for this option configure the touch event handling as follows:
|
|
205
|
-
* - `auto` - Enables touch gestures for all elements, but tries to avoid conflicts with native
|
|
206
|
-
* browser gestures on particular elements. In particular, it allows text selection on inputs
|
|
207
|
-
* and textareas, and preserves the native browser dragging on elements marked as `draggable`.
|
|
208
|
-
* - `on` - Enables touch gestures for all elements and disables native
|
|
209
|
-
* browser gestures with no exceptions.
|
|
210
|
-
* - `off` - Disables touch gestures. Note that this will prevent the tooltip from
|
|
211
|
-
* showing on touch devices.
|
|
212
|
-
*/
|
|
213
|
-
this.touchGestures = 'auto';
|
|
214
|
-
this._message = '';
|
|
215
|
-
/** Manually-bound passive event listeners. */
|
|
216
|
-
this._passiveListeners = [];
|
|
217
|
-
/** Emits when the component is destroyed. */
|
|
218
|
-
this._destroyed = new Subject();
|
|
219
|
-
this._scrollStrategy = scrollStrategy;
|
|
220
|
-
this._document = _document;
|
|
221
|
-
if (_defaultOptions) {
|
|
222
|
-
if (_defaultOptions.position) {
|
|
223
|
-
this.position = _defaultOptions.position;
|
|
224
|
-
}
|
|
225
|
-
if (_defaultOptions.positionAtOrigin) {
|
|
226
|
-
this.positionAtOrigin = _defaultOptions.positionAtOrigin;
|
|
227
|
-
}
|
|
228
|
-
if (_defaultOptions.touchGestures) {
|
|
229
|
-
this.touchGestures = _defaultOptions.touchGestures;
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
_dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
233
|
-
if (this._overlayRef) {
|
|
234
|
-
this._updatePosition(this._overlayRef);
|
|
235
|
-
}
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
ngAfterViewInit() {
|
|
239
|
-
// This needs to happen after view init so the initial values for all inputs have been set.
|
|
240
|
-
this._viewInitialized = true;
|
|
241
|
-
this._setupPointerEnterEventsIfNeeded();
|
|
242
|
-
this._focusMonitor
|
|
243
|
-
.monitor(this._elementRef)
|
|
244
|
-
.pipe(takeUntil(this._destroyed))
|
|
245
|
-
.subscribe(origin => {
|
|
246
|
-
// Note that the focus monitor runs outside the Angular zone.
|
|
247
|
-
if (!origin) {
|
|
248
|
-
this._ngZone.run(() => this.hide(0));
|
|
249
|
-
}
|
|
250
|
-
else if (origin === 'keyboard') {
|
|
251
|
-
this._ngZone.run(() => this.show());
|
|
252
|
-
}
|
|
253
|
-
});
|
|
254
|
-
}
|
|
255
|
-
/**
|
|
256
|
-
* Dispose the tooltip when destroyed.
|
|
257
|
-
*/
|
|
258
|
-
ngOnDestroy() {
|
|
259
|
-
const nativeElement = this._elementRef.nativeElement;
|
|
260
|
-
clearTimeout(this._touchstartTimeout);
|
|
261
|
-
if (this._overlayRef) {
|
|
262
|
-
this._overlayRef.dispose();
|
|
263
|
-
this._tooltipInstance = null;
|
|
264
|
-
}
|
|
265
|
-
// Clean up the event listeners set in the constructor
|
|
266
|
-
this._passiveListeners.forEach(([event, listener]) => {
|
|
267
|
-
nativeElement.removeEventListener(event, listener, passiveListenerOptions);
|
|
268
|
-
});
|
|
269
|
-
this._passiveListeners.length = 0;
|
|
270
|
-
this._destroyed.next();
|
|
271
|
-
this._destroyed.complete();
|
|
272
|
-
this._ariaDescriber.removeDescription(nativeElement, this.message, 'tooltip');
|
|
273
|
-
this._focusMonitor.stopMonitoring(nativeElement);
|
|
274
|
-
}
|
|
275
|
-
/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
|
|
276
|
-
show(delay = this.showDelay, origin) {
|
|
277
|
-
var _a;
|
|
278
|
-
if (this.disabled || !this.message || this._isTooltipVisible()) {
|
|
279
|
-
(_a = this._tooltipInstance) === null || _a === void 0 ? void 0 : _a._cancelPendingAnimations();
|
|
280
|
-
return;
|
|
281
|
-
}
|
|
282
|
-
const overlayRef = this._createOverlay(origin);
|
|
283
|
-
this._detach();
|
|
284
|
-
this._portal =
|
|
285
|
-
this._portal || new ComponentPortal(this._tooltipComponent, this._viewContainerRef);
|
|
286
|
-
const instance = (this._tooltipInstance = overlayRef.attach(this._portal).instance);
|
|
287
|
-
instance._triggerElement = this._elementRef.nativeElement;
|
|
288
|
-
instance._mouseLeaveHideDelay = this._hideDelay;
|
|
289
|
-
instance
|
|
290
|
-
.afterHidden()
|
|
291
|
-
.pipe(takeUntil(this._destroyed))
|
|
292
|
-
.subscribe(() => this._detach());
|
|
293
|
-
this._setTooltipClass(this._tooltipClass);
|
|
294
|
-
this._setTooltipContext(this._tooltipContext);
|
|
295
|
-
this._updateTooltipMessage();
|
|
296
|
-
instance.show(delay);
|
|
297
|
-
}
|
|
298
|
-
/** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
|
|
299
|
-
hide(delay = this.hideDelay) {
|
|
300
|
-
const instance = this._tooltipInstance;
|
|
301
|
-
if (instance) {
|
|
302
|
-
if (instance.isVisible()) {
|
|
303
|
-
instance.hide(delay);
|
|
304
|
-
}
|
|
305
|
-
else {
|
|
306
|
-
instance._cancelPendingAnimations();
|
|
307
|
-
this._detach();
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
/** Shows/hides the tooltip */
|
|
312
|
-
toggle(origin) {
|
|
313
|
-
this._isTooltipVisible() ? this.hide() : this.show(undefined, origin);
|
|
314
|
-
}
|
|
315
|
-
/** Returns true if the tooltip is currently visible to the user */
|
|
316
|
-
_isTooltipVisible() {
|
|
317
|
-
return !!this._tooltipInstance && this._tooltipInstance.isVisible();
|
|
318
|
-
}
|
|
319
|
-
/** Create the overlay config and position strategy */
|
|
320
|
-
_createOverlay(origin) {
|
|
321
|
-
var _a;
|
|
322
|
-
if (this._overlayRef) {
|
|
323
|
-
const existingStrategy = this._overlayRef.getConfig()
|
|
324
|
-
.positionStrategy;
|
|
325
|
-
if ((!this.positionAtOrigin || !origin) && existingStrategy._origin instanceof ElementRef) {
|
|
326
|
-
return this._overlayRef;
|
|
327
|
-
}
|
|
328
|
-
this._detach();
|
|
329
|
-
}
|
|
330
|
-
const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
|
|
331
|
-
// Create connected position strategy that listens for scroll events to reposition.
|
|
332
|
-
const strategy = this._overlay
|
|
333
|
-
.position()
|
|
334
|
-
.flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
|
|
335
|
-
.withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
|
|
336
|
-
.withFlexibleDimensions(false)
|
|
337
|
-
.withViewportMargin(this._viewportMargin)
|
|
338
|
-
.withScrollableContainers(scrollableAncestors);
|
|
339
|
-
strategy.positionChanges.pipe(takeUntil(this._destroyed)).subscribe(change => {
|
|
340
|
-
this._updateCurrentPositionClass(change.connectionPair);
|
|
341
|
-
if (this._tooltipInstance) {
|
|
342
|
-
if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
|
|
343
|
-
// After position changes occur and the overlay is clipped by
|
|
344
|
-
// a parent scrollable then close the tooltip.
|
|
345
|
-
this._ngZone.run(() => this.hide(0));
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
});
|
|
349
|
-
this._overlayRef = this._overlay.create({
|
|
350
|
-
direction: this._dir,
|
|
351
|
-
positionStrategy: strategy,
|
|
352
|
-
panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
|
|
353
|
-
scrollStrategy: this._scrollStrategy(),
|
|
354
|
-
});
|
|
355
|
-
this._updatePosition(this._overlayRef);
|
|
356
|
-
this._overlayRef
|
|
357
|
-
.detachments()
|
|
358
|
-
.pipe(takeUntil(this._destroyed))
|
|
359
|
-
.subscribe(() => this._detach());
|
|
360
|
-
this._overlayRef
|
|
361
|
-
.outsidePointerEvents()
|
|
362
|
-
.pipe(takeUntil(this._destroyed))
|
|
363
|
-
.subscribe(() => { var _a; return (_a = this._tooltipInstance) === null || _a === void 0 ? void 0 : _a._handleBodyInteraction(); });
|
|
364
|
-
this._overlayRef
|
|
365
|
-
.keydownEvents()
|
|
366
|
-
.pipe(takeUntil(this._destroyed))
|
|
367
|
-
.subscribe(event => {
|
|
368
|
-
if (this._isTooltipVisible() && event.keyCode === ESCAPE && !hasModifierKey(event)) {
|
|
369
|
-
event.preventDefault();
|
|
370
|
-
event.stopPropagation();
|
|
371
|
-
this._ngZone.run(() => this.hide(0));
|
|
372
|
-
}
|
|
373
|
-
});
|
|
374
|
-
if ((_a = this._defaultOptions) === null || _a === void 0 ? void 0 : _a.disableTooltipInteractivity) {
|
|
375
|
-
this._overlayRef.addPanelClass(`${this._cssClassPrefix}-tooltip-panel-non-interactive`);
|
|
376
|
-
}
|
|
377
|
-
return this._overlayRef;
|
|
378
|
-
}
|
|
379
|
-
/** Detaches the currently-attached tooltip. */
|
|
380
|
-
_detach() {
|
|
381
|
-
if (this._overlayRef && this._overlayRef.hasAttached()) {
|
|
382
|
-
this._overlayRef.detach();
|
|
383
|
-
}
|
|
384
|
-
this._tooltipInstance = null;
|
|
385
|
-
}
|
|
386
|
-
/** Updates the position of the current tooltip. */
|
|
387
|
-
_updatePosition(overlayRef) {
|
|
388
|
-
const position = overlayRef.getConfig().positionStrategy;
|
|
389
|
-
const origin = this._getOrigin();
|
|
390
|
-
const overlay = this._getOverlayPosition();
|
|
391
|
-
position.withPositions([
|
|
392
|
-
this._addOffset(Object.assign(Object.assign({}, origin.main), overlay.main)),
|
|
393
|
-
this._addOffset(Object.assign(Object.assign({}, origin.fallback), overlay.fallback)),
|
|
394
|
-
]);
|
|
395
|
-
}
|
|
396
|
-
/** Adds the configured offset to a position. Used as a hook for child classes. */
|
|
397
|
-
_addOffset(position) {
|
|
398
|
-
return position;
|
|
399
|
-
}
|
|
400
|
-
/**
|
|
401
|
-
* Returns the origin position and a fallback position based on the user's position preference.
|
|
402
|
-
* The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
|
|
403
|
-
*/
|
|
404
|
-
_getOrigin() {
|
|
405
|
-
const isLtr = !this._dir || this._dir.value == 'ltr';
|
|
406
|
-
const position = this.position;
|
|
407
|
-
let originPosition;
|
|
408
|
-
if (position == 'above' || position == 'below') {
|
|
409
|
-
originPosition = { originX: 'center', originY: position == 'above' ? 'top' : 'bottom' };
|
|
410
|
-
}
|
|
411
|
-
else if (position == 'before' ||
|
|
412
|
-
(position == 'left' && isLtr) ||
|
|
413
|
-
(position == 'right' && !isLtr)) {
|
|
414
|
-
originPosition = { originX: 'start', originY: 'center' };
|
|
415
|
-
}
|
|
416
|
-
else if (position == 'after' ||
|
|
417
|
-
(position == 'right' && isLtr) ||
|
|
418
|
-
(position == 'left' && !isLtr)) {
|
|
419
|
-
originPosition = { originX: 'end', originY: 'center' };
|
|
420
|
-
}
|
|
421
|
-
else {
|
|
422
|
-
throw getMtxTooltipInvalidPositionError(position);
|
|
423
|
-
}
|
|
424
|
-
const { x, y } = this._invertPosition(originPosition.originX, originPosition.originY);
|
|
425
|
-
return {
|
|
426
|
-
main: originPosition,
|
|
427
|
-
fallback: { originX: x, originY: y },
|
|
428
|
-
};
|
|
429
|
-
}
|
|
430
|
-
/** Returns the overlay position and a fallback position based on the user's preference */
|
|
431
|
-
_getOverlayPosition() {
|
|
432
|
-
const isLtr = !this._dir || this._dir.value == 'ltr';
|
|
433
|
-
const position = this.position;
|
|
434
|
-
let overlayPosition;
|
|
435
|
-
if (position == 'above') {
|
|
436
|
-
overlayPosition = { overlayX: 'center', overlayY: 'bottom' };
|
|
437
|
-
}
|
|
438
|
-
else if (position == 'below') {
|
|
439
|
-
overlayPosition = { overlayX: 'center', overlayY: 'top' };
|
|
440
|
-
}
|
|
441
|
-
else if (position == 'before' ||
|
|
442
|
-
(position == 'left' && isLtr) ||
|
|
443
|
-
(position == 'right' && !isLtr)) {
|
|
444
|
-
overlayPosition = { overlayX: 'end', overlayY: 'center' };
|
|
445
|
-
}
|
|
446
|
-
else if (position == 'after' ||
|
|
447
|
-
(position == 'right' && isLtr) ||
|
|
448
|
-
(position == 'left' && !isLtr)) {
|
|
449
|
-
overlayPosition = { overlayX: 'start', overlayY: 'center' };
|
|
450
|
-
}
|
|
451
|
-
else {
|
|
452
|
-
throw getMtxTooltipInvalidPositionError(position);
|
|
453
|
-
}
|
|
454
|
-
const { x, y } = this._invertPosition(overlayPosition.overlayX, overlayPosition.overlayY);
|
|
455
|
-
return {
|
|
456
|
-
main: overlayPosition,
|
|
457
|
-
fallback: { overlayX: x, overlayY: y },
|
|
458
|
-
};
|
|
459
|
-
}
|
|
460
|
-
/** Updates the tooltip message and repositions the overlay according to the new message length */
|
|
461
|
-
_updateTooltipMessage() {
|
|
462
|
-
// Must wait for the message to be painted to the tooltip so that the overlay can properly
|
|
463
|
-
// calculate the correct positioning based on the size of the text.
|
|
464
|
-
if (this._tooltipInstance) {
|
|
465
|
-
this._tooltipInstance.message = this.message;
|
|
466
|
-
this._tooltipInstance._markForCheck();
|
|
467
|
-
this._ngZone.onMicrotaskEmpty.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
|
|
468
|
-
if (this._tooltipInstance) {
|
|
469
|
-
this._overlayRef.updatePosition();
|
|
470
|
-
}
|
|
471
|
-
});
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
/** Updates the tooltip context */
|
|
475
|
-
_setTooltipContext(tooltipContext) {
|
|
476
|
-
if (this._tooltipInstance) {
|
|
477
|
-
this._tooltipInstance.tooltipContext = tooltipContext;
|
|
478
|
-
this._tooltipInstance._markForCheck();
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
/** Updates the tooltip class */
|
|
482
|
-
_setTooltipClass(tooltipClass) {
|
|
483
|
-
if (this._tooltipInstance) {
|
|
484
|
-
this._tooltipInstance.tooltipClass = tooltipClass;
|
|
485
|
-
this._tooltipInstance._markForCheck();
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
/** Inverts an overlay position. */
|
|
489
|
-
_invertPosition(x, y) {
|
|
490
|
-
if (this.position === 'above' || this.position === 'below') {
|
|
491
|
-
if (y === 'top') {
|
|
492
|
-
y = 'bottom';
|
|
493
|
-
}
|
|
494
|
-
else if (y === 'bottom') {
|
|
495
|
-
y = 'top';
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
else {
|
|
499
|
-
if (x === 'end') {
|
|
500
|
-
x = 'start';
|
|
501
|
-
}
|
|
502
|
-
else if (x === 'start') {
|
|
503
|
-
x = 'end';
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
return { x, y };
|
|
507
|
-
}
|
|
508
|
-
/** Updates the class on the overlay panel based on the current position of the tooltip. */
|
|
509
|
-
_updateCurrentPositionClass(connectionPair) {
|
|
510
|
-
const { overlayY, originX, originY } = connectionPair;
|
|
511
|
-
let newPosition;
|
|
512
|
-
// If the overlay is in the middle along the Y axis,
|
|
513
|
-
// it means that it's either before or after.
|
|
514
|
-
if (overlayY === 'center') {
|
|
515
|
-
// Note that since this information is used for styling, we want to
|
|
516
|
-
// resolve `start` and `end` to their real values, otherwise consumers
|
|
517
|
-
// would have to remember to do it themselves on each consumption.
|
|
518
|
-
if (this._dir && this._dir.value === 'rtl') {
|
|
519
|
-
newPosition = originX === 'end' ? 'left' : 'right';
|
|
520
|
-
}
|
|
521
|
-
else {
|
|
522
|
-
newPosition = originX === 'start' ? 'left' : 'right';
|
|
523
|
-
}
|
|
524
|
-
}
|
|
525
|
-
else {
|
|
526
|
-
newPosition = overlayY === 'bottom' && originY === 'top' ? 'above' : 'below';
|
|
527
|
-
}
|
|
528
|
-
if (newPosition !== this._currentPosition) {
|
|
529
|
-
const overlayRef = this._overlayRef;
|
|
530
|
-
if (overlayRef) {
|
|
531
|
-
const classPrefix = `${this._cssClassPrefix}-${PANEL_CLASS}-`;
|
|
532
|
-
overlayRef.removePanelClass(classPrefix + this._currentPosition);
|
|
533
|
-
overlayRef.addPanelClass(classPrefix + newPosition);
|
|
534
|
-
}
|
|
535
|
-
this._currentPosition = newPosition;
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
/** Binds the pointer events to the tooltip trigger. */
|
|
539
|
-
_setupPointerEnterEventsIfNeeded() {
|
|
540
|
-
// Optimization: Defer hooking up events if there's no message or the tooltip is disabled.
|
|
541
|
-
if (this._disabled ||
|
|
542
|
-
!this.message ||
|
|
543
|
-
!this._viewInitialized ||
|
|
544
|
-
this._passiveListeners.length) {
|
|
545
|
-
return;
|
|
546
|
-
}
|
|
547
|
-
// The mouse events shouldn't be bound on mobile devices, because they can prevent the
|
|
548
|
-
// first tap from firing its click event or can cause the tooltip to open for clicks.
|
|
549
|
-
if (this._platformSupportsMouseEvents()) {
|
|
550
|
-
this._passiveListeners.push([
|
|
551
|
-
'mouseenter',
|
|
552
|
-
event => {
|
|
553
|
-
this._setupPointerExitEventsIfNeeded();
|
|
554
|
-
let point = undefined;
|
|
555
|
-
if (event.x !== undefined && event.y !== undefined) {
|
|
556
|
-
point = event;
|
|
557
|
-
}
|
|
558
|
-
this.show(undefined, point);
|
|
559
|
-
},
|
|
560
|
-
]);
|
|
561
|
-
}
|
|
562
|
-
else if (this.touchGestures !== 'off') {
|
|
563
|
-
this._disableNativeGesturesIfNecessary();
|
|
564
|
-
this._passiveListeners.push([
|
|
565
|
-
'touchstart',
|
|
566
|
-
event => {
|
|
567
|
-
var _a;
|
|
568
|
-
const touch = (_a = event.targetTouches) === null || _a === void 0 ? void 0 : _a[0];
|
|
569
|
-
const origin = touch ? { x: touch.clientX, y: touch.clientY } : undefined;
|
|
570
|
-
// Note that it's important that we don't `preventDefault` here,
|
|
571
|
-
// because it can prevent click events from firing on the element.
|
|
572
|
-
this._setupPointerExitEventsIfNeeded();
|
|
573
|
-
clearTimeout(this._touchstartTimeout);
|
|
574
|
-
this._touchstartTimeout = setTimeout(() => this.show(undefined, origin), LONGPRESS_DELAY);
|
|
575
|
-
},
|
|
576
|
-
]);
|
|
577
|
-
}
|
|
578
|
-
this._addListeners(this._passiveListeners);
|
|
579
|
-
}
|
|
580
|
-
_setupPointerExitEventsIfNeeded() {
|
|
581
|
-
if (this._pointerExitEventsInitialized) {
|
|
582
|
-
return;
|
|
583
|
-
}
|
|
584
|
-
this._pointerExitEventsInitialized = true;
|
|
585
|
-
const exitListeners = [];
|
|
586
|
-
if (this._platformSupportsMouseEvents()) {
|
|
587
|
-
exitListeners.push([
|
|
588
|
-
'mouseleave',
|
|
589
|
-
event => {
|
|
590
|
-
var _a;
|
|
591
|
-
const newTarget = event.relatedTarget;
|
|
592
|
-
if (!newTarget || !((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.overlayElement.contains(newTarget))) {
|
|
593
|
-
this.hide();
|
|
594
|
-
}
|
|
595
|
-
},
|
|
596
|
-
], ['wheel', event => this._wheelListener(event)]);
|
|
597
|
-
}
|
|
598
|
-
else if (this.touchGestures !== 'off') {
|
|
599
|
-
this._disableNativeGesturesIfNecessary();
|
|
600
|
-
const touchendListener = () => {
|
|
601
|
-
clearTimeout(this._touchstartTimeout);
|
|
602
|
-
this.hide(this._defaultOptions.touchendHideDelay);
|
|
603
|
-
};
|
|
604
|
-
exitListeners.push(['touchend', touchendListener], ['touchcancel', touchendListener]);
|
|
605
|
-
}
|
|
606
|
-
this._addListeners(exitListeners);
|
|
607
|
-
this._passiveListeners.push(...exitListeners);
|
|
608
|
-
}
|
|
609
|
-
_addListeners(listeners) {
|
|
610
|
-
listeners.forEach(([event, listener]) => {
|
|
611
|
-
this._elementRef.nativeElement.addEventListener(event, listener, passiveListenerOptions);
|
|
612
|
-
});
|
|
613
|
-
}
|
|
614
|
-
_platformSupportsMouseEvents() {
|
|
615
|
-
return !this._platform.IOS && !this._platform.ANDROID;
|
|
616
|
-
}
|
|
617
|
-
/** Listener for the `wheel` event on the element. */
|
|
618
|
-
_wheelListener(event) {
|
|
619
|
-
if (this._isTooltipVisible()) {
|
|
620
|
-
const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
|
|
621
|
-
const element = this._elementRef.nativeElement;
|
|
622
|
-
// On non-touch devices we depend on the `mouseleave` event to close the tooltip, but it
|
|
623
|
-
// won't fire if the user scrolls away using the wheel without moving their cursor. We
|
|
624
|
-
// work around it by finding the element under the user's cursor and closing the tooltip
|
|
625
|
-
// if it's not the trigger.
|
|
626
|
-
if (elementUnderPointer !== element && !element.contains(elementUnderPointer)) {
|
|
627
|
-
this.hide();
|
|
628
|
-
}
|
|
629
|
-
}
|
|
630
|
-
}
|
|
631
|
-
/** Disables the native browser gestures, based on how the tooltip has been configured. */
|
|
632
|
-
_disableNativeGesturesIfNecessary() {
|
|
633
|
-
const gestures = this.touchGestures;
|
|
634
|
-
if (gestures !== 'off') {
|
|
635
|
-
const element = this._elementRef.nativeElement;
|
|
636
|
-
const style = element.style;
|
|
637
|
-
// If gestures are set to `auto`, we don't disable text selection on inputs and
|
|
638
|
-
// textareas, because it prevents the user from typing into them on iOS Safari.
|
|
639
|
-
if (gestures === 'on' || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA')) {
|
|
640
|
-
style.userSelect =
|
|
641
|
-
style.msUserSelect =
|
|
642
|
-
style.webkitUserSelect =
|
|
643
|
-
style.MozUserSelect =
|
|
644
|
-
'none';
|
|
645
|
-
}
|
|
646
|
-
// If we have `auto` gestures and the element uses native HTML dragging,
|
|
647
|
-
// we don't set `-webkit-user-drag` because it prevents the native behavior.
|
|
648
|
-
if (gestures === 'on' || !element.draggable) {
|
|
649
|
-
style.webkitUserDrag = 'none';
|
|
650
|
-
}
|
|
651
|
-
style.touchAction = 'none';
|
|
652
|
-
style.webkitTapHighlightColor = 'transparent';
|
|
653
|
-
}
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
/** @nocollapse */ _MtxTooltipBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _MtxTooltipBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
|
|
657
|
-
/** @nocollapse */ _MtxTooltipBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: _MtxTooltipBase, inputs: { position: ["mtxTooltipPosition", "position"], positionAtOrigin: ["mtxTooltipPositionAtOrigin", "positionAtOrigin"], disabled: ["mtxTooltipDisabled", "disabled"], showDelay: ["mtxTooltipShowDelay", "showDelay"], hideDelay: ["mtxTooltipHideDelay", "hideDelay"], touchGestures: ["mtxTooltipTouchGestures", "touchGestures"], message: ["mtxTooltip", "message"], tooltipContext: ["mtxTooltipContext", "tooltipContext"], tooltipClass: ["mtxTooltipClass", "tooltipClass"] }, ngImport: i0 });
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _MtxTooltipBase, decorators: [{
|
|
659
|
-
type: Directive
|
|
660
|
-
}], ctorParameters: function () {
|
|
661
|
-
return [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i1.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.AriaDescriber }, { type: i3.FocusMonitor }, { type: undefined }, { type: i4.Directionality }, { type: undefined }, { type: undefined, decorators: [{
|
|
662
|
-
type: Inject,
|
|
663
|
-
args: [DOCUMENT]
|
|
664
|
-
}] }];
|
|
665
|
-
}, propDecorators: { position: [{
|
|
666
|
-
type: Input,
|
|
667
|
-
args: ['mtxTooltipPosition']
|
|
668
|
-
}], positionAtOrigin: [{
|
|
669
|
-
type: Input,
|
|
670
|
-
args: ['mtxTooltipPositionAtOrigin']
|
|
671
|
-
}], disabled: [{
|
|
672
|
-
type: Input,
|
|
673
|
-
args: ['mtxTooltipDisabled']
|
|
674
|
-
}], showDelay: [{
|
|
675
|
-
type: Input,
|
|
676
|
-
args: ['mtxTooltipShowDelay']
|
|
677
|
-
}], hideDelay: [{
|
|
678
|
-
type: Input,
|
|
679
|
-
args: ['mtxTooltipHideDelay']
|
|
680
|
-
}], touchGestures: [{
|
|
681
|
-
type: Input,
|
|
682
|
-
args: ['mtxTooltipTouchGestures']
|
|
683
|
-
}], message: [{
|
|
684
|
-
type: Input,
|
|
685
|
-
args: ['mtxTooltip']
|
|
686
|
-
}], tooltipContext: [{
|
|
687
|
-
type: Input,
|
|
688
|
-
args: ['mtxTooltipContext']
|
|
689
|
-
}], tooltipClass: [{
|
|
690
|
-
type: Input,
|
|
691
|
-
args: ['mtxTooltipClass']
|
|
692
|
-
}] } });
|
|
693
|
-
/**
|
|
694
|
-
* Directive that attaches a material design tooltip to the host element. Animates the showing and
|
|
695
|
-
* hiding of a tooltip provided position (defaults to below the element).
|
|
696
|
-
*
|
|
697
|
-
* https://material.io/design/components/tooltips.html
|
|
698
|
-
*/
|
|
699
|
-
class MtxTooltip extends _MtxTooltipBase {
|
|
700
|
-
constructor(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document) {
|
|
701
|
-
super(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document);
|
|
702
|
-
this._tooltipComponent = TooltipComponent;
|
|
703
|
-
this._cssClassPrefix = 'mtx-mdc';
|
|
704
|
-
this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
|
|
705
|
-
}
|
|
706
|
-
_addOffset(position) {
|
|
707
|
-
const offset = UNBOUNDED_ANCHOR_GAP;
|
|
708
|
-
const isLtr = !this._dir || this._dir.value == 'ltr';
|
|
709
|
-
if (position.originY === 'top') {
|
|
710
|
-
position.offsetY = -offset;
|
|
711
|
-
}
|
|
712
|
-
else if (position.originY === 'bottom') {
|
|
713
|
-
position.offsetY = offset;
|
|
714
|
-
}
|
|
715
|
-
else if (position.originX === 'start') {
|
|
716
|
-
position.offsetX = isLtr ? -offset : offset;
|
|
717
|
-
}
|
|
718
|
-
else if (position.originX === 'end') {
|
|
719
|
-
position.offsetX = isLtr ? offset : -offset;
|
|
720
|
-
}
|
|
721
|
-
return position;
|
|
722
|
-
}
|
|
723
|
-
}
|
|
724
|
-
/** @nocollapse */ MtxTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltip, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i1.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.AriaDescriber }, { token: i3.FocusMonitor }, { token: MTX_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: MTX_TOOLTIP_DEFAULT_OPTIONS, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
725
|
-
/** @nocollapse */ MtxTooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: MtxTooltip, selector: "[mtxTooltip]", host: { classAttribute: "mtx-mdc-tooltip-trigger" }, exportAs: ["mtxTooltip"], usesInheritance: true, ngImport: i0 });
|
|
726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltip, decorators: [{
|
|
727
|
-
type: Directive,
|
|
728
|
-
args: [{
|
|
729
|
-
selector: '[mtxTooltip]',
|
|
730
|
-
exportAs: 'mtxTooltip',
|
|
731
|
-
host: {
|
|
732
|
-
class: 'mtx-mdc-tooltip-trigger',
|
|
733
|
-
},
|
|
734
|
-
}]
|
|
735
|
-
}], ctorParameters: function () {
|
|
736
|
-
return [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i1.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.AriaDescriber }, { type: i3.FocusMonitor }, { type: undefined, decorators: [{
|
|
737
|
-
type: Inject,
|
|
738
|
-
args: [MTX_TOOLTIP_SCROLL_STRATEGY]
|
|
739
|
-
}] }, { type: i4.Directionality, decorators: [{
|
|
740
|
-
type: Optional
|
|
741
|
-
}] }, { type: undefined, decorators: [{
|
|
742
|
-
type: Optional
|
|
743
|
-
}, {
|
|
744
|
-
type: Inject,
|
|
745
|
-
args: [MTX_TOOLTIP_DEFAULT_OPTIONS]
|
|
746
|
-
}] }, { type: undefined, decorators: [{
|
|
747
|
-
type: Inject,
|
|
748
|
-
args: [DOCUMENT]
|
|
749
|
-
}] }];
|
|
750
|
-
} });
|
|
751
|
-
class _TooltipComponentBase {
|
|
752
|
-
constructor(_changeDetectorRef, animationMode) {
|
|
753
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
754
|
-
/** Whether interactions on the page should close the tooltip */
|
|
755
|
-
this._closeOnInteraction = false;
|
|
756
|
-
/** Whether the tooltip is currently visible. */
|
|
757
|
-
this._isVisible = false;
|
|
758
|
-
/** Subject for notifying that the tooltip has been hidden from the view */
|
|
759
|
-
this._onHide = new Subject();
|
|
760
|
-
this._animationsDisabled = animationMode === 'NoopAnimations';
|
|
761
|
-
}
|
|
762
|
-
/**
|
|
763
|
-
* Shows the tooltip with an animation originating from the provided origin
|
|
764
|
-
* @param delay Amount of milliseconds to the delay showing the tooltip.
|
|
765
|
-
*/
|
|
766
|
-
show(delay) {
|
|
767
|
-
// Cancel the delayed hide if it is scheduled
|
|
768
|
-
clearTimeout(this._hideTimeoutId);
|
|
769
|
-
this._showTimeoutId = setTimeout(() => {
|
|
770
|
-
this._toggleVisibility(true);
|
|
771
|
-
this._showTimeoutId = undefined;
|
|
772
|
-
}, delay);
|
|
773
|
-
}
|
|
774
|
-
/**
|
|
775
|
-
* Begins the animation to hide the tooltip after the provided delay in ms.
|
|
776
|
-
* @param delay Amount of milliseconds to delay showing the tooltip.
|
|
777
|
-
*/
|
|
778
|
-
hide(delay) {
|
|
779
|
-
// Cancel the delayed show if it is scheduled
|
|
780
|
-
clearTimeout(this._showTimeoutId);
|
|
781
|
-
this._hideTimeoutId = setTimeout(() => {
|
|
782
|
-
this._toggleVisibility(false);
|
|
783
|
-
this._hideTimeoutId = undefined;
|
|
784
|
-
}, delay);
|
|
785
|
-
}
|
|
786
|
-
/** Returns an observable that notifies when the tooltip has been hidden from view. */
|
|
787
|
-
afterHidden() {
|
|
788
|
-
return this._onHide;
|
|
789
|
-
}
|
|
790
|
-
/** Whether the tooltip is being displayed. */
|
|
791
|
-
isVisible() {
|
|
792
|
-
return this._isVisible;
|
|
793
|
-
}
|
|
794
|
-
ngOnDestroy() {
|
|
795
|
-
this._cancelPendingAnimations();
|
|
796
|
-
this._onHide.complete();
|
|
797
|
-
this._triggerElement = null;
|
|
798
|
-
}
|
|
799
|
-
/**
|
|
800
|
-
* Interactions on the HTML body should close the tooltip immediately as defined in the
|
|
801
|
-
* material design spec.
|
|
802
|
-
* https://material.io/design/components/tooltips.html#behavior
|
|
803
|
-
*/
|
|
804
|
-
_handleBodyInteraction() {
|
|
805
|
-
if (this._closeOnInteraction) {
|
|
806
|
-
this.hide(0);
|
|
807
|
-
}
|
|
808
|
-
}
|
|
809
|
-
/**
|
|
810
|
-
* Marks that the tooltip needs to be checked in the next change detection run.
|
|
811
|
-
* Mainly used for rendering the initial text before positioning a tooltip, which
|
|
812
|
-
* can be problematic in components with OnPush change detection.
|
|
813
|
-
*/
|
|
814
|
-
_markForCheck() {
|
|
815
|
-
this._changeDetectorRef.markForCheck();
|
|
816
|
-
}
|
|
817
|
-
_handleMouseLeave({ relatedTarget }) {
|
|
818
|
-
if (!relatedTarget || !this._triggerElement.contains(relatedTarget)) {
|
|
819
|
-
if (this.isVisible()) {
|
|
820
|
-
this.hide(this._mouseLeaveHideDelay);
|
|
821
|
-
}
|
|
822
|
-
else {
|
|
823
|
-
this._finalizeAnimation(false);
|
|
824
|
-
}
|
|
825
|
-
}
|
|
826
|
-
}
|
|
827
|
-
/**
|
|
828
|
-
* Callback for when the timeout in this.show() gets completed.
|
|
829
|
-
* This method is only needed by the mdc-tooltip, and so it is only implemented
|
|
830
|
-
* in the mdc-tooltip, not here.
|
|
831
|
-
*/
|
|
832
|
-
_onShow() { }
|
|
833
|
-
/** Event listener dispatched when an animation on the tooltip finishes. */
|
|
834
|
-
_handleAnimationEnd({ animationName }) {
|
|
835
|
-
if (animationName === this._showAnimation || animationName === this._hideAnimation) {
|
|
836
|
-
this._finalizeAnimation(animationName === this._showAnimation);
|
|
837
|
-
}
|
|
838
|
-
}
|
|
839
|
-
/** Cancels any pending animation sequences. */
|
|
840
|
-
_cancelPendingAnimations() {
|
|
841
|
-
clearTimeout(this._showTimeoutId);
|
|
842
|
-
clearTimeout(this._hideTimeoutId);
|
|
843
|
-
this._showTimeoutId = this._hideTimeoutId = undefined;
|
|
844
|
-
}
|
|
845
|
-
/** Handles the cleanup after an animation has finished. */
|
|
846
|
-
_finalizeAnimation(toVisible) {
|
|
847
|
-
if (toVisible) {
|
|
848
|
-
this._closeOnInteraction = true;
|
|
849
|
-
}
|
|
850
|
-
else if (!this.isVisible()) {
|
|
851
|
-
this._onHide.next();
|
|
852
|
-
}
|
|
853
|
-
}
|
|
854
|
-
/** Toggles the visibility of the tooltip element. */
|
|
855
|
-
_toggleVisibility(isVisible) {
|
|
856
|
-
// We set the classes directly here ourselves so that toggling the tooltip state
|
|
857
|
-
// isn't bound by change detection. This allows us to hide it even if the
|
|
858
|
-
// view ref has been detached from the CD tree.
|
|
859
|
-
const tooltip = this._tooltip.nativeElement;
|
|
860
|
-
const showClass = this._showAnimation;
|
|
861
|
-
const hideClass = this._hideAnimation;
|
|
862
|
-
tooltip.classList.remove(isVisible ? hideClass : showClass);
|
|
863
|
-
tooltip.classList.add(isVisible ? showClass : hideClass);
|
|
864
|
-
this._isVisible = isVisible;
|
|
865
|
-
// It's common for internal apps to disable animations using `* { animation: none !important }`
|
|
866
|
-
// which can break the opening sequence. Try to detect such cases and work around them.
|
|
867
|
-
if (isVisible && !this._animationsDisabled && typeof getComputedStyle === 'function') {
|
|
868
|
-
const styles = getComputedStyle(tooltip);
|
|
869
|
-
// Use `getPropertyValue` to avoid issues with property renaming.
|
|
870
|
-
if (styles.getPropertyValue('animation-duration') === '0s' ||
|
|
871
|
-
styles.getPropertyValue('animation-name') === 'none') {
|
|
872
|
-
this._animationsDisabled = true;
|
|
873
|
-
}
|
|
874
|
-
}
|
|
875
|
-
if (isVisible) {
|
|
876
|
-
this._onShow();
|
|
877
|
-
}
|
|
878
|
-
if (this._animationsDisabled) {
|
|
879
|
-
tooltip.classList.add('_mtx-animation-noopable');
|
|
880
|
-
this._finalizeAnimation(isVisible);
|
|
881
|
-
}
|
|
882
|
-
}
|
|
883
|
-
}
|
|
884
|
-
/** @nocollapse */ _TooltipComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _TooltipComponentBase, deps: [{ token: i0.ChangeDetectorRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
885
|
-
/** @nocollapse */ _TooltipComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: _TooltipComponentBase, ngImport: i0 });
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: _TooltipComponentBase, decorators: [{
|
|
887
|
-
type: Directive
|
|
888
|
-
}], ctorParameters: function () {
|
|
889
|
-
return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
890
|
-
type: Optional
|
|
891
|
-
}, {
|
|
892
|
-
type: Inject,
|
|
893
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
894
|
-
}] }];
|
|
895
|
-
} });
|
|
896
|
-
/**
|
|
897
|
-
* Internal component that wraps the tooltip's content.
|
|
898
|
-
* @docs-private
|
|
899
|
-
*/
|
|
900
|
-
class TooltipComponent extends _TooltipComponentBase {
|
|
901
|
-
constructor(changeDetectorRef, _elementRef, animationMode) {
|
|
902
|
-
super(changeDetectorRef, animationMode);
|
|
903
|
-
this._elementRef = _elementRef;
|
|
904
|
-
/* Whether the tooltip text overflows to multiple lines */
|
|
905
|
-
this._isMultiline = false;
|
|
906
|
-
this._showAnimation = 'mtx-mdc-tooltip-show';
|
|
907
|
-
this._hideAnimation = 'mtx-mdc-tooltip-hide';
|
|
908
|
-
}
|
|
909
|
-
_onShow() {
|
|
910
|
-
this._isMultiline = this._isTooltipMultiline();
|
|
911
|
-
this._markForCheck();
|
|
912
|
-
}
|
|
913
|
-
/** Whether the tooltip text has overflown to the next line */
|
|
914
|
-
_isTooltipMultiline() {
|
|
915
|
-
const rect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
916
|
-
return rect.height > MIN_HEIGHT && rect.width >= MAX_WIDTH;
|
|
917
|
-
}
|
|
918
|
-
}
|
|
919
|
-
/** @nocollapse */ TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
920
|
-
/** @nocollapse */ TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: TooltipComponent, selector: "mtx-tooltip-component", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseleave": "_handleMouseLeave($event)" }, properties: { "style.zoom": "isVisible() ? 1 : null" } }, viewQueries: [{ propertyName: "_tooltip", first: true, predicate: ["tooltip"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #tooltip\n class=\"mdc-tooltip mdc-tooltip--shown mtx-mdc-tooltip\"\n [ngClass]=\"tooltipClass\"\n (animationend)=\"_handleAnimationEnd($event)\"\n [class.mdc-tooltip--multiline]=\"_isMultiline\">\n <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n <ng-template [ngIf]=\"message | isTemplateRef\" [ngIfElse]=\"msgStrTpl\">\n <ng-template [ngTemplateOutlet]=\"$any(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n </ng-template>\n <ng-template #msgStrTpl>{{message}}</ng-template>\n </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip{position:fixed;display:none;z-index:9}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--shown,.mdc-tooltip--showing,.mdc-tooltip--hide{display:inline-flex}.mdc-tooltip--shown.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--hide.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{line-height:16px;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center}.mdc-tooltip__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-tooltip__surface:before{border-color:CanvasText}}.mdc-tooltip--rich .mdc-tooltip__surface{align-items:flex-start;display:flex;flex-direction:column;min-height:24px;min-width:40px;max-width:320px;position:relative}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface,.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl]{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{margin:0 8px}.mdc-tooltip__surface .mdc-tooltip__content{max-width:184px;margin:8px;text-align:left}[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content,.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl]{text-align:right}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-tooltip__content{max-width:304px;align-self:stretch}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip--rich-actions,.mdc-tooltip__content,.mdc-tooltip__title{z-index:1}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{transform:scale(1);opacity:1}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{position:absolute;height:24px;width:24px;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208)}.mdc-tooltip__caret-surface-top .mdc-elevation-overlay,.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip__caret-surface-bottom{outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color, #fff)}.mdc-tooltip__surface,.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape, var(--mdc-shape-small, 4px))}.mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color, #000)}.mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font, inherit);font-size:var(--mdc-plain-tooltip-supporting-text-size, inherit);font-weight:var(--mdc-plain-tooltip-supporting-text-weight, inherit);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, inherit)}.mtx-mdc-tooltip{position:relative;transform:scale(0)}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mtx-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.MtxIsTemplateRefPipe, name: "isTemplateRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
922
|
-
type: Component,
|
|
923
|
-
args: [{ selector: 'mtx-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
924
|
-
// Forces the element to have a layout in IE and Edge. This fixes issues where the element
|
|
925
|
-
// won't be rendered if the animations are disabled or there is no web animations polyfill.
|
|
926
|
-
'[style.zoom]': 'isVisible() ? 1 : null',
|
|
927
|
-
'(mouseleave)': '_handleMouseLeave($event)',
|
|
928
|
-
'aria-hidden': 'true',
|
|
929
|
-
}, template: "<div #tooltip\n class=\"mdc-tooltip mdc-tooltip--shown mtx-mdc-tooltip\"\n [ngClass]=\"tooltipClass\"\n (animationend)=\"_handleAnimationEnd($event)\"\n [class.mdc-tooltip--multiline]=\"_isMultiline\">\n <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n <ng-template [ngIf]=\"message | isTemplateRef\" [ngIfElse]=\"msgStrTpl\">\n <ng-template [ngTemplateOutlet]=\"$any(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n </ng-template>\n <ng-template #msgStrTpl>{{message}}</ng-template>\n </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip{position:fixed;display:none;z-index:9}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--shown,.mdc-tooltip--showing,.mdc-tooltip--hide{display:inline-flex}.mdc-tooltip--shown.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--hide.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{line-height:16px;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center}.mdc-tooltip__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-tooltip__surface:before{border-color:CanvasText}}.mdc-tooltip--rich .mdc-tooltip__surface{align-items:flex-start;display:flex;flex-direction:column;min-height:24px;min-width:40px;max-width:320px;position:relative}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface,.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl]{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{margin:0 8px}.mdc-tooltip__surface .mdc-tooltip__content{max-width:184px;margin:8px;text-align:left}[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content,.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl]{text-align:right}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-tooltip__content{max-width:304px;align-self:stretch}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip--rich-actions,.mdc-tooltip__content,.mdc-tooltip__title{z-index:1}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{transform:scale(1);opacity:1}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{position:absolute;height:24px;width:24px;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208)}.mdc-tooltip__caret-surface-top .mdc-elevation-overlay,.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip__caret-surface-bottom{outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color, #fff)}.mdc-tooltip__surface,.mdc-tooltip__caret-surface-top,.mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape, var(--mdc-shape-small, 4px))}.mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color, #000)}.mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font, inherit);font-size:var(--mdc-plain-tooltip-supporting-text-size, inherit);font-weight:var(--mdc-plain-tooltip-supporting-text-weight, inherit);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, inherit)}.mtx-mdc-tooltip{position:relative;transform:scale(0)}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mtx-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"] }]
|
|
930
|
-
}], ctorParameters: function () {
|
|
931
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
932
|
-
type: Optional
|
|
933
|
-
}, {
|
|
934
|
-
type: Inject,
|
|
935
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
936
|
-
}] }];
|
|
937
|
-
}, propDecorators: { _tooltip: [{
|
|
938
|
-
type: ViewChild,
|
|
939
|
-
args: ['tooltip', {
|
|
940
|
-
// Use a static query here since we interact directly with
|
|
941
|
-
// the DOM which can happen before `ngAfterViewInit`.
|
|
942
|
-
static: true,
|
|
943
|
-
}]
|
|
944
|
-
}] } });
|
|
945
|
-
|
|
946
|
-
class MtxTooltipModule {
|
|
947
|
-
}
|
|
948
|
-
/** @nocollapse */ MtxTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
949
|
-
/** @nocollapse */ MtxTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltipModule, declarations: [MtxTooltip, TooltipComponent], imports: [A11yModule, CommonModule, OverlayModule, MatCommonModule, MtxPipesModule], exports: [MtxTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule] });
|
|
950
|
-
/** @nocollapse */ MtxTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltipModule, providers: [MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [A11yModule, CommonModule, OverlayModule, MatCommonModule, MtxPipesModule, MatCommonModule, CdkScrollableModule] });
|
|
951
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxTooltipModule, decorators: [{
|
|
952
|
-
type: NgModule,
|
|
953
|
-
args: [{
|
|
954
|
-
imports: [A11yModule, CommonModule, OverlayModule, MatCommonModule, MtxPipesModule],
|
|
955
|
-
exports: [MtxTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule],
|
|
956
|
-
declarations: [MtxTooltip, TooltipComponent],
|
|
957
|
-
providers: [MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER],
|
|
958
|
-
}]
|
|
959
|
-
}] });
|
|
960
|
-
|
|
961
|
-
/**
|
|
962
|
-
* Animations used by MatTooltip.
|
|
963
|
-
* @docs-private
|
|
964
|
-
*/
|
|
965
|
-
const matTooltipAnimations = {
|
|
966
|
-
/** Animation that transitions a tooltip in and out. */
|
|
967
|
-
tooltipState: trigger('state', [
|
|
968
|
-
// TODO(crisbeto): these values are based on MDC's CSS.
|
|
969
|
-
// We should be able to use their styles directly once we land #19432.
|
|
970
|
-
state('initial, void, hidden', style({ opacity: 0, transform: 'scale(0.8)' })),
|
|
971
|
-
state('visible', style({ transform: 'scale(1)' })),
|
|
972
|
-
transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
|
|
973
|
-
transition('* => hidden', animate('75ms cubic-bezier(0.4, 0, 1, 1)')),
|
|
974
|
-
]),
|
|
975
|
-
};
|
|
976
|
-
|
|
977
|
-
/**
|
|
978
|
-
* Generated bundle index. Do not edit.
|
|
979
|
-
*/
|
|
980
|
-
|
|
981
|
-
export { MTX_TOOLTIP_DEFAULT_OPTIONS, MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY, MTX_TOOLTIP_SCROLL_STRATEGY, MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY, MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxTooltip, MtxTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, TooltipComponent, _MtxTooltipBase, _TooltipComponentBase, getMtxTooltipInvalidPositionError, matTooltipAnimations };
|
|
982
|
-
//# sourceMappingURL=mtxTooltip.mjs.map
|