@progress/kendo-angular-sortable 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.
|
@@ -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: 1764593158,
|
|
14
|
+
version: '21.2.0-develop.10',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
6
|
import { Component, Input, Output, QueryList, ContentChildren, ViewChild, ViewChildren, TemplateRef, ElementRef, EventEmitter, HostBinding, NgZone, ChangeDetectorRef, forwardRef, Renderer2 } from '@angular/core';
|
|
7
7
|
import { Subject, merge } from 'rxjs';
|
|
8
|
-
import { isDocumentAvailable, isChanged, Keys, EventsOutsideAngularDirective,
|
|
8
|
+
import { isDocumentAvailable, isChanged, Keys, EventsOutsideAngularDirective, normalizeKeys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { getAllFocusableChildren, keepFocusWithinComponent, relativeContextElement } from './util';
|
|
10
10
|
import { filter, take } from 'rxjs/operators';
|
|
11
11
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
@@ -19,7 +19,7 @@ import { NavigateEvent } from './navigate-event';
|
|
|
19
19
|
import { DraggableEvent } from './draggable-event';
|
|
20
20
|
import { DragStartEvent, DragOverEvent, DragEndEvent } from './sortable-events';
|
|
21
21
|
import { Draggable } from '@progress/kendo-draggable';
|
|
22
|
-
import {
|
|
22
|
+
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
23
23
|
import * as i0 from "@angular/core";
|
|
24
24
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
25
25
|
import * as i2 from "./sortable.service";
|
|
@@ -575,7 +575,7 @@ export class SortableComponent {
|
|
|
575
575
|
const item = this.itemWrappers.toArray()[index]?.nativeElement;
|
|
576
576
|
const isItemFocused = document.activeElement === item;
|
|
577
577
|
const hasFocus = this.activeIndex !== -1;
|
|
578
|
-
const keyCode =
|
|
578
|
+
const keyCode = normalizeKeys(event);
|
|
579
579
|
if (keyCode === Keys.Tab && !isItemFocused) {
|
|
580
580
|
keepFocusWithinComponent(event, item);
|
|
581
581
|
return;
|
|
@@ -965,7 +965,7 @@ export class SortableComponent {
|
|
|
965
965
|
}
|
|
966
966
|
}
|
|
967
967
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i2.SortableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
968
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
968
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
|
|
969
969
|
LocalizationService,
|
|
970
970
|
{
|
|
971
971
|
provide: L10N_PREFIX,
|
|
@@ -976,7 +976,8 @@ export class SortableComponent {
|
|
|
976
976
|
useExisting: forwardRef(() => SortableComponent)
|
|
977
977
|
}
|
|
978
978
|
], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
|
|
979
|
-
|
|
979
|
+
@for (item of _localData; track trackBy(i, item); let i = $index) {
|
|
980
|
+
<div #itemWrapper
|
|
980
981
|
kendoDraggable
|
|
981
982
|
role="listitem"
|
|
982
983
|
[attr.aria-grabbed]="i===dragIndex"
|
|
@@ -991,39 +992,51 @@ export class SortableComponent {
|
|
|
991
992
|
[disabled]="!itemEnabled(i)"
|
|
992
993
|
[ngClass]="currentItemClass(i)"
|
|
993
994
|
[ngStyle]="currentItemStyle(i)"
|
|
994
|
-
|
|
995
995
|
(focus)="focusHandler(i)"
|
|
996
996
|
(blur)="blurHandler()"
|
|
997
997
|
[kendoEventsOutsideAngular]="{
|
|
998
998
|
keydown: keydownHandler
|
|
999
999
|
}"
|
|
1000
|
-
|
|
1001
|
-
|
|
1000
|
+
>
|
|
1001
|
+
@if (itemTemplateRef) {
|
|
1002
|
+
<ng-container
|
|
1002
1003
|
[ngTemplateOutlet]="itemTemplate(i)"
|
|
1003
1004
|
[ngTemplateOutletContext]="item">
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1005
|
+
</ng-container>
|
|
1006
|
+
}
|
|
1007
|
+
@if (!itemTemplateRef) {
|
|
1008
|
+
{{item.item}}
|
|
1009
|
+
}
|
|
1010
|
+
</div>
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
@if (!_data.length || _localData.length === 1 && _localData[0].hidden) {
|
|
1014
|
+
<ng-container #noDataRef>
|
|
1009
1015
|
<div
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1016
|
+
kendoDraggable
|
|
1017
|
+
[index]="0"
|
|
1018
|
+
[disabled]="true"
|
|
1019
|
+
[attr.data-sortable-id]="id"
|
|
1020
|
+
[attr.data-sortable-index]="0"
|
|
1021
|
+
[ngStyle]="currentItemStyle(-1)"
|
|
1022
|
+
[ngClass]="currentItemClass(-1)"
|
|
1017
1023
|
>{{emptyText}}</div>
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1024
|
+
</ng-container>
|
|
1025
|
+
}
|
|
1026
|
+
@if (hintVisible()) {
|
|
1027
|
+
<div [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
|
|
1028
|
+
@if (itemTemplateRef) {
|
|
1029
|
+
<ng-container
|
|
1021
1030
|
[ngTemplateOutlet]="itemTemplateRef"
|
|
1022
1031
|
[ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1032
|
+
</ng-container>
|
|
1033
|
+
}
|
|
1034
|
+
@if (!itemTemplateRef) {
|
|
1035
|
+
{{_localData[dragIndex].item}}
|
|
1036
|
+
}
|
|
1037
|
+
</div>
|
|
1038
|
+
}
|
|
1039
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
|
|
1027
1040
|
}
|
|
1028
1041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SortableComponent, decorators: [{
|
|
1029
1042
|
type: Component,
|
|
@@ -1042,7 +1055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1042
1055
|
],
|
|
1043
1056
|
selector: 'kendo-sortable',
|
|
1044
1057
|
template: `
|
|
1045
|
-
|
|
1058
|
+
@for (item of _localData; track trackBy(i, item); let i = $index) {
|
|
1059
|
+
<div #itemWrapper
|
|
1046
1060
|
kendoDraggable
|
|
1047
1061
|
role="listitem"
|
|
1048
1062
|
[attr.aria-grabbed]="i===dragIndex"
|
|
@@ -1057,41 +1071,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1057
1071
|
[disabled]="!itemEnabled(i)"
|
|
1058
1072
|
[ngClass]="currentItemClass(i)"
|
|
1059
1073
|
[ngStyle]="currentItemStyle(i)"
|
|
1060
|
-
|
|
1061
1074
|
(focus)="focusHandler(i)"
|
|
1062
1075
|
(blur)="blurHandler()"
|
|
1063
1076
|
[kendoEventsOutsideAngular]="{
|
|
1064
1077
|
keydown: keydownHandler
|
|
1065
1078
|
}"
|
|
1066
|
-
|
|
1067
|
-
|
|
1079
|
+
>
|
|
1080
|
+
@if (itemTemplateRef) {
|
|
1081
|
+
<ng-container
|
|
1068
1082
|
[ngTemplateOutlet]="itemTemplate(i)"
|
|
1069
1083
|
[ngTemplateOutletContext]="item">
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1084
|
+
</ng-container>
|
|
1085
|
+
}
|
|
1086
|
+
@if (!itemTemplateRef) {
|
|
1087
|
+
{{item.item}}
|
|
1088
|
+
}
|
|
1089
|
+
</div>
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
@if (!_data.length || _localData.length === 1 && _localData[0].hidden) {
|
|
1093
|
+
<ng-container #noDataRef>
|
|
1075
1094
|
<div
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1095
|
+
kendoDraggable
|
|
1096
|
+
[index]="0"
|
|
1097
|
+
[disabled]="true"
|
|
1098
|
+
[attr.data-sortable-id]="id"
|
|
1099
|
+
[attr.data-sortable-index]="0"
|
|
1100
|
+
[ngStyle]="currentItemStyle(-1)"
|
|
1101
|
+
[ngClass]="currentItemClass(-1)"
|
|
1083
1102
|
>{{emptyText}}</div>
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1103
|
+
</ng-container>
|
|
1104
|
+
}
|
|
1105
|
+
@if (hintVisible()) {
|
|
1106
|
+
<div [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
|
|
1107
|
+
@if (itemTemplateRef) {
|
|
1108
|
+
<ng-container
|
|
1087
1109
|
[ngTemplateOutlet]="itemTemplateRef"
|
|
1088
1110
|
[ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1111
|
+
</ng-container>
|
|
1112
|
+
}
|
|
1113
|
+
@if (!itemTemplateRef) {
|
|
1114
|
+
{{_localData[dragIndex].item}}
|
|
1115
|
+
}
|
|
1116
|
+
</div>
|
|
1117
|
+
}
|
|
1118
|
+
`,
|
|
1093
1119
|
standalone: true,
|
|
1094
|
-
imports: [
|
|
1120
|
+
imports: [DraggableDirective, NgClass, NgStyle, NgTemplateOutlet, EventsOutsideAngularDirective]
|
|
1095
1121
|
}]
|
|
1096
1122
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.SortableService }, { type: i0.ChangeDetectorRef }], propDecorators: { tabIndex: [{
|
|
1097
1123
|
type: Input
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
6
|
import { Injectable, Directive, Input, HostBinding, QueryList, EventEmitter, forwardRef, TemplateRef, Component, ContentChildren, ViewChildren, ViewChild, Output, NgModule } from '@angular/core';
|
|
7
7
|
import { Subject, merge } from 'rxjs';
|
|
8
|
-
import { isDocumentAvailable, focusableSelector, isChanged, Keys,
|
|
8
|
+
import { isDocumentAvailable, focusableSelector, isChanged, Keys, normalizeKeys, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
|
|
9
9
|
import { filter, tap, take, switchMap } from 'rxjs/operators';
|
|
10
10
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
11
11
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
12
12
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
13
13
|
import { Draggable } from '@progress/kendo-draggable';
|
|
14
|
-
import {
|
|
14
|
+
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
15
15
|
|
|
16
16
|
const NODE_NAME_PREDICATES = {};
|
|
17
17
|
const NODE_ATTR_PREDICATES = {};
|
|
@@ -193,8 +193,8 @@ const packageMetadata = {
|
|
|
193
193
|
productName: 'Kendo UI for Angular',
|
|
194
194
|
productCode: 'KENDOUIANGULAR',
|
|
195
195
|
productCodes: ['KENDOUIANGULAR'],
|
|
196
|
-
publishDate:
|
|
197
|
-
version: '21.
|
|
196
|
+
publishDate: 1764593158,
|
|
197
|
+
version: '21.2.0-develop.10',
|
|
198
198
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
199
199
|
};
|
|
200
200
|
|
|
@@ -1208,7 +1208,7 @@ class SortableComponent {
|
|
|
1208
1208
|
const item = this.itemWrappers.toArray()[index]?.nativeElement;
|
|
1209
1209
|
const isItemFocused = document.activeElement === item;
|
|
1210
1210
|
const hasFocus = this.activeIndex !== -1;
|
|
1211
|
-
const keyCode =
|
|
1211
|
+
const keyCode = normalizeKeys(event);
|
|
1212
1212
|
if (keyCode === Keys.Tab && !isItemFocused) {
|
|
1213
1213
|
keepFocusWithinComponent(event, item);
|
|
1214
1214
|
return;
|
|
@@ -1598,7 +1598,7 @@ class SortableComponent {
|
|
|
1598
1598
|
}
|
|
1599
1599
|
}
|
|
1600
1600
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1601
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
|
|
1602
1602
|
LocalizationService,
|
|
1603
1603
|
{
|
|
1604
1604
|
provide: L10N_PREFIX,
|
|
@@ -1609,7 +1609,8 @@ class SortableComponent {
|
|
|
1609
1609
|
useExisting: forwardRef(() => SortableComponent)
|
|
1610
1610
|
}
|
|
1611
1611
|
], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
|
|
1612
|
-
|
|
1612
|
+
@for (item of _localData; track trackBy(i, item); let i = $index) {
|
|
1613
|
+
<div #itemWrapper
|
|
1613
1614
|
kendoDraggable
|
|
1614
1615
|
role="listitem"
|
|
1615
1616
|
[attr.aria-grabbed]="i===dragIndex"
|
|
@@ -1624,39 +1625,51 @@ class SortableComponent {
|
|
|
1624
1625
|
[disabled]="!itemEnabled(i)"
|
|
1625
1626
|
[ngClass]="currentItemClass(i)"
|
|
1626
1627
|
[ngStyle]="currentItemStyle(i)"
|
|
1627
|
-
|
|
1628
1628
|
(focus)="focusHandler(i)"
|
|
1629
1629
|
(blur)="blurHandler()"
|
|
1630
1630
|
[kendoEventsOutsideAngular]="{
|
|
1631
1631
|
keydown: keydownHandler
|
|
1632
1632
|
}"
|
|
1633
|
-
|
|
1634
|
-
|
|
1633
|
+
>
|
|
1634
|
+
@if (itemTemplateRef) {
|
|
1635
|
+
<ng-container
|
|
1635
1636
|
[ngTemplateOutlet]="itemTemplate(i)"
|
|
1636
1637
|
[ngTemplateOutletContext]="item">
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1638
|
+
</ng-container>
|
|
1639
|
+
}
|
|
1640
|
+
@if (!itemTemplateRef) {
|
|
1641
|
+
{{item.item}}
|
|
1642
|
+
}
|
|
1643
|
+
</div>
|
|
1644
|
+
}
|
|
1645
|
+
|
|
1646
|
+
@if (!_data.length || _localData.length === 1 && _localData[0].hidden) {
|
|
1647
|
+
<ng-container #noDataRef>
|
|
1642
1648
|
<div
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1649
|
+
kendoDraggable
|
|
1650
|
+
[index]="0"
|
|
1651
|
+
[disabled]="true"
|
|
1652
|
+
[attr.data-sortable-id]="id"
|
|
1653
|
+
[attr.data-sortable-index]="0"
|
|
1654
|
+
[ngStyle]="currentItemStyle(-1)"
|
|
1655
|
+
[ngClass]="currentItemClass(-1)"
|
|
1650
1656
|
>{{emptyText}}</div>
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1657
|
+
</ng-container>
|
|
1658
|
+
}
|
|
1659
|
+
@if (hintVisible()) {
|
|
1660
|
+
<div [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
|
|
1661
|
+
@if (itemTemplateRef) {
|
|
1662
|
+
<ng-container
|
|
1654
1663
|
[ngTemplateOutlet]="itemTemplateRef"
|
|
1655
1664
|
[ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1665
|
+
</ng-container>
|
|
1666
|
+
}
|
|
1667
|
+
@if (!itemTemplateRef) {
|
|
1668
|
+
{{_localData[dragIndex].item}}
|
|
1669
|
+
}
|
|
1670
|
+
</div>
|
|
1671
|
+
}
|
|
1672
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
|
|
1660
1673
|
}
|
|
1661
1674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SortableComponent, decorators: [{
|
|
1662
1675
|
type: Component,
|
|
@@ -1675,7 +1688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1675
1688
|
],
|
|
1676
1689
|
selector: 'kendo-sortable',
|
|
1677
1690
|
template: `
|
|
1678
|
-
|
|
1691
|
+
@for (item of _localData; track trackBy(i, item); let i = $index) {
|
|
1692
|
+
<div #itemWrapper
|
|
1679
1693
|
kendoDraggable
|
|
1680
1694
|
role="listitem"
|
|
1681
1695
|
[attr.aria-grabbed]="i===dragIndex"
|
|
@@ -1690,41 +1704,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1690
1704
|
[disabled]="!itemEnabled(i)"
|
|
1691
1705
|
[ngClass]="currentItemClass(i)"
|
|
1692
1706
|
[ngStyle]="currentItemStyle(i)"
|
|
1693
|
-
|
|
1694
1707
|
(focus)="focusHandler(i)"
|
|
1695
1708
|
(blur)="blurHandler()"
|
|
1696
1709
|
[kendoEventsOutsideAngular]="{
|
|
1697
1710
|
keydown: keydownHandler
|
|
1698
1711
|
}"
|
|
1699
|
-
|
|
1700
|
-
|
|
1712
|
+
>
|
|
1713
|
+
@if (itemTemplateRef) {
|
|
1714
|
+
<ng-container
|
|
1701
1715
|
[ngTemplateOutlet]="itemTemplate(i)"
|
|
1702
1716
|
[ngTemplateOutletContext]="item">
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1717
|
+
</ng-container>
|
|
1718
|
+
}
|
|
1719
|
+
@if (!itemTemplateRef) {
|
|
1720
|
+
{{item.item}}
|
|
1721
|
+
}
|
|
1722
|
+
</div>
|
|
1723
|
+
}
|
|
1724
|
+
|
|
1725
|
+
@if (!_data.length || _localData.length === 1 && _localData[0].hidden) {
|
|
1726
|
+
<ng-container #noDataRef>
|
|
1708
1727
|
<div
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1728
|
+
kendoDraggable
|
|
1729
|
+
[index]="0"
|
|
1730
|
+
[disabled]="true"
|
|
1731
|
+
[attr.data-sortable-id]="id"
|
|
1732
|
+
[attr.data-sortable-index]="0"
|
|
1733
|
+
[ngStyle]="currentItemStyle(-1)"
|
|
1734
|
+
[ngClass]="currentItemClass(-1)"
|
|
1716
1735
|
>{{emptyText}}</div>
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1736
|
+
</ng-container>
|
|
1737
|
+
}
|
|
1738
|
+
@if (hintVisible()) {
|
|
1739
|
+
<div [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
|
|
1740
|
+
@if (itemTemplateRef) {
|
|
1741
|
+
<ng-container
|
|
1720
1742
|
[ngTemplateOutlet]="itemTemplateRef"
|
|
1721
1743
|
[ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1744
|
+
</ng-container>
|
|
1745
|
+
}
|
|
1746
|
+
@if (!itemTemplateRef) {
|
|
1747
|
+
{{_localData[dragIndex].item}}
|
|
1748
|
+
}
|
|
1749
|
+
</div>
|
|
1750
|
+
}
|
|
1751
|
+
`,
|
|
1726
1752
|
standalone: true,
|
|
1727
|
-
imports: [
|
|
1753
|
+
imports: [DraggableDirective, NgClass, NgStyle, NgTemplateOutlet, EventsOutsideAngularDirective]
|
|
1728
1754
|
}]
|
|
1729
1755
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: SortableService }, { type: i0.ChangeDetectorRef }], propDecorators: { tabIndex: [{
|
|
1730
1756
|
type: Input
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-sortable",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.2.0-develop.10",
|
|
4
4
|
"description": "A Sortable Component for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"package": {
|
|
20
20
|
"productName": "Kendo UI for Angular",
|
|
21
21
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
22
|
+
"publishDate": 1764593158,
|
|
23
23
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"@angular/core": "18 - 21",
|
|
30
30
|
"@angular/platform-browser": "18 - 21",
|
|
31
31
|
"@progress/kendo-licensing": "^1.7.0",
|
|
32
|
-
"@progress/kendo-angular-common": "21.
|
|
33
|
-
"@progress/kendo-angular-l10n": "21.
|
|
32
|
+
"@progress/kendo-angular-common": "21.2.0-develop.10",
|
|
33
|
+
"@progress/kendo-angular-l10n": "21.2.0-develop.10",
|
|
34
34
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"tslib": "^2.3.1",
|
|
38
|
-
"@progress/kendo-angular-schematics": "21.
|
|
38
|
+
"@progress/kendo-angular-schematics": "21.2.0-develop.10",
|
|
39
39
|
"@progress/kendo-draggable": "^3.0.2"
|
|
40
40
|
},
|
|
41
41
|
"schematics": "./schematics/collection.json",
|