@progress/kendo-angular-sortable

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { QueryList, TemplateRef, ElementRef, EventEmitter, OnInit, OnDestroy, AfterViewChecked, AfterContentInit, NgZone, ChangeDetectorRef, SimpleChanges, OnChanges, Renderer2, AfterViewInit, TrackByFunction } from '@angular/core'; import { Subject } from 'rxjs'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { SortableService } from './sortable.service'; import { DraggableDirective } from './draggable.directive'; import { SortableContainer } from './sortable-container'; import { DataAddEvent, DataMoveEvent, DataRemoveEvent } from './data-events'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Sortable component for Angular]({% slug overview_sortable %}). * * @example * ```html * <kendo-sortable [data]="['Item 1', 'Item 2', 'Item 3']"></kendo-sortable> * ``` */ export declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit, AfterViewChecked, AfterContentInit, SortableContainer { private ngZone; private renderer; private changeDetector; private localization; private cdr; /** * Specifies the tab index of the Sortable component. */ tabIndex: number; /** * Configures how the Sortable component tracks changes in its items collection. */ trackBy: TrackByFunction<any>; /** * Sets an array of any data that is used as a data source for the Sortable. */ set data(data: Array<any>); get data(): Array<any>; /** * Sets a boolean value that determines whether the Sortable items are navigable using the keyboard. [See example]({% slug keyboard_navigation_sortable %}). * @default true */ navigable: boolean; /** * Enables or disables built-in animations. * @default false */ animation: boolean; /** * Sets an array of integers that represent the indexes of the disabled items from the data array. [See example](slug:items_sortable#toc-disabling-items). */ disabledIndexes: number[]; /** * Sets a string that represents the name of the zone to which the Sortable belongs * ([see example](slug:items_sortable#toc-transferring-of-items)). Items can be transferred * between Sortables in the same zone. */ zone: string; /** * Defines the zones from which items can be transferred onto the current Sortable component * ([see example](slug:items_sortable#toc-transferring-of-items)). If the `acceptZones` property * of the target Sortable is set, you can transfer items between Sortables in different zones. */ acceptZones: string[]; /** * Represents the CSS styles applied to each Sortable item. */ itemStyle: { [key: string]: string; }; /** * Defines the CSS styles applied to an empty item ([see example]({% slug templates_sortable %})). */ emptyItemStyle: { [key: string]: string; }; /** * Defines the CSS styles which are applied to the currently dragged item ([see example]({% slug templates_sortable %})). */ activeItemStyle: { [key: string]: string; }; /** * Defines the CSS styles which are applied to all disabled items. */ disabledItemStyle: { [key: string]: string; }; /** * Defines the class which is applied to each Sortable item. */ itemClass: string | string[] | Set<string>; /** * Defines the class which is applied to the active Sortable item. */ activeItemClass: string | string[] | Set<string>; /** * Defines the class which is applied to the empty item when the Sortable has empty data. */ emptyItemClass: string | string[] | Set<string>; /** * Defines the class which is applied to each disabled Sortable item. */ disabledItemClass: string | string[] | Set<string>; /** * Sets the text message that will be displayed when the Sortable has no items. */ emptyText: string; /** * @hidden */ defaultTemplateRef: QueryList<TemplateRef<any>>; /** * Defines the template that will be used for rendering the items. * @hidden */ itemTemplateDirectiveRef: QueryList<TemplateRef<any>>; /** * Defines the template that will be used for rendering the placeholder. * @hidden */ placeholderTemplateDirectiveRef: QueryList<TemplateRef<any>>; itemWrappers: QueryList<any>; draggables: QueryList<DraggableDirective>; noDataContainer: ElementRef; hint: ElementRef; /** * Fires when the dragging of an item is started. */ dragStart: EventEmitter<any>; /** * Fires when the dragging of an item is completed. */ dragEnd: EventEmitter<any>; /** * Fires while the dragging of an item is in progress. */ dragOver: EventEmitter<any>; /** * Fires when dragging an item outside of the component. */ dragLeave: EventEmitter<any>; /** * Fires while the moving an item from one position to another. */ dataMove: EventEmitter<DataMoveEvent>; /** * Fires when a new item is added to the Sortable. */ dataAdd: EventEmitter<DataAddEvent>; /** * Fires when an item is removed from the Sortable. */ dataRemove: EventEmitter<DataRemoveEvent>; /** * Fires when navigating using the keyboard. */ navigate: EventEmitter<any>; /** * The index of the currently focused item. * If no item is focused, set to `-1`. */ activeIndex: number; get touchAction(): string; get dir(): string; hostRole: string; /** * Flag indicating if the component is currently playing animations. * @hidden */ animating: boolean; /** * The index of the currently dragged item. */ dragIndex: number; /** * The index of the item above which the dragged item is. */ dragOverIndex: number; onDragStartSubject: Subject<any>; onDragOverSubject: Subject<any>; onDragLeaveSubject: Subject<any>; onDragEndSubject: Subject<any>; /** * The SortableComponent's HTMLElement. */ wrapper: HTMLElement; /** * The location of the hint indicator when dragging on mobile devices. */ hintLocation: { x: number; y: number; }; id: string; itemTemplateRef: TemplateRef<any>; placeholderTemplateRef: TemplateRef<any>; _data: Array<any>; _localData: Array<any>; /** * @hidden */ ariaKeyShortcuts: string; private localizationChangeSubscription; private dragStartSubscription; private dragOverSubscription; private dragLeaveSubscription; private dragEndSubscription; private childrenTabindexSubscription; private focusableItems; private animationDuration; private afterKeyPress; private sortableService; private _hideActiveItem; private prevActiveIndex; private direction; private _animating; private draggable; private offsetParent; protected setItemData(data: any, i: number): any; /** * @hidden */ itemTemplate(index: number): TemplateRef<any>; constructor(ngZone: NgZone, renderer: Renderer2, changeDetector: ChangeDetectorRef, localization: LocalizationService, wrapper: ElementRef, sortableService: SortableService, cdr: ChangeDetectorRef); ngOnInit(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; ngAfterContentInit(): void; ngAfterViewChecked(): void; /** * @hidden */ setFocusableChildren(): void; /** * @hidden */ updateCacheIndices(): void; /** * @hidden */ cacheData(): void; /** * @hidden */ startDrag(event: any): boolean; /** * @hidden */ setInitialItemTabindex(): void; /** * @hidden */ drag(event: any): boolean; /** * @hidden */ leave(event: any): boolean; /** * @hidden */ endDrag(event: any): boolean; /** * @hidden */ hintVisible(): boolean; /** * @hidden */ currentItemStyle(index: number): { [key: string]: string; }; /** * @hidden */ currentItemClass(index: number): string | string[] | Set<string>; /** * @hidden */ hintStyle(): { [key: string]: string; }; /** * @hidden */ itemEnabled(index: number): boolean; /** * @hidden */ acceptDragFrom(sortableComponent: SortableComponent): boolean; /** * @hidden */ ariaDropEffect(index: number): string; /** * @hidden */ focusHandler(index: number): void; /** * @hidden */ blurHandler(): void; /** * @hidden */ onArrowHandler(event: any, keyCode: string): void; /** * @hidden */ onEnterHandler(item: any): void; /** * @hidden */ onEscapeHandler(event: KeyboardEvent): void; /** * @hidden */ keydownHandler: (event: KeyboardEvent) => void; /** * Removes the currently active item from the Data collection that the Sortable uses. */ removeDataItem(index: number): void; /** * Sets a boolean value that indicates whether the item will be hidden or not. * @hidden */ hideItem(index: number, hidden?: boolean): void; /** * Gets or sets a boolean value that indicates whether the currently dragged item will be hidden. * * If the currently dragged item is hidden, returns `true`. * If the currently dragged item is visible, returns `false`. */ get hideActiveItem(): boolean; set hideActiveItem(value: boolean); /** * Clears the active item. * An active item is the one that is currently focused when the user navigates with the keyboard. */ clearActiveItem(): void; /** * Returns the currently active item when the user navigates with the keyboard. * @return - The data item which is currently active. */ getActiveItem(): any; /** * Inserts a new data item at a particular index in the Sortable component. * @param dataItem - The data item. * @param index - The index at which the data item is inserted. */ addDataItem(dataItem: any, index: number): void; /** * Moves a data item from one index to another in the Sortable component. * @param fromIndex - The data item's index. * @param toIndex - The index which the data item should be moved to. Item currently sitting at that index is pushed back one position. */ moveItem(fromIndex: number, toIndex: number): void; /** * @hidden */ animate(draggables: any[]): void; /** * @hidden */ positionHintFromEvent(event: any): void; /** * @hidden */ parentOffset(): any; /** * @hidden */ markForCheck(): void; /** * @hidden */ reflow(element: any): void; /** * @hidden */ swapFocusableChildren(firstItemIndex: number, secondItemIndex: number): void; /** * @hidden */ applyAnimationStyle(el: any, prop: any, val: string): void; private subscribeEvents; private unsubscribeEvents; private placeHolderItemData; private fixFocus; static ɵfac: i0.ɵɵFactoryDeclaration<SortableComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<SortableComponent, "kendo-sortable", ["kendoSortable"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "data": { "alias": "data"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "disabledIndexes": { "alias": "disabledIndexes"; "required": false; }; "zone": { "alias": "zone"; "required": false; }; "acceptZones": { "alias": "acceptZones"; "required": false; }; "itemStyle": { "alias": "itemStyle"; "required": false; }; "emptyItemStyle": { "alias": "emptyItemStyle"; "required": false; }; "activeItemStyle": { "alias": "activeItemStyle"; "required": false; }; "disabledItemStyle": { "alias": "disabledItemStyle"; "required": false; }; "itemClass": { "alias": "itemClass"; "required": false; }; "activeItemClass": { "alias": "activeItemClass"; "required": false; }; "emptyItemClass": { "alias": "emptyItemClass"; "required": false; }; "disabledItemClass": { "alias": "disabledItemClass"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "dragOver": "dragOver"; "dragLeave": "dragLeave"; "dataMove": "dataMove"; "dataAdd": "dataAdd"; "dataRemove": "dataRemove"; "navigate": "navigate"; }, ["defaultTemplateRef", "itemTemplateDirectiveRef", "placeholderTemplateDirectiveRef"], never, true, never>; }