@progress/kendo-angular-sortable 5.0.4-dev.202211170813 → 11.0.0-develop.79

package/fesm2020/progress-kendo-angular-sortable.mjs

@@ -0,0 +1,1896 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { Injectable, Directive, Input, HostBinding, EventEmitter, forwardRef, TemplateRef, Component, ContentChildren, ViewChildren, ViewChild, Output, 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 * as i1 from '@progress/kendo-angular-l10n';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Draggable } from '@progress/kendo-draggable';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const NODE_NAME_PREDICATES = {};
+const NODE_ATTR_PREDICATES = {};
+const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
+/**
+ * @hidden
+ */
+const matchesNodeName = (nodeName) => {
+    if (!NODE_NAME_PREDICATES[nodeName]) {
+        NODE_NAME_PREDICATES[nodeName] = (element) => String(element.nodeName).toLowerCase() === nodeName.toLowerCase();
+    }
+    return NODE_NAME_PREDICATES[nodeName];
+};
+/**
+ * @hidden
+ */
+const matchesNodeAttr = (nodeAttr) => {
+    if (!NODE_ATTR_PREDICATES[nodeAttr]) {
+        NODE_ATTR_PREDICATES[nodeAttr] = (element) => element.hasAttribute ? element.hasAttribute(nodeAttr) : false;
+    }
+    return NODE_ATTR_PREDICATES[nodeAttr];
+};
+/**
+ * @hidden
+ */
+const closest = (node, predicate) => {
+    while (node && !predicate(node)) {
+        node = node.parentNode;
+    }
+    return node;
+};
+/**
+ * Returns an object specifiying whether there is a DraggableDirective under the cursor.
+ * @hidden
+ */
+const draggableFromPoint = (x, y) => {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    const el = document.elementFromPoint(x, y);
+    if (!el) {
+        return;
+    }
+    const isDraggable = el.hasAttribute("kendoDraggable");
+    const isChild = closest(el, matchesNodeAttr("kendoDraggable")) !== null;
+    const parentDraggable = closest(el, matchesNodeAttr("kendoDraggable"));
+    const 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
+ */
+const draggableFromEvent = (event, sortable) => {
+    let target;
+    if (event.changedTouches) {
+        const 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
+ */
+const isFocusable = (element) => {
+    if (element.tagName) {
+        const tagName = element.tagName.toLowerCase();
+        const tabIndex = element.getAttribute('tabIndex');
+        const skipTab = tabIndex === '-1';
+        let focusable = tabIndex !== null && !skipTab;
+        if (focusableRegex.test(tagName)) {
+            focusable = !element.disabled && !skipTab;
+        }
+        return focusable;
+    }
+    return false;
+};
+const toClassList = (classNames) => String(classNames).trim().split(' ');
+/**
+ * @hidden
+ */
+const hasClasses = (element, classNames) => {
+    const namesList = toClassList(classNames);
+    return Boolean(toClassList(element.className).find((className) => namesList.indexOf(className) >= 0));
+};
+const isSortable = matchesNodeName('kendo-sortable');
+/**
+ * @hidden
+ */
+const widgetTarget = (target) => {
+    const element = closest(target, node => hasClasses(node, 'k-widget') || isSortable(node));
+    return element && !isSortable(element);
+};
+const hasRelativeStackingContext = () => {
+    if (!isDocumentAvailable()) {
+        return false;
+    }
+    const top = 10;
+    const parent = document.createElement("div");
+    parent.style.transform = "matrix(10, 0, 0, 10, 0, 0)";
+    const innerDiv = document.createElement('div');
+    innerDiv.style.position = 'fixed';
+    innerDiv.style.top = `${top}px;`;
+    parent.appendChild(innerDiv);
+    document.body.appendChild(parent);
+    const isDifferent = parent.children[0].getBoundingClientRect().top !== top;
+    document.body.removeChild(parent);
+    return isDifferent;
+};
+const HAS_RELATIVE_STACKING_CONTEXT = hasRelativeStackingContext();
+/**
+ * @hidden
+ */
+const relativeContextElement = (element) => {
+    if (!element || !HAS_RELATIVE_STACKING_CONTEXT) {
+        return null;
+    }
+    let node = element.parentElement;
+    while (node) {
+        if (window.getComputedStyle(node).transform !== 'none') {
+            return node;
+        }
+        node = node.parentElement;
+    }
+};
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-sortable',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1672320723,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
+const allowDrag = (e) => {
+    const 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.
+ *
+ */
+class SortableService {
+    constructor(ngZone) {
+        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(press => {
+            this.targetSortable = this.getSortableComponentFromTouch(press);
+        }), filter(_ => Boolean(this.targetSortable)), tap(press => {
+            this.onReleaseSubject.pipe(take(1)).subscribe(event => this.release(event));
+            this.pressArgs = press;
+            if (press.isTouch) {
+                press.originalEvent.preventDefault();
+            }
+        }), switchMap(_drag => this.onDragSubject.pipe(filter(_ => Boolean(this.targetSortable)), //stop further events if dragStart is prevented
+        tap((e) => this.drag(e))))).subscribe();
+    }
+    /**
+     * Specifies the `SortableComponent` instance under the currently dragged item.
+     */
+    set target(target) {
+        this._target = target;
+    }
+    get target() {
+        return this._target;
+    }
+    /**
+     * @hidden
+     */
+    onPress(e) {
+        this.onPressSubject.next(e);
+    }
+    /**
+     * @hidden
+     */
+    onDrag(e) {
+        this.onDragSubject.next(e);
+    }
+    /**
+     * @hidden
+     */
+    onRelease(e) {
+        this.onReleaseSubject.next(e);
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        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.
+     */
+    registerComponent(sortableComponent) {
+        const 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.
+     */
+    unregisterComponent(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`.
+     */
+    setSource(sortable) {
+        this.source = sortable;
+    }
+    /**
+     * Returns the source `SortableComponent` from which
+     * an item is dragged to other Sortable components.
+     *
+     * @return - The `SourceComponent`.
+     */
+    getSource() {
+        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.
+     */
+    getSortableComponentFromTouch(touch) {
+        if (!isDocumentAvailable()) {
+            return { component: undefined, index: undefined };
+        }
+        let realTarget = document.elementFromPoint(touch.clientX, touch.clientY);
+        while (realTarget) {
+            const id = realTarget.getAttribute('data-sortable-id');
+            const index = realTarget.getAttribute('data-sortable-index');
+            if (id) {
+                const targetSortable = this.sortableRegister[id];
+                if (targetSortable) {
+                    return { component: targetSortable, index: parseInt(index, 10) };
+                }
+            }
+            realTarget = realTarget.parentElement;
+        }
+    }
+    start() {
+        const pressArgs = this.pressArgs;
+        if (pressArgs) {
+            this.pressArgs = null;
+            const startTarget = draggableFromEvent(pressArgs, this.targetSortable.component);
+            if (this.targetSortable.component.startDrag({ target: startTarget, originalEvent: pressArgs })) {
+                this.targetSortable = null;
+                return true;
+            }
+        }
+    }
+    release(event) {
+        if (this.source) {
+            this.ngZone.run(() => {
+                if (this.targetSortable) {
+                    const 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;
+    }
+    drag(event) {
+        this.ngZone.run(() => {
+            if (this.start()) {
+                return;
+            }
+            this.source.positionHintFromEvent(event);
+            const 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) {
+                const draggable = draggableFromEvent(event, sortable.component);
+                sortable.component.drag({ target: draggable, originalEvent: event });
+            }
+            this.source.markForCheck();
+        });
+    }
+}
+SortableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SortableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/**
+ * @hidden
+ */
+class SortableContainer {
+}
+SortableContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SortableContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableContainer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableContainer, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+class DraggableDirective {
+    constructor(parent, el, renderer) {
+        this.parent = parent;
+        this.el = el;
+        this.renderer = renderer;
+    }
+    set hidden(value) {
+        this._hidden = value;
+        this.updateDisplayStyle();
+    }
+    ;
+    get hidden() {
+        return this._hidden;
+    }
+    get _focused() {
+        return this.disabled ? false : (this.index === this.parent.activeIndex);
+    }
+    get _disabled() {
+        return this.disabled;
+    }
+    get display() {
+        return this.hidden ? "none" : this._display;
+    }
+    set display(display) {
+        this._display = display;
+        this.updateDisplayStyle();
+    }
+    ngOnInit() {
+        const 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');
+        }
+    }
+    updateDisplayStyle() {
+        this.renderer.setStyle(this.el.nativeElement, 'display', this.display);
+    }
+}
+DraggableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DraggableDirective, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused", "attr.aria-disabled": "this._disabled" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDraggable]'
+                }]
+        }], ctorParameters: function () { return [{ type: SortableContainer }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], _focused: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], _disabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }] } });
+
+//TODO: RENAME FILE AND UPDATE EXPORTS AND MODULES
+/**
+ * @hidden
+ */
+class ItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ItemTemplateDirective, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSortableItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+/**
+ * @hidden
+ */
+class PlaceholderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+PlaceholderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+PlaceholderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PlaceholderTemplateDirective, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSortablePlaceholderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Defines an event whose default action can be prevented
+ * by calling the `preventDefault` method.
+ *
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        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.
+     */
+    preventDefault() {
+        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`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * The `navigate` event is emitted when using the keyboard arrows.
+ */
+class NavigateEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+
+/**
+ * The arguments for the `DraggableDirective` events.
+ * @hidden
+ */
+class DraggableEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+
+/**
+ * Arguments for the `dragStart` event.
+ */
+class DragStartEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+/**
+ * Arguments for the `dragOver` event.
+ */
+class DragOverEvent extends DragStartEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super(options);
+        Object.assign(this, options);
+    }
+}
+/**
+ * Arguments for the `dragEnd` event.
+ */
+class DragEndEvent extends DragOverEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super(options);
+        Object.assign(this, options);
+    }
+}
+
+/**
+ * Represents the [Kendo UI Sortable component for Angular]({% slug overview_sortable %}).
+ *
+ * {% meta height:430 %}
+ * {% embed_file sortable-api/app.component.ts %}
+ * {% embed_file shared/app.module.ts preview %}
+ * {% embed_file shared/main.ts hidden %}
+ * {% endmeta %}
+ */
+/**
+ * Represents the Kendo UI Sortable component for Angular.
+ */
+class SortableComponent {
+    constructor(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();
+    }
+    /**
+     * Sets an array of any data that is used as a data source for the Sortable.
+     * {% meta height:430 %}
+     * {% embed_file sortable-palettes/app.component.ts %}
+     * {% embed_file shared/app.module.ts %}
+     * {% embed_file shared/main.ts hidden %}
+     * {% endmeta %}
+     */
+    set data(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();
+    }
+    get data() {
+        return this._data;
+    }
+    /**
+     * @hidden
+     *
+     * A misspelled alias for `navigable`.
+     */
+    set navigatable(value) {
+        this.navigable = value;
+    }
+    get touchAction() {
+        return "none";
+    }
+    get dir() {
+        return this.direction;
+    }
+    setItemData(data, i) {
+        this._localData[i].item = data.item;
+        this._localData[i].index = data.index;
+        this._localData[i].hidden = data.hidden;
+    }
+    /**
+     * @hidden
+     */
+    itemTemplate(index) {
+        let template = this.itemTemplateRef;
+        if (index === this.dragOverIndex) {
+            template = this.placeholderTemplateRef;
+        }
+        else if (index === this.dragIndex) {
+            template = this.itemTemplateRef;
+        }
+        return template;
+    }
+    ngOnInit() {
+        if (!this.data) {
+            this.data = [];
+        }
+        this.id = this.sortableService.registerComponent(this);
+        this.dragIndex = -1;
+        const 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: (e) => this.sortableService.onPress(e),
+                drag: (e) => this.sortableService.onDrag(e),
+                release: (e) => this.sortableService.onRelease(e)
+            });
+            this.ngZone.runOutsideAngular(() => {
+                this.draggable.bindTo(this.wrapper);
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.data && isChanged('disabledIndexes', changes, false)) {
+            this.cacheData();
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribeEvents();
+        this.sortableService.unregisterComponent(this.id);
+        if (this.draggable) {
+            this.draggable.destroy();
+        }
+    }
+    ngAfterContentInit() {
+        this.itemTemplateRef = this.itemTemplateDirectiveRef.first || this.defaultTemplateRef.first;
+        this.placeholderTemplateRef = this.placeholderTemplateDirectiveRef.first || this.defaultTemplateRef.first;
+    }
+    ngAfterViewChecked() {
+        if (this.afterKeyPress) {
+            if (this.itemWrappers) {
+                const elems = this.itemWrappers.toArray();
+                if (elems && elems.length > 0 && this.activeIndex > -1) {
+                    elems[this.activeIndex].nativeElement.focus();
+                }
+            }
+            this.afterKeyPress = false;
+        }
+    }
+    /**
+     * @hidden
+     */
+    updateCacheIndices() {
+        this._localData.forEach((item, index) => {
+            item.index = index;
+        });
+    }
+    /**
+     * @hidden
+     */
+    cacheData() {
+        this._localData = [];
+        this._data.forEach((item, index) => {
+            this._localData.push({ item: item, active: false, disabled: !this.itemEnabled(index), index: index, hidden: false });
+        });
+    }
+    /**
+     * @hidden
+     */
+    startDrag(event) {
+        const startEvent = new DraggableEvent(event);
+        this.onDragStartSubject.next(startEvent);
+        const prevented = startEvent.isDefaultPrevented();
+        if (!prevented) {
+            this.offsetParent = relativeContextElement(this.wrapper);
+        }
+        return prevented;
+    }
+    /**
+     * @hidden
+     */
+    drag(event) {
+        const dragEvent = new DraggableEvent(event);
+        this.onDragOverSubject.next(dragEvent);
+        return dragEvent.isDefaultPrevented();
+    }
+    /**
+     * @hidden
+     */
+    leave(event) {
+        const leaveEvent = new DraggableEvent(event);
+        this.onDragLeaveSubject.next(leaveEvent);
+        return leaveEvent.isDefaultPrevented();
+    }
+    /**
+     * @hidden
+     */
+    endDrag(event) {
+        const endEvent = new DraggableEvent(event);
+        this.onDragEndSubject.next(endEvent);
+        return endEvent.isDefaultPrevented();
+    }
+    /**
+     * @hidden
+     */
+    hintVisible() {
+        return this.dragIndex >= 0 && this.hintLocation && this === this.sortableService.getSource();
+    }
+    /**
+     * @hidden
+     */
+    currentItemStyle(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
+     */
+    currentItemClass(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
+     */
+    hintStyle() {
+        const position = {
+            "left": this.hintLocation.x + 10 + "px",
+            "position": "fixed",
+            "top": this.hintLocation.y + 10 + "px"
+        };
+        const style = {};
+        Object.assign(style, this.currentItemStyle(this.dragIndex), position);
+        return style;
+    }
+    /**
+     * @hidden
+     */
+    itemEnabled(index) {
+        return this.disabledIndexes.indexOf(index) === -1;
+    }
+    /**
+     * @hidden
+     */
+    acceptDragFrom(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
+     */
+    ariaDropEffect(index) {
+        return this.itemEnabled(index) ? "move" : "none";
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(index) {
+        if (this.navigable) {
+            this.activeIndex = index;
+        }
+    }
+    /**
+     * @hidden
+     */
+    blurHandler() {
+        if (this.navigable && !this.afterKeyPress) {
+            this.activeIndex = -1;
+        }
+    }
+    /**
+     * @hidden
+     */
+    keydownHandler(event) {
+        const code = event.keyCode;
+        const navigate = this.navigable && code >= 37 && code <= 40;
+        const hasFocus = this.activeIndex !== -1;
+        if (!navigate || !hasFocus) {
+            return;
+        }
+        const leftKey = this.direction === 'rtl' ? 39 : 37;
+        const dir = code === 38 || code === leftKey ? -1 : 1;
+        const limit = this.data.length - 1;
+        let 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) {
+            const ctrl = event.ctrlKey || event.metaKey;
+            const 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.
+     */
+    removeDataItem(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
+     */
+    hideItem(index, hidden = true) {
+        this._localData[index].hidden = hidden;
+    }
+    /**
+     * Sets a Boolean value that indicates whether the currently dragged item will be hidden.
+     */
+    set hideActiveItem(value) {
+        this.activeIndex = -1;
+        this._hideActiveItem = value;
+    }
+    /**
+     * If the currently dragged item is hidden, returns `true`.
+     * If the currently dragged item is visible, returns `false`.
+     */
+    get hideActiveItem() {
+        return this._hideActiveItem;
+    }
+    /**
+     * Clears the active item.
+     * An active item is the item which becomes focused when the user navigates with the keyboard.
+     */
+    clearActiveItem() {
+        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.
+     */
+    getActiveItem() {
+        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.
+     */
+    addDataItem(dataItem, index) {
+        const originDraggable = this.sortableService.originDraggable;
+        if (originDraggable && originDraggable.parent === this) {
+            const 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(() => {
+            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.
+     */
+    moveItem(fromIndex, toIndex) {
+        if (toIndex === fromIndex) {
+            return;
+        }
+        let dragIndex = fromIndex;
+        const d = toIndex > dragIndex ? 1 : -1;
+        const originalIndexAnimate = dragIndex;
+        const toAnimate = [];
+        let prevIndex = dragIndex;
+        let 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(() => {
+                toAnimate.push({ next: originalIndexAnimate, prev: dragIndex });
+                this.animating = true;
+                this.animate(toAnimate);
+            });
+        }
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.sortableService.activeDraggable = this.draggables.toArray()[dragIndex];
+            this.sortableService.lastDraggable = null;
+        });
+    }
+    /**
+     * @hidden
+     */
+    animate(draggables) {
+        const itemArray = this.itemWrappers.toArray();
+        const prevClientRect = [];
+        const nextClientRect = [];
+        clearTimeout(this._animating);
+        for (let i = 0; i < draggables.length; i++) {
+            prevClientRect.push(itemArray[draggables[i].prev].nativeElement.getBoundingClientRect());
+            nextClientRect.push(itemArray[draggables[i].next].nativeElement.getBoundingClientRect());
+        }
+        for (let i = 0; i < draggables.length; i++) {
+            const nextIndex = draggables[i].prev;
+            const targetRect = nextClientRect[i];
+            const currentRect = prevClientRect[i];
+            const 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);
+        }
+        for (let i = 0; i < draggables.length; i++) {
+            const nextIndex = draggables[i].prev;
+            const target = itemArray[nextIndex].nativeElement;
+            this.applyAnimationStyle(target, 'transition', 'all ' + this.animationDuration + 'ms');
+            this.applyAnimationStyle(target, 'transform', 'translate3d(0,0,0)');
+            clearTimeout(target.animated);
+            target.animated = setTimeout(() => {
+                this.applyAnimationStyle(target, 'transition', '');
+                this.applyAnimationStyle(target, 'transform', '');
+                target.animated = false;
+            }, this.animationDuration);
+        }
+        this._animating = setTimeout(() => {
+            this.animating = false;
+        }, this.animationDuration);
+    }
+    /**
+     * @hidden
+     */
+    positionHintFromEvent(event) {
+        const offset = this.parentOffset();
+        this.hintLocation = event ? { x: event.clientX - offset.left, y: event.clientY - offset.top } : null;
+    }
+    /**
+     * @hidden
+     */
+    parentOffset() {
+        const offsetParent = this.offsetParent;
+        if (offsetParent) {
+            const rect = offsetParent.getBoundingClientRect();
+            return {
+                left: rect.left - offsetParent.scrollLeft,
+                top: rect.top - offsetParent.scrollTop
+            };
+        }
+        return { left: 0, top: 0 };
+    }
+    /**
+     * @hidden
+     */
+    markForCheck() {
+        this.changeDetector.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    reflow(element) {
+        return element.offsetWidth;
+    }
+    /**
+     * @hidden
+     */
+    applyAnimationStyle(el, prop, val) {
+        const style = el && el.style;
+        if (style) {
+            if (!(prop in style)) {
+                prop = '-webkit-' + prop;
+            }
+            style[prop] = val;
+        }
+    }
+    subscribeEvents() {
+        this.localizationChangeSubscription = this.localization
+            .changes
+            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.dragStartSubscription = this.onDragStartSubject
+            .subscribe((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);
+            const 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(event => event.target && event.target.el.nativeElement.style.transition.length === 0), filter(() => {
+            // Drag started from a disabled item
+            return this.sortableService.originDraggable && !this.sortableService.originDraggable.disabled;
+        }), filter(() => {
+            return this.sortableService && this.acceptDragFrom(this.sortableService.getSource());
+        }), filter((event) => {
+            return event.target !== this.sortableService.lastDraggable;
+        }))
+            .subscribe((event) => {
+            this.sortableService.lastDraggable = event.target;
+            const originDraggable = this.sortableService.originDraggable;
+            let 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;
+            const oldIndex = this.sortableService.activeDraggable ? this.sortableService.activeDraggable.index : 0;
+            const 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((event) => {
+            const source = this.sortableService.getSource();
+            if (!source) {
+                return;
+            }
+            const target = this.sortableService.target;
+            const index = event.target ? event.target.index : -1;
+            const oldIndex = this.sortableService.originDraggable ? this.sortableService.originIndex : -1;
+            this.hintLocation = null;
+            const 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(() => {
+                    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((e) => {
+            if (!isDocumentAvailable()) {
+                return false;
+            }
+            return this.wrapper !== document.elementFromPoint(e.originalEvent.pageX, e.originalEvent.pageY);
+        }), filter((_e) => {
+            return !this.animating;
+        }), filter(_ => this.sortableService.target && this.sortableService.target.dragOverIndex > -1))
+            .subscribe(() => {
+            this.dragLeave.emit({ index: this.sortableService.originDraggable.index });
+            this.sortableService.lastDraggable = null;
+            this.dragOverIndex = -1;
+            this.sortableService.target = null;
+        });
+    }
+    unsubscribeEvents() {
+        if (this.localizationChangeSubscription) {
+            this.localizationChangeSubscription.unsubscribe();
+        }
+        this.dragStartSubscription.unsubscribe();
+        this.dragOverSubscription.unsubscribe();
+        this.dragEndSubscription.unsubscribe();
+        this.dragLeaveSubscription.unsubscribe();
+    }
+    placeHolderItemData(draggable) {
+        if (draggable.disabled) {
+            return;
+        }
+        const target = this.sortableService.target;
+        const source = this.sortableService.getSource();
+        const originalData = Object.assign({}, this._localData[draggable.index]);
+        const newData = source._localData[source.dragIndex];
+        this.setItemData(newData, draggable.index);
+        const endSub = source.onDragEndSubject.pipe(take(1)).subscribe(() => {
+            this.setItemData(originalData, draggable.index);
+        });
+        const leaveSub = target.onDragLeaveSubject.pipe(take(1)).subscribe(() => {
+            this.setItemData(originalData, draggable.index);
+        });
+        const overSub = merge(this.onDragOverSubject.pipe(filter(() => {
+            return draggable.index !== this.dragOverIndex;
+        })), this.onDragLeaveSubject).subscribe(() => {
+            this.setItemData(originalData, draggable.index);
+            endSub.unsubscribe();
+            overSub.unsubscribe();
+            leaveSub.unsubscribe();
+        });
+    }
+    fixFocus() {
+        if (this.itemWrappers) {
+            const itemArray = this.itemWrappers.toArray();
+            if (this.dragIndex > -1 && itemArray && itemArray.length > 0) {
+                itemArray[this.dragIndex].nativeElement.focus();
+                this.activeIndex = this.dragIndex;
+            }
+        }
+    }
+}
+SortableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Component });
+SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SortableComponent, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.sortable'
+        },
+        {
+            provide: SortableContainer,
+            useExisting: forwardRef(() => SortableComponent)
+        }
+    ], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
+    <div #itemWrapper *ngFor="let item of _localData;let i=index"
+        kendoDraggable
+        [attr.tabIndex]="itemEnabled(i)?(navigable?tabIndex||0:tabIndex):null"
+        [attr.aria-grabbed]="i===dragIndex"
+        [attr.aria-dropeffect]="ariaDropEffect(i)"
+        [attr.data-sortable-item] = "true"
+        [attr.data-sortable-index]="i"
+        [attr.data-sortable-id]="id"
+        [index]="i"
+        [hidden]="item.hidden"
+        [disabled]="!itemEnabled(i)"
+        [ngClass]="currentItemClass(i)"
+        [ngStyle]="currentItemStyle(i)"
+
+        (focus)="focusHandler(i)"
+        (blur)="blurHandler()"
+        (keydown)="keydownHandler($event)"
+    >
+          <ng-container *ngIf="itemTemplateRef"
+            [ngTemplateOutlet]="itemTemplate(i)"
+            [ngTemplateOutletContext]="item">
+          </ng-container>
+      <ng-container *ngIf="!itemTemplateRef">{{item.item}}</ng-container>
+    </div>
+
+    <ng-container #noDataRef *ngIf="!_data.length || _localData.length === 1 && _localData[0].hidden">
+        <div
+        kendoDraggable
+        [index]="0"
+        [disabled]="true"
+        [attr.data-sortable-id]="id"
+        [attr.data-sortable-index]="0"
+        [ngStyle]="currentItemStyle(-1)"
+        [ngClass]="currentItemClass(-1)"
+        >{{emptyText}}</div>
+    </ng-container>
+     <div *ngIf="hintVisible()" [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
+         <ng-container *ngIf="itemTemplateRef"
+             [ngTemplateOutlet]="itemTemplateRef"
+             [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
+         </ng-container>
+         <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
+     </div>
+  `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoSortable',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.sortable'
+                        },
+                        {
+                            provide: SortableContainer,
+                            useExisting: forwardRef(() => SortableComponent)
+                        }
+                    ],
+                    selector: 'kendo-sortable',
+                    template: `
+    <div #itemWrapper *ngFor="let item of _localData;let i=index"
+        kendoDraggable
+        [attr.tabIndex]="itemEnabled(i)?(navigable?tabIndex||0:tabIndex):null"
+        [attr.aria-grabbed]="i===dragIndex"
+        [attr.aria-dropeffect]="ariaDropEffect(i)"
+        [attr.data-sortable-item] = "true"
+        [attr.data-sortable-index]="i"
+        [attr.data-sortable-id]="id"
+        [index]="i"
+        [hidden]="item.hidden"
+        [disabled]="!itemEnabled(i)"
+        [ngClass]="currentItemClass(i)"
+        [ngStyle]="currentItemStyle(i)"
+
+        (focus)="focusHandler(i)"
+        (blur)="blurHandler()"
+        (keydown)="keydownHandler($event)"
+    >
+          <ng-container *ngIf="itemTemplateRef"
+            [ngTemplateOutlet]="itemTemplate(i)"
+            [ngTemplateOutletContext]="item">
+          </ng-container>
+      <ng-container *ngIf="!itemTemplateRef">{{item.item}}</ng-container>
+    </div>
+
+    <ng-container #noDataRef *ngIf="!_data.length || _localData.length === 1 && _localData[0].hidden">
+        <div
+        kendoDraggable
+        [index]="0"
+        [disabled]="true"
+        [attr.data-sortable-id]="id"
+        [attr.data-sortable-index]="0"
+        [ngStyle]="currentItemStyle(-1)"
+        [ngClass]="currentItemClass(-1)"
+        >{{emptyText}}</div>
+    </ng-container>
+     <div *ngIf="hintVisible()" [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
+         <ng-container *ngIf="itemTemplateRef"
+             [ngTemplateOutlet]="itemTemplateRef"
+             [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
+         </ng-container>
+         <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
+     </div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SortableService }]; }, propDecorators: { tabIndex: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], navigatable: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], disabledIndexes: [{
+                type: Input
+            }], zone: [{
+                type: Input
+            }], acceptZones: [{
+                type: Input
+            }], itemStyle: [{
+                type: Input
+            }], emptyItemStyle: [{
+                type: Input
+            }], activeItemStyle: [{
+                type: Input
+            }], disabledItemStyle: [{
+                type: Input
+            }], itemClass: [{
+                type: Input
+            }], activeItemClass: [{
+                type: Input
+            }], emptyItemClass: [{
+                type: Input
+            }], disabledItemClass: [{
+                type: Input
+            }], emptyText: [{
+                type: Input
+            }], defaultTemplateRef: [{
+                type: ContentChildren,
+                args: [TemplateRef, { descendants: false }]
+            }], itemTemplateDirectiveRef: [{
+                type: ContentChildren,
+                args: [ItemTemplateDirective, { read: TemplateRef, descendants: false }]
+            }], placeholderTemplateDirectiveRef: [{
+                type: ContentChildren,
+                args: [PlaceholderTemplateDirective, { read: TemplateRef, descendants: false }]
+            }], itemWrappers: [{
+                type: ViewChildren,
+                args: ['itemWrapper']
+            }], draggables: [{
+                type: ViewChildren,
+                args: [DraggableDirective]
+            }], noDataContainer: [{
+                type: ViewChild,
+                args: ['noDataRef', { static: false }]
+            }], hint: [{
+                type: ViewChild,
+                args: ['hint', { static: false }]
+            }], dragStart: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }], dragOver: [{
+                type: Output
+            }], dragLeave: [{
+                type: Output
+            }], dataMove: [{
+                type: Output
+            }], dataAdd: [{
+                type: Output
+            }], dataRemove: [{
+                type: Output
+            }], navigate: [{
+                type: Output
+            }], activeIndex: [{
+                type: Input
+            }], touchAction: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }] } });
+
+/**
+ * The arguments for the `SortableComponent` `dataAdd` event.
+ */
+class DataAddEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+/**
+ * The arguments for the `SortableComponent` `dataRemove` event.
+ */
+class DataRemoveEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+/**
+ * The arguments for the `SortableComponent` `dataMove` event.
+ */
+class DataMoveEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+
+/**
+ * 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.
+ */
+class SortableBindingDirective {
+    constructor(sortable, sortableService) {
+        this.sortable = sortable;
+        this.sortableService = sortableService;
+        this.sortableService = sortableService;
+    }
+    /**
+     * Sets a data-bound array that is used as a data source for the Sortable.
+     *
+     * {% meta height:430 %}
+     * {% embed_file overview/app.component.ts %}
+     * {% embed_file shared/app.module.ts %}
+     * {% embed_file shared/main.ts hidden %}
+     * {% endmeta %}
+     *
+     */
+    set data(data) {
+        this.sortable.data = data;
+    }
+    nextEnabledIndex(index, sortable) {
+        for (let i = index; i <= sortable.data.length; i++) {
+            if (sortable.itemEnabled(i)) {
+                return i;
+            }
+        }
+    }
+    addItem(event, sortable) {
+        let index = event.index;
+        const dataItem = this.sortableService.getSource().data[event.oldIndex];
+        const 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();
+    }
+    removeItem(event, sortable) {
+        const originDraggable = this.sortableService.originDraggable;
+        const 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();
+    }
+    moveItem(event, sortable) {
+        if (event.index === event.oldIndex) {
+            return false;
+        }
+        const 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
+     */
+    removeOriginDraggable() {
+        if (this.removeHiddenSubscription) {
+            this.removeHiddenSubscription.unsubscribe();
+        }
+        this.removeHiddenSubscription = this.sortableService.onReleaseSubject.pipe(take(1), filter(_ => this.sortableService.originDraggable !== null && this.sortableService.originDraggable.hidden)).subscribe((e) => {
+            const originDraggable = this.sortableService.originDraggable;
+            const newSource = this.sortableService.getSource();
+            if (originDraggable.parent !== this.sortableService.target) {
+                const 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;
+            }
+        });
+    }
+    onDragOver(event) {
+        const source = this.sortableService.getSource();
+        const target = this.sortableService.target;
+        const 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;
+            }
+        }
+    }
+    onNavigate(event) {
+        if (event.ctrlKey) {
+            const 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;
+        }
+    }
+    ngOnInit() {
+        this.dragOverSubscription = this.sortable.dragOver.subscribe(this.onDragOver.bind(this));
+        this.navigateSubscription = this.sortable.navigate.subscribe(this.onNavigate.bind(this));
+    }
+    ngOnDestroy() {
+        this.dragOverSubscription.unsubscribe();
+        this.navigateSubscription.unsubscribe();
+        if (this.removeHiddenSubscription) {
+            this.removeHiddenSubscription.unsubscribe();
+        }
+    }
+}
+SortableBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
+SortableBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSortableBinding]'
+                }]
+        }], ctorParameters: function () { return [{ type: SortableComponent }, { type: SortableService }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["kendoSortableBinding"]
+            }] } });
+
+const COMPONENT_DIRECTIVES = [
+    SortableComponent,
+    DraggableDirective,
+    PlaceholderTemplateDirective,
+    ItemTemplateDirective,
+    SortableBindingDirective
+];
+/**
+ *
+ * Represents the [`NgModule`](link: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);
+ *
+ * ```
+ */
+class SortableModule {
+}
+SortableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, declarations: [SortableComponent,
+        DraggableDirective,
+        PlaceholderTemplateDirective,
+        ItemTemplateDirective,
+        SortableBindingDirective], imports: [CommonModule], exports: [SortableComponent,
+        DraggableDirective,
+        PlaceholderTemplateDirective,
+        ItemTemplateDirective,
+        SortableBindingDirective] });
+SortableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, providers: [SortableService], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENT_DIRECTIVES],
+                    exports: [COMPONENT_DIRECTIVES],
+                    imports: [CommonModule],
+                    providers: [SortableService]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataMoveEvent, DragEndEvent, DragOverEvent, DragStartEvent, DraggableDirective, DraggableEvent, ItemTemplateDirective, NavigateEvent, PlaceholderTemplateDirective, PreventableEvent, SortableBindingDirective, SortableComponent, SortableContainer, SortableModule, SortableService };
+