@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
|
@@ -17,7 +17,7 @@ import { getStylingClasses } from '../util';
|
|
|
17
17
|
import { PopupContainerService } from '../listbutton/container.service';
|
|
18
18
|
import { caretAltDownIcon } from '@progress/kendo-svg-icons';
|
|
19
19
|
import { ListComponent } from '../listbutton/list.component';
|
|
20
|
-
import { NgClass
|
|
20
|
+
import { NgClass } from '@angular/common';
|
|
21
21
|
import { ButtonComponent } from '../button/button.component';
|
|
22
22
|
import { LocalizedSplitButtonMessagesDirective } from './localization/localized-messages.directive';
|
|
23
23
|
import * as i0 from "@angular/core";
|
|
@@ -505,7 +505,7 @@ export class SplitButtonComponent extends ListButton {
|
|
|
505
505
|
}
|
|
506
506
|
}
|
|
507
507
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
508
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
508
|
+
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: [
|
|
509
509
|
FocusService,
|
|
510
510
|
NavigationService,
|
|
511
511
|
NAVIGATION_SETTINGS_PROVIDER,
|
|
@@ -521,40 +521,42 @@ export class SplitButtonComponent extends ListButton {
|
|
|
521
521
|
}
|
|
522
522
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
523
523
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
524
|
+
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
525
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
526
|
+
i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
|
|
527
|
+
toggleButtonLabel="Toggle options"
|
|
528
528
|
></ng-container>
|
|
529
529
|
<button
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
530
|
+
kendoButton
|
|
531
|
+
#button
|
|
532
|
+
[type]="type"
|
|
533
|
+
[tabindex]="componentTabIndex"
|
|
534
|
+
[disabled]="disabled"
|
|
535
|
+
[size]="size"
|
|
536
|
+
[rounded]="rounded"
|
|
537
|
+
[fillMode]="fillMode"
|
|
538
|
+
[themeColor]="themeColor"
|
|
539
|
+
[icon]="icon"
|
|
540
|
+
[svgIcon]="svgIcon"
|
|
541
|
+
[class.k-active]="active"
|
|
542
|
+
[iconClass]="iconClass"
|
|
543
|
+
[imageUrl]="imageUrl"
|
|
544
|
+
[ngClass]="buttonClass"
|
|
545
|
+
(focus)="onButtonFocus($event)"
|
|
546
|
+
(click)="onButtonClick()"
|
|
547
|
+
(blur)="onButtonBlur()"
|
|
548
|
+
(mousedown)="toggleButtonActiveState(true)"
|
|
549
|
+
(mouseup)="toggleButtonActiveState(false)"
|
|
550
|
+
[attr.aria-expanded]="openState"
|
|
551
|
+
[attr.aria-controls]="listId"
|
|
552
|
+
[attr.aria-label]="ariaLabel"
|
|
553
|
+
>
|
|
554
|
+
@if (text) {
|
|
555
|
+
<span class="k-button-text">
|
|
556
|
+
{{ text }} </span>
|
|
557
|
+
}<ng-content></ng-content>
|
|
558
|
+
</button>
|
|
559
|
+
<button kendoButton #arrowButton type="button"
|
|
558
560
|
class="k-split-button-arrow"
|
|
559
561
|
[class.k-active]="activeArrow"
|
|
560
562
|
[ngClass]="arrowButtonClass"
|
|
@@ -571,23 +573,23 @@ export class SplitButtonComponent extends ListButton {
|
|
|
571
573
|
(mousedown)="toggleArrowButtonActiveState(true)"
|
|
572
574
|
(mouseup)="toggleArrowButtonActiveState(false)"
|
|
573
575
|
(keydown.enter)="$event.stopImmediatePropagation(); $event.preventDefault();"
|
|
574
|
-
|
|
575
|
-
|
|
576
|
+
></button>
|
|
577
|
+
<ng-template #popupTemplate>
|
|
576
578
|
<kendo-button-list
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
579
|
+
[id]="listId"
|
|
580
|
+
[data]="data"
|
|
581
|
+
[textField]="textField"
|
|
582
|
+
[itemTemplate]="itemTemplate"
|
|
583
|
+
(onItemClick)="onItemClick($event)"
|
|
584
|
+
(keydown)="keyDownHandler($event)"
|
|
585
|
+
(keyup)="keyUpHandler($event)"
|
|
586
|
+
[attr.dir]="dir"
|
|
587
|
+
[size]="size"
|
|
588
|
+
>
|
|
587
589
|
</kendo-button-list>
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
590
|
+
</ng-template>
|
|
591
|
+
<ng-container #container></ng-container>
|
|
592
|
+
`, 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"] }] });
|
|
591
593
|
}
|
|
592
594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
593
595
|
type: Component,
|
|
@@ -611,40 +613,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
611
613
|
selector: 'kendo-splitbutton',
|
|
612
614
|
template: `
|
|
613
615
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
616
|
+
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
617
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
618
|
+
i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
|
|
619
|
+
toggleButtonLabel="Toggle options"
|
|
618
620
|
></ng-container>
|
|
619
621
|
<button
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
622
|
+
kendoButton
|
|
623
|
+
#button
|
|
624
|
+
[type]="type"
|
|
625
|
+
[tabindex]="componentTabIndex"
|
|
626
|
+
[disabled]="disabled"
|
|
627
|
+
[size]="size"
|
|
628
|
+
[rounded]="rounded"
|
|
629
|
+
[fillMode]="fillMode"
|
|
630
|
+
[themeColor]="themeColor"
|
|
631
|
+
[icon]="icon"
|
|
632
|
+
[svgIcon]="svgIcon"
|
|
633
|
+
[class.k-active]="active"
|
|
634
|
+
[iconClass]="iconClass"
|
|
635
|
+
[imageUrl]="imageUrl"
|
|
636
|
+
[ngClass]="buttonClass"
|
|
637
|
+
(focus)="onButtonFocus($event)"
|
|
638
|
+
(click)="onButtonClick()"
|
|
639
|
+
(blur)="onButtonBlur()"
|
|
640
|
+
(mousedown)="toggleButtonActiveState(true)"
|
|
641
|
+
(mouseup)="toggleButtonActiveState(false)"
|
|
642
|
+
[attr.aria-expanded]="openState"
|
|
643
|
+
[attr.aria-controls]="listId"
|
|
644
|
+
[attr.aria-label]="ariaLabel"
|
|
645
|
+
>
|
|
646
|
+
@if (text) {
|
|
647
|
+
<span class="k-button-text">
|
|
648
|
+
{{ text }} </span>
|
|
649
|
+
}<ng-content></ng-content>
|
|
650
|
+
</button>
|
|
651
|
+
<button kendoButton #arrowButton type="button"
|
|
648
652
|
class="k-split-button-arrow"
|
|
649
653
|
[class.k-active]="activeArrow"
|
|
650
654
|
[ngClass]="arrowButtonClass"
|
|
@@ -661,25 +665,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
661
665
|
(mousedown)="toggleArrowButtonActiveState(true)"
|
|
662
666
|
(mouseup)="toggleArrowButtonActiveState(false)"
|
|
663
667
|
(keydown.enter)="$event.stopImmediatePropagation(); $event.preventDefault();"
|
|
664
|
-
|
|
665
|
-
|
|
668
|
+
></button>
|
|
669
|
+
<ng-template #popupTemplate>
|
|
666
670
|
<kendo-button-list
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
671
|
+
[id]="listId"
|
|
672
|
+
[data]="data"
|
|
673
|
+
[textField]="textField"
|
|
674
|
+
[itemTemplate]="itemTemplate"
|
|
675
|
+
(onItemClick)="onItemClick($event)"
|
|
676
|
+
(keydown)="keyDownHandler($event)"
|
|
677
|
+
(keyup)="keyUpHandler($event)"
|
|
678
|
+
[attr.dir]="dir"
|
|
679
|
+
[size]="size"
|
|
680
|
+
>
|
|
677
681
|
</kendo-button-list>
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
682
|
+
</ng-template>
|
|
683
|
+
<ng-container #container></ng-container>
|
|
684
|
+
`,
|
|
681
685
|
standalone: true,
|
|
682
|
-
imports: [LocalizedSplitButtonMessagesDirective, ButtonComponent, NgClass,
|
|
686
|
+
imports: [LocalizedSplitButtonMessagesDirective, ButtonComponent, NgClass, ListComponent]
|
|
683
687
|
}]
|
|
684
688
|
}], ctorParameters: () => [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.PopupContainerService }], propDecorators: { text: [{
|
|
685
689
|
type: Input
|