@progress/kendo-angular-treeview 21.4.1 → 22.0.0

package/esm2022/drag-and-drop/drag-and-drop.directive.mjs

@@ -1,348 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, NgZone, ContentChild, Input, HostBinding } from '@angular/core';
-import { hasObservers } from '@progress/kendo-angular-common';
-import { Draggable } from '@progress/kendo-draggable';
-import { DragClueService } from './drag-clue/drag-clue.service';
-import { DropHintService } from './drop-hint/drop-hint.service';
-import { DragClueTemplateDirective } from './drag-clue/drag-clue-template.directive';
-import { DropHintTemplateDirective } from './drop-hint/drop-hint-template.directive';
-import { getDropAction, getDropPosition, treeItemFromEventTarget, getContainerOffset, getDropTarget } from './drag-and-drop-utils';
-import { closestWithMatch, isPresent, isContent } from '../utils';
-import { TreeViewComponent } from '../treeview.component';
-import { TreeItemDropEvent, DropPosition, TreeItemDragStartEvent } from './models';
-import * as i0 from "@angular/core";
-import * as i1 from "../treeview.component";
-import * as i2 from "./drag-clue/drag-clue.service";
-import * as i3 from "./drop-hint/drop-hint.service";
-const DEFAULT_SCROLL_SETTINGS = {
-    enabled: true,
-    step: 1,
-    interval: 1
-};
-/**
- * Represents the directive that enables you to drag and drop items inside the current TreeView or between multiple linked TreeView component instances
- * ([see example](slug:draganddrop_treeview)).
- *
- * Triggers the [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart),
- * [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag),
- * [`nodeDrop`](slug:api_treeview_treeviewcomponent#nodedrop),
- * [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend),
- * [`addItem`](slug:api_treeview_treeviewcomponent#additem) and
- * [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
- * events when you perform the corresponding actions.
- *
- * @example
- * ```html
- * <kendo-treeview
- *    kendoTreeViewDragAndDrop
- *    [dropZoneTreeViews]="treeView"
- * >
- * </kendo-treeview>
- * ```
- *
- * @remarks
- * Applied to: {@link TreeViewComponent}
- */
-export class DragAndDropDirective {
-    element;
-    zone;
-    treeview;
-    dragClueService;
-    dropHintService;
-    /**
-     * Specifies whether the `removeItem` event fires after the user drops an item while pressing the `ctrl` key.
-     * If enabled, the `removeItem` event does not fire on the source TreeView
-     * ([see example](slug:draganddrop_treeview#multiple-treeviews)).
-     *
-     * @default false
-     */
-    allowCopy = false;
-    /**
-     * Specifies the `TreeViewComponent` instances into which the user can drop dragged items from the current `TreeViewComponent`
-     * ([see example](slug:draganddrop_treeview#multiple-treeviews)).
-     */
-    dropZoneTreeViews = [];
-    /**
-     * Specifies the distance in pixels from the initial item `pointerdown` event before dragging starts.
-     * The `nodeDragStart` and all subsequent TreeView drag events do not fire until dragging begins.
-     *
-     * @default 5
-     */
-    startDragAfter = 5;
-    /**
-     * Controls the auto-scrolling behavior during drag-and-drop ([see example](slug:draganddrop_treeview#auto-scrolling)).
-     * Enabled by default. To turn off auto-scrolling, set this property to `false`.
-     *
-     * By default, scrolling occurs by 1 pixel every 1 millisecond when the dragged item reaches the top or bottom of the scrollable container.
-     * You can override the `step` and `interval` by providing a `DragAndDropScrollSettings` object.
-     *
-     * @default true
-     */
-    autoScroll = true;
-    /**
-     * @hidden
-     */
-    dragClueTemplate;
-    /**
-     * @hidden
-     */
-    dropHintTemplate;
-    /**
-     * @hidden
-     */
-    userSelectStyle = 'none';
-    draggable;
-    draggedItem;
-    /**
-     * The pointer event of the last successful item pointerdown event (the draggable `press` event).
-     * Used for determining whether the `startDragAfter` distance is covered and for the `nodeDragStart` event args.
-     * Used also as a flag for whether a drag attempt is pending. Should be set to `null` once the dragging begins.
-     */
-    pendingDragStartEvent;
-    get scrollSettings() {
-        const userProvidedSettings = typeof this.autoScroll === 'boolean' ?
-            { enabled: this.autoScroll } :
-            this.autoScroll;
-        return Object.assign({}, DEFAULT_SCROLL_SETTINGS, userProvidedSettings);
-    }
-    /**
-     * Describes the offset of the parent element if the latter has the `transform` CSS prop applied.
-     * Transformed parents create new stacking context and the fixed children must be position based on the transformed parent.
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-     */
-    containerOffset = { top: 0, left: 0 };
-    constructor(element, zone, treeview, dragClueService, dropHintService) {
-        this.element = element;
-        this.zone = zone;
-        this.treeview = treeview;
-        this.dragClueService = dragClueService;
-        this.dropHintService = dropHintService;
-        this.treeview.touchActions = false;
-    }
-    ngAfterContentInit() {
-        this.initalizeDraggable();
-        this.dragClueService.initialize(this.treeview.assetsContainer, this.dragClueTemplate && this.dragClueTemplate.templateRef);
-        this.dropHintService.initialize(this.treeview.assetsContainer, this.dropHintTemplate && this.dropHintTemplate.templateRef);
-    }
-    ngOnDestroy() {
-        this.draggable.destroy();
-    }
-    /**
-     * @hidden
-     */
-    handlePress({ originalEvent }) {
-        if (!isContent(originalEvent.target)) {
-            return;
-        }
-        // store the drag target on press, show it only when it's actually dragged
-        this.draggedItem = closestWithMatch(originalEvent.target, '.k-treeview-leaf');
-        // record the current pointer down coords - copared to the `startDragAfter` value to calculate whether to initiate dragging
-        this.pendingDragStartEvent = originalEvent;
-    }
-    /**
-     * @hidden
-     */
-    handleDrag({ originalEvent, clientX, clientY }) {
-        if (this.shouldInitiateDragStart({ clientX, clientY })) {
-            this.initiateDragStart();
-        }
-        if (!isPresent(this.draggedItem) || isPresent(this.pendingDragStartEvent)) {
-            return;
-        }
-        const dropTarget = getDropTarget(originalEvent);
-        if (hasObservers(this.treeview.nodeDrag)) {
-            this.zone.run(() => this.notifyDrag(originalEvent, dropTarget));
-        }
-        const targetTreeView = this.getTargetTreeView(dropTarget);
-        const dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
-        const dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-top, .k-treeview-mid, .k-treeview-bot');
-        const dropAction = getDropAction(dropPosition, dropTarget);
-        const sourceItem = treeItemFromEventTarget(this.treeview, this.draggedItem);
-        const destinationItem = treeItemFromEventTarget(targetTreeView, dropTarget);
-        this.updateDropHintState(dropPosition, dropHintAnchor, dropAction, sourceItem, destinationItem);
-        this.updateDragClueState(dropAction, clientX, clientY, sourceItem, destinationItem);
-        if (this.scrollSettings.enabled) {
-            this.dragClueService.scrollIntoView(this.scrollSettings);
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleRelease({ originalEvent, clientY }) {
-        if (this.scrollSettings.enabled) {
-            this.dragClueService.cancelScroll();
-        }
-        if (!isPresent(this.draggedItem) || isPresent(this.pendingDragStartEvent)) {
-            this.pendingDragStartEvent = null;
-            this.draggedItem = null;
-            return;
-        }
-        const dropTarget = getDropTarget(originalEvent);
-        const sourceTree = this.treeview;
-        const destinationTree = this.getTargetTreeView(dropTarget);
-        const dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, this.getTargetTreeView(dropTarget), this.containerOffset);
-        const sourceItem = treeItemFromEventTarget(sourceTree, this.draggedItem);
-        const destinationItem = treeItemFromEventTarget(destinationTree, dropTarget);
-        if (isPresent(destinationItem) && isPresent(dropPosition)) {
-            this.zone.run(() => this.notifyDrop({ sourceItem, destinationItem, dropPosition, sourceTree, destinationTree }, originalEvent));
-        }
-        else {
-            this.dragClueService.animateDragClueToElementPosition(this.draggedItem);
-        }
-        if (hasObservers(this.treeview.nodeDragEnd)) {
-            this.zone.run(() => this.notifyDragEnd({ sourceItem, destinationItem, originalEvent }));
-        }
-        this.dropHintService.hide();
-        this.draggedItem = null;
-    }
-    updateDropHintState(dropPosition, dropHintAnchor, dropAction, sourceItem, destinationItem) {
-        if (!isPresent(dropHintAnchor) || dropPosition === DropPosition.Over || !isPresent(dropPosition)) {
-            this.dropHintService.hide();
-            return;
-        }
-        const anchorViewPortCoords = dropHintAnchor.getBoundingClientRect();
-        const insertBefore = dropPosition === DropPosition.Before;
-        const top = insertBefore ? anchorViewPortCoords.top : (anchorViewPortCoords.top + anchorViewPortCoords.height);
-        this.dropHintService.updateDropHintData(dropAction, sourceItem, destinationItem);
-        // clear any possible container offset created by parent elements with `transform` css property set
-        this.dropHintService.move(anchorViewPortCoords.left - this.containerOffset.left, top - this.containerOffset.top);
-        this.dropHintService.show();
-    }
-    updateDragClueState(dropAction, clientX, clientY, sourceItem, destinationItem) {
-        // clear any possible container offset created by parent elements with `transform` css property set
-        this.dragClueService.move(clientX - this.containerOffset.left, clientY - this.containerOffset.top);
-        this.dragClueService.updateDragClueData(dropAction, sourceItem, destinationItem);
-        this.dragClueService.show();
-    }
-    initalizeDraggable() {
-        this.draggable = new Draggable({
-            press: this.handlePress.bind(this),
-            drag: this.handleDrag.bind(this),
-            release: this.handleRelease.bind(this)
-        });
-        this.zone.runOutsideAngular(() => this.draggable.bindTo(this.element.nativeElement));
-    }
-    notifyDragStart(originalEvent, dropTarget) {
-        const sourceItem = treeItemFromEventTarget(this.treeview, dropTarget);
-        const event = new TreeItemDragStartEvent({ sourceItem, originalEvent });
-        this.treeview.nodeDragStart.emit(event);
-        return event;
-    }
-    notifyDrag(originalEvent, dropTarget) {
-        const dragEvent = {
-            sourceItem: treeItemFromEventTarget(this.treeview, this.draggedItem),
-            destinationItem: treeItemFromEventTarget(this.getTargetTreeView(dropTarget), dropTarget),
-            originalEvent
-        };
-        this.treeview.nodeDrag.emit(dragEvent);
-    }
-    notifyDrop(args, originalEvent) {
-        const event = new TreeItemDropEvent(args, originalEvent);
-        args.destinationTree.nodeDrop.emit(event);
-        // disable the animations on drop and restore them afterwards (if they were initially turned on)
-        this.disableAnimationsForNextTick(args.destinationTree);
-        if (args.sourceTree !== args.destinationTree) {
-            this.disableAnimationsForNextTick(args.sourceTree);
-        }
-        if (!event.isDefaultPrevented() && event.isValid) {
-            this.dragClueService.hide();
-            // order matters in a flat data binding scenario (first add, then remove)
-            args.destinationTree.addItem.emit(args);
-            if (!(originalEvent.ctrlKey && this.allowCopy)) {
-                args.sourceTree.removeItem.emit(args);
-            }
-        }
-        else if (event.isDefaultPrevented()) {
-            // directly hide the clue if the default is prevented
-            this.dragClueService.hide();
-        }
-        else if (!event.isValid) {
-            // animate the clue back to the source item position if marked as invalid
-            this.dragClueService.animateDragClueToElementPosition(this.draggedItem);
-        }
-    }
-    notifyDragEnd(dragEndEvent) {
-        this.treeview.nodeDragEnd.emit(dragEndEvent);
-    }
-    getTargetTreeView(dropTarget) {
-        const treeViewTagName = this.treeview.element.nativeElement.tagName;
-        const targetTreeView = closestWithMatch(dropTarget, treeViewTagName);
-        return [this.treeview, ...this.dropZoneTreeViews].find(treeView => isPresent(treeView) && treeView.element.nativeElement === targetTreeView);
-    }
-    disableAnimationsForNextTick(treeView) {
-        // the treeView.animate getter returns `true` when the animations are turned off
-        // confusing, but seems on purpose (the `animate` prop sets the value of the @.disabled host-bound attribute)
-        if (treeView.animate) {
-            return;
-        }
-        treeView.animate = false;
-        this.zone.runOutsideAngular(() => setTimeout(() => treeView.animate = true));
-    }
-    shouldInitiateDragStart(currentPointerCoords) {
-        if (!isPresent(this.pendingDragStartEvent)) {
-            return false;
-        }
-        const distanceFromPointerDown = Math.sqrt(Math.pow((this.pendingDragStartEvent.clientX - currentPointerCoords.clientX), 2) +
-            Math.pow((this.pendingDragStartEvent.clientY - currentPointerCoords.clientY), 2));
-        return distanceFromPointerDown >= this.startDragAfter;
-    }
-    initiateDragStart() {
-        if (hasObservers(this.treeview.nodeDragStart)) {
-            const dragStartEvent = this.zone.run(() => this.notifyDragStart(this.pendingDragStartEvent, getDropTarget(this.pendingDragStartEvent)));
-            if (dragStartEvent.isDefaultPrevented()) {
-                this.pendingDragStartEvent = null;
-                this.draggedItem = null;
-                return;
-            }
-        }
-        this.dragClueService.cancelReturnAnimation();
-        this.dragClueService.updateText(this.draggedItem.innerText);
-        this.containerOffset = getContainerOffset(this.draggedItem);
-        this.pendingDragStartEvent = null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragAndDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.TreeViewComponent }, { token: i2.DragClueService }, { token: i3.DropHintService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DragAndDropDirective, isStandalone: true, selector: "[kendoTreeViewDragAndDrop]", inputs: { allowCopy: "allowCopy", dropZoneTreeViews: "dropZoneTreeViews", startDragAfter: "startDragAfter", autoScroll: "autoScroll" }, host: { properties: { "style.user-select": "this.userSelectStyle", "style.-ms-user-select": "this.userSelectStyle", "style.-moz-user-select": "this.userSelectStyle", "style.-webkit-user-select": "this.userSelectStyle" } }, providers: [
-            DragClueService,
-            DropHintService
-        ], queries: [{ propertyName: "dragClueTemplate", first: true, predicate: DragClueTemplateDirective, descendants: true }, { propertyName: "dropHintTemplate", first: true, predicate: DropHintTemplateDirective, descendants: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragAndDropDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTreeViewDragAndDrop]',
-                    providers: [
-                        DragClueService,
-                        DropHintService
-                    ],
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.TreeViewComponent }, { type: i2.DragClueService }, { type: i3.DropHintService }], propDecorators: { allowCopy: [{
-                type: Input
-            }], dropZoneTreeViews: [{
-                type: Input
-            }], startDragAfter: [{
-                type: Input
-            }], autoScroll: [{
-                type: Input
-            }], dragClueTemplate: [{
-                type: ContentChild,
-                args: [DragClueTemplateDirective, { static: false }]
-            }], dropHintTemplate: [{
-                type: ContentChild,
-                args: [DropHintTemplateDirective, { static: false }]
-            }], userSelectStyle: [{
-                type: HostBinding,
-                args: ['style.user-select']
-            }, {
-                type: HostBinding,
-                args: ['style.-ms-user-select']
-            }, {
-                type: HostBinding,
-                args: ['style.-moz-user-select']
-            }, {
-                type: HostBinding,
-                args: ['style.-webkit-user-select']
-            }] } });

