@progress/kendo-angular-sortable 4.0.6 → 5.0.0-dev.202204191145

package/dist/fesm5/index.js

@@ -1,1944 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __extends } from 'tslib';
-import { Injectable, NgZone, Input, HostBinding, Directive, ElementRef, Renderer2, TemplateRef, ContentChildren, QueryList, ViewChildren, ViewChild, Output, EventEmitter, Component, forwardRef, ChangeDetectorRef, NgModule } from '@angular/core';
-import { Subject, merge } from 'rxjs';
-import { isDocumentAvailable, isChanged } from '@progress/kendo-angular-common';
-import { filter, tap, take, switchMap } from 'rxjs/operators';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import Draggable from '@telerik/kendo-draggable';
-import { CommonModule } from '@angular/common';
-
-var NODE_NAME_PREDICATES = {};
-var NODE_ATTR_PREDICATES = {};
-var focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
-/**
- * @hidden
- */
-var matchesNodeName = function (nodeName) {
-    if (!NODE_NAME_PREDICATES[nodeName]) {
-        NODE_NAME_PREDICATES[nodeName] = function (element) {
-            return String(element.nodeName).toLowerCase() === nodeName.toLowerCase();
-        };
-    }
-    return NODE_NAME_PREDICATES[nodeName];
-};
-/**
- * @hidden
- */
-var matchesNodeAttr = function (nodeAttr) {
-    if (!NODE_ATTR_PREDICATES[nodeAttr]) {
-        NODE_ATTR_PREDICATES[nodeAttr] = function (element) {
-            return element.hasAttribute ? element.hasAttribute(nodeAttr) : false;
-        };
-    }
-    return NODE_ATTR_PREDICATES[nodeAttr];
-};
-/**
- * @hidden
- */
-var closest = function (node, predicate) {
-    while (node && !predicate(node)) {
-        node = node.parentNode;
-    }
-    return node;
-};
-/**
- * Returns an object specifiying whether there is a DraggableDirective under the cursor.
- * @hidden
- */
-var draggableFromPoint = function (x, y) {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    var el = document.elementFromPoint(x, y);
-    if (!el) {
-        return;
-    }
-    var isDraggable = el.hasAttribute("kendoDraggable");
-    var isChild = closest(el, matchesNodeAttr("kendoDraggable")) !== null;
-    var parentDraggable = closest(el, matchesNodeAttr("kendoDraggable"));
-    var index = parentDraggable ? parseInt(parentDraggable.getAttribute("data-sortable-index"), 10) : -1;
-    return {
-        element: el,
-        index: index,
-        isDraggable: isDraggable,
-        isDraggableChild: isChild,
-        parentDraggable: parentDraggable,
-        rect: el.getBoundingClientRect()
-    };
-};
-/**
- * Returns the DraggableDirective under the cursor.
- * @hidden
- */
-var draggableFromEvent = function (event, sortable) {
-    var target;
-    if (event.changedTouches) {
-        var touch = event.changedTouches[0];
-        target = draggableFromPoint(touch.clientX, touch.clientY);
-    }
-    else {
-        target = draggableFromPoint(event.clientX, event.clientY);
-    }
-    // TODO: refactor sortable. Add draggable getter
-    return sortable.draggables.toArray()[target ? target.index : -1];
-};
-/**
- * @hidden
- */
-var isFocusable = function (element) {
-    if (element.tagName) {
-        var tagName = element.tagName.toLowerCase();
-        var tabIndex = element.getAttribute('tabIndex');
-        var skipTab = tabIndex === '-1';
-        var focusable = tabIndex !== null && !skipTab;
-        if (focusableRegex.test(tagName)) {
-            focusable = !element.disabled && !skipTab;
-        }
-        return focusable;
-    }
-    return false;
-};
-var toClassList = function (classNames) { return String(classNames).trim().split(' '); };
-/**
- * @hidden
- */
-var hasClasses = function (element, classNames) {
-    var namesList = toClassList(classNames);
-    return Boolean(toClassList(element.className).find(function (className) { return namesList.indexOf(className) >= 0; }));
-};
-var isSortable = matchesNodeName('kendo-sortable');
-/**
- * @hidden
- */
-var widgetTarget = function (target) {
-    var element = closest(target, function (node) { return hasClasses(node, 'k-widget') || isSortable(node); });
-    return element && !isSortable(element);
-};
-var hasRelativeStackingContext = function () {
-    if (!isDocumentAvailable()) {
-        return false;
-    }
-    var top = 10;
-    var parent = document.createElement("div");
-    parent.style.transform = "matrix(10, 0, 0, 10, 0, 0)";
-    parent.innerHTML = "<div style=\"position: fixed; top: " + top + "px;\">child</div>";
-    document.body.appendChild(parent);
-    var isDifferent = parent.children[0].getBoundingClientRect().top !== top;
-    document.body.removeChild(parent);
-    return isDifferent;
-};
-var HAS_RELATIVE_STACKING_CONTEXT = hasRelativeStackingContext();
-/**
- * @hidden
- */
-var relativeContextElement = function (element) {
-    if (!element || !HAS_RELATIVE_STACKING_CONTEXT) {
-        return null;
-    }
-    var node = element.parentElement;
-    while (node) {
-        if (window.getComputedStyle(node).transform !== 'none') {
-            return node;
-        }
-        node = node.parentElement;
-    }
-};
-
-/**
- * @hidden
- */
-var packageMetadata = {
-    name: '@progress/kendo-angular-sortable',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646219900,
-    version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
-};
-
-var allowDrag = function (e) {
-    var target = e.originalEvent.target;
-    return target.hasAttribute('data-sortable-item') || !(isFocusable(target) || widgetTarget(target));
-};
-/**
- * The service that provides the drag-and-drop functionality for
- * transferring items between Sortable components within the same page.
- *
- */
-var SortableService = /** @class */ (function () {
-    function SortableService(ngZone) {
-        var _this = this;
-        this.ngZone = ngZone;
-        /**
-         * Specifies the Draggable item that is currently being moved.
-         */
-        this.activeDraggable = null;
-        /**
-         * Specifies the Draggable item from which the dragging started.
-         */
-        this.originDraggable = null;
-        /**
-         * @hidden
-         */
-        this.targetSortable = null;
-        /**
-         * Specifies the Draggable item that last emitted an event.
-         */
-        this.lastDraggable = null;
-        /**
-         * @hidden
-         */
-        this.onPressSubject = new Subject();
-        /**
-         * @hidden
-         */
-        this.onDragSubject = new Subject();
-        /**
-         * @hidden
-         */
-        this.onReleaseSubject = new Subject();
-        this.source = null;
-        this._target = null;
-        this.sortableCounter = 0;
-        this.sortableRegister = {};
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.subscriptions = this.onPressSubject.pipe(filter(allowDrag), tap(function (press) {
-            _this.targetSortable = _this.getSortableComponentFromTouch(press);
-        }), filter(function (_) { return Boolean(_this.targetSortable); }), tap(function (press) {
-            _this.onReleaseSubject.pipe(take(1)).subscribe(function (event) { return _this.release(event); });
-            _this.pressArgs = press;
-            if (press.isTouch) {
-                press.originalEvent.preventDefault();
-            }
-        }), switchMap(function (_drag) {
-            return _this.onDragSubject.pipe(filter(function (_) { return Boolean(_this.targetSortable); }), //stop further events if dragStart is prevented
-            tap(function (e) { return _this.drag(e); }));
-        })).subscribe();
-    }
-    Object.defineProperty(SortableService.prototype, "target", {
-        get: function () {
-            return this._target;
-        },
-        /**
-         * Specifies the `SortableComponent` instance under the currently dragged item.
-         */
-        set: function (target) {
-            this._target = target;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    SortableService.prototype.onPress = function (e) {
-        this.onPressSubject.next(e);
-    };
-    /**
-     * @hidden
-     */
-    SortableService.prototype.onDrag = function (e) {
-        this.onDragSubject.next(e);
-    };
-    /**
-     * @hidden
-     */
-    SortableService.prototype.onRelease = function (e) {
-        this.onReleaseSubject.next(e);
-    };
-    /**
-     * @hidden
-     */
-    SortableService.prototype.ngOnDestroy = function () {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    };
-    /**
-     * Registers a `SortableComponent` with which the service operates.
-     *
-     * @param sortableComponent - The `SortableComponent`.
-     * @return - The unique key that the current `SortableComponent` gets when registered.
-     */
-    SortableService.prototype.registerComponent = function (sortableComponent) {
-        var id = this.sortableCounter.toString();
-        this.sortableRegister[id] = sortableComponent;
-        this.sortableCounter++;
-        return id;
-    };
-    /**
-     * Removes a `SortableComponent` from the registered `SortableComponents` with which the service operates.
-     *
-     * @param key - The key of the `SortableComponent` which will be removed from the register.
-     * Obtained when `registerComponent` is called.
-     */
-    SortableService.prototype.unregisterComponent = function (key) {
-        this.sortableRegister[key] = null;
-    };
-    /**
-     * Sets the `SortableComponent` as a source component. When dragging an item from one Sortable to another,
-     * the source component is the one from which the item originates.
-     *
-     * @param sortable - The `SortableComponent`.
-     */
-    SortableService.prototype.setSource = function (sortable) {
-        this.source = sortable;
-    };
-    /**
-     * Returns the source `SortableComponent` from which
-     * an item is dragged to other Sortable components.
-     *
-     * @return - The `SourceComponent`.
-     */
-    SortableService.prototype.getSource = function () {
-        return this.source;
-    };
-    /**
-     * The method that finds the `SortableComponent` which is registered to
-     * the `SortableService` by using the arguments of the `touch` event.
-     *
-     * @param touch - A Touch-Object of the `Touch` type interface.
-     * Represents a single contact point (finger or stylus)
-     * on a touch-sensitive device (touchscreen or trackpad).
-     *
-     * @return { component: SortableComponent, index: number } - An object
-     * where the component is the `SortableComponent` that owns the item
-     * and the index is the index of the touched item.
-     */
-    SortableService.prototype.getSortableComponentFromTouch = function (touch) {
-        if (!isDocumentAvailable()) {
-            return { component: undefined, index: undefined };
-        }
-        var realTarget = document.elementFromPoint(touch.clientX, touch.clientY);
-        while (realTarget) {
-            var id = realTarget.getAttribute('data-sortable-id');
-            var index = realTarget.getAttribute('data-sortable-index');
-            if (id) {
-                var targetSortable = this.sortableRegister[id];
-                if (targetSortable) {
-                    return { component: targetSortable, index: parseInt(index, 10) };
-                }
-            }
-            realTarget = realTarget.parentElement;
-        }
-    };
-    SortableService.prototype.start = function () {
-        var pressArgs = this.pressArgs;
-        if (pressArgs) {
-            this.pressArgs = null;
-            var startTarget = draggableFromEvent(pressArgs, this.targetSortable.component);
-            if (this.targetSortable.component.startDrag({ target: startTarget, originalEvent: pressArgs })) {
-                this.targetSortable = null;
-                return true;
-            }
-        }
-    };
-    SortableService.prototype.release = function (event) {
-        var _this = this;
-        if (this.source) {
-            this.ngZone.run(function () {
-                if (_this.targetSortable) {
-                    var dropTarget = draggableFromEvent(event, _this.targetSortable.component);
-                    _this.source.endDrag({ target: dropTarget, originalEvent: event });
-                }
-                _this.source.positionHintFromEvent(null);
-                _this.source.markForCheck();
-            });
-        }
-        this.targetSortable = null;
-        this.pressArgs = null;
-    };
-    SortableService.prototype.drag = function (event) {
-        var _this = this;
-        this.ngZone.run(function () {
-            if (_this.start()) {
-                return;
-            }
-            _this.source.positionHintFromEvent(event);
-            var sortable = _this.getSortableComponentFromTouch(event);
-            if (!sortable || sortable && sortable.component !== _this.target) {
-                if (_this.target) {
-                    _this.target.leave({ target: undefined, originalEvent: event });
-                }
-                else if (_this.source !== _this.target) {
-                    _this.source.leave({ target: undefined, originalEvent: event });
-                }
-            }
-            if (sortable && sortable.component) {
-                var draggable = draggableFromEvent(event, sortable.component);
-                sortable.component.drag({ target: draggable, originalEvent: event });
-            }
-            _this.source.markForCheck();
-        });
-    };
-    SortableService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [NgZone])
-    ], SortableService);
-    return SortableService;
-}());
-
-/**
- * @hidden
- */
-var SortableContainer = /** @class */ (function () {
-    function SortableContainer() {
-    }
-    SortableContainer = __decorate([
-        Injectable()
-    ], SortableContainer);
-    return SortableContainer;
-}());
-
-/**
- * @hidden
- */
-var DraggableDirective = /** @class */ (function () {
-    function DraggableDirective(parent, el, renderer) {
-        this.parent = parent;
-        this.el = el;
-        this.renderer = renderer;
-    }
-    Object.defineProperty(DraggableDirective.prototype, "_focused", {
-        get: function () {
-            return this.disabled ? false : (this.index === this.parent.activeIndex);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DraggableDirective.prototype, "_disabled", {
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DraggableDirective.prototype, "display", {
-        get: function () {
-            return this.hidden ? "none" : this._display;
-        },
-        set: function (display) {
-            this._display = display;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    DraggableDirective.prototype.ngOnInit = function () {
-        var nativeElement = this.el.nativeElement;
-        this.display = nativeElement.style.display;
-        if (nativeElement) { // Remove the inline styles after a few releases of the themes with the style.
-            this.renderer.setStyle(nativeElement, 'user-select', 'none');
-            this.renderer.setStyle(nativeElement, '-ms-user-select', 'none');
-            this.renderer.setStyle(nativeElement, '-moz-user-select', 'none');
-            this.renderer.setStyle(nativeElement, '-webkit-user-select', 'none');
-        }
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], DraggableDirective.prototype, "index", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], DraggableDirective.prototype, "hidden", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], DraggableDirective.prototype, "disabled", void 0);
-    __decorate([
-        HostBinding('class.k-state-focused'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], DraggableDirective.prototype, "_focused", null);
-    __decorate([
-        HostBinding('attr.aria-disabled'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], DraggableDirective.prototype, "_disabled", null);
-    __decorate([
-        HostBinding('style.display'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], DraggableDirective.prototype, "display", null);
-    DraggableDirective = __decorate([
-        Directive({
-            selector: '[kendoDraggable]'
-        }),
-        __metadata("design:paramtypes", [SortableContainer,
-            ElementRef,
-            Renderer2])
-    ], DraggableDirective);
-    return DraggableDirective;
-}());
-
-//TODO: RENAME FILE AND UPDATE EXPORTS AND MODULES
-/**
- * @hidden
- */
-var ItemTemplateDirective = /** @class */ (function () {
-    function ItemTemplateDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    ItemTemplateDirective = __decorate([
-        Directive({
-            selector: '[kendoSortableItemTemplate]'
-        }),
-        __metadata("design:paramtypes", [TemplateRef])
-    ], ItemTemplateDirective);
-    return ItemTemplateDirective;
-}());
-/**
- * @hidden
- */
-var PlaceholderTemplateDirective = /** @class */ (function () {
-    function PlaceholderTemplateDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    PlaceholderTemplateDirective = __decorate([
-        Directive({
-            selector: '[kendoSortablePlaceholderTemplate]'
-        }),
-        __metadata("design:paramtypes", [TemplateRef])
-    ], PlaceholderTemplateDirective);
-    return PlaceholderTemplateDirective;
-}());
-
-/**
- * Defines an event whose default action can be prevented
- * by calling the `preventDefault` method.
- *
- * @hidden
- */
-var PreventableEvent = /** @class */ (function () {
-    function PreventableEvent() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    PreventableEvent.prototype.preventDefault = function () {
-        this.prevented = true;
-    };
-    /**
-     * If the event was prevented
-     * by any of its subscribers, returns `true`.
-     *
-     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
-     */
-    PreventableEvent.prototype.isDefaultPrevented = function () {
-        return this.prevented;
-    };
-    return PreventableEvent;
-}());
-
-/**
- * The `navigate` event is emitted when using the keyboard arrows.
- */
-var NavigateEvent = /** @class */ (function (_super) {
-    __extends(NavigateEvent, _super);
-    /**
-     * @hidden
-     */
-    function NavigateEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return NavigateEvent;
-}(PreventableEvent));
-
-/**
- * The arguments for the `DraggableDirective` events.
- * @hidden
- */
-var DraggableEvent = /** @class */ (function (_super) {
-    __extends(DraggableEvent, _super);
-    /**
-     * @hidden
-     */
-    function DraggableEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DraggableEvent;
-}(PreventableEvent));
-
-/**
- * Arguments for the `dragStart` event.
- */
-var DragStartEvent = /** @class */ (function (_super) {
-    __extends(DragStartEvent, _super);
-    /**
-     * @hidden
-     */
-    function DragStartEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DragStartEvent;
-}(PreventableEvent));
-/**
- * Arguments for the `dragOver` event.
- */
-var DragOverEvent = /** @class */ (function (_super) {
-    __extends(DragOverEvent, _super);
-    /**
-     * @hidden
-     */
-    function DragOverEvent(options) {
-        var _this = _super.call(this, options) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DragOverEvent;
-}(DragStartEvent));
-/**
- * Arguments for the `dragEnd` event.
- */
-var DragEndEvent = /** @class */ (function (_super) {
-    __extends(DragEndEvent, _super);
-    /**
-     * @hidden
-     */
-    function DragEndEvent(options) {
-        var _this = _super.call(this, options) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DragEndEvent;
-}(DragOverEvent));
-
-/**
- * Represents the [Kendo UI Sortable component for Angular]({% slug overview_sortable %}).
- *
- * {% embed_file sortable-api/app.component.ts %}
- * {% embed_file shared/app.module.ts preview %}
- * {% embed_file shared/main.ts hidden %}
- */
-var SortableComponent = /** @class */ (function () {
-    function SortableComponent(ngZone, localization, changeDetector, wrapper, sortableService) {
-        this.ngZone = ngZone;
-        this.localization = localization;
-        this.changeDetector = changeDetector;
-        /**
-         * Specifies the tab index of the Sortable component.
-         */
-        this.tabIndex = null;
-        /**
-         * Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
-         * The default value is `false`.
-         */
-        this.navigable = false;
-        /**
-         * Enables or disables the built-in animations.
-         * The default value is `false`.
-         */
-        this.animation = false;
-        /**
-         * Sets an array of integers, which represent the indexes of the disabled items from the data array
-         * ([see example]({% slug items_sortable %}#toc-disabled-items)).
-         */
-        this.disabledIndexes = [];
-        /**
-         * Sets a string that represents the name of the zone to which the Sortable belongs
-         * ([see example]({% slug items_sortable %}#toc-transfer-of-items)). Items can be transferred
-         * between Sortables which belong to the same zone.
-         */
-        this.zone = undefined;
-        /**
-         * Defines the zones from which items can be transferred onto the current Sortable component
-         * ([see example]({% slug items_sortable %}#toc-transfer-of-items)). If the `acceptZones` property
-         * of the target Sortable is set, allows you to transfer items between Sortables which belong
-         * to different zones.
-         */
-        this.acceptZones = undefined;
-        /**
-         * Represents the CSS styles which are applied to each Sortable item.
-         *
-         * @example
-         * ```ts
-         * import { Component } from '@angular/core';
-         * import { SortableModule } from '@progress/kendo-angular-sortable';
-         *
-         * _@Component({
-         *  selector: 'my-app',
-         *  template: `
-         *   <kendo-sortable
-         *      [data]="['1','2','3','4','5','6','7']"
-         *      [itemStyle] ="{
-         *          'display': 'inline-block',
-         *          'background-color': '#51A0ED',
-         *          'height':'50px',
-         *          'width':'50px',
-         *          'margin':'3px',
-         *          'cursor':'move'
-         *          }"
-         *      >
-         *   </kendo-sortable>
-         *    `
-         * })
-         * export class AppComponent {
-         * }
-         * ```
-         */
-        this.itemStyle = {};
-        /**
-         * Defines the CSS styles applied to an empty item ([see example]({% slug templates_sortable %})).
-         */
-        this.emptyItemStyle = undefined;
-        /**
-         * Defines the CSS styles which are applied to the currently dragged item ([see example]({% slug templates_sortable %})).
-         */
-        this.activeItemStyle = undefined;
-        /**
-         * Defines the CSS styles which are applied to all disabled items.
-         */
-        this.disabledItemStyle = undefined;
-        /**
-         * Defines the class which is applied to each Sortable item.
-         */
-        this.itemClass = "";
-        /**
-         * Defines the class which is applied to the active Sortable item.
-         */
-        this.activeItemClass = null;
-        /**
-         * Defines the class which is applied to the empty item when the Sortable has empty data.
-         */
-        this.emptyItemClass = null;
-        /**
-         * Defines the class which is applied to each disabled Sortable item.
-         */
-        this.disabledItemClass = null;
-        /**
-         * Sets the text message that will be displayed when the Sortable has no items.
-         *
-         * @example
-         * ```ts
-         * import { Component } from '@angular/core';
-         * import { SortableModule } from '@progress/kendo-angular-sortable';
-         *
-         * _@Component({
-         *  selector: 'my-app',
-         *  template: `
-         *    <kendo-sortable [data]="[]"
-         *      [emptyText]="'No items - custom message and styles'"
-         *      [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
-         *    </kendo-sortable>
-         *    `
-         * })
-         * export class AppComponent { }
-         * ```
-         */
-        this.emptyText = "Empty";
-        /**
-         * @hidden
-         */
-        this.defaultTemplateRef = null;
-        /**
-         * Defines the template that will be used for rendering the items.
-         * @hidden
-         */
-        this.itemTemplateDirectiveRef = null;
-        /**
-         * Defines the template that will be used for rendering the placeholder.
-         * @hidden
-         */
-        this.placeholderTemplateDirectiveRef = null;
-        this.itemWrappers = null;
-        /**
-         * Fires when the dragging of an item is started.
-         */
-        this.dragStart = new EventEmitter();
-        /**
-         * Fires when the dragging of an item is completed.
-         */
-        this.dragEnd = new EventEmitter();
-        /**
-         * Fires while the dragging of an item is in progress.
-         */
-        this.dragOver = new EventEmitter();
-        /**
-         * Fires when dragging an item outside of the component.
-         */
-        this.dragLeave = new EventEmitter();
-        /**
-         * Fires while the moving an item from one position to another.
-         */
-        this.dataMove = new EventEmitter();
-        /**
-         * Fires when a new item is added to the Sortable.
-         */
-        this.dataAdd = new EventEmitter();
-        /**
-         * Fires when an item is removed from the Sortable.
-         */
-        this.dataRemove = new EventEmitter();
-        /**
-         * Fires when navigating using the keyboard.
-         */
-        this.navigate = new EventEmitter();
-        /**
-         * The index of the currently focused item.
-         * If no item is focused, set to `-1`.
-         */
-        this.activeIndex = -1;
-        /**
-         * Flag indicating if the component is currently playing animations.
-         * @hidden
-         */
-        this.animating = false;
-        /**
-         * The index of the currently dragged item.
-         */
-        this.dragIndex = -1;
-        /**
-         * The index of the item above which the dragged item is.
-         */
-        this.dragOverIndex = -1;
-        this.onDragStartSubject = new Subject();
-        this.onDragOverSubject = new Subject();
-        this.onDragLeaveSubject = new Subject();
-        this.onDragEndSubject = new Subject();
-        /**
-         * The location of the hint indicator when dragging on mobile devices.
-         */
-        this.hintLocation = null;
-        this._localData = [];
-        this.animationDuration = 300;
-        this.afterKeyPress = false;
-        this.sortableService = null;
-        this._hideActiveItem = false;
-        validatePackage(packageMetadata);
-        this.wrapper = wrapper.nativeElement;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.sortableService = sortableService;
-        this.subscribeEvents();
-    }
-    SortableComponent_1 = SortableComponent;
-    Object.defineProperty(SortableComponent.prototype, "data", {
-        get: function () {
-            return this._data;
-        },
-        /**
-         * Sets an array of any data that is used as a data source for the Sortable.
-         *
-         * {% embed_file sortable-palettes/app.component.ts %}
-         * {% embed_file shared/app.module.ts %}
-         * {% embed_file shared/main.ts hidden %}
-         */
-        set: function (data) {
-            this._data = data;
-            //Cache each _data item instance locally to avoid repaint due to the ngTemplateOutletContext (generated by itemData)
-            //This prevents destroying the kendoDraggable instance, which otherwise leads to losing the dragEnd event
-            //due to non-exisitng HTML element
-            this.cacheData();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SortableComponent.prototype, "navigatable", {
-        /**
-         * @hidden
-         *
-         * A misspelled alias for `navigable`.
-         */
-        set: function (value) {
-            this.navigable = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SortableComponent.prototype, "touchAction", {
-        get: function () {
-            return "none";
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SortableComponent.prototype, "dir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SortableComponent.prototype.setItemData = function (data, i) {
-        this._localData[i].item = data.item;
-        this._localData[i].index = data.index;
-        this._localData[i].hidden = data.hidden;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.itemTemplate = function (index) {
-        var template = this.itemTemplateRef;
-        if (index === this.dragOverIndex) {
-            template = this.placeholderTemplateRef;
-        }
-        else if (index === this.dragIndex) {
-            template = this.itemTemplateRef;
-        }
-        return template;
-    };
-    SortableComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        if (!this.data) {
-            this.data = [];
-        }
-        this.id = this.sortableService.registerComponent(this);
-        this.dragIndex = -1;
-        var display = "display";
-        if (this.activeItemStyle && !this.activeItemStyle[display]) {
-            this.activeItemStyle[display] = "";
-        }
-        if (!this.itemStyle[display]) {
-            this.itemStyle[display] = "";
-        }
-        if (this.wrapper) {
-            this.draggable = new Draggable({
-                press: function (e) { return _this.sortableService.onPress(e); },
-                drag: function (e) { return _this.sortableService.onDrag(e); },
-                release: function (e) { return _this.sortableService.onRelease(e); }
-            });
-            this.ngZone.runOutsideAngular(function () {
-                _this.draggable.bindTo(_this.wrapper);
-            });
-        }
-    };
-    SortableComponent.prototype.ngOnChanges = function (changes) {
-        if (this.data && isChanged('disabledIndexes', changes, false)) {
-            this.cacheData();
-        }
-    };
-    SortableComponent.prototype.ngOnDestroy = function () {
-        this.unsubscribeEvents();
-        this.sortableService.unregisterComponent(this.id);
-        if (this.draggable) {
-            this.draggable.destroy();
-        }
-    };
-    SortableComponent.prototype.ngAfterContentInit = function () {
-        this.itemTemplateRef = this.itemTemplateDirectiveRef.first || this.defaultTemplateRef.first;
-        this.placeholderTemplateRef = this.placeholderTemplateDirectiveRef.first || this.defaultTemplateRef.first;
-    };
-    SortableComponent.prototype.ngAfterViewChecked = function () {
-        if (this.afterKeyPress) {
-            if (this.itemWrappers) {
-                var elems = this.itemWrappers.toArray();
-                if (elems && elems.length > 0 && this.activeIndex > -1) {
-                    elems[this.activeIndex].nativeElement.focus();
-                }
-            }
-            this.afterKeyPress = false;
-        }
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.updateCacheIndices = function () {
-        this._localData.forEach(function (item, index) {
-            item.index = index;
-        });
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.cacheData = function () {
-        var _this = this;
-        this._localData = [];
-        this._data.forEach(function (item, index) {
-            _this._localData.push({ item: item, active: false, disabled: !_this.itemEnabled(index), index: index, hidden: false });
-        });
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.startDrag = function (event) {
-        var startEvent = new DraggableEvent(event);
-        this.onDragStartSubject.next(startEvent);
-        var prevented = startEvent.isDefaultPrevented();
-        if (!prevented) {
-            this.offsetParent = relativeContextElement(this.wrapper);
-        }
-        return prevented;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.drag = function (event) {
-        var dragEvent = new DraggableEvent(event);
-        this.onDragOverSubject.next(dragEvent);
-        return dragEvent.isDefaultPrevented();
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.leave = function (event) {
-        var leaveEvent = new DraggableEvent(event);
-        this.onDragLeaveSubject.next(leaveEvent);
-        return leaveEvent.isDefaultPrevented();
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.endDrag = function (event) {
-        var endEvent = new DraggableEvent(event);
-        this.onDragEndSubject.next(endEvent);
-        return endEvent.isDefaultPrevented();
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.hintVisible = function () {
-        return this.dragIndex >= 0 && this.hintLocation && this === this.sortableService.getSource();
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.currentItemStyle = function (index) {
-        if (index === -1) {
-            return this.emptyItemStyle ? this.emptyItemStyle : this.itemStyle;
-        }
-        if (!this.itemEnabled(index) && this.disabledItemStyle) {
-            return this.disabledItemStyle;
-        }
-        if (index === this.dragIndex || (this.dragIndex === -1 && index === this.activeIndex)) {
-            if (this.hideActiveItem) {
-                return { "display": "none" };
-            }
-            if (this.activeItemStyle) {
-                return this.activeItemStyle;
-            }
-        }
-        return this.itemStyle;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.currentItemClass = function (index) {
-        if (index === -1) {
-            return this.emptyItemClass ? this.emptyItemClass : this.itemClass;
-        }
-        if (!this.itemEnabled(index) && this.disabledItemClass) {
-            return this.disabledItemClass;
-        }
-        if ((index === this.dragIndex || this.dragIndex === -1 && index === this.activeIndex) && this.activeItemClass) {
-            return this.activeItemClass;
-        }
-        return this.itemClass;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.hintStyle = function () {
-        var position = {
-            "left": this.hintLocation.x + 10 + "px",
-            "position": "fixed",
-            "top": this.hintLocation.y + 10 + "px"
-        };
-        var style = {};
-        Object.assign(style, this.currentItemStyle(this.dragIndex), position);
-        return style;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.itemEnabled = function (index) {
-        return this.disabledIndexes.indexOf(index) === -1;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.acceptDragFrom = function (sortableComponent) {
-        if (this.acceptZones === undefined) {
-            return (this.zone === sortableComponent.zone);
-        }
-        else if (sortableComponent.zone !== undefined) {
-            return (this.acceptZones.indexOf(sortableComponent.zone) !== -1);
-        }
-        return false;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.ariaDropEffect = function (index) {
-        return this.itemEnabled(index) ? "move" : "none";
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.focusHandler = function (index) {
-        if (this.navigable) {
-            this.activeIndex = index;
-        }
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.blurHandler = function () {
-        if (this.navigable && !this.afterKeyPress) {
-            this.activeIndex = -1;
-        }
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.keydownHandler = function (event) {
-        var code = event.keyCode;
-        var navigate = this.navigable && code >= 37 && code <= 40;
-        var hasFocus = this.activeIndex !== -1;
-        if (!navigate || !hasFocus) {
-            return;
-        }
-        var leftKey = this.direction === 'rtl' ? 39 : 37;
-        var dir = code === 38 || code === leftKey ? -1 : 1;
-        var limit = this.data.length - 1;
-        var targetIndex = this.activeIndex + dir;
-        while (!this.itemEnabled(targetIndex) && targetIndex <= limit) {
-            targetIndex += dir;
-        }
-        targetIndex = Math.min(Math.max(targetIndex, 0), limit);
-        if (!this.itemEnabled(targetIndex)) {
-            return;
-        }
-        if (navigate) {
-            var ctrl = event.ctrlKey || event.metaKey;
-            var navigateEvent = new NavigateEvent({ index: targetIndex, oldIndex: this.activeIndex, ctrlKey: ctrl });
-            this.navigate.emit(navigateEvent);
-            if (!navigateEvent.isDefaultPrevented()) {
-                this.activeIndex = targetIndex;
-            }
-            this.dragIndex = -1;
-            this.dragOverIndex = -1;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        this.afterKeyPress = true;
-    };
-    /**
-     * Removes the currently active item from the Data collection that the Sortable uses.
-     */
-    SortableComponent.prototype.removeDataItem = function (index) {
-        this.dragIndex = -1;
-        this.dragOverIndex = -1;
-        this._localData.splice(index, 1);
-        this.data.splice(index, 1);
-        this.updateCacheIndices();
-    };
-    /**
-     * Sets a Boolean value that indicates whether the item will be hidden or not.
-     * @hidden
-     */
-    SortableComponent.prototype.hideItem = function (index, hidden) {
-        if (hidden === void 0) { hidden = true; }
-        this._localData[index].hidden = hidden;
-    };
-    Object.defineProperty(SortableComponent.prototype, "hideActiveItem", {
-        /**
-         * If the currently dragged item is hidden, returns `true`.
-         * If the currently dragged item is visible, returns `false`.
-         */
-        get: function () {
-            return this._hideActiveItem;
-        },
-        /**
-         * Sets a Boolean value that indicates whether the currently dragged item will be hidden.
-         */
-        set: function (value) {
-            this.activeIndex = -1;
-            this._hideActiveItem = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Clears the active item.
-     * An active item is the item which becomes focused when the user navigates with the keyboard.
-     */
-    SortableComponent.prototype.clearActiveItem = function () {
-        if (this.navigable) {
-            this.fixFocus();
-        }
-        else {
-            this.activeIndex = -1;
-        }
-        this.dragIndex = -1;
-    };
-    /**
-     * Returns the currently active item when the user navigates with the keyboard.
-     * @return - The data item which is currently active.
-     */
-    SortableComponent.prototype.getActiveItem = function () {
-        if (this.data && this.dragIndex >= 0 && this.dragIndex < this.data.length) {
-            return this.data[this.dragIndex];
-        }
-    };
-    /**
-     * Adds a new data item to a particular index.
-     * @param dataItem - The data item.
-     * @param index - The index at which the data item is inserted.
-     */
-    SortableComponent.prototype.addDataItem = function (dataItem, index) {
-        var _this = this;
-        var originDraggable = this.sortableService.originDraggable;
-        if (originDraggable && originDraggable.parent === this) {
-            var animation = this.animation;
-            this.hideItem(originDraggable.index, false);
-            this.animation = false;
-            this.moveItem(originDraggable.index, index);
-            this.animation = animation;
-        }
-        else {
-            this.data.splice(index, 0, dataItem);
-            this._localData.splice(index, 0, { item: dataItem, active: false, disabled: !this.itemEnabled(index), index: index, hidden: false });
-            this.updateCacheIndices();
-        }
-        this.dragIndex = index;
-        this.dragOverIndex = index;
-        this.ngZone.onStable.pipe(take(1)).subscribe(function () {
-            _this.sortableService.target = _this;
-            _this.sortableService.setSource(_this);
-            _this.sortableService.activeDraggable = _this.draggables.toArray()[index];
-            _this.sortableService.lastDraggable = null;
-        });
-    };
-    /**
-     * Moves data item to a particular index.
-     * @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.
-     */
-    SortableComponent.prototype.moveItem = function (fromIndex, toIndex) {
-        var _this = this;
-        if (toIndex === fromIndex) {
-            return;
-        }
-        var dragIndex = fromIndex;
-        var d = toIndex > dragIndex ? 1 : -1;
-        var originalIndexAnimate = dragIndex;
-        var toAnimate = [];
-        var prevIndex = dragIndex;
-        var tmp;
-        while (dragIndex !== toIndex) {
-            dragIndex += d;
-            if (this.itemEnabled(dragIndex) || dragIndex === toIndex) {
-                if (this.animation) {
-                    toAnimate.push({ next: dragIndex, prev: prevIndex });
-                }
-                tmp = this._localData[prevIndex].index;
-                this._localData[prevIndex].index = this._localData[dragIndex].index;
-                this._localData[dragIndex].index = tmp;
-                tmp = this._localData[prevIndex];
-                this._localData[prevIndex] = this._localData[dragIndex];
-                this._localData[dragIndex] = tmp;
-                tmp = this.data[prevIndex];
-                this.data[prevIndex] = this.data[dragIndex];
-                this.data[dragIndex] = tmp;
-                prevIndex = dragIndex;
-            }
-        }
-        this.dragIndex = dragIndex;
-        this.dragOverIndex = dragIndex;
-        this.activeIndex = dragIndex;
-        if (this.animation) {
-            setTimeout(function () {
-                toAnimate.push({ next: originalIndexAnimate, prev: dragIndex });
-                _this.animating = true;
-                _this.animate(toAnimate);
-            });
-        }
-        this.ngZone.onStable.pipe(take(1)).subscribe(function () {
-            _this.sortableService.activeDraggable = _this.draggables.toArray()[dragIndex];
-            _this.sortableService.lastDraggable = null;
-        });
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.animate = function (draggables) {
-        var _this = this;
-        var itemArray = this.itemWrappers.toArray();
-        var prevClientRect = [];
-        var nextClientRect = [];
-        var that = this;
-        clearTimeout(this._animating);
-        for (var i = 0; i < draggables.length; i++) {
-            prevClientRect.push(itemArray[draggables[i].prev].nativeElement.getBoundingClientRect());
-            nextClientRect.push(itemArray[draggables[i].next].nativeElement.getBoundingClientRect());
-        }
-        for (var i = 0; i < draggables.length; i++) {
-            var nextIndex = draggables[i].prev;
-            var targetRect = nextClientRect[i];
-            var currentRect = prevClientRect[i];
-            var target = itemArray[nextIndex].nativeElement;
-            this.applyAnimationStyle(target, 'transition', 'none');
-            this.applyAnimationStyle(target, 'transform', 'translate3d('
-                + (targetRect.left - currentRect.left).toString() + 'px,'
-                + (targetRect.top - currentRect.top).toString() + 'px,0)');
-            this.reflow(target);
-        }
-        var _loop_1 = function (i) {
-            var nextIndex = draggables[i].prev;
-            var target = itemArray[nextIndex].nativeElement;
-            this_1.applyAnimationStyle(target, 'transition', 'all ' + this_1.animationDuration + 'ms');
-            this_1.applyAnimationStyle(target, 'transform', 'translate3d(0,0,0)');
-            clearTimeout(target.animated);
-            target.animated = setTimeout(function () {
-                that.applyAnimationStyle(target, 'transition', '');
-                that.applyAnimationStyle(target, 'transform', '');
-                target.animated = false;
-            }, this_1.animationDuration);
-        };
-        var this_1 = this;
-        for (var i = 0; i < draggables.length; i++) {
-            _loop_1(i);
-        }
-        this._animating = setTimeout(function () {
-            _this.animating = false;
-        }, this.animationDuration);
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.positionHintFromEvent = function (event) {
-        var offset = this.parentOffset();
-        this.hintLocation = event ? { x: event.clientX - offset.left, y: event.clientY - offset.top } : null;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.parentOffset = function () {
-        var offsetParent = this.offsetParent;
-        if (offsetParent) {
-            var rect = offsetParent.getBoundingClientRect();
-            return {
-                left: rect.left - offsetParent.scrollLeft,
-                top: rect.top - offsetParent.scrollTop
-            };
-        }
-        return { left: 0, top: 0 };
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.markForCheck = function () {
-        this.changeDetector.markForCheck();
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.reflow = function (element) {
-        return element.offsetWidth;
-    };
-    /**
-     * @hidden
-     */
-    SortableComponent.prototype.applyAnimationStyle = function (el, prop, val) {
-        var style = el && el.style;
-        if (style) {
-            if (!(prop in style)) {
-                prop = '-webkit-' + prop;
-            }
-            style[prop] = val;
-        }
-    };
-    SortableComponent.prototype.subscribeEvents = function () {
-        var _this = this;
-        this.localizationChangeSubscription = this.localization
-            .changes
-            .subscribe(function (_a) {
-            var rtl = _a.rtl;
-            return _this.direction = rtl ? 'rtl' : 'ltr';
-        });
-        this.dragStartSubscription = this.onDragStartSubject
-            .subscribe(function (event) {
-            _this.sortableService.originDraggable = event.target;
-            _this.sortableService.originIndex = event.target.index;
-            _this.sortableService.activeDraggable = event.target;
-            _this.sortableService.lastDraggable = event.target;
-            _this.sortableService.target = _this;
-            _this.sortableService.setSource(_this);
-            var dragStartEvent = new DragStartEvent({ index: event.target.index });
-            _this.dragStart.emit(dragStartEvent);
-            if (dragStartEvent.isDefaultPrevented()) {
-                event.preventDefault();
-            }
-            else {
-                if (!event.target.disabled) {
-                    if (_this.sortableService.target) {
-                        _this.sortableService.target.dragOverIndex = -1;
-                        _this.sortableService.target.dragIndex = -1;
-                    }
-                    _this.dragOverIndex = event.target.index;
-                    _this.dragIndex = event.target.index;
-                }
-            }
-        });
-        this.dragOverSubscription = this.onDragOverSubject.pipe(filter(function (event) { return event.target && event.target.el.nativeElement.style.transition.length === 0; }), filter(function () {
-            // Drag started from a disabled item
-            return _this.sortableService.originDraggable && !_this.sortableService.originDraggable.disabled;
-        }), filter(function () {
-            return _this.sortableService && _this.acceptDragFrom(_this.sortableService.getSource());
-        }), filter(function (event) {
-            return event.target !== _this.sortableService.lastDraggable;
-        }))
-            .subscribe(function (event) {
-            _this.sortableService.lastDraggable = event.target;
-            var originDraggable = _this.sortableService.originDraggable;
-            var targetIndex = event.target.index;
-            if (originDraggable.hidden && originDraggable.parent === _this) {
-                if (originDraggable.index < event.target.index) {
-                    targetIndex = event.target.index - 1;
-                }
-            }
-            _this.sortableService.target = _this;
-            var oldIndex = _this.sortableService.activeDraggable ? _this.sortableService.activeDraggable.index : 0;
-            var dragOverEvent = new DragOverEvent({ index: targetIndex, oldIndex: oldIndex });
-            _this.dragOver.emit(dragOverEvent);
-            if (!dragOverEvent.isDefaultPrevented() && event.target && event.target.index >= 0) {
-                _this.dragOverIndex = event.target.index;
-                _this.placeHolderItemData(event.target);
-            }
-        });
-        this.dragEndSubscription = this.onDragEndSubject
-            .subscribe(function (event) {
-            var source = _this.sortableService.getSource();
-            if (!source) {
-                return;
-            }
-            var target = _this.sortableService.target;
-            var index = event.target ? event.target.index : -1;
-            var oldIndex = _this.sortableService.originDraggable ? _this.sortableService.originIndex : -1;
-            _this.hintLocation = null;
-            var dragEndEvent = new DragEndEvent({ index: index, oldIndex: oldIndex });
-            _this.dragEnd.emit(dragEndEvent);
-            if (!dragEndEvent.isDefaultPrevented()) {
-                source.dragIndex = -1;
-                source.dragOverIndex = -1;
-                source.activeIndex = -1;
-                if (target && target !== source) {
-                    target.dragIndex = -1;
-                    target.dragOverIndex = -1;
-                }
-                setTimeout(function () {
-                    _this.sortableService.activeDraggable = null;
-                    _this.sortableService.lastDraggable = null;
-                    _this.sortableService.originDraggable = null;
-                    _this.sortableService.target = null;
-                    _this.sortableService.setSource(null);
-                });
-            }
-        });
-        this.dragLeaveSubscription = this.onDragLeaveSubject.pipe(filter(function (e) {
-            if (!isDocumentAvailable()) {
-                return false;
-            }
-            return _this.wrapper !== document.elementFromPoint(e.originalEvent.pageX, e.originalEvent.pageY);
-        }), filter(function (_e) {
-            return !_this.animating;
-        }), filter(function (_) { return _this.sortableService.target && _this.sortableService.target.dragOverIndex > -1; }))
-            .subscribe(function () {
-            _this.dragLeave.emit({ index: _this.sortableService.originDraggable.index });
-            _this.sortableService.lastDraggable = null;
-            _this.dragOverIndex = -1;
-            _this.sortableService.target = null;
-        });
-    };
-    SortableComponent.prototype.unsubscribeEvents = function () {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
-        this.dragStartSubscription.unsubscribe();
-        this.dragOverSubscription.unsubscribe();
-        this.dragEndSubscription.unsubscribe();
-        this.dragLeaveSubscription.unsubscribe();
-    };
-    SortableComponent.prototype.placeHolderItemData = function (draggable) {
-        var _this = this;
-        if (draggable.disabled) {
-            return;
-        }
-        var target = this.sortableService.target;
-        var source = this.sortableService.getSource();
-        var originalData = Object.assign({}, this._localData[draggable.index]);
-        var newData = source._localData[source.dragIndex];
-        this.setItemData(newData, draggable.index);
-        var endSub = source.onDragEndSubject.pipe(take(1)).subscribe(function () {
-            _this.setItemData(originalData, draggable.index);
-        });
-        var leaveSub = target.onDragLeaveSubject.pipe(take(1)).subscribe(function () {
-            _this.setItemData(originalData, draggable.index);
-        });
-        var overSub = merge(this.onDragOverSubject.pipe(filter(function () {
-            return draggable.index !== _this.dragOverIndex;
-        })), this.onDragLeaveSubject).subscribe(function () {
-            _this.setItemData(originalData, draggable.index);
-            endSub.unsubscribe();
-            overSub.unsubscribe();
-            leaveSub.unsubscribe();
-        });
-    };
-    SortableComponent.prototype.fixFocus = function () {
-        if (this.itemWrappers) {
-            var itemArray = this.itemWrappers.toArray();
-            if (this.dragIndex > -1 && itemArray && itemArray.length > 0) {
-                itemArray[this.dragIndex].nativeElement.focus();
-                this.activeIndex = this.dragIndex;
-            }
-        }
-    };
-    var SortableComponent_1;
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SortableComponent.prototype, "tabIndex", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], SortableComponent.prototype, "data", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], SortableComponent.prototype, "navigable", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [Boolean])
-    ], SortableComponent.prototype, "navigatable", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], SortableComponent.prototype, "animation", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], SortableComponent.prototype, "disabledIndexes", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], SortableComponent.prototype, "zone", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], SortableComponent.prototype, "acceptZones", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "itemStyle", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "emptyItemStyle", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "activeItemStyle", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "disabledItemStyle", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "itemClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "activeItemClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "emptyItemClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], SortableComponent.prototype, "disabledItemClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], SortableComponent.prototype, "emptyText", void 0);
-    __decorate([
-        ContentChildren(TemplateRef, { descendants: false }),
-        __metadata("design:type", QueryList)
-    ], SortableComponent.prototype, "defaultTemplateRef", void 0);
-    __decorate([
-        ContentChildren(ItemTemplateDirective, { read: TemplateRef, descendants: false }),
-        __metadata("design:type", QueryList)
-    ], SortableComponent.prototype, "itemTemplateDirectiveRef", void 0);
-    __decorate([
-        ContentChildren(PlaceholderTemplateDirective, { read: TemplateRef, descendants: false }),
-        __metadata("design:type", QueryList)
-    ], SortableComponent.prototype, "placeholderTemplateDirectiveRef", void 0);
-    __decorate([
-        ViewChildren('itemWrapper'),
-        __metadata("design:type", QueryList)
-    ], SortableComponent.prototype, "itemWrappers", void 0);
-    __decorate([
-        ViewChildren(DraggableDirective),
-        __metadata("design:type", QueryList)
-    ], SortableComponent.prototype, "draggables", void 0);
-    __decorate([
-        ViewChild('noDataRef', { static: false }),
-        __metadata("design:type", ElementRef)
-    ], SortableComponent.prototype, "noDataContainer", void 0);
-    __decorate([
-        ViewChild('hint', { static: false }),
-        __metadata("design:type", ElementRef)
-    ], SortableComponent.prototype, "hint", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dragStart", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dragEnd", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dragOver", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dragLeave", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dataMove", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dataAdd", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "dataRemove", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], SortableComponent.prototype, "navigate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SortableComponent.prototype, "activeIndex", void 0);
-    __decorate([
-        HostBinding('style.touch-action'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], SortableComponent.prototype, "touchAction", null);
-    __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], SortableComponent.prototype, "dir", null);
-    SortableComponent = SortableComponent_1 = __decorate([
-        Component({
-            exportAs: 'kendoSortable',
-            providers: [
-                LocalizationService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.sortable'
-                },
-                {
-                    provide: SortableContainer,
-                    useExisting: forwardRef(function () { return SortableComponent_1; })
-                }
-            ],
-            selector: 'kendo-sortable',
-            template: "\n    <div #itemWrapper *ngFor=\"let item of _localData;let i=index\"\n        kendoDraggable\n        [attr.tabIndex]=\"itemEnabled(i)?(navigable?tabIndex||0:tabIndex):null\"\n        [attr.aria-grabbed]=\"i===dragIndex\"\n        [attr.aria-dropeffect]=\"ariaDropEffect(i)\"\n        [attr.data-sortable-item] = \"true\"\n        [attr.data-sortable-index]=\"i\"\n        [attr.data-sortable-id]=\"id\"\n        [index]=\"i\"\n        [hidden]=\"item.hidden\"\n        [disabled]=\"!itemEnabled(i)\"\n        [ngClass]=\"currentItemClass(i)\"\n        [ngStyle]=\"currentItemStyle(i)\"\n\n        (focus)=\"focusHandler(i)\"\n        (blur)=\"blurHandler()\"\n        (keydown)=\"keydownHandler($event)\"\n    >\n          <ng-container *ngIf=\"itemTemplateRef\"\n            [ngTemplateOutlet]=\"itemTemplate(i)\"\n            [ngTemplateOutletContext]=\"item\">\n          </ng-container>\n      <ng-container *ngIf=\"!itemTemplateRef\">{{item.item}}</ng-container>\n    </div>\n\n    <ng-container #noDataRef *ngIf=\"!_data.length || _localData.length === 1 && _localData[0].hidden\">\n        <div\n        kendoDraggable\n        [index]=\"0\"\n        [disabled]=\"true\"\n        [attr.data-sortable-id]=\"id\"\n        [attr.data-sortable-index]=\"0\"\n        [ngStyle]=\"currentItemStyle(-1)\"\n        [ngClass]=\"currentItemClass(-1)\"\n        >{{emptyText}}</div>\n    </ng-container>\n     <div *ngIf=\"hintVisible()\" [ngStyle]=\"hintStyle()\" [ngClass]=\"currentItemClass(dragIndex)\">\n         <ng-container *ngIf=\"itemTemplateRef\"\n             [ngTemplateOutlet]=\"itemTemplateRef\"\n             [ngTemplateOutletContext]=\"{item: _localData[dragIndex].item}\">\n         </ng-container>\n         <ng-container *ngIf=\"!itemTemplateRef\">{{_localData[dragIndex].item}}</ng-container>\n     </div>\n  "
-        })
-        /**
-         * Represents the Kendo UI Sortable component for Angular.
-         */
-        ,
-        __metadata("design:paramtypes", [NgZone,
-            LocalizationService,
-            ChangeDetectorRef,
-            ElementRef,
-            SortableService])
-    ], SortableComponent);
-    return SortableComponent;
-}());
-
-/**
- * The arguments for the `SortableComponent` `dataAdd` event.
- */
-var DataAddEvent = /** @class */ (function (_super) {
-    __extends(DataAddEvent, _super);
-    /**
-     * @hidden
-     */
-    function DataAddEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DataAddEvent;
-}(PreventableEvent));
-/**
- * The arguments for the `SortableComponent` `dataRemove` event.
- */
-var DataRemoveEvent = /** @class */ (function (_super) {
-    __extends(DataRemoveEvent, _super);
-    /**
-     * @hidden
-     */
-    function DataRemoveEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DataRemoveEvent;
-}(PreventableEvent));
-/**
- * The arguments for the `SortableComponent` `dataMove` event.
- */
-var DataMoveEvent = /** @class */ (function (_super) {
-    __extends(DataMoveEvent, _super);
-    /**
-     * @hidden
-     */
-    function DataMoveEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return DataMoveEvent;
-}(PreventableEvent));
-
-/**
- * A Directive which handles the most common scenarios such reordering and moving items between Sortables, thus minimizng boilerplate code.
- * This is achieved by subscribing to the Sortable's events and handling them using the API methods it provides.
- */
-var SortableBindingDirective = /** @class */ (function () {
-    function SortableBindingDirective(sortable, sortableService) {
-        this.sortable = sortable;
-        this.sortableService = sortableService;
-        this.sortableService = sortableService;
-    }
-    Object.defineProperty(SortableBindingDirective.prototype, "data", {
-        /**
-         * Sets a data-bound array that is used as a data source for the Sortable.
-         *
-         * {% embed_file overview/app.component.ts %}
-         * {% embed_file shared/app.module.ts %}
-         * {% embed_file shared/main.ts hidden %}
-         */
-        set: function (data) {
-            this.sortable.data = data;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SortableBindingDirective.prototype.nextEnabledIndex = function (index, sortable) {
-        for (var i = index; i <= sortable.data.length; i++) {
-            if (sortable.itemEnabled(i)) {
-                return i;
-            }
-        }
-    };
-    SortableBindingDirective.prototype.addItem = function (event, sortable) {
-        var index = event.index;
-        var dataItem = this.sortableService.getSource().data[event.oldIndex];
-        var addEvent = new DataAddEvent({ index: index, dataItem: dataItem });
-        sortable.dataAdd.emit(addEvent);
-        if (!addEvent.isDefaultPrevented()) {
-            if (index === sortable.itemWrappers.length - 1 && !sortable.noDataContainer) {
-                index++;
-            }
-            sortable.addDataItem(dataItem, index);
-        }
-        return !addEvent.isDefaultPrevented();
-    };
-    SortableBindingDirective.prototype.removeItem = function (event, sortable) {
-        var originDraggable = this.sortableService.originDraggable;
-        var removeEvent = new DataRemoveEvent({ index: event.oldIndex, dataItem: sortable.data[event.oldIndex] });
-        sortable.dataRemove.emit(removeEvent);
-        if (!removeEvent.isDefaultPrevented()) {
-            if (originDraggable && originDraggable.parent === sortable) {
-                sortable.hideItem(event.oldIndex, true);
-            }
-            else {
-                sortable.removeDataItem(event.oldIndex);
-            }
-        }
-        return !removeEvent.isDefaultPrevented();
-    };
-    SortableBindingDirective.prototype.moveItem = function (event, sortable) {
-        if (event.index === event.oldIndex) {
-            return false;
-        }
-        var moveEvent = new DataMoveEvent({
-            dataItem: sortable.data[event.oldIndex],
-            index: event.index,
-            oldIndex: event.oldIndex
-        });
-        sortable.dataMove.emit(moveEvent);
-        if (!moveEvent.isDefaultPrevented()) {
-            sortable.moveItem(event.oldIndex, event.index);
-        }
-        return !moveEvent.isDefaultPrevented();
-    };
-    /**
-     * Removes the Draggable item from which the drag started.
-     * @hidden
-     */
-    SortableBindingDirective.prototype.removeOriginDraggable = function () {
-        var _this = this;
-        if (this.removeHiddenSubscription) {
-            this.removeHiddenSubscription.unsubscribe();
-        }
-        this.removeHiddenSubscription = this.sortableService.onReleaseSubject.pipe(take(1), filter(function (_) { return _this.sortableService.originDraggable !== null && _this.sortableService.originDraggable.hidden; })).subscribe(function (e) {
-            var originDraggable = _this.sortableService.originDraggable;
-            var newSource = _this.sortableService.getSource();
-            if (originDraggable.parent !== _this.sortableService.target) {
-                var isTargetDraggable = e.target ? (e.target.isDraggable || e.target.isDraggableChild) : false;
-                if (isTargetDraggable || originDraggable.parent !== newSource) {
-                    if (originDraggable.parent !== _this.sortableService.target) {
-                        originDraggable.parent.removeDataItem(originDraggable.index);
-                    }
-                }
-                _this.sortableService.originDraggable = null;
-            }
-        });
-    };
-    SortableBindingDirective.prototype.onDragOver = function (event) {
-        var source = this.sortableService.getSource();
-        var target = this.sortableService.target;
-        var targetDraggables = target.draggables.toArray();
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        event.preventDefault();
-        if (target === source) {
-            // Skip moveItem if target is the draggable after which item was just added
-            // Ensures item added to the end stays there until further user action
-            if (targetDraggables[event.index] !== this.lastTarget) {
-                this.moveItem(event, target);
-            }
-            this.lastTarget = undefined;
-        }
-        else {
-            if (!target.itemEnabled(event.index)) {
-                event.index = this.nextEnabledIndex(event.index, target);
-            }
-            //Add to target and remove from source
-            if (this.addItem(event, target) && this.removeItem(event, source)) {
-                this.lastTarget = target.draggables.toArray()[event.index];
-                this.removeOriginDraggable();
-                target.activeIndex = event.index;
-                source.activeIndex = -1;
-            }
-        }
-    };
-    SortableBindingDirective.prototype.onNavigate = function (event) {
-        if (event.ctrlKey) {
-            var moveEvent = new DataMoveEvent({
-                dataItem: this.sortable.data[event.oldIndex],
-                index: event.index,
-                oldIndex: event.oldIndex
-            });
-            this.sortable.dataMove.emit(moveEvent);
-            if (!moveEvent.isDefaultPrevented()) {
-                this.sortable.moveItem(event.oldIndex, event.index);
-            }
-        }
-        else {
-            this.sortable.activeIndex = event.index;
-        }
-    };
-    SortableBindingDirective.prototype.ngOnInit = function () {
-        this.dragOverSubscription = this.sortable.dragOver.subscribe(this.onDragOver.bind(this));
-        this.navigateSubscription = this.sortable.navigate.subscribe(this.onNavigate.bind(this));
-    };
-    SortableBindingDirective.prototype.ngOnDestroy = function () {
-        this.dragOverSubscription.unsubscribe();
-        this.navigateSubscription.unsubscribe();
-        if (this.removeHiddenSubscription) {
-            this.removeHiddenSubscription.unsubscribe();
-        }
-    };
-    __decorate([
-        Input("kendoSortableBinding"),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], SortableBindingDirective.prototype, "data", null);
-    SortableBindingDirective = __decorate([
-        Directive({
-            selector: '[kendoSortableBinding]'
-        }),
-        __metadata("design:paramtypes", [SortableComponent,
-            SortableService])
-    ], SortableBindingDirective);
-    return SortableBindingDirective;
-}());
-
-var COMPONENT_DIRECTIVES = [
-    SortableComponent,
-    DraggableDirective,
-    PlaceholderTemplateDirective,
-    ItemTemplateDirective,
-    SortableBindingDirective
-];
-/**
- *
- * Represents the [`NgModule`]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the Sortable component.
- *
- * @example
- *
- * ```ts-no-run
- * import { NgModule } from '@angular/core';
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * // Import the Sortable module
- * import { SortableModule } from '@progress/kendo-angular-sortable';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent],
- *     imports:      [BrowserModule, SortableModule],
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-var SortableModule = /** @class */ (function () {
-    function SortableModule() {
-    }
-    SortableModule = __decorate([
-        NgModule({
-            declarations: [COMPONENT_DIRECTIVES],
-            exports: [COMPONENT_DIRECTIVES],
-            imports: [CommonModule],
-            providers: [SortableService]
-        })
-    ], SortableModule);
-    return SortableModule;
-}());
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SortableComponent, SortableModule, PreventableEvent, DraggableEvent, DragStartEvent, DragEndEvent, DragOverEvent, NavigateEvent, DataMoveEvent, DraggableDirective, SortableBindingDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableService, SortableContainer };