@progress/kendo-angular-listbox 11.4.1-develop.9 → 11.5.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/esm2020/index.mjs +2 -0
- package/esm2020/listbox.component.mjs +107 -28
- package/esm2020/listbox.module.mjs +23 -3
- package/esm2020/localization/custom-messages.component.mjs +42 -0
- package/esm2020/localization/localized-messages.directive.mjs +37 -0
- package/esm2020/localization/messages.mjs +32 -0
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-listbox.mjs +218 -34
- package/fesm2020/progress-kendo-angular-listbox.mjs +218 -34
- package/index.d.ts +2 -0
- package/listbox.component.d.ts +8 -2
- package/listbox.module.d.ts +9 -7
- package/localization/custom-messages.component.d.ts +18 -0
- package/localization/localized-messages.directive.d.ts +16 -0
- package/localization/messages.d.ts +41 -0
- package/package.json +5 -5
- package/schematics/ngAdd/index.js +4 -4
|
@@ -3,16 +3,18 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener, isDevMode, Component, ContentChild, ViewChild, ViewChildren, Output, NgModule } from '@angular/core';
|
|
6
|
+
import { EventEmitter, Injectable, Directive, Input, forwardRef, HostBinding, HostListener, isDevMode, Component, ContentChild, ViewChild, ViewChildren, Output, NgModule } from '@angular/core';
|
|
7
7
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
8
|
import { Subscription } from 'rxjs';
|
|
9
9
|
import { getter } from '@progress/kendo-common';
|
|
10
10
|
import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
11
11
|
import { Keys, isChanged } from '@progress/kendo-angular-common';
|
|
12
12
|
import { take } from 'rxjs/operators';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i1 from '@progress/kendo-angular-l10n';
|
|
14
|
+
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
15
|
+
import * as i4 from '@progress/kendo-angular-buttons';
|
|
14
16
|
import { ButtonsModule } from '@progress/kendo-angular-buttons';
|
|
15
|
-
import * as
|
|
17
|
+
import * as i6 from '@angular/common';
|
|
16
18
|
import { CommonModule } from '@angular/common';
|
|
17
19
|
|
|
18
20
|
/**
|
|
@@ -22,8 +24,8 @@ const packageMetadata = {
|
|
|
22
24
|
name: '@progress/kendo-angular-listbox',
|
|
23
25
|
productName: 'Kendo UI for Angular',
|
|
24
26
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
25
|
-
publishDate:
|
|
26
|
-
version: '11.
|
|
27
|
+
publishDate: 1680079886,
|
|
28
|
+
version: '11.5.0-develop.2',
|
|
27
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'
|
|
28
30
|
};
|
|
29
31
|
|
|
@@ -441,6 +443,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
441
443
|
type: Injectable
|
|
442
444
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }]; } });
|
|
443
445
|
|
|
446
|
+
/**
|
|
447
|
+
* @hidden
|
|
448
|
+
*/
|
|
449
|
+
class Messages extends ComponentMessages {
|
|
450
|
+
}
|
|
451
|
+
Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
452
|
+
Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { moveUp: "moveUp", moveDown: "moveDown", remove: "remove", transferTo: "transferTo", transferFrom: "transferFrom", transferAllTo: "transferAllTo", transferAllFrom: "transferAllFrom" }, usesInheritance: true, ngImport: i0 });
|
|
453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
|
|
454
|
+
type: Directive
|
|
455
|
+
}], propDecorators: { moveUp: [{
|
|
456
|
+
type: Input
|
|
457
|
+
}], moveDown: [{
|
|
458
|
+
type: Input
|
|
459
|
+
}], remove: [{
|
|
460
|
+
type: Input
|
|
461
|
+
}], transferTo: [{
|
|
462
|
+
type: Input
|
|
463
|
+
}], transferFrom: [{
|
|
464
|
+
type: Input
|
|
465
|
+
}], transferAllTo: [{
|
|
466
|
+
type: Input
|
|
467
|
+
}], transferAllFrom: [{
|
|
468
|
+
type: Input
|
|
469
|
+
}] } });
|
|
470
|
+
|
|
471
|
+
/**
|
|
472
|
+
* @hidden
|
|
473
|
+
*/
|
|
474
|
+
class LocalizedMessagesDirective extends Messages {
|
|
475
|
+
constructor(service) {
|
|
476
|
+
super();
|
|
477
|
+
this.service = service;
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
481
|
+
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]", providers: [
|
|
482
|
+
{
|
|
483
|
+
provide: Messages,
|
|
484
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
485
|
+
}
|
|
486
|
+
], usesInheritance: true, ngImport: i0 });
|
|
487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
488
|
+
type: Directive,
|
|
489
|
+
args: [{
|
|
490
|
+
providers: [
|
|
491
|
+
{
|
|
492
|
+
provide: Messages,
|
|
493
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
494
|
+
}
|
|
495
|
+
],
|
|
496
|
+
selector: '[kendoListBoxLocalizedMessages]'
|
|
497
|
+
}]
|
|
498
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
|
499
|
+
|
|
444
500
|
/**
|
|
445
501
|
* @hidden
|
|
446
502
|
*/
|
|
@@ -480,12 +536,13 @@ let idx = 0;
|
|
|
480
536
|
* Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
|
|
481
537
|
*/
|
|
482
538
|
class ListBoxComponent {
|
|
483
|
-
constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone) {
|
|
539
|
+
constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
|
|
484
540
|
this.keyboardNavigationService = keyboardNavigationService;
|
|
485
541
|
this.selectionService = selectionService;
|
|
486
542
|
this.hostElement = hostElement;
|
|
487
543
|
this.renderer = renderer;
|
|
488
544
|
this.zone = zone;
|
|
545
|
+
this.localization = localization;
|
|
489
546
|
/**
|
|
490
547
|
* @hidden
|
|
491
548
|
*/
|
|
@@ -567,6 +624,12 @@ class ListBoxComponent {
|
|
|
567
624
|
get listClasses() {
|
|
568
625
|
return `k-list k-list-${sizeClassMap[this.size]}`;
|
|
569
626
|
}
|
|
627
|
+
/**
|
|
628
|
+
* @hidden
|
|
629
|
+
*/
|
|
630
|
+
messageFor(key) {
|
|
631
|
+
return this.localization.get(key);
|
|
632
|
+
}
|
|
570
633
|
ngOnInit() {
|
|
571
634
|
// This event emitter gives us the connectedWith value from the DataBinding directive
|
|
572
635
|
this.getChildListbox.emit();
|
|
@@ -635,13 +698,12 @@ class ListBoxComponent {
|
|
|
635
698
|
}
|
|
636
699
|
/**
|
|
637
700
|
* @hidden
|
|
638
|
-
|
|
701
|
+
*/
|
|
639
702
|
get getListboxId() {
|
|
640
703
|
const id = ++idx;
|
|
641
704
|
const listboxId = `k-listbox-${id}`;
|
|
642
705
|
return listboxId;
|
|
643
706
|
}
|
|
644
|
-
;
|
|
645
707
|
/**
|
|
646
708
|
* @hidden
|
|
647
709
|
*/
|
|
@@ -664,7 +726,10 @@ class ListBoxComponent {
|
|
|
664
726
|
*/
|
|
665
727
|
swapItems(firstItemIndex, secondItemIndex) {
|
|
666
728
|
const listboxItems = this.keyboardNavigationService.listboxItems;
|
|
667
|
-
[listboxItems[firstItemIndex], listboxItems[secondItemIndex]] = [
|
|
729
|
+
[listboxItems[firstItemIndex], listboxItems[secondItemIndex]] = [
|
|
730
|
+
listboxItems[secondItemIndex],
|
|
731
|
+
listboxItems[firstItemIndex],
|
|
732
|
+
];
|
|
668
733
|
}
|
|
669
734
|
onClickEvent(listboxItems, prevIndex, currentIndex, dir) {
|
|
670
735
|
this.selectionChange.next(currentIndex);
|
|
@@ -680,7 +745,7 @@ class ListBoxComponent {
|
|
|
680
745
|
}
|
|
681
746
|
initSubscriptions(navService, hostEl, toolsRef) {
|
|
682
747
|
this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
|
|
683
|
-
this.subs.add(this.renderer.listen(hostEl, 'keydown', event => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox)));
|
|
748
|
+
this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox)));
|
|
684
749
|
this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', () => navService.onFocusIn()));
|
|
685
750
|
this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.onShiftItems(actionToPerform)));
|
|
686
751
|
this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.onShiftItems(actionToPerform)));
|
|
@@ -739,8 +804,9 @@ class ListBoxComponent {
|
|
|
739
804
|
this.selectionService.selectedIndex = index;
|
|
740
805
|
this.performAction('remove');
|
|
741
806
|
this.updateListboxItems();
|
|
742
|
-
const setIndex = index + 1 === navService.listboxItems.length
|
|
743
|
-
{ index: index - 1, tabindex: index - 1 }
|
|
807
|
+
const setIndex = index + 1 === navService.listboxItems.length
|
|
808
|
+
? { index: index - 1, tabindex: index - 1 }
|
|
809
|
+
: { index, tabindex: index + 1 };
|
|
744
810
|
navService.changeTabindex(null, navService.listboxItems[setIndex['tabindex']]);
|
|
745
811
|
this.selectionChange.next({ index: setIndex['index'], prevIndex: null });
|
|
746
812
|
navService.selectedListboxItemIndex = setIndex['index'];
|
|
@@ -761,8 +827,39 @@ class ListBoxComponent {
|
|
|
761
827
|
this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
|
|
762
828
|
}
|
|
763
829
|
}
|
|
764
|
-
ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
765
|
-
ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName" } }, providers: [
|
|
830
|
+
ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
831
|
+
ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName" } }, providers: [
|
|
832
|
+
ListBoxSelectionService,
|
|
833
|
+
KeyboardNavigationService,
|
|
834
|
+
LocalizationService,
|
|
835
|
+
{
|
|
836
|
+
provide: L10N_PREFIX,
|
|
837
|
+
useValue: 'kendo.listbox'
|
|
838
|
+
},
|
|
839
|
+
], 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: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
|
|
840
|
+
<ng-container kendoListBoxLocalizedMessages
|
|
841
|
+
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
842
|
+
moveUp="Move Up"
|
|
843
|
+
|
|
844
|
+
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
845
|
+
moveDown="Move Down"
|
|
846
|
+
|
|
847
|
+
i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
|
|
848
|
+
transferTo="Transfer To"
|
|
849
|
+
|
|
850
|
+
i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
|
|
851
|
+
transferAllTo="Transfer All To"
|
|
852
|
+
|
|
853
|
+
i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
|
|
854
|
+
transferFrom="Transfer From"
|
|
855
|
+
|
|
856
|
+
i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
|
|
857
|
+
transferAllFrom="Transfer All From"
|
|
858
|
+
|
|
859
|
+
i18n-remove="kendo.listbox.remove|The title of the Remove button"
|
|
860
|
+
remove="Remove"
|
|
861
|
+
>
|
|
862
|
+
</ng-container>
|
|
766
863
|
<div
|
|
767
864
|
#toolbar
|
|
768
865
|
class="k-listbox-actions"
|
|
@@ -772,13 +869,13 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
772
869
|
>
|
|
773
870
|
<button
|
|
774
871
|
#tools
|
|
775
|
-
*ngFor="let tool of selectedTools; let i = index
|
|
872
|
+
*ngFor="let tool of selectedTools; let i = index"
|
|
776
873
|
kendoButton
|
|
777
874
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
778
875
|
[size]="this.size"
|
|
779
876
|
[icon]="tool.icon"
|
|
780
877
|
[svgIcon]="tool.svgIcon"
|
|
781
|
-
[attr.title]="tool.
|
|
878
|
+
[attr.title]="messageFor(tool.name)"
|
|
782
879
|
(click)="performAction(tool.name)"
|
|
783
880
|
role="button"
|
|
784
881
|
></button>
|
|
@@ -786,7 +883,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
786
883
|
<div class="k-list-scroller k-selectable">
|
|
787
884
|
<div class="{{ listClasses }}">
|
|
788
885
|
<div class="k-list-content">
|
|
789
|
-
<ul
|
|
886
|
+
<ul
|
|
790
887
|
#listbox
|
|
791
888
|
class="k-list-ul"
|
|
792
889
|
role="listbox"
|
|
@@ -794,7 +891,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
794
891
|
[attr.aria-multiselectable]="false"
|
|
795
892
|
>
|
|
796
893
|
<li
|
|
797
|
-
*ngFor="let item of data; let i = index
|
|
894
|
+
*ngFor="let item of data; let i = index"
|
|
798
895
|
kendoListBoxItemSelectable
|
|
799
896
|
class="k-list-item"
|
|
800
897
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
@@ -803,11 +900,13 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
803
900
|
[index]="i"
|
|
804
901
|
[class.k-disabled]="itemDisabled(item)"
|
|
805
902
|
>
|
|
806
|
-
<ng-template
|
|
903
|
+
<ng-template
|
|
904
|
+
*ngIf="itemTemplate; else defaultItemTemplate"
|
|
807
905
|
[templateContext]="{
|
|
808
906
|
templateRef: itemTemplate.templateRef,
|
|
809
907
|
$implicit: item
|
|
810
|
-
}"
|
|
908
|
+
}"
|
|
909
|
+
>
|
|
811
910
|
</ng-template>
|
|
812
911
|
<ng-template #defaultItemTemplate>
|
|
813
912
|
<span class="k-list-item-text">{{ getText(item) }}</span>
|
|
@@ -817,13 +916,44 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
817
916
|
</div>
|
|
818
917
|
</div>
|
|
819
918
|
</div>
|
|
820
|
-
`, isInline: true, components: [{ type:
|
|
919
|
+
`, isInline: true, components: [{ type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i4.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
|
|
821
920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
822
921
|
type: Component,
|
|
823
922
|
args: [{
|
|
824
923
|
selector: 'kendo-listbox',
|
|
825
|
-
providers: [
|
|
924
|
+
providers: [
|
|
925
|
+
ListBoxSelectionService,
|
|
926
|
+
KeyboardNavigationService,
|
|
927
|
+
LocalizationService,
|
|
928
|
+
{
|
|
929
|
+
provide: L10N_PREFIX,
|
|
930
|
+
useValue: 'kendo.listbox'
|
|
931
|
+
},
|
|
932
|
+
],
|
|
826
933
|
template: `
|
|
934
|
+
<ng-container kendoListBoxLocalizedMessages
|
|
935
|
+
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
936
|
+
moveUp="Move Up"
|
|
937
|
+
|
|
938
|
+
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
939
|
+
moveDown="Move Down"
|
|
940
|
+
|
|
941
|
+
i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
|
|
942
|
+
transferTo="Transfer To"
|
|
943
|
+
|
|
944
|
+
i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
|
|
945
|
+
transferAllTo="Transfer All To"
|
|
946
|
+
|
|
947
|
+
i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
|
|
948
|
+
transferFrom="Transfer From"
|
|
949
|
+
|
|
950
|
+
i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
|
|
951
|
+
transferAllFrom="Transfer All From"
|
|
952
|
+
|
|
953
|
+
i18n-remove="kendo.listbox.remove|The title of the Remove button"
|
|
954
|
+
remove="Remove"
|
|
955
|
+
>
|
|
956
|
+
</ng-container>
|
|
827
957
|
<div
|
|
828
958
|
#toolbar
|
|
829
959
|
class="k-listbox-actions"
|
|
@@ -833,13 +963,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
833
963
|
>
|
|
834
964
|
<button
|
|
835
965
|
#tools
|
|
836
|
-
*ngFor="let tool of selectedTools; let i = index
|
|
966
|
+
*ngFor="let tool of selectedTools; let i = index"
|
|
837
967
|
kendoButton
|
|
838
968
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
839
969
|
[size]="this.size"
|
|
840
970
|
[icon]="tool.icon"
|
|
841
971
|
[svgIcon]="tool.svgIcon"
|
|
842
|
-
[attr.title]="tool.
|
|
972
|
+
[attr.title]="messageFor(tool.name)"
|
|
843
973
|
(click)="performAction(tool.name)"
|
|
844
974
|
role="button"
|
|
845
975
|
></button>
|
|
@@ -847,7 +977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
847
977
|
<div class="k-list-scroller k-selectable">
|
|
848
978
|
<div class="{{ listClasses }}">
|
|
849
979
|
<div class="k-list-content">
|
|
850
|
-
<ul
|
|
980
|
+
<ul
|
|
851
981
|
#listbox
|
|
852
982
|
class="k-list-ul"
|
|
853
983
|
role="listbox"
|
|
@@ -855,7 +985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
855
985
|
[attr.aria-multiselectable]="false"
|
|
856
986
|
>
|
|
857
987
|
<li
|
|
858
|
-
*ngFor="let item of data; let i = index
|
|
988
|
+
*ngFor="let item of data; let i = index"
|
|
859
989
|
kendoListBoxItemSelectable
|
|
860
990
|
class="k-list-item"
|
|
861
991
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
@@ -864,11 +994,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
864
994
|
[index]="i"
|
|
865
995
|
[class.k-disabled]="itemDisabled(item)"
|
|
866
996
|
>
|
|
867
|
-
<ng-template
|
|
997
|
+
<ng-template
|
|
998
|
+
*ngIf="itemTemplate; else defaultItemTemplate"
|
|
868
999
|
[templateContext]="{
|
|
869
1000
|
templateRef: itemTemplate.templateRef,
|
|
870
1001
|
$implicit: item
|
|
871
|
-
}"
|
|
1002
|
+
}"
|
|
1003
|
+
>
|
|
872
1004
|
</ng-template>
|
|
873
1005
|
<ng-template #defaultItemTemplate>
|
|
874
1006
|
<span class="k-list-item-text">{{ getText(item) }}</span>
|
|
@@ -878,9 +1010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
878
1010
|
</div>
|
|
879
1011
|
</div>
|
|
880
1012
|
</div>
|
|
881
|
-
|
|
1013
|
+
`,
|
|
882
1014
|
}]
|
|
883
|
-
}], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { listboxClassName: [{
|
|
1015
|
+
}], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { listboxClassName: [{
|
|
884
1016
|
type: HostBinding,
|
|
885
1017
|
args: ['class.k-listbox']
|
|
886
1018
|
}], itemTemplate: [{
|
|
@@ -1052,20 +1184,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
1052
1184
|
type: Input
|
|
1053
1185
|
}] } });
|
|
1054
1186
|
|
|
1187
|
+
/**
|
|
1188
|
+
* Custom component messages override default component messages
|
|
1189
|
+
* ([see example]({% slug globalization_listbox %}#toc-localization)).
|
|
1190
|
+
*/
|
|
1191
|
+
class CustomMessagesComponent extends Messages {
|
|
1192
|
+
constructor(service) {
|
|
1193
|
+
super();
|
|
1194
|
+
this.service = service;
|
|
1195
|
+
}
|
|
1196
|
+
get override() {
|
|
1197
|
+
return true;
|
|
1198
|
+
}
|
|
1199
|
+
}
|
|
1200
|
+
CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1201
|
+
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-listbox-messages", providers: [
|
|
1202
|
+
{
|
|
1203
|
+
provide: Messages,
|
|
1204
|
+
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
1205
|
+
}
|
|
1206
|
+
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
1208
|
+
type: Component,
|
|
1209
|
+
args: [{
|
|
1210
|
+
providers: [
|
|
1211
|
+
{
|
|
1212
|
+
provide: Messages,
|
|
1213
|
+
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
1214
|
+
}
|
|
1215
|
+
],
|
|
1216
|
+
selector: 'kendo-listbox-messages',
|
|
1217
|
+
template: ``
|
|
1218
|
+
}]
|
|
1219
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
|
1220
|
+
|
|
1221
|
+
const declarationsExports = [
|
|
1222
|
+
LocalizedMessagesDirective,
|
|
1223
|
+
ListBoxComponent,
|
|
1224
|
+
ItemTemplateDirective,
|
|
1225
|
+
ItemSelectableDirective,
|
|
1226
|
+
DataBindingDirective,
|
|
1227
|
+
CustomMessagesComponent,
|
|
1228
|
+
];
|
|
1055
1229
|
/**
|
|
1056
1230
|
* Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
|
|
1057
1231
|
*/
|
|
1058
1232
|
class ListBoxModule {
|
|
1059
1233
|
}
|
|
1060
1234
|
ListBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1061
|
-
ListBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxModule, declarations: [
|
|
1235
|
+
ListBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxModule, declarations: [LocalizedMessagesDirective,
|
|
1236
|
+
ListBoxComponent,
|
|
1237
|
+
ItemTemplateDirective,
|
|
1238
|
+
ItemSelectableDirective,
|
|
1239
|
+
DataBindingDirective,
|
|
1240
|
+
CustomMessagesComponent], imports: [ButtonsModule, CommonModule], exports: [LocalizedMessagesDirective,
|
|
1241
|
+
ListBoxComponent,
|
|
1242
|
+
ItemTemplateDirective,
|
|
1243
|
+
ItemSelectableDirective,
|
|
1244
|
+
DataBindingDirective,
|
|
1245
|
+
CustomMessagesComponent] });
|
|
1062
1246
|
ListBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxModule, imports: [[ButtonsModule, CommonModule]] });
|
|
1063
1247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxModule, decorators: [{
|
|
1064
1248
|
type: NgModule,
|
|
1065
1249
|
args: [{
|
|
1066
1250
|
imports: [ButtonsModule, CommonModule],
|
|
1067
|
-
declarations: [
|
|
1068
|
-
exports: [
|
|
1251
|
+
declarations: [declarationsExports],
|
|
1252
|
+
exports: [declarationsExports]
|
|
1069
1253
|
}]
|
|
1070
1254
|
}] });
|
|
1071
1255
|
|
|
@@ -1073,5 +1257,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
1073
1257
|
* Generated bundle index. Do not edit.
|
|
1074
1258
|
*/
|
|
1075
1259
|
|
|
1076
|
-
export { DataBindingDirective, ItemSelectableDirective, ItemTemplateDirective, ListBoxComponent, ListBoxModule };
|
|
1260
|
+
export { CustomMessagesComponent, DataBindingDirective, ItemSelectableDirective, ItemTemplateDirective, ListBoxComponent, ListBoxModule, LocalizedMessagesDirective };
|
|
1077
1261
|
|