UNPKG

@angular/material

Version:
758 lines (749 loc) 28 kB
/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import { A11yModule, ARIA_DESCRIBER_PROVIDER, AriaDescriber, FocusMonitor } from '@angular/cdk/a11y'; import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay'; import { Platform, PlatformModule } from '@angular/cdk/platform'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Inject, InjectionToken, Input, NgModule, NgZone, Optional, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { MatCommonModule } from '@angular/material/core'; import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout'; import { Directionality } from '@angular/cdk/bidi'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ESCAPE } from '@angular/cdk/keycodes'; import { ComponentPortal } from '@angular/cdk/portal'; import { take } from 'rxjs/operators/take'; import { merge } from 'rxjs/observable/merge'; import { ScrollDispatcher } from '@angular/cdk/scrolling'; import { Subject } from 'rxjs/Subject'; import { animate, state, style, transition, trigger } from '@angular/animations'; /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Animations used by MatTooltip. */ const matTooltipAnimations = { /** Animation that transitions a tooltip in and out. */ tooltipState: trigger('state', [ state('initial, void, hidden', style({ transform: 'scale(0)' })), state('visible', style({ transform: 'scale(1)' })), transition('* => visible', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')), transition('* => hidden', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')), ]) }; /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Time in ms to throttle repositioning after scroll events. */ const SCROLL_THROTTLE_MS = 20; /** * CSS class that will be attached to the overlay panel. */ const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel'; /** * Creates an error to be thrown if the user supplied an invalid tooltip position. * @param {?} position * @return {?} */ function getMatTooltipInvalidPositionError(position) { return Error(`Tooltip position "${position}" is invalid.`); } /** * Injection token that determines the scroll handling while a tooltip is visible. */ const MAT_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('mat-tooltip-scroll-strategy'); /** * \@docs-private * @param {?} overlay * @return {?} */ function MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) { return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS }); } /** * \@docs-private */ const MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER = { provide: MAT_TOOLTIP_SCROLL_STRATEGY, deps: [Overlay], useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY }; /** * Default `matTooltip` options that can be overridden. * @record */ /** * Injection token to be used to override the default options for `matTooltip`. */ const MAT_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('mat-tooltip-default-options'); /** * Directive that attaches a material design tooltip to the host element. Animates the showing and * hiding of a tooltip provided position (defaults to below the element). * * https://material.google.com/components/tooltips.html */ class MatTooltip { /** * @param {?} _overlay * @param {?} _elementRef * @param {?} _scrollDispatcher * @param {?} _viewContainerRef * @param {?} _ngZone * @param {?} _platform * @param {?} _ariaDescriber * @param {?} _focusMonitor * @param {?} _scrollStrategy * @param {?} _dir * @param {?=} _defaultOptions */ constructor(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, _scrollStrategy, _dir, _defaultOptions) { // TODO(crisbeto): make the `_defaultOptions` a required param next time we do breaking changes. // @deletion-target 6.0.0 this._overlay = _overlay; this._elementRef = _elementRef; this._scrollDispatcher = _scrollDispatcher; this._viewContainerRef = _viewContainerRef; this._ngZone = _ngZone; this._platform = _platform; this._ariaDescriber = _ariaDescriber; this._focusMonitor = _focusMonitor; this._scrollStrategy = _scrollStrategy; this._dir = _dir; this._defaultOptions = _defaultOptions; this._position = 'below'; this._disabled = false; /** * The default delay in ms before showing the tooltip after show is called */ this.showDelay = this._defaultOptions ? this._defaultOptions.showDelay : 0; /** * The default delay in ms before hiding the tooltip after hide is called */ this.hideDelay = this._defaultOptions ? this._defaultOptions.hideDelay : 0; this._message = ''; this._manualListeners = new Map(); const /** @type {?} */ element = _elementRef.nativeElement; // The mouse events shouldn't be bound on iOS devices, because // they can prevent the first tap from firing its click event. if (!_platform.IOS) { this._manualListeners.set('mouseenter', () => this.show()); this._manualListeners.set('mouseleave', () => this.hide()); this._manualListeners .forEach((listener, event) => _elementRef.nativeElement.addEventListener(event, listener)); } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { // When we bind a gesture event on an element (in this case `longpress`), HammerJS // will add some inline styles by default, including `user-select: none`. This is // problematic on iOS, because it will prevent users from typing in inputs. If // we're on iOS and the tooltip is attached on an input or textarea, we clear // the `user-select` to avoid these issues. element.style.webkitUserSelect = element.style.userSelect = ''; } _focusMonitor.monitor(element).subscribe(origin => { // Note that the focus monitor runs outside the Angular zone. if (!origin) { _ngZone.run(() => this.hide(0)); } else if (origin !== 'program') { _ngZone.run(() => this.show()); } }); } /** * Allows the user to define the position of the tooltip relative to the parent element * @return {?} */ get position() { return this._position; } /** * @param {?} value * @return {?} */ set position(value) { if (value !== this._position) { this._position = value; // TODO(andrewjs): When the overlay's position can be dynamically changed, do not destroy // the tooltip. if (this._tooltipInstance) { this._disposeTooltip(); } } } /** * Disables the display of the tooltip. * @return {?} */ get disabled() { return this._disabled; } /** * @param {?} value * @return {?} */ set disabled(value) { this._disabled = coerceBooleanProperty(value); // If tooltip is disabled, hide immediately. if (this._disabled) { this.hide(0); } } /** * @deprecated * \@deletion-target 6.0.0 * @return {?} */ get _positionDeprecated() { return this._position; } /** * @param {?} value * @return {?} */ set _positionDeprecated(value) { this._position = value; } /** * The message to be displayed in the tooltip * @return {?} */ get message() { return this._message; } /** * @param {?} value * @return {?} */ set message(value) { this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message); // If the message is not a string (e.g. number), convert it to a string and trim it. this._message = value != null ? `${value}`.trim() : ''; if (!this._message && this._isTooltipVisible()) { this.hide(0); } else { this._updateTooltipMessage(); this._ariaDescriber.describe(this._elementRef.nativeElement, this.message); } } /** * Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. * @return {?} */ get tooltipClass() { return this._tooltipClass; } /** * @param {?} value * @return {?} */ set tooltipClass(value) { this._tooltipClass = value; if (this._tooltipInstance) { this._setTooltipClass(this._tooltipClass); } } /** * Dispose the tooltip when destroyed. * @return {?} */ ngOnDestroy() { if (this._tooltipInstance) { this._disposeTooltip(); } // Clean up the event listeners set in the constructor if (!this._platform.IOS) { this._manualListeners.forEach((listener, event) => { this._elementRef.nativeElement.removeEventListener(event, listener); }); this._manualListeners.clear(); } this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message); this._focusMonitor.stopMonitoring(this._elementRef.nativeElement); } /** * Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input * @param {?=} delay * @return {?} */ show(delay = this.showDelay) { if (this.disabled || !this.message) { return; } if (!this._tooltipInstance) { this._createTooltip(); } this._setTooltipClass(this._tooltipClass); this._updateTooltipMessage(); /** @type {?} */ ((this._tooltipInstance)).show(this._position, delay); } /** * Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input * @param {?=} delay * @return {?} */ hide(delay = this.hideDelay) { if (this._tooltipInstance) { this._tooltipInstance.hide(delay); } } /** * Shows/hides the tooltip * @return {?} */ toggle() { this._isTooltipVisible() ? this.hide() : this.show(); } /** * Returns true if the tooltip is currently visible to the user * @return {?} */ _isTooltipVisible() { return !!this._tooltipInstance && this._tooltipInstance.isVisible(); } /** * Handles the keydown events on the host element. * @param {?} e * @return {?} */ _handleKeydown(e) { if (this._isTooltipVisible() && e.keyCode === ESCAPE) { e.stopPropagation(); this.hide(0); } } /** * Handles the touchend events on the host element. * @return {?} */ _handleTouchend() { this.hide(this._defaultOptions ? this._defaultOptions.touchendHideDelay : 1500); } /** * Create the tooltip to display * @return {?} */ _createTooltip() { const /** @type {?} */ overlayRef = this._createOverlay(); const /** @type {?} */ portal = new ComponentPortal(TooltipComponent, this._viewContainerRef); this._tooltipInstance = overlayRef.attach(portal).instance; // Dispose of the tooltip when the overlay is detached. merge(/** @type {?} */ ((this._tooltipInstance)).afterHidden(), overlayRef.detachments()).subscribe(() => { // Check first if the tooltip has already been removed through this components destroy. if (this._tooltipInstance) { this._disposeTooltip(); } }); } /** * Create the overlay config and position strategy * @return {?} */ _createOverlay() { const /** @type {?} */ origin = this._getOrigin(); const /** @type {?} */ overlay = this._getOverlayPosition(); // Create connected position strategy that listens for scroll events to reposition. const /** @type {?} */ strategy = this._overlay .position() .connectedTo(this._elementRef, origin.main, overlay.main) .withFallbackPosition(origin.fallback, overlay.fallback); const /** @type {?} */ scrollableAncestors = this._scrollDispatcher .getAncestorScrollContainers(this._elementRef); strategy.withScrollableContainers(scrollableAncestors); strategy.onPositionChange.subscribe(change => { if (this._tooltipInstance) { if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) { // After position changes occur and the overlay is clipped by // a parent scrollable then close the tooltip. this._ngZone.run(() => this.hide(0)); } else { // Otherwise recalculate the origin based on the new position. this._tooltipInstance._setTransformOrigin(change.connectionPair); } } }); const /** @type {?} */ config = new OverlayConfig({ direction: this._dir ? this._dir.value : 'ltr', positionStrategy: strategy, panelClass: TOOLTIP_PANEL_CLASS, scrollStrategy: this._scrollStrategy() }); this._overlayRef = this._overlay.create(config); return this._overlayRef; } /** * Disposes the current tooltip and the overlay it is attached to * @return {?} */ _disposeTooltip() { if (this._overlayRef) { this._overlayRef.dispose(); this._overlayRef = null; } this._tooltipInstance = null; } /** * Returns the origin position and a fallback position based on the user's position preference. * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`). * @return {?} */ _getOrigin() { const /** @type {?} */ isDirectionLtr = !this._dir || this._dir.value == 'ltr'; let /** @type {?} */ position; if (this.position == 'above' || this.position == 'below') { position = { originX: 'center', originY: this.position == 'above' ? 'top' : 'bottom' }; } else if (this.position == 'left' || this.position == 'before' && isDirectionLtr || this.position == 'after' && !isDirectionLtr) { position = { originX: 'start', originY: 'center' }; } else if (this.position == 'right' || this.position == 'after' && isDirectionLtr || this.position == 'before' && !isDirectionLtr) { position = { originX: 'end', originY: 'center' }; } else { throw getMatTooltipInvalidPositionError(this.position); } const { x, y } = this._invertPosition(position.originX, position.originY); return { main: position, fallback: { originX: x, originY: y } }; } /** * Returns the overlay position and a fallback position based on the user's preference * @return {?} */ _getOverlayPosition() { const /** @type {?} */ isLtr = !this._dir || this._dir.value == 'ltr'; let /** @type {?} */ position; if (this.position == 'above') { position = { overlayX: 'center', overlayY: 'bottom' }; } else if (this.position == 'below') { position = { overlayX: 'center', overlayY: 'top' }; } else if (this.position == 'left' || this.position == 'before' && isLtr || this.position == 'after' && !isLtr) { position = { overlayX: 'end', overlayY: 'center' }; } else if (this.position == 'right' || this.position == 'after' && isLtr || this.position == 'before' && !isLtr) { position = { overlayX: 'start', overlayY: 'center' }; } else { throw getMatTooltipInvalidPositionError(this.position); } const { x, y } = this._invertPosition(position.overlayX, position.overlayY); return { main: position, fallback: { overlayX: x, overlayY: y } }; } /** * Updates the tooltip message and repositions the overlay according to the new message length * @return {?} */ _updateTooltipMessage() { // Must wait for the message to be painted to the tooltip so that the overlay can properly // calculate the correct positioning based on the size of the text. if (this._tooltipInstance) { this._tooltipInstance.message = this.message; this._tooltipInstance._markForCheck(); this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe(() => { if (this._tooltipInstance) { /** @type {?} */ ((this._overlayRef)).updatePosition(); } }); } } /** * Updates the tooltip class * @param {?} tooltipClass * @return {?} */ _setTooltipClass(tooltipClass) { if (this._tooltipInstance) { this._tooltipInstance.tooltipClass = tooltipClass; this._tooltipInstance._markForCheck(); } } /** * Inverts an overlay position. * @param {?} x * @param {?} y * @return {?} */ _invertPosition(x, y) { if (this.position === 'above' || this.position === 'below') { if (y === 'top') { y = 'bottom'; } else if (y === 'bottom') { y = 'top'; } } else { if (x === 'end') { x = 'start'; } else if (x === 'start') { x = 'end'; } } return { x, y }; } } MatTooltip.decorators = [ { type: Directive, args: [{ selector: '[matTooltip]', exportAs: 'matTooltip', host: { '(longpress)': 'show()', '(keydown)': '_handleKeydown($event)', '(touchend)': '_handleTouchend()', }, },] }, ]; /** @nocollapse */ MatTooltip.ctorParameters = () => [ { type: Overlay, }, { type: ElementRef, }, { type: ScrollDispatcher, }, { type: ViewContainerRef, }, { type: NgZone, }, { type: Platform, }, { type: AriaDescriber, }, { type: FocusMonitor, }, { type: undefined, decorators: [{ type: Inject, args: [MAT_TOOLTIP_SCROLL_STRATEGY,] },] }, { type: Directionality, decorators: [{ type: Optional },] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_TOOLTIP_DEFAULT_OPTIONS,] },] }, ]; MatTooltip.propDecorators = { "position": [{ type: Input, args: ['matTooltipPosition',] },], "disabled": [{ type: Input, args: ['matTooltipDisabled',] },], "_positionDeprecated": [{ type: Input, args: ['tooltip-position',] },], "showDelay": [{ type: Input, args: ['matTooltipShowDelay',] },], "hideDelay": [{ type: Input, args: ['matTooltipHideDelay',] },], "message": [{ type: Input, args: ['matTooltip',] },], "tooltipClass": [{ type: Input, args: ['matTooltipClass',] },], }; /** * Internal component that wraps the tooltip's content. * \@docs-private */ class TooltipComponent { /** * @param {?} _changeDetectorRef * @param {?} _breakpointObserver */ constructor(_changeDetectorRef, _breakpointObserver) { this._changeDetectorRef = _changeDetectorRef; this._breakpointObserver = _breakpointObserver; /** * Property watched by the animation framework to show or hide the tooltip */ this._visibility = 'initial'; /** * Whether interactions on the page should close the tooltip */ this._closeOnInteraction = false; /** * The transform origin used in the animation for showing and hiding the tooltip */ this._transformOrigin = 'bottom'; /** * Subject for notifying that the tooltip has been hidden from the view */ this._onHide = new Subject(); /** * Stream that emits whether the user has a handset-sized display. */ this._isHandset = this._breakpointObserver.observe(Breakpoints.Handset); } /** * Shows the tooltip with an animation originating from the provided origin * @param {?} position Position of the tooltip. * @param {?} delay Amount of milliseconds to the delay showing the tooltip. * @return {?} */ show(position, delay) { // Cancel the delayed hide if it is scheduled if (this._hideTimeoutId) { clearTimeout(this._hideTimeoutId); } // Body interactions should cancel the tooltip if there is a delay in showing. this._closeOnInteraction = true; this._position = position; this._showTimeoutId = setTimeout(() => { this._visibility = 'visible'; // Mark for check so if any parent component has set the // ChangeDetectionStrategy to OnPush it will be checked anyways this._markForCheck(); }, delay); } /** * Begins the animation to hide the tooltip after the provided delay in ms. * @param {?} delay Amount of milliseconds to delay showing the tooltip. * @return {?} */ hide(delay) { // Cancel the delayed show if it is scheduled if (this._showTimeoutId) { clearTimeout(this._showTimeoutId); } this._hideTimeoutId = setTimeout(() => { this._visibility = 'hidden'; // Mark for check so if any parent component has set the // ChangeDetectionStrategy to OnPush it will be checked anyways this._markForCheck(); }, delay); } /** * Returns an observable that notifies when the tooltip has been hidden from view. * @return {?} */ afterHidden() { return this._onHide.asObservable(); } /** * Whether the tooltip is being displayed. * @return {?} */ isVisible() { return this._visibility === 'visible'; } /** * Sets the tooltip transform origin according to the position of the tooltip overlay. * @param {?} overlayPosition * @return {?} */ _setTransformOrigin(overlayPosition) { const /** @type {?} */ axis = (this._position === 'above' || this._position === 'below') ? 'Y' : 'X'; const /** @type {?} */ position = axis == 'X' ? overlayPosition.overlayX : overlayPosition.overlayY; if (position === 'top' || position === 'bottom') { this._transformOrigin = position; } else if (position === 'start') { this._transformOrigin = 'left'; } else if (position === 'end') { this._transformOrigin = 'right'; } else { throw getMatTooltipInvalidPositionError(this._position); } } /** * @return {?} */ _animationStart() { this._closeOnInteraction = false; } /** * @param {?} event * @return {?} */ _animationDone(event) { const /** @type {?} */ toState = /** @type {?} */ (event.toState); if (toState === 'hidden' && !this.isVisible()) { this._onHide.next(); } if (toState === 'visible' || toState === 'hidden') { this._closeOnInteraction = true; } } /** * Interactions on the HTML body should close the tooltip immediately as defined in the * material design spec. * https://material.google.com/components/tooltips.html#tooltips-interaction * @return {?} */ _handleBodyInteraction() { if (this._closeOnInteraction) { this.hide(0); } } /** * Marks that the tooltip needs to be checked in the next change detection run. * Mainly used for rendering the initial text before positioning a tooltip, which * can be problematic in components with OnPush change detection. * @return {?} */ _markForCheck() { this._changeDetectorRef.markForCheck(); } } TooltipComponent.decorators = [ { type: Component, args: [{selector: 'mat-tooltip-component', template: "<div class=\"mat-tooltip\" [ngClass]=\"tooltipClass\" [class.mat-tooltip-handset]=\"(_isHandset | async)!.matches\" [style.transform-origin]=\"_transformOrigin\" [@state]=\"_visibility\" (@state.start)=\"_animationStart()\" (@state.done)=\"_animationDone($event)\">{{message}}</div>", styles: [".mat-tooltip-panel{pointer-events:none!important}.mat-tooltip{color:#fff;border-radius:2px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px}@media screen and (-ms-high-contrast:active){.mat-tooltip{outline:solid 1px}}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}"], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, animations: [matTooltipAnimations.tooltipState], host: { // Forces the element to have a layout in IE and Edge. This fixes issues where the element // won't be rendered if the animations are disabled or there is no web animations polyfill. '[style.zoom]': '_visibility === "visible" ? 1 : null', '(body:click)': 'this._handleBodyInteraction()', 'aria-hidden': 'true', } },] }, ]; /** @nocollapse */ TooltipComponent.ctorParameters = () => [ { type: ChangeDetectorRef, }, { type: BreakpointObserver, }, ]; /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ const ɵ0 = { showDelay: 0, hideDelay: 0, touchendHideDelay: 1500 }; class MatTooltipModule { } MatTooltipModule.decorators = [ { type: NgModule, args: [{ imports: [ CommonModule, OverlayModule, MatCommonModule, PlatformModule, A11yModule, LayoutModule, ], exports: [MatTooltip, TooltipComponent, MatCommonModule], declarations: [MatTooltip, TooltipComponent], entryComponents: [TooltipComponent], providers: [ MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER, ARIA_DESCRIBER_PROVIDER, { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: ɵ0 } ], },] }, ]; /** @nocollapse */ MatTooltipModule.ctorParameters = () => []; /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Generated bundle index. Do not edit. */ export { MatTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, getMatTooltipInvalidPositionError, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY, MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltip, TooltipComponent, matTooltipAnimations }; //# sourceMappingURL=tooltip.js.map