@progress/kendo-angular-tooltip 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/popover/popover.component.mjs

@@ -32,82 +32,24 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ```
  */
 export class PopoverComponent {
-    constructor(localization, renderer, element, zone) {
-        this.localization = localization;
-        this.renderer = renderer;
-        this.element = element;
-        this.zone = zone;
-        /**
-         * Specifies the position of the Popover in relation to its anchor element. [See example]({% slug positioning_popover %})
-         *
-         * The possible options are:
-         * `top`
-         * `bottom`
-         * `right` (Default)
-         * `left`
-         */
-        this.position = 'right';
-        /**
-         * Determines whether a callout will be rendered along the Popover. [See example]({% slug callout_popover %})
-         *
-         * @default true
-         */
-        this.callout = true;
-        /**
-         * Enables and configures the Popover animation. [See example]({% slug animations_popover %})
-         *
-         * The possible options are:
-         *
-         * * `boolean`—Enables the default animation
-         * * `PopoverAnimation`—A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
-         *
-         * @default false
-         */
-        this.animation = false;
-        /**
-         * @hidden
-         * Determines the visibility of the Popover.
-         */
-        this.visible = false;
-        /**
-         * Fires before the Popover is about to be shown ([see example]({% slug events_popover %})).
-         * The event is preventable. If canceled, the Popover will not be displayed. [See example]({% slug events_popover %})
-         */
-        this.show = new EventEmitter();
-        /**
-         * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
-         */
-        this.shown = new EventEmitter();
-        /**
-         * Fires when the Popover is about to be hidden ([see example]({% slug events_popover %})).
-         * The event is preventable. If canceled, the Popover will remain visible.
-         */
-        this.hide = new EventEmitter();
-        /**
-         * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
-         */
-        this.hidden = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.closeOnKeyDown = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this._width = 'auto';
-        /**
-         * @hidden
-         */
-        this._height = 'auto';
-        /**
-         * @hidden
-         */
-        this.popoverId = '';
-        this._offset = 6;
-        this.subs = new Subscription();
-        this._templateData = () => null;
-        validatePackage(packageMetadata);
-    }
+    localization;
+    renderer;
+    element;
+    zone;
+    /**
+     * @hidden
+     */
+    anchor;
+    /**
+     * Specifies the position of the Popover in relation to its anchor element. [See example]({% slug positioning_popover %})
+     *
+     * The possible options are:
+     * `top`
+     * `bottom`
+     * `right` (Default)
+     * `left`
+     */
+    position = 'right';
     /**
      * Specifies the distance from the Popover to its anchor element in pixels.
      *
@@ -142,6 +84,46 @@ export class PopoverComponent {
     get height() {
         return this._height;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Specifies the main header text of the Popover.
+     *
+     * If a `titleTemplate` is provided it would take precedence over the title.
+     */
+    title;
+    /**
+     * @hidden
+     * Specifies the secondary header text of the Popover.
+     *
+     * If a `titleTemplate` is provided it would take precedence over the subtitle.
+     */
+    subtitle;
+    /**
+     * Represents the text that will be rendered in the Popover body section.
+     *
+     * If a `bodyTemplate` is provided it would take precedence over this text.
+     */
+    body;
+    /**
+     * Determines whether a callout will be rendered along the Popover. [See example]({% slug callout_popover %})
+     *
+     * @default true
+     */
+    callout = true;
+    /**
+     * Enables and configures the Popover animation. [See example]({% slug animations_popover %})
+     *
+     * The possible options are:
+     *
+     * * `boolean`—Enables the default animation
+     * * `PopoverAnimation`—A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
+     *
+     * @default false
+     */
+    animation = false;
     /**
      * Defines a callback function which returns custom data passed to the Popover templates.
      * It exposes the current anchor element as an argument. [See example](slug:templates_popover#toc-passing-data-to-templates)
@@ -155,6 +137,11 @@ export class PopoverComponent {
     get templateData() {
         return this._templateData;
     }
+    /**
+     * @hidden
+     * Determines the visibility of the Popover.
+     */
+    visible = false;
     /**
      * @hidden
      */
@@ -167,6 +154,77 @@ export class PopoverComponent {
     get hasAttributeHidden() {
         return !this.visible;
     }
+    /**
+     * Fires before the Popover is about to be shown ([see example]({% slug events_popover %})).
+     * The event is preventable. If canceled, the Popover will not be displayed. [See example]({% slug events_popover %})
+     */
+    show = new EventEmitter();
+    /**
+     * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
+     */
+    shown = new EventEmitter();
+    /**
+     * Fires when the Popover is about to be hidden ([see example]({% slug events_popover %})).
+     * The event is preventable. If canceled, the Popover will remain visible.
+     */
+    hide = new EventEmitter();
+    /**
+     * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
+     */
+    hidden = new EventEmitter();
+    /**
+     * @hidden
+     */
+    closeOnKeyDown = new EventEmitter();
+    /**
+     * @hidden
+     */
+    popoverWrapper;
+    /**
+     * @hidden
+     */
+    titleTemplateWrapper;
+    /**
+     * @hidden
+     */
+    bodyTemplateWrapper;
+    /**
+     * @hidden
+     */
+    titleTemplate;
+    /**
+     * @hidden
+     */
+    bodyTemplate;
+    /**
+     * @hidden
+     */
+    actionsTemplate;
+    /**
+     * @hidden
+     */
+    contextData;
+    /**
+     * @hidden
+     */
+    _width = 'auto';
+    /**
+     * @hidden
+     */
+    _height = 'auto';
+    /**
+     * @hidden
+     */
+    popoverId = '';
+    _offset = 6;
+    subs = new Subscription();
+    constructor(localization, renderer, element, zone) {
+        this.localization = localization;
+        this.renderer = renderer;
+        this.element = element;
+        this.zone = zone;
+        validatePackage(packageMetadata);
+    }
     ngOnInit() {
         this.popoverId = getId('k-popover');
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; }));
@@ -212,6 +270,7 @@ export class PopoverComponent {
             this.closeOnKeyDown.emit();
         }
     }
+    _templateData = () => null;
     keepFocusWithinComponent(target, event) {
         const wrapper = this.popoverWrapper.nativeElement;
         const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
@@ -248,15 +307,14 @@ export class PopoverComponent {
         this.renderer.setAttribute(wrapper, 'id', this.popoverId);
         this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
     }
-}
-PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopoverComponent, isStandalone: true, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden", closeOnKeyDown: "closeOnKeyDown" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.popover'
-        }
-    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: PopoverTitleTemplateDirective, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: PopoverBodyTemplateDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: PopoverActionsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popoverWrapper", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "titleTemplateWrapper", first: true, predicate: ["titleTemplateWrapper"], descendants: true }, { propertyName: "bodyTemplateWrapper", first: true, predicate: ["bodyTemplateWrapper"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopoverComponent, isStandalone: true, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden", closeOnKeyDown: "closeOnKeyDown" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.popover'
+            }
+        ], queries: [{ propertyName: "titleTemplate", first: true, predicate: PopoverTitleTemplateDirective, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: PopoverBodyTemplateDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: PopoverActionsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popoverWrapper", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "titleTemplateWrapper", first: true, predicate: ["titleTemplateWrapper"], descendants: true }, { propertyName: "bodyTemplateWrapper", first: true, predicate: ["bodyTemplateWrapper"], descendants: true }], ngImport: i0, template: `
     <div #popoverWrapper *ngIf="visible" class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
         <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
 
