@progress/kendo-angular-treelist 12.1.1-develop.1 → 12.2.0-develop.1

package/dragdrop/drag-hint.service.d.ts

@@ -3,17 +3,18 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { DomSanitizer } from '@angular/platform-browser';
+import { IconsService } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class DragHintService {
     private santizer;
+    private iconsService;
     private dom;
-    private initialTop;
-    private initialLeft;
-    constructor(santizer: DomSanitizer);
-    create(down: any, target: Element, title: string): void;
+    private cancelIcon;
+    constructor(santizer: DomSanitizer, iconsService: IconsService);
+    create(title: string): void;
     attach(): Function;
     remove(): void;
     show(): void;
@@ -22,8 +23,11 @@ export declare class DragHintService {
     disable(): void;
     removeLock(): void;
     toggleLock(locked: boolean): void;
-    move(move: any): void;
-    private initCoords;
+    move(move: {
+        pageX: number;
+        pageY: number;
+    }): void;
+    private get isSVG();
     static ɵfac: i0.ɵɵFactoryDeclaration<DragHintService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DragHintService>;
 }

package/esm2020/dragdrop/drag-hint.service.mjs

@@ -5,53 +5,82 @@
 import { Injectable, SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { append, offset } from './common';
+import { append } from './common';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { lockIcon, unlockIcon, plusIcon, cancelIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/platform-browser";
-const updateClass = (element, valid) => {
-    const icon = element.querySelector('.k-icon');
-    icon.className = icon.className
-        .replace(/(plus|cancel)/, valid ? 'plus' : 'cancel');
+import * as i2 from "@progress/kendo-angular-icons";
+const updateClass = (element, valid, svg) => {
+    const icon = element.querySelector('.k-icon, .k-svg-icon');
+    if (svg) {
+        const svg = icon.firstElementChild;
+        svg.removeChild(svg.firstElementChild);
+        const path = valid ? plusIcon.content : cancelIcon.content;
+        icon.firstElementChild.innerHTML = path + icon.firstElementChild.innerHTML;
+    }
+    icon.className = icon.className.replace(/(plus|cancel)/, valid ? 'plus' : 'cancel');
 };
-const updateLock = (element, locked = null) => {
-    const icon = element.querySelectorAll('.k-icon')[1];
-    const value = locked === null ? '' : (locked ? 'k-i-lock' : 'k-i-unlock');
-    icon.className = icon.className
-        .replace(/(k-i-unlock|k-i-lock)/, '') + ` ${value}`;
+const updateLock = (element, locked = null, svg) => {
+    const icon = element.querySelectorAll('.k-icon, .k-svg-icon')[1];
+    const value = locked === null ? '' : (locked ? `k${svg ? '-svg' : ''}-i-lock` : `k${svg ? '-svg' : ''}-i-unlock`);
+    if (svg) {
+        icon.className = icon.className.replace(/(k-svg-i-unlock|k-svg-i-lock)/, '').trim() + ` ${value}`;
+        icon.firstElementChild.innerHTML = locked ? lockIcon.content : unlockIcon.content;
+    }
+    else {
+        icon.className = icon.className.replace(/(k-i-unlock|k-i-lock)/, '').trim() + ` ${value}`;
+    }
 };
-const decorate = (element, target) => {
-    const targetStyles = getComputedStyle(target);
+const decorate = (element) => {
     element.className = 'k-header k-drag-clue';
     element.style.position = 'absolute';
     element.style.zIndex = '20000';
-    element.style.paddingLeft = targetStyles.paddingLeft;
-    element.style.paddingTop = targetStyles.paddingTop;
-    element.style.paddingBottom = targetStyles.paddingBottom;
-    element.style.paddingRight = targetStyles.paddingRight;
-    element.style.width = targetStyles.width;
-    element.style.height = targetStyles.height;
 };
+const svgIconsMarkup = (viewBox, content, safeTitle) => `
+    <span class="k-svg-icon k-drag-status k-svg-i-cancel">
+        <svg 
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="${viewBox}"
+            aria-hidden="true">
+            ${content}
+            <span class="k-svg-icon k-icon-modifier">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    viewBox="${viewBox}"
+                    aria-hidden="true">
+                </svg>
+            </span>
+        </svg>
+    </span>
+    ${safeTitle}`;
+const fontIconsMarkup = (safeTitle) => `
+    <span class="k-icon k-drag-status k-i-cancel">
+        <span class="k-icon k-icon-modifier"></span>
+    </span>
+    ${safeTitle}`;
 /**
  * @hidden
  */
 export class DragHintService {
-    constructor(santizer) {
+    constructor(santizer, iconsService) {
         this.santizer = santizer;
+        this.iconsService = iconsService;
+        this.cancelIcon = cancelIcon;
     }
-    create(down, target, title) {
+    create(title) {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.initCoords(down);
         this.dom = document.createElement("div");
-        decorate(this.dom, target);
+        decorate(this.dom);
         const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
-        this.dom.innerHTML = `
-            <span class="k-icon k-drag-status k-i-cancel k-icon-with-modifier">
-                <span class="k-icon k-icon-modifier"></span>
-            </span>
-            ${safeTitle}
-        `;
+        const innerHtml = this.isSVG ?
+            svgIconsMarkup(this.cancelIcon.viewBox, this.cancelIcon.content, safeTitle) :
+            fontIconsMarkup(safeTitle);
+        this.dom.innerHTML = innerHtml;
     }
     attach() {
         return append(this.dom);
@@ -71,29 +100,27 @@ export class DragHintService {
         this.dom.style.display = "none";
     }
     enable() {
-        updateClass(this.dom, true);
+        updateClass(this.dom, true, this.isSVG);
     }
     disable() {
-        updateClass(this.dom, false);
+        updateClass(this.dom, false, this.isSVG);
     }
     removeLock() {
-        updateLock(this.dom);
+        updateLock(this.dom, false, this.isSVG);
     }
     toggleLock(locked) {
-        updateLock(this.dom, locked);
+        updateLock(this.dom, locked, this.isSVG);
     }
     move(move) {
-        this.dom.style.top = this.initialTop + move.pageY + 'px';
-        this.dom.style.left = this.initialLeft + move.pageX + 'px';
+        this.dom.style.top = move.pageY + 'px';
+        this.dom.style.left = move.pageX + 'px';
     }
-    initCoords(down) {
-        const { top, left } = offset(down.originalEvent.target);
-        this.initialTop = top - down.pageY;
-        this.initialLeft = left - down.pageX;
+    get isSVG() {
+        return (this.iconsService.iconSettings?.type || this.iconsService.changes.value.type) === 'svg';
     }
 }
-DragHintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHintService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
+DragHintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHintService, deps: [{ token: i1.DomSanitizer }, { token: i2.IconsService }], target: i0.ɵɵFactoryTarget.Injectable });
 DragHintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHintService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHintService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i2.IconsService }]; } });

package/esm2020/dragdrop/draggable-column.directive.mjs

@@ -64,8 +64,8 @@ export class DraggableColumnDirective {
                 originalEvent.preventDefault();
             }
             this.nav.navigateTo(originalEvent.target);
-        }), switchMap(preventOnDblClick(this.draggable.kendoRelease)), tap(down => {
-            this.hint.create(down, this.element.nativeElement, this.context.hint);
+        }), switchMap(preventOnDblClick(this.draggable.kendoRelease)), tap(() => {
+            this.hint.create(this.context.hint);
             this.cue.create();
         }), switchMap(down => this.draggable.kendoDrag.pipe(tap((e) => {
             if (e.isTouch) {

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684328429,
-    version: '12.1.1-develop.1',
+    publishDate: 1684331239,
+    version: '12.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };