@progress/kendo-angular-tooltip 3.1.2 → 3.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,6 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
6
  import { ElementRef, Input, isDevMode } from "@angular/core";
7
- import { take } from "rxjs/operators";
8
7
  import { closest } from "@progress/kendo-angular-common";
9
8
  import { ERRORS } from '../constants';
10
9
  import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverHiddenEvent } from "../models/events";
@@ -91,7 +90,8 @@ var PopoverDirectivesBase = /** @class */ (function () {
91
90
  case 'click':
92
91
  _this.subscribeClick();
93
92
  break;
94
- default: /**/
93
+ default:
94
+ break;
95
95
  }
96
96
  });
97
97
  };
@@ -150,7 +150,6 @@ var PopoverDirectivesBase = /** @class */ (function () {
150
150
  * @hidden
151
151
  */
152
152
  PopoverDirectivesBase.prototype.openPopup = function (anchor) {
153
- var _this = this;
154
153
  var _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
155
154
  var popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(_anchor);
156
155
  var alignSettings = align(popoverComp.position, popoverComp.offset);
@@ -158,29 +157,19 @@ var PopoverDirectivesBase = /** @class */ (function () {
158
157
  var popupAlign = alignSettings.popupAlign;
159
158
  var popupMargin = alignSettings.popupMargin;
160
159
  var _animation = popoverComp.animation;
161
- this.ngZone.run(function () {
162
- _this.popupRef = _this.popupService.open({
163
- anchor: { nativeElement: _anchor },
164
- animate: _animation,
165
- content: PopoverComponent,
166
- popupAlign: popupAlign,
167
- anchorAlign: anchorAlign,
168
- margin: popupMargin,
169
- popupClass: 'k-popup-transparent',
170
- collision: { horizontal: 'fit', vertical: 'fit' }
171
- });
172
- var popoverInstance = _this.popupRef.content.instance;
173
- Object.assign(popoverInstance, popoverComp);
174
- popoverInstance.anchor = anchor;
175
- popoverInstance.contextData = popoverInstance.templateData(anchor);
176
- popoverInstance.visible = true;
177
- _this.popupRef.content.changeDetectorRef.detectChanges();
178
- _this.monitorPopup();
179
- _this.initializeFinishingEvents(popoverComp, _anchor);
160
+ this.popupRef = this.popupService.open({
161
+ anchor: { nativeElement: _anchor },
162
+ animate: _animation,
163
+ content: PopoverComponent,
164
+ popupAlign: popupAlign,
165
+ anchorAlign: anchorAlign,
166
+ margin: popupMargin,
167
+ popupClass: 'k-popup-transparent',
168
+ collision: { horizontal: 'fit', vertical: 'fit' }
180
169
  });
181
- this.popupRef.popupAnchorViewportLeave
182
- .pipe(take(1))
183
- .subscribe(function () { return _this.hide(); });
170
+ this.applySettings(this.popupRef.content, popoverComp, anchor);
171
+ this.monitorPopup();
172
+ this.initializeCompletionEvents(popoverComp, _anchor);
184
173
  };
185
174
  /**
186
175
  * @hidden
@@ -219,6 +208,25 @@ var PopoverDirectivesBase = /** @class */ (function () {
219
208
  });
220
209
  }
221
210
  };
211
+ PopoverDirectivesBase.prototype.applySettings = function (contentComponent, popover, anchor) {
212
+ var content = contentComponent.instance;
213
+ var _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
214
+ content.visible = true;
215
+ content.anchor = _anchor;
216
+ content.position = popover.position;
217
+ content.offset = popover.offset;
218
+ content.width = popover.width;
219
+ content.height = popover.height;
220
+ content.title = popover.title;
221
+ content.body = popover.body;
222
+ content.callout = popover.callout;
223
+ content.animation = popover.animation;
224
+ content.contextData = popover.templateData(_anchor);
225
+ content.titleTemplate = popover.titleTemplate;
226
+ content.bodyTemplate = popover.bodyTemplate;
227
+ content.actionsTemplate = popover.actionsTemplate;
228
+ this.popupRef.content.changeDetectorRef.detectChanges();
229
+ };
222
230
  /**
223
231
  * @hidden
224
232
  */
@@ -242,7 +250,7 @@ var PopoverDirectivesBase = /** @class */ (function () {
242
250
  }
243
251
  return eventArgs;
244
252
  };
245
- PopoverDirectivesBase.prototype.initializeFinishingEvents = function (popoverComp, _anchor) {
253
+ PopoverDirectivesBase.prototype.initializeCompletionEvents = function (popoverComp, _anchor) {
246
254
  var _this = this;
247
255
  if (!this._popupOpenSub) {
248
256
  this.popupRef.popupOpen.subscribe(function () {
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"exports":[{"export":[{"name":"Collision","as":"Collision"}],"from":"@progress/kendo-angular-popup"}],"metadata":{"TooltipDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":40,"character":1},"arguments":[{"selector":"[kendoTooltip]","exportAs":"kendoTooltip"}]}],"members":{"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"titleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"showOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"showAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"callout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"tooltipWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"tooltipHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"tooltipClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"closeTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":173,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":174,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":174,"character":21},"arguments":[{"__symbolic":"reference","name":"TOOLTIP_SETTINGS"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":169,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":170,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":171,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":172,"character":30},{"__symbolic":"reference","name":"TooltipSettings"},{"__symbolic":"reference","name":"TooltipSettings"}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showContent":[{"__symbolic":"method"}],"bindContent":[{"__symbolic":"method"}],"hideElementTitle":[{"__symbolic":"method"}],"openPopup":[{"__symbolic":"method"}],"closePopup":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"onMouseClick":[{"__symbolic":"method"}],"onMouseOver":[{"__symbolic":"method"}],"onMouseOut":[{"__symbolic":"method"}],"verifyProperties":[{"__symbolic":"method"}]}},"TooltipSettings":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":37,"character":1}}],"members":{}},"TOOLTIP_SETTINGS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":10,"character":36},"arguments":["kendo-ui-tooltip-settings"]},"PopoverComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"kendo-popover","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":32,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":34,"character":21},"useValue":"kendo.popover"}],"template":"\n <div *ngIf=\"visible\" role=\"tooltip\" class=\"k-popover\" [ngStyle]=\"{'width.px': width, 'height.px': height}\">\n <div class=\"k-popover-callout\" [ngClass]=\"getCalloutPosition()\" *ngIf=\"callout\"></div>\n\n <div *ngIf=\"titleTemplate || title\" class=\"k-popover-header\">\n <ng-template *ngIf=\"titleTemplate\"\n [ngTemplateOutlet]=\"titleTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n </ng-template>\n <ng-container *ngIf=\"title && !titleTemplate\">\n {{ title }}\n </ng-container>\n </div>\n\n <div *ngIf=\"bodyTemplate || body\" class=\"k-popover-body\">\n <ng-template *ngIf=\"bodyTemplate\"\n [ngTemplateOutlet]=\"bodyTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n </ng-template>\n <ng-container *ngIf=\"body && !bodyTemplate\">\n {{ body }}\n </ng-container>\n </div>\n\n <div *ngIf=\"actionsTemplate\" class=\"k-popover-actions k-actions k-hstack k-justify-content-between\">\n <ng-template *ngIf=\"actionsTemplate\"\n [ngTemplateOutlet]=\"actionsTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n </ng-template>\n </div>\n </div>\n "}]}],"members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":109,"character":5},"arguments":["style.width"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":122,"character":5},"arguments":["style.height"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":134,"character":5},"arguments":["attr.dir"]}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"body":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":5}}]}],"callout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"templateData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"isHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":202,"character":5},"arguments":["class.k-hidden"]}]}],"hasAttributeHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":209,"character":5},"arguments":["attr.aria-hidden"]}]}],"show":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":217,"character":5}}]}],"shown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":5}}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":234,"character":5}}]}],"titleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":239,"character":5},"arguments":[{"__symbolic":"reference","name":"PopoverTitleTemplateDirective"},{"static":false}]}]}],"bodyTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":245,"character":5},"arguments":[{"__symbolic":"reference","name":"PopoverBodyTemplateDirective"},{"static":false}]}]}],"actionsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":251,"character":5},"arguments":[{"__symbolic":"reference","name":"PopoverActionsTemplateDirective"},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":265,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getCalloutPosition":[{"__symbolic":"method"}]}},"PopoverContainerDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PopoverDirectivesBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[kendoPopoverContainer]","exportAs":"kendoPopoverContainer","providers":[{"__symbolic":"reference","name":"PopoverService"}]}]}],"members":{"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":38,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":39,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":40,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":41,"character":28},{"__symbolic":"reference","name":"PopoverService"}]}],"show":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"subscribeToEvents":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method"}],"controlVisibility":[{"__symbolic":"method"}]}},"PopoverAnchorDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PopoverDirectivesBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":17,"character":1},"arguments":[{"selector":"[kendoPopoverAnchor]","exportAs":"kendoPopoverAnchor","providers":[{"__symbolic":"reference","name":"PopoverService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":25,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":26,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":27,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":28,"character":28},{"__symbolic":"reference","name":"PopoverService"}]}],"show":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"subscribeToEvents":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"controlVisibility":[{"__symbolic":"method"}]}},"PopoverTitleTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoPopoverTitleTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":16,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"PopoverBodyTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoPopoverBodyTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":16,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"PopoverActionsTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoPopoverActionsTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":16,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ShowOption":{"__symbolic":"interface"},"PopoverShowOption":{"__symbolic":"interface"},"Position":{"__symbolic":"interface"},"PopoverFn":{"__symbolic":"interface"},"PopoverDataFn":{"__symbolic":"interface"},"PopoverAnimation":{"__symbolic":"interface"},"PopoverShowEvent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"PreventableEvent","line":7,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":19,"character":16,"context":{"typeName":"Element"},"module":"./models/events"}]}]}},"PopoverShownEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":78,"character":16,"context":{"typeName":"Element"},"module":"./models/events"},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupRef","line":49,"character":17}]}]}},"PopoverHideEvent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"PreventableEvent","line":30,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":48,"character":16,"context":{"typeName":"Element"},"module":"./models/events"},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupRef","line":49,"character":17}]}]}},"PopoverHiddenEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":101,"character":16,"context":{"typeName":"Element"},"module":"./models/events"}]}]}},"TooltipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":43,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"TooltipDirective"},{"__symbolic":"reference","name":"TooltipContentComponent"},{"__symbolic":"reference","name":"LocalizedMessagesDirective"}]],"entryComponents":[{"__symbolic":"reference","name":"TooltipContentComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":46,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupModule","line":11,"character":34}],"exports":[[{"__symbolic":"reference","name":"TooltipDirective"},{"__symbolic":"reference","name":"TooltipContentComponent"},{"__symbolic":"reference","name":"LocalizedMessagesDirective"}]]}]}],"members":{}},"PopoverModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":44,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PopoverActionsTemplateDirective"},{"__symbolic":"reference","name":"PopoverBodyTemplateDirective"},{"__symbolic":"reference","name":"PopoverTitleTemplateDirective"},{"__symbolic":"reference","name":"PopoverAnchorDirective"},{"__symbolic":"reference","name":"PopoverContainerDirective"},{"__symbolic":"reference","name":"PopoverComponent"}],"entryComponents":[{"__symbolic":"reference","name":"PopoverComponent"}],"exports":[{"__symbolic":"reference","name":"PopoverActionsTemplateDirective"},{"__symbolic":"reference","name":"PopoverBodyTemplateDirective"},{"__symbolic":"reference","name":"PopoverTitleTemplateDirective"},{"__symbolic":"reference","name":"PopoverAnchorDirective"},{"__symbolic":"reference","name":"PopoverContainerDirective"},{"__symbolic":"reference","name":"PopoverComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":52,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupModule","line":53,"character":8}]}]}],"members":{}},"TooltipsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":30,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","name":"TooltipModule"},{"__symbolic":"reference","name":"PopoverModule"}]}]}],"members":{}},"PopoverDirectivesBase":{"__symbolic":"class","members":{"popover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"showOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":84,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":85,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":86,"character":28}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"closePopup":[{"__symbolic":"method"}],"openPopup":[{"__symbolic":"method"}],"isPrevented":[{"__symbolic":"method"}],"monitorPopup":[{"__symbolic":"method"}],"subscribeToEvents":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"mouseenterHandler":[{"__symbolic":"method"}],"mouseleaveHandler":[{"__symbolic":"method"}],"focusHandler":[{"__symbolic":"method"}],"blurHandler":[{"__symbolic":"method"}],"initializeEvents":[{"__symbolic":"method"}],"initializeFinishingEvents":[{"__symbolic":"method"}]}},"PopoverService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":18,"character":32}]}],"ngOnDestroy":[{"__symbolic":"method"}],"emitPopoverState":[{"__symbolic":"method"}],"emitAnchorState":[{"__symbolic":"method"}],"emitFocusInsidePopover":[{"__symbolic":"method"}],"monitor":[{"__symbolic":"method"}]}},"TooltipContentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"kendo-tooltip","template":"\n <ng-container kendoTooltipLocalizedMessages\n i18n-closeTitle=\"kendo.tooltip.closeTitle|The title of the close button\"\n closeTitle=\"Close\"\n >\n </ng-container>\n\n <div class=\"k-tooltip-content\">\n <div class=\"k-tooltip-title\" *ngIf=\"titleTemplate\">\n <ng-template\n [ngIf]=\"titleTemplate\"\n [ngTemplateOutlet]=\"titleTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, anchor: anchor }\">\n </ng-template>\n </div>\n\n <ng-template\n [ngIf]=\"templateRef\"\n [ngTemplateOutlet]=\"templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, anchor: anchor }\">\n </ng-template>\n <ng-template\n [ngIf]=\"templateString\">\n {{ templateString }}\n </ng-template>\n </div>\n\n <div *ngIf=\"closable\" class=\"k-tooltip-button\" (click)=\"onCloseClick($event)\">\n <a href=\"#\" class=\"k-icon k-i-close\" [attr.title]=\"closeButtonTitle\"></a>\n </div>\n\n <div class=\"k-callout\" *ngIf=\"callout\" [ngClass]=\"calloutPositionClass()\"></div>\n ","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":55,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":57,"character":21},"useValue":"kendo.tooltip"}]}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":66,"character":5},"arguments":["attr.dir"]}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5}}]}],"cssClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":70,"character":5},"arguments":["class"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":75,"character":5},"arguments":["class.k-tooltip-closable"]}]}],"cssPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":80,"character":5},"arguments":["style.position"]}]}],"tooltipWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":5},"arguments":["style.width.px"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"tooltipHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":88,"character":5},"arguments":["style.height.px"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"titleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"templateString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":108,"character":25},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":109,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"calloutPositionClass":[{"__symbolic":"method"}],"onCloseClick":[{"__symbolic":"method"}],"updateCalloutPosition":[{"__symbolic":"method"}]}},"LocalizedMessagesDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"ComponentMessages","line":15,"character":48},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"ComponentMessages","line":9,"character":21},"useExisting":{"__symbolic":"reference","name":"LocalizedMessagesDirective"}}],"selector":"[kendoTooltipLocalizedMessages]"}]}],"members":{"closeTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":21,"character":35}]}]}}},"origins":{"TooltipDirective":"./tooltip/tooltip.directive","TooltipSettings":"./tooltip/tooltip.settings","TOOLTIP_SETTINGS":"./tooltip/tooltip.settings","PopoverComponent":"./popover/popover.component","PopoverContainerDirective":"./popover/container.directive","PopoverAnchorDirective":"./popover/anchor.directive","PopoverTitleTemplateDirective":"./popover/template-directives/title-template.directive","PopoverBodyTemplateDirective":"./popover/template-directives/body-template.directive","PopoverActionsTemplateDirective":"./popover/template-directives/actions-template.directive","ShowOption":"./models/show.option.type","PopoverShowOption":"./models/popover-show-option.type","Position":"./models/position.type","PopoverFn":"./models/functions.model","PopoverDataFn":"./models/functions.model","PopoverAnimation":"./models/animation.model","PopoverShowEvent":"./models/events","PopoverShownEvent":"./models/events","PopoverHideEvent":"./models/events","PopoverHiddenEvent":"./models/events","TooltipModule":"./tooltip.module","PopoverModule":"./popover.module","TooltipsModule":"./tooltips.module","PopoverDirectivesBase":"./popover/directives-base","PopoverService":"./popover/popover.service","TooltipContentComponent":"./tooltip/tooltip.content.component","LocalizedMessagesDirective":"./localization/localized-messages.directive"},"importAs":"@progress/kendo-angular-tooltip"}
1
+ {"__symbolic":"module","version":4,"exports":[{"export":[{"name":"Collision","as":"Collision"}],"from":"@progress/kendo-angular-popup"}],"metadata":{"TooltipDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":40,"character":1},"arguments":[{"selector":"[kendoTooltip]","exportAs":"kendoTooltip"}]}],"members":{"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"titleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"showOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"showAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"callout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"tooltipWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"tooltipHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"tooltipClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"closeTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":173,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":174,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":174,"character":21},"arguments":[{"__symbolic":"reference","name":"TOOLTIP_SETTINGS"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":169,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":170,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":171,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":172,"character":30},{"__symbolic":"reference","name":"TooltipSettings"},{"__symbolic":"reference","name":"TooltipSettings"}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showContent":[{"__symbolic":"method"}],"bindContent":[{"__symbolic":"method"}],"hideElementTitle":[{"__symbolic":"method"}],"openPopup":[{"__symbolic":"method"}],"closePopup":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"onMouseClick":[{"__symbolic":"method"}],"onMouseOver":[{"__symbolic":"method"}],"onMouseOut":[{"__symbolic":"method"}],"verifyProperties":[{"__symbolic":"method"}]}},"TooltipSettings":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":37,"character":1}}],"members":{}},"TOOLTIP_SETTINGS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":10,"character":36},"arguments":["kendo-ui-tooltip-settings"]},"PopoverComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"kendo-popover","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":32,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":34,"character":21},"useValue":"kendo.popover"}],"template":"\n <div *ngIf=\"visible\" role=\"tooltip\" class=\"k-popover\" [ngStyle]=\"{'width.px': width, 'height.px': height}\">\n <div class=\"k-popover-callout\" [ngClass]=\"getCalloutPosition()\" *ngIf=\"callout\"></div>\n\n <div *ngIf=\"titleTemplate || title\" class=\"k-popover-header\">\n <ng-template *ngIf=\"titleTemplate\"\n [ngTemplateOutlet]=\"titleTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n </ng-template>\n <ng-container *ngIf=\"title && !titleTemplate\">\n {{ title }}\n </ng-container>\n </div>\n\n <div *ngIf=\"bodyTemplate || body\" class=\"k-popover-body\">\n <ng-template *ngIf=\"bodyTemplate\"\n [ngTemplateOutlet]=\"bodyTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n </ng-template>\n <ng-container *ngIf=\"body && !bodyTemplate\">\n {{ body }}\n </ng-container>\n </div>\n\n <div *ngIf=\"actionsTemplate\" class=\"k-popover-actions k-actions k-hstack k-justify-content-between\">\n <ng-template *ngIf=\"actionsTemplate\"\n [ngTemplateOutlet]=\"actionsTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n </ng-template>\n </div>\n </div>\n "}]}],"members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":109,"character":5},"arguments":["style.width"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":122,"character":5},"arguments":["style.height"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":134,"character":5},"arguments":["attr.dir"]}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"body":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":5}}]}],"callout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":5}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"templateData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"isHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":202,"character":5},"arguments":["class.k-hidden"]}]}],"hasAttributeHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":209,"character":5},"arguments":["attr.aria-hidden"]}]}],"show":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":217,"character":5}}]}],"shown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":5}}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":234,"character":5}}]}],"titleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":239,"character":5},"arguments":[{"__symbolic":"reference","name":"PopoverTitleTemplateDirective"},{"static":false}]}]}],"bodyTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":245,"character":5},"arguments":[{"__symbolic":"reference","name":"PopoverBodyTemplateDirective"},{"static":false}]}]}],"actionsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":251,"character":5},"arguments":[{"__symbolic":"reference","name":"PopoverActionsTemplateDirective"},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":265,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getCalloutPosition":[{"__symbolic":"method"}]}},"PopoverContainerDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PopoverDirectivesBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[kendoPopoverContainer]","exportAs":"kendoPopoverContainer","providers":[{"__symbolic":"reference","name":"PopoverService"}]}]}],"members":{"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":38,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":39,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":40,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":41,"character":28},{"__symbolic":"reference","name":"PopoverService"}]}],"show":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"subscribeToEvents":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method"}],"controlVisibility":[{"__symbolic":"method"}]}},"PopoverAnchorDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PopoverDirectivesBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":17,"character":1},"arguments":[{"selector":"[kendoPopoverAnchor]","exportAs":"kendoPopoverAnchor","providers":[{"__symbolic":"reference","name":"PopoverService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":25,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":26,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":27,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":28,"character":28},{"__symbolic":"reference","name":"PopoverService"}]}],"show":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"subscribeToEvents":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"controlVisibility":[{"__symbolic":"method"}]}},"PopoverTitleTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoPopoverTitleTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":16,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"PopoverBodyTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoPopoverBodyTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":16,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"PopoverActionsTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoPopoverActionsTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":16,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ShowOption":{"__symbolic":"interface"},"PopoverShowOption":{"__symbolic":"interface"},"Position":{"__symbolic":"interface"},"PopoverFn":{"__symbolic":"interface"},"PopoverDataFn":{"__symbolic":"interface"},"PopoverAnimation":{"__symbolic":"interface"},"PopoverShowEvent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"PreventableEvent","line":7,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":19,"character":16,"context":{"typeName":"Element"},"module":"./models/events"}]}]}},"PopoverShownEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":78,"character":16,"context":{"typeName":"Element"},"module":"./models/events"},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupRef","line":49,"character":17}]}]}},"PopoverHideEvent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"PreventableEvent","line":30,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":48,"character":16,"context":{"typeName":"Element"},"module":"./models/events"},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupRef","line":49,"character":17}]}]}},"PopoverHiddenEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":101,"character":16,"context":{"typeName":"Element"},"module":"./models/events"}]}]}},"TooltipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":43,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"TooltipDirective"},{"__symbolic":"reference","name":"TooltipContentComponent"},{"__symbolic":"reference","name":"LocalizedMessagesDirective"}]],"entryComponents":[{"__symbolic":"reference","name":"TooltipContentComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":46,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupModule","line":11,"character":34}],"exports":[[{"__symbolic":"reference","name":"TooltipDirective"},{"__symbolic":"reference","name":"TooltipContentComponent"},{"__symbolic":"reference","name":"LocalizedMessagesDirective"}]]}]}],"members":{}},"PopoverModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":44,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PopoverActionsTemplateDirective"},{"__symbolic":"reference","name":"PopoverBodyTemplateDirective"},{"__symbolic":"reference","name":"PopoverTitleTemplateDirective"},{"__symbolic":"reference","name":"PopoverAnchorDirective"},{"__symbolic":"reference","name":"PopoverContainerDirective"},{"__symbolic":"reference","name":"PopoverComponent"}],"entryComponents":[{"__symbolic":"reference","name":"PopoverComponent"}],"exports":[{"__symbolic":"reference","name":"PopoverActionsTemplateDirective"},{"__symbolic":"reference","name":"PopoverBodyTemplateDirective"},{"__symbolic":"reference","name":"PopoverTitleTemplateDirective"},{"__symbolic":"reference","name":"PopoverAnchorDirective"},{"__symbolic":"reference","name":"PopoverContainerDirective"},{"__symbolic":"reference","name":"PopoverComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":52,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupModule","line":53,"character":8}]}]}],"members":{}},"TooltipsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":30,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","name":"TooltipModule"},{"__symbolic":"reference","name":"PopoverModule"}]}]}],"members":{}},"PopoverDirectivesBase":{"__symbolic":"class","members":{"popover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"showOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":83,"character":26},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":84,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":85,"character":28}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"closePopup":[{"__symbolic":"method"}],"openPopup":[{"__symbolic":"method"}],"isPrevented":[{"__symbolic":"method"}],"monitorPopup":[{"__symbolic":"method"}],"applySettings":[{"__symbolic":"method"}],"subscribeToEvents":[{"__symbolic":"method"}],"subscribeClick":[{"__symbolic":"method"}],"mouseenterHandler":[{"__symbolic":"method"}],"mouseleaveHandler":[{"__symbolic":"method"}],"focusHandler":[{"__symbolic":"method"}],"blurHandler":[{"__symbolic":"method"}],"initializeEvents":[{"__symbolic":"method"}],"initializeCompletionEvents":[{"__symbolic":"method"}]}},"PopoverService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":18,"character":32}]}],"ngOnDestroy":[{"__symbolic":"method"}],"emitPopoverState":[{"__symbolic":"method"}],"emitAnchorState":[{"__symbolic":"method"}],"emitFocusInsidePopover":[{"__symbolic":"method"}],"monitor":[{"__symbolic":"method"}]}},"TooltipContentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"kendo-tooltip","template":"\n <ng-container kendoTooltipLocalizedMessages\n i18n-closeTitle=\"kendo.tooltip.closeTitle|The title of the close button\"\n closeTitle=\"Close\"\n >\n </ng-container>\n\n <div class=\"k-tooltip-content\">\n <div class=\"k-tooltip-title\" *ngIf=\"titleTemplate\">\n <ng-template\n [ngIf]=\"titleTemplate\"\n [ngTemplateOutlet]=\"titleTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, anchor: anchor }\">\n </ng-template>\n </div>\n\n <ng-template\n [ngIf]=\"templateRef\"\n [ngTemplateOutlet]=\"templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, anchor: anchor }\">\n </ng-template>\n <ng-template\n [ngIf]=\"templateString\">\n {{ templateString }}\n </ng-template>\n </div>\n\n <div *ngIf=\"closable\" class=\"k-tooltip-button\" (click)=\"onCloseClick($event)\">\n <a href=\"#\" class=\"k-icon k-i-close\" [attr.title]=\"closeButtonTitle\"></a>\n </div>\n\n <div class=\"k-callout\" *ngIf=\"callout\" [ngClass]=\"calloutPositionClass()\"></div>\n ","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":55,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":57,"character":21},"useValue":"kendo.tooltip"}]}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":66,"character":5},"arguments":["attr.dir"]}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5}}]}],"cssClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":70,"character":5},"arguments":["class"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":75,"character":5},"arguments":["class.k-tooltip-closable"]}]}],"cssPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":80,"character":5},"arguments":["style.position"]}]}],"tooltipWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":5},"arguments":["style.width.px"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"tooltipHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":88,"character":5},"arguments":["style.height.px"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"titleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"templateString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":108,"character":25},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":109,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"calloutPositionClass":[{"__symbolic":"method"}],"onCloseClick":[{"__symbolic":"method"}],"updateCalloutPosition":[{"__symbolic":"method"}]}},"LocalizedMessagesDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"ComponentMessages","line":15,"character":48},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"ComponentMessages","line":9,"character":21},"useExisting":{"__symbolic":"reference","name":"LocalizedMessagesDirective"}}],"selector":"[kendoTooltipLocalizedMessages]"}]}],"members":{"closeTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":21,"character":35}]}]}}},"origins":{"TooltipDirective":"./tooltip/tooltip.directive","TooltipSettings":"./tooltip/tooltip.settings","TOOLTIP_SETTINGS":"./tooltip/tooltip.settings","PopoverComponent":"./popover/popover.component","PopoverContainerDirective":"./popover/container.directive","PopoverAnchorDirective":"./popover/anchor.directive","PopoverTitleTemplateDirective":"./popover/template-directives/title-template.directive","PopoverBodyTemplateDirective":"./popover/template-directives/body-template.directive","PopoverActionsTemplateDirective":"./popover/template-directives/actions-template.directive","ShowOption":"./models/show.option.type","PopoverShowOption":"./models/popover-show-option.type","Position":"./models/position.type","PopoverFn":"./models/functions.model","PopoverDataFn":"./models/functions.model","PopoverAnimation":"./models/animation.model","PopoverShowEvent":"./models/events","PopoverShownEvent":"./models/events","PopoverHideEvent":"./models/events","PopoverHiddenEvent":"./models/events","TooltipModule":"./tooltip.module","PopoverModule":"./popover.module","TooltipsModule":"./tooltips.module","PopoverDirectivesBase":"./popover/directives-base","PopoverService":"./popover/popover.service","TooltipContentComponent":"./tooltip/tooltip.content.component","LocalizedMessagesDirective":"./localization/localized-messages.directive"},"importAs":"@progress/kendo-angular-tooltip"}
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-tooltip',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1642667921,
12
+ publishDate: 1643027281,
13
13
  version: '',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
