Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@syncfusion/ej2-kanban

Package Overview
Dependencies
Maintainers
3
Versions
105
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-kanban - npm Package Compare versions

Comparing version 18.3.53 to 18.4.30

15

CHANGELOG.md

@@ -7,2 +7,17 @@ # Changelog

#### New Features
- Provided workflow support that determines transitions of card from one column to another in Kanban.
- Provided support to prevent dragging and dropping the cards on particular column.
- Provided auto scroll support when drag and drop the cards between columns.
- Provided custom sorting option for swimlane rows based on user choice.
#### Breaking Changes
- In `sortSettings` the default value of `sortBy` property has changed to `Index` from `DataSourceOrder`.
## 18.3.53 (2020-12-08)
### Kanban
#### Bug Fixes

@@ -9,0 +24,0 @@

2

dist/global/index.d.ts
/*!
* filename: index.d.ts
* version : 18.3.53
* version : 18.4.30
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.

@@ -5,0 +5,0 @@ * Use of this code is subject to the terms of our license.

28

package.json
{
"_from": "@syncfusion/ej2-kanban@*",
"_id": "@syncfusion/ej2-kanban@18.3.52",
"_id": "@syncfusion/ej2-kanban@0.21.1",
"_inBundle": false,
"_integrity": "sha512-TTabo0kIJhr1N0x6xMapTJnEXsrlkAsXi01E9XQ/RnWEIYd2cIkE/v59QI/NsxsXUWVZmswL20i4dfiiEBWsQg==",
"_integrity": "sha512-1pA+mde6it4d+mFIsiXGR1vA0G1wa9zXg41nQdhgV2Mnemesvb6ZA0j33RXZe7htOlmWkCxExiVN8kQMqgzQOw==",
"_location": "/@syncfusion/ej2-kanban",

@@ -26,6 +26,6 @@ "_phantomChildren": {},

],
"_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-kanban/-/ej2-kanban-18.3.52.tgz",
"_shasum": "caf62290b477900f0ae5b0bba00b005d551e9d1c",
"_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-kanban/-/ej2-kanban-0.21.1.tgz",
"_shasum": "1806d09541bde45ca2ec48c2e7142c8e01643cfd",
"_spec": "@syncfusion/ej2-kanban@*",
"_where": "/jenkins/workspace/automation_release_18.1.0.1-52JLNOGRCDHXRVQM3W564VPLFCPHWUYDYU3I3DVRABSR7F6AIFYQ/packages/included",
"_where": "/jenkins/workspace/automation_release_18.4.0.1-WOJ6QVY6EU5ONBWOYGQFKS2VU2UW7E67MOXUPKCE5AX7QQX7M5JQ/packages/included",
"author": {

@@ -39,10 +39,10 @@ "name": "Syncfusion Inc."

"dependencies": {
"@syncfusion/ej2-base": "~18.3.52",
"@syncfusion/ej2-buttons": "~18.3.47",
"@syncfusion/ej2-data": "~18.3.47",
"@syncfusion/ej2-dropdowns": "~18.3.53",
"@syncfusion/ej2-inputs": "~18.3.53",
"@syncfusion/ej2-layouts": "~18.3.53",
"@syncfusion/ej2-navigations": "~18.3.53",
"@syncfusion/ej2-popups": "~18.3.52"
"@syncfusion/ej2-base": "~18.4.30",
"@syncfusion/ej2-buttons": "~18.4.30",
"@syncfusion/ej2-data": "~18.4.30",
"@syncfusion/ej2-dropdowns": "~18.4.30",
"@syncfusion/ej2-inputs": "~18.4.30",
"@syncfusion/ej2-layouts": "~18.4.30",
"@syncfusion/ej2-navigations": "~18.4.30",
"@syncfusion/ej2-popups": "~18.4.30"
},

@@ -75,4 +75,4 @@ "deprecated": false,

"typings": "index.d.ts",
"version": "18.3.53",
"version": "18.4.30",
"sideEffects": false
}

2

src/kanban/actions/dialog.js

@@ -99,3 +99,3 @@ import { append, createElement, remove, isNullOrUndefined, closest, extend } from '@syncfusion/ej2-base';

];
if (this.parent.sortSettings.sortBy !== 'DataSourceOrder') {
if (this.parent.sortSettings.field) {
fields.splice(fields.length - 1, 0, { key: this.parent.sortSettings.field, type: 'TextBox' });

@@ -102,0 +102,0 @@ }

2

src/kanban/actions/drag.d.ts

@@ -24,2 +24,4 @@ import { Kanban } from '../base/kanban';

private multiCloneCreate;
private allowedTransition;
private cellDropping;
private addDropping;

@@ -26,0 +28,0 @@ private dragStop;

182

src/kanban/actions/drag.js

@@ -124,3 +124,4 @@ import { Draggable, formatUnit, createElement, isNullOrUndefined, addClass, closest } from '@syncfusion/ej2-base';

var target = cardElement || e.target;
var selector = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + ') .' + cls.CONTENT_CELLS_CLASS;
var selector = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + ') .' + cls.CONTENT_CELLS_CLASS
+ '.' + cls.DROPPABLE_CLASS;
var contentCell = closest(target, selector);

@@ -168,3 +169,3 @@ this.calculateArgs(e);

}
else if (keys.length > 1) {
else if (keys.length > 1 && contentCell.classList.contains(cls.DROPPING_CLASS)) {
this.multiCloneCreate(keys, contentCell);

@@ -174,3 +175,5 @@ }

}
this.addDropping();
if (this.parent.element.querySelectorAll('.' + cls.DROPPING_CLASS).length === 0) {
this.cellDropping();
}
var isCollapsed = false;

@@ -193,3 +196,4 @@ if (contentCell) {

if (multiKeyTarget) {
var columnKeys = [].slice.call(this.parent.element.querySelectorAll('.' + cls.MULTI_COLUMN_KEY_CLASS)).filter(function (element) { return _this.getColumnKey(element) === _this.getColumnKey(multiKeyTarget); });
var columnKeys = [].slice.call(this.parent.element.querySelectorAll('.' + cls.MULTI_COLUMN_KEY_CLASS + ':not(.' +
cls.DISABLED_CLASS + ')')).filter(function (element) { return _this.getColumnKey(element) === _this.getColumnKey(multiKeyTarget); });
if (columnKeys.length > 0) {

@@ -202,12 +206,6 @@ addClass(columnKeys, cls.MULTI_ACTIVE_CLASS);

}
document.body.style.cursor = contentCell ? '' : 'not-allowed';
if (this.parent.swimlaneSettings.keyField && !this.parent.swimlaneSettings.allowDragAndDrop) {
var dragElement = closest(this.dragObj.element, '.' + cls.CONTENT_ROW_CLASS);
var classSelector = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + ')';
var dropElement = closest(target, classSelector);
if (dragElement && dropElement) {
if (dragElement.rowIndex !== dropElement.rowIndex) {
document.body.style.cursor = 'not-allowed';
}
}
document.body.style.cursor = (contentCell && contentCell.classList.contains(cls.DROPPING_CLASS)) ? '' : 'not-allowed';
if (cardElement && !(closest(cardElement, '.' + cls.CONTENT_CELLS_CLASS)).classList.contains(cls.DROPPING_CLASS)) {
cardElement.style.cursor = 'not-allowed';
document.body.style.cursor = 'not-allowed';
}

@@ -243,5 +241,13 @@ if (document.body.style.cursor === 'not-allowed') {

var key = keys_1[_i];
var colKey = createElement('div', { className: cls.MULTI_COLUMN_KEY_CLASS, attrs: { 'data-key': key.trim() } });
var dragCell = closest(this.dragObj.draggedClone, '.' + cls.CONTENT_CELLS_CLASS);
var transition = this.parent.columns[dragCell.cellIndex].transitionColumns;
var allowTransition = this.allowedTransition(this.dragObj.element.getAttribute('data-key'), key, transition);
var name_1 = allowTransition ? '' : ' ' + cls.DISABLED_CLASS;
var colKey = createElement('div', {
className: cls.MULTI_COLUMN_KEY_CLASS + name_1,
attrs: { 'data-key': key.trim() }
});
var text = createElement('div', { className: 'e-text', innerHTML: key.trim() });
contentCell.appendChild(this.dragObj.targetCloneMulti).appendChild(colKey).appendChild(text);
colKey.style.cursor = allowTransition ? '' : 'not-allowed';
colKey.style.lineHeight = colKey.style.height = formatUnit((offsetHeight / keys.length));

@@ -251,18 +257,54 @@ text.style.top = formatUnit((offsetHeight / 2) - (text.offsetHeight / 2));

};
DragAndDrop.prototype.addDropping = function () {
DragAndDrop.prototype.allowedTransition = function (currentCardKey, targetCardKey, allowedKey) {
var allowTransition = true;
var targetKey = targetCardKey.split(',');
for (var i = 0; i < targetKey.length; i++) {
if (currentCardKey === targetKey[i].trim()) {
return true;
}
if (allowedKey) {
if (allowedKey.length === 1 && allowedKey[0].length === 0) {
return true;
}
for (var j = 0; j < allowedKey.length; j++) {
if (targetKey[i].trim() === allowedKey[j].trim()) {
return true;
}
else {
allowTransition = false;
}
}
}
}
return allowTransition;
};
DragAndDrop.prototype.cellDropping = function () {
var _this = this;
var dragCell = closest(this.dragObj.draggedClone, '.' + cls.CONTENT_CELLS_CLASS);
var dragRow = closest(this.dragObj.draggedClone, '.' + cls.CONTENT_ROW_CLASS);
this.addDropping(dragRow, dragCell);
if (dragCell && dragCell.classList.contains(cls.DROP_CLASS)) {
addClass([dragCell], cls.DROPPING_CLASS);
}
if (this.parent.swimlaneSettings.keyField && this.parent.swimlaneSettings.allowDragAndDrop) {
var className = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + '):not(.' + cls.COLLAPSED_CLASS + ')';
var cells = [].slice.call(this.parent.element.querySelectorAll(className + ' .' + cls.CONTENT_CELLS_CLASS));
cells.forEach(function (cell) { return addClass([cell], cls.DROPPING_CLASS); });
var rows = [].slice.call(this.parent.element.querySelectorAll(className));
[].slice.call(rows).forEach(function (row) {
if (dragRow !== row) {
_this.addDropping(row, dragCell);
}
});
}
else {
var row = closest(this.dragObj.draggedClone, '.' + cls.CONTENT_ROW_CLASS);
if (row) {
[].slice.call(row.children).forEach(function (cell) { return addClass([cell], cls.DROPPING_CLASS); });
}
};
DragAndDrop.prototype.addDropping = function (dragRow, dragCell) {
var _this = this;
if (dragCell && dragRow) {
[].slice.call(dragRow.children).forEach(function (cell) {
var transition = _this.parent.columns[dragCell.cellIndex].transitionColumns;
if (cell !== dragCell && cell.classList.contains(cls.DROP_CLASS) &&
_this.allowedTransition(dragCell.getAttribute('data-key'), cell.getAttribute('data-key'), transition)) {
addClass([cell], cls.DROPPING_CLASS);
}
});
}
var cell = closest(this.dragObj.draggedClone, '.' + cls.CONTENT_CELLS_CLASS);
if (cell) {
removeClass([cell], cls.DROPPING_CLASS);
}
};

@@ -280,3 +322,3 @@ DragAndDrop.prototype.dragStop = function (e) {

if (this.parent.element.querySelector('.' + cls.TARGET_MULTI_CLONE_CLASS)) {
columnKey = closest(e.target, '.' + cls.MULTI_COLUMN_KEY_CLASS);
columnKey = closest(e.target, '.' + cls.MULTI_COLUMN_KEY_CLASS + ':not(.' + cls.DISABLED_CLASS + ')');
}

@@ -302,3 +344,6 @@ if (contentCell || columnKey) {

}
var dragArgs = { cancel: false, data: this.dragObj.modifiedData, event: e, element: this.dragObj.selectedCards };
var dragArgs = {
cancel: false, data: this.dragObj.modifiedData, event: e, element: this.dragObj.selectedCards,
dropIndex: dropIndex
};
this.parent.trigger(events.dragStop, dragArgs, function (dragEventArgs) {

@@ -318,2 +363,4 @@ _this.removeElement(_this.dragObj.draggedClone);

}
var styleCards = [].slice.call(_this.parent.element.querySelectorAll('.' + cls.CARD_CLASS + '[style]'));
styleCards.forEach(function (styleCard) { styleCard.style.cursor = ''; });
var className = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + ')';

@@ -327,3 +374,3 @@ var cells = [].slice.call(_this.parent.element.querySelectorAll(className + ' .' + cls.CONTENT_CELLS_CLASS));

dragEventArgs.data[0];
_this.parent.crudModule.updateCard(updateCard, dropIndex);
_this.parent.crudModule.updateCard(updateCard, dragEventArgs.dropIndex);
}

@@ -374,18 +421,20 @@ }

}
var obj = this.parent.getCardDetails(element);
var keyIndex = obj[this.parent.sortSettings.field];
if (modifieddata.length > 1 && this.parent.sortSettings.direction === 'Descending') {
modifieddata = modifieddata.reverse();
if (element.classList.contains(cls.CARD_CLASS)) {
var obj = this.parent.getCardDetails(element);
var keyIndex_1 = obj[this.parent.sortSettings.field];
if (modifieddata.length > 1 && this.parent.sortSettings.direction === 'Descending') {
modifieddata = modifieddata.reverse();
}
modifieddata.forEach(function (data, index) {
if (prevele) {
data[_this.parent.sortSettings.field] = ++keyIndex_1;
}
else if (keyIndex_1 !== 1 && index <= data[_this.parent.sortSettings.field]) {
data[_this.parent.sortSettings.field] = --keyIndex_1;
}
else if (keyIndex_1 === 1) {
data[_this.parent.sortSettings.field] = index + 1;
}
});
}
modifieddata.forEach(function (data, index) {
if (prevele) {
data[_this.parent.sortSettings.field] = ++keyIndex;
}
else if (keyIndex !== 1 && index <= data[_this.parent.sortSettings.field]) {
data[_this.parent.sortSettings.field] = --keyIndex;
}
else if (keyIndex === 1) {
data[_this.parent.sortSettings.field] = index + 1;
}
});
};

@@ -449,10 +498,6 @@ DragAndDrop.prototype.toggleVisible = function (target, tColumn) {

if (isNullOrUndefined(this.dragObj.navigationInterval)) {
this.dragObj.navigationInterval = window.setInterval(function () {
if (_this.autoScrollValidation(e)) {
_this.autoScroll();
}
}, 100);
this.dragObj.navigationInterval = window.setInterval(function () { _this.autoScroll(); }, 100);
}
};
DragAndDrop.prototype.autoScrollValidation = function (e) {
DragAndDrop.prototype.autoScrollValidation = function () {
var pageY = this.dragObj.pageY;

@@ -462,20 +507,23 @@ var pageX = this.dragObj.pageX;

var dragEdges = { left: false, right: false, top: false, bottom: false };
if (this.dragObj.pageY - window.scrollY < (autoScrollDistance + 36)) {
var viewBoundaries = this.parent.element.querySelector('.' + cls.CONTENT_CLASS).getBoundingClientRect();
if ((pageY < viewBoundaries.top + autoScrollDistance + window.pageYOffset) &&
(pageY > viewBoundaries.top + window.pageYOffset)) {
dragEdges.top = true;
}
if ((pageY > (window.innerHeight - autoScrollDistance) + window.pageYOffset) &&
(pageY < window.innerHeight + window.pageYOffset)) {
if ((pageY > (viewBoundaries.bottom - autoScrollDistance) + window.pageYOffset) &&
(pageY < viewBoundaries.bottom + window.pageYOffset)) {
dragEdges.bottom = true;
}
if ((pageX < 0 + autoScrollDistance + window.pageXOffset) && (pageX > 0 + window.pageXOffset)) {
if ((pageX < viewBoundaries.left + autoScrollDistance + window.pageXOffset) &&
(pageX > viewBoundaries.left + window.pageXOffset)) {
dragEdges.left = true;
}
if ((pageX > (window.innerWidth - autoScrollDistance) + window.pageXOffset) &&
(pageX < window.innerWidth + window.pageXOffset)) {
if ((pageX > (viewBoundaries.right - autoScrollDistance) + window.pageXOffset) &&
(pageX < viewBoundaries.right + window.pageXOffset)) {
dragEdges.right = true;
}
this.dragEdges = dragEdges;
return dragEdges.bottom || dragEdges.top || dragEdges.left || dragEdges.right;
};
DragAndDrop.prototype.autoScroll = function () {
this.autoScrollValidation();
var scrollSensitivity = 30;

@@ -513,2 +561,20 @@ if (this.parent.isAdaptive) {

else {
var parent_2 = this.parent.element.querySelector('.' + cls.CONTENT_CLASS);
var column = this.dragObj.targetClone.parentElement;
var yScrollable = parent_2.offsetHeight <= parent_2.scrollHeight;
var xScrollable = parent_2.offsetWidth <= parent_2.scrollWidth;
var yBounds = yScrollable && parent_2.scrollTop >= 0 && parent_2.scrollTop + parent_2.offsetHeight <= parent_2.scrollHeight;
var xBounds = xScrollable && parent_2.scrollLeft >= 0 && parent_2.scrollLeft + parent_2.offsetWidth <= parent_2.scrollWidth;
if (yBounds && (this.dragEdges.top || this.dragEdges.bottom)) {
parent_2.scrollTop += this.dragEdges.top ? -scrollSensitivity : scrollSensitivity;
if (column) {
column.scrollTop += this.dragEdges.top ? -scrollSensitivity : scrollSensitivity;
}
}
if (xBounds && (this.dragEdges.left || this.dragEdges.right)) {
parent_2.scrollLeft += this.dragEdges.left ? -scrollSensitivity : scrollSensitivity;
if (column) {
column.scrollLeft += this.dragEdges.left ? -scrollSensitivity : scrollSensitivity;
}
}
if (this.dragObj.pageY - window.scrollY < scrollSensitivity) {

@@ -515,0 +581,0 @@ window.scrollTo(window.scrollX, window.scrollY - scrollSensitivity);

10

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

@@ -65,2 +65,10 @@ /**

/** @hidden */
export declare const DROPPABLE_CLASS: string;
/** @hidden */
export declare const DRAG_CLASS: string;
/** @hidden */
export declare const DROP_CLASS: string;
/** @hidden */
export declare const DISABLED_CLASS: string;
/** @hidden */
export declare const CARD_HEADER_CLASS: string;

