@progress/kendo-angular-buttons 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.
- package/esm2022/button/button.component.mjs +47 -29
- package/esm2022/buttongroup/buttongroup.component.mjs +2 -2
- package/esm2022/chip/chip-list.component.mjs +2 -2
- package/esm2022/chip/chip.component.mjs +107 -87
- package/esm2022/dropdownbutton/dropdownbutton.component.mjs +2 -2
- package/esm2022/floatingactionbutton/dial-item.component.mjs +39 -29
- package/esm2022/floatingactionbutton/dial-list.component.mjs +31 -31
- package/esm2022/floatingactionbutton/floatingactionbutton.component.mjs +99 -89
- package/esm2022/listbutton/list-button.mjs +2 -2
- package/esm2022/listbutton/list.component.mjs +93 -83
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/splitbutton/splitbutton.component.mjs +101 -97
- package/fesm2022/progress-kendo-angular-buttons.mjs +516 -444
- package/package.json +7 -7
|
@@ -6,14 +6,14 @@ import * as i0 from '@angular/core';
|
|
|
6
6
|
import { Injectable, isDevMode, EventEmitter, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, NgModule } from '@angular/core';
|
|
7
7
|
import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
|
|
8
8
|
import * as i12 from '@progress/kendo-angular-common';
|
|
9
|
-
import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers,
|
|
9
|
+
import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
|
|
10
10
|
export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
|
|
11
11
|
import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon } from '@progress/kendo-svg-icons';
|
|
12
12
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
13
13
|
import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
|
|
14
14
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
15
15
|
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
|
|
16
|
-
import {
|
|
16
|
+
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
17
17
|
import { filter, tap, take } from 'rxjs/operators';
|
|
18
18
|
import * as i3 from '@progress/kendo-angular-popup';
|
|
19
19
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
@@ -45,8 +45,8 @@ const packageMetadata = {
|
|
|
45
45
|
productName: 'Kendo UI for Angular',
|
|
46
46
|
productCode: 'KENDOUIANGULAR',
|
|
47
47
|
productCodes: ['KENDOUIANGULAR'],
|
|
48
|
-
publishDate:
|
|
49
|
-
version: '21.
|
|
48
|
+
publishDate: 1764592806,
|
|
49
|
+
version: '21.2.0-develop.10',
|
|
50
50
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
51
51
|
};
|
|
52
52
|
|
|
@@ -554,31 +554,40 @@ class ButtonComponent {
|
|
|
554
554
|
}
|
|
555
555
|
}
|
|
556
556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
|
|
558
558
|
LocalizationService,
|
|
559
559
|
{
|
|
560
560
|
provide: L10N_PREFIX,
|
|
561
561
|
useValue: 'kendo.button'
|
|
562
562
|
}
|
|
563
563
|
], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
|
|
564
|
-
|
|
565
|
-
|
|
564
|
+
@if (icon || svgIcon) {
|
|
565
|
+
<kendo-icon-wrapper
|
|
566
566
|
innerCssClass="k-button-icon"
|
|
567
567
|
[name]="icon"
|
|
568
|
-
|
|
569
|
-
|
|
568
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
569
|
+
}
|
|
570
|
+
@if (imageUrl) {
|
|
571
|
+
<span class="k-button-icon k-icon">
|
|
570
572
|
<img [src]="imageUrl" class="k-image" role="presentation" />
|
|
571
|
-
|
|
572
|
-
|
|
573
|
+
</span>
|
|
574
|
+
}
|
|
575
|
+
@if (iconClass) {
|
|
576
|
+
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
577
|
+
}
|
|
573
578
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
574
|
-
|
|
575
|
-
|
|
579
|
+
@if ($any(arrowIcon).iconClass) {
|
|
580
|
+
<span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
|
|
581
|
+
}
|
|
582
|
+
@if (arrowIcon && !$any(arrowIcon).iconClass) {
|
|
583
|
+
<span class="k-button-arrow">
|
|
576
584
|
<kendo-icon-wrapper
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
585
|
+
[name]="$any(arrowIcon).icon || 'caret-alt-down'"
|
|
586
|
+
[svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
|
|
587
|
+
</span>
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
582
591
|
}
|
|
583
592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
584
593
|
type: Component,
|
|
@@ -593,26 +602,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
593
602
|
],
|
|
594
603
|
selector: 'button[kendoButton]',
|
|
595
604
|
template: `
|
|
596
|
-
|
|
597
|
-
|
|
605
|
+
@if (icon || svgIcon) {
|
|
606
|
+
<kendo-icon-wrapper
|
|
598
607
|
innerCssClass="k-button-icon"
|
|
599
608
|
[name]="icon"
|
|
600
|
-
|
|
601
|
-
|
|
609
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
610
|
+
}
|
|
611
|
+
@if (imageUrl) {
|
|
612
|
+
<span class="k-button-icon k-icon">
|
|
602
613
|
<img [src]="imageUrl" class="k-image" role="presentation" />
|
|
603
|
-
|
|
604
|
-
|
|
614
|
+
</span>
|
|
615
|
+
}
|
|
616
|
+
@if (iconClass) {
|
|
617
|
+
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
618
|
+
}
|
|
605
619
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
606
|
-
|
|
607
|
-
|
|
620
|
+
@if ($any(arrowIcon).iconClass) {
|
|
621
|
+
<span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
|
|
622
|
+
}
|
|
623
|
+
@if (arrowIcon && !$any(arrowIcon).iconClass) {
|
|
624
|
+
<span class="k-button-arrow">
|
|
608
625
|
<kendo-icon-wrapper
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
626
|
+
[name]="$any(arrowIcon).icon || 'caret-alt-down'"
|
|
627
|
+
[svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
|
|
628
|
+
</span>
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
`,
|
|
614
632
|
standalone: true,
|
|
615
|
-
imports: [
|
|
633
|
+
imports: [IconWrapperComponent, NgClass]
|
|
616
634
|
}]
|
|
617
635
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: KendoButtonService, decorators: [{
|
|
618
636
|
type: Optional
|
|
@@ -877,7 +895,7 @@ class ButtonGroupComponent {
|
|
|
877
895
|
const firstIndex = 0;
|
|
878
896
|
const lastIndex = navigationButtons.length - 1;
|
|
879
897
|
const eventArgs = new PreventableEvent();
|
|
880
|
-
const code =
|
|
898
|
+
const code = normalizeKeys(event);
|
|
881
899
|
if (code === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
882
900
|
this.navigate.emit(eventArgs);
|
|
883
901
|
if (!eventArgs.isDefaultPrevented()) {
|
|
@@ -1356,7 +1374,7 @@ class ChipComponent {
|
|
|
1356
1374
|
}
|
|
1357
1375
|
}
|
|
1358
1376
|
keyDownHandler(e) {
|
|
1359
|
-
const code =
|
|
1377
|
+
const code = normalizeKeys(e);
|
|
1360
1378
|
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
1361
1379
|
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
1362
1380
|
if (this.disabled) {
|
|
@@ -1374,129 +1392,149 @@ class ChipComponent {
|
|
|
1374
1392
|
}
|
|
1375
1393
|
}
|
|
1376
1394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
|
|
1378
1396
|
LocalizationService,
|
|
1379
1397
|
{
|
|
1380
1398
|
provide: L10N_PREFIX,
|
|
1381
1399
|
useValue: 'kendo.chip'
|
|
1382
1400
|
}
|
|
1383
1401
|
], usesOnChanges: true, ngImport: i0, template: `
|
|
1384
|
-
|
|
1385
|
-
|
|
1402
|
+
@if (icon || svgIcon) {
|
|
1403
|
+
<kendo-icon-wrapper
|
|
1386
1404
|
size="small"
|
|
1387
1405
|
innerCssClass="k-chip-icon"
|
|
1388
1406
|
[name]="icon"
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1407
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
@if (iconClass) {
|
|
1411
|
+
<kendo-icon-wrapper
|
|
1393
1412
|
size="small"
|
|
1394
1413
|
innerCssClass="k-chip-icon"
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1414
|
+
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
1415
|
+
}
|
|
1416
|
+
@if (avatarSettings) {
|
|
1417
|
+
<span
|
|
1398
1418
|
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
1399
1419
|
[ngStyle]="avatarSettings.cssStyle">
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1420
|
+
@if (avatarSettings?.imageSrc) {
|
|
1421
|
+
<span class="k-avatar-image">
|
|
1422
|
+
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
1423
|
+
</span>
|
|
1424
|
+
}
|
|
1425
|
+
@if (avatarSettings?.initials) {
|
|
1426
|
+
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
1427
|
+
}
|
|
1428
|
+
</span>
|
|
1429
|
+
}
|
|
1430
|
+
|
|
1411
1431
|
<span class="k-chip-content">
|
|
1412
|
-
|
|
1413
|
-
|
|
1432
|
+
@if (label) {
|
|
1433
|
+
<span class="k-chip-label">
|
|
1434
|
+
{{ label }}
|
|
1414
1435
|
</span>
|
|
1415
|
-
|
|
1436
|
+
}
|
|
1437
|
+
@if (!label) {
|
|
1438
|
+
<ng-content></ng-content>
|
|
1439
|
+
}
|
|
1416
1440
|
</span>
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1441
|
+
|
|
1442
|
+
@if (hasMenu || removable) {
|
|
1443
|
+
<span class="k-chip-actions">
|
|
1444
|
+
@if (hasMenu) {
|
|
1445
|
+
<span class="k-chip-action k-chip-more-action"
|
|
1421
1446
|
(click)="onMenuClick($event)">
|
|
1422
1447
|
<kendo-icon-wrapper
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1448
|
+
name="more-vertical"
|
|
1449
|
+
size="small"
|
|
1450
|
+
[svgIcon]="defaultMenuIcon || menuSvgIcon"
|
|
1451
|
+
[customFontClass]="menuIcon"></kendo-icon-wrapper>
|
|
1452
|
+
</span>
|
|
1453
|
+
}
|
|
1454
|
+
@if (removable) {
|
|
1455
|
+
<span class="k-chip-action k-chip-remove-action"
|
|
1430
1456
|
(click)="onRemoveClick($event)">
|
|
1431
1457
|
<kendo-icon-wrapper
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1458
|
+
name="x-circle"
|
|
1459
|
+
size="small"
|
|
1460
|
+
[svgIcon]="removeSvgIcon || defaultRemoveIcon"
|
|
1461
|
+
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
1462
|
+
</span>
|
|
1463
|
+
}
|
|
1464
|
+
</span>
|
|
1465
|
+
}
|
|
1466
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
1439
1467
|
}
|
|
1440
1468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, decorators: [{
|
|
1441
1469
|
type: Component,
|
|
1442
1470
|
args: [{
|
|
1443
1471
|
selector: 'kendo-chip',
|
|
1444
1472
|
template: `
|
|
1445
|
-
|
|
1446
|
-
|
|
1473
|
+
@if (icon || svgIcon) {
|
|
1474
|
+
<kendo-icon-wrapper
|
|
1447
1475
|
size="small"
|
|
1448
1476
|
innerCssClass="k-chip-icon"
|
|
1449
1477
|
[name]="icon"
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1478
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
@if (iconClass) {
|
|
1482
|
+
<kendo-icon-wrapper
|
|
1454
1483
|
size="small"
|
|
1455
1484
|
innerCssClass="k-chip-icon"
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1485
|
+
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
1486
|
+
}
|
|
1487
|
+
@if (avatarSettings) {
|
|
1488
|
+
<span
|
|
1459
1489
|
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
1460
1490
|
[ngStyle]="avatarSettings.cssStyle">
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1491
|
+
@if (avatarSettings?.imageSrc) {
|
|
1492
|
+
<span class="k-avatar-image">
|
|
1493
|
+
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
1494
|
+
</span>
|
|
1495
|
+
}
|
|
1496
|
+
@if (avatarSettings?.initials) {
|
|
1497
|
+
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
1498
|
+
}
|
|
1499
|
+
</span>
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1472
1502
|
<span class="k-chip-content">
|
|
1473
|
-
|
|
1474
|
-
|
|
1503
|
+
@if (label) {
|
|
1504
|
+
<span class="k-chip-label">
|
|
1505
|
+
{{ label }}
|
|
1475
1506
|
</span>
|
|
1476
|
-
|
|
1507
|
+
}
|
|
1508
|
+
@if (!label) {
|
|
1509
|
+
<ng-content></ng-content>
|
|
1510
|
+
}
|
|
1477
1511
|
</span>
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1512
|
+
|
|
1513
|
+
@if (hasMenu || removable) {
|
|
1514
|
+
<span class="k-chip-actions">
|
|
1515
|
+
@if (hasMenu) {
|
|
1516
|
+
<span class="k-chip-action k-chip-more-action"
|
|
1482
1517
|
(click)="onMenuClick($event)">
|
|
1483
1518
|
<kendo-icon-wrapper
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1519
|
+
name="more-vertical"
|
|
1520
|
+
size="small"
|
|
1521
|
+
[svgIcon]="defaultMenuIcon || menuSvgIcon"
|
|
1522
|
+
[customFontClass]="menuIcon"></kendo-icon-wrapper>
|
|
1523
|
+
</span>
|
|
1524
|
+
}
|
|
1525
|
+
@if (removable) {
|
|
1526
|
+
<span class="k-chip-action k-chip-remove-action"
|
|
1491
1527
|
(click)="onRemoveClick($event)">
|
|
1492
1528
|
<kendo-icon-wrapper
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1529
|
+
name="x-circle"
|
|
1530
|
+
size="small"
|
|
1531
|
+
[svgIcon]="removeSvgIcon || defaultRemoveIcon"
|
|
1532
|
+
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
1533
|
+
</span>
|
|
1534
|
+
}
|
|
1535
|
+
</span>
|
|
1536
|
+
}
|
|
1537
|
+
`,
|
|
1500
1538
|
providers: [
|
|
1501
1539
|
LocalizationService,
|
|
1502
1540
|
{
|
|
@@ -1505,7 +1543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1505
1543
|
}
|
|
1506
1544
|
],
|
|
1507
1545
|
standalone: true,
|
|
1508
|
-
imports: [
|
|
1546
|
+
imports: [NgStyle, IconWrapperComponent]
|
|
1509
1547
|
}]
|
|
1510
1548
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { label: [{
|
|
1511
1549
|
type: Input
|
|
@@ -1755,7 +1793,7 @@ class ChipListComponent {
|
|
|
1755
1793
|
}
|
|
1756
1794
|
keyDownHandler(e) {
|
|
1757
1795
|
// on some keyboards, arrow keys, page up/down, home/end, Enter are mapped to numpad keys
|
|
1758
|
-
const code =
|
|
1796
|
+
const code = normalizeKeys(e);
|
|
1759
1797
|
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
1760
1798
|
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
1761
1799
|
const isLeftArrow = code === Keys.ArrowLeft;
|
|
@@ -2239,52 +2277,57 @@ class ListComponent {
|
|
|
2239
2277
|
this.onItemBlur.emit();
|
|
2240
2278
|
}
|
|
2241
2279
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2242
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
|
|
2243
2281
|
<ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
|
|
2282
|
+
@for (dataItem of data; track dataItem; let index = $index) {
|
|
2244
2283
|
<li kendoButtonFocusable
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
<
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
<
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2284
|
+
[index]="index"
|
|
2285
|
+
tabindex="-1"
|
|
2286
|
+
class="k-item k-menu-item"
|
|
2287
|
+
role="listitem"
|
|
2288
|
+
[attr.aria-disabled]="dataItem.disabled ? true : false"
|
|
2289
|
+
(click)="$event.stopImmediatePropagation(); onClick(index);"
|
|
2290
|
+
(blur)="onBlur()">
|
|
2291
|
+
@if (itemTemplate?.templateRef) {
|
|
2292
|
+
<span
|
|
2293
|
+
class="k-link k-menu-link"
|
|
2294
|
+
[class.k-disabled]="dataItem.disabled"
|
|
2295
|
+
[ngClass]="dataItem.cssClass">
|
|
2296
|
+
<ng-template
|
|
2297
|
+
[templateContext]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
|
|
2298
|
+
></ng-template>
|
|
2299
|
+
</span>
|
|
2300
|
+
}
|
|
2301
|
+
@if (!itemTemplate?.templateRef) {
|
|
2302
|
+
<span
|
|
2303
|
+
class="k-link k-menu-link"
|
|
2304
|
+
[class.k-disabled]="dataItem.disabled"
|
|
2305
|
+
[ngClass]="dataItem.cssClass">
|
|
2306
|
+
@if (dataItem.icon || dataItem.iconClass || dataItem.svgIcon) {
|
|
2307
|
+
<kendo-icon-wrapper
|
|
2308
|
+
[name]="dataItem.icon"
|
|
2309
|
+
[svgIcon]="dataItem.svgIcon"
|
|
2310
|
+
[customFontClass]="dataItem.iconClass"
|
|
2311
|
+
></kendo-icon-wrapper>
|
|
2312
|
+
}
|
|
2313
|
+
@if (dataItem.imageUrl) {
|
|
2314
|
+
<img
|
|
2315
|
+
class="k-image"
|
|
2316
|
+
[src]="dataItem.imageUrl"
|
|
2317
|
+
[alt]="dataItem.imageAlt"
|
|
2318
|
+
>
|
|
2319
|
+
}
|
|
2320
|
+
@if (getText(dataItem)) {
|
|
2321
|
+
<span class="k-menu-link-text">
|
|
2322
|
+
{{ getText(dataItem) }}
|
|
2283
2323
|
</span>
|
|
2284
|
-
|
|
2324
|
+
}
|
|
2325
|
+
</span>
|
|
2326
|
+
}
|
|
2285
2327
|
</li>
|
|
2328
|
+
}
|
|
2286
2329
|
</ul>
|
|
2287
|
-
|
|
2330
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
2288
2331
|
}
|
|
2289
2332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
|
|
2290
2333
|
type: Component,
|
|
@@ -2292,52 +2335,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2292
2335
|
selector: 'kendo-button-list',
|
|
2293
2336
|
template: `
|
|
2294
2337
|
<ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
|
|
2338
|
+
@for (dataItem of data; track dataItem; let index = $index) {
|
|
2295
2339
|
<li kendoButtonFocusable
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
<
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
<
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2340
|
+
[index]="index"
|
|
2341
|
+
tabindex="-1"
|
|
2342
|
+
class="k-item k-menu-item"
|
|
2343
|
+
role="listitem"
|
|
2344
|
+
[attr.aria-disabled]="dataItem.disabled ? true : false"
|
|
2345
|
+
(click)="$event.stopImmediatePropagation(); onClick(index);"
|
|
2346
|
+
(blur)="onBlur()">
|
|
2347
|
+
@if (itemTemplate?.templateRef) {
|
|
2348
|
+
<span
|
|
2349
|
+
class="k-link k-menu-link"
|
|
2350
|
+
[class.k-disabled]="dataItem.disabled"
|
|
2351
|
+
[ngClass]="dataItem.cssClass">
|
|
2352
|
+
<ng-template
|
|
2353
|
+
[templateContext]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
|
|
2354
|
+
></ng-template>
|
|
2355
|
+
</span>
|
|
2356
|
+
}
|
|
2357
|
+
@if (!itemTemplate?.templateRef) {
|
|
2358
|
+
<span
|
|
2359
|
+
class="k-link k-menu-link"
|
|
2360
|
+
[class.k-disabled]="dataItem.disabled"
|
|
2361
|
+
[ngClass]="dataItem.cssClass">
|
|
2362
|
+
@if (dataItem.icon || dataItem.iconClass || dataItem.svgIcon) {
|
|
2363
|
+
<kendo-icon-wrapper
|
|
2364
|
+
[name]="dataItem.icon"
|
|
2365
|
+
[svgIcon]="dataItem.svgIcon"
|
|
2366
|
+
[customFontClass]="dataItem.iconClass"
|
|
2367
|
+
></kendo-icon-wrapper>
|
|
2368
|
+
}
|
|
2369
|
+
@if (dataItem.imageUrl) {
|
|
2370
|
+
<img
|
|
2371
|
+
class="k-image"
|
|
2372
|
+
[src]="dataItem.imageUrl"
|
|
2373
|
+
[alt]="dataItem.imageAlt"
|
|
2374
|
+
>
|
|
2375
|
+
}
|
|
2376
|
+
@if (getText(dataItem)) {
|
|
2377
|
+
<span class="k-menu-link-text">
|
|
2378
|
+
{{ getText(dataItem) }}
|
|
2334
2379
|
</span>
|
|
2335
|
-
|
|
2380
|
+
}
|
|
2381
|
+
</span>
|
|
2382
|
+
}
|
|
2336
2383
|
</li>
|
|
2384
|
+
}
|
|
2337
2385
|
</ul>
|
|
2338
|
-
|
|
2386
|
+
`,
|
|
2339
2387
|
standalone: true,
|
|
2340
|
-
imports: [NgClass,
|
|
2388
|
+
imports: [NgClass, FocusableDirective, TemplateContextDirective, IconWrapperComponent]
|
|
2341
2389
|
}]
|
|
2342
2390
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
2343
2391
|
type: Input
|
|
@@ -2611,7 +2659,7 @@ class ListButton extends MultiTabStop {
|
|
|
2611
2659
|
eventData.stopImmediatePropagation();
|
|
2612
2660
|
}
|
|
2613
2661
|
const focused = this.focusService.focused || 0;
|
|
2614
|
-
const code =
|
|
2662
|
+
const code = normalizeKeys(eventData);
|
|
2615
2663
|
const action = this.navigationService.process({
|
|
2616
2664
|
altKey: eventData.altKey,
|
|
2617
2665
|
current: focused,
|
|
@@ -2927,7 +2975,7 @@ class DropDownButtonComponent extends ListButton {
|
|
|
2927
2975
|
*/
|
|
2928
2976
|
keydown(event) {
|
|
2929
2977
|
this.keyDownHandler(event, true);
|
|
2930
|
-
const code =
|
|
2978
|
+
const code = normalizeKeys(event);
|
|
2931
2979
|
if (code === Keys.Space) {
|
|
2932
2980
|
this._active = true;
|
|
2933
2981
|
}
|
|
@@ -3434,23 +3482,28 @@ class DialItemComponent {
|
|
|
3434
3482
|
return directions[dir][align];
|
|
3435
3483
|
}
|
|
3436
3484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3438
|
-
|
|
3485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
|
|
3486
|
+
@if (dialItemTemplate) {
|
|
3487
|
+
<ng-template
|
|
3439
3488
|
[ngTemplateOutlet]="dialItemTemplate"
|
|
3440
3489
|
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3490
|
+
>
|
|
3491
|
+
</ng-template>
|
|
3492
|
+
}
|
|
3493
|
+
|
|
3494
|
+
@if (!dialItemTemplate) {
|
|
3495
|
+
@if (item.label) {
|
|
3496
|
+
<span class="k-fab-item-text">{{ item.label }}</span>
|
|
3497
|
+
}
|
|
3498
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
3446
3499
|
<kendo-icon-wrapper
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3500
|
+
[name]="item.icon"
|
|
3501
|
+
innerCssClass="k-fab-item-icon"
|
|
3502
|
+
[customFontClass]="item.iconClass"
|
|
3503
|
+
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
3504
|
+
}
|
|
3505
|
+
}
|
|
3506
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
3454
3507
|
}
|
|
3455
3508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialItemComponent, decorators: [{
|
|
3456
3509
|
type: Component,
|
|
@@ -3458,24 +3511,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3458
3511
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
3459
3512
|
selector: '[kendoDialItem]',
|
|
3460
3513
|
template: `
|
|
3461
|
-
|
|
3514
|
+
@if (dialItemTemplate) {
|
|
3515
|
+
<ng-template
|
|
3462
3516
|
[ngTemplateOutlet]="dialItemTemplate"
|
|
3463
3517
|
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3518
|
+
>
|
|
3519
|
+
</ng-template>
|
|
3520
|
+
}
|
|
3521
|
+
|
|
3522
|
+
@if (!dialItemTemplate) {
|
|
3523
|
+
@if (item.label) {
|
|
3524
|
+
<span class="k-fab-item-text">{{ item.label }}</span>
|
|
3525
|
+
}
|
|
3526
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
3469
3527
|
<kendo-icon-wrapper
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3528
|
+
[name]="item.icon"
|
|
3529
|
+
innerCssClass="k-fab-item-icon"
|
|
3530
|
+
[customFontClass]="item.iconClass"
|
|
3531
|
+
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
3532
|
+
}
|
|
3533
|
+
}
|
|
3534
|
+
`,
|
|
3477
3535
|
standalone: true,
|
|
3478
|
-
imports: [
|
|
3536
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
3479
3537
|
}]
|
|
3480
3538
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
|
|
3481
3539
|
type: HostBinding,
|
|
@@ -3543,22 +3601,22 @@ class DialListComponent {
|
|
|
3543
3601
|
this.subscriptions.unsubscribe();
|
|
3544
3602
|
}
|
|
3545
3603
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3547
|
-
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
|
|
3605
|
+
@for (item of dialItems; track item; let idx = $index) {
|
|
3606
|
+
<li
|
|
3607
|
+
kendoButtonFocusable
|
|
3608
|
+
kendoDialItem
|
|
3609
|
+
[item]="dialItems[idx]"
|
|
3610
|
+
[index]="idx"
|
|
3611
|
+
[dialItemTemplate]="dialItemTemplate"
|
|
3612
|
+
[isFocused]="isFocused(idx)"
|
|
3613
|
+
[ngClass]='item.cssClass'
|
|
3614
|
+
[ngStyle]='item.cssStyle'
|
|
3615
|
+
[align]="align"
|
|
3558
3616
|
>
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3617
|
+
</li>
|
|
3618
|
+
}
|
|
3619
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3562
3620
|
}
|
|
3563
3621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialListComponent, decorators: [{
|
|
3564
3622
|
type: Component,
|
|
@@ -3566,23 +3624,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3566
3624
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
3567
3625
|
selector: '[kendoDialList]',
|
|
3568
3626
|
template: `
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3627
|
+
@for (item of dialItems; track item; let idx = $index) {
|
|
3628
|
+
<li
|
|
3629
|
+
kendoButtonFocusable
|
|
3630
|
+
kendoDialItem
|
|
3631
|
+
[item]="dialItems[idx]"
|
|
3632
|
+
[index]="idx"
|
|
3633
|
+
[dialItemTemplate]="dialItemTemplate"
|
|
3634
|
+
[isFocused]="isFocused(idx)"
|
|
3635
|
+
[ngClass]='item.cssClass'
|
|
3636
|
+
[ngStyle]='item.cssStyle'
|
|
3637
|
+
[align]="align"
|
|
3580
3638
|
>
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3639
|
+
</li>
|
|
3640
|
+
}
|
|
3641
|
+
`,
|
|
3584
3642
|
standalone: true,
|
|
3585
|
-
imports: [
|
|
3643
|
+
imports: [FocusableDirective, DialItemComponent, NgClass, NgStyle]
|
|
3586
3644
|
}]
|
|
3587
3645
|
}], ctorParameters: () => [{ type: FocusService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
|
|
3588
3646
|
type: HostBinding,
|
|
@@ -3959,7 +4017,7 @@ class FloatingActionButtonComponent {
|
|
|
3959
4017
|
return;
|
|
3960
4018
|
}
|
|
3961
4019
|
const focused = this.focusService.focused || 0;
|
|
3962
|
-
const code =
|
|
4020
|
+
const code = normalizeKeys(event);
|
|
3963
4021
|
const action = this.navigationService.process({
|
|
3964
4022
|
altKey: event.altKey,
|
|
3965
4023
|
current: focused,
|
|
@@ -4302,7 +4360,7 @@ class FloatingActionButtonComponent {
|
|
|
4302
4360
|
return DEFAULT_DURATION;
|
|
4303
4361
|
}
|
|
4304
4362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
|
|
4306
4364
|
FocusService,
|
|
4307
4365
|
NavigationService,
|
|
4308
4366
|
NAVIGATION_SETTINGS_PROVIDER$1,
|
|
@@ -4313,62 +4371,67 @@ class FloatingActionButtonComponent {
|
|
|
4313
4371
|
}
|
|
4314
4372
|
], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
|
|
4315
4373
|
<button
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4374
|
+
#button
|
|
4375
|
+
[attr.id]="id"
|
|
4376
|
+
[tabIndex]="componentTabIndex"
|
|
4377
|
+
type="button"
|
|
4378
|
+
class="k-fab k-fab-solid"
|
|
4379
|
+
[class.k-disabled]="disabled"
|
|
4380
|
+
[ngClass]="buttonClass"
|
|
4381
|
+
[disabled]="disabled"
|
|
4382
|
+
[attr.aria-disabled]="disabled"
|
|
4383
|
+
[attr.aria-expanded]="ariaExpanded"
|
|
4384
|
+
[attr.aria-haspopup]="ariaHasPopup"
|
|
4385
|
+
[attr.aria-controls]="ariaControls"
|
|
4386
|
+
(focus)="focusHandler()"
|
|
4387
|
+
(blur)="blurHandler($event)"
|
|
4330
4388
|
[kendoEventsOutsideAngular]="{
|
|
4331
4389
|
keydown: keyDownHandler,
|
|
4332
4390
|
click: clickHandler,
|
|
4333
4391
|
pointerdown: pointerdownHandler
|
|
4334
4392
|
}"
|
|
4335
|
-
|
|
4336
|
-
|
|
4337
|
-
|
|
4338
|
-
|
|
4339
|
-
|
|
4393
|
+
[scope]="this"
|
|
4394
|
+
>
|
|
4395
|
+
@if (fabTemplate) {
|
|
4396
|
+
<ng-template
|
|
4397
|
+
[ngTemplateOutlet]="fabTemplate?.templateRef"
|
|
4398
|
+
>
|
|
4340
4399
|
</ng-template>
|
|
4341
|
-
|
|
4342
|
-
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
|
|
4348
|
-
|
|
4349
|
-
|
|
4350
|
-
|
|
4400
|
+
}
|
|
4401
|
+
|
|
4402
|
+
@if (!fabTemplate) {
|
|
4403
|
+
@if (icon || iconClass || svgIcon) {
|
|
4404
|
+
<kendo-icon-wrapper
|
|
4405
|
+
[name]="icon"
|
|
4406
|
+
innerCssClass="k-fab-icon"
|
|
4407
|
+
[customFontClass]="iconClass"
|
|
4408
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
4409
|
+
}
|
|
4410
|
+
@if (text) {
|
|
4411
|
+
<span class="k-fab-text">{{ text }}</span>
|
|
4412
|
+
}
|
|
4413
|
+
}
|
|
4351
4414
|
</button>
|
|
4352
|
-
|
|
4415
|
+
|
|
4353
4416
|
<ng-template #popupTemplate>
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
|
|
4417
|
+
<ul
|
|
4418
|
+
kendoDialList
|
|
4419
|
+
role="menu"
|
|
4420
|
+
[id]="dialListId"
|
|
4421
|
+
[ngClass]="dialClass"
|
|
4422
|
+
[dialItems]="dialItems"
|
|
4423
|
+
[dialItemTemplate]='dialItemTemplate?.templateRef'
|
|
4424
|
+
[align]="align"
|
|
4425
|
+
[attr.aria-labelledby]="id"
|
|
4426
|
+
(click)="onItemClick($event)"
|
|
4364
4427
|
[kendoEventsOutsideAngular]="{
|
|
4365
4428
|
keydown: keyDownHandler.bind(this),
|
|
4366
4429
|
focusout: focusOutHandler.bind(this)
|
|
4367
4430
|
}"
|
|
4368
4431
|
>
|
|
4369
|
-
|
|
4432
|
+
</ul>
|
|
4370
4433
|
</ng-template>
|
|
4371
|
-
|
|
4434
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }] });
|
|
4372
4435
|
}
|
|
4373
4436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
|
|
4374
4437
|
type: Component,
|
|
@@ -4386,64 +4449,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
4386
4449
|
],
|
|
4387
4450
|
template: `
|
|
4388
4451
|
<button
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4392
|
-
|
|
4393
|
-
|
|
4394
|
-
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4402
|
-
|
|
4452
|
+
#button
|
|
4453
|
+
[attr.id]="id"
|
|
4454
|
+
[tabIndex]="componentTabIndex"
|
|
4455
|
+
type="button"
|
|
4456
|
+
class="k-fab k-fab-solid"
|
|
4457
|
+
[class.k-disabled]="disabled"
|
|
4458
|
+
[ngClass]="buttonClass"
|
|
4459
|
+
[disabled]="disabled"
|
|
4460
|
+
[attr.aria-disabled]="disabled"
|
|
4461
|
+
[attr.aria-expanded]="ariaExpanded"
|
|
4462
|
+
[attr.aria-haspopup]="ariaHasPopup"
|
|
4463
|
+
[attr.aria-controls]="ariaControls"
|
|
4464
|
+
(focus)="focusHandler()"
|
|
4465
|
+
(blur)="blurHandler($event)"
|
|
4403
4466
|
[kendoEventsOutsideAngular]="{
|
|
4404
4467
|
keydown: keyDownHandler,
|
|
4405
4468
|
click: clickHandler,
|
|
4406
4469
|
pointerdown: pointerdownHandler
|
|
4407
4470
|
}"
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4471
|
+
[scope]="this"
|
|
4472
|
+
>
|
|
4473
|
+
@if (fabTemplate) {
|
|
4474
|
+
<ng-template
|
|
4475
|
+
[ngTemplateOutlet]="fabTemplate?.templateRef"
|
|
4476
|
+
>
|
|
4413
4477
|
</ng-template>
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4423
|
-
|
|
4478
|
+
}
|
|
4479
|
+
|
|
4480
|
+
@if (!fabTemplate) {
|
|
4481
|
+
@if (icon || iconClass || svgIcon) {
|
|
4482
|
+
<kendo-icon-wrapper
|
|
4483
|
+
[name]="icon"
|
|
4484
|
+
innerCssClass="k-fab-icon"
|
|
4485
|
+
[customFontClass]="iconClass"
|
|
4486
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
4487
|
+
}
|
|
4488
|
+
@if (text) {
|
|
4489
|
+
<span class="k-fab-text">{{ text }}</span>
|
|
4490
|
+
}
|
|
4491
|
+
}
|
|
4424
4492
|
</button>
|
|
4425
|
-
|
|
4493
|
+
|
|
4426
4494
|
<ng-template #popupTemplate>
|
|
4427
|
-
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4435
|
-
|
|
4436
|
-
|
|
4495
|
+
<ul
|
|
4496
|
+
kendoDialList
|
|
4497
|
+
role="menu"
|
|
4498
|
+
[id]="dialListId"
|
|
4499
|
+
[ngClass]="dialClass"
|
|
4500
|
+
[dialItems]="dialItems"
|
|
4501
|
+
[dialItemTemplate]='dialItemTemplate?.templateRef'
|
|
4502
|
+
[align]="align"
|
|
4503
|
+
[attr.aria-labelledby]="id"
|
|
4504
|
+
(click)="onItemClick($event)"
|
|
4437
4505
|
[kendoEventsOutsideAngular]="{
|
|
4438
4506
|
keydown: keyDownHandler.bind(this),
|
|
4439
4507
|
focusout: focusOutHandler.bind(this)
|
|
4440
4508
|
}"
|
|
4441
4509
|
>
|
|
4442
|
-
|
|
4510
|
+
</ul>
|
|
4443
4511
|
</ng-template>
|
|
4444
|
-
|
|
4512
|
+
`,
|
|
4445
4513
|
standalone: true,
|
|
4446
|
-
imports: [NgClass, EventsOutsideAngularDirective,
|
|
4514
|
+
imports: [NgClass, EventsOutsideAngularDirective, NgTemplateOutlet, IconWrapperComponent, DialListComponent]
|
|
4447
4515
|
}]
|
|
4448
4516
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }], propDecorators: { fixedClass: [{
|
|
4449
4517
|
type: HostBinding,
|
|
@@ -5099,7 +5167,7 @@ class SplitButtonComponent extends ListButton {
|
|
|
5099
5167
|
}
|
|
5100
5168
|
}
|
|
5101
5169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
|
|
5103
5171
|
FocusService,
|
|
5104
5172
|
NavigationService,
|
|
5105
5173
|
NAVIGATION_SETTINGS_PROVIDER,
|
|
@@ -5115,40 +5183,42 @@ class SplitButtonComponent extends ListButton {
|
|
|
5115
5183
|
}
|
|
5116
5184
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
5117
5185
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
5118
|
-
|
|
5119
|
-
|
|
5120
|
-
|
|
5121
|
-
|
|
5186
|
+
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
5187
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
5188
|
+
i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
|
|
5189
|
+
toggleButtonLabel="Toggle options"
|
|
5122
5190
|
></ng-container>
|
|
5123
5191
|
<button
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
|
|
5133
|
-
|
|
5134
|
-
|
|
5135
|
-
|
|
5136
|
-
|
|
5137
|
-
|
|
5138
|
-
|
|
5139
|
-
|
|
5140
|
-
|
|
5141
|
-
|
|
5142
|
-
|
|
5143
|
-
|
|
5144
|
-
|
|
5145
|
-
|
|
5146
|
-
|
|
5147
|
-
|
|
5148
|
-
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5192
|
+
kendoButton
|
|
5193
|
+
#button
|
|
5194
|
+
[type]="type"
|
|
5195
|
+
[tabindex]="componentTabIndex"
|
|
5196
|
+
[disabled]="disabled"
|
|
5197
|
+
[size]="size"
|
|
5198
|
+
[rounded]="rounded"
|
|
5199
|
+
[fillMode]="fillMode"
|
|
5200
|
+
[themeColor]="themeColor"
|
|
5201
|
+
[icon]="icon"
|
|
5202
|
+
[svgIcon]="svgIcon"
|
|
5203
|
+
[class.k-active]="active"
|
|
5204
|
+
[iconClass]="iconClass"
|
|
5205
|
+
[imageUrl]="imageUrl"
|
|
5206
|
+
[ngClass]="buttonClass"
|
|
5207
|
+
(focus)="onButtonFocus($event)"
|
|
5208
|
+
(click)="onButtonClick()"
|
|
5209
|
+
(blur)="onButtonBlur()"
|
|
5210
|
+
(mousedown)="toggleButtonActiveState(true)"
|
|
5211
|
+
(mouseup)="toggleButtonActiveState(false)"
|
|
5212
|
+
[attr.aria-expanded]="openState"
|
|
5213
|
+
[attr.aria-controls]="listId"
|
|
5214
|
+
[attr.aria-label]="ariaLabel"
|
|
5215
|
+
>
|
|
5216
|
+
@if (text) {
|
|
5217
|
+
<span class="k-button-text">
|
|
5218
|
+
{{ text }} </span>
|
|
5219
|
+
}<ng-content></ng-content>
|
|
5220
|
+
</button>
|
|
5221
|
+
<button kendoButton #arrowButton type="button"
|
|
5152
5222
|
class="k-split-button-arrow"
|
|
5153
5223
|
[class.k-active]="activeArrow"
|
|
5154
5224
|
[ngClass]="arrowButtonClass"
|
|
@@ -5165,23 +5235,23 @@ class SplitButtonComponent extends ListButton {
|
|
|
5165
5235
|
(mousedown)="toggleArrowButtonActiveState(true)"
|
|
5166
5236
|
(mouseup)="toggleArrowButtonActiveState(false)"
|
|
5167
5237
|
(keydown.enter)="$event.stopImmediatePropagation(); $event.preventDefault();"
|
|
5168
|
-
|
|
5169
|
-
|
|
5238
|
+
></button>
|
|
5239
|
+
<ng-template #popupTemplate>
|
|
5170
5240
|
<kendo-button-list
|
|
5171
|
-
|
|
5172
|
-
|
|
5173
|
-
|
|
5174
|
-
|
|
5175
|
-
|
|
5176
|
-
|
|
5177
|
-
|
|
5178
|
-
|
|
5179
|
-
|
|
5180
|
-
|
|
5241
|
+
[id]="listId"
|
|
5242
|
+
[data]="data"
|
|
5243
|
+
[textField]="textField"
|
|
5244
|
+
[itemTemplate]="itemTemplate"
|
|
5245
|
+
(onItemClick)="onItemClick($event)"
|
|
5246
|
+
(keydown)="keyDownHandler($event)"
|
|
5247
|
+
(keyup)="keyUpHandler($event)"
|
|
5248
|
+
[attr.dir]="dir"
|
|
5249
|
+
[size]="size"
|
|
5250
|
+
>
|
|
5181
5251
|
</kendo-button-list>
|
|
5182
|
-
|
|
5183
|
-
|
|
5184
|
-
|
|
5252
|
+
</ng-template>
|
|
5253
|
+
<ng-container #container></ng-container>
|
|
5254
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
|
|
5185
5255
|
}
|
|
5186
5256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
5187
5257
|
type: Component,
|
|
@@ -5205,40 +5275,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5205
5275
|
selector: 'kendo-splitbutton',
|
|
5206
5276
|
template: `
|
|
5207
5277
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
5208
|
-
|
|
5209
|
-
|
|
5210
|
-
|
|
5211
|
-
|
|
5278
|
+
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
5279
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
5280
|
+
i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
|
|
5281
|
+
toggleButtonLabel="Toggle options"
|
|
5212
5282
|
></ng-container>
|
|
5213
5283
|
<button
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
|
|
5223
|
-
|
|
5224
|
-
|
|
5225
|
-
|
|
5226
|
-
|
|
5227
|
-
|
|
5228
|
-
|
|
5229
|
-
|
|
5230
|
-
|
|
5231
|
-
|
|
5232
|
-
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
|
|
5284
|
+
kendoButton
|
|
5285
|
+
#button
|
|
5286
|
+
[type]="type"
|
|
5287
|
+
[tabindex]="componentTabIndex"
|
|
5288
|
+
[disabled]="disabled"
|
|
5289
|
+
[size]="size"
|
|
5290
|
+
[rounded]="rounded"
|
|
5291
|
+
[fillMode]="fillMode"
|
|
5292
|
+
[themeColor]="themeColor"
|
|
5293
|
+
[icon]="icon"
|
|
5294
|
+
[svgIcon]="svgIcon"
|
|
5295
|
+
[class.k-active]="active"
|
|
5296
|
+
[iconClass]="iconClass"
|
|
5297
|
+
[imageUrl]="imageUrl"
|
|
5298
|
+
[ngClass]="buttonClass"
|
|
5299
|
+
(focus)="onButtonFocus($event)"
|
|
5300
|
+
(click)="onButtonClick()"
|
|
5301
|
+
(blur)="onButtonBlur()"
|
|
5302
|
+
(mousedown)="toggleButtonActiveState(true)"
|
|
5303
|
+
(mouseup)="toggleButtonActiveState(false)"
|
|
5304
|
+
[attr.aria-expanded]="openState"
|
|
5305
|
+
[attr.aria-controls]="listId"
|
|
5306
|
+
[attr.aria-label]="ariaLabel"
|
|
5307
|
+
>
|
|
5308
|
+
@if (text) {
|
|
5309
|
+
<span class="k-button-text">
|
|
5310
|
+
{{ text }} </span>
|
|
5311
|
+
}<ng-content></ng-content>
|
|
5312
|
+
</button>
|
|
5313
|
+
<button kendoButton #arrowButton type="button"
|
|
5242
5314
|
class="k-split-button-arrow"
|
|
5243
5315
|
[class.k-active]="activeArrow"
|
|
5244
5316
|
[ngClass]="arrowButtonClass"
|
|
@@ -5255,25 +5327,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5255
5327
|
(mousedown)="toggleArrowButtonActiveState(true)"
|
|
5256
5328
|
(mouseup)="toggleArrowButtonActiveState(false)"
|
|
5257
5329
|
(keydown.enter)="$event.stopImmediatePropagation(); $event.preventDefault();"
|
|
5258
|
-
|
|
5259
|
-
|
|
5330
|
+
></button>
|
|
5331
|
+
<ng-template #popupTemplate>
|
|
5260
5332
|
<kendo-button-list
|
|
5261
|
-
|
|
5262
|
-
|
|
5263
|
-
|
|
5264
|
-
|
|
5265
|
-
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
|
|
5269
|
-
|
|
5270
|
-
|
|
5333
|
+
[id]="listId"
|
|
5334
|
+
[data]="data"
|
|
5335
|
+
[textField]="textField"
|
|
5336
|
+
[itemTemplate]="itemTemplate"
|
|
5337
|
+
(onItemClick)="onItemClick($event)"
|
|
5338
|
+
(keydown)="keyDownHandler($event)"
|
|
5339
|
+
(keyup)="keyUpHandler($event)"
|
|
5340
|
+
[attr.dir]="dir"
|
|
5341
|
+
[size]="size"
|
|
5342
|
+
>
|
|
5271
5343
|
</kendo-button-list>
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
|
|
5344
|
+
</ng-template>
|
|
5345
|
+
<ng-container #container></ng-container>
|
|
5346
|
+
`,
|
|
5275
5347
|
standalone: true,
|
|
5276
|
-
imports: [LocalizedSplitButtonMessagesDirective, ButtonComponent, NgClass,
|
|
5348
|
+
imports: [LocalizedSplitButtonMessagesDirective, ButtonComponent, NgClass, ListComponent]
|
|
5277
5349
|
}]
|
|
5278
5350
|
}], ctorParameters: () => [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: PopupContainerService }], propDecorators: { text: [{
|
|
5279
5351
|
type: Input
|