15
15
  };
@@ -6,7 +6,7 @@ import * as tslib_1 from "tslib";
6
6
  import { Directive, ElementRef, NgZone, Renderer2 } from "@angular/core";
7
7
  import { closest } from "@progress/kendo-angular-common";
8
8
  import { PopupService } from "@progress/kendo-angular-popup";
9
- import { filter } from "rxjs/operators";
9
+ import { filter, take } from "rxjs/operators";
10
10
  import { PopoverDirectivesBase } from "./directives-base";
11
11
  import { PopoverService } from "./popover.service";
12
12
  /**
@@ -73,7 +73,12 @@ let PopoverAnchorDirective = class PopoverAnchorDirective extends PopoverDirecti
73
73
  if (this.popupRef) {
74
74
  return;
75
75
  }
76
- this.openPopup(this.hostEl.nativeElement);
76
+ this.ngZone.run(() => {
77
+ this.openPopup(this.hostEl);
78
+ });
79
+ this.popupRef.popupAnchorViewportLeave
80
+ .pipe(take(1))
81
+ .subscribe(() => this.hide());
77
82
  }
78
83
  /**
79
84
  * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
@@ -6,7 +6,7 @@ import * as tslib_1 from "tslib";
6
6
  import { Directive, ElementRef, Input, NgZone, Renderer2 } from "@angular/core";
7
7
  import { closest } from "@progress/kendo-angular-common";
8
8
  import { PopupService } from "@progress/kendo-angular-popup";
9
- import { filter } from "rxjs/operators";
9
+ import { filter, take } from "rxjs/operators";
10
10
  import { closestBySelector } from "../utils";
11
11
  import { PopoverDirectivesBase } from './directives-base';
12
12
  import { PopoverService } from "./popover.service";
@@ -85,7 +85,12 @@ let PopoverContainerDirective = class PopoverContainerDirective extends PopoverD
85
85
  if (this.popupRef) {
86
86
  return;
87
87
  }
88
- this.openPopup(anchor);
88
+ this.ngZone.run(() => {
89
+ this.openPopup(anchor);
90
+ });
91
+ this.popupRef.popupAnchorViewportLeave
92
+ .pipe(take(1))
93
+ .subscribe(() => this.hide());
89
94
  }
90
95
  /**
91
96
  * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { ElementRef, NgZone, OnDestroy, Renderer2 } from "@angular/core";
5
+ import { ComponentRef, ElementRef, NgZone, OnDestroy, Renderer2 } from "@angular/core";
6
6
  import { PopupRef, PopupService } from "@progress/kendo-angular-popup";
7
7
  import { PopoverFn } from "../models/functions.model";
8
8
  import { PopoverShowOption } from "../models/popover-show-option.type";
@@ -73,6 +73,7 @@ export declare abstract class PopoverDirectivesBase implements OnDestroy {
73
73
  * @hidden
74
74
  */
