@angular/material 16.2.0 → 17.0.0-next.0

package/fesm2022/tooltip/testing.mjs

@@ -1,6 +1,25 @@
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 
-class _MatTooltipHarnessBase extends ComponentHarness {
+/** Harness for interacting with a mat-tooltip in tests. */
+class MatTooltipHarness extends ComponentHarness {
+    constructor() {
+        super(...arguments);
+        this._optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');
+        this._hiddenClass = 'mat-mdc-tooltip-hide';
+        this._disabledClass = 'mat-mdc-tooltip-disabled';
+        this._showAnimationName = 'mat-mdc-tooltip-show';
+        this._hideAnimationName = 'mat-mdc-tooltip-hide';
+    }
+    static { this.hostSelector = '.mat-mdc-tooltip-trigger'; }
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific
+     * attributes.
+     * @param options Options for narrowing the search.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options);
+    }
     /** Shows the tooltip. */
     async show() {
         const host = await this.host();
@@ -38,27 +57,6 @@ class _MatTooltipHarnessBase extends ComponentHarness {
         return panel ? panel.text() : '';
     }
 }
-/** Harness for interacting with a standard mat-tooltip in tests. */
-class MatTooltipHarness extends _MatTooltipHarnessBase {
-    constructor() {
-        super(...arguments);
-        this._optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');
-        this._hiddenClass = 'mat-mdc-tooltip-hide';
-        this._disabledClass = 'mat-mdc-tooltip-disabled';
-        this._showAnimationName = 'mat-mdc-tooltip-show';
-        this._hideAnimationName = 'mat-mdc-tooltip-hide';
-    }
-    static { this.hostSelector = '.mat-mdc-tooltip-trigger'; }
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific
-     * attributes.
-     * @param options Options for narrowing the search.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options = {}) {
-        return new HarnessPredicate(this, options);
-    }
-}
 
-export { MatTooltipHarness, _MatTooltipHarnessBase };
+export { MatTooltipHarness };
 //# sourceMappingURL=testing.mjs.map

package/fesm2022/tooltip/testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testing.mjs","sources":["../../../../../../../src/material/tooltip/testing/tooltip-harness.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  AsyncFactoryFn,\n  ComponentHarness,\n  ComponentHarnessConstructor,\n  HarnessPredicate,\n  TestElement,\n} from '@angular/cdk/testing';\nimport {TooltipHarnessFilters} from './tooltip-harness-filters';\n\nexport abstract class _MatTooltipHarnessBase extends ComponentHarness {\n  protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;\n  protected abstract _hiddenClass: string;\n  protected abstract _disabledClass: string;\n  protected abstract _showAnimationName: string;\n  protected abstract _hideAnimationName: string;\n\n  /** Shows the tooltip. */\n  async show(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because the tooltip binds\n    // different events depending on the device. The `changedTouches` is there in case the\n    // element has ripples.\n    await host.dispatchEvent('touchstart', {changedTouches: []});\n    await host.hover();\n    const panel = await this._optionalPanel();\n    await panel?.dispatchEvent('animationend', {animationName: this._showAnimationName});\n  }\n\n  /** Hides the tooltip. */\n  async hide(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because\n    // the tooltip binds different events depending on the device.\n    await host.dispatchEvent('touchend');\n    await host.mouseAway();\n    const panel = await this._optionalPanel();\n    await panel?.dispatchEvent('animationend', {animationName: this._hideAnimationName});\n  }\n\n  /** Gets whether the tooltip is open. */\n  async isOpen(): Promise<boolean> {\n    const panel = await this._optionalPanel();\n    return !!panel && !(await panel.hasClass(this._hiddenClass));\n  }\n\n  /** Gets whether the tooltip is disabled */\n  async isDisabled(): Promise<boolean> {\n    const host = await this.host();\n    return host.hasClass(this._disabledClass);\n  }\n\n  /** Gets a promise for the tooltip panel's text. */\n  async getTooltipText(): Promise<string> {\n    const panel = await this._optionalPanel();\n    return panel ? panel.text() : '';\n  }\n}\n\n/** Harness for interacting with a standard mat-tooltip in tests. */\nexport class MatTooltipHarness extends _MatTooltipHarnessBase {\n  protected _optionalPanel =\n    this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');\n  static hostSelector = '.mat-mdc-tooltip-trigger';\n  protected _hiddenClass = 'mat-mdc-tooltip-hide';\n  protected _disabledClass = 'mat-mdc-tooltip-disabled';\n  protected _showAnimationName = 'mat-mdc-tooltip-show';\n  protected _hideAnimationName = 'mat-mdc-tooltip-hide';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific\n   * attributes.\n   * @param options Options for narrowing the search.\n   * @return a `HarnessPredicate` configured with the given options.\n   */\n  static with<T extends MatTooltipHarness>(\n    this: ComponentHarnessConstructor<T>,\n    options: TooltipHarnessFilters = {},\n  ): HarnessPredicate<T> {\n    return new HarnessPredicate(this, options);\n  }\n}\n"],"names":[],"mappings":";;AAiBM,MAAgB,sBAAuB,SAAQ,gBAAgB,CAAA;;AAQnE,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;;AAK/B,QAAA,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,EAAC,cAAc,EAAE,EAAE,EAAC,CAAC,CAAC;AAC7D,QAAA,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;AACnB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,EAAE,EAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;KACtF;;AAGD,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;AAI/B,QAAA,MAAM,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACrC,QAAA,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,EAAE,EAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;KACtF;;AAGD,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,OAAO,CAAC,CAAC,KAAK,IAAI,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;KAC9D;;AAGD,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;;AAGD,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;KAClC;AACF,CAAA;AAED;AACM,MAAO,iBAAkB,SAAQ,sBAAsB,CAAA;AAA7D,IAAA,WAAA,GAAA;;QACY,IAAc,CAAA,cAAA,GACtB,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;QAEjE,IAAY,CAAA,YAAA,GAAG,sBAAsB,CAAC;QACtC,IAAc,CAAA,cAAA,GAAG,0BAA0B,CAAC;QAC5C,IAAkB,CAAA,kBAAA,GAAG,sBAAsB,CAAC;QAC5C,IAAkB,CAAA,kBAAA,GAAG,sBAAsB,CAAC;KAcvD;aAlBQ,IAAY,CAAA,YAAA,GAAG,0BAAH,CAA8B,EAAA;AAMjD;;;;;AAKG;AACH,IAAA,OAAO,IAAI,CAET,OAAA,GAAiC,EAAE,EAAA;AAEnC,QAAA,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KAC5C;;;;;"}
+{"version":3,"file":"testing.mjs","sources":["../../../../../../../src/material/tooltip/testing/tooltip-harness.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  ComponentHarness,\n  ComponentHarnessConstructor,\n  HarnessPredicate,\n} from '@angular/cdk/testing';\nimport {TooltipHarnessFilters} from './tooltip-harness-filters';\n\n/** Harness for interacting with a mat-tooltip in tests. */\nexport class MatTooltipHarness extends ComponentHarness {\n  static hostSelector = '.mat-mdc-tooltip-trigger';\n\n  private _optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');\n  private _hiddenClass = 'mat-mdc-tooltip-hide';\n  private _disabledClass = 'mat-mdc-tooltip-disabled';\n  private _showAnimationName = 'mat-mdc-tooltip-show';\n  private _hideAnimationName = 'mat-mdc-tooltip-hide';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific\n   * attributes.\n   * @param options Options for narrowing the search.\n   * @return a `HarnessPredicate` configured with the given options.\n   */\n  static with<T extends MatTooltipHarness>(\n    this: ComponentHarnessConstructor<T>,\n    options: TooltipHarnessFilters = {},\n  ): HarnessPredicate<T> {\n    return new HarnessPredicate(this, options);\n  }\n\n  /** Shows the tooltip. */\n  async show(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because the tooltip binds\n    // different events depending on the device. The `changedTouches` is there in case the\n    // element has ripples.\n    await host.dispatchEvent('touchstart', {changedTouches: []});\n    await host.hover();\n    const panel = await this._optionalPanel();\n    await panel?.dispatchEvent('animationend', {animationName: this._showAnimationName});\n  }\n\n  /** Hides the tooltip. */\n  async hide(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because\n    // the tooltip binds different events depending on the device.\n    await host.dispatchEvent('touchend');\n    await host.mouseAway();\n    const panel = await this._optionalPanel();\n    await panel?.dispatchEvent('animationend', {animationName: this._hideAnimationName});\n  }\n\n  /** Gets whether the tooltip is open. */\n  async isOpen(): Promise<boolean> {\n    const panel = await this._optionalPanel();\n    return !!panel && !(await panel.hasClass(this._hiddenClass));\n  }\n\n  /** Gets whether the tooltip is disabled */\n  async isDisabled(): Promise<boolean> {\n    const host = await this.host();\n    return host.hasClass(this._disabledClass);\n  }\n\n  /** Gets a promise for the tooltip panel's text. */\n  async getTooltipText(): Promise<string> {\n    const panel = await this._optionalPanel();\n    return panel ? panel.text() : '';\n  }\n}\n"],"names":[],"mappings":";;AAeA;AACM,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AAAvD,IAAA,WAAA,GAAA;;QAGU,IAAc,CAAA,cAAA,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;QAC1F,IAAY,CAAA,YAAA,GAAG,sBAAsB,CAAC;QACtC,IAAc,CAAA,cAAA,GAAG,0BAA0B,CAAC;QAC5C,IAAkB,CAAA,kBAAA,GAAG,sBAAsB,CAAC;QAC5C,IAAkB,CAAA,kBAAA,GAAG,sBAAsB,CAAC;KAyDrD;aA/DQ,IAAY,CAAA,YAAA,GAAG,0BAAH,CAA8B,EAAA;AAQjD;;;;;AAKG;AACH,IAAA,OAAO,IAAI,CAET,OAAA,GAAiC,EAAE,EAAA;AAEnC,QAAA,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KAC5C;;AAGD,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;;AAK/B,QAAA,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,EAAC,cAAc,EAAE,EAAE,EAAC,CAAC,CAAC;AAC7D,QAAA,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;AACnB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,EAAE,EAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;KACtF;;AAGD,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;AAI/B,QAAA,MAAM,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACrC,QAAA,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,EAAE,EAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;KACtF;;AAGD,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,OAAO,CAAC,CAAC,KAAK,IAAI,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;KAC9D;;AAGD,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;;AAGD,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;KAClC;;;;;"}

package/fesm2022/tooltip.mjs

@@ -2,7 +2,7 @@ import { takeUntil, take } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { InjectionToken, ElementRef, Directive, Inject, Input, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, ElementRef, Directive, Inject, Optional, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2 from '@angular/cdk/platform';
@@ -73,7 +73,13 @@ const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
 const UNBOUNDED_ANCHOR_GAP = 8;
 const MIN_HEIGHT = 24;
 const MAX_WIDTH = 200;
-class _MatTooltipBase {
+/**
+ * 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.io/design/components/tooltips.html
+ */
+class MatTooltip {
     /** Allows the user to define the position of the tooltip relative to the parent element */
     get position() {
         return this._position;
@@ -184,8 +190,9 @@ class _MatTooltipBase {
         this._disabled = false;
         this._viewInitialized = false;
         this._pointerExitEventsInitialized = false;
+        this._tooltipComponent = TooltipComponent;
         this._viewportMargin = 8;
-        this._cssClassPrefix = 'mat';
+        this._cssClassPrefix = 'mat-mdc';
         /**
          * How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
          * uses a long press gesture to show and hide, however it can conflict with the native browser
@@ -226,6 +233,7 @@ class _MatTooltipBase {
                 this._updatePosition(this._overlayRef);
             }
         });
+        this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
     }
     ngAfterViewInit() {
         // This needs to happen after view init so the initial values for all inputs have been set.
@@ -384,6 +392,20 @@ class _MatTooltipBase {
     }
     /** Adds the configured offset to a position. Used as a hook for child classes. */
     _addOffset(position) {
+        const offset = UNBOUNDED_ANCHOR_GAP;
+        const isLtr = !this._dir || this._dir.value == 'ltr';
+        if (position.originY === 'top') {
+            position.offsetY = -offset;
+        }
+        else if (position.originY === 'bottom') {
+            position.offsetY = offset;
+        }
+        else if (position.originX === 'start') {
+            position.offsetX = isLtr ? -offset : offset;
+        }
+        else if (position.originX === 'end') {
+            position.offsetX = isLtr ? offset : -offset;
+        }
         return position;
     }
     /**
@@ -632,12 +654,28 @@ class _MatTooltipBase {
             style.webkitTapHighlightColor = 'transparent';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: _MatTooltipBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: _MatTooltipBase, inputs: { position: ["matTooltipPosition", "position"], positionAtOrigin: ["matTooltipPositionAtOrigin", "positionAtOrigin"], disabled: ["matTooltipDisabled", "disabled"], showDelay: ["matTooltipShowDelay", "showDelay"], hideDelay: ["matTooltipHideDelay", "hideDelay"], touchGestures: ["matTooltipTouchGestures", "touchGestures"], message: ["matTooltip", "message"], tooltipClass: ["matTooltipClass", "tooltipClass"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTooltip, 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: MAT_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality }, { token: MAT_TOOLTIP_DEFAULT_OPTIONS, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTooltip, selector: "[matTooltip]", inputs: { position: ["matTooltipPosition", "position"], positionAtOrigin: ["matTooltipPositionAtOrigin", "positionAtOrigin"], disabled: ["matTooltipDisabled", "disabled"], showDelay: ["matTooltipShowDelay", "showDelay"], hideDelay: ["matTooltipHideDelay", "hideDelay"], touchGestures: ["matTooltipTouchGestures", "touchGestures"], message: ["matTooltip", "message"], tooltipClass: ["matTooltipClass", "tooltipClass"] }, host: { properties: { "class.mat-mdc-tooltip-disabled": "disabled" }, classAttribute: "mat-mdc-tooltip-trigger" }, exportAs: ["matTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: _MatTooltipBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matTooltip]',
+                    exportAs: 'matTooltip',
+                    host: {
+                        'class': 'mat-mdc-tooltip-trigger',
+                        '[class.mat-mdc-tooltip-disabled]': 'disabled',
+                    },
+                }]
+        }], ctorParameters: function () { 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: [{
+                    type: Inject,
+                    args: [MAT_TOOLTIP_SCROLL_STRATEGY]
+                }] }, { type: i4.Directionality }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_TOOLTIP_DEFAULT_OPTIONS]
+                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }]; }, propDecorators: { position: [{
@@ -666,71 +704,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 args: ['matTooltipClass']
             }] } });
 /**
- * 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.io/design/components/tooltips.html
+ * Internal component that wraps the tooltip's content.
+ * @docs-private
  */
-class MatTooltip extends _MatTooltipBase {
-    constructor(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document) {
-        super(overlay, elementRef, scrollDispatcher, viewContainerRef, ngZone, platform, ariaDescriber, focusMonitor, scrollStrategy, dir, defaultOptions, _document);
-        this._tooltipComponent = TooltipComponent;
-        this._cssClassPrefix = 'mat-mdc';
-        this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
-    }
-    _addOffset(position) {
-        const offset = UNBOUNDED_ANCHOR_GAP;
-        const isLtr = !this._dir || this._dir.value == 'ltr';
-        if (position.originY === 'top') {
-            position.offsetY = -offset;
-        }
-        else if (position.originY === 'bottom') {
-            position.offsetY = offset;
-        }
-        else if (position.originX === 'start') {
-            position.offsetX = isLtr ? -offset : offset;
-        }
-        else if (position.originX === 'end') {
-            position.offsetX = isLtr ? offset : -offset;
-        }
-        return position;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTooltip, 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: MAT_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: MAT_TOOLTIP_DEFAULT_OPTIONS, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTooltip, selector: "[matTooltip]", host: { properties: { "class.mat-mdc-tooltip-disabled": "disabled" }, classAttribute: "mat-mdc-tooltip-trigger" }, exportAs: ["matTooltip"], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTooltip, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matTooltip]',
-                    exportAs: 'matTooltip',
-                    host: {
-                        'class': 'mat-mdc-tooltip-trigger',
-                        '[class.mat-mdc-tooltip-disabled]': 'disabled',
-                    },
-                }]
-        }], ctorParameters: function () { 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: [{
-                    type: Inject,
-                    args: [MAT_TOOLTIP_SCROLL_STRATEGY]
-                }] }, { type: i4.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_TOOLTIP_DEFAULT_OPTIONS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-class _TooltipComponentBase {
-    constructor(_changeDetectorRef, animationMode) {
+class TooltipComponent {
+    constructor(_changeDetectorRef, _elementRef, animationMode) {
         this._changeDetectorRef = _changeDetectorRef;
+        this._elementRef = _elementRef;
+        /* Whether the tooltip text overflows to multiple lines */
+        this._isMultiline = false;
         /** Whether interactions on the page should close the tooltip */
         this._closeOnInteraction = false;
         /** Whether the tooltip is currently visible. */
         this._isVisible = false;
         /** Subject for notifying that the tooltip has been hidden from the view */
         this._onHide = new Subject();
+        /** Name of the show animation and the class that toggles it. */
+        this._showAnimation = 'mat-mdc-tooltip-show';
+        /** Name of the hide animation and the class that toggles it. */
+        this._hideAnimation = 'mat-mdc-tooltip-hide';
         this._animationsDisabled = animationMode === 'NoopAnimations';
     }
     /**
@@ -807,7 +799,15 @@ class _TooltipComponentBase {
      * This method is only needed by the mdc-tooltip, and so it is only implemented
      * in the mdc-tooltip, not here.
      */
-    _onShow() { }
+    _onShow() {
+        this._isMultiline = this._isTooltipMultiline();
+        this._markForCheck();
+    }
+    /** Whether the tooltip text has overflown to the next line */
+    _isTooltipMultiline() {
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        return rect.height > MIN_HEIGHT && rect.width >= MAX_WIDTH;
+    }
     /** Event listener dispatched when an animation on the tooltip finishes. */
     _handleAnimationEnd({ animationName }) {
         if (animationName === this._showAnimation || animationName === this._hideAnimation) {
@@ -862,41 +862,8 @@ class _TooltipComponentBase {
             this._finalizeAnimation(isVisible);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: _TooltipComponentBase, deps: [{ token: i0.ChangeDetectorRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: _TooltipComponentBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: _TooltipComponentBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ANIMATION_MODULE_TYPE]
-                }] }]; } });
-/**
- * Internal component that wraps the tooltip's content.
- * @docs-private
- */
-class TooltipComponent extends _TooltipComponentBase {
-    constructor(changeDetectorRef, _elementRef, animationMode) {
-        super(changeDetectorRef, animationMode);
-        this._elementRef = _elementRef;
-        /* Whether the tooltip text overflows to multiple lines */
-        this._isMultiline = false;
-        this._showAnimation = 'mat-mdc-tooltip-show';
-        this._hideAnimation = 'mat-mdc-tooltip-hide';
-    }
-    _onShow() {
-        this._isMultiline = this._isTooltipMultiline();
-        this._markForCheck();
-    }
-    /** Whether the tooltip text has overflown to the next line */
-    _isTooltipMultiline() {
-        const rect = this._elementRef.nativeElement.getBoundingClientRect();
-        return rect.height > MIN_HEIGHT && rect.width >= MAX_WIDTH;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: TooltipComponent, selector: "mat-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\n  #tooltip\n  class=\"mdc-tooltip mdc-tooltip--shown mat-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\">{{message}}</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 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(0.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 rgba(0,0,0,0);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:calc(200px - (2 * 8px));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:calc(320px - (2 * 8px));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(0.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(0.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:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);outline:1px solid rgba(0,0,0,0);z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mat-mdc-tooltip{--mdc-plain-tooltip-container-shape:4px;--mdc-plain-tooltip-supporting-text-line-height:16px}.mat-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mat-mdc-tooltip .mdc-tooltip__surface{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__caret-surface-top,.mat-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mat-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)}.mat-mdc-tooltip{position:relative;transform:scale(0)}.mat-mdc-tooltip::before{content:\"\";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: TooltipComponent, selector: "mat-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\n  #tooltip\n  class=\"mdc-tooltip mdc-tooltip--shown mat-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\">{{message}}</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 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(0.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 rgba(0,0,0,0);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:calc(200px - (2 * 8px));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:calc(320px - (2 * 8px));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(0.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(0.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:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);outline:1px solid rgba(0,0,0,0);z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mat-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mat-mdc-tooltip .mdc-tooltip__surface{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__caret-surface-top,.mat-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mat-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)}.mat-mdc-tooltip{position:relative;transform:scale(0)}.mat-mdc-tooltip::before{content:\"\";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
@@ -906,7 +873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                         '[style.zoom]': 'isVisible() ? 1 : null',
                         '(mouseleave)': '_handleMouseLeave($event)',
                         'aria-hidden': 'true',
-                    }, template: "<div\n  #tooltip\n  class=\"mdc-tooltip mdc-tooltip--shown mat-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\">{{message}}</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 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(0.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 rgba(0,0,0,0);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:calc(200px - (2 * 8px));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:calc(320px - (2 * 8px));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(0.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(0.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:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);outline:1px solid rgba(0,0,0,0);z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mat-mdc-tooltip{--mdc-plain-tooltip-container-shape:4px;--mdc-plain-tooltip-supporting-text-line-height:16px}.mat-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mat-mdc-tooltip .mdc-tooltip__surface{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__caret-surface-top,.mat-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mat-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)}.mat-mdc-tooltip{position:relative;transform:scale(0)}.mat-mdc-tooltip::before{content:\"\";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}"] }]
+                    }, template: "<div\n  #tooltip\n  class=\"mdc-tooltip mdc-tooltip--shown mat-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\">{{message}}</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 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms 0ms cubic-bezier(0.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 rgba(0,0,0,0);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:calc(200px - (2 * 8px));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:calc(320px - (2 * 8px));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(0.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(0.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:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);outline:1px solid rgba(0,0,0,0);z-index:-1}@media screen and (forced-colors: active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}.mat-mdc-tooltip .mdc-tooltip__surface{background-color:var(--mdc-plain-tooltip-container-color)}.mat-mdc-tooltip .mdc-tooltip__surface{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__caret-surface-top,.mat-mdc-tooltip .mdc-tooltip__caret-surface-bottom{border-radius:var(--mdc-plain-tooltip-container-shape)}.mat-mdc-tooltip .mdc-tooltip__surface{color:var(--mdc-plain-tooltip-supporting-text-color)}.mat-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)}.mat-mdc-tooltip{position:relative;transform:scale(0)}.mat-mdc-tooltip::before{content:\"\";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -956,5 +923,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MAT_TOOLTIP_DEFAULT_OPTIONS, MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY, MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, MatTooltip, MatTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, TooltipComponent, _MatTooltipBase, _TooltipComponentBase, getMatTooltipInvalidPositionError, matTooltipAnimations };
+export { MAT_TOOLTIP_DEFAULT_OPTIONS, MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY, MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, MatTooltip, MatTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, TooltipComponent, getMatTooltipInvalidPositionError, matTooltipAnimations };
 //# sourceMappingURL=tooltip.mjs.map