package/esm2022/drag-and-drop/drag-clue/drag-clue-template.directive.mjs

@@ -1,44 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Represents the template for the TreeView drag clue when you drag an item.
- *
- * To define the drag clue template, nest an `<ng-template>` tag with the `kendoTreeViewDragClueTemplate` directive inside a `<kendo-treeview>` tag
- * ([see example](slug:draganddrop_treeview#toc-templates)).
- *
- * The template context provides the following variables:
- * - `let-text="text"` (`string`)&mdash;The display text of the item being dragged.
- * - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))&mdash;The type of drop action that will occur.
- * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The TreeView item that is being dragged from its original position.
- * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))&mdash;The TreeView item that serves as the target for the drop operation.
- *
- * @example
- * ```html
- * <kendo-treeview>
- *   <ng-template kendoTreeViewDragClueTemplate let-text="text">
- *     Dragging: {{ text }}
- *   </ng-template>
- * </kendo-treeview>
- * ```
- */
-export class DragClueTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DragClueTemplateDirective, isStandalone: true, selector: "[kendoTreeViewDragClueTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTreeViewDragClueTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });

package/esm2022/drag-and-drop/drag-clue/drag-clue.component.mjs

@@ -1,132 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy } from "@angular/core";
-import { DropAction } from '../models';
-import { cancelIcon, insertBottomIcon, insertMiddleIcon, insertTopIcon, plusIcon } from "@progress/kendo-svg-icons";
-import { NgTemplateOutlet } from "@angular/common";
-import { IconWrapperComponent } from "@progress/kendo-angular-icons";
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class DragClueComponent {
-    cdr;
-    hostClasses = true;
-    /**
-     * The text value of the dragged TreeView item.
-     */
-    text;
-    /**
-     * The attempted operation according to the current drop target.
-     */
-    action;
-    /**
-     * The look-up info for the currently dragged item.
-     */
-    sourceItem;
-    /**
-     * The look-up info for the destination item (if hovering a valid drop target).
-     */
-    destinationItem;
-    /**
-     * Defines the drag clue content template.
-     */
-    template;
-    posistionStyle = 'fixed';
-    get statusIconClass() {
-        switch (this.action) {
-            case DropAction.Add: return 'plus';
-            case DropAction.InsertTop: return 'insert-top';
-            case DropAction.InsertBottom: return 'insert-bottom';
-            case DropAction.InsertMiddle: return 'insert-middle';
-            case DropAction.Invalid:
-            default: return 'cancel';
-        }
-    }
-    get statusSVGIcon() {
-        switch (this.action) {
-            case DropAction.Add: return plusIcon;
-            case DropAction.InsertTop: return insertTopIcon;
-            case DropAction.InsertBottom: return insertBottomIcon;
-            case DropAction.InsertMiddle: return insertMiddleIcon;
-            case DropAction.Invalid:
-            default: return cancelIcon;
-        }
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
-    detectChanges() {
-        this.cdr.detectChanges();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DragClueComponent, isStandalone: true, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
-        @if (!template) {
-          <kendo-icon-wrapper
-            innerCssClass="k-drag-status"
-            [name]="statusIconClass"
-            [svgIcon]="statusSVGIcon"
-            >
-          </kendo-icon-wrapper>
-          <span>{{text}}</span>
-        }
-        
-        @if (template) {
-          <ng-template
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{
-                text: text,
-                action: action,
-                sourceItem: sourceItem,
-                destinationItem: destinationItem
-            }"
-            >
-          </ng-template>
-        }
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-treeview-drag-clue',
-                    template: `
-        @if (!template) {
-          <kendo-icon-wrapper
-            innerCssClass="k-drag-status"
-            [name]="statusIconClass"
-            [svgIcon]="statusSVGIcon"
-            >
-          </kendo-icon-wrapper>
-          <span>{{text}}</span>
-        }
-        
-        @if (template) {
-          <ng-template
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{
-                text: text,
-                action: action,
-                sourceItem: sourceItem,
-                destinationItem: destinationItem
-            }"
-            >
-          </ng-template>
-        }
-        `,
-                    standalone: true,
-                    imports: [IconWrapperComponent, NgTemplateOutlet]
-                }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-header']
-            }, {
-                type: HostBinding,
-                args: ['class.k-drag-clue']
-            }], posistionStyle: [{
-                type: HostBinding,
-                args: ['style.position']
-            }] } });

