/**----------------------------------------------------------------------------------------- * 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; }