devextreme-angular/fesm5/devextreme-angular-ui-sortable.js

Angular UI and visualization components based on DevExtreme widgets

import { __extends, __decorate, __metadata, __param } from 'tslib';
import { TransferState, BrowserTransferStateModule } from '@angular/platform-browser';
import { ElementRef, NgZone, Inject, PLATFORM_ID, Input, Output, EventEmitter, Component, NgModule } from '@angular/core';
import DxSortable from 'devextreme/ui/sortable';
import { DxTemplateHost, WatcherHelper, NestedOptionHost, DxComponent, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core';
import { DxoCursorOffsetModule } from 'devextreme-angular/ui/nested';

/*!
 * devextreme-angular
 * Version: 20.2.5
 * Build date: Fri Jan 15 2021
 *
 * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-angular
 */
/**
 * Sortable is a user interface utility that allows a UI component's items to be reordered via drag and drop gestures.

 */
var DxSortableComponent = /** @class */ (function (_super) {
    __extends(DxSortableComponent, _super);
    function DxSortableComponent(elementRef, ngZone, templateHost, _watcherHelper, optionHost, transferState, platformId) {
        var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
        _this._createEventEmitters([
            { subscribe: 'add', emit: 'onAdd' },
            { subscribe: 'disposing', emit: 'onDisposing' },
            { subscribe: 'dragChange', emit: 'onDragChange' },
            { subscribe: 'dragEnd', emit: 'onDragEnd' },
            { subscribe: 'dragMove', emit: 'onDragMove' },
            { subscribe: 'dragStart', emit: 'onDragStart' },
            { subscribe: 'initialized', emit: 'onInitialized' },
            { subscribe: 'optionChanged', emit: 'onOptionChanged' },
            { subscribe: 'remove', emit: 'onRemove' },
            { subscribe: 'reorder', emit: 'onReorder' },
            { emit: 'allowDropInsideItemChange' },
            { emit: 'allowReorderingChange' },
            { emit: 'autoScrollChange' },
            { emit: 'boundaryChange' },
            { emit: 'containerChange' },
            { emit: 'cursorOffsetChange' },
            { emit: 'dataChange' },
            { emit: 'dragDirectionChange' },
            { emit: 'dragTemplateChange' },
            { emit: 'dropFeedbackModeChange' },
            { emit: 'elementAttrChange' },
            { emit: 'filterChange' },
            { emit: 'groupChange' },
            { emit: 'handleChange' },
            { emit: 'heightChange' },
            { emit: 'itemOrientationChange' },
            { emit: 'moveItemOnDropChange' },
            { emit: 'rtlEnabledChange' },
            { emit: 'scrollSensitivityChange' },
            { emit: 'scrollSpeedChange' },
            { emit: 'widthChange' }
        ]);
        optionHost.setHost(_this);
        return _this;
    }
    Object.defineProperty(DxSortableComponent.prototype, "allowDropInsideItem", {
        /**
         * Allows a user to drop an item inside another item.
        
         */
        get: function () {
            return this._getOption('allowDropInsideItem');
        },
        set: function (value) {
            this._setOption('allowDropInsideItem', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "allowReordering", {
        /**
         * Allows a user to reorder sortable items.
        
         */
        get: function () {
            return this._getOption('allowReordering');
        },
        set: function (value) {
            this._setOption('allowReordering', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "autoScroll", {
        /**
         * Enables automatic scrolling while dragging an item beyond the viewport.
        
         */
        get: function () {
            return this._getOption('autoScroll');
        },
        set: function (value) {
            this._setOption('autoScroll', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "boundary", {
        /**
         * Specifies a DOM element that limits the dragging area.
        
         */
        get: function () {
            return this._getOption('boundary');
        },
        set: function (value) {
            this._setOption('boundary', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "container", {
        /**
         * Specifies a custom container in which the draggable item should be rendered.
        
         */
        get: function () {
            return this._getOption('container');
        },
        set: function (value) {
            this._setOption('container', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "cursorOffset", {
        /**
         * Specifies the cursor offset from the dragged item.
        
         */
        get: function () {
            return this._getOption('cursorOffset');
        },
        set: function (value) {
            this._setOption('cursorOffset', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "data", {
        /**
         * A container for custom data.
        
         */
        get: function () {
            return this._getOption('data');
        },
        set: function (value) {
            this._setOption('data', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "dragDirection", {
        /**
         * Specifies the directions in which an item can be dragged.
        
         */
        get: function () {
            return this._getOption('dragDirection');
        },
        set: function (value) {
            this._setOption('dragDirection', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "dragTemplate", {
        /**
         * Specifies custom markup to be shown instead of the item being dragged.
        
         */
        get: function () {
            return this._getOption('dragTemplate');
        },
        set: function (value) {
            this._setOption('dragTemplate', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "dropFeedbackMode", {
        /**
         * Specifies how to highlight the item's drop position.
        
         */
        get: function () {
            return this._getOption('dropFeedbackMode');
        },
        set: function (value) {
            this._setOption('dropFeedbackMode', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "elementAttr", {
        /**
         * Specifies the global attributes to be attached to the UI component's container element.
        
         */
        get: function () {
            return this._getOption('elementAttr');
        },
        set: function (value) {
            this._setOption('elementAttr', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "filter", {
        /**
         * Specifies a CSS selector for the items that can be dragged.
        
         */
        get: function () {
            return this._getOption('filter');
        },
        set: function (value) {
            this._setOption('filter', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "group", {
        /**
         * Allows you to group several UI components, so that users can drag and drop items between them.
        
         */
        get: function () {
            return this._getOption('group');
        },
        set: function (value) {
            this._setOption('group', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "handle", {
        /**
         * Specifies a CSS selector (ID or class) that should act as the drag handle(s) for the item(s).
        
         */
        get: function () {
            return this._getOption('handle');
        },
        set: function (value) {
            this._setOption('handle', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "height", {
        /**
         * Specifies the UI component's height.
        
         */
        get: function () {
            return this._getOption('height');
        },
        set: function (value) {
            this._setOption('height', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "itemOrientation", {
        /**
         * Notifies the UI component of the items' orientation.
        
         */
        get: function () {
            return this._getOption('itemOrientation');
        },
        set: function (value) {
            this._setOption('itemOrientation', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "moveItemOnDrop", {
        /**
         * Moves an element in the HTML markup when it is dropped.
        
         */
        get: function () {
            return this._getOption('moveItemOnDrop');
        },
        set: function (value) {
            this._setOption('moveItemOnDrop', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "rtlEnabled", {
        /**
         * Switches the UI component to a right-to-left representation.
        
         */
        get: function () {
            return this._getOption('rtlEnabled');
        },
        set: function (value) {
            this._setOption('rtlEnabled', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "scrollSensitivity", {
        /**
         * Specifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.
        
         */
        get: function () {
            return this._getOption('scrollSensitivity');
        },
        set: function (value) {
            this._setOption('scrollSensitivity', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "scrollSpeed", {
        /**
         * Specifies the scrolling speed when dragging an item beyond the viewport. Applies only if autoScroll is true.
        
         */
        get: function () {
            return this._getOption('scrollSpeed');
        },
        set: function (value) {
            this._setOption('scrollSpeed', value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DxSortableComponent.prototype, "width", {
        /**
         * Specifies the UI component's width.
        
         */
        get: function () {
            return this._getOption('width');
        },
        set: function (value) {
            this._setOption('width', value);
        },
        enumerable: true,
        configurable: true
    });
    DxSortableComponent.prototype._createInstance = function (element, options) {
        return new DxSortable(element, options);
    };
    DxSortableComponent.prototype.ngOnDestroy = function () {
        this._destroyWidget();
    };
    DxSortableComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: NgZone },
        { type: DxTemplateHost },
        { type: WatcherHelper },
        { type: NestedOptionHost },
        { type: TransferState },
        { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
    ]; };
    __decorate([
        Input(),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], DxSortableComponent.prototype, "allowDropInsideItem", null);
    __decorate([
        Input(),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], DxSortableComponent.prototype, "allowReordering", null);
    __decorate([
        Input(),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], DxSortableComponent.prototype, "autoScroll", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "boundary", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "container", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "cursorOffset", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "data", null);
    __decorate([
        Input(),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [String])
    ], DxSortableComponent.prototype, "dragDirection", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "dragTemplate", null);
    __decorate([
        Input(),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [String])
    ], DxSortableComponent.prototype, "dropFeedbackMode", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "elementAttr", null);
    __decorate([
        Input(),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [String])
    ], DxSortableComponent.prototype, "filter", null);
    __decorate([
        Input(),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [String])
    ], DxSortableComponent.prototype, "group", null);
    __decorate([
        Input(),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [String])
    ], DxSortableComponent.prototype, "handle", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "height", null);
    __decorate([
        Input(),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [String])
    ], DxSortableComponent.prototype, "itemOrientation", null);
    __decorate([
        Input(),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], DxSortableComponent.prototype, "moveItemOnDrop", null);
    __decorate([
        Input(),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], DxSortableComponent.prototype, "rtlEnabled", null);
    __decorate([
        Input(),
        __metadata("design:type", Number),
        __metadata("design:paramtypes", [Number])
    ], DxSortableComponent.prototype, "scrollSensitivity", null);
    __decorate([
        Input(),
        __metadata("design:type", Number),
        __metadata("design:paramtypes", [Number])
    ], DxSortableComponent.prototype, "scrollSpeed", null);
    __decorate([
        Input(),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], DxSortableComponent.prototype, "width", null);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onAdd", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onDisposing", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onDragChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onDragEnd", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onDragMove", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onDragStart", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onInitialized", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onOptionChanged", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onRemove", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "onReorder", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "allowDropInsideItemChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "allowReorderingChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "autoScrollChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "boundaryChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "containerChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "cursorOffsetChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "dataChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "dragDirectionChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "dragTemplateChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "dropFeedbackModeChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "elementAttrChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "filterChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "groupChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "handleChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "heightChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "itemOrientationChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "moveItemOnDropChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "rtlEnabledChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "scrollSensitivityChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "scrollSpeedChange", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], DxSortableComponent.prototype, "widthChange", void 0);
    DxSortableComponent = __decorate([
        Component({
            selector: 'dx-sortable',
            template: '<ng-content></ng-content>',
            providers: [
                DxTemplateHost,
                WatcherHelper,
                NestedOptionHost
            ]
        }),
        __param(6, Inject(PLATFORM_ID)),
        __metadata("design:paramtypes", [ElementRef, NgZone, DxTemplateHost,
            WatcherHelper,
            NestedOptionHost,
            TransferState, Object])
    ], DxSortableComponent);
    return DxSortableComponent;
}(DxComponent));
var DxSortableModule = /** @class */ (function () {
    function DxSortableModule() {
    }
    DxSortableModule = __decorate([
        NgModule({
            imports: [
                DxoCursorOffsetModule,
                DxIntegrationModule,
                DxTemplateModule,
                BrowserTransferStateModule
            ],
            declarations: [
                DxSortableComponent
            ],
            exports: [
                DxSortableComponent,
                DxoCursorOffsetModule,
                DxTemplateModule
            ]
        })
    ], DxSortableModule);
    return DxSortableModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { DxSortableComponent, DxSortableModule };
//# sourceMappingURL=devextreme-angular-ui-sortable.js.map