gentics-ui-core/components/sortable-list/sortable-list.component.d.ts

This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.

import { ElementRef, EventEmitter, SimpleChanges } from '@angular/core';
import * as Sortable from 'sortablejs';
import * as i0 from "@angular/core";
export declare type sortFn<T> = (source: T[], byReference?: boolean) => T[];
/**
 * An augmented version of the event object returned by each of the Sortablejs callbacks, which can then be emitted up
 * to the consuming component.
 */
export interface ISortableEvent extends Sortable.SortableEvent {
    sort: sortFn<any>;
}
export interface ISortableMoveEvent extends Sortable.MoveEvent {
    sort: sortFn<any>;
}
export interface SortableInstance {
    el: HTMLElement;
    nativeDraggable: boolean;
    options: any;
}
export declare type PutPullType = true | false | 'clone';
export interface PutPullFn {
    (to: SortableInstance, from: SortableInstance): PutPullType;
}
export declare type ISortableGroupOptions = Sortable.GroupOptions;
export declare type SortableGroup = string | ISortableGroupOptions;
/**
 * Enables the creation of lists which can be re-ordered by dragging the items. Built on top of
 * [sortablejs](https://github.com/RubaXa/Sortable). Note that this component does not do the actual
 * sorting of the list data - this logic must be implemented by the consumer of the component. However,
 * this component provides a convenience `sort()` function which considerably simplifies this process - see below.
 *
 * ```html
 * <gtx-sortable-list (dragEnd)="sortList($event)">
 *     <gtx-sortable-item *ngFor="let item of items">
 *         <div>{{ item }}</div>
 *     </gtx-sortable-item>
 * </gtx-sortable-list>
 * ```
 *
 * ```typescript
 * items = ['foo', 'bar', 'baz'];
 * sortList(e: ISortableEvent): void {
 *     this.items = e.sort(this.items);
 * }
 * ```
 *
 * ## `ISortableEvent`
 *
 * The `dragEnd` event emits an `ISortableEvent` object. For a full listing of its properties, see the source. Below
 * are the more important properties:
 *
 * | Property       | Type         | Description |
 * | --------       | ------------ | ----------- |
 * | **oldIndex**   | `number`     | The index in the list that the item started from |
 * | **newIndex**   | `number`     | The index in the list that the item was dropped |
 * | **sort()**     | `Function`   | A pre-configured sort function - see below |
 *
 * ## `ISortableEvent.sort()`
 *
 * When the `dragEnd` event is fired, the event object exposes a `sort(array, byReference)` method. This is a convenience method for
 * sorting an array, so that the consumer of this component does not have to re-implement array sorting
 * each time the component is used.
 *
 * The sort function expects an array, and returns a new copy of that array, unless
 * `byReference === true`, in which case the original array is mutated and returned.
 *
 * ```typescript
 * items = [1, 2, 3, 4, 5];
 *
 * sortList(e: ISortableEvent): void {
 *     // assume that the 2nd item was dragged and dropped in the last place.
 *     this.items = e.sort(this.items);
 *     // this.items = [1, 3, 4, 5, 2]
 * }
 * ```
 */
export declare class SortableList {
    private elementRef;
    /**
     * Set to true to disable sorting. i.e. items will no longer be draggable.
     */
    disabled: boolean;
    /**
     * Specify a group to allow dragging items between SortableLists. See
     * [the Sortable docs](https://github.com/RubaXa/Sortable/blob/473bd8fecfd2f2834e4187fb033dfa6912eb3b98/README.md#group-option)
     * for more information.
     */
    group: SortableGroup;
    /**
     * Invoked when an item is moved in the list or between lists. Return `false` to cancel the move.
     */
    onMove: (e: ISortableMoveEvent) => boolean;
    /**
     * Fired when an item drag is started.
     */
    dragStart: EventEmitter<ISortableEvent>;
    /**
     * Fired when an item has been dragged and dropped to a new position in the list.
     */
    dragEnd: EventEmitter<ISortableEvent>;
    /**
     * Fired when an item has been dropped onto this list from a different list.
     */
    addItem: EventEmitter<ISortableEvent>;
    /**
     * Fired when creating a clone of element.
     */
    cloneItem: EventEmitter<ISortableEvent>;
    /**
     * Fired when an item has been remove from this list to a different list.
     */
    removeItem: EventEmitter<ISortableEvent>;
    dragging: boolean;
    private sortable;
    constructor(elementRef: ElementRef);
    ngOnChanges(changes: SimpleChanges): void;
    ngOnInit(): void;
    ngAfterContentInit(): void;
    /**
     * Returns a pre-configured sort function which uses the indexes of the sort operation.
     */
    sortFactory(e: ISortableEvent): sortFn<any>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SortableList, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SortableList, "gtx-sortable-list", never, { "disabled": "disabled"; "group": "group"; "onMove": "onMove"; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "addItem": "addItem"; "cloneItem": "cloneItem"; "removeItem": "removeItem"; }, never, ["*"]>;
}
export declare class SortableItem {
    static ɵfac: i0.ɵɵFactoryDeclaration<SortableItem, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<SortableItem, "gtx-sortable-item", never, {}, {}, never>;
}
export declare class SortableListDragHandle {
    static ɵfac: i0.ɵɵFactoryDeclaration<SortableListDragHandle, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SortableListDragHandle, "gtx-drag-handle", never, {}, {}, never, never>;
}