@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 } 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 %}). * * <demo metaUrl="sortable/sortable-api/" height="430"></demo> */ export declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit, AfterViewChecked, AfterContentInit, SortableContainer { private ngZone; private renderer; private changeDetector; private localization; /** * Specifies the tab index of the Sortable component. */ tabIndex: number; /** * 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>; /** * Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}). * @default false */ navigable: boolean; /** * @hidden * * A misspelled alias for `navigable`. */ set navigatable(value: boolean); /** * Enables or disables the built-in animations. * @default false */ animation: boolean; /** * Sets an array of integers, which 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 which belong to 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, allows you to transfer items between Sortables which belong * to different zones. */ acceptZones: string[]; /** * Represents the CSS styles which are applied to each Sortable item. * * @example * ```ts * import { Component } from '@angular/core'; * import { SortableModule } from '@progress/kendo-angular-sortable'; * * _@Component({ * selector: 'my-app', * template: ` * <kendo-sortable * [data]="['1','2','3','4','5','6','7']" * [itemStyle] ="{ * 'display': 'inline-block', * 'background-color': '#51A0ED', * 'height':'50px', * 'width':'50px', * 'margin':'3px', * 'cursor':'move' * }" * > * </kendo-sortable> * ` * }) * export class AppComponent { * } * ``` */ 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. * * @example * ```ts * import { Component } from '@angular/core'; * import { SortableModule } from '@progress/kendo-angular-sortable'; * * _@Component({ * selector: 'my-app', * template: ` * <kendo-sortable [data]="[]" * [emptyText]="'No items - custom message and styles'" * [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" > * </kendo-sortable> * ` * }) * export class AppComponent { } * ``` */ 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); 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: number): void; /** * @hidden */ onEnterHandler(item: any): void; /** * @hidden */ onEscapeHandler(): void; /** * @hidden */ keydownHandler(event: any): 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 item which becomes 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; /** * Adds a new data item to a particular index. * @param dataItem - The data item. * @param index - The index at which the data item is inserted. */ addDataItem(dataItem: any, index: number): void; /** * Moves data item to a particular index. * @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; }; "data": { "alias": "data"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "navigatable": { "alias": "navigatable"; "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>; }