@progress/kendo-angular-listbox 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.
|
@@ -18,7 +18,6 @@ import { take } from 'rxjs/operators';
|
|
|
18
18
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
19
19
|
import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
|
|
20
20
|
import { ItemSelectableDirective } from './item-selectable.directive';
|
|
21
|
-
import { NgIf, NgFor } from '@angular/common';
|
|
22
21
|
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
|
|
23
22
|
import { isPresent, TemplateContextDirective } from '@progress/kendo-angular-common';
|
|
24
23
|
import * as i0 from "@angular/core";
|
|
@@ -521,7 +520,7 @@ export class ListBoxComponent {
|
|
|
521
520
|
this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
|
|
522
521
|
}
|
|
523
522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
|
|
525
524
|
ListBoxSelectionService,
|
|
526
525
|
KeyboardNavigationService,
|
|
527
526
|
LocalizationService,
|
|
@@ -531,41 +530,41 @@ export class ListBoxComponent {
|
|
|
531
530
|
},
|
|
532
531
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItems"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
|
|
533
532
|
<ng-container kendoListBoxLocalizedMessages
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
533
|
+
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
534
|
+
moveUp="Move Up"
|
|
535
|
+
|
|
536
|
+
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
537
|
+
moveDown="Move Down"
|
|
538
|
+
|
|
539
|
+
i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
|
|
540
|
+
transferTo="Transfer To"
|
|
541
|
+
|
|
542
|
+
i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
|
|
543
|
+
transferAllTo="Transfer All To"
|
|
544
|
+
|
|
545
|
+
i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
|
|
546
|
+
transferFrom="Transfer From"
|
|
547
|
+
|
|
548
|
+
i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
|
|
549
|
+
transferAllFrom="Transfer All From"
|
|
550
|
+
|
|
551
|
+
i18n-remove="kendo.listbox.remove|The title of the Remove button"
|
|
552
|
+
remove="Remove"
|
|
553
|
+
|
|
554
|
+
i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
|
|
555
|
+
noDataText="No data found."
|
|
556
|
+
>
|
|
558
557
|
</ng-container>
|
|
559
|
-
|
|
558
|
+
@if (selectedTools.length > 0) {
|
|
559
|
+
<div
|
|
560
560
|
#toolbar
|
|
561
561
|
class="k-listbox-actions"
|
|
562
|
-
*ngIf="selectedTools.length > 0"
|
|
563
562
|
role="toolbar"
|
|
564
563
|
[attr.aria-label]="listboxToolbarLabel"
|
|
565
|
-
|
|
566
|
-
|
|
564
|
+
>
|
|
565
|
+
@for (tool of selectedTools; track tool; let i = $index) {
|
|
566
|
+
<button
|
|
567
567
|
#tools
|
|
568
|
-
*ngFor="let tool of selectedTools; let i = index"
|
|
569
568
|
kendoButton
|
|
570
569
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
571
570
|
[size]="this.size"
|
|
@@ -575,53 +574,58 @@ export class ListBoxComponent {
|
|
|
575
574
|
(click)="performAction(tool.name)"
|
|
576
575
|
role="button"
|
|
577
576
|
type="button"
|
|
578
|
-
|
|
579
|
-
|
|
577
|
+
></button>
|
|
578
|
+
}
|
|
579
|
+
</div>
|
|
580
|
+
}
|
|
580
581
|
<div class="k-list-scroller k-selectable">
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
582
|
+
<div class="{{ listClasses }}">
|
|
583
|
+
@if (data.length > 0) {
|
|
584
|
+
<div
|
|
585
|
+
class="k-list-content"
|
|
585
586
|
>
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
587
|
+
<ul
|
|
588
|
+
#listbox
|
|
589
|
+
class="k-list-ul"
|
|
590
|
+
role="listbox"
|
|
591
|
+
[attr.aria-label]="listboxLabel"
|
|
592
|
+
[attr.aria-multiselectable]="selectable === 'multiple'"
|
|
593
|
+
>
|
|
594
|
+
@for (item of data; track item; let i = $index) {
|
|
595
|
+
<li
|
|
596
|
+
#listboxItems
|
|
597
|
+
kendoListBoxItemSelectable
|
|
598
|
+
class="k-list-item"
|
|
599
|
+
[attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
|
|
600
|
+
role="option"
|
|
601
|
+
[attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
|
|
602
|
+
[index]="i"
|
|
603
|
+
[class.k-disabled]="itemDisabled(item)"
|
|
604
|
+
>
|
|
605
|
+
@if (itemTemplate) {
|
|
606
|
+
<ng-template
|
|
606
607
|
[templateContext]="{
|
|
607
608
|
templateRef: itemTemplate.templateRef,
|
|
608
609
|
$implicit: item
|
|
609
610
|
}"
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
</
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
611
|
+
>
|
|
612
|
+
</ng-template>
|
|
613
|
+
} @else {
|
|
614
|
+
<span class="k-list-item-text">{{ getText(item) }}</span>
|
|
615
|
+
}
|
|
616
|
+
</li>
|
|
617
|
+
}
|
|
618
|
+
</ul>
|
|
619
|
+
</div>
|
|
620
|
+
}
|
|
621
|
+
@if (data.length === 0) {
|
|
622
|
+
<span
|
|
623
|
+
class="k-nodata"
|
|
624
|
+
>{{ messageFor('noDataText') }}</span>
|
|
625
|
+
}
|
|
626
|
+
</div>
|
|
623
627
|
</div>
|
|
624
|
-
|
|
628
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { 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: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
|
|
625
629
|
}
|
|
626
630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
627
631
|
type: Component,
|
|
@@ -638,41 +642,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
638
642
|
],
|
|
639
643
|
template: `
|
|
640
644
|
<ng-container kendoListBoxLocalizedMessages
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
645
|
+
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
646
|
+
moveUp="Move Up"
|
|
647
|
+
|
|
648
|
+
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
649
|
+
moveDown="Move Down"
|
|
650
|
+
|
|
651
|
+
i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
|
|
652
|
+
transferTo="Transfer To"
|
|
653
|
+
|
|
654
|
+
i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
|
|
655
|
+
transferAllTo="Transfer All To"
|
|
656
|
+
|
|
657
|
+
i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
|
|
658
|
+
transferFrom="Transfer From"
|
|
659
|
+
|
|
660
|
+
i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
|
|
661
|
+
transferAllFrom="Transfer All From"
|
|
662
|
+
|
|
663
|
+
i18n-remove="kendo.listbox.remove|The title of the Remove button"
|
|
664
|
+
remove="Remove"
|
|
665
|
+
|
|
666
|
+
i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
|
|
667
|
+
noDataText="No data found."
|
|
668
|
+
>
|
|
665
669
|
</ng-container>
|
|
666
|
-
|
|
670
|
+
@if (selectedTools.length > 0) {
|
|
671
|
+
<div
|
|
667
672
|
#toolbar
|
|
668
673
|
class="k-listbox-actions"
|
|
669
|
-
*ngIf="selectedTools.length > 0"
|
|
670
674
|
role="toolbar"
|
|
671
675
|
[attr.aria-label]="listboxToolbarLabel"
|
|
672
|
-
|
|
673
|
-
|
|
676
|
+
>
|
|
677
|
+
@for (tool of selectedTools; track tool; let i = $index) {
|
|
678
|
+
<button
|
|
674
679
|
#tools
|
|
675
|
-
*ngFor="let tool of selectedTools; let i = index"
|
|
676
680
|
kendoButton
|
|
677
681
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
678
682
|
[size]="this.size"
|
|
@@ -682,55 +686,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
682
686
|
(click)="performAction(tool.name)"
|
|
683
687
|
role="button"
|
|
684
688
|
type="button"
|
|
685
|
-
|
|
686
|
-
|
|
689
|
+
></button>
|
|
690
|
+
}
|
|
691
|
+
</div>
|
|
692
|
+
}
|
|
687
693
|
<div class="k-list-scroller k-selectable">
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
694
|
+
<div class="{{ listClasses }}">
|
|
695
|
+
@if (data.length > 0) {
|
|
696
|
+
<div
|
|
697
|
+
class="k-list-content"
|
|
692
698
|
>
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
699
|
+
<ul
|
|
700
|
+
#listbox
|
|
701
|
+
class="k-list-ul"
|
|
702
|
+
role="listbox"
|
|
703
|
+
[attr.aria-label]="listboxLabel"
|
|
704
|
+
[attr.aria-multiselectable]="selectable === 'multiple'"
|
|
705
|
+
>
|
|
706
|
+
@for (item of data; track item; let i = $index) {
|
|
707
|
+
<li
|
|
708
|
+
#listboxItems
|
|
709
|
+
kendoListBoxItemSelectable
|
|
710
|
+
class="k-list-item"
|
|
711
|
+
[attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
|
|
712
|
+
role="option"
|
|
713
|
+
[attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
|
|
714
|
+
[index]="i"
|
|
715
|
+
[class.k-disabled]="itemDisabled(item)"
|
|
716
|
+
>
|
|
717
|
+
@if (itemTemplate) {
|
|
718
|
+
<ng-template
|
|
713
719
|
[templateContext]="{
|
|
714
720
|
templateRef: itemTemplate.templateRef,
|
|
715
721
|
$implicit: item
|
|
716
722
|
}"
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
</
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
723
|
+
>
|
|
724
|
+
</ng-template>
|
|
725
|
+
} @else {
|
|
726
|
+
<span class="k-list-item-text">{{ getText(item) }}</span>
|
|
727
|
+
}
|
|
728
|
+
</li>
|
|
729
|
+
}
|
|
730
|
+
</ul>
|
|
731
|
+
</div>
|
|
732
|
+
}
|
|
733
|
+
@if (data.length === 0) {
|
|
734
|
+
<span
|
|
735
|
+
class="k-nodata"
|
|
736
|
+
>{{ messageFor('noDataText') }}</span>
|
|
737
|
+
}
|
|
738
|
+
</div>
|
|
730
739
|
</div>
|
|
731
|
-
|
|
740
|
+
`,
|
|
732
741
|
standalone: true,
|
|
733
|
-
imports: [LocalizedMessagesDirective,
|
|
742
|
+
imports: [LocalizedMessagesDirective, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
|
|
734
743
|
}]
|
|
735
744
|
}], ctorParameters: () => [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
|
|
736
745
|
type: HostBinding,
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.
|
|
13
|
+
publishDate: 1764002489,
|
|
14
|
+
version: '21.2.0-develop.2',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
16
16
|
};
|
|
@@ -13,7 +13,6 @@ import { normalizeNumpadKeys, Keys, isPresent as isPresent$1, TemplateContextDir
|
|
|
13
13
|
import { take } from 'rxjs/operators';
|
|
14
14
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
15
15
|
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
16
|
-
import { NgIf, NgFor } from '@angular/common';
|
|
17
16
|
import { IconsService } from '@progress/kendo-angular-icons';
|
|
18
17
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
19
18
|
|
|
@@ -25,8 +24,8 @@ const packageMetadata = {
|
|
|
25
24
|
productName: 'Kendo UI for Angular',
|
|
26
25
|
productCode: 'KENDOUIANGULAR',
|
|
27
26
|
productCodes: ['KENDOUIANGULAR'],
|
|
28
|
-
publishDate:
|
|
29
|
-
version: '21.
|
|
27
|
+
publishDate: 1764002489,
|
|
28
|
+
version: '21.2.0-develop.2',
|
|
30
29
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
31
30
|
};
|
|
32
31
|
|
|
@@ -1271,7 +1270,7 @@ class ListBoxComponent {
|
|
|
1271
1270
|
this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
|
|
1272
1271
|
}
|
|
1273
1272
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1273
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
|
|
1275
1274
|
ListBoxSelectionService,
|
|
1276
1275
|
KeyboardNavigationService,
|
|
1277
1276
|
LocalizationService,
|
|
@@ -1281,41 +1280,41 @@ class ListBoxComponent {
|
|
|
1281
1280
|
},
|
|
1282
1281
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItems"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
|
|
1283
1282
|
<ng-container kendoListBoxLocalizedMessages
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1283
|
+
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
1284
|
+
moveUp="Move Up"
|
|
1285
|
+
|
|
1286
|
+
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
1287
|
+
moveDown="Move Down"
|
|
1288
|
+
|
|
1289
|
+
i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
|
|
1290
|
+
transferTo="Transfer To"
|
|
1291
|
+
|
|
1292
|
+
i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
|
|
1293
|
+
transferAllTo="Transfer All To"
|
|
1294
|
+
|
|
1295
|
+
i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
|
|
1296
|
+
transferFrom="Transfer From"
|
|
1297
|
+
|
|
1298
|
+
i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
|
|
1299
|
+
transferAllFrom="Transfer All From"
|
|
1300
|
+
|
|
1301
|
+
i18n-remove="kendo.listbox.remove|The title of the Remove button"
|
|
1302
|
+
remove="Remove"
|
|
1303
|
+
|
|
1304
|
+
i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
|
|
1305
|
+
noDataText="No data found."
|
|
1306
|
+
>
|
|
1308
1307
|
</ng-container>
|
|
1309
|
-
|
|
1308
|
+
@if (selectedTools.length > 0) {
|
|
1309
|
+
<div
|
|
1310
1310
|
#toolbar
|
|
1311
1311
|
class="k-listbox-actions"
|
|
1312
|
-
*ngIf="selectedTools.length > 0"
|
|
1313
1312
|
role="toolbar"
|
|
1314
1313
|
[attr.aria-label]="listboxToolbarLabel"
|
|
1315
|
-
|
|
1316
|
-
|
|
1314
|
+
>
|
|
1315
|
+
@for (tool of selectedTools; track tool; let i = $index) {
|
|
1316
|
+
<button
|
|
1317
1317
|
#tools
|
|
1318
|
-
*ngFor="let tool of selectedTools; let i = index"
|
|
1319
1318
|
kendoButton
|
|
1320
1319
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
1321
1320
|
[size]="this.size"
|
|
@@ -1325,53 +1324,58 @@ class ListBoxComponent {
|
|
|
1325
1324
|
(click)="performAction(tool.name)"
|
|
1326
1325
|
role="button"
|
|
1327
1326
|
type="button"
|
|
1328
|
-
|
|
1329
|
-
|
|
1327
|
+
></button>
|
|
1328
|
+
}
|
|
1329
|
+
</div>
|
|
1330
|
+
}
|
|
1330
1331
|
<div class="k-list-scroller k-selectable">
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1332
|
+
<div class="{{ listClasses }}">
|
|
1333
|
+
@if (data.length > 0) {
|
|
1334
|
+
<div
|
|
1335
|
+
class="k-list-content"
|
|
1335
1336
|
>
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1337
|
+
<ul
|
|
1338
|
+
#listbox
|
|
1339
|
+
class="k-list-ul"
|
|
1340
|
+
role="listbox"
|
|
1341
|
+
[attr.aria-label]="listboxLabel"
|
|
1342
|
+
[attr.aria-multiselectable]="selectable === 'multiple'"
|
|
1343
|
+
>
|
|
1344
|
+
@for (item of data; track item; let i = $index) {
|
|
1345
|
+
<li
|
|
1346
|
+
#listboxItems
|
|
1347
|
+
kendoListBoxItemSelectable
|
|
1348
|
+
class="k-list-item"
|
|
1349
|
+
[attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
|
|
1350
|
+
role="option"
|
|
1351
|
+
[attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
|
|
1352
|
+
[index]="i"
|
|
1353
|
+
[class.k-disabled]="itemDisabled(item)"
|
|
1354
|
+
>
|
|
1355
|
+
@if (itemTemplate) {
|
|
1356
|
+
<ng-template
|
|
1356
1357
|
[templateContext]="{
|
|
1357
1358
|
templateRef: itemTemplate.templateRef,
|
|
1358
1359
|
$implicit: item
|
|
1359
1360
|
}"
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
</
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1361
|
+
>
|
|
1362
|
+
</ng-template>
|
|
1363
|
+
} @else {
|
|
1364
|
+
<span class="k-list-item-text">{{ getText(item) }}</span>
|
|
1365
|
+
}
|
|
1366
|
+
</li>
|
|
1367
|
+
}
|
|
1368
|
+
</ul>
|
|
1369
|
+
</div>
|
|
1370
|
+
}
|
|
1371
|
+
@if (data.length === 0) {
|
|
1372
|
+
<span
|
|
1373
|
+
class="k-nodata"
|
|
1374
|
+
>{{ messageFor('noDataText') }}</span>
|
|
1375
|
+
}
|
|
1376
|
+
</div>
|
|
1373
1377
|
</div>
|
|
1374
|
-
|
|
1378
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { 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: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
|
|
1375
1379
|
}
|
|
1376
1380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
1377
1381
|
type: Component,
|
|
@@ -1388,41 +1392,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1388
1392
|
],
|
|
1389
1393
|
template: `
|
|
1390
1394
|
<ng-container kendoListBoxLocalizedMessages
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1395
|
+
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
1396
|
+
moveUp="Move Up"
|
|
1397
|
+
|
|
1398
|
+
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
1399
|
+
moveDown="Move Down"
|
|
1400
|
+
|
|
1401
|
+
i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
|
|
1402
|
+
transferTo="Transfer To"
|
|
1403
|
+
|
|
1404
|
+
i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
|
|
1405
|
+
transferAllTo="Transfer All To"
|
|
1406
|
+
|
|
1407
|
+
i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
|
|
1408
|
+
transferFrom="Transfer From"
|
|
1409
|
+
|
|
1410
|
+
i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
|
|
1411
|
+
transferAllFrom="Transfer All From"
|
|
1412
|
+
|
|
1413
|
+
i18n-remove="kendo.listbox.remove|The title of the Remove button"
|
|
1414
|
+
remove="Remove"
|
|
1415
|
+
|
|
1416
|
+
i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
|
|
1417
|
+
noDataText="No data found."
|
|
1418
|
+
>
|
|
1415
1419
|
</ng-container>
|
|
1416
|
-
|
|
1420
|
+
@if (selectedTools.length > 0) {
|
|
1421
|
+
<div
|
|
1417
1422
|
#toolbar
|
|
1418
1423
|
class="k-listbox-actions"
|
|
1419
|
-
*ngIf="selectedTools.length > 0"
|
|
1420
1424
|
role="toolbar"
|
|
1421
1425
|
[attr.aria-label]="listboxToolbarLabel"
|
|
1422
|
-
|
|
1423
|
-
|
|
1426
|
+
>
|
|
1427
|
+
@for (tool of selectedTools; track tool; let i = $index) {
|
|
1428
|
+
<button
|
|
1424
1429
|
#tools
|
|
1425
|
-
*ngFor="let tool of selectedTools; let i = index"
|
|
1426
1430
|
kendoButton
|
|
1427
1431
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
1428
1432
|
[size]="this.size"
|
|
@@ -1432,55 +1436,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1432
1436
|
(click)="performAction(tool.name)"
|
|
1433
1437
|
role="button"
|
|
1434
1438
|
type="button"
|
|
1435
|
-
|
|
1436
|
-
|
|
1439
|
+
></button>
|
|
1440
|
+
}
|
|
1441
|
+
</div>
|
|
1442
|
+
}
|
|
1437
1443
|
<div class="k-list-scroller k-selectable">
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1444
|
+
<div class="{{ listClasses }}">
|
|
1445
|
+
@if (data.length > 0) {
|
|
1446
|
+
<div
|
|
1447
|
+
class="k-list-content"
|
|
1442
1448
|
>
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1449
|
+
<ul
|
|
1450
|
+
#listbox
|
|
1451
|
+
class="k-list-ul"
|
|
1452
|
+
role="listbox"
|
|
1453
|
+
[attr.aria-label]="listboxLabel"
|
|
1454
|
+
[attr.aria-multiselectable]="selectable === 'multiple'"
|
|
1455
|
+
>
|
|
1456
|
+
@for (item of data; track item; let i = $index) {
|
|
1457
|
+
<li
|
|
1458
|
+
#listboxItems
|
|
1459
|
+
kendoListBoxItemSelectable
|
|
1460
|
+
class="k-list-item"
|
|
1461
|
+
[attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
|
|
1462
|
+
role="option"
|
|
1463
|
+
[attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
|
|
1464
|
+
[index]="i"
|
|
1465
|
+
[class.k-disabled]="itemDisabled(item)"
|
|
1466
|
+
>
|
|
1467
|
+
@if (itemTemplate) {
|
|
1468
|
+
<ng-template
|
|
1463
1469
|
[templateContext]="{
|
|
1464
1470
|
templateRef: itemTemplate.templateRef,
|
|
1465
1471
|
$implicit: item
|
|
1466
1472
|
}"
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
</
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1473
|
+
>
|
|
1474
|
+
</ng-template>
|
|
1475
|
+
} @else {
|
|
1476
|
+
<span class="k-list-item-text">{{ getText(item) }}</span>
|
|
1477
|
+
}
|
|
1478
|
+
</li>
|
|
1479
|
+
}
|
|
1480
|
+
</ul>
|
|
1481
|
+
</div>
|
|
1482
|
+
}
|
|
1483
|
+
@if (data.length === 0) {
|
|
1484
|
+
<span
|
|
1485
|
+
class="k-nodata"
|
|
1486
|
+
>{{ messageFor('noDataText') }}</span>
|
|
1487
|
+
}
|
|
1488
|
+
</div>
|
|
1480
1489
|
</div>
|
|
1481
|
-
|
|
1490
|
+
`,
|
|
1482
1491
|
standalone: true,
|
|
1483
|
-
imports: [LocalizedMessagesDirective,
|
|
1492
|
+
imports: [LocalizedMessagesDirective, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
|
|
1484
1493
|
}]
|
|
1485
1494
|
}], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
|
|
1486
1495
|
type: HostBinding,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-listbox",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.2.0-develop.2",
|
|
4
4
|
"description": "Kendo UI for Angular ListBox",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"package": {
|
|
45
45
|
"productName": "Kendo UI for Angular",
|
|
46
46
|
"productCode": "KENDOUIANGULAR",
|
|
47
|
-
"publishDate":
|
|
47
|
+
"publishDate": 1764002489,
|
|
48
48
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
|
|
49
49
|
}
|
|
50
50
|
},
|
|
@@ -54,14 +54,14 @@
|
|
|
54
54
|
"@angular/core": "18 - 21",
|
|
55
55
|
"@angular/platform-browser": "18 - 21",
|
|
56
56
|
"@progress/kendo-licensing": "^1.7.0",
|
|
57
|
-
"@progress/kendo-angular-buttons": "21.
|
|
58
|
-
"@progress/kendo-angular-common": "21.
|
|
59
|
-
"@progress/kendo-angular-popup": "21.
|
|
57
|
+
"@progress/kendo-angular-buttons": "21.2.0-develop.2",
|
|
58
|
+
"@progress/kendo-angular-common": "21.2.0-develop.2",
|
|
59
|
+
"@progress/kendo-angular-popup": "21.2.0-develop.2",
|
|
60
60
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
63
|
"tslib": "^2.3.1",
|
|
64
|
-
"@progress/kendo-angular-schematics": "21.
|
|
64
|
+
"@progress/kendo-angular-schematics": "21.2.0-develop.2",
|
|
65
65
|
"@progress/kendo-common": "^1.0.1",
|
|
66
66
|
"node-html-parser": "^7.0.1"
|
|
67
67
|
},
|
|
@@ -11,11 +11,11 @@ function default_1(options) {
|
|
|
11
11
|
// Additional dependencies to install.
|
|
12
12
|
// See https://github.com/telerik/kendo-schematics/issues/28
|
|
13
13
|
peerDependencies: {
|
|
14
|
-
'@progress/kendo-angular-buttons': '21.
|
|
15
|
-
'@progress/kendo-angular-common': '21.
|
|
16
|
-
'@progress/kendo-angular-l10n': '21.
|
|
14
|
+
'@progress/kendo-angular-buttons': '21.2.0-develop.2',
|
|
15
|
+
'@progress/kendo-angular-common': '21.2.0-develop.2',
|
|
16
|
+
'@progress/kendo-angular-l10n': '21.2.0-develop.2',
|
|
17
17
|
// Peer of kendo-angular-buttons
|
|
18
|
-
'@progress/kendo-angular-popup': '21.
|
|
18
|
+
'@progress/kendo-angular-popup': '21.2.0-develop.2'
|
|
19
19
|
} });
|
|
20
20
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
21
21
|
}
|