package/esm2022/drag-and-drop/drag-clue/drag-clue.service.mjs

@@ -1,123 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
-import { DragClueComponent } from './drag-clue.component';
-import { ScrollDirection } from '../models';
-import { isPresent, dataItemsEqual } from '../../utils';
-import { DragAndDropAssetService } from '../editing-services/drag-and-drop-asset.service';
-import { scrollElementBy, getScrollableContainer } from '../drag-and-drop-utils';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export const CLUE_OFFSET = 10;
-/**
- * @hidden
- */
-export const RETURN_ANIMATION_DURATION = 200;
-/**
- * @hidden
- */
-export class DragClueService extends DragAndDropAssetService {
-    returnAnimation;
-    scrollInterval;
-    constructor() {
-        super();
-    }
-    initialize(container, template) {
-        if (isPresent(this._componentRef)) {
-            this.ngOnDestroy();
-        }
-        this.componentRef = container.createComponent(DragClueComponent);
-        this.hide();
-        this.componentRef.instance.template = template;
-        this.componentRef.changeDetectorRef.detectChanges();
-    }
-    ngOnDestroy() {
-        this.cancelReturnAnimation();
-        this.cancelScroll();
-        super.ngOnDestroy();
-    }
-    move(left, top) {
-        super.move(left, top, CLUE_OFFSET);
-    }
-    animateDragClueToElementPosition(target) {
-        if (!(isPresent(target) && isPresent(this.element.animate))) {
-            this.hide();
-            return;
-        }
-        const targetElementViewPortCoords = target.getBoundingClientRect();
-        const clueElementViewPortCoords = this.element.getBoundingClientRect();
-        this.returnAnimation = this.element.animate([
-            { transform: 'translate(0, 0)' },
-            { transform: `translate(${targetElementViewPortCoords.left - clueElementViewPortCoords.left}px, ${targetElementViewPortCoords.top - clueElementViewPortCoords.top}px)` }
-        ], RETURN_ANIMATION_DURATION);
-        this.returnAnimation.onfinish = () => this.hide();
-    }
-    cancelReturnAnimation() {
-        if (!isPresent(this.returnAnimation)) {
-            return;
-        }
-        this.returnAnimation.cancel();
-        this.returnAnimation = null;
-    }
-    updateDragClueData(action, sourceItem, destinationItem) {
-        const dragClue = this.componentRef.instance;
-        if (action === dragClue.action && dataItemsEqual(sourceItem, dragClue.sourceItem) && dataItemsEqual(destinationItem, dragClue.destinationItem)) {
-            return;
-        }
-        dragClue.action = action;
-        dragClue.sourceItem = sourceItem;
-        dragClue.destinationItem = destinationItem;
-        dragClue.detectChanges();
-    }
-    updateText(text) {
-        if (text === this.componentRef.instance.text) {
-            return;
-        }
-        this.componentRef.instance.text = text;
-        this.componentRef.instance.detectChanges();
-    }
-    /**
-     * Triggers the first scrollable parent to scroll upwards or downwards.
-     * Uses setInterval, so should be called outside the angular zone.
-     */
-    scrollIntoView({ step, interval }) {
-        this.cancelScroll();
-        const scrollableContainer = getScrollableContainer(this.element);
-        if (!isPresent(scrollableContainer)) {
-            return;
-        }
-        const containerRect = scrollableContainer.getBoundingClientRect();
-        const clueRect = this.element.getBoundingClientRect();
-        // if the beginning of the scrollable container is above the current viewport, fall-back to 0
-        const firstVisibleClientTopPart = Math.max(containerRect.top, 0);
-        // start scrolling up when the first visible item is dragged over
-        const topLimit = firstVisibleClientTopPart + clueRect.height;
-        // if the end of the scrollable container is beneath the current viewport, fall-back to its client height
-        // add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
-        const bottomLimit = firstVisibleClientTopPart + Math.min(containerRect.bottom, scrollableContainer.clientHeight);
-        if (clueRect.top < topLimit) {
-            this.scrollInterval = setInterval(() => scrollElementBy(scrollableContainer, step, ScrollDirection.Up), interval);
-        }
-        else if (clueRect.bottom > bottomLimit) {
-            this.scrollInterval = setInterval(() => scrollElementBy(scrollableContainer, step, ScrollDirection.Down), interval);
-        }
-    }
-    /**
-     * Cancels out the on-going scroll animation, if present.
-     */
-    cancelScroll() {
-        if (isPresent(this.scrollInterval)) {
-            clearInterval(this.scrollInterval);
-            this.scrollInterval = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });