@eui/components 17.3.9 → 17.3.11-snapshot-1724803910292

package/fesm2022/eui-components-directives.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding, Injector, HostListener, EventEmitter, Self, Optional, Output } from '@angular/core';
+import { Directive, Input, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, HostListener, EventEmitter, Self, Optional, Output, Inject } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1 from '@angular/cdk/overlay';
@@ -61,20 +61,10 @@ const showHide = trigger('showHide', [
     transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 }))),
 ]);
 
-const TOOLTIP_CONTAINER_CONFIG = new InjectionToken('TOOLTIP_CONTAINER_CONFIG');
-
-class EuiTooltipConfig {
-    constructor(values) {
-        this.e2eAttr = 'eui-tooltip';
-        this.tooltipContent = null;
-        this.position = 'above';
-        this.contentAlign = 'center';
-        this.colorClass = null;
-        Object.assign(this, values);
-    }
-}
-
 class EuiTooltipContainerComponent {
+    constructor() {
+        this.e2e = 'eui-tooltip';
+    }
     get cssClasses() {
         return ['eui-tooltip', 'eui-tooltip--content-' + this.config.contentAlign, 'eui-tooltip--' + this.config.colorClass]
             .join(' ')
@@ -83,20 +73,15 @@ class EuiTooltipContainerComponent {
     get showHide() {
         return 'visible';
     }
-    constructor(config) {
-        this.config = config;
-        this.e2e = 'eui-tooltip';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuiTooltipContainerComponent, deps: [{ token: TOOLTIP_CONTAINER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: EuiTooltipContainerComponent, selector: "eui-tooltip-container.component", host: { properties: { "attr.data-e2e": "this.e2e", "class": "this.cssClasses", "@showHide": "this.showHide" } }, ngImport: i0, template: "<div [innerHTML]=\"config.tooltipContent\"></div>\n", styles: [".eui-tooltip__container{background-color:transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip{margin-bottom:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--above .eui-tooltip:before{border-color:var(--eui-base-color-grey-100) transparent transparent transparent;left:calc(50% - 8px);transform:translateY(16px)}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--primary:before{border-color:var(--eui-base-color-primary-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--info:before{border-color:var(--eui-base-color-info-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--success:before{border-color:var(--eui-base-color-success-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--warning:before{border-color:var(--eui-base-color-warning-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--danger:before{border-color:var(--eui-base-color-danger-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--accent:before{border-color:var(--eui-base-color-accent-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip{margin-top:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--below .eui-tooltip:before{border-color:transparent transparent var(--eui-base-color-grey-100) transparent;left:calc(50% - 8px);top:0;transform:translateY(-100%)}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--primary:before{border-color:transparent transparent var(--eui-base-color-primary-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--info:before{border-color:transparent transparent var(--eui-base-color-info-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--success:before{border-color:transparent transparent var(--eui-base-color-success-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--warning:before{border-color:transparent transparent var(--eui-base-color-warning-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--danger:before{border-color:transparent transparent var(--eui-base-color-danger-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--accent:before{border-color:transparent transparent var(--eui-base-color-accent-100) transparent}.eui-tooltip__container.eui-tooltip--left .eui-tooltip,.eui-tooltip__container.eui-tooltip--before .eui-tooltip{margin-right:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip:before{border-color:transparent transparent transparent var(--eui-base-color-grey-100);right:-8px;top:50%;transform:translate(8px,-8px)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--primary:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--primary:before{border-color:transparent transparent transparent var(--eui-base-color-primary-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--info:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--info:before{border-color:transparent transparent transparent var(--eui-base-color-info-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--success:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--success:before{border-color:transparent transparent transparent var(--eui-base-color-success-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--warning:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--warning:before{border-color:transparent transparent transparent var(--eui-base-color-warning-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--danger:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--danger:before{border-color:transparent transparent transparent var(--eui-base-color-danger-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--accent:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--accent:before{border-color:transparent transparent transparent var(--eui-base-color-accent-100)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip,.eui-tooltip__container.eui-tooltip--after .eui-tooltip{margin-left:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip:before{border-color:transparent var(--eui-base-color-grey-100) transparent transparent;left:-8px;top:50%;transform:translate(-8px,-8px)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--primary:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--primary:before{border-color:transparent var(--eui-base-color-primary-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--info:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--info:before{border-color:transparent var(--eui-base-color-info-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--success:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--success:before{border-color:transparent var(--eui-base-color-success-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--warning:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--warning:before{border-color:transparent var(--eui-base-color-warning-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--danger:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--danger:before{border-color:transparent var(--eui-base-color-danger-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--accent:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--accent:before{border-color:transparent var(--eui-base-color-accent-100) transparent transparent}.eui-tooltip__container .eui-tooltip{background-color:var(--eui-base-color-grey-100);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-4);color:var(--eui-base-color-white);letter-spacing:.05em;max-width:50vw;padding:var(--eui-base-spacing-xs);white-space:pre-line;font:normal normal 400 .75rem/1rem var(--eui-base-font-family)}.eui-tooltip__container .eui-tooltip:before{border-color:transparent;border-style:solid;border-width:8px;bottom:0;content:\"\";display:block;height:0;position:absolute;width:0}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-left{text-align:left}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-right{text-align:right}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-center{text-align:center}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-justify{text-align:justify}.eui-tooltip__container .eui-tooltip--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-tooltip__container .eui-tooltip--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-tooltip__container .eui-tooltip--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-tooltip__container .eui-tooltip--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-tooltip__container .eui-tooltip--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-tooltip__container .eui-tooltip--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-tooltip__container .eui-tooltip--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-tooltip__container .eui-tooltip--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-tooltip__container .eui-tooltip--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-tooltip__container .eui-tooltip--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-tooltip__container .eui-tooltip--accent{background-color:var(--eui-base-color-accent-100);border-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-accent-100-contrast)}.eui-tooltip__container .eui-tooltip--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-100-contrast);fill:var(--eui-base-color-accent-100-contrast)}\n"], animations: [showHide], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuiTooltipContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: EuiTooltipContainerComponent, selector: "eui-tooltip-container.component", inputs: { config: "config" }, host: { properties: { "attr.data-e2e": "this.e2e", "class": "this.cssClasses", "@showHide": "this.showHide" } }, ngImport: i0, template: "<div [innerHTML]=\"config.tooltipContent\"></div>\n", styles: [".eui-tooltip__container{background-color:transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip{margin-bottom:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--above .eui-tooltip:before{border-color:var(--eui-base-color-grey-100) transparent transparent transparent;left:calc(50% - 8px);transform:translateY(16px)}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--primary:before{border-color:var(--eui-base-color-primary-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--info:before{border-color:var(--eui-base-color-info-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--success:before{border-color:var(--eui-base-color-success-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--warning:before{border-color:var(--eui-base-color-warning-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--danger:before{border-color:var(--eui-base-color-danger-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--accent:before{border-color:var(--eui-base-color-accent-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip{margin-top:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--below .eui-tooltip:before{border-color:transparent transparent var(--eui-base-color-grey-100) transparent;left:calc(50% - 8px);top:0;transform:translateY(-100%)}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--primary:before{border-color:transparent transparent var(--eui-base-color-primary-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--info:before{border-color:transparent transparent var(--eui-base-color-info-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--success:before{border-color:transparent transparent var(--eui-base-color-success-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--warning:before{border-color:transparent transparent var(--eui-base-color-warning-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--danger:before{border-color:transparent transparent var(--eui-base-color-danger-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--accent:before{border-color:transparent transparent var(--eui-base-color-accent-100) transparent}.eui-tooltip__container.eui-tooltip--left .eui-tooltip,.eui-tooltip__container.eui-tooltip--before .eui-tooltip{margin-right:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip:before{border-color:transparent transparent transparent var(--eui-base-color-grey-100);right:-8px;top:50%;transform:translate(8px,-8px)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--primary:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--primary:before{border-color:transparent transparent transparent var(--eui-base-color-primary-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--info:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--info:before{border-color:transparent transparent transparent var(--eui-base-color-info-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--success:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--success:before{border-color:transparent transparent transparent var(--eui-base-color-success-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--warning:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--warning:before{border-color:transparent transparent transparent var(--eui-base-color-warning-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--danger:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--danger:before{border-color:transparent transparent transparent var(--eui-base-color-danger-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--accent:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--accent:before{border-color:transparent transparent transparent var(--eui-base-color-accent-100)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip,.eui-tooltip__container.eui-tooltip--after .eui-tooltip{margin-left:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip:before{border-color:transparent var(--eui-base-color-grey-100) transparent transparent;left:-8px;top:50%;transform:translate(-8px,-8px)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--primary:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--primary:before{border-color:transparent var(--eui-base-color-primary-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--info:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--info:before{border-color:transparent var(--eui-base-color-info-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--success:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--success:before{border-color:transparent var(--eui-base-color-success-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--warning:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--warning:before{border-color:transparent var(--eui-base-color-warning-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--danger:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--danger:before{border-color:transparent var(--eui-base-color-danger-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--accent:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--accent:before{border-color:transparent var(--eui-base-color-accent-100) transparent transparent}.eui-tooltip__container .eui-tooltip{background-color:var(--eui-base-color-grey-100);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-4);color:var(--eui-base-color-white);letter-spacing:.05em;max-width:50vw;padding:var(--eui-base-spacing-xs);white-space:pre-line;font:normal normal 400 .75rem/1rem var(--eui-base-font-family)}.eui-tooltip__container .eui-tooltip:before{border-color:transparent;border-style:solid;border-width:8px;bottom:0;content:\"\";display:block;height:0;position:absolute;width:0}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-left{text-align:left}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-right{text-align:right}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-center{text-align:center}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-justify{text-align:justify}.eui-tooltip__container .eui-tooltip--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-tooltip__container .eui-tooltip--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-tooltip__container .eui-tooltip--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-tooltip__container .eui-tooltip--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-tooltip__container .eui-tooltip--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-tooltip__container .eui-tooltip--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-tooltip__container .eui-tooltip--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-tooltip__container .eui-tooltip--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-tooltip__container .eui-tooltip--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-tooltip__container .eui-tooltip--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-tooltip__container .eui-tooltip--accent{background-color:var(--eui-base-color-accent-100);border-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-accent-100-contrast)}.eui-tooltip__container .eui-tooltip--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-100-contrast);fill:var(--eui-base-color-accent-100-contrast)}\n"], animations: [showHide], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuiTooltipContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-tooltip-container.component', animations: [showHide], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [innerHTML]=\"config.tooltipContent\"></div>\n", styles: [".eui-tooltip__container{background-color:transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip{margin-bottom:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--above .eui-tooltip:before{border-color:var(--eui-base-color-grey-100) transparent transparent transparent;left:calc(50% - 8px);transform:translateY(16px)}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--primary:before{border-color:var(--eui-base-color-primary-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--info:before{border-color:var(--eui-base-color-info-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--success:before{border-color:var(--eui-base-color-success-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--warning:before{border-color:var(--eui-base-color-warning-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--danger:before{border-color:var(--eui-base-color-danger-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--above .eui-tooltip--accent:before{border-color:var(--eui-base-color-accent-100) transparent transparent transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip{margin-top:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--below .eui-tooltip:before{border-color:transparent transparent var(--eui-base-color-grey-100) transparent;left:calc(50% - 8px);top:0;transform:translateY(-100%)}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--primary:before{border-color:transparent transparent var(--eui-base-color-primary-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--info:before{border-color:transparent transparent var(--eui-base-color-info-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--success:before{border-color:transparent transparent var(--eui-base-color-success-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--warning:before{border-color:transparent transparent var(--eui-base-color-warning-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--danger:before{border-color:transparent transparent var(--eui-base-color-danger-100) transparent}.eui-tooltip__container.eui-tooltip--below .eui-tooltip--accent:before{border-color:transparent transparent var(--eui-base-color-accent-100) transparent}.eui-tooltip__container.eui-tooltip--left .eui-tooltip,.eui-tooltip__container.eui-tooltip--before .eui-tooltip{margin-right:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip:before{border-color:transparent transparent transparent var(--eui-base-color-grey-100);right:-8px;top:50%;transform:translate(8px,-8px)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--primary:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--primary:before{border-color:transparent transparent transparent var(--eui-base-color-primary-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--info:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--info:before{border-color:transparent transparent transparent var(--eui-base-color-info-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--success:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--success:before{border-color:transparent transparent transparent var(--eui-base-color-success-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--warning:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--warning:before{border-color:transparent transparent transparent var(--eui-base-color-warning-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--danger:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--danger:before{border-color:transparent transparent transparent var(--eui-base-color-danger-100)}.eui-tooltip__container.eui-tooltip--left .eui-tooltip--accent:before,.eui-tooltip__container.eui-tooltip--before .eui-tooltip--accent:before{border-color:transparent transparent transparent var(--eui-base-color-accent-100)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip,.eui-tooltip__container.eui-tooltip--after .eui-tooltip{margin-left:var(--eui-base-spacing-m)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip:before{border-color:transparent var(--eui-base-color-grey-100) transparent transparent;left:-8px;top:50%;transform:translate(-8px,-8px)}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--primary:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--primary:before{border-color:transparent var(--eui-base-color-primary-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--info:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--info:before{border-color:transparent var(--eui-base-color-info-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--success:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--success:before{border-color:transparent var(--eui-base-color-success-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--warning:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--warning:before{border-color:transparent var(--eui-base-color-warning-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--danger:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--danger:before{border-color:transparent var(--eui-base-color-danger-100) transparent transparent}.eui-tooltip__container.eui-tooltip--right .eui-tooltip--accent:before,.eui-tooltip__container.eui-tooltip--after .eui-tooltip--accent:before{border-color:transparent var(--eui-base-color-accent-100) transparent transparent}.eui-tooltip__container .eui-tooltip{background-color:var(--eui-base-color-grey-100);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-4);color:var(--eui-base-color-white);letter-spacing:.05em;max-width:50vw;padding:var(--eui-base-spacing-xs);white-space:pre-line;font:normal normal 400 .75rem/1rem var(--eui-base-font-family)}.eui-tooltip__container .eui-tooltip:before{border-color:transparent;border-style:solid;border-width:8px;bottom:0;content:\"\";display:block;height:0;position:absolute;width:0}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-left{text-align:left}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-right{text-align:right}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-center{text-align:center}.eui-tooltip__container .eui-tooltip.eui-tooltip--content-justify{text-align:justify}.eui-tooltip__container .eui-tooltip--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-tooltip__container .eui-tooltip--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-tooltip__container .eui-tooltip--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-tooltip__container .eui-tooltip--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-tooltip__container .eui-tooltip--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-tooltip__container .eui-tooltip--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-tooltip__container .eui-tooltip--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-tooltip__container .eui-tooltip--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-tooltip__container .eui-tooltip--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-tooltip__container .eui-tooltip--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-tooltip__container .eui-tooltip--accent{background-color:var(--eui-base-color-accent-100);border-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-accent-100-contrast)}.eui-tooltip__container .eui-tooltip--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-100-contrast);fill:var(--eui-base-color-accent-100-contrast)}\n"] }]
-        }], ctorParameters: () => [{ type: EuiTooltipConfig, decorators: [{
-                    type: Inject,
-                    args: [TOOLTIP_CONTAINER_CONFIG]
-                }] }], propDecorators: { e2e: [{
+        }], propDecorators: { config: [{
+                type: Input
+            }], e2e: [{
                 type: HostBinding,
                 args: ['attr.data-e2e']
             }], cssClasses: [{
@@ -162,10 +147,9 @@ class EuiTooltipDirective {
     set euiTooltipAccent(value) {
         this._euiTooltipAccent = coerceBooleanProperty(value);
     }
-    constructor(overlay, host, injector) {
+    constructor(overlay, host) {
         this.overlay = overlay;
         this.host = host;
-        this.injector = injector;
         this.e2eAttr = 'eui-tooltip';
         this.showDelay = 0;
         this.hideDelay = 0;
@@ -195,6 +179,9 @@ class EuiTooltipDirective {
         this.positionStrategySubscription = new Subscription();
     }
     ngOnChanges() {
+        if (this.tooltipInstance) {
+            this.tooltipInstance.setInput('config', this.getTooltipConfig());
+        }
         this.setPosition();
     }
     ngOnInit() {
@@ -273,14 +260,9 @@ class EuiTooltipDirective {
                 if (this.euiTooltipAccent) {
                     colorClass = 'accent';
                 }
-                const componentPortal = new ComponentPortal(EuiTooltipContainerComponent, null, this.createInjector({
-                    e2eAttr: this.e2eAttr,
-                    tooltipContent: this.tooltipContent,
-                    position: this.position,
-                    contentAlign: this.contentAlignment,
-                    colorClass,
-                }));
-                this.overlayRef.attach(componentPortal);
+                const componentPortal = new ComponentPortal(EuiTooltipContainerComponent, null);
+                this.tooltipInstance = this.overlayRef.attach(componentPortal);
+                this.tooltipInstance.setInput('config', this.getTooltipConfig());
                 this.isOpen$.next(true);
             }
         });
@@ -304,12 +286,36 @@ class EuiTooltipDirective {
             this.overlayRef = null;
         });
     }
-    createInjector(data) {
-        const injectorTokens = [{ provide: TOOLTIP_CONTAINER_CONFIG, useValue: data }];
-        return Injector.create({
-            parent: this.injector,
-            providers: injectorTokens,
-        });
+    getTooltipConfig() {
+        let colorClass = 'secondary';
+        if (this.euiTooltipPrimary) {
+            colorClass = 'primary';
+        }
+        if (this.euiTooltipSecondary) {
+            colorClass = 'secondary';
+        }
+        if (this.euiTooltipInfo) {
+            colorClass = 'info';
+        }
+        if (this.euiTooltipSuccess) {
+            colorClass = 'success';
+        }
+        if (this.euiTooltipWarning) {
+            colorClass = 'warning';
+        }
+        if (this.euiTooltipDanger) {
+            colorClass = 'danger';
+        }
+        if (this.euiTooltipAccent) {
+            colorClass = 'accent';
+        }
+        return {
+            e2eAttr: this.e2eAttr,
+            tooltipContent: this.tooltipContent,
+            position: this.position,
+            contentAlign: this.contentAlignment,
+            colorClass,
+        };
     }
     getPosition(overlayPosition) {
         if (overlayPosition.connectionPair.originY === 'top' && overlayPosition.connectionPair.overlayY === 'bottom') {
@@ -359,7 +365,7 @@ class EuiTooltipDirective {
             this.fallbackOverlayY = 'center';
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuiTooltipDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuiTooltipDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: EuiTooltipDirective, selector: "[euiTooltip]", inputs: { e2eAttr: "e2eAttr", showDelay: "showDelay", hideDelay: "hideDelay", contentAlignment: "contentAlignment", position: "position", isDisabled: "isDisabled", euiTooltip: "euiTooltip", euiTooltipPrimary: "euiTooltipPrimary", euiTooltipSecondary: "euiTooltipSecondary", euiTooltipInfo: "euiTooltipInfo", euiTooltipSuccess: "euiTooltipSuccess", euiTooltipWarning: "euiTooltipWarning", euiTooltipDanger: "euiTooltipDanger", euiTooltipAccent: "euiTooltipAccent" }, host: { listeners: { "mouseenter": "mouseEntering($event)", "focus": "focused($event)" } }, exportAs: ["euiTooltip"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EuiTooltipDirective, decorators: [{
@@ -368,7 +374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                     selector: '[euiTooltip]',
                     exportAs: 'euiTooltip',
                 }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { e2eAttr: [{
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }], propDecorators: { e2eAttr: [{
                 type: Input
             }], showDelay: [{
                 type: Input