@syncfusion/ej2-kanban - npm Package Compare versions

Comparing version 18.1.52 to 18.1.55

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+### Kanban
+
+#### Bug Fixes
+
+- `#278225` - An issue with kanban styles not loaded properly when `refresh` method called issue has been fixed.
+
 ## 18.1.48 (2020-05-05)
@@ -12,3 +18,3 @@
 
-- `#274830` - Rendered empty column when empty data passed to Kanban board.
+- `#274830` - An issue with Rendered empty column when empty data passed to Kanban board.
 
@@ -15,0 +21,0 @@ ## 18.1.46 (2020-04-28)

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 18.1.52
+*  version : 18.1.55
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-kanban@*",
-  "_id": "@syncfusion/ej2-kanban@18.1.48",
+  "_id": "@syncfusion/ej2-kanban@18.1.52",
   "_inBundle": false,
-  "_integrity": "sha512-Bq5nArIdF5mqJc2/5EsxeOoobUKyuve7a6hJLUhmYzkMNFKqbFvK3eRCUOEVjlok5SdLDSPWtDNpdwUXSdIiLg==",
+  "_integrity": "sha512-6sILPAXVFK0Z29orbJQH5q6E5Bn1/6cpsJj8nYLxMMazFebRS6wijYiEDKLjdyrvnVS9Mhj5d13ff1tv4NCtbQ==",
   "_location": "/@syncfusion/ej2-kanban",
@@ -26,4 +26,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-kanban/-/ej2-kanban-18.1.48.tgz",
-  "_shasum": "a611d3b4fb04792d6c64eb048e3504cda366690f",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-kanban/-/ej2-kanban-18.1.52.tgz",
+  "_shasum": "69f5d115df2aa55ebfc3d4d8fa4a30388e04bbe4",
   "_spec": "@syncfusion/ej2-kanban@*",
@@ -39,10 +39,10 @@ "_where": "/jenkins/workspace/automation_release_18.1.0.1-52JLNOGRCDHXRVQM3W564VPLFCPHWUYDYU3I3DVRABSR7F6AIFYQ/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~18.1.52",
+    "@syncfusion/ej2-base": "~18.1.53",
     "@syncfusion/ej2-buttons": "~18.1.52",
-    "@syncfusion/ej2-data": "~18.1.52",
-    "@syncfusion/ej2-dropdowns": "~18.1.52",
-    "@syncfusion/ej2-inputs": "~18.1.52",
+    "@syncfusion/ej2-data": "~18.1.55",
+    "@syncfusion/ej2-dropdowns": "~18.1.55",
+    "@syncfusion/ej2-inputs": "~18.1.55",
     "@syncfusion/ej2-layouts": "~18.1.52",
-    "@syncfusion/ej2-navigations": "~18.1.52",
-    "@syncfusion/ej2-popups": "~18.1.52"
+    "@syncfusion/ej2-navigations": "~18.1.55",
+    "@syncfusion/ej2-popups": "~18.1.55"
   },
@@ -75,4 +75,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "18.1.52",
+  "version": "18.1.55",
   "sideEffects": false
 }

src/kanban/actions/action.js

@@ -220,6 +220,5 @@ import { closest, classList, createElement, remove, addClass, removeClass, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
                 var index = targetCol.cellIndex;
-                targetCol.appendChild(createElement('div', {
-                    className: cls.COLLAPSE_HEADER_TEXT_CLASS,
-                    innerHTML: this.parent.columns[index].headerText
-                }));
+                var text = (this.parent.columns[index].showItemCount ? '[' +
+                    targetCol.querySelectorAll('.' + cls.CARD_CLASS).length + '] ' : '') + this.parent.columns[index].headerText;
+                targetCol.appendChild(createElement('div', { className: cls.COLLAPSE_HEADER_TEXT_CLASS, innerHTML: text }));
                 addClass([targetCol, target], cls.COLLAPSED_CLASS);
@@ -226,0 +225,0 @@ target.setAttribute('aria-expanded', 'false');

src/kanban/actions/crud.js

@@ -64,8 +64,9 @@ import * as events from '../base/constant';
                     cardData instanceof Array ? modifiedData = cardData : modifiedData.push(cardData);
-                    modifiedData = _this.priorityOrder(modifiedData, addArgs);
+                    if (!_this.parent.isBlazorRender()) {
+                        modifiedData = _this.priorityOrder(modifiedData, addArgs);
+                    }
                 }