75
75
  protected monitorPopup(): void;
76
+ protected applySettings(contentComponent: ComponentRef<PopoverComponent>, popover: PopoverComponent, anchor: Element | ElementRef): void;
76
77
  protected abstract subscribeToEvents(args?: any): void;
77
78
  protected abstract subscribeClick(): void;
78
79
  protected abstract mouseenterHandler(args?: any): void;
@@ -83,5 +84,5 @@ export declare abstract class PopoverDirectivesBase implements OnDestroy {
83
84
  * @hidden
84
85
  */
85
86
  private initializeEvents;
86
- private initializeFinishingEvents;
87
+ private initializeCompletionEvents;
87
88
  }
@@ -4,7 +4,6 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
6
  import { ElementRef, Input, isDevMode } from "@angular/core";
7
- import { take } from "rxjs/operators";
8
7
  import { closest } from "@progress/kendo-angular-common";
9
8
  import { ERRORS } from '../constants';
10
9
  import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverHiddenEvent } from "../models/events";
@@ -82,7 +81,8 @@ export class PopoverDirectivesBase {
82
81
  case 'click':
83
82
  this.subscribeClick();
84
83
  break;
85
- default: /**/
84
+ default:
85
+ break;
86
86
  }
87
87
  });
88
88
  }
@@ -148,29 +148,19 @@ export class PopoverDirectivesBase {
148
148
  const popupAlign = alignSettings.popupAlign;
149
149
  const popupMargin = alignSettings.popupMargin;
150
150
  const _animation = popoverComp.animation;
151
- this.ngZone.run(() => {
152
- this.popupRef = this.popupService.open({
153
- anchor: { nativeElement: _anchor },
154
- animate: _animation,
155
- content: PopoverComponent,
156
- popupAlign,
157
- anchorAlign,
158
- margin: popupMargin,
159
- popupClass: 'k-popup-transparent',
160
- collision: { horizontal: 'fit', vertical: 'fit' }
161
- });
162
- const popoverInstance = this.popupRef.content.instance;
163
- Object.assign(popoverInstance, popoverComp);
164
- popoverInstance.anchor = anchor;
165
- popoverInstance.contextData = popoverInstance.templateData(anchor);
166
- popoverInstance.visible = true;
167
- this.popupRef.content.changeDetectorRef.detectChanges();
168
- this.monitorPopup();
169
- this.initializeFinishingEvents(popoverComp, _anchor);
151
+ this.popupRef = this.popupService.open({
152
+ anchor: { nativeElement: _anchor },
153
+ animate: _animation,
154
+ content: PopoverComponent,
155
+ popupAlign,
156
+ anchorAlign,
157
+ margin: popupMargin,
158
+ popupClass: 'k-popup-transparent',
159
+ collision: { horizontal: 'fit', vertical: 'fit' }
170
160
  });
171
- this.popupRef.popupAnchorViewportLeave
172
- .pipe(take(1))
173
- .subscribe(() => this.hide());
161
+ this.applySettings(this.popupRef.content, popoverComp, anchor);
162
+ this.monitorPopup();
163
+ this.initializeCompletionEvents(popoverComp, _anchor);
174
164
  }
175
165
  /**
176
166
  * @hidden
@@ -208,6 +198,25 @@ export class PopoverDirectivesBase {
208
198
  });
209
199
  }
210
200
  }
201
+ applySettings(contentComponent, popover, anchor) {
202
+ const content = contentComponent.instance;
203
+ const _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
204
+ content.visible = true;
205
+ content.anchor = _anchor;
206
+ content.position = popover.position;
207
+ content.offset = popover.offset;
208
+ content.width = popover.width;
209
+ content.height = popover.height;
210
+ content.title = popover.title;
211
+ content.body = popover.body;
212
+ content.callout = popover.callout;
213
+ content.animation = popover.animation;
214
+ content.contextData = popover.templateData(_anchor);
215
+ content.titleTemplate = popover.titleTemplate;
216
+ content.bodyTemplate = popover.bodyTemplate;
217
+ content.actionsTemplate = popover.actionsTemplate;
218
+ this.popupRef.content.changeDetectorRef.detectChanges();
219
+ }
211
220
  /**
212
221
  * @hidden
213
222
  */
@@ -230,7 +239,7 @@ export class PopoverDirectivesBase {
230
239
  }
231
240
  return eventArgs;
232
241
  }
233
- initializeFinishingEvents(popoverComp, _anchor) {
242
+ initializeCompletionEvents(popoverComp, _anchor) {
234
243
  if (!this._popupOpenSub) {
235
244
  this.popupRef.popupOpen.subscribe(() => {
236
245
  const eventArgs = new PopoverShownEvent(_anchor, this.popupRef);