@@ -84,2 +92,4 @@ /** @hidden */

/** @hidden */
export declare const EMPTY_CARD_CLASS: string;
/** @hidden */
export declare const CARD_FOOTER_CSS_CLASS: string;

@@ -86,0 +96,0 @@ /** @hidden */

10

src/kanban/base/css-constant.js

@@ -65,2 +65,10 @@ /**

/** @hidden */
export var DROPPABLE_CLASS = 'e-droppable';
/** @hidden */
export var DRAG_CLASS = 'e-drag';
/** @hidden */
export var DROP_CLASS = 'e-drop';
/** @hidden */
export var DISABLED_CLASS = 'e-disabled';
/** @hidden */
export var CARD_HEADER_CLASS = 'e-card-header';

@@ -84,2 +92,4 @@ /** @hidden */

/** @hidden */
export var EMPTY_CARD_CLASS = 'e-empty-card';
/** @hidden */
export var CARD_FOOTER_CSS_CLASS = 'e-card-footer-css';

@@ -86,0 +96,0 @@ /** @hidden */

7

src/kanban/base/data.js
import { extend } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import * as events from './constant';
import * as cls from '../base/css-constant';
/**

@@ -155,3 +154,2 @@ * Kanban data module

var _this = this;
var field;
this.parent.layoutModule.columnData = this.parent.layoutModule.getColumnCards();

@@ -165,7 +163,4 @@ if (this.parent.swimlaneSettings.keyField) {

args.changedRecords.forEach(function (data) {
var card = [].slice.call(_this.parent.element
.querySelectorAll('.' + cls.CARD_CLASS + '[data-id="' + data[_this.parent.cardSettings.headerField] + '"]'));
var updateIndex = [].slice.call(card[0].parentElement.children).indexOf(card[0]);
_this.parent.layoutModule.removeCard(data);
_this.parent.layoutModule.renderCardBasedOnIndex(data, updateIndex);
_this.parent.layoutModule.renderCardBasedOnIndex(data, index);
if (_this.parent.sortSettings.field && _this.parent.sortSettings.sortBy === 'Index'

@@ -172,0 +167,0 @@ && _this.parent.sortSettings.direction === 'Descending' && index > 0) {

2

src/kanban/base/interface.d.ts

@@ -78,2 +78,4 @@ import { BaseEventArgs, Draggable } from '@syncfusion/ej2-base';

cancel?: boolean;
/** Defines the dropped card position. */
dropIndex?: number;
}

