@syncfusion/ej2-kanban - npm Package Compare versions

Comparing version 17.4.51 to 18.1.36-beta

CHANGELOG.md

@@ -9,3 +9,3 @@ # Changelog
 
-- **Priority Support** - The features enable to render the cards based on the priority value. So, user can easily drag and drop the cards to particular place.
+- **Priority Support**: The features enable to render the cards based on the priority value. So, user can easily drag and drop the cards to particular place.
 
@@ -12,0 +12,0 @@ ## 17.4.46 (2020-01-30)

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.4.51
-*  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
+*  version : 18.1.36-beta
+*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

package.json

 {
   "_from": "@syncfusion/ej2-kanban@*",
-  "_id": "@syncfusion/ej2-kanban@17.4.46",
+  "_id": "@syncfusion/ej2-kanban@0.21.1",
   "_inBundle": false,
-  "_integrity": "sha512-tMwgF7PVwTh/XXwGnAXXZX8rsrjZLP52Si/9+m0jSvN+gLWdgOCUgTjR19ToeAUpDGk5NYL0iUZtbDIBn1eJ9w==",
+  "_integrity": "sha512-gk9Dp1hkAcshHjUyVula+thK0uvsDPp3e/Tjdaccxk/wZ4ADN8jPFY4OuU5EdcdClvYDyZJSeNNJh2YAKEYx8w==",
   "_location": "/@syncfusion/ej2-kanban",
@@ -23,6 +23,6 @@ "_phantomChildren": {},
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-kanban/-/ej2-kanban-17.4.46.tgz",
-  "_shasum": "50f79bfa84bfa0622f88bb4ff76c14277cb94990",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-kanban/-/ej2-kanban-0.21.1.tgz",
+  "_shasum": "0ac3fd09c769265682b1300ee94faeea18d85972",
   "_spec": "@syncfusion/ej2-kanban@*",
-  "_where": "/jenkins/workspace/ation_hotfix_17.2.0.34_Vol2-DDPJ6C2YEWTWLLKKNA7AG2JBE6DYTCTNGMHGORWGAYAVCL6L7OLQ/packages/included",
+  "_where": "/jenkins/workspace/automation_release_18.1.0.1-52JLNOGRCDHXRVQM3W564VPLFCPHWUYDYU3I3DVRABSR7F6AIFYQ/packages/included",
   "author": {
@@ -36,7 +36,10 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.4.51",
-    "@syncfusion/ej2-data": "~17.4.51",
-    "@syncfusion/ej2-layouts": "~17.4.51",
-    "@syncfusion/ej2-navigations": "~17.4.51",
-    "@syncfusion/ej2-popups": "~17.4.51"
+    "@syncfusion/ej2-base": "~18.1.36-beta",
+    "@syncfusion/ej2-buttons": "~18.1.36-beta",
+    "@syncfusion/ej2-data": "~18.1.36-beta",
+    "@syncfusion/ej2-dropdowns": "~18.1.36-beta",
+    "@syncfusion/ej2-inputs": "~18.1.36-beta",
+    "@syncfusion/ej2-layouts": "~18.1.36-beta",
+    "@syncfusion/ej2-navigations": "~18.1.36-beta",
+    "@syncfusion/ej2-popups": "~18.1.36-beta"
   },
@@ -69,4 +72,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "17.4.51",
+  "version": "18.1.36-beta",
   "sideEffects": false
 }

src/kanban/actions/action.d.ts

@@ -24,3 +24,3 @@ import { Kanban } from '../base/kanban';
     doubleClickHandler(e: MouseEvent): void;
-    private cardClick;
+    cardClick(e: KeyboardEvent, selectedCard?: HTMLElement): void;
     private cardDoubleClick;
@@ -27,0 +27,0 @@ rowExpandCollapse(e: Event | HTMLElement): void;

src/kanban/actions/action.js

@@ -47,5 +47,5 @@ import { closest, classList, createElement, remove, addClass, removeClass, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
     };
-    Action.prototype.cardClick = function (e) {
+    Action.prototype.cardClick = function (e, selectedCard) {
         var _this = this;
-        var target = closest(e.target, '.' + cls.CARD_CLASS);
+        var target = closest((selectedCard) ? selectedCard : e.target, '.' + cls.CARD_CLASS);
         var cardClickObj = this.parent.getCardDetails(target);
@@ -56,4 +56,5 @@ this.parent.activeCardData = { data: cardClickObj, element: target };
             if (!clickArgs.cancel) {
-                if (target.classList.contains(cls.CARD_SELECTION_CLASS)) {
+                if (target.classList.contains(cls.CARD_SELECTION_CLASS) && e.type === 'click') {
                     removeClass([target], cls.CARD_SELECTION_CLASS);
+                    _this.parent.layoutModule.disableAttributeSelection(target);
                 }
@@ -63,3 +64,3 @@ else {
                     if (_this.parent.isAdaptive && _this.parent.touchModule) {
-                        isCtrlKey = _this.parent.touchModule.tabHold || e.ctrlKey;
+                        isCtrlKey = (_this.parent.touchModule.mobilePopup && _this.parent.touchModule.tabHold) || isCtrlKey;
                     }
@@ -75,2 +76,3 @@ _this.cardSelection(target, isCtrlKey, e.shiftKey);
     Action.prototype.cardDoubleClick = function (e) {
+        var _this = this;
         var target = closest(e.target, '.' + cls.CARD_CLASS);
@@ -80,3 +82,7 @@ var cardDoubleClickObj = this.parent.getCardDetails(target);
         var args = { data: cardDoubleClickObj, element: target, cancel: false, event: e };
-        this.parent.trigger(events.cardDoubleClick, args);
+        this.parent.trigger(events.cardDoubleClick, args, function (doubleClickArgs) {
+            if (!doubleClickArgs.cancel && !_this.parent.isBlazorRender()) {
+                _this.parent.dialogModule.openDialog('Edit', args.data);
+            }
+        });
     };
@@ -90,8 +96,10 @@ Action.prototype.rowExpandCollapse = function (e) {
                 var target = closest(headerTarget, '.' + cls.SWIMLANE_ROW_CLASS);
+                var key = target.getAttribute('data-key');
                 var tgtRow = _this.parent.element.querySelector('.' + cls.CONTENT_ROW_CLASS + (":nth-child(" + (target.rowIndex + 2) + ")"));
                 var targetIcon = target.querySelector("." + cls.SWIMLANE_ROW_EXPAND_CLASS + ",." + cls.SWIMLANE_ROW_COLLAPSE_CLASS);
-                if (target.classList.contains(cls.COLLAPSED_CLASS)) {
+                var isCollapsed = target.classList.contains(cls.COLLAPSED_CLASS) ? true : false;
+                if (isCollapsed) {
                     removeClass([tgtRow, target], cls.COLLAPSED_CLASS);
                     classList(targetIcon, [cls.SWIMLANE_ROW_EXPAND_CLASS], [cls.SWIMLANE_ROW_COLLAPSE_CLASS]);
-                    _this.parent.swimlaneToggleArray.splice(_this.parent.swimlaneToggleArray.indexOf(target.getAttribute('data-key')), 1);
+                    _this.parent.swimlaneToggleArray.splice(_this.parent.swimlaneToggleArray.indexOf(key), 1);
                 }
@@ -101,4 +109,7 @@ else {
                     classList(targetIcon, [cls.SWIMLANE_ROW_COLLAPSE_CLASS], [cls.SWIMLANE_ROW_EXPAND_CLASS]);
-                    _this.parent.swimlaneToggleArray.push(target.getAttribute('data-key'));
+                    _this.parent.swimlaneToggleArray.push(key);
                 }
+                targetIcon.setAttribute('aria-label', isCollapsed ? key + ' Expand' : key + ' Collapse');
+                target.setAttribute('aria-expanded', isCollapsed.toString());
+                tgtRow.setAttribute('aria-expanded', isCollapsed.toString());
                 _this.parent.notify(events.contentReady, {});
@@ -150,5 +161,8 @@ _this.parent.trigger(events.actionComplete, { target: headerTarget, requestType: 'rowExpandCollapse' });
                 remove(targetCol.querySelector('.' + cls.COLLAPSE_HEADER_TEXT_CLASS));
+                target.setAttribute('aria-expanded', 'true');
+                targetCol.setAttribute('aria-expanded', 'true');
             }
             this.columnToggleArray.splice(this.columnToggleArray.indexOf(target.getAttribute('data-key')), 1);
             this.parent.columns[colIndex].setProperties({ isExpanded: true }, true);
+            target.querySelector('.e-header-icon').setAttribute('aria-label', target.getAttribute('data-key') + ' Expand');
         }
@@ -161,5 +175,5 @@ else {
             classList(targetIcon, [cls.COLUMN_COLLAPSE_CLASS], [cls.COLUMN_EXPAND_CLASS]);
+            var key = target.getAttribute('data-key');
             for (var _a = 0, targetRow_2 = targetRow; _a < targetRow_2.length; _a++) {
                 var row = targetRow_2[_a];
-                var key = target.getAttribute('data-key');
                 var targetCol = row.querySelector("." + cls.CONTENT_CELLS_CLASS + "[data-key=\"" + key + "\"]");
@@ -172,5 +186,8 @@ var index = targetCol.cellIndex;
                 addClass([targetCol, target], cls.COLLAPSED_CLASS);
+                target.setAttribute('aria-expanded', 'false');
+                targetCol.setAttribute('aria-expanded', 'false');
             }
             this.columnToggleArray.push(target.getAttribute('data-key'));
             this.parent.columns[colIndex].setProperties({ isExpanded: false }, true);
+            target.querySelector('.e-header-icon').setAttribute('aria-label', key + ' Collapse');
         }
@@ -192,2 +209,3 @@ };
                 removeClass(cards, cls.CARD_SELECTION_CLASS);
+                this.parent.layoutModule.disableAttributeSelection(cards);
                 cards.forEach(function (el) {
@@ -218,2 +236,3 @@ _this.selectionArray.splice(_this.selectionArray.indexOf(el.getAttribute('data-id')), 1);
                     addClass([card], cls.CARD_SELECTION_CLASS);
+                    card.setAttribute('aria-selected', 'true');
                     this.selectionArray.push(card.getAttribute('data-id'));
@@ -230,2 +249,3 @@ this.selectedCardsElement.push(card);
                 addClass([target], cls.CARD_SELECTION_CLASS);
+                target.setAttribute('aria-selected', 'true');
                 this.selectionArray.push(target.getAttribute('data-id'));
@@ -232,0 +252,0 @@ this.selectedCardsElement.push(target);

src/kanban/actions/crud.js

@@ -70,12 +70,26 @@ import * as events from '../base/constant';
                 if (cardData instanceof Array || modifiedData.length > 0) {
-                    promise = _this.parent.dataModule.dataManager.saveChanges(editParms, _this.keyField, _this.getTable(), _this.getQuery());
+                    if (!_this.parent.isBlazorRender()) {
+                        promise = _this.parent.dataModule.dataManager.saveChanges(editParms, _this.keyField, _this.getTable(), _this.getQuery());
+                    }
+                    else {
+                        // tslint:disable-next-line
+                        _this.parent.interopAdaptor.invokeMethodAsync('AddCards', { Records: cardData }, _this.keyField);
+                    }
                 }
                 else {
-                    promise = _this.parent.dataModule.dataManager.insert(cardData, _this.getTable(), _this.getQuery());
+                    if (!_this.parent.isBlazorRender()) {
+                        promise = _this.parent.dataModule.dataManager.insert(cardData, _this.getTable(), _this.getQuery());
+                    }
+                    else {
+                        // tslint:disable-next-line
+                        _this.parent.interopAdaptor.invokeMethodAsync('AddCard', { Record: cardData });
+                    }
                 }
-                var crudArgs = {
-                    requestType: 'cardCreated', cancel: false, promise: promise, addedRecords: editParms.addedRecords,
-                    changedRecords: editParms.changedRecords, deletedRecords: editParms.deletedRecords
-                };
-                _this.refreshData(crudArgs);
+                if (!_this.parent.isBlazorRender()) {
+                    var crudArgs = {
+                        requestType: 'cardCreated', cancel: false, promise: promise, addedRecords: editParms.addedRecords,
+                        changedRecords: editParms.changedRecords, deletedRecords: editParms.deletedRecords
+                    };
+                    _this.refreshData(crudArgs);
+                }
             }
@@ -102,12 +116,26 @@ });
                 if (cardData instanceof Array) {
-                    promise = _this.parent.dataModule.dataManager.saveChanges(editParms, _this.keyField, _this.getTable(), _this.getQuery());
+                    if (!_this.parent.isBlazorRender()) {
+                        promise = _this.parent.dataModule.dataManager.saveChanges(editParms, _this.keyField, _this.getTable(), _this.getQuery());
+                    }
+                    else {
+                        // tslint:disable-next-line
+                        _this.parent.interopAdaptor.invokeMethodAsync('UpdateCards', { Records: cardData }, _this.keyField);
+                    }
                 }
                 else {
-                    promise = _this.parent.dataModule.dataManager.update(_this.keyField, cardData, _this.getTable(), _this.getQuery());
+                    if (!_this.parent.isBlazorRender()) {
+                        promise = _this.parent.dataModule.dataManager.update(_this.keyField, cardData, _this.getTable(), _this.getQuery());
+                    }
+                    else {
+                        // tslint:disable-next-line
+                        _this.parent.interopAdaptor.invokeMethodAsync('UpdateCard', _this.keyField, { Record: cardData });
+                    }
                 }
-                var crudArgs = {
-                    requestType: 'cardChanged', cancel: false, promise: promise, addedRecords: editParms.addedRecords,
-                    changedRecords: editParms.changedRecords, deletedRecords: editParms.deletedRecords
-                };
-                _this.refreshData(crudArgs);
+                if (!_this.parent.isBlazorRender()) {
+                    var crudArgs = {
+                        requestType: 'cardChanged', cancel: false, promise: promise, addedRecords: editParms.addedRecords,
+                        changedRecords: editParms.changedRecords, deletedRecords: editParms.deletedRecords
+                    };
+                    _this.refreshData(crudArgs);
+                }
             }
@@ -135,12 +163,26 @@ });
                 if (editParms.deletedRecords.length > 1) {
-                    promise = _this.parent.dataModule.dataManager.saveChanges(editParms, _this.keyField, _this.getTable(), _this.getQuery());
+                    if (!_this.parent.isBlazorRender()) {
+                        promise = _this.parent.dataModule.dataManager.saveChanges(editParms, _this.keyField, _this.getTable(), _this.getQuery());
+                    }
+                    else {
+                        // tslint:disable-next-line
+                        _this.parent.interopAdaptor.invokeMethodAsync('DeleteCards', { Records: cardData }, _this.keyField);
+                    }
                 }
                 else {
-                    promise = _this.parent.dataModule.dataManager.remove(_this.keyField, cardData, _this.getTable(), _this.getQuery());
+                    if (!_this.parent.isBlazorRender()) {
+                        promise = _this.parent.dataModule.dataManager.remove(_this.keyField, cardData, _this.getTable(), _this.getQuery());
+                    }
+                    else {
+                        // tslint:disable-next-line
+                        _this.parent.interopAdaptor.invokeMethodAsync('DeleteCard', _this.keyField, { Record: cardData });
+                    }
                 }
