/**-----------------------------------------------------------------------------------------
* 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
*
* ```
*/
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;
/**
* Sets an array of any data that is used as a data source for the Sortable.
*/
set data(data: Array);
get data(): Array;
/**
* 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;
/**
* Defines the class which is applied to the active Sortable item.
*/
activeItemClass: string | string[] | Set;
/**
* Defines the class which is applied to the empty item when the Sortable has empty data.
*/
emptyItemClass: string | string[] | Set;
/**
* Defines the class which is applied to each disabled Sortable item.
*/
disabledItemClass: string | string[] | Set;
/**
* Sets the text message that will be displayed when the Sortable has no items.
*/
emptyText: string;
/**
* @hidden
*/
defaultTemplateRef: QueryList>;
/**
* Defines the template that will be used for rendering the items.
* @hidden
*/
itemTemplateDirectiveRef: QueryList>;
/**
* Defines the template that will be used for rendering the placeholder.
* @hidden
*/
placeholderTemplateDirectiveRef: QueryList>;
itemWrappers: QueryList;
draggables: QueryList;
noDataContainer: ElementRef;
hint: ElementRef;
/**
* Fires when the dragging of an item is started.
*/
dragStart: EventEmitter;
/**
* Fires when the dragging of an item is completed.
*/
dragEnd: EventEmitter;
/**
* Fires while the dragging of an item is in progress.
*/
dragOver: EventEmitter;
/**
* Fires when dragging an item outside of the component.
*/
dragLeave: EventEmitter;
/**
* Fires while the moving an item from one position to another.
*/
dataMove: EventEmitter;
/**
* Fires when a new item is added to the Sortable.
*/
dataAdd: EventEmitter;
/**
* Fires when an item is removed from the Sortable.
*/
dataRemove: EventEmitter;
/**
* Fires when navigating using the keyboard.
*/
navigate: EventEmitter;
/**
* 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;
onDragOverSubject: Subject;
onDragLeaveSubject: Subject;
onDragEndSubject: Subject;
/**
* 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;
placeholderTemplateRef: TemplateRef;
_data: Array;
_localData: Array;
/**
* @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;
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;
/**
* @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(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;
static ɵcmp: i0.ɵɵComponentDeclaration;
}