@@ -80,0 +82,0 @@ /**

2

src/kanban/base/kanban.d.ts

@@ -362,3 +362,3 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';

[key: string]: Object;
}[]): void;
}[], index?: number): void;
/**

@@ -365,0 +365,0 @@ * Deletes the card based on the provided ID or card collection in the argument list.

7

src/kanban/base/kanban.js

@@ -87,3 +87,4 @@ var __extends = (this && this.__extends) || (function () {

no: 'No',
close: 'Close'
close: 'Close',
noCard: 'No cards to display'
};

@@ -429,4 +430,4 @@ this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale);

*/
Kanban.prototype.updateCard = function (cardData) {
this.crudModule.updateCard(cardData);
Kanban.prototype.updateCard = function (cardData, index) {
this.crudModule.updateCard(cardData, index);
};

@@ -433,0 +434,0 @@ /**

2

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

@@ -33,4 +33,6 @@ import { Kanban } from '../base/kanban';

private renderCard;
private renderEmptyCard;
private renderColGroup;
private getRows;
private swimlaneSorting;
private createStackedRow;

@@ -37,0 +39,0 @@ private scrollUiUpdate;

100

src/kanban/base/layout-render.js

@@ -14,4 +14,3 @@ var __extends = (this && this.__extends) || (function () {

})();
import { append, createElement, formatUnit, EventHandler, addClass, remove, extend, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
import { removeClass, closest } from '@syncfusion/ej2-base';
import { append, createElement, formatUnit, EventHandler, addClass, remove, extend, Browser, isNullOrUndefined, removeClass, closest } from '@syncfusion/ej2-base';
import { MobileLayout } from './mobile-layout';

@@ -189,4 +188,6 @@ import * as events from '../base/constant';

var className_1 = index === -1 ? cls.CONTENT_CELLS_CLASS : cls.CONTENT_CELLS_CLASS + ' ' + cls.COLLAPSED_CLASS;
var dragClass = (column.allowDrag ? ' ' + cls.DRAG_CLASS : '') + (column.allowDrop ? ' ' + cls.DROP_CLASS
+ ' ' + cls.DROPPABLE_CLASS : '');
var td = createElement('td', {
className: className_1,
className: className_1 + dragClass,
attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField, 'aria-expanded': 'true', 'tabindex': '0' }

@@ -298,21 +299,26 @@ });

columnWrapper.appendChild(cardWrapper_1);
var _loop_4 = function (data) {
var cardText = data[_this.parent.cardSettings.headerField];
var cardIndex = _this.parent.actionModule.selectionArray.indexOf(cardText);
var cardElement = _this.renderCard(data);
if (cardIndex !== -1) {
cardElement.setAttribute('aria-selected', 'true');
addClass([cardElement], cls.CARD_SELECTION_CLASS);
if (columnData.length > 0) {
var _loop_4 = function (data) {
var cardText = data[_this.parent.cardSettings.headerField];
var cardIndex = _this.parent.actionModule.selectionArray.indexOf(cardText);
var cardElement = _this.renderCard(data);
if (cardIndex !== -1) {
cardElement.setAttribute('aria-selected', 'true');
addClass([cardElement], cls.CARD_SELECTION_CLASS);
}
var args = { data: data, element: cardElement, cancel: false };
_this.parent.trigger(events.cardRendered, args, function (cardArgs) {
if (!cardArgs.cancel) {
cardWrapper_1.appendChild(cardElement);
}
});
};
for (var _i = 0, _a = columnData; _i < _a.length; _i++) {
var data = _a[_i];
_loop_4(data);
}
var args = { data: data, element: cardElement, cancel: false };
_this.parent.trigger(events.cardRendered, args, function (cardArgs) {
if (!cardArgs.cancel) {
cardWrapper_1.appendChild(cardElement);
}
});
};
for (var _i = 0, _a = columnData; _i < _a.length; _i++) {
var data = _a[_i];
_loop_4(data);
}
else {
cardWrapper_1.appendChild(_this.renderEmptyCard());
}
}

@@ -396,2 +402,9 @@ };

};
LayoutRender.prototype.renderEmptyCard = function () {
var emptyCard = createElement('span', {
className: cls.EMPTY_CARD_CLASS,
innerHTML: this.parent.localeObj.getConstant('noCard')
});
return emptyCard;
};
LayoutRender.prototype.renderColGroup = function (table) {

@@ -442,10 +455,3 @@ var _this = this;

});
kanbanRows.sort(function (firstRow, secondRow) {
var first = firstRow.textField.toLowerCase();
var second = secondRow.textField.toLowerCase();
return (first > second) ? 1 : (second > first) ? -1 : 0;
});
if (this.parent.swimlaneSettings.sortDirection === 'Descending') {
kanbanRows.reverse();
}
kanbanRows = this.swimlaneSorting(kanbanRows);
kanbanRows.forEach(function (row) {

@@ -466,2 +472,14 @@ row.count = _this.parent.kanbanData.filter(function (obj) {

};
LayoutRender.prototype.swimlaneSorting = function (rows) {
if (this.parent.swimlaneSettings.sortComparer) {
rows = this.parent.swimlaneSettings.sortComparer.call(this.parent, rows);
}
else {
rows.sort(function (a, b) { return a.textField.localeCompare(b.textField, undefined, { numeric: true }); });
if (this.parent.swimlaneSettings.sortDirection === 'Descending') {
rows.reverse();
}
}
return rows;
};
LayoutRender.prototype.createStackedRow = function (rows) {

@@ -822,5 +840,10 @@ var tr = createElement('tr', { className: cls.HEADER_ROW_CLASS + ' ' + cls.STACKED_HEADER_ROW_CLASS });

var cardWrapper_2 = td.querySelector('.' + cls.CARD_WRAPPER_CLASS);
var emptyCard = cardWrapper_2.querySelector('.' + cls.EMPTY_CARD_CLASS);
if (emptyCard) {
remove(emptyCard);
}
var cardElement_1 = this.renderCard(data);
if (this.parent.allowDragAndDrop) {
addClass([cardElement_1], cls.DRAGGABLE_CLASS);
if (this.parent.allowDragAndDrop && td.classList.contains(cls.DRAG_CLASS)) {
this.parent.dragAndDropModule.wireDragEvents(cardElement_1);
addClass([cardElement_1], cls.DROPPABLE_CLASS);
}

@@ -843,5 +866,9 @@ var args = { data: data, element: cardElement_1, cancel: false };

var cardElement = this.parent.element.querySelector("." + cls.CARD_CLASS + "[data-id=\"" + cardKey + "\"]");
var cardContainer = cardElement.parentElement;
if (cardElement) {
remove(cardElement);
}
if (cardContainer.childElementCount === 0) {
cardContainer.appendChild(this.renderEmptyCard());
}
};

@@ -887,9 +914,16 @@ LayoutRender.prototype.wireEvents = function () {

LayoutRender.prototype.wireDragEvent = function () {
var _this = this;
if (this.parent.allowDragAndDrop) {
addClass(this.parent.element.querySelectorAll('.' + cls.CARD_CLASS), cls.DRAGGABLE_CLASS);
this.parent.dragAndDropModule.wireDragEvents(this.parent.element.querySelector('.' + cls.CONTENT_CLASS));
var cards = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_CELLS_CLASS
+ '.' + cls.DRAG_CLASS + ' .' + cls.CARD_CLASS));
addClass(cards, cls.DROPPABLE_CLASS);
cards.forEach(function (card) { return _this.parent.dragAndDropModule.wireDragEvents(card); });
}
};
LayoutRender.prototype.unWireDragEvent = function () {
this.parent.dragAndDropModule.unWireDragEvents(this.parent.element.querySelector('.' + cls.CONTENT_CLASS));
var _this = this;
var cards = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_CELLS_CLASS
+ '.' + cls.DRAG_CLASS + ' .' + cls.CARD_CLASS));
removeClass(cards, cls.DROPPABLE_CLASS);
cards.forEach(function (card) { return _this.parent.dragAndDropModule.unWireDragEvents(card); });
};

@@ -896,0 +930,0 @@ LayoutRender.prototype.destroy = function () {

18

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

@@ -64,2 +64,20 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';

/**
* Enable or disable column drag
* @default true
*/
allowDrag?: boolean;
/**
* Enable or disable column drop
* @default true
*/
allowDrop?: boolean;
/**
* Defines the column transition
* @default []
*/
transitionColumns?: string[];
}

