@progress/kendo-angular-tooltip 21.1.1-develop.2 → 21.2.0-develop.10
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.
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.
|
|
13
|
+
publishDate: 1764593029,
|
|
14
|
+
version: '21.2.0-develop.10',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -15,7 +15,7 @@ import { PopoverActionsTemplateDirective } from './template-directives/actions-t
|
|
|
15
15
|
import { Keys } from '@progress/kendo-angular-common';
|
|
16
16
|
import { take } from 'rxjs/operators';
|
|
17
17
|
import { getAllFocusableChildren, getFirstAndLastFocusable, getId } from '../utils';
|
|
18
|
-
import {
|
|
18
|
+
import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
19
19
|
import * as i0 from "@angular/core";
|
|
20
20
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
21
21
|
/**
|
|
@@ -297,50 +297,101 @@ export class PopoverComponent {
|
|
|
297
297
|
this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
|
|
298
298
|
}
|
|
299
299
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
301
301
|
LocalizationService,
|
|
302
302
|
{
|
|
303
303
|
provide: L10N_PREFIX,
|
|
304
304
|
useValue: 'kendo.popover'
|
|
305
305
|
}
|
|
306
306
|
], 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: `
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
307
|
+
@if (visible) {
|
|
308
|
+
<div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
|
|
309
|
+
@if (callout) {
|
|
310
|
+
<div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
|
|
311
|
+
}
|
|
312
|
+
@if (callout) {
|
|
313
|
+
<div class="k-popover-inner">
|
|
311
314
|
<ng-container *ngTemplateOutlet="noCallout"></ng-container>
|
|
312
|
-
|
|
313
|
-
|
|
315
|
+
</div>
|
|
316
|
+
} @else {
|
|
317
|
+
@if (titleTemplate || title) {
|
|
318
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
319
|
+
@if (titleTemplate) {
|
|
320
|
+
<ng-template
|
|
321
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
322
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
323
|
+
</ng-template>
|
|
324
|
+
}
|
|
325
|
+
@if (title && !titleTemplate) {
|
|
326
|
+
{{ title }}
|
|
327
|
+
}
|
|
328
|
+
</div>
|
|
329
|
+
}
|
|
330
|
+
@if (bodyTemplate || body) {
|
|
331
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
332
|
+
@if (bodyTemplate) {
|
|
333
|
+
<ng-template
|
|
334
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
335
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
336
|
+
</ng-template>
|
|
337
|
+
}
|
|
338
|
+
@if (body && !bodyTemplate) {
|
|
339
|
+
{{ body }}
|
|
340
|
+
}
|
|
341
|
+
</div>
|
|
342
|
+
}
|
|
343
|
+
@if (actionsTemplate) {
|
|
344
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
345
|
+
@if (actionsTemplate) {
|
|
346
|
+
<ng-template
|
|
347
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
348
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
349
|
+
</ng-template>
|
|
350
|
+
}
|
|
351
|
+
</div>
|
|
352
|
+
}
|
|
353
|
+
}
|
|
314
354
|
<ng-template #noCallout>
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
355
|
+
@if (titleTemplate || title) {
|
|
356
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
357
|
+
@if (titleTemplate) {
|
|
358
|
+
<ng-template
|
|
359
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
360
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
319
361
|
</ng-template>
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
362
|
+
}
|
|
363
|
+
@if (title && !titleTemplate) {
|
|
364
|
+
{{ title }}
|
|
365
|
+
}
|
|
323
366
|
</div>
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
367
|
+
}
|
|
368
|
+
@if (bodyTemplate || body) {
|
|
369
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
370
|
+
@if (bodyTemplate) {
|
|
371
|
+
<ng-template
|
|
372
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
373
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
329
374
|
</ng-template>
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
375
|
+
}
|
|
376
|
+
@if (body && !bodyTemplate) {
|
|
377
|
+
{{ body }}
|
|
378
|
+
}
|
|
333
379
|
</div>
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
380
|
+
}
|
|
381
|
+
@if (actionsTemplate) {
|
|
382
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
383
|
+
@if (actionsTemplate) {
|
|
384
|
+
<ng-template
|
|
385
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
386
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
339
387
|
</ng-template>
|
|
388
|
+
}
|
|
340
389
|
</div>
|
|
390
|
+
}
|
|
341
391
|
</ng-template>
|
|
342
|
-
|
|
343
|
-
|
|
392
|
+
</div>
|
|
393
|
+
}
|
|
394
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
344
395
|
}
|
|
345
396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
346
397
|
type: Component,
|
|
@@ -354,45 +405,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
354
405
|
}
|
|
355
406
|
],
|
|
356
407
|
template: `
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
408
|
+
@if (visible) {
|
|
409
|
+
<div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
|
|
410
|
+
@if (callout) {
|
|
411
|
+
<div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
|
|
412
|
+
}
|
|
413
|
+
@if (callout) {
|
|
414
|
+
<div class="k-popover-inner">
|
|
361
415
|
<ng-container *ngTemplateOutlet="noCallout"></ng-container>
|
|
362
|
-
|
|
363
|
-
|
|
416
|
+
</div>
|
|
417
|
+
} @else {
|
|
418
|
+
@if (titleTemplate || title) {
|
|
419
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
420
|
+
@if (titleTemplate) {
|
|
421
|
+
<ng-template
|
|
422
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
423
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
424
|
+
</ng-template>
|
|
425
|
+
}
|
|
426
|
+
@if (title && !titleTemplate) {
|
|
427
|
+
{{ title }}
|
|
428
|
+
}
|
|
429
|
+
</div>
|
|
430
|
+
}
|
|
431
|
+
@if (bodyTemplate || body) {
|
|
432
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
433
|
+
@if (bodyTemplate) {
|
|
434
|
+
<ng-template
|
|
435
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
436
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
437
|
+
</ng-template>
|
|
438
|
+
}
|
|
439
|
+
@if (body && !bodyTemplate) {
|
|
440
|
+
{{ body }}
|
|
441
|
+
}
|
|
442
|
+
</div>
|
|
443
|
+
}
|
|
444
|
+
@if (actionsTemplate) {
|
|
445
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
446
|
+
@if (actionsTemplate) {
|
|
447
|
+
<ng-template
|
|
448
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
449
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
450
|
+
</ng-template>
|
|
451
|
+
}
|
|
452
|
+
</div>
|
|
453
|
+
}
|
|
454
|
+
}
|
|
364
455
|
<ng-template #noCallout>
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
456
|
+
@if (titleTemplate || title) {
|
|
457
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
458
|
+
@if (titleTemplate) {
|
|
459
|
+
<ng-template
|
|
460
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
461
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
369
462
|
</ng-template>
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
463
|
+
}
|
|
464
|
+
@if (title && !titleTemplate) {
|
|
465
|
+
{{ title }}
|
|
466
|
+
}
|
|
373
467
|
</div>
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
468
|
+
}
|
|
469
|
+
@if (bodyTemplate || body) {
|
|
470
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
471
|
+
@if (bodyTemplate) {
|
|
472
|
+
<ng-template
|
|
473
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
474
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
379
475
|
</ng-template>
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
476
|
+
}
|
|
477
|
+
@if (body && !bodyTemplate) {
|
|
478
|
+
{{ body }}
|
|
479
|
+
}
|
|
383
480
|
</div>
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
481
|
+
}
|
|
482
|
+
@if (actionsTemplate) {
|
|
483
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
484
|
+
@if (actionsTemplate) {
|
|
485
|
+
<ng-template
|
|
486
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
487
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
389
488
|
</ng-template>
|
|
489
|
+
}
|
|
390
490
|
</div>
|
|
491
|
+
}
|
|
391
492
|
</ng-template>
|
|
392
|
-
|
|
493
|
+
</div>
|
|
494
|
+
}
|
|
393
495
|
`,
|
|
394
496
|
standalone: true,
|
|
395
|
-
imports: [
|
|
497
|
+
imports: [NgStyle, NgClass, NgTemplateOutlet]
|
|
396
498
|
}]
|
|
397
499
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { position: [{
|
|
398
500
|
type: Input
|
|
@@ -6,7 +6,7 @@ import { Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEm
|
|
|
6
6
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { getCenterOffset, getId } from '../utils';
|
|
8
8
|
import { xIcon } from '@progress/kendo-svg-icons';
|
|
9
|
-
import {
|
|
9
|
+
import { NgTemplateOutlet, NgClass } from '@angular/common';
|
|
10
10
|
import { LocalizedMessagesDirective } from './../localization/localized-messages.directive';
|
|
11
11
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
@@ -132,7 +132,7 @@ export class TooltipContentComponent {
|
|
|
132
132
|
return styles;
|
|
133
133
|
};
|
|
134
134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
136
136
|
LocalizationService,
|
|
137
137
|
{
|
|
138
138
|
provide: L10N_PREFIX,
|
|
@@ -140,42 +140,49 @@ export class TooltipContentComponent {
|
|
|
140
140
|
}
|
|
141
141
|
], ngImport: i0, template: `
|
|
142
142
|
<ng-container kendoTooltipLocalizedMessages
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
143
|
+
i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
|
|
144
|
+
closeTitle="Close"
|
|
145
|
+
>
|
|
146
146
|
</ng-container>
|
|
147
|
-
|
|
147
|
+
|
|
148
148
|
<div class="k-tooltip-content">
|
|
149
|
-
|
|
149
|
+
@if (titleTemplate) {
|
|
150
|
+
<div class="k-tooltip-title">
|
|
151
|
+
@if (titleTemplate) {
|
|
150
152
|
<ng-template
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
153
|
+
[ngTemplateOutlet]="titleTemplate"
|
|
154
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
154
155
|
</ng-template>
|
|
156
|
+
}
|
|
155
157
|
</div>
|
|
156
|
-
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@if (templateRef) {
|
|
157
161
|
<ng-template
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
161
|
-
</ng-template>
|
|
162
|
-
<ng-template
|
|
163
|
-
[ngIf]="templateString">
|
|
164
|
-
{{ templateString }}
|
|
162
|
+
[ngTemplateOutlet]="templateRef"
|
|
163
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
165
164
|
</ng-template>
|
|
165
|
+
}
|
|
166
|
+
@if (templateString) {
|
|
167
|
+
{{ templateString }}
|
|
168
|
+
}
|
|
166
169
|
</div>
|
|
167
|
-
|
|
168
|
-
|
|
170
|
+
|
|
171
|
+
@if (closable) {
|
|
172
|
+
<div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
|
|
169
173
|
<a href="#" [attr.title]="closeButtonTitle" class="k-icon">
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
+
<kendo-icon-wrapper
|
|
175
|
+
name="x"
|
|
176
|
+
[svgIcon]="xIcon">
|
|
177
|
+
</kendo-icon-wrapper>
|
|
174
178
|
</a>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
+
</div>
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
@if (callout) {
|
|
183
|
+
<div class="k-callout" [ngClass]="calloutPositionClass()"></div>
|
|
184
|
+
}
|
|
185
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { 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"] }] });
|
|
179
186
|
}
|
|
180
187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipContentComponent, decorators: [{
|
|
181
188
|
type: Component,
|
|
@@ -183,42 +190,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
183
190
|
selector: 'kendo-tooltip',
|
|
184
191
|
template: `
|
|
185
192
|
<ng-container kendoTooltipLocalizedMessages
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
193
|
+
i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
|
|
194
|
+
closeTitle="Close"
|
|
195
|
+
>
|
|
189
196
|
</ng-container>
|
|
190
|
-
|
|
197
|
+
|
|
191
198
|
<div class="k-tooltip-content">
|
|
192
|
-
|
|
199
|
+
@if (titleTemplate) {
|
|
200
|
+
<div class="k-tooltip-title">
|
|
201
|
+
@if (titleTemplate) {
|
|
193
202
|
<ng-template
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
203
|
+
[ngTemplateOutlet]="titleTemplate"
|
|
204
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
197
205
|
</ng-template>
|
|
206
|
+
}
|
|
198
207
|
</div>
|
|
199
|
-
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
@if (templateRef) {
|
|
200
211
|
<ng-template
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
204
|
-
</ng-template>
|
|
205
|
-
<ng-template
|
|
206
|
-
[ngIf]="templateString">
|
|
207
|
-
{{ templateString }}
|
|
212
|
+
[ngTemplateOutlet]="templateRef"
|
|
213
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
208
214
|
</ng-template>
|
|
215
|
+
}
|
|
216
|
+
@if (templateString) {
|
|
217
|
+
{{ templateString }}
|
|
218
|
+
}
|
|
209
219
|
</div>
|
|
210
|
-
|
|
211
|
-
|
|
220
|
+
|
|
221
|
+
@if (closable) {
|
|
222
|
+
<div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
|
|
212
223
|
<a href="#" [attr.title]="closeButtonTitle" class="k-icon">
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
224
|
+
<kendo-icon-wrapper
|
|
225
|
+
name="x"
|
|
226
|
+
[svgIcon]="xIcon">
|
|
227
|
+
</kendo-icon-wrapper>
|
|
217
228
|
</a>
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
229
|
+
</div>
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@if (callout) {
|
|
233
|
+
<div class="k-callout" [ngClass]="calloutPositionClass()"></div>
|
|
234
|
+
}
|
|
235
|
+
`,
|
|
222
236
|
providers: [
|
|
223
237
|
LocalizationService,
|
|
224
238
|
{
|
|
@@ -227,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
227
241
|
}
|
|
228
242
|
],
|
|
229
243
|
standalone: true,
|
|
230
|
-
imports: [LocalizedMessagesDirective,
|
|
244
|
+
imports: [LocalizedMessagesDirective, NgTemplateOutlet, IconWrapperComponent, NgClass]
|
|
231
245
|
}]
|
|
232
246
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { direction: [{
|
|
233
247
|
type: HostBinding,
|
|
@@ -12,7 +12,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
|
|
|
12
12
|
import { take, auditTime, filter } from 'rxjs/operators';
|
|
13
13
|
import { Subscription, BehaviorSubject, Subject, combineLatest, fromEvent } from 'rxjs';
|
|
14
14
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
15
|
-
import {
|
|
15
|
+
import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
16
16
|
import { xIcon } from '@progress/kendo-svg-icons';
|
|
17
17
|
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
|
|
18
18
|
|
|
@@ -302,8 +302,8 @@ const packageMetadata = {
|
|
|
302
302
|
productName: 'Kendo UI for Angular',
|
|
303
303
|
productCode: 'KENDOUIANGULAR',
|
|
304
304
|
productCodes: ['KENDOUIANGULAR'],
|
|
305
|
-
publishDate:
|
|
306
|
-
version: '21.
|
|
305
|
+
publishDate: 1764593029,
|
|
306
|
+
version: '21.2.0-develop.10',
|
|
307
307
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
308
308
|
};
|
|
309
309
|
|
|
@@ -686,50 +686,101 @@ class PopoverComponent {
|
|
|
686
686
|
this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
|
|
687
687
|
}
|
|
688
688
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
689
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
690
690
|
LocalizationService,
|
|
691
691
|
{
|
|
692
692
|
provide: L10N_PREFIX,
|
|
693
693
|
useValue: 'kendo.popover'
|
|
694
694
|
}
|
|
695
695
|
], 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: `
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
696
|
+
@if (visible) {
|
|
697
|
+
<div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
|
|
698
|
+
@if (callout) {
|
|
699
|
+
<div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
|
|
700
|
+
}
|
|
701
|
+
@if (callout) {
|
|
702
|
+
<div class="k-popover-inner">
|
|
700
703
|
<ng-container *ngTemplateOutlet="noCallout"></ng-container>
|
|
701
|
-
|
|
702
|
-
|
|
704
|
+
</div>
|
|
705
|
+
} @else {
|
|
706
|
+
@if (titleTemplate || title) {
|
|
707
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
708
|
+
@if (titleTemplate) {
|
|
709
|
+
<ng-template
|
|
710
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
711
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
712
|
+
</ng-template>
|
|
713
|
+
}
|
|
714
|
+
@if (title && !titleTemplate) {
|
|
715
|
+
{{ title }}
|
|
716
|
+
}
|
|
717
|
+
</div>
|
|
718
|
+
}
|
|
719
|
+
@if (bodyTemplate || body) {
|
|
720
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
721
|
+
@if (bodyTemplate) {
|
|
722
|
+
<ng-template
|
|
723
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
724
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
725
|
+
</ng-template>
|
|
726
|
+
}
|
|
727
|
+
@if (body && !bodyTemplate) {
|
|
728
|
+
{{ body }}
|
|
729
|
+
}
|
|
730
|
+
</div>
|
|
731
|
+
}
|
|
732
|
+
@if (actionsTemplate) {
|
|
733
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
734
|
+
@if (actionsTemplate) {
|
|
735
|
+
<ng-template
|
|
736
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
737
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
738
|
+
</ng-template>
|
|
739
|
+
}
|
|
740
|
+
</div>
|
|
741
|
+
}
|
|
742
|
+
}
|
|
703
743
|
<ng-template #noCallout>
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
744
|
+
@if (titleTemplate || title) {
|
|
745
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
746
|
+
@if (titleTemplate) {
|
|
747
|
+
<ng-template
|
|
748
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
749
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
708
750
|
</ng-template>
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
751
|
+
}
|
|
752
|
+
@if (title && !titleTemplate) {
|
|
753
|
+
{{ title }}
|
|
754
|
+
}
|
|
712
755
|
</div>
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
756
|
+
}
|
|
757
|
+
@if (bodyTemplate || body) {
|
|
758
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
759
|
+
@if (bodyTemplate) {
|
|
760
|
+
<ng-template
|
|
761
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
762
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
718
763
|
</ng-template>
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
764
|
+
}
|
|
765
|
+
@if (body && !bodyTemplate) {
|
|
766
|
+
{{ body }}
|
|
767
|
+
}
|
|
722
768
|
</div>
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
769
|
+
}
|
|
770
|
+
@if (actionsTemplate) {
|
|
771
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
772
|
+
@if (actionsTemplate) {
|
|
773
|
+
<ng-template
|
|
774
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
775
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
728
776
|
</ng-template>
|
|
777
|
+
}
|
|
729
778
|
</div>
|
|
779
|
+
}
|
|
730
780
|
</ng-template>
|
|
731
|
-
|
|
732
|
-
|
|
781
|
+
</div>
|
|
782
|
+
}
|
|
783
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
733
784
|
}
|
|
734
785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
735
786
|
type: Component,
|
|
@@ -743,45 +794,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
743
794
|
}
|
|
744
795
|
],
|
|
745
796
|
template: `
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
797
|
+
@if (visible) {
|
|
798
|
+
<div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
|
|
799
|
+
@if (callout) {
|
|
800
|
+
<div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
|
|
801
|
+
}
|
|
802
|
+
@if (callout) {
|
|
803
|
+
<div class="k-popover-inner">
|
|
750
804
|
<ng-container *ngTemplateOutlet="noCallout"></ng-container>
|
|
751
|
-
|
|
752
|
-
|
|
805
|
+
</div>
|
|
806
|
+
} @else {
|
|
807
|
+
@if (titleTemplate || title) {
|
|
808
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
809
|
+
@if (titleTemplate) {
|
|
810
|
+
<ng-template
|
|
811
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
812
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
813
|
+
</ng-template>
|
|
814
|
+
}
|
|
815
|
+
@if (title && !titleTemplate) {
|
|
816
|
+
{{ title }}
|
|
817
|
+
}
|
|
818
|
+
</div>
|
|
819
|
+
}
|
|
820
|
+
@if (bodyTemplate || body) {
|
|
821
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
822
|
+
@if (bodyTemplate) {
|
|
823
|
+
<ng-template
|
|
824
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
825
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
826
|
+
</ng-template>
|
|
827
|
+
}
|
|
828
|
+
@if (body && !bodyTemplate) {
|
|
829
|
+
{{ body }}
|
|
830
|
+
}
|
|
831
|
+
</div>
|
|
832
|
+
}
|
|
833
|
+
@if (actionsTemplate) {
|
|
834
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
835
|
+
@if (actionsTemplate) {
|
|
836
|
+
<ng-template
|
|
837
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
838
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
839
|
+
</ng-template>
|
|
840
|
+
}
|
|
841
|
+
</div>
|
|
842
|
+
}
|
|
843
|
+
}
|
|
753
844
|
<ng-template #noCallout>
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
845
|
+
@if (titleTemplate || title) {
|
|
846
|
+
<div #titleTemplateWrapper class="k-popover-header">
|
|
847
|
+
@if (titleTemplate) {
|
|
848
|
+
<ng-template
|
|
849
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef"
|
|
850
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
758
851
|
</ng-template>
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
852
|
+
}
|
|
853
|
+
@if (title && !titleTemplate) {
|
|
854
|
+
{{ title }}
|
|
855
|
+
}
|
|
762
856
|
</div>
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
857
|
+
}
|
|
858
|
+
@if (bodyTemplate || body) {
|
|
859
|
+
<div #bodyTemplateWrapper class="k-popover-body">
|
|
860
|
+
@if (bodyTemplate) {
|
|
861
|
+
<ng-template
|
|
862
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
863
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
768
864
|
</ng-template>
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
865
|
+
}
|
|
866
|
+
@if (body && !bodyTemplate) {
|
|
867
|
+
{{ body }}
|
|
868
|
+
}
|
|
772
869
|
</div>
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
870
|
+
}
|
|
871
|
+
@if (actionsTemplate) {
|
|
872
|
+
<div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
|
|
873
|
+
@if (actionsTemplate) {
|
|
874
|
+
<ng-template
|
|
875
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
876
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
|
|
778
877
|
</ng-template>
|
|
878
|
+
}
|
|
779
879
|
</div>
|
|
880
|
+
}
|
|
780
881
|
</ng-template>
|
|
781
|
-
|
|
882
|
+
</div>
|
|
883
|
+
}
|
|
782
884
|
`,
|
|
783
885
|
standalone: true,
|
|
784
|
-
imports: [
|
|
886
|
+
imports: [NgStyle, NgClass, NgTemplateOutlet]
|
|
785
887
|
}]
|
|
786
888
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { position: [{
|
|
787
889
|
type: Input
|
|
@@ -1675,7 +1777,7 @@ class TooltipContentComponent {
|
|
|
1675
1777
|
return styles;
|
|
1676
1778
|
};
|
|
1677
1779
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1678
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1780
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
1679
1781
|
LocalizationService,
|
|
1680
1782
|
{
|
|
1681
1783
|
provide: L10N_PREFIX,
|
|
@@ -1683,42 +1785,49 @@ class TooltipContentComponent {
|
|
|
1683
1785
|
}
|
|
1684
1786
|
], ngImport: i0, template: `
|
|
1685
1787
|
<ng-container kendoTooltipLocalizedMessages
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1788
|
+
i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
|
|
1789
|
+
closeTitle="Close"
|
|
1790
|
+
>
|
|
1689
1791
|
</ng-container>
|
|
1690
|
-
|
|
1792
|
+
|
|
1691
1793
|
<div class="k-tooltip-content">
|
|
1692
|
-
|
|
1794
|
+
@if (titleTemplate) {
|
|
1795
|
+
<div class="k-tooltip-title">
|
|
1796
|
+
@if (titleTemplate) {
|
|
1693
1797
|
<ng-template
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1798
|
+
[ngTemplateOutlet]="titleTemplate"
|
|
1799
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1697
1800
|
</ng-template>
|
|
1801
|
+
}
|
|
1698
1802
|
</div>
|
|
1699
|
-
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
@if (templateRef) {
|
|
1700
1806
|
<ng-template
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1704
|
-
</ng-template>
|
|
1705
|
-
<ng-template
|
|
1706
|
-
[ngIf]="templateString">
|
|
1707
|
-
{{ templateString }}
|
|
1807
|
+
[ngTemplateOutlet]="templateRef"
|
|
1808
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1708
1809
|
</ng-template>
|
|
1810
|
+
}
|
|
1811
|
+
@if (templateString) {
|
|
1812
|
+
{{ templateString }}
|
|
1813
|
+
}
|
|
1709
1814
|
</div>
|
|
1710
|
-
|
|
1711
|
-
|
|
1815
|
+
|
|
1816
|
+
@if (closable) {
|
|
1817
|
+
<div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
|
|
1712
1818
|
<a href="#" [attr.title]="closeButtonTitle" class="k-icon">
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1819
|
+
<kendo-icon-wrapper
|
|
1820
|
+
name="x"
|
|
1821
|
+
[svgIcon]="xIcon">
|
|
1822
|
+
</kendo-icon-wrapper>
|
|
1717
1823
|
</a>
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1824
|
+
</div>
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
@if (callout) {
|
|
1828
|
+
<div class="k-callout" [ngClass]="calloutPositionClass()"></div>
|
|
1829
|
+
}
|
|
1830
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { 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"] }] });
|
|
1722
1831
|
}
|
|
1723
1832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipContentComponent, decorators: [{
|
|
1724
1833
|
type: Component,
|
|
@@ -1726,42 +1835,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1726
1835
|
selector: 'kendo-tooltip',
|
|
1727
1836
|
template: `
|
|
1728
1837
|
<ng-container kendoTooltipLocalizedMessages
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1838
|
+
i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
|
|
1839
|
+
closeTitle="Close"
|
|
1840
|
+
>
|
|
1732
1841
|
</ng-container>
|
|
1733
|
-
|
|
1842
|
+
|
|
1734
1843
|
<div class="k-tooltip-content">
|
|
1735
|
-
|
|
1844
|
+
@if (titleTemplate) {
|
|
1845
|
+
<div class="k-tooltip-title">
|
|
1846
|
+
@if (titleTemplate) {
|
|
1736
1847
|
<ng-template
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1848
|
+
[ngTemplateOutlet]="titleTemplate"
|
|
1849
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1740
1850
|
</ng-template>
|
|
1851
|
+
}
|
|
1741
1852
|
</div>
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
[ngTemplateOutlet]="templateRef"
|
|
1746
|
-
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1747
|
-
</ng-template>
|
|
1853
|
+
}
|
|
1854
|
+
|
|
1855
|
+
@if (templateRef) {
|
|
1748
1856
|
<ng-template
|
|
1749
|
-
|
|
1750
|
-
|
|
1857
|
+
[ngTemplateOutlet]="templateRef"
|
|
1858
|
+
[ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
|
|
1751
1859
|
</ng-template>
|
|
1860
|
+
}
|
|
1861
|
+
@if (templateString) {
|
|
1862
|
+
{{ templateString }}
|
|
1863
|
+
}
|
|
1752
1864
|
</div>
|
|
1753
|
-
|
|
1754
|
-
|
|
1865
|
+
|
|
1866
|
+
@if (closable) {
|
|
1867
|
+
<div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
|
|
1755
1868
|
<a href="#" [attr.title]="closeButtonTitle" class="k-icon">
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1869
|
+
<kendo-icon-wrapper
|
|
1870
|
+
name="x"
|
|
1871
|
+
[svgIcon]="xIcon">
|
|
1872
|
+
</kendo-icon-wrapper>
|
|
1760
1873
|
</a>
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1874
|
+
</div>
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
@if (callout) {
|
|
1878
|
+
<div class="k-callout" [ngClass]="calloutPositionClass()"></div>
|
|
1879
|
+
}
|
|
1880
|
+
`,
|
|
1765
1881
|
providers: [
|
|
1766
1882
|
LocalizationService,
|
|
1767
1883
|
{
|
|
@@ -1770,7 +1886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1770
1886
|
}
|
|
1771
1887
|
],
|
|
1772
1888
|
standalone: true,
|
|
1773
|
-
imports: [LocalizedMessagesDirective,
|
|
1889
|
+
imports: [LocalizedMessagesDirective, NgTemplateOutlet, IconWrapperComponent, NgClass]
|
|
1774
1890
|
}]
|
|
1775
1891
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { direction: [{
|
|
1776
1892
|
type: HostBinding,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-tooltip",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.2.0-develop.10",
|
|
4
4
|
"description": "Kendo UI Tooltip for Angular - A highly customizable and easily themeable tooltip from the creators developers trust for professional Angular components.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"package": {
|
|
22
22
|
"productName": "Kendo UI for Angular",
|
|
23
23
|
"productCode": "KENDOUIANGULAR",
|
|
24
|
-
"publishDate":
|
|
24
|
+
"publishDate": 1764593029,
|
|
25
25
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
@@ -31,15 +31,15 @@
|
|
|
31
31
|
"@angular/core": "18 - 21",
|
|
32
32
|
"@angular/platform-browser": "18 - 21",
|
|
33
33
|
"@progress/kendo-licensing": "^1.7.0",
|
|
34
|
-
"@progress/kendo-angular-common": "21.
|
|
35
|
-
"@progress/kendo-angular-l10n": "21.
|
|
36
|
-
"@progress/kendo-angular-popup": "21.
|
|
37
|
-
"@progress/kendo-angular-icons": "21.
|
|
34
|
+
"@progress/kendo-angular-common": "21.2.0-develop.10",
|
|
35
|
+
"@progress/kendo-angular-l10n": "21.2.0-develop.10",
|
|
36
|
+
"@progress/kendo-angular-popup": "21.2.0-develop.10",
|
|
37
|
+
"@progress/kendo-angular-icons": "21.2.0-develop.10",
|
|
38
38
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"tslib": "^2.3.1",
|
|
42
|
-
"@progress/kendo-angular-schematics": "21.
|
|
42
|
+
"@progress/kendo-angular-schematics": "21.2.0-develop.10"
|
|
43
43
|
},
|
|
44
44
|
"schematics": "./schematics/collection.json",
|
|
45
45
|
"module": "fesm2022/progress-kendo-angular-tooltip.mjs",
|