@@ -294,7 +352,8 @@ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         </ng-template>
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-popover',

package/{esm2020 → esm2022}/popover/popover.service.mjs

@@ -10,13 +10,17 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class PopoverService {
+    ngZone;
+    _pointerOverPopup = new BehaviorSubject(null);
+    _pointerOverAnchor = new BehaviorSubject(null);
+    _focusInsidePopover = new BehaviorSubject(null);
+    _hidePopover = new Subject();
+    _isOrigin;
+    originAnchor;
+    currentAnchor;
+    subs = new Subscription();
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this._pointerOverPopup = new BehaviorSubject(null);
-        this._pointerOverAnchor = new BehaviorSubject(null);
-        this._focusInsidePopover = new BehaviorSubject(null);
-        this._hidePopover = new Subject();
-        this.subs = new Subscription();
         this.monitor();
     }
     ngOnDestroy() {
@@ -59,9 +63,9 @@ export class PopoverService {
             this._hidePopover.next([isPopoverHovered, isAnchorHovered, this._isOrigin, this.currentAnchor]);
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService });
 }
-PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/popover/template-directives/actions-template.directive.mjs

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
  * with the `kendoPopoverActionsTemplate` directive inside the `<kendo-popover>` tag.
  */
 export class PopoverActionsTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
 }
-PopoverActionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverActionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverActionsTemplate]',

package/{esm2020 → esm2022}/popover/template-directives/body-template.directive.mjs

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
  * with the `kendoPopoverBodyTemplate` directive inside the `<kendo-popover>` tag.
  */
 export class PopoverBodyTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
 }
-PopoverBodyTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverBodyTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverBodyTemplate]',

package/{esm2020 → esm2022}/popover/template-directives/title-template.directive.mjs

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
  * with the `kendoPopoverTitleTemplate` directive inside the `<kendo-popover>` tag.
  */
 export class PopoverTitleTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
 }
-PopoverTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverTitleTemplate]',

package/{esm2020 → esm2022}/popover.module.mjs

