@progress/kendo-angular-buttons 21.1.1-develop.2 → 21.2.0-develop.2
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/chip/chip.component.mjs +105 -85
- package/esm2022/floatingactionbutton/dial-item.component.mjs +39 -29
- package/esm2022/floatingactionbutton/dial-list.component.mjs +31 -31
- package/esm2022/floatingactionbutton/floatingactionbutton.component.mjs +97 -87
- 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 +509 -437
- package/package.json +7 -7
|
@@ -13,7 +13,7 @@ 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: 1764001998,
|
|
49
|
+
version: '21.2.0-develop.2',
|
|
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
|
|
@@ -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
|
|
@@ -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
|
|
@@ -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,
|
|
@@ -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
|