15

src/kanban/models/columns.d.ts

@@ -53,2 +53,17 @@ import { ChildProperty } from '@syncfusion/ej2-base';

showAddButton: boolean;
/**
* Enable or disable column drag
* @default true
*/
allowDrag: boolean;
/**
* Enable or disable column drop
* @default true
*/
allowDrop: boolean;
/**
* Defines the column transition
* @default []
*/
transitionColumns: string[];
}

9

src/kanban/models/columns.js

@@ -56,4 +56,13 @@ var __extends = (this && this.__extends) || (function () {

], Columns.prototype, "showAddButton", void 0);
__decorate([
Property(true)
], Columns.prototype, "allowDrag", void 0);
__decorate([
Property(true)
], Columns.prototype, "allowDrop", void 0);
__decorate([
Property([])
], Columns.prototype, "transitionColumns", void 0);
return Columns;
}(ChildProperty));
export { Columns };

2

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

@@ -13,3 +13,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SortDirection, SortOrderBy } from '../base/type';

* * Custom
* @default 'DataSourceOrder'
* @default 'Index'
*/

@@ -16,0 +16,0 @@ sortBy?: SortOrderBy;

2

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

@@ -12,3 +12,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';

* * Custom
* @default 'DataSourceOrder'
* @default 'Index'
*/