@@ -40,11 +40,11 @@ import * as i6 from "./popover/container.directive";
  * ```
  */
 export class PopoverModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, imports: [i1.PopoverComponent, i2.PopoverActionsTemplateDirective, i3.PopoverBodyTemplateDirective, i4.PopoverTitleTemplateDirective, i5.PopoverAnchorDirective, i6.PopoverContainerDirective], exports: [i1.PopoverComponent, i2.PopoverActionsTemplateDirective, i3.PopoverBodyTemplateDirective, i4.PopoverTitleTemplateDirective, i5.PopoverAnchorDirective, i6.PopoverContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService] });
 }
-PopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, imports: [i1.PopoverComponent, i2.PopoverActionsTemplateDirective, i3.PopoverBodyTemplateDirective, i4.PopoverTitleTemplateDirective, i5.PopoverAnchorDirective, i6.PopoverContainerDirective], exports: [i1.PopoverComponent, i2.PopoverActionsTemplateDirective, i3.PopoverBodyTemplateDirective, i4.PopoverTitleTemplateDirective, i5.PopoverAnchorDirective, i6.PopoverContainerDirective] });
-PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService], imports: [i1.PopoverComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_POPOVER],

package/{esm2020 → esm2022}/tooltip/tooltip.content.component.mjs

@@ -15,48 +15,21 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TooltipContentComponent {
-    constructor(content, localizationService) {
-        this.content = content;
-        this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        this.close = new EventEmitter();
-        this.hostRole = 'tooltip';
-        this.tooltipWidth = null;
-        this.tooltipHeight = null;
-        this.callout = true;
-        this.calloutStyles = (position, calloutSize, isFlip) => {
-            const styles = {};
-            const isVertical = position === 'top' || position === 'bottom';
-            const flipDeg = '180deg';
-            const zeroDeg = '0deg';
-            if (!isFlip) {
-                styles.transform = isVertical ? `rotateX(${zeroDeg})` : `rotateY(${zeroDeg})`;
-                return styles;
-            }
-            if (position === 'top') {
-                styles.bottom = 'unset';
-            }
-            else if (position === 'bottom') {
-                styles.top = 'unset';
-            }
-            else if (position === 'left') {
-                styles.right = 'unset';
-            }
-            else if (position === 'right') {
-                styles.left = 'unset';
-            }
-            styles[position] = `${-calloutSize}px`;
-            styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
-            return styles;
-        };
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
-    }
+    content;
+    localizationService;
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
+    /**
+     * @hidden
+     */
+    direction;
+    close = new EventEmitter();
     get cssClasses() {
         return 'k-tooltip';
     }
+    hostRole = 'tooltip';
     get hostId() {
         return this.tooltipId;
     }
@@ -66,6 +39,26 @@ export class TooltipContentComponent {
     get cssPosition() {
         return 'relative';
     }
+    tooltipWidth = null;
+    tooltipHeight = null;
+    titleTemplate;
+    anchor;
+    closable;
+    templateRef;
+    templateString;
+    closeTitle;
+    callout = true;
+    position;
+    /**
+     * @hidden
+     */
+    tooltipId;
+    dynamicRTLSubscription;
+    constructor(content, localizationService) {
+        this.content = content;
+        this.localizationService = localizationService;
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.tooltipId = getId('tooltip');
         this.dynamicRTLSubscription = this.localizationService.changes
@@ -113,15 +106,39 @@ export class TooltipContentComponent {
             callout.style[style] = calloutStyles[style];
         });
     }
-}
-TooltipContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.tooltip'
+    calloutStyles = (position, calloutSize, isFlip) => {
+        const styles = {};
+        const isVertical = position === 'top' || position === 'bottom';
+        const flipDeg = '180deg';
+        const zeroDeg = '0deg';
+        if (!isFlip) {
+            styles.transform = isVertical ? `rotateX(${zeroDeg})` : `rotateY(${zeroDeg})`;
+            return styles;
         }
-    ], ngImport: i0, template: `
+        if (position === 'top') {
+            styles.bottom = 'unset';
+        }
+        else if (position === 'bottom') {
+            styles.top = 'unset';
+        }
+        else if (position === 'left') {
+            styles.right = 'unset';
+        }
+        else if (position === 'right') {
+            styles.left = 'unset';
+        }
+        styles[position] = `${-calloutSize}px`;
+        styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
+        return styles;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.tooltip'
+            }
+        ], ngImport: i0, template: `
         <ng-container kendoTooltipLocalizedMessages
             i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
             closeTitle="Close"
@@ -159,7 +176,8 @@ TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
 
         <div class="k-callout" *ngIf="callout" [ngClass]="calloutPositionClass()"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipContentComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tooltip',