-                var editParms = {
-                    addedRecords: (cardData instanceof Array) ? cardData : [cardData],
-                    changedRecords: _this.parent.cardSettings.priority ? modifiedData : [], deletedRecords: []
-                };
+                var addedRecords = (cardData instanceof Array) ? cardData : [cardData];
+                var changedRecords = _this.parent.cardSettings.priority ? modifiedData : [];
+                var editParms = { addedRecords: addedRecords, changedRecords: changedRecords, deletedRecords: [] };
                 if (cardData instanceof Array || modifiedData.length > 0) {
@@ -77,3 +78,3 @@ if (!_this.parent.isBlazorRender()) {
                         // tslint:disable-next-line
-                        _this.parent.interopAdaptor.invokeMethodAsync('AddCards', { Records: cardData }, _this.keyField);
+                        _this.parent.interopAdaptor.invokeMethodAsync('AddCards', { AddedRecords: addedRecords, ChangedRecords: changedRecords }, _this.keyField);
                     }
@@ -113,3 +114,5 @@ }
                     cardData instanceof Array ? modifiedData = cardData : modifiedData.push(cardData);
-                    cardData = _this.priorityOrder(modifiedData, updateArgs);
+                    if (!_this.parent.isBlazorRender()) {
+                        cardData = _this.priorityOrder(modifiedData, updateArgs);
+                    }
                 }
@@ -125,3 +128,3 @@ var editParms = {
                         // tslint:disable-next-line
-                        _this.parent.interopAdaptor.invokeMethodAsync('UpdateCards', { Records: cardData }, _this.keyField);
+                        _this.parent.interopAdaptor.invokeMethodAsync('UpdateCards', { ChangedRecords: cardData }, _this.keyField);
                     }
@@ -173,3 +176,3 @@ }
                         // tslint:disable-next-line
-                        _this.parent.interopAdaptor.invokeMethodAsync('DeleteCards', { Records: cardData }, _this.keyField);
+                        _this.parent.interopAdaptor.invokeMethodAsync('DeleteCards', { DeletedRecords: cardData }, _this.keyField);
                     }
@@ -176,0 +179,0 @@ }

src/kanban/actions/dialog.js

@@ -166,5 +166,5 @@ import { append, createElement, remove, isNullOrUndefined, closest, extend } from '@syncfusion/ej2-base';
                 remove(element);
-                var divElement = createElement('div', { className: 'e-float-input' });
+                var divElement = createElement('div');
                 element = createElement('textarea', {
-                    className: cls.FIELD_CLASS, attrs: { 'name': field.key, 'rows': '2' },
+                    className: cls.FIELD_CLASS, attrs: { 'name': field.key, 'rows': '3' },
                     innerHTML: fieldValue
@@ -171,0 +171,0 @@ });

src/kanban/base/css-constant.d.ts

@@ -25,2 +25,4 @@ /**
 /** @hidden */
+export declare const HEADER_BOTTOM_CLASS: string;
+/** @hidden */
 export declare const HEADER_WRAP_CLASS: string;
@@ -64,2 +66,4 @@ /** @hidden */
 /** @hidden */
+export declare const DRAGGABLE_CLASS: string;
+/** @hidden */
 export declare const CARD_HEADER_CLASS: string;
@@ -66,0 +70,0 @@ /** @hidden */

src/kanban/base/css-constant.js

@@ -25,2 +25,4 @@ /**
 /** @hidden */
+export var HEADER_BOTTOM_CLASS = 'e-header-bottom';
+/** @hidden */
 export var HEADER_WRAP_CLASS = 'e-header-wrap';
@@ -64,2 +66,4 @@ /** @hidden */
 /** @hidden */
+export var DRAGGABLE_CLASS = 'e-draggable';
+/** @hidden */
 export var CARD_HEADER_CLASS = 'e-card-header';
@@ -66,0 +70,0 @@ /** @hidden */

src/kanban/base/kanban-model.d.ts

@@ -120,2 +120,3 @@ import { Component, ModuleDeclaration, NotifyPropertyChanges, Property, Complex, Collection, detach } from '@syncfusion/ej2-base';import { addClass, classList, removeClass, compile, formatUnit, L10n, Browser, Event, EmitType, isBlazor } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { Data } from './data';import { SwimlaneSettings } from '../models/swimlane-settings';import { CardSettings } from '../models/card-settings';import { DialogSettings } from '../models/dialog-settings';import { Columns } from '../models/columns';import { StackedHeaders } from '../models/stacked-headers';import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel, DialogSettingsModel } from '../models/index';import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs } from './interface';import { QueryCellInfoEventArgs, DialogEventArgs } from './interface';import { ReturnType, ConstraintType, CurrentAction } from './type';import { Action } from '../actions/action';import { Crud } from '../actions/crud';import { DragAndDrop } from '../actions/drag';import { KanbanDialog } from '../actions/dialog';import { Keyboard } from '../actions/keyboard';import { KanbanTooltip } from '../actions/tooltip';import { KanbanTouch } from '../actions/touch';import { LayoutRender } from './layout-render';import * as events from '../base/constant';import * as cls from './css-constant';
      * Enable or disable the columns when empty dataSource.
+
      * @default false
@@ -122,0 +123,0 @@ */

src/kanban/base/kanban.d.ts

@@ -142,2 +142,3 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
      * Enable or disable the columns when empty dataSource.
+
      * @default false
@@ -288,2 +289,6 @@ */
      */
+    hideDeviceMenu(): void;
+    /**
+     * @hidden
+     */
     dataReady(data: {
@@ -290,0 +295,0 @@ [key: string]: Object[];

src/kanban/base/kanban.js

@@ -120,3 +120,3 @@ var __extends = (this && this.__extends) || (function () {
         if (!this.isBlazorRender()) {
-            var addClasses = [];
+            var addClasses = [cls.ROOT_CLASS];
             var removeClasses = [];
@@ -316,5 +316,5 @@ if (this.enableRtl) {
     Kanban.prototype.isDevice = function (ref) {
-        if (Browser.isDevice && this.isBlazorRender() && ref) {
+        if (Browser.isDevice && isBlazor() && ref) {
             // tslint:disable-next-line
-            ref.invokeMethodAsync('IsDevice', true);
+            ref.invokeMethodAsync('IsDevice', true, ((window.innerWidth * 80) / 100));
         }
@@ -337,2 +337,8 @@ };
      */
+    Kanban.prototype.hideDeviceMenu = function () {
+        this.layoutModule.hidePopup();
+    };
+    /**
+     * @hidden
+     */
     Kanban.prototype.dataReady = function (data) {
@@ -339,0 +345,0 @@ this.kanbanData = data.Result;

src/kanban/base/layout-render.d.ts

@@ -23,2 +23,3 @@ import { Kanban } from '../base/kanban';
     private renderContent;
+    private initializeSwimlaneTree;
     private renderSwimlaneRow;
@@ -25,0 +26,0 @@ private renderCards;

src/kanban/base/layout-render.js

@@ -58,5 +58,7 @@ var __extends = (this && this.__extends) || (function () {
             this.parent.on(events.contentReady, this.scrollUiUpdate, this);
-            if (this.parent.isAdaptive && this.parent.swimlaneSettings.keyField) {
-                this.renderSwimlaneHeader();
-            }
+        }
+        if (this.parent.isAdaptive && this.parent.swimlaneSettings.keyField && this.parent.kanbanData.length !== 0) {
+            this.renderSwimlaneHeader();
+        }
+        if (!this.parent.isBlazorRender()) {
             var header = createElement('div', { className: cls.HEADER_CLASS });
@@ -69,2 +71,5 @@ this.parent.element.appendChild(header);
         }
+        else {
+            this.initializeSwimlaneTree();
+        }
         this.parent.notify(events.contentReady, {});
@@ -96,2 +101,5 @@ this.wireEvents();
                 });
+                if (this_1.parent.kanbanData.length !== 0 && this_1.parent.swimlaneSettings.keyField && !this_1.parent.isAdaptive) {
+                    th_1.classList.add(cls.HEADER_BOTTOM_CLASS);
+                }
                 var classList = [];
@@ -172,7 +180,3 @@ if (column.allowToggle) {
         this.swimlaneRow = this.kanbanRows;
-        if (this.parent.swimlaneSettings.keyField && this.parent.isAdaptive) {
-            this.swimlaneRow = [this.kanbanRows[this.swimlaneIndex]];
-            this.renderSwimlaneTree();
-            this.parent.element.querySelector('.' + cls.TOOLBAR_SWIMLANE_NAME_CLASS).innerHTML = this.swimlaneRow[0].textField;
-        }
+        this.initializeSwimlaneTree();
         var _loop_2 = function (row) {
@@ -224,2 +228,14 @@ if (this_2.parent.swimlaneSettings.keyField && this_2.parent.swimlaneToggleArray.length !== 0) {
     };
+    LayoutRender.prototype.initializeSwimlaneTree = function () {
+        if (this.parent.swimlaneSettings.keyField && this.parent.isAdaptive && this.parent.kanbanData.length !== 0) {
+            if (!this.parent.isBlazorRender()) {
+                this.swimlaneRow = [this.kanbanRows[this.swimlaneIndex]];
+                this.renderSwimlaneTree();
+                this.parent.element.querySelector('.' + cls.TOOLBAR_SWIMLANE_NAME_CLASS).innerHTML = this.swimlaneRow[0].textField;
+            }
+            else {
+                this.renderSwimlaneTree();
+            }
+        }
+    };
     LayoutRender.prototype.renderSwimlaneRow = function (tBody, row, isCollapsed) {
@@ -679,2 +695,5 @@ var name = cls.CONTENT_ROW_CLASS + ' ' + cls.SWIMLANE_ROW_CLASS;
         if (this.parent.allowDragAndDrop) {
+            this.parent.element.querySelectorAll('.' + cls.CARD_CLASS).forEach(function (card) {
+                card.classList.add(cls.DRAGGABLE_CLASS);
+            });
             this.parent.dragAndDropModule.wireDragEvents(this.parent.element.querySelector('.' + cls.CONTENT_CLASS));
@@ -681,0 +700,0 @@ }

src/kanban/base/mobile-layout.d.ts

@@ -20,3 +20,7 @@ import { TreeView } from '@syncfusion/ej2-navigations';
     private treeSwimlaneClick;
+    /**
+     * @hidden
+     */
+    hidePopup(): void;
     getWidth(): number;
 }

src/kanban/base/mobile-layout.js

@@ -1,2 +0,2 @@
-import { createElement, EventHandler, addClass, removeClass } from '@syncfusion/ej2-base';
+import { createElement, EventHandler, addClass, removeClass, setStyleAttribute } from '@syncfusion/ej2-base';
 import { TreeView } from '@syncfusion/ej2-navigations';
@@ -17,39 +17,54 @@ import { Popup } from '@syncfusion/ej2-popups';
     MobileLayout.prototype.renderSwimlaneHeader = function () {
-        var toolbarWrapper = createElement('div', { className: cls.SWIMLANE_HEADER_CLASS });
-        toolbarWrapper.innerHTML = '<div class="' + cls.SWIMLANE_HEADER_TOOLBAR_CLASS + '"><div class="' + cls.TOOLBAR_MENU_CLASS + '">' +
-            '<div class="e-icons ' + cls.TOOLBAR_MENU_ICON_CLASS + '"></div></div><div class="' + cls.TOOLBAR_LEVEL_TITLE_CLASS + '">' +
-            '<div class="' + cls.TOOLBAR_SWIMLANE_NAME_CLASS + '"></div></div></div>';
-        this.parent.element.appendChild(toolbarWrapper);
+        var toolbarWrapper;
+        if (this.parent.isBlazorRender()) {
+            toolbarWrapper = this.parent.element.querySelector('.' + cls.SWIMLANE_HEADER_CLASS);
+        }
+        else {
+            toolbarWrapper = createElement('div', { className: cls.SWIMLANE_HEADER_CLASS });
+            toolbarWrapper.innerHTML = '<div class="' + cls.SWIMLANE_HEADER_TOOLBAR_CLASS + '"><div class="' + cls.TOOLBAR_MENU_CLASS +
+                '"><div class="e-icons ' + cls.TOOLBAR_MENU_ICON_CLASS + '"></div></div><div class="' + cls.TOOLBAR_LEVEL_TITLE_CLASS +
+                '"><div class="' + cls.TOOLBAR_SWIMLANE_NAME_CLASS + '"></div></div></div>';
+            this.parent.element.appendChild(toolbarWrapper);
+        }
         EventHandler.add(toolbarWrapper.querySelector('.' + cls.TOOLBAR_MENU_ICON_CLASS), 'click', this.menuClick, this);
     };
     MobileLayout.prototype.renderSwimlaneTree = function () {
+        var treeWrapper;
         var height = this.parent.element.querySelector('.' + cls.SWIMLANE_HEADER_CLASS).offsetHeight;
         var treeHeight = window.innerHeight - height;
-        this.popupOverlay = createElement('div', { className: cls.SWIMLANE_OVERLAY_CLASS, styles: 'height: ' + treeHeight + 'px;' });
-        var wrapper = createElement('div', { className: cls.SWIMLANE_CONTENT_CLASS, styles: 'top:' + height + 'px;' });
-        var treeWrapper = createElement('div', {
-            className: cls.SWIMLANE_RESOURCE_CLASS + ' e-popup-close',
-            styles: 'height: ' + treeHeight + 'px;'
-        });
-        wrapper.appendChild(treeWrapper);
-        wrapper.appendChild(this.popupOverlay);
-        this.parent.element.appendChild(wrapper);
-        var swimlaneTree = createElement('div', { className: cls.SWIMLANE_TREE_CLASS });
-        treeWrapper.appendChild(swimlaneTree);
-        this.treeViewObj = new TreeView({
-            cssClass: this.parent.cssClass,
-            enableRtl: this.parent.enableRtl,
-            fields: {
-                dataSource: this.parent.layoutModule.kanbanRows,
-                id: 'keyField',
-                text: 'textField'
-            },
-            nodeTemplate: this.parent.swimlaneSettings.template,
-            nodeClicked: this.treeSwimlaneClick.bind(this)
-        });
-        this.treeViewObj.appendTo(swimlaneTree);
-        this.treePopup = new Popup(treeWrapper, {
+        if (!this.parent.isBlazorRender()) {
+            this.popupOverlay = createElement('div', { className: cls.SWIMLANE_OVERLAY_CLASS, styles: 'height: ' + treeHeight + 'px;' });
+            var wrapper = createElement('div', { className: cls.SWIMLANE_CONTENT_CLASS, styles: 'top:' + height + 'px;' });
+            treeWrapper = createElement('div', {
+                className: cls.SWIMLANE_RESOURCE_CLASS + ' e-popup-close',
+                styles: 'height: ' + treeHeight + 'px;'
+            });
+            wrapper.appendChild(treeWrapper);
+            wrapper.appendChild(this.popupOverlay);
+            this.parent.element.appendChild(wrapper);
+            var swimlaneTree = createElement('div', { className: cls.SWIMLANE_TREE_CLASS });
+            treeWrapper.appendChild(swimlaneTree);
+            this.treeViewObj = new TreeView({
+                cssClass: this.parent.cssClass,
+                enableRtl: this.parent.enableRtl,
+                fields: {
+                    dataSource: this.parent.layoutModule.kanbanRows,
+                    id: 'keyField',
+                    text: 'textField'
+                },
+                nodeTemplate: this.parent.swimlaneSettings.template,
+                nodeClicked: this.treeSwimlaneClick.bind(this)
+            });
+            this.treeViewObj.appendTo(swimlaneTree);
+        }
+        else {
+            this.popupOverlay = this.parent.element.querySelector('.' + cls.SWIMLANE_CONTENT_CLASS + ' .' + cls.SWIMLANE_OVERLAY_CLASS);
+            setStyleAttribute(this.parent.element.querySelector('.' + cls.SWIMLANE_OVERLAY_CLASS), { 'height': treeHeight + 'px' });
+            setStyleAttribute(this.parent.element.querySelector('.' + cls.SWIMLANE_CONTENT_CLASS), { 'top': height + 'px' });
+            treeWrapper = this.parent.element.querySelector('.' + cls.SWIMLANE_RESOURCE_CLASS);
+            setStyleAttribute(treeWrapper, { 'height': treeHeight + 'px' });
+        }
+        var popupObj = {
             targetType: 'relative',
             actionOnScroll: 'none',
-            content: this.treeViewObj.element,
             enableRtl: this.parent.enableRtl,
@@ -60,3 +75,7 @@ zIndex: 10,
             viewPortElement: this.parent.element.querySelector('.' + cls.CONTENT_CLASS)
-        });
+        };
+        if (!this.parent.isBlazorRender()) {
+            popupObj.content = this.treeViewObj.element;
+        }
+        this.treePopup = new Popup(treeWrapper, popupObj);
     };
@@ -69,5 +88,7 @@ MobileLayout.prototype.menuClick = function (event) {
         else {
-            var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item'));
-            removeClass(treeNodes, 'e-active');
-            addClass([treeNodes[this.parent.layoutModule.swimlaneIndex]], 'e-active');
+            if (!this.parent.isBlazorRender()) {
+                var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item'));
+                removeClass(treeNodes, 'e-active');
+                addClass([treeNodes[this.parent.layoutModule.swimlaneIndex]], 'e-active');
+            }
             this.treePopup.show();
@@ -85,2 +106,9 @@ addClass([this.popupOverlay], 'e-enable');
     };
+    /**
+     * @hidden
+     */
+    MobileLayout.prototype.hidePopup = function () {
+        this.treePopup.hide();
+        removeClass([this.popupOverlay], 'e-enable');
+    };
     MobileLayout.prototype.getWidth = function () {
@@ -87,0 +115,0 @@ return (window.innerWidth * 80) / 100;

src/kanban/models/card-settings-model.d.ts

@@ -36,3 +36,2 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SelectionType } from '../base/type';
      * @default null
-
      */
@@ -39,0 +38,0 @@ priority?: string;

src/kanban/models/card-settings.d.ts

@@ -31,3 +31,2 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @default null
-
      */
@@ -34,0 +33,0 @@ priority: string;

No alert changes

Improved metrics

Total package byte prevSize

2406390

increased by1.41%

Lines of code

26442

increased by0.71%

Dependency changes

• Updated@syncfusion/ej2-base@~18.1.53

• Updated@syncfusion/ej2-data@~18.1.55

• Updated@syncfusion/ej2-dropdowns@~18.1.55

• Updated@syncfusion/ej2-inputs@~18.1.55

• Updated@syncfusion/ej2-navigations@~18.1.55

• Updated@syncfusion/ej2-popups@~18.1.55