-                var crudArgs = {
-                    requestType: 'cardRemoved', cancel: false, promise: promise, addedRecords: editParms.addedRecords,
-                    changedRecords: editParms.changedRecords, deletedRecords: editParms.deletedRecords
-                };
-                _this.refreshData(crudArgs);
+                if (!_this.parent.isBlazorRender()) {
+                    var crudArgs = {
+                        requestType: 'cardRemoved', cancel: false, promise: promise, addedRecords: editParms.addedRecords,
+                        changedRecords: editParms.changedRecords, deletedRecords: editParms.deletedRecords
+                    };
+                    _this.refreshData(crudArgs);
+                }
             }
@@ -147,0 +189,0 @@ });

src/kanban/actions/drag.d.ts

@@ -10,2 +10,3 @@ import { Kanban } from '../base/kanban';
     private dragEdges;
+    isDragging: Boolean;
     /**
@@ -12,0 +13,0 @@ * Constructor for drag and drop module

src/kanban/actions/drag.js

@@ -1,2 +0,3 @@
-import { Draggable, formatUnit, createElement, isNullOrUndefined, addClass, closest, removeClass, classList, remove } from '@syncfusion/ej2-base';
+import { Draggable, formatUnit, createElement, isNullOrUndefined, addClass, closest } from '@syncfusion/ej2-base';
+import { removeClass, classList, remove } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constant';
@@ -21,2 +22,3 @@ import * as events from '../base/constant';
         this.dragEdges = { left: false, right: false, top: false, bottom: false };
+        this.isDragging = false;
     }
@@ -82,2 +84,5 @@ DragAndDrop.prototype.wireDragEvents = function (element) {
             }
+            if (_this.parent.isBlazorRender()) {
+                e.bindEvents(e.dragElement);
+            }
             if (_this.dragObj.element.classList.contains(cls.CARD_SELECTION_CLASS)) {
@@ -93,2 +98,3 @@ _this.dragObj.selectedCards.forEach(function (element) { _this.draggedClone(element); });
                     classList(_this.dragObj.cloneElement, ['e-multi-card-clone'], [cls.CARD_SELECTION_CLASS]);
+                    _this.parent.layoutModule.disableAttributeSelection(_this.dragObj.cloneElement);
                     _this.dragObj.cloneElement.style.width = '90px';
@@ -125,9 +131,8 @@ }
             this.multiCloneRemove();
-            var isDrag = false;
-            if ((targetKey === this.getColumnKey(closest(this.dragObj.draggedClone, '.' + cls.CONTENT_CELLS_CLASS)))) {
-                isDrag = true;
-            }
+            var isDrag = (targetKey === this.getColumnKey(closest(this.dragObj.draggedClone, '.' + cls.CONTENT_CELLS_CLASS)))
+                ? true : false;
             if (keys.length === 1 || isDrag) {
                 if (target.classList.contains(cls.CARD_CLASS)) {
-                    var insertClone = isNullOrUndefined(target.previousElementSibling) ? 'beforebegin' : 'afterend';
+                    var insertClone = (isNullOrUndefined(target.previousElementSibling) &&
+                        ((this.dragObj.pageY - target.offsetTop) / 2) < 25) ? 'beforebegin' : 'afterend';
                     target.insertAdjacentElement(insertClone, this.dragObj.targetClone);
@@ -279,2 +284,6 @@ }
             dragMultiClone.forEach(function (clone) { return remove(clone); });
+            if (_this.parent.isBlazorRender()) {
+                _this.dragObj.element.style.removeProperty('width');
+                _this.multiCloneRemove();
+            }
             removeClass([_this.dragObj.element], cls.DRAGGED_CARD_CLASS);
@@ -293,2 +302,3 @@ clearInterval(_this.dragObj.navigationInterval);
             _this.dragObj.cardDetails = _this.dragObj.modifiedData = [];
+            _this.isDragging = false;
         });
@@ -343,3 +353,4 @@ };
         var _this = this;
-        var lists = [].slice.call(this.parent.element.querySelectorAll('.' + cls.HEADER_CELLS_CLASS));
+        var headerCells = '.' + cls.HEADER_CELLS_CLASS + ':not(.' + cls.STACKED_HEADER_CELL_CLASS + ')';
+        var lists = [].slice.call(this.parent.element.querySelectorAll(headerCells));
         lists.forEach(function (list) {
@@ -376,2 +387,6 @@ if (_this.getColumnKey(list) === _this.getColumnKey(tColumn || target)) {
         this.dragObj.pageX = eventArgs.pageX;
+        this.isDragging = true;
+        if (this.parent.isAdaptive && this.parent.tooltipModule) {
+            this.parent.tooltipModule.tooltipObj.close();
+        }
     };
@@ -384,3 +399,3 @@ DragAndDrop.prototype.getPageCoordinates = function (e) {
     DragAndDrop.prototype.getColumnKey = function (target) {
-        if (target) {
+        if (target && target.getAttribute('data-key')) {
             return target.getAttribute('data-key').trim();
@@ -387,0 +402,0 @@ }

src/kanban/actions/keyboard.d.ts

@@ -9,2 +9,3 @@ import { Kanban } from '../base';
     private keyboardModule;
+    private prevAction;
     private keyConfigs;
@@ -11,0 +12,0 @@ /**

src/kanban/actions/keyboard.js

@@ -41,2 +41,3 @@ import { KeyboardEvents, addClass, removeClass, classList, closest } from '@syncfusion/ej2-base';
         });
+        this.prevAction = '';
     }
@@ -87,2 +88,3 @@ Keyboard.prototype.keyActionHandler = function (e) {
             removeClass([selectedCard], cls.CARD_SELECTION_CLASS);
+            this.parent.layoutModule.disableAttributeSelection(selectedCard);
             var selection = this.parent.actionModule.selectionArray;
@@ -164,14 +166,9 @@ selection.splice(selection.indexOf(selectedCard.getAttribute('data-id')), 1);
         var element = [].slice.call(this.parent.element.querySelectorAll(className));
-        var collapseCount = this.parent.element.querySelectorAll(className + '.' + cls.COLLAPSED_CLASS).length;
-        if ((action === 'swimlaneCollapseAll' && element.length - collapseCount === 0) ||
-            (action === 'swimlaneExpandAll' && element.length - collapseCount === element.length)) {
+        if (this.prevAction === action) {
             return;
         }
+        this.prevAction = action;
         element.forEach(function (ele) {
             if (ele.classList.contains(cls.CARD_CLASS)) {
                 ele = closest(ele, '.' + cls.CONTENT_ROW_CLASS).previousElementSibling;
-                if ((!ele.classList.contains(cls.COLLAPSED_CLASS) && action === 'selectedSwimlaneExpand') ||
-                    (ele.classList.contains(cls.COLLAPSED_CLASS) && action === 'selectedSwimlaneCollapse')) {
-                    return;
-                }
             }
@@ -181,2 +178,3 @@ if (ele.classList.contains(cls.COLLAPSED_CLASS)) {
                 classList(ele.querySelector('.' + cls.ICON_CLASS), [cls.SWIMLANE_ROW_EXPAND_CLASS], [cls.SWIMLANE_ROW_COLLAPSE_CLASS]);
+                ele.querySelector('.' + cls.ICON_CLASS).setAttribute('aria-label', ele.getAttribute('data-key') + ' Expand');
             }
@@ -186,2 +184,3 @@ else if (!ele.classList.contains(cls.COLLAPSED_CLASS)) {
                 classList(ele.querySelector('.' + cls.ICON_CLASS), [cls.SWIMLANE_ROW_COLLAPSE_CLASS], [cls.SWIMLANE_ROW_EXPAND_CLASS]);
+                ele.querySelector('.' + cls.ICON_CLASS).setAttribute('aria-label', ele.getAttribute('data-key') + ' Collapse');
             }
@@ -201,5 +200,2 @@ });
                 this.parent.actionModule.cardSelection(nextCellCards[0], false, false);
-                if (row.classList.contains(cls.COLLAPSED_CLASS)) {
-                    this.processSwimlaneExpandCollapse('selectedSwimlaneExpand');
-                }
                 break;
@@ -236,3 +232,3 @@ }
         if (selectedCard) {
-            this.parent.actionModule.cardSelection(selectedCard, false, false);
+            this.parent.actionModule.cardClick(e, selectedCard);
         }
@@ -248,2 +244,3 @@ };
             removeClass([selectedCard], cls.CARD_SELECTION_CLASS);
+            this.parent.layoutModule.disableAttributeSelection(selectedCard);
         }
@@ -250,0 +247,0 @@ };

src/kanban/actions/tooltip.d.ts

@@ -0,1 +1,2 @@
+import { Tooltip } from '@syncfusion/ej2-popups';
 import { Kanban } from '../base';
@@ -7,3 +8,3 @@ /**
     private parent;
-    private tooltipObj;
+    tooltipObj: Tooltip;
     constructor(parent: Kanban);
@@ -10,0 +11,0 @@ private renderTooltip;

src/kanban/actions/tooltip.js

@@ -27,2 +27,6 @@ import { createElement, append, closest, addClass } from '@syncfusion/ej2-base';
     KanbanTooltip.prototype.onBeforeRender = function (args) {
+        if (this.parent.dragAndDropModule.isDragging) {
+            args.cancel = true;
+            return;
+        }
         var tooltipContent;
@@ -29,0 +33,0 @@ if (this.parent.tooltipTemplate) {

src/kanban/base/constant.d.ts

@@ -17,3 +17,3 @@ /**
 /** @hidden */
-export declare const columnRendered: string;
+export declare const queryCellInfo: string;
 /** @hidden */
@@ -32,2 +32,6 @@ export declare const dataBinding: string;
 /** @hidden */
+export declare const dialogOpen: string;
+/** @hidden */
+export declare const dialogClose: string;
+/** @hidden */
 export declare const contentReady: string;
@@ -34,0 +38,0 @@ /** @hidden */

src/kanban/base/constant.js

@@ -18,3 +18,3 @@ /**
 /** @hidden */
-export var columnRendered = 'columnRendered';
+export var queryCellInfo = 'queryCellInfo';
 /** @hidden */
@@ -32,2 +32,6 @@ export var dataBinding = 'dataBinding';
 export var documentClick = 'document-click';
+/** @hidden */
+export var dialogOpen = 'dialogOpen';
+/** @hidden */
+export var dialogClose = 'dialogClose';
 // Constants for internal events
@@ -34,0 +38,0 @@ /** @hidden */

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

@@ -164,1 +164,3 @@ /**
 export declare const POPUP_OPEN_CLASS: string;
+/** @hidden */
+export declare const DIALOG_CONTENT_CONTAINER: string;

src/kanban/base/css-constant.js

@@ -164,1 +164,3 @@ /**
 export var POPUP_OPEN_CLASS = 'e-popup-open';
+/** @hidden */
+export var DIALOG_CONTENT_CONTAINER = 'e-kanban-dialog-content';

src/kanban/base/interface.d.ts

 import { BaseEventArgs } from '@syncfusion/ej2-base';
+import { CurrentAction } from './type';
 /**
@@ -26,3 +27,6 @@ * Kanban Interface
     cancel?: boolean;
-    /** Returns the actual HTML element on which the required custom styling can be applied. */
+    /**
+     * Returns the actual HTML element on which the required custom styling can be applied.
+     * @blazorType CellDOM
+     */
     element: Element;
@@ -32,6 +36,9 @@ /** Defines the type of the event. */
 }
-export interface ColumnRenderedEventArgs extends BaseEventArgs {
+export interface QueryCellInfoEventArgs extends BaseEventArgs {
     /** Returns the object of the elements which is currently being rendered on the UI. */
     data?: HeaderArgs[];
-    /** Returns the actual HTML element on which the required custom styling can be applied. */
+    /**
+     * Returns the actual HTML element on which the required custom styling can be applied.
+
+     */
     element: Element;
@@ -48,3 +55,6 @@ /** Defines the cancel option for the action taking place. */
     };
-    /** Returns the actual HTML element on which the required custom styling can be applied. */
+    /**
+     * Returns the actual HTML element on which the required custom styling can be applied.
+
+     */
     element: Element;
@@ -55,3 +65,6 @@ /** Defines the cancel option for the action taking place. */
 export interface DragEventArgs extends BaseEventArgs {
-    /** Returns the drag element. */
+    /**
+     * Returns the drag element.
+     * @blazorType CellDOM
+     */
     element: HTMLElement | HTMLElement[];
@@ -67,2 +80,19 @@ /** Returns the dragged event data. */
 }
+/**
+
+ */
+export interface DialogEventArgs extends BaseEventArgs {
+    /** Returns the cell or event data. */
+    data: {
+        [key: string]: Object;
+    };
+    /** Returns the target element on which the popup is getting opened. */
+    target?: Element;
+    /** Returns the popup wrapper element. */
+    element?: Element;
+    /** Defines the cancel option. */
+    cancel?: boolean;
+    /** Defines the dialog actions. */
+    requestType?: CurrentAction;
+}
 /** @hidden */
@@ -110,2 +140,3 @@ export interface SaveChanges {
     textField: string;
+    count?: number;
 }
@@ -112,0 +143,0 @@ /** @hidden */

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, NotifyPropertyChanges, Property, Complex, Collection, detach } from '@syncfusion/ej2-base';import { addClass, classList, removeClass, compile, formatUnit, L10n, Browser, Event, EmitType } 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 { Columns } from '../models/columns';import { StackedHeaders } from '../models/stacked-headers';import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel } from '../models/index';import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs, ColumnRenderedEventArgs } from './interface';import { ReturnType, ConstraintType } from './type';import { Action } from '../actions/action';import { Crud } from '../actions/crud';import { DragAndDrop } from '../actions/drag';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';
+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';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -41,2 +41,3 @@
      * @default []
+     * @isGenericType true
      */
@@ -49,2 +50,3 @@ dataSource?: Object[] | DataManager;
      * @default null
+     * @blazorType Syncfusion.EJ2.Blazor.Data.Query
      */
@@ -99,2 +101,9 @@ query?: Query;
     /**
+     * Defines the dialog settings such as template and fields.
+
+     * @default {}
+     */
+    dialogSettings?: DialogSettingsModel;
+
+    /**
      * Enables or disables the drag and drop actions in Kanban.
@@ -112,3 +121,11 @@ * @default true
     /**
+     * Enables or disables the persisting component's state between page reloads. 
+     * If enabled, columns, dataSource properties will be persisted in kanban.
+
+     */
+    enablePersistence?: boolean;
+
+    /**
      * Defines the template content to card’s tooltip. The property works by enabling the ‘enableTooltip’ property.
+
      * @default null
@@ -170,3 +187,3 @@ */
      */
-    columnRendered?: EmitType<ColumnRenderedEventArgs>;
+    queryCellInfo?: EmitType<QueryCellInfoEventArgs>;
 
@@ -197,2 +214,16 @@ /**
 
+    /**
+     * Triggers before the dialog opens.
+
+     * @event
+     */
+    dialogOpen?: EmitType<DialogEventArgs>;
+
+    /**
+     * Triggers before the dialog closes.
+
+     * @event
+     */
+    dialogClose?: EmitType<DialogEventArgs>;
+
 }

src/kanban/base/kanban.d.ts

@@ -6,8 +6,10 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { KanbanModel } from './kanban-model';
-import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel } from '../models/index';
-import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs, ColumnRenderedEventArgs } from './interface';
-import { ReturnType, ConstraintType } from './type';
+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';
@@ -37,2 +39,3 @@ import { KanbanTooltip } from '../actions/tooltip';
     dragAndDropModule: DragAndDrop;
+    dialogModule: KanbanDialog;
     keyboardModule: Keyboard;
@@ -74,2 +77,3 @@ tooltipModule: KanbanTooltip;
      * @default []
+     * @isGenericType true
      */
@@ -81,2 +85,3 @@ dataSource: Object[] | DataManager;
      * @default null
+     * @blazorType Syncfusion.EJ2.Blazor.Data.Query
      */
@@ -123,2 +128,8 @@ query: Query;
     /**
+     * Defines the dialog settings such as template and fields.
+
+     * @default {}
+     */
+    dialogSettings: DialogSettingsModel;
+    /**
      * Enables or disables the drag and drop actions in Kanban.
@@ -134,3 +145,10 @@ * @default true
     /**
+     * Enables or disables the persisting component's state between page reloads.
+     * If enabled, columns, dataSource properties will be persisted in kanban.
+
+     */
+    enablePersistence: boolean;
+    /**
      * Defines the template content to card’s tooltip. The property works by enabling the ‘enableTooltip’ property.
+
      * @default null
@@ -183,3 +201,3 @@ */
      */
-    columnRendered: EmitType<ColumnRenderedEventArgs>;
+    queryCellInfo: EmitType<QueryCellInfoEventArgs>;
     /**
@@ -206,2 +224,14 @@ * Triggers before each card of the Kanban rendering on the page.
     /**
+     * Triggers before the dialog opens.
+
+     * @event
+     */
+    dialogOpen: EmitType<DialogEventArgs>;
+    /**
+     * Triggers before the dialog closes.
+
+     * @event
+     */
+    dialogClose: EmitType<DialogEventArgs>;
+    /**
      * Constructor for creating the Kanban widget
@@ -245,2 +275,20 @@ * @hidden
     private initializeModules;
+    private notifyChange;
+    private isDevice;
+    /**
+     * @hidden
+     */
+    isBlazorRender(): boolean;
+    /**
+     * @hidden
+     */
+    updateDataSource(data: {
+        [key: string]: Object[];
+    }): void;
+    /**
+     * @hidden
+     */
+    dataReady(data: {
+        [key: string]: Object[];
+    }): void;
     private destroyModules;
@@ -251,2 +299,3 @@ /** @private */
      * Returns the card details based on card ID from the board.
+
      * @method getCardDetails
@@ -261,2 +310,3 @@ * @param {Element} target Accepts the card element to get the details.
      * Returns the column data based on column key input.
+
      * @method getColumnData
@@ -269,2 +319,3 @@ * @param {string} columnKey Accepts the column key to get the objects.
      * Returns the swimlane column data based on swimlane keyField input.
+
      * @method getSwimlaneData
@@ -294,2 +345,19 @@ * @param {string} keyField Accepts the swimlane keyField to get the objects.
     /**
+     * To manually open the dialog.
+
+     * @method openDialog
+     * @param {CurrentAction} action Defines the action for which the dialog needs to be opened such as either for new card creation or
+     *  editing of existing cards or deletion of existing card. The applicable action names are `Add`, `Edit` and `Delete`.
+     * @param {Object} data It can be card data.
+     * @returns {void}
+     */
+    openDialog(action: CurrentAction, data?: Object): void;
+    /**
+     * To manually close the dialog.
+
+     * @method closeDialog
+     * @returns {void}
+     */
+    closeDialog(): void;
+    /**
      * Adds the new card to the data source of Kanban and layout.
@@ -334,2 +402,3 @@ * @method addCard
      * Add the column to Kanban board dynamically based on the provided column options and index in the argument list.
+
      * @method addColumn
@@ -343,2 +412,3 @@ * @param {ColumnsModel} columnOptions Defines the properties to new column that are going to be added in the board.
      * Deletes the column based on the provided index value.
+
      * @method deleteColumn
@@ -351,2 +421,3 @@ * @param {number} index Defines the index of column to delete the existing column from Kanban board.
      * Shows the column from hidden based on the provided key in the columns.
+
      * @method showColumn
@@ -359,2 +430,3 @@ * @param {string} key Accepts the hidden column key name to be shown from the hidden state in board.
      * Hides the column from Kanban board based on the provided key in the columns.
+
      * @method hideColumn
@@ -361,0 +433,0 @@ * @param {string} key Accepts the visible column key name to be hidden from the board.

src/kanban/base/kanban.js

@@ -21,3 +21,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Component, NotifyPropertyChanges, Property, Complex, Collection, detach } from '@syncfusion/ej2-base';
-import { addClass, classList, removeClass, compile, formatUnit, L10n, Browser, Event } from '@syncfusion/ej2-base';
+import { addClass, classList, removeClass, compile, formatUnit, L10n, Browser, Event, isBlazor } from '@syncfusion/ej2-base';
 import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
@@ -27,2 +27,3 @@ import { Data } from './data';
 import { CardSettings } from '../models/card-settings';
+import { DialogSettings } from '../models/dialog-settings';
 import { Columns } from '../models/columns';
@@ -33,2 +34,3 @@ import { StackedHeaders } from '../models/stacked-headers';
 import { DragAndDrop } from '../actions/drag';
+import { KanbanDialog } from '../actions/dialog';
 import { Keyboard } from '../actions/keyboard';
@@ -73,9 +75,20 @@ import { KanbanTooltip } from '../actions/tooltip';
         this.activeCardData = { data: null, element: null };
-        var defaultLocale = {
-            items: 'items',
-            min: 'Min',
-            max: 'Max',
-            cardsSelected: 'Cards Selected'
-        };
-        this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale);
+        if (!this.isBlazorRender()) {
+            var defaultLocale = {
+                items: 'items',
+                min: 'Min',
+                max: 'Max',
+                cardsSelected: 'Cards Selected',
+                addTitle: 'Add New Card',
+                editTitle: 'Edit Card Details',
+                deleteTitle: 'Delete Card',
+                deleteContent: 'Are you sure you want to delete this card?',
+                save: 'Save',
+                delete: 'Delete',
+                cancel: 'Cancel',
+                yes: 'Yes',
+                no: 'No'
+            };
+            this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale);
+        }
     };
@@ -110,20 +123,23 @@ /**
     Kanban.prototype.render = function () {
-        var addClasses = [cls.ROOT_CLASS];
-        var removeClasses = [];
-        if (this.enableRtl) {
-            addClasses.push(cls.RTL_CLASS);
+        if (!this.isBlazorRender()) {
+            var addClasses = [];
+            var removeClasses = [];
+            if (this.enableRtl) {
+                addClasses.push(cls.RTL_CLASS);
+            }
+            else {
+                removeClasses.push(cls.RTL_CLASS);
+            }
+            if (this.isAdaptive) {
+                addClasses.push(cls.DEVICE_CLASS);
+            }
+            else {
+                removeClasses.push(cls.DEVICE_CLASS);
+            }
+            if (this.cssClass) {
+                addClasses.push(this.cssClass);
+            }
+            this.element.setAttribute('role', 'main');
+            classList(this.element, addClasses, removeClasses);
         }
-        else {
-            removeClasses.push(cls.RTL_CLASS);
-        }
-        if (this.isAdaptive) {
-            addClasses.push(cls.DEVICE_CLASS);
-        }
-        else {
-            removeClasses.push(cls.DEVICE_CLASS);
-        }
-        if (this.cssClass) {
-            addClasses.push(this.cssClass);
-        }
-        classList(this.element, addClasses, removeClasses);
         this.element.style.width = formatUnit(this.width);
@@ -153,3 +169,5 @@ this.element.style.height = formatUnit(this.height);
                 case 'locale':
-                    this.refresh();
+                    if (!this.isBlazorRender()) {
+                        this.refresh();
+                    }
                     break;
@@ -168,7 +186,14 @@ case 'width':
                 case 'query':
-                    this.dataModule = new Data(this);
+                    if (!this.isBlazorRender()) {
+                        this.dataModule = new Data(this);
+                    }
                     break;
                 case 'columns':
                 case 'constraintType':
-                    this.notify(events.dataReady, { processedData: this.kanbanData });
+                    if (!this.isBlazorRender()) {
+                        this.notify(events.dataReady, { processedData: this.kanbanData });
+                    }
+                    else {
+                        this.notifyChange();
+                    }
                     break;
@@ -196,5 +221,12 @@ case 'swimlaneSettings':
                         this.tooltipModule = new KanbanTooltip(this);
-                        this.layoutModule.refreshCards();
+                        if (!this.isBlazorRender()) {
+                            this.layoutModule.refreshCards();
+                        }
                     }
                     break;
+                case 'dialogSettings':
+                    if (newProp.dialogSettings) {
+                        this.dialogModule = new KanbanDialog(this);
+                    }
+                    break;
                 case 'allowKeyboard':
@@ -210,3 +242,8 @@ if (this.keyboardModule) {
                 case 'stackedHeaders':
-                    this.layoutModule.refreshHeaders();
+                    if (!this.isBlazorRender()) {
+                        this.layoutModule.refreshHeaders();
+                    }
+                    else {
+                        this.notifyChange();
+                    }
                     break;
@@ -228,3 +265,8 @@ default:
                 case 'sortBy':
-                    this.notify(events.dataReady, { processedData: this.kanbanData });
+                    if (!this.isBlazorRender()) {
+                        this.notify(events.dataReady, { processedData: this.kanbanData });
+                    }
+                    else {
+                        this.notifyChange();
+                    }
                     break;
@@ -242,3 +284,8 @@ }
                 case 'template':
-                    this.layoutModule.refreshCards();
+                    if (!this.isBlazorRender()) {
+                        this.layoutModule.refreshCards();
+                    }
+                    else {
+                        this.notifyChange();
+                    }
                     break;
@@ -249,2 +296,3 @@ case 'selectionType':
                         removeClass(cards, cls.CARD_SELECTION_CLASS);
+                        this.layoutModule.disableAttributeSelection(cards);
                     }
@@ -256,3 +304,5 @@ break;
     Kanban.prototype.initializeModules = function () {
-        this.dataModule = new Data(this);
+        if (!this.isBlazorRender()) {
+            this.dataModule = new Data(this);
+        }
         this.layoutModule = new LayoutRender(this);
@@ -265,2 +315,3 @@ if (this.allowKeyboard) {
         this.dragAndDropModule = new DragAndDrop(this);
+        this.dialogModule = new KanbanDialog(this);
         if (this.enableTooltip) {
@@ -273,2 +324,32 @@ this.tooltipModule = new KanbanTooltip(this);
     };
+    Kanban.prototype.notifyChange = function () {
+        // tslint:disable-next-line
+        this.interopAdaptor.invokeMethodAsync('PropertyChanged');
+    };
+    Kanban.prototype.isDevice = function (ref) {
+        if (Browser.isDevice && this.isBlazorRender() && ref) {
+            // tslint:disable-next-line
+            ref.invokeMethodAsync('IsDevice', true);
+        }
+    };
+    /**
+     * @hidden
+     */
+    Kanban.prototype.isBlazorRender = function () {
+        return isBlazor() && this.isServerRendered;
+    };
+    /**
+     * @hidden
+     */
+    Kanban.prototype.updateDataSource = function (data) {
+        this.kanbanData = data.Result;
+    };
+    /**
+     * @hidden
+     */
+    Kanban.prototype.dataReady = function (data) {
+        this.kanbanData = data.Result;
+        this.hideSpinner();
+        this.notify(events.dataReady, { processedData: {} });
+    };
     Kanban.prototype.destroyModules = function () {
@@ -287,2 +368,3 @@ if (this.layoutModule) {
         }
+        this.dialogModule = null;
         this.actionModule = null;
@@ -309,2 +391,3 @@ this.crudModule = null;
      * Returns the card details based on card ID from the board.
+
      * @method getCardDetails
@@ -325,2 +408,3 @@ * @param {Element} target Accepts the card element to get the details.
      * Returns the column data based on column key input.
+
      * @method getColumnData
@@ -335,2 +419,3 @@ * @param {string} columnKey Accepts the column key to get the objects.
      * Returns the swimlane column data based on swimlane keyField input.
+
      * @method getSwimlaneData
@@ -368,2 +453,23 @@ * @param {string} keyField Accepts the swimlane keyField to get the objects.
     /**
+     * To manually open the dialog.
+
+     * @method openDialog
+     * @param {CurrentAction} action Defines the action for which the dialog needs to be opened such as either for new card creation or
+     *  editing of existing cards or deletion of existing card. The applicable action names are `Add`, `Edit` and `Delete`.
+     * @param {Object} data It can be card data.
+     * @returns {void}
+     */
+    Kanban.prototype.openDialog = function (action, data) {
+        this.dialogModule.openDialog(action, data);
+    };
+    /**
+     * To manually close the dialog.
+
+     * @method closeDialog
+     * @returns {void}
+     */
+    Kanban.prototype.closeDialog = function () {
+        this.dialogModule.closeDialog();
+    };
+    /**
      * Adds the new card to the data source of Kanban and layout.
@@ -402,2 +508,3 @@ * @method addCard
      * Add the column to Kanban board dynamically based on the provided column options and index in the argument list.
+
      * @method addColumn
@@ -413,2 +520,3 @@ * @param {ColumnsModel} columnOptions Defines the properties to new column that are going to be added in the board.
      * Deletes the column based on the provided index value.
+
      * @method deleteColumn
@@ -423,2 +531,3 @@ * @param {number} index Defines the index of column to delete the existing column from Kanban board.
      * Shows the column from hidden based on the provided key in the columns.
+
      * @method showColumn
@@ -433,2 +542,3 @@ * @param {string} key Accepts the hidden column key name to be shown from the hidden state in board.
      * Hides the column from Kanban board based on the provided key in the columns.
+
      * @method hideColumn
@@ -448,3 +558,5 @@ * @param {string} key Accepts the visible column key name to be hidden from the board.
         this.destroyModules();
-        [].slice.call(this.element.childNodes).forEach(function (node) { return detach(node); });
+        if (!this.isBlazorRender()) {
+            [].slice.call(this.element.childNodes).forEach(function (node) { return detach(node); });
+        }
         var removeClasses = [cls.ROOT_CLASS];
@@ -455,3 +567,5 @@ if (this.cssClass) {
         removeClass([this.element], removeClasses);
-        _super.prototype.destroy.call(this);
+        if (!this.isBlazorRender()) {
+            _super.prototype.destroy.call(this);
+        }
     };
@@ -495,2 +609,5 @@ __decorate([
     __decorate([
+        Complex({}, DialogSettings)
+    ], Kanban.prototype, "dialogSettings", void 0);
+    __decorate([
         Property(true)
@@ -502,2 +619,5 @@ ], Kanban.prototype, "allowDragAndDrop", void 0);
     __decorate([
+        Property(false)
+    ], Kanban.prototype, "enablePersistence", void 0);
+    __decorate([
         Property()
@@ -531,3 +651,3 @@ ], Kanban.prototype, "tooltipTemplate", void 0);
         Event()
-    ], Kanban.prototype, "columnRendered", void 0);
+    ], Kanban.prototype, "queryCellInfo", void 0);
     __decorate([
@@ -545,2 +665,8 @@ Event()
     ], Kanban.prototype, "dragStop", void 0);
+    __decorate([
+        Event()
+    ], Kanban.prototype, "dialogOpen", void 0);
+    __decorate([
+        Event()
+    ], Kanban.prototype, "dialogClose", void 0);
     Kanban = __decorate([
@@ -547,0 +673,0 @@ NotifyPropertyChanges

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

@@ -36,2 +36,3 @@ import { Kanban } from '../base/kanban';
     private documentClick;
+    disableAttributeSelection(cards: HTMLElement[] | Element): void;
     getColumnCards(data?: Object[]): {
@@ -38,0 +39,0 @@ [key: string]: Object[];

src/kanban/base/layout-render.js

@@ -14,3 +14,4 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { append, createElement, formatUnit, EventHandler, addClass, remove, extend, Browser, removeClass, closest } from '@syncfusion/ej2-base';
+import { append, createElement, formatUnit, EventHandler, addClass, remove, extend, Browser } from '@syncfusion/ej2-base';
+import { removeClass, closest } from '@syncfusion/ej2-base';
 import { MobileLayout } from './mobile-layout';
@@ -40,8 +41,10 @@ import * as events from '../base/constant';
     LayoutRender.prototype.initRender = function () {
-        if (this.parent.columns.length === 0) {
-            return;
+        if (!this.parent.isBlazorRender()) {
+            if (this.parent.columns.length === 0) {
+                return;
+            }
+            this.columnData = this.getColumnCards();
+            this.kanbanRows = this.getRows();
+            this.swimlaneData = this.getSwimlaneCards();
         }
-        this.columnData = this.getColumnCards();
-        this.kanbanRows = this.getRows();
-        this.swimlaneData = this.getSwimlaneCards();
         if (this.parent.isAdaptive) {
@@ -53,14 +56,16 @@ var parent_1 = this.parent.element.querySelector('.' + cls.CONTENT_CLASS);
         }
-        this.destroy();
-        this.parent.on(events.dataReady, this.initRender, this);
-        this.parent.on(events.contentReady, this.scrollUiUpdate, this);
-        if (this.parent.isAdaptive && this.parent.swimlaneSettings.keyField) {
-            this.renderSwimlaneHeader();
+        if (!this.parent.isBlazorRender()) {
+            this.destroy();
+            this.parent.on(events.dataReady, this.initRender, this);
+            this.parent.on(events.contentReady, this.scrollUiUpdate, this);
+            if (this.parent.isAdaptive && this.parent.swimlaneSettings.keyField) {
+                this.renderSwimlaneHeader();
+            }
+            var header = createElement('div', { className: cls.HEADER_CLASS });
+            this.parent.element.appendChild(header);
+            this.renderHeader(header);
+            this.renderContent();
+            this.renderCards();
+            this.renderValidation();
         }
-        var header = createElement('div', { className: cls.HEADER_CLASS });
-        this.parent.element.appendChild(header);
-        this.renderHeader(header);
-        this.renderContent();
-        this.renderCards();
-        this.renderValidation();
         this.parent.notify(events.contentReady, {});
@@ -72,3 +77,6 @@ this.wireEvents();
         header.appendChild(headerWrap);
-        var headerTable = createElement('table', { className: cls.TABLE_CLASS + ' ' + cls.HEADER_TABLE_CLASS });
+        var headerTable = createElement('table', {
+            className: cls.TABLE_CLASS + ' ' + cls.HEADER_TABLE_CLASS,
+            attrs: { 'role': 'presentation' }
+        });
         headerWrap.appendChild(headerTable);
@@ -124,3 +132,4 @@ this.renderColGroup(headerTable);
                 if (column.allowToggle) {
-                    var name_1 = (column.isExpanded && index === -1) ? cls.COLUMN_EXPAND_CLASS : cls.COLUMN_COLLAPSE_CLASS;
+                    var isExpand = (column.isExpanded && index === -1) ? true : false;
+                    var name_1 = (isExpand) ? cls.COLUMN_EXPAND_CLASS : cls.COLUMN_COLLAPSE_CLASS;
                     var icon = createElement('div', {
@@ -130,7 +139,9 @@ className: cls.HEADER_ICON_CLASS + ' ' + cls.ICON_CLASS + ' ' + name_1,
                     });
+                    icon.setAttribute('aria-label', isExpand ? column.keyField + ' Expand' : column.keyField + ' Collapse');
+                    th_1.setAttribute('aria-expanded', isExpand.toString());
                     headerWrapper.appendChild(icon);
                 }
-                var dataObj = [{ keyField: column.keyField, textField: column.headerText }];
+                var dataObj = [{ keyField: column.keyField, textField: column.headerText, count: noOfCard }];
                 var args = { data: dataObj, element: tr, cancel: false, requestType: 'headerRow' };
-                this_1.parent.trigger(events.columnRendered, args, function (columnArgs) {
+                this_1.parent.trigger(events.queryCellInfo, args, function (columnArgs) {
                     if (!columnArgs.cancel) {
@@ -153,3 +164,6 @@ tr.appendChild(th_1);
         content.appendChild(contentWrap);
-        var contentTable = createElement('table', { className: cls.TABLE_CLASS + ' ' + cls.CONTENT_TABLE_CLASS });
+        var contentTable = createElement('table', {
+            className: cls.TABLE_CLASS + ' ' + cls.CONTENT_TABLE_CLASS,
+            attrs: { 'role': 'presentation' }
+        });
         contentWrap.appendChild(contentTable);
@@ -173,3 +187,3 @@ this.renderColGroup(contentTable);
             className = isCollaspsed ? cls.CONTENT_ROW_CLASS + ' ' + cls.COLLAPSED_CLASS : cls.CONTENT_ROW_CLASS;
-            var tr = createElement('tr', { className: className });
+            var tr = createElement('tr', { className: className, attrs: { 'aria-expanded': 'true' } });
             if (this_2.parent.swimlaneSettings.keyField && !this_2.parent.isAdaptive) {
@@ -184,3 +198,4 @@ this_2.renderSwimlaneRow(tBody, row, isCollaspsed);
                     var td = createElement('td', {
-                        className: className_1, attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField }
+                        className: className_1,
+                        attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField, 'aria-expanded': 'true' }
                     });
@@ -190,7 +205,8 @@ if (column.allowToggle && !column.isExpanded || index !== -1) {
                         td.appendChild(createElement('div', { className: cls.COLLAPSE_HEADER_TEXT_CLASS, innerHTML: column.headerText }));
+                        td.setAttribute('aria-expanded', 'false');
                     }
                     tr.appendChild(td);
-                    var dataObj = [{ keyField: row.keyField, textField: row.textField }];
+                    var dataObj = [{ keyField: row.keyField, textField: row.textField, count: row.count }];
                     var args = { data: dataObj, element: tr, cancel: false, requestType: 'contentRow' };
-                    this_2.parent.trigger(events.columnRendered, args, function (columnArgs) {
+                    this_2.parent.trigger(events.queryCellInfo, args, function (columnArgs) {
                         if (!columnArgs.cancel) {
@@ -212,3 +228,8 @@ tBody.appendChild(tr);
         var className = isCollapsed ? ' ' + cls.COLLAPSED_CLASS : '';
-        var tr = createElement('tr', { className: name + className, attrs: { 'data-key': row.keyField } });
+        var tr = createElement('tr', {
+            className: name + className, attrs: {
+                'data-key': row.keyField,
+                'aria-expanded': (!isCollapsed).toString()
+            }
+        });
         var col = this.parent.columns.length - this.parent.actionModule.hideColumnKeys.length;
@@ -222,3 +243,8 @@ var td = createElement('td', {
         var iconClass = isCollapsed ? cls.SWIMLANE_ROW_COLLAPSE_CLASS : cls.SWIMLANE_ROW_EXPAND_CLASS;
-        var iconDiv = createElement('div', { className: cls.ICON_CLASS + ' ' + iconClass, attrs: { 'tabindex': '0' } });
+        var iconDiv = createElement('div', {
+            className: cls.ICON_CLASS + ' ' + iconClass, attrs: {
+                'tabindex': '0',
+                'aria-label': isCollapsed ? row.keyField + ' Collapse' : row.keyField + ' Expand'
+            }
+        });
         swimlaneHeader.appendChild(iconDiv);
@@ -248,5 +274,5 @@ var headerWrap = createElement('div', { className: cls.HEADER_WRAP_CLASS });
         tr.appendChild(td);
-        var dataObj = [{ keyField: row.keyField, textField: row.textField }];
+        var dataObj = [{ keyField: row.keyField, textField: row.textField, count: row.count }];
         var args = { data: dataObj, element: tr, cancel: false, requestType: 'swimlaneRow' };
-        this.parent.trigger(events.columnRendered, args, function (columnArgs) {
+        this.parent.trigger(events.queryCellInfo, args, function (columnArgs) {
             if (!columnArgs.cancel) {
@@ -279,4 +305,10 @@ tBody.appendChild(tr);
                             className: cls.CARD_CLASS + className,
-                            attrs: { 'data-id': data[_this.parent.cardSettings.headerField], 'data-key': data[_this.parent.keyField] }
+                            attrs: {
+                                'data-id': data[_this.parent.cardSettings.headerField], 'data-key': data[_this.parent.keyField],
+                                'aria-selected': 'false'
+                            }
                         });
+                        if (cardIndex !== -1) {
+                            cardElement.setAttribute('aria-selected', 'true');
+                        }
                         if (_this.parent.cardSettings.template) {
@@ -379,2 +411,8 @@ addClass([cardElement], cls.TEMPLATE_CLASS);
             }
+            kanbanRows.forEach(function (row) {
+                row.count = _this.parent.kanbanData.filter(function (obj) {
+                    return _this.columnKeys.indexOf(obj[_this.parent.keyField]) > -1 &&
+                        obj[_this.parent.swimlaneSettings.keyField] === row.keyField;
+                }).length;
+            });
         }
@@ -488,3 +526,3 @@ else {
         if (limits.childElementCount > 0) {
-            if (target.firstElementChild.classList.contains(cls.CARD_WRAPPER_CLASS)) {
+            if (target.querySelector('.' + cls.CARD_WRAPPER_CLASS)) {
                 target.insertBefore(limits, target.firstElementChild);
@@ -564,3 +602,14 @@ }
         removeClass(cards, cls.CARD_SELECTION_CLASS);
+        this.disableAttributeSelection(cards);
     };
+    LayoutRender.prototype.disableAttributeSelection = function (cards) {
+        if (cards instanceof Element) {
+            cards.setAttribute('aria-selected', 'false');
+        }
+        else {
+            cards.forEach(function (card) {
+                card.setAttribute('aria-selected', 'false');
+            });
+        }
+    };
     LayoutRender.prototype.getColumnCards = function (data) {
@@ -567,0 +616,0 @@ var _this = this;

src/kanban/base/type.d.ts

@@ -9,2 +9,5 @@ /**
 };
+/**
+
+ */
 export declare type CurrentAction = 'Add' | 'Edit' | 'Delete';
@@ -14,1 +17,2 @@ export declare type SelectionType = 'None' | 'Single' | 'Multiple';
 export declare type ConstraintType = 'Column' | 'Swimlane';
+export declare type DialogFieldType = 'String' | 'Numeric' | 'TextArea' | 'DropDown' | 'Input' | 'TextBox';

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

@@ -29,2 +29,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SelectionType } from '../base/type';
      * @default null
+
      */
@@ -31,0 +32,0 @@ template?: string;

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

@@ -25,2 +25,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @default null
+
      */
@@ -27,0 +28,0 @@ template: string;

src/kanban/models/columns-model.d.ts

@@ -23,2 +23,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';
      * @default null
+
      */
@@ -42,2 +43,5 @@ template?: string;
      * @default null
+     * @aspType int
+     * @blazorType int
+     * @isBlazorNullableType true
      */
@@ -49,2 +53,5 @@ minCount?: number;
      * @default null
+     * @aspType int
+     * @blazorType int
+     * @isBlazorNullableType true
      */
@@ -55,3 +62,3 @@ maxCount?: number;
      * Enable or disable card count in column
-     * @default false
+     * @default true
      */
@@ -58,0 +65,0 @@ showItemCount?: boolean;

src/kanban/models/columns.d.ts

@@ -19,2 +19,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @default null
+
      */
@@ -35,2 +36,5 @@ template: string;
      * @default null
+     * @aspType int
+     * @blazorType int
+     * @isBlazorNullableType true
      */
@@ -41,2 +45,5 @@ minCount: number;
      * @default null
+     * @aspType int
+     * @blazorType int
+     * @isBlazorNullableType true
      */
@@ -46,5 +53,5 @@ maxCount: number;
      * Enable or disable card count in column
-     * @default false
+     * @default true
      */
     showItemCount: boolean;
 }

src/kanban/models/columns.js

@@ -51,3 +51,3 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
-        Property(false)
+        Property(true)
     ], Columns.prototype, "showItemCount", void 0);
@@ -54,0 +54,0 @@ return Columns;

src/kanban/models/index.d.ts

@@ -8,1 +8,3 @@ /**
 export * from './stacked-headers-model';
+export * from './dialog-settings-model';
+export * from './dialog-fields-model';

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

@@ -41,2 +41,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SortType } from '../base/type';
      * @default null
+
      */
@@ -43,0 +44,0 @@ template?: string;

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

@@ -35,2 +35,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @default null
+
      */
@@ -37,0 +38,0 @@ template: string;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2308531

increased by22.85%

Number of package files

134

increased by6.35%

Lines of code

25292

increased by27.8%

Worsened metrics

Dependency count

8

increased by60%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@syncfusion/ej2-buttons@~18.1.36-beta

• + Added@syncfusion/ej2-dropdowns@~18.1.36-beta

• + Added@syncfusion/ej2-inputs@~18.1.36-beta

• + Added@syncfusion/ej2-base@18.1.57(transitive)

• + Added@syncfusion/ej2-buttons@18.1.56(transitive)

• + Added@syncfusion/ej2-data@18.1.55(transitive)

• + Added@syncfusion/ej2-dropdowns@18.1.59(transitive)

• + Added@syncfusion/ej2-icons@18.1.52(transitive)

• + Added@syncfusion/ej2-inputs@18.1.59(transitive)

• + Added@syncfusion/ej2-layouts@18.1.52(transitive)

• + Added@syncfusion/ej2-lists@18.1.53(transitive)

• + Added@syncfusion/ej2-navigations@18.1.57(transitive)

• + Added@syncfusion/ej2-popups@18.1.57(transitive)

• + Added@syncfusion/ej2-splitbuttons@18.1.52(transitive)

• - Removed@syncfusion/ej2-base@17.4.51(transitive)

• - Removed@syncfusion/ej2-buttons@17.4.51(transitive)

• - Removed@syncfusion/ej2-data@17.4.51(transitive)

• - Removed@syncfusion/ej2-icons@17.4.51(transitive)

• - Removed@syncfusion/ej2-inputs@17.4.55(transitive)

• - Removed@syncfusion/ej2-layouts@17.4.51(transitive)

• - Removed@syncfusion/ej2-lists@17.4.51(transitive)

• - Removed@syncfusion/ej2-navigations@17.4.55(transitive)

• - Removed@syncfusion/ej2-popups@17.4.51(transitive)

• - Removed@syncfusion/ej2-splitbuttons@17.4.55(transitive)

• Updated@syncfusion/ej2-base@~18.1.36-beta

• Updated@syncfusion/ej2-data@~18.1.36-beta

• Updated@syncfusion/ej2-layouts@~18.1.36-beta

• Updated@syncfusion/ej2-navigations@~18.1.36-beta

• Updated@syncfusion/ej2-popups@~18.1.36-beta