@ng-matero/extensions 17.0.0 → 17.1.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/_index.scss +24 -12
- package/alert/alert-module.d.ts +3 -3
- package/alert/alert.d.ts +1 -1
- package/checkbox-group/checkbox-group-module.d.ts +6 -6
- package/checkbox-group/checkbox-group.d.ts +1 -1
- package/colorpicker/colorpicker-input.d.ts +1 -1
- package/colorpicker/colorpicker-module.d.ts +10 -10
- package/colorpicker/colorpicker-toggle.d.ts +2 -2
- package/colorpicker/colorpicker.d.ts +3 -3
- package/column-resize/column-resize-directives/column-resize-flex.d.ts +1 -1
- package/column-resize/column-resize-directives/column-resize.d.ts +1 -1
- package/column-resize/column-resize-module.d.ts +1 -1
- package/core/color/_all-color.scss +3 -3
- package/core/datetime/datetime.module.d.ts +4 -1
- package/core/density/_all-density.scss +2 -2
- package/core/pipes/is-template-ref.pipe.d.ts +1 -1
- package/core/pipes/pipes.module.d.ts +4 -4
- package/core/pipes/to-observable.pipe.d.ts +1 -1
- package/core/tokens/m2/mdc/_plain-tooltip.scss +6 -6
- package/core/tokens/m2/mtx/_select.scss +1 -42
- package/core/typography/_all-typography.scss +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/datetimepicker-input.d.ts +1 -1
- package/datetimepicker/datetimepicker-module.d.ts +16 -16
- package/datetimepicker/datetimepicker-toggle.d.ts +2 -2
- package/datetimepicker/datetimepicker.d.ts +3 -3
- package/datetimepicker/month-view.d.ts +1 -1
- package/datetimepicker/multi-year-view.d.ts +1 -1
- package/datetimepicker/time.d.ts +3 -3
- package/datetimepicker/year-view.d.ts +1 -1
- package/dialog/dialog-container.d.ts +1 -1
- package/dialog/dialog-module.d.ts +7 -7
- package/drawer/drawer-container.d.ts +1 -1
- package/drawer/drawer-module.d.ts +5 -5
- package/esm2022/alert/alert-module.mjs +6 -7
- package/esm2022/alert/alert.mjs +5 -5
- package/esm2022/button/button-loading.mjs +4 -4
- package/esm2022/button/button-module.mjs +4 -4
- package/esm2022/checkbox-group/checkbox-group-module.mjs +6 -7
- package/esm2022/checkbox-group/checkbox-group.mjs +9 -10
- package/esm2022/colorpicker/colorpicker-input.mjs +5 -4
- package/esm2022/colorpicker/colorpicker-module.mjs +20 -19
- package/esm2022/colorpicker/colorpicker-toggle.mjs +10 -9
- package/esm2022/colorpicker/colorpicker.mjs +25 -18
- package/esm2022/column-resize/column-resize-directives/column-resize-flex.mjs +5 -4
- package/esm2022/column-resize/column-resize-directives/column-resize.mjs +5 -4
- package/esm2022/column-resize/column-resize-module.mjs +6 -6
- package/esm2022/column-resize/column-resize-notifier.mjs +6 -6
- package/esm2022/column-resize/column-resize.mjs +4 -4
- package/esm2022/column-resize/column-size-store.mjs +3 -3
- package/esm2022/column-resize/event-dispatcher.mjs +4 -4
- package/esm2022/column-resize/overlay-handle.mjs +4 -4
- package/esm2022/column-resize/polyfill.mjs +1 -1
- package/esm2022/column-resize/resizable.mjs +4 -4
- package/esm2022/column-resize/resize-strategy.mjs +10 -10
- package/esm2022/core/datetime/datetime-adapter.mjs +1 -1
- package/esm2022/core/datetime/datetime.module.mjs +19 -23
- package/esm2022/core/datetime/native-datetime-adapter.mjs +4 -4
- package/esm2022/core/pipes/is-template-ref.pipe.mjs +5 -5
- package/esm2022/core/pipes/pipes.module.mjs +6 -7
- package/esm2022/core/pipes/to-observable.pipe.mjs +5 -5
- package/esm2022/datetimepicker/calendar-body.mjs +5 -5
- package/esm2022/datetimepicker/calendar.mjs +19 -12
- package/esm2022/datetimepicker/clock.mjs +6 -7
- package/esm2022/datetimepicker/datetimepicker-errors.mjs +4 -3
- package/esm2022/datetimepicker/datetimepicker-input.mjs +6 -5
- package/esm2022/datetimepicker/datetimepicker-intl.mjs +3 -3
- package/esm2022/datetimepicker/datetimepicker-module.mjs +28 -11
- package/esm2022/datetimepicker/datetimepicker-toggle.mjs +10 -9
- package/esm2022/datetimepicker/datetimepicker.mjs +23 -19
- package/esm2022/datetimepicker/month-view.mjs +6 -7
- package/esm2022/datetimepicker/multi-year-view.mjs +6 -7
- package/esm2022/datetimepicker/time.mjs +11 -10
- package/esm2022/datetimepicker/year-view.mjs +6 -7
- package/esm2022/dialog/dialog-container.mjs +19 -10
- package/esm2022/dialog/dialog-module.mjs +23 -7
- package/esm2022/dialog/dialog.mjs +6 -5
- package/esm2022/drawer/drawer-container.mjs +5 -6
- package/esm2022/drawer/drawer-module.mjs +6 -7
- package/esm2022/drawer/drawer-ref.mjs +1 -1
- package/esm2022/drawer/drawer.mjs +6 -5
- package/esm2022/grid/cell.mjs +35 -13
- package/esm2022/grid/column-menu.mjs +31 -15
- package/esm2022/grid/column-resize/column-resize-directives/column-resize-flex.mjs +5 -4
- package/esm2022/grid/column-resize/column-resize-directives/column-resize.mjs +5 -4
- package/esm2022/grid/column-resize/column-resize-module.mjs +14 -14
- package/esm2022/grid/column-resize/index.mjs +8 -0
- package/esm2022/grid/column-resize/overlay-handle.mjs +5 -4
- package/esm2022/grid/column-resize/resizable-directives/resizable.mjs +5 -4
- package/esm2022/grid/column-resize/resize-strategy.mjs +3 -3
- package/esm2022/grid/expansion-toggle.mjs +5 -4
- package/esm2022/grid/grid-module.mjs +39 -37
- package/esm2022/grid/grid-pipes.mjs +29 -29
- package/esm2022/grid/grid-utils.mjs +6 -5
- package/esm2022/grid/grid.mjs +108 -76
- package/esm2022/loader/loader-module.mjs +6 -7
- package/esm2022/loader/loader.mjs +7 -7
- package/esm2022/photoviewer/photoviewer-module.mjs +6 -7
- package/esm2022/photoviewer/photoviewer.mjs +5 -4
- package/esm2022/popover/popover-content.mjs +8 -7
- package/esm2022/popover/popover-module.mjs +22 -7
- package/esm2022/popover/popover-target.mjs +5 -4
- package/esm2022/popover/popover-trigger.mjs +13 -6
- package/esm2022/popover/popover.mjs +7 -7
- package/esm2022/progress/progress-module.mjs +6 -7
- package/esm2022/progress/progress.mjs +6 -6
- package/esm2022/select/option.mjs +5 -4
- package/esm2022/select/select-module.mjs +20 -9
- package/esm2022/select/select.mjs +11 -11
- package/esm2022/select/templates.mjs +45 -45
- package/esm2022/split/split-module.mjs +6 -7
- package/esm2022/split/split-pane.mjs +5 -4
- package/esm2022/split/split.mjs +6 -6
- package/esm2022/split/utils.mjs +1 -1
- package/esm2022/tooltip/tooltip-module.mjs +24 -7
- package/esm2022/tooltip/tooltip.mjs +101 -114
- package/fesm2022/mtxAlert.mjs +9 -10
- package/fesm2022/mtxAlert.mjs.map +1 -1
- package/fesm2022/mtxButton.mjs +7 -7
- package/fesm2022/mtxButton.mjs.map +1 -1
- package/fesm2022/mtxCheckboxGroup.mjs +12 -16
- package/fesm2022/mtxCheckboxGroup.mjs.map +1 -1
- package/fesm2022/mtxColorpicker.mjs +462 -454
- package/fesm2022/mtxColorpicker.mjs.map +1 -1
- package/fesm2022/mtxColumnResize.mjs +43 -41
- package/fesm2022/mtxColumnResize.mjs.map +1 -1
- package/fesm2022/mtxCore.mjs +34 -39
- package/fesm2022/mtxCore.mjs.map +1 -1
- package/fesm2022/mtxDatetimepicker.mjs +814 -781
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2022/mtxDialog.mjs +44 -22
- package/fesm2022/mtxDialog.mjs.map +1 -1
- package/fesm2022/mtxDrawer.mjs +14 -15
- package/fesm2022/mtxDrawer.mjs.map +1 -1
- package/fesm2022/mtxGrid.mjs +249 -180
- package/fesm2022/mtxGrid.mjs.map +1 -1
- package/fesm2022/mtxLoader.mjs +11 -14
- package/fesm2022/mtxLoader.mjs.map +1 -1
- package/fesm2022/mtxPhotoviewer.mjs +9 -9
- package/fesm2022/mtxPhotoviewer.mjs.map +1 -1
- package/fesm2022/mtxPopover.mjs +52 -29
- package/fesm2022/mtxPopover.mjs.map +1 -1
- package/fesm2022/mtxProgress.mjs +10 -12
- package/fesm2022/mtxProgress.mjs.map +1 -1
- package/fesm2022/mtxSelect.mjs +75 -64
- package/fesm2022/mtxSelect.mjs.map +1 -1
- package/fesm2022/mtxSplit.mjs +14 -15
- package/fesm2022/mtxSplit.mjs.map +1 -1
- package/fesm2022/mtxTooltip.mjs +124 -121
- package/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/column-resize-directives/column-resize-flex.d.ts +1 -1
- package/grid/column-resize/column-resize-directives/column-resize.d.ts +1 -1
- package/grid/column-resize/column-resize-module.d.ts +7 -6
- package/grid/column-resize/index.d.ts +7 -0
- package/grid/column-resize/overlay-handle.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-module.d.ts +25 -25
- package/grid/grid-pipes.d.ts +7 -7
- package/grid/grid.d.ts +24 -24
- package/loader/loader-module.d.ts +5 -5
- package/loader/loader.d.ts +1 -1
- package/package.json +6 -6
- package/photoviewer/photoviewer-module.d.ts +1 -1
- package/photoviewer/photoviewer.d.ts +1 -1
- package/popover/popover-content.d.ts +1 -1
- package/popover/popover-module.d.ts +8 -8
- package/popover/popover-target.d.ts +1 -1
- package/popover/popover-trigger.d.ts +1 -1
- package/popover/popover.d.ts +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/progress/progress-module.d.ts +3 -3
- package/progress/progress.d.ts +1 -1
- package/select/option.d.ts +1 -1
- package/select/select-module.d.ts +7 -7
- package/select/select.d.ts +1 -1
- package/select/select.scss +9 -10
- package/select/templates.d.ts +11 -11
- package/split/split-module.d.ts +4 -4
- package/split/split-pane.d.ts +1 -1
- package/split/split.d.ts +1 -1
- package/tooltip/tooltip-module.d.ts +7 -7
- package/tooltip/tooltip.d.ts +30 -44
- package/tooltip/tooltip.scss +2 -4
- package/core/mdc-helpers/_mdc-helpers.scss +0 -31
- package/core/style/_validation.scss +0 -43
- package/core/theming/_inspection.scss +0 -303
- package/core/theming/_m2-inspection.scss +0 -266
package/fesm2022/mtxTooltip.mjs
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, TemplateRef, ElementRef, Directive, Inject, Input,
|
|
3
|
-
import
|
|
4
|
-
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
2
|
+
import { inject, InjectionToken, TemplateRef, ElementRef, Directive, Inject, Optional, Input, ANIMATION_MODULE_TYPE, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
|
|
3
|
+
import { DOCUMENT, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
5
4
|
import * as i3 from '@angular/cdk/a11y';
|
|
6
5
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
7
6
|
import * as i1 from '@angular/cdk/overlay';
|
|
8
7
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
9
8
|
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
10
9
|
import { MatCommonModule } from '@angular/material/core';
|
|
11
|
-
import
|
|
12
|
-
import { MtxPipesModule } from '@ng-matero/extensions/core';
|
|
10
|
+
import { MtxIsTemplateRefPipe, MtxPipesModule } from '@ng-matero/extensions/core';
|
|
13
11
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
14
12
|
import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
15
13
|
import * as i2 from '@angular/cdk/platform';
|
|
16
14
|
import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
|
|
17
15
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
18
|
-
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
19
16
|
import { Subject } from 'rxjs';
|
|
20
17
|
import { takeUntil, take } from 'rxjs/operators';
|
|
21
18
|
import * as i4 from '@angular/cdk/bidi';
|
|
@@ -31,7 +28,13 @@ function getMtxTooltipInvalidPositionError(position) {
|
|
|
31
28
|
return Error(`Tooltip position "${position}" is invalid.`);
|
|
32
29
|
}
|
|
33
30
|
/** Injection token that determines the scroll handling while a tooltip is visible. */
|
|
34
|
-
const MTX_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('mtx-tooltip-scroll-strategy'
|
|
31
|
+
const MTX_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('mtx-tooltip-scroll-strategy', {
|
|
32
|
+
providedIn: 'root',
|
|
33
|
+
factory: () => {
|
|
34
|
+
const overlay = inject(Overlay);
|
|
35
|
+
return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS });
|
|
36
|
+
},
|
|
37
|
+
});
|
|
35
38
|
/** @docs-private */
|
|
36
39
|
function MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay) {
|
|
37
40
|
return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS });
|
|
@@ -75,7 +78,13 @@ const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
|
|
|
75
78
|
const UNBOUNDED_ANCHOR_GAP = 8;
|
|
76
79
|
const MIN_HEIGHT = 24;
|
|
77
80
|
const MAX_WIDTH = 200;
|
|
78
|
-
|
|
81
|
+
/**
|
|
82
|
+
* Directive that attaches a material design tooltip to the host element. Animates the showing and
|
|
83
|
+
* hiding of a tooltip provided position (defaults to below the element).
|
|
84
|
+
*
|
|
85
|
+
* https://material.io/design/components/tooltips.html
|
|
86
|
+
*/
|
|
87
|
+
class MtxTooltip {
|
|
79
88
|
/** Allows the user to define the position of the tooltip relative to the parent element */
|
|
80
89
|
get position() {
|
|
81
90
|
return this._position;
|
|
@@ -90,6 +99,10 @@ class _MtxTooltipBase {
|
|
|
90
99
|
}
|
|
91
100
|
}
|
|
92
101
|
}
|
|
102
|
+
/**
|
|
103
|
+
* Whether tooltip should be relative to the click or touch origin
|
|
104
|
+
* instead of outside the element bounding box.
|
|
105
|
+
*/
|
|
93
106
|
get positionAtOrigin() {
|
|
94
107
|
return this._positionAtOrigin;
|
|
95
108
|
}
|
|
@@ -186,15 +199,16 @@ class _MtxTooltipBase {
|
|
|
186
199
|
this._focusMonitor = _focusMonitor;
|
|
187
200
|
this._dir = _dir;
|
|
188
201
|
this._defaultOptions = _defaultOptions;
|
|
202
|
+
this._overlayRef = null;
|
|
203
|
+
this._tooltipInstance = null;
|
|
189
204
|
this._position = 'below';
|
|
190
205
|
this._positionAtOrigin = false;
|
|
191
206
|
this._disabled = false;
|
|
192
207
|
this._viewInitialized = false;
|
|
193
208
|
this._pointerExitEventsInitialized = false;
|
|
209
|
+
this._tooltipComponent = TooltipComponent;
|
|
194
210
|
this._viewportMargin = 8;
|
|
195
|
-
this._cssClassPrefix = 'mtx';
|
|
196
|
-
this._showDelay = this._defaultOptions.showDelay;
|
|
197
|
-
this._hideDelay = this._defaultOptions.hideDelay;
|
|
211
|
+
this._cssClassPrefix = 'mtx-mdc';
|
|
198
212
|
/**
|
|
199
213
|
* How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
|
|
200
214
|
* uses a long press gesture to show and hide, however it can conflict with the native browser
|
|
@@ -218,6 +232,8 @@ class _MtxTooltipBase {
|
|
|
218
232
|
this._scrollStrategy = scrollStrategy;
|
|
219
233
|
this._document = _document;
|
|
220
234
|
if (_defaultOptions) {
|
|
235
|
+
this._showDelay = _defaultOptions.showDelay;
|
|
236
|
+
this._hideDelay = _defaultOptions.hideDelay;
|
|
221
237
|
if (_defaultOptions.position) {
|
|
222
238
|
this.position = _defaultOptions.position;
|
|
223
239
|
}
|
|
@@ -233,6 +249,7 @@ class _MtxTooltipBase {
|
|
|
233
249
|
this._updatePosition(this._overlayRef);
|
|
234
250
|
}
|
|
235
251
|
});
|
|
252
|
+
this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
|
|
236
253
|
}
|
|
237
254
|
ngAfterViewInit() {
|
|
238
255
|
// This needs to happen after view init so the initial values for all inputs have been set.
|
|
@@ -392,6 +409,20 @@ class _MtxTooltipBase {
|
|
|
392
409
|
}
|
|
393
410
|
/** Adds the configured offset to a position. Used as a hook for child classes. */
|
|
394
411
|
_addOffset(position) {
|
|
412
|
+
const offset = UNBOUNDED_ANCHOR_GAP;
|
|
413
|
+
const isLtr = !this._dir || this._dir.value == 'ltr';
|
|
414
|
+
if (position.originY === 'top') {
|
|
415
|
+
position.offsetY = -offset;
|
|
416
|
+
}
|
|
417
|
+
else if (position.originY === 'bottom') {
|
|
418
|
+
position.offsetY = offset;
|
|
419
|
+
}
|
|
420
|
+
else if (position.originX === 'start') {
|
|
421
|
+
position.offsetX = isLtr ? -offset : offset;
|
|
422
|
+
}
|
|
423
|
+
else if (position.originX === 'end') {
|
|
424
|
+
position.offsetX = isLtr ? offset : -offset;
|
|
425
|
+
}
|
|
395
426
|
return position;
|
|
396
427
|
}
|
|
397
428
|
/**
|
|
@@ -647,12 +678,29 @@ class _MtxTooltipBase {
|
|
|
647
678
|
style.webkitTapHighlightColor = 'transparent';
|
|
648
679
|
}
|
|
649
680
|
}
|
|
650
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0
|
|
651
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0
|
|
681
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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 }, { token: MTX_TOOLTIP_DEFAULT_OPTIONS, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
682
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: MtxTooltip, isStandalone: true, selector: "[mtxTooltip]", 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"] }, host: { properties: { "class.mtx-mdc-tooltip-disabled": "disabled" }, classAttribute: "mtx-mdc-tooltip-trigger" }, exportAs: ["mtxTooltip"], ngImport: i0 }); }
|
|
652
683
|
}
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0
|
|
654
|
-
type: Directive
|
|
655
|
-
|
|
684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTooltip, decorators: [{
|
|
685
|
+
type: Directive,
|
|
686
|
+
args: [{
|
|
687
|
+
selector: '[mtxTooltip]',
|
|
688
|
+
exportAs: 'mtxTooltip',
|
|
689
|
+
host: {
|
|
690
|
+
'class': 'mtx-mdc-tooltip-trigger',
|
|
691
|
+
'[class.mtx-mdc-tooltip-disabled]': 'disabled',
|
|
692
|
+
},
|
|
693
|
+
standalone: true,
|
|
694
|
+
}]
|
|
695
|
+
}], ctorParameters: () => [{ 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: [{
|
|
696
|
+
type: Inject,
|
|
697
|
+
args: [MTX_TOOLTIP_SCROLL_STRATEGY]
|
|
698
|
+
}] }, { type: i4.Directionality }, { type: undefined, decorators: [{
|
|
699
|
+
type: Optional
|
|
700
|
+
}, {
|
|
701
|
+
type: Inject,
|
|
702
|
+
args: [MTX_TOOLTIP_DEFAULT_OPTIONS]
|
|
703
|
+
}] }, { type: undefined, decorators: [{
|
|
656
704
|
type: Inject,
|
|
657
705
|
args: [DOCUMENT]
|
|
658
706
|
}] }], propDecorators: { position: [{
|
|
@@ -684,70 +732,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
684
732
|
args: ['mtxTooltipClass']
|
|
685
733
|
}] } });
|
|
686
734
|
/**
|
|
687
|
-
*
|
|
688
|
-
*
|
|
689
|
-
*
|
|
690
|
-
* https://material.io/design/components/tooltips.html
|
|
735
|
+
* Internal component that wraps the tooltip's content.
|
|
736
|
+
* @docs-private
|
|
691
737
|
*/
|
|
692
|
-
class
|
|
693
|
-
constructor(
|
|
694
|
-
super(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document);
|
|
695
|
-
this._tooltipComponent = TooltipComponent;
|
|
696
|
-
this._cssClassPrefix = 'mtx-mdc';
|
|
697
|
-
this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
|
|
698
|
-
}
|
|
699
|
-
_addOffset(position) {
|
|
700
|
-
const offset = UNBOUNDED_ANCHOR_GAP;
|
|
701
|
-
const isLtr = !this._dir || this._dir.value == 'ltr';
|
|
702
|
-
if (position.originY === 'top') {
|
|
703
|
-
position.offsetY = -offset;
|
|
704
|
-
}
|
|
705
|
-
else if (position.originY === 'bottom') {
|
|
706
|
-
position.offsetY = offset;
|
|
707
|
-
}
|
|
708
|
-
else if (position.originX === 'start') {
|
|
709
|
-
position.offsetX = isLtr ? -offset : offset;
|
|
710
|
-
}
|
|
711
|
-
else if (position.originX === 'end') {
|
|
712
|
-
position.offsetX = isLtr ? offset : -offset;
|
|
713
|
-
}
|
|
714
|
-
return position;
|
|
715
|
-
}
|
|
716
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", 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 }); }
|
|
717
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: MtxTooltip, selector: "[mtxTooltip]", host: { classAttribute: "mtx-mdc-tooltip-trigger" }, exportAs: ["mtxTooltip"], usesInheritance: true, ngImport: i0 }); }
|
|
718
|
-
}
|
|
719
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxTooltip, decorators: [{
|
|
720
|
-
type: Directive,
|
|
721
|
-
args: [{
|
|
722
|
-
selector: '[mtxTooltip]',
|
|
723
|
-
exportAs: 'mtxTooltip',
|
|
724
|
-
host: {
|
|
725
|
-
class: 'mtx-mdc-tooltip-trigger',
|
|
726
|
-
},
|
|
727
|
-
}]
|
|
728
|
-
}], ctorParameters: () => [{ 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: [{
|
|
729
|
-
type: Inject,
|
|
730
|
-
args: [MTX_TOOLTIP_SCROLL_STRATEGY]
|
|
731
|
-
}] }, { type: i4.Directionality, decorators: [{
|
|
732
|
-
type: Optional
|
|
733
|
-
}] }, { type: undefined, decorators: [{
|
|
734
|
-
type: Optional
|
|
735
|
-
}, {
|
|
736
|
-
type: Inject,
|
|
737
|
-
args: [MTX_TOOLTIP_DEFAULT_OPTIONS]
|
|
738
|
-
}] }, { type: undefined, decorators: [{
|
|
739
|
-
type: Inject,
|
|
740
|
-
args: [DOCUMENT]
|
|
741
|
-
}] }] });
|
|
742
|
-
class _TooltipComponentBase {
|
|
743
|
-
constructor(_changeDetectorRef, animationMode) {
|
|
738
|
+
class TooltipComponent {
|
|
739
|
+
constructor(_changeDetectorRef, _elementRef, animationMode) {
|
|
744
740
|
this._changeDetectorRef = _changeDetectorRef;
|
|
741
|
+
this._elementRef = _elementRef;
|
|
742
|
+
/* Whether the tooltip text overflows to multiple lines */
|
|
743
|
+
this._isMultiline = false;
|
|
745
744
|
/** Whether interactions on the page should close the tooltip */
|
|
746
745
|
this._closeOnInteraction = false;
|
|
747
746
|
/** Whether the tooltip is currently visible. */
|
|
748
747
|
this._isVisible = false;
|
|
749
748
|
/** Subject for notifying that the tooltip has been hidden from the view */
|
|
750
749
|
this._onHide = new Subject();
|
|
750
|
+
/** Name of the show animation and the class that toggles it. */
|
|
751
|
+
this._showAnimation = 'mtx-mdc-tooltip-show';
|
|
752
|
+
/** Name of the hide animation and the class that toggles it. */
|
|
753
|
+
this._hideAnimation = 'mtx-mdc-tooltip-hide';
|
|
751
754
|
this._animationsDisabled = animationMode === 'NoopAnimations';
|
|
752
755
|
}
|
|
753
756
|
/**
|
|
@@ -756,7 +759,9 @@ class _TooltipComponentBase {
|
|
|
756
759
|
*/
|
|
757
760
|
show(delay) {
|
|
758
761
|
// Cancel the delayed hide if it is scheduled
|
|
759
|
-
|
|
762
|
+
if (this._hideTimeoutId != null) {
|
|
763
|
+
clearTimeout(this._hideTimeoutId);
|
|
764
|
+
}
|
|
760
765
|
this._showTimeoutId = setTimeout(() => {
|
|
761
766
|
this._toggleVisibility(true);
|
|
762
767
|
this._showTimeoutId = undefined;
|
|
@@ -768,7 +773,9 @@ class _TooltipComponentBase {
|
|
|
768
773
|
*/
|
|
769
774
|
hide(delay) {
|
|
770
775
|
// Cancel the delayed show if it is scheduled
|
|
771
|
-
|
|
776
|
+
if (this._showTimeoutId != null) {
|
|
777
|
+
clearTimeout(this._showTimeoutId);
|
|
778
|
+
}
|
|
772
779
|
this._hideTimeoutId = setTimeout(() => {
|
|
773
780
|
this._toggleVisibility(false);
|
|
774
781
|
this._hideTimeoutId = undefined;
|
|
@@ -820,7 +827,15 @@ class _TooltipComponentBase {
|
|
|
820
827
|
* This method is only needed by the mdc-tooltip, and so it is only implemented
|
|
821
828
|
* in the mdc-tooltip, not here.
|
|
822
829
|
*/
|
|
823
|
-
_onShow() {
|
|
830
|
+
_onShow() {
|
|
831
|
+
this._isMultiline = this._isTooltipMultiline();
|
|
832
|
+
this._markForCheck();
|
|
833
|
+
}
|
|
834
|
+
/** Whether the tooltip text has overflown to the next line */
|
|
835
|
+
_isTooltipMultiline() {
|
|
836
|
+
const rect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
837
|
+
return rect.height > MIN_HEIGHT && rect.width >= MAX_WIDTH;
|
|
838
|
+
}
|
|
824
839
|
/** Event listener dispatched when an animation on the tooltip finishes. */
|
|
825
840
|
_handleAnimationEnd({ animationName }) {
|
|
826
841
|
if (animationName === this._showAnimation || animationName === this._hideAnimation) {
|
|
@@ -829,8 +844,12 @@ class _TooltipComponentBase {
|
|
|
829
844
|
}
|
|
830
845
|
/** Cancels any pending animation sequences. */
|
|
831
846
|
_cancelPendingAnimations() {
|
|
832
|
-
|
|
833
|
-
|
|
847
|
+
if (this._showTimeoutId != null) {
|
|
848
|
+
clearTimeout(this._showTimeoutId);
|
|
849
|
+
}
|
|
850
|
+
if (this._hideTimeoutId != null) {
|
|
851
|
+
clearTimeout(this._hideTimeoutId);
|
|
852
|
+
}
|
|
834
853
|
this._showTimeoutId = this._hideTimeoutId = undefined;
|
|
835
854
|
}
|
|
836
855
|
/** Handles the cleanup after an animation has finished. */
|
|
@@ -871,43 +890,10 @@ class _TooltipComponentBase {
|
|
|
871
890
|
this._finalizeAnimation(isVisible);
|
|
872
891
|
}
|
|
873
892
|
}
|
|
874
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0
|
|
875
|
-
/** @nocollapse */ static { this.ɵ
|
|
876
|
-
}
|
|
877
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _TooltipComponentBase, decorators: [{
|
|
878
|
-
type: Directive
|
|
879
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
880
|
-
type: Optional
|
|
881
|
-
}, {
|
|
882
|
-
type: Inject,
|
|
883
|
-
args: [ANIMATION_MODULE_TYPE]
|
|
884
|
-
}] }] });
|
|
885
|
-
/**
|
|
886
|
-
* Internal component that wraps the tooltip's content.
|
|
887
|
-
* @docs-private
|
|
888
|
-
*/
|
|
889
|
-
class TooltipComponent extends _TooltipComponentBase {
|
|
890
|
-
constructor(changeDetectorRef, _elementRef, animationMode) {
|
|
891
|
-
super(changeDetectorRef, animationMode);
|
|
892
|
-
this._elementRef = _elementRef;
|
|
893
|
-
/* Whether the tooltip text overflows to multiple lines */
|
|
894
|
-
this._isMultiline = false;
|
|
895
|
-
this._showAnimation = 'mtx-mdc-tooltip-show';
|
|
896
|
-
this._hideAnimation = 'mtx-mdc-tooltip-hide';
|
|
897
|
-
}
|
|
898
|
-
_onShow() {
|
|
899
|
-
this._isMultiline = this._isTooltipMultiline();
|
|
900
|
-
this._markForCheck();
|
|
901
|
-
}
|
|
902
|
-
/** Whether the tooltip text has overflown to the next line */
|
|
903
|
-
_isTooltipMultiline() {
|
|
904
|
-
const rect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
905
|
-
return rect.height > MIN_HEIGHT && rect.width >= MAX_WIDTH;
|
|
906
|
-
}
|
|
907
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
908
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", 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 @if (message | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n } @else {\n {{message}}\n }\n </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:break-all;word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s 0ms cubic-bezier(0,0,.2,1),transform .15s 0ms cubic-bezier(0,0,.2,1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(.4,0,1,1)}.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{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mtx-mdc-tooltip{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}.mtx-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mtx-mdc-tooltip .mdc-tooltip__surface,.mtx-mdc-tooltip .mdc-tooltip__caret-surface-top,.mtx-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mtx-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mtx-mdc-tooltip .mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font);line-height:var(--mdc-plain-tooltip-supporting-text-line-height);font-size:var(--mdc-plain-tooltip-supporting-text-size);font-weight:var(--mdc-plain-tooltip-supporting-text-weight);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking)}.mdc-tooltip.mat-mdc-tooltip,.mdc-tooltip.mtx-mdc-tooltip{position:relative}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.MtxIsTemplateRefPipe, name: "isTemplateRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
893
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
894
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: TooltipComponent, isStandalone: true, 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 }], 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 @if (message | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n } @else {\n {{message}}\n }\n </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:break-all;word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s 0ms cubic-bezier(0,0,.2,1),transform .15s 0ms cubic-bezier(0,0,.2,1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(.4,0,1,1)}.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{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mtx-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mtx-mdc-tooltip .mdc-tooltip__surface,.mtx-mdc-tooltip .mdc-tooltip__caret-surface-top,.mtx-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mtx-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mtx-mdc-tooltip .mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font);line-height:var(--mdc-plain-tooltip-supporting-text-line-height);font-size:var(--mdc-plain-tooltip-supporting-text-size);font-weight:var(--mdc-plain-tooltip-supporting-text-weight);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking)}.mdc-tooltip.mat-mdc-tooltip,.mdc-tooltip.mtx-mdc-tooltip{position:relative}.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.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
909
895
|
}
|
|
910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0
|
|
896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
911
897
|
type: Component,
|
|
912
898
|
args: [{ selector: 'mtx-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
913
899
|
// Forces the element to have a layout in IE and Edge. This fixes issues where the element
|
|
@@ -915,7 +901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
915
901
|
'[style.zoom]': 'isVisible() ? 1 : null',
|
|
916
902
|
'(mouseleave)': '_handleMouseLeave($event)',
|
|
917
903
|
'aria-hidden': 'true',
|
|
918
|
-
}, 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 @if (message | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n } @else {\n {{message}}\n }\n </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:break-all;word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s 0ms cubic-bezier(0,0,.2,1),transform .15s 0ms cubic-bezier(0,0,.2,1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(.4,0,1,1)}.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{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mtx-mdc-tooltip
|
|
904
|
+
}, standalone: true, imports: [NgClass, NgTemplateOutlet, MtxIsTemplateRefPipe], 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 @if (message | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></ng-template>\n } @else {\n {{message}}\n }\n </div>\n</div>\n", styles: [".mdc-tooltip__surface{word-break:break-all;word-break:var(--mdc-tooltip-word-break, normal);overflow-wrap:anywhere}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s 0ms cubic-bezier(0,0,.2,1),transform .15s 0ms cubic-bezier(0,0,.2,1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(.4,0,1,1)}.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{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;outline:1px solid transparent;z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mtx-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mtx-mdc-tooltip .mdc-tooltip__surface,.mtx-mdc-tooltip .mdc-tooltip__caret-surface-top,.mtx-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mtx-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mtx-mdc-tooltip .mdc-tooltip__surface{font-family:var(--mdc-plain-tooltip-supporting-text-font);line-height:var(--mdc-plain-tooltip-supporting-text-line-height);font-size:var(--mdc-plain-tooltip-supporting-text-size);font-weight:var(--mdc-plain-tooltip-supporting-text-weight);letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking)}.mdc-tooltip.mat-mdc-tooltip,.mdc-tooltip.mtx-mdc-tooltip{position:relative}.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.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"] }]
|
|
919
905
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
920
906
|
type: Optional
|
|
921
907
|
}, {
|
|
@@ -931,16 +917,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
931
917
|
}] } });
|
|
932
918
|
|
|
933
919
|
class MtxTooltipModule {
|
|
934
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0
|
|
935
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0
|
|
936
|
-
|
|
920
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
921
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: MtxTooltipModule, imports: [A11yModule,
|
|
922
|
+
CommonModule,
|
|
923
|
+
OverlayModule,
|
|
924
|
+
MatCommonModule,
|
|
925
|
+
MtxPipesModule,
|
|
926
|
+
MtxTooltip,
|
|
927
|
+
TooltipComponent], exports: [MtxTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule] }); }
|
|
928
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTooltipModule, providers: [MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [A11yModule,
|
|
929
|
+
CommonModule,
|
|
930
|
+
OverlayModule,
|
|
931
|
+
MatCommonModule,
|
|
932
|
+
MtxPipesModule, MatCommonModule, CdkScrollableModule] }); }
|
|
937
933
|
}
|
|
938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0
|
|
934
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTooltipModule, decorators: [{
|
|
939
935
|
type: NgModule,
|
|
940
936
|
args: [{
|
|
941
|
-
imports: [
|
|
937
|
+
imports: [
|
|
938
|
+
A11yModule,
|
|
939
|
+
CommonModule,
|
|
940
|
+
OverlayModule,
|
|
941
|
+
MatCommonModule,
|
|
942
|
+
MtxPipesModule,
|
|
943
|
+
MtxTooltip,
|
|
944
|
+
TooltipComponent,
|
|
945
|
+
],
|
|
942
946
|
exports: [MtxTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule],
|
|
943
|
-
declarations: [MtxTooltip, TooltipComponent],
|
|
944
947
|
providers: [MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER],
|
|
945
948
|
}]
|
|
946
949
|
}] });
|
|
@@ -965,5 +968,5 @@ const matTooltipAnimations = {
|
|
|
965
968
|
* Generated bundle index. Do not edit.
|
|
966
969
|
*/
|
|
967
970
|
|
|
968
|
-
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,
|
|
971
|
+
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, getMtxTooltipInvalidPositionError, matTooltipAnimations };
|
|
969
972
|
//# sourceMappingURL=mtxTooltip.mjs.map
|