@@ -15,0 +15,0 @@ sortBy: SortOrderBy;

2

src/kanban/models/sort-settings.js

@@ -30,3 +30,3 @@ var __extends = (this && this.__extends) || (function () {

__decorate([
Property('DataSourceOrder')
Property('Index')
], SortSettings.prototype, "sortBy", void 0);

@@ -33,0 +33,0 @@ __decorate([

7

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

@@ -53,2 +53,9 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SortDirection } from '../base/type';

/**
* Defines the custom sort comparer function.
* The sort comparer function has the same functionality like
* [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
*/
sortComparer?: Function;
/**
* Enable or disable unassigned swimlane group

@@ -55,0 +62,0 @@ * @default true

6

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

@@ -45,2 +45,8 @@ import { ChildProperty } from '@syncfusion/ej2-base';

/**
* Defines the custom sort comparer function.
* The sort comparer function has the same functionality like
* [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
*/
sortComparer: Function;
/**
* Enable or disable unassigned swimlane group

@@ -47,0 +53,0 @@ * @default true

3

src/kanban/models/swimlane-settings.js

@@ -51,2 +51,5 @@ var __extends = (this && this.__extends) || (function () {

__decorate([
Property()
], SwimlaneSettings.prototype, "sortComparer", void 0);
__decorate([
Property(true)

@@ -53,0 +56,0 @@ ], SwimlaneSettings.prototype, "showUnassignedRow", void 0);

dist/ej2-kanban.umd.min.js

Sorry, the diff of this file is too big to display

dist/ej2-kanban.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-kanban.es2015.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-kanban.es2015.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-kanban.es5.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-kanban.es5.js.map

Sorry, the diff of this file is not supported yet

dist/global/ej2-kanban.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-kanban.min.js.map

Sorry, the diff of this file is not supported yet

styles/bootstrap-dark.css

Sorry, the diff of this file is not supported yet

styles/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/bootstrap4.css

Sorry, the diff of this file is not supported yet

styles/fabric-dark.css

Sorry, the diff of this file is not supported yet

styles/kanban/_bootstrap-dark-definition.scss

Sorry, the diff of this file is not supported yet

styles/kanban/_fabric-dark-definition.scss

Sorry, the diff of this file is not supported yet

styles/kanban/_material-dark-definition.scss

Sorry, the diff of this file is not supported yet

styles/kanban/_theme.scss

Sorry, the diff of this file is not supported yet

styles/kanban/bootstrap-dark.css

Sorry, the diff of this file is not supported yet

styles/kanban/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/kanban/bootstrap4.css

Sorry, the diff of this file is not supported yet

styles/kanban/fabric-dark.css

Sorry, the diff of this file is not supported yet

styles/kanban/material-dark.css

Sorry, the diff of this file is not supported yet

styles/material-dark.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc