@ux-aspects/ux-aspects/directives/reorderable/reorderable.directive.d.ts

Open source user interface framework for building modern, responsive, mobile big data applications

import { CdkDropList } from '@angular/cdk/drag-drop';
import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
import * as i0 from "@angular/core";
export declare class ReorderableDirective<T> extends CdkDropList<T> implements OnInit, OnDestroy {
    /**
     * This property can be used to provide the `uxReorderable` directive with a dataset that represents the items that can be reordered.
     * This can used as a two way binding which will ensure the dataset always reflects the current order of items in the list.
     * Each list item should have a `uxReorderableModel` directive applied, with a value indicating which item in the dataset it represents.
     *
     * If the list is generated using `ngFor` this property should be bound to the same dataset.
     * If there is no dataset representing the items then this property is not required.
     */
    reorderableModel: Array<T>;
    /**
     * The name of the reorderable group which this container belongs to `uxReorderable` elements which belong to
     * the same group can have items dragged between them. Only required if multiple drop containers are being created.
     */
    set reorderableGroup(group: string);
    get reorderableGroup(): string;
    private _reorderableGroup;
    /** Determines if reordering is disabled. */
    set reorderingDisabled(isDisabled: boolean);
    /**
     * This event will be triggered when the order changes and will contain an updated dataset containing the items
     * in their current order. This should be used when the list of items is generated using ngFor to ensure the
     * data remains in the same order for both the `uxReorderable` and `ngFor` directives.
     */
    reorderableModelChange: EventEmitter<T[]>;
    /** This event is triggered when a user begins dragging an item. The event will contain the element being moved. */
    reorderStart: EventEmitter<ReorderEvent<T>>;
    /** This event is triggered when the item being dragged is returned to the same location as it began. The event will contain the element that was being moved. */
    reorderCancel: EventEmitter<ReorderEvent<T>>;
    /** This event is triggered when a user has relocated an item. The event will contain the element that was moved. */
    reorderEnd: EventEmitter<ReorderEvent<T>>;
    /** Store all the group ids so we can identify which lists can interact */
    private static readonly _groups$;
    private readonly _destroy$;
    ngOnInit(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ReorderableDirective<any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ReorderableDirective<any>, "[uxReorderable]", never, { "reorderableModel": { "alias": "reorderableModel"; "required": false; }; "reorderableGroup": { "alias": "reorderableGroup"; "required": false; }; "reorderingDisabled": { "alias": "reorderingDisabled"; "required": false; }; }, { "reorderableModelChange": "reorderableModelChange"; "reorderStart": "reorderStart"; "reorderCancel": "reorderCancel"; "reorderEnd": "reorderEnd"; }, never, never, false, never>;
}
export interface ReorderEvent<T = unknown> {
    element: Element;
    model: T;
}