@syncfusion/ej2-angular-kanban 21.2.3 → 22.1.34

package/styles/kanban/_material3-definition.scss

@@ -0,0 +1,231 @@
+//Layout Variables Start
+$kanban-icons-border-radius: 4px !default;
+$kanban-text-base: $text-sm !default;
+$kanban-mb-popup-container-box-shadow: $shadow-md !default;
+
+//Layout Variables End
+//Theme Variables Start
+$kanban-column-bg-color: $content-bg-color-alt1 !default;
+$kanban-default-font-color: rgba($content-text-color) !default;
+$kanban-content-font: rgba($content-text-color) !default;
+$kanban-border-color: $border-dark !default;
+$kanban-dialog-text-areas-border-color: rgba($border) !default;
+$kanban-card-selection-bg-color: rgba($content-bg-color) !default;
+$kanban-dropped-clone-bg-color: rgba($primary-lighter) !default;
+$kanban-dropped-clone-border-color: rgba($primary) !default;
+$kanban-dragged-clone-border-color: $border-dark !default;
+$kanban-icons-color: rgba($icon-color) !default;
+$kanban-bg-color: rgba($content-bg-color) !default;
+$kanban-card-bg-color: $content-bg-color-alt1 !default;
+$kanban-text-area-bg-color: initial !default;
+$kanban-text-area-color: rgba($content-text-color-alt1) !default;
+$kanban-popup-overlay-bg-color: $overlay-bg-color !default;
+$kanban-min-color: rgba($warning-light) !default;
+$kanban-max-color: rgba($danger-light-alt) !default;
+$kanban-header-border-color: $gray-300 !default;
+$kanban-tags-bg-color: $content-bg-color-alt1 !default;
+$kanban-tags-color: rgba($content-text-color) !default;
+$kanban-card-selection-box-shadow: $shadow-md !default;
+
+//Theme Variables End
+
+$kanban-table-border-spacing: 10px 4px !default;
+$kanban-table-swimlane-border-spacing: 10px 0 !default;
+$kanban-table-bigger-border-spacing: 12px 4px !default;
+$kanban-table-bigger-swimlane-border-spacing: 12px 0 !default;
+$kanban-table-col-collapse-width: 42px !default;
+$kanban-table-col-collapse-bgr-width: 48px !default;
+$kanban-frozen-swimlane-row-padding: 12px 12px 12px 20px !default;
+$kanban-frozen-swimlane-row-bgr-padding: 16px 16px 16px 28px !default;
+$kanban-frozen-swimlane-row-header-padding: 0 0 0 8px !default;
+$kanban-frozen-swimlane-row-header-line-height: $leading-normal !default;
+$kanban-frozen-swimlane-row-header-font-size: $text-sm !default;
+$kanban-frozen-swimlane-row-header-bgr-font-size: $text-base !default;
+$kanban-frozen-swl-row-head-item-count-font-size: $text-xs !default;
+$kanban-frozen-swl-row-head-item-count-bgr-font-size: $text-sm !default;
+$kanban-frozen-swl-row-head-item-count-line-height: $leading-normal !default;
+$kanban-frozen-swl-row-head-item-count-bgr-line-height: $leading-relaxed !default;
+$kanban-frozen-swl-row-head-item-count-padding: 3px !default;
+$kanban-frozen-swl-row-head-item-count-bgr-padding: 4px !default;
+$kanban-frozen-swl-row-head-item-count-opacity: .57 !default;
+$kanban-frozen-swl-row-head-item-count-font-weight: $font-weight-medium !default;
+$kanban-swl-frozen-header-item-count-color: rgba($on-secondary-container) !default;
+$kanban-swl-frozen-header-row-icon-border: 1px solid transparent !default;
+$kanban-swl-frozen-header-row-icon-height: 18px !default;
+$kanban-swl-frozen-header-row-icon-margin: 1px !default;
+$kanban-swl-frozen-header-row-icon-padding: 2px !default;
+$kanban-swl-frozen-header-row-icon-font-size: $text-base !default;
+$kanban-swl-frz-head-row-icon-hover-margin: 1px !default;
+$kanban-swl-frz-header-row-icon-hover-padding: 2px !default;
+$kanban-swl-frozen-header-row-icon-hover-bg-color: $secondary-bg-color-hover !default;
+$kanban-swl-frozen-header-row-icon-focus-bg-color: $secondary-bg-color-hover !default;
+$kanban-swl-frozen-header-row-icon-hover-border: 1px solid transparent !default;
+$kanban-swl-frozen-header-row-icon-hover-box-shadow: none !default;
+$kanban-swl-frozen-header-row-icon-hover-color: rgba($white) !default;
+$kanban-swl-frozen-header-row-icon-focus-box-shadow: $secondary-shadow-focus !default;
+$kanban-header-cell-height: 40px !default;
+$kanban-header-cell-bgr-height: 44px !default;
+$kanban-header-cell-padding: 8px !default;
+$kanban-stacked-header-cell-border-btm: 1px solid rgba($border) !default;
+$kanban-toggle-header-icon-font-size: $text-sm !default;
+$kanban-toggle-header-icon-bgr-font-size: $text-sm !default;
+$kanban-toggle-header-expand-icon-padding: 4px !default;
+$kanban-toggle-header-collapse-icon-padding: 2px !default;
+$kanban-toggle-header-collapse-width: 42px !default;
+$kanban-header-text-font-size: $text-sm !default;
+$kanban-header-text-font-weight: $font-weight-medium !default;
+$kanban-header-text-line-height: $leading-normal !default;
+$kanban-header-text-overflow: ellipsis !default;
+$kanban-header-text-bgr-font-size: $text-base !default;
+$kanban-header-text-bgr-font-weight: $font-weight-medium !default;
+$kanban-header-text-bgr-line-height: $leading-normal !default;
+$kanban-header-text-bgr-transform: uppercase !default;
+$kanban-header-item-count-font-size: $text-xs !default;
+$kanban-header-item-count-font-weight: $font-weight-medium !default;
+$kanban-header-item-count-line-height: $leading-relaxed !default;
+$kanban-header-item-count-opacity: 1 !default;
+$kanban-header-item-count-margin-top: 2px !default;
+$kanban-header-item-count-text-transform: capitalize !default;
+$kanban-header-item-count-bgr-font-size: $text-sm !default;
+$kanban-header-item-count-bgr-font-weight: $font-weight-medium !default;
+$kanban-header-item-count-bgr-line-height: $leading-normal !default;
+$kanban-header-item-count-bgr-margin-top: 2px !default;
+$kanban-header-item-count-bgr-text-transform: capitalize !default;
+$kanban-header-min-max-count-font-size: $text-xs !default;
+$kanban-header-min-max-count-font-weight: $font-weight-medium !default;
+$kanban-header-min-max-count-opacity: 1 !default;
+$kanban-collapse-header-text-color: rgba($content-text-color) !default;
+$kanban-collapse-header-text-font-size: $text-sm !default;
+$kanban-collapse-header-text-font-weight: $font-weight-medium !default;
+$kanban-collapse-header-text-padding: 12px !default;
+$kanban-collapse-header-text-transform: capitalize !default;
+$kanban-card-container-padding: 12px 12px 0 !default;
+$kanban-card-container-bgr-padding: 16px 16px 0 !default;
+$kanban-empty-card-font-size: $text-sm !default;
+$kanban-empty-card-line-height: $leading-normal !default;
+$kanban-empty-card-padding: 20px 0 !default;
+$kanban-empty-card-color: $content-bg-color-alt2 !default;
+$kanban-empty-card-margin: 0 auto !default;
+$kanban-empty-card-display: table !default;
+$kanban-card-margin-bottom: 12px !default;
+$kanban-card-bgr-margin-bottom: 16px !default;
+$kanban-card-border: 1px solid rgba($border-light) !default;
+$kanban-card-border-radius: 8px !default;
+$kanban-card-normal-box-shadow: $shadow-md !default;
+$kanban-card-header-padding: 12px 14px 0 !default;
+$kanban-card-header-bgr-padding: 24px 24px 0 !default;
+$kanban-color-card-header-padding: 12px 14px 0 14px !default;
+$kanban-color-card-header-bgr-padding: 12px 20px 0 20px !default;
+$kanban-card-header-title-font-size: 14px !default;
+$kanban-card-header-title-line-height: $leading-relaxed !default;
+$kanban-card-header-title-font-weight: $font-weight-medium !default;
+$kanban-card-header-title-bgr-font-size: $text-base !default;
+$kanban-card-header-title-bgr-line-height: $leading-normal !default;
+$kanban-card-footer-padding: 13px 14px !default;
+$kanban-card-footer-bgr-padding: 0 24px 12px !default;
+$kanban-color-card-footer-padding: 8px 18px 8px 16px !default;
+$kanban-color-card-footer-bgr-padding: 0 24px 12px 22px !default;
+$kanban-card-content-font-size: $text-sm !default;
+$kanban-card-content-line-height: $leading-relaxed !default;
+$kanban-card-content-padding: 8px 14px !default;
+$kanban-color-card-content-padding: 8px 14px 12px 14px !default;
+$kanban-card-content-bgr-font-size: $text-base !default;
+$kanban-card-content-bgr-line-height: $leading-relaxed !default;
+$kanban-card-content-bgr-padding: 8px 24px 12px !default;
+$kanban-color-card-content-bgr-padding: 12px 20px 12px 20px !default;
+$kanban-color-card-border: 1px solid $transparent !default;
+$kanban-color-card-border-left: 2px solid rgba($success-dark) !default;
+$kanban-color-card-hover-border: 1px solid $content-text-color-disabled !default;
+$kanban-color-card-hover-border-left: 2px solid rgba($success-dark) !default;
+$kanban-color-card-hover-box-shadow: $shadow-md !default;
+$kanban-color-card-focus-border: 1px solid $border-dark !default;
+$kanban-color-card-focus-border-left: 2px solid rgba($success-dark) !default;
+$kanban-color-card-tags-padding: 8px 14px 0 12px !default;
+$kanban-card-tags-padding: 12px 12px 0 !default;
+$kanban-color-card-selection-border: 1px solid rgba($primary) !default;
+$kanban-color-card-selection-border-left: 2px solid rgba($success-dark) !default;
+$kanban-color-card-selection-box-shadow: $kanban-card-normal-box-shadow !default;
+$kanban-color-card-selection-hover-border: 1px solid rgba($primary) !default;
+$kanban-color-card-selection-hover-border-left: 2px solid rgba($success-dark) !default;
+$kanban-color-card-selection-hover-box-shadow: $kanban-card-normal-box-shadow !default;
+$kanban-color-card-selection-hover-padding: 0 !default;
+$kanban-card-selection-border: 1px solid rgba($primary) !default;
+$kanban-card-selection-box-shadow: $kanban-card-normal-box-shadow !default;
+$kanban-card-selection-hover-border: 1px solid rgba($primary) !default;
+$kanban-card-selection-hover-box-shadow: $kanban-card-normal-box-shadow !default;
+$kanban-card-selection-hover-padding: 0 !default;
+$kanban-card-tag-border-radius: 2px !default;
+$kanban-card-tag-font-size: $text-sm !default;
+$kanban-card-tag-line-height: $leading-relaxed !default;
+$kanban-card-tag-margin-right: 4px !default;
+$kanban-card-tag-padding: 1px 4px !default;
+$kanban-card-hover-border: 1px solid $border-dark !default;
+$kanban-card-normal-hover-box-shadow: $kanban-card-normal-box-shadow !default;
+$kanban-card-focus-border: 1px solid $border-dark !default;
+$kanban-multi-card-text-bg-color: rgba($content-bg-color) !default;
+$kanban-target-drag-drop-clone-margin-bottom: 12px !default;
+$kanban-target-drag-drop-clone-bgr-margin-bottom: 16px !default;
+$kanban-target-drag-drop-clone-border-radius: 6px !default;
+$kanban-target-dragged-clone-bg-color: $content-bg-color-alt3 !default;
+$kanban-swl-row-height: 46px !default;
+$kanban-swl-row-header-padding: 12px !default;
+$kanban-swl-row-header-bgr-padding: 14px !default;
+$kanban-swl-header-icon-border: 1px solid transparent !default;
+$kanban-swl-header-icon-color: $kanban-icons-color !default;
+$kanban-swl-header-icon-height: 16px !default;
+$kanban-swl-header-icon-margin: 1px !default;
+$kanban-swl-header-icon-rtl-margin: 1px !default;
+$kanban-swl-header-icon-padding: 0 !default;
+$kanban-swl-header-icon-font-size: $text-sm !default;
+$kanban-swl-header-icon-bgr-font-size: $text-sm !default;
+$kanban-swl-header-icon-hover-border: $kanban-swl-header-icon-border !default;
+$kanban-swl-header-icon-hover-color: rgba($primary) !default;
+$kanban-swl-header-icon-hover-margin: 1px !default;
+$kanban-swl-header-icon-hover-padding: 0 !default;
+$kanban-swl-header-icon-hover-font-size: $text-sm !default;
+$kanban-swl-header-icon-hover-background: none !default;
+$kanban-swl-header-icon-hover-border-radius: 1px !default;
+$kanban-swl-header-icon-hover-box-shadow: $secondary-shadow-focus !default;
+$kanban-swl-header-text-line-height: $leading-normal !default;
+$kanban-swl-header-text-bgr-line-height: $leading-normal !default;
+$kanban-swl-header-text-padding: 0 0 0 8px !default;
+$kanban-swl-header-text-bgr-font-size: $text-base !default;
+$kanban-swl-header-item-count-font-size: $text-xs !default;
+$kanban-swl-header-item-count-line-height: 20px !default;
+$kanban-swl-header-item-count-font-opacity: .57 !default;
+$kanban-swl-header-item-count-padding: 1px 2px !default;
+$kanban-swl-header-item-count-color: rgba($on-secondary-container) !default;
+$kanban-swl-header-item-count-font-weight: $font-weight-medium !default;
+$kanban-swl-header-item-count-bgr-font-size: $text-xs !default;
+$kanban-swl-header-item-count-bgr-line-height: $leading-normal !default;
+$kanban-swl-header-item-count-bgr-padding: 5px !default;
+$kanban-content-cells-focus-border: 1px solid $transparent !default;
+$kanban-content-cells-focus-box-shadow: $shadow-focus-ring1 !default;
+$kanban-mb-swl-name-font-size: $text-base !default;
+$kanban-mb-swl-name-padding: 5px !default;
+$kanban-mb-swl-name-color: inherit !default;
+$kanban-mb-swl-name-font-weight: $font-weight-medium !default;
+$kanban-mb-swl-name-line-height: $leading-normal !default;
+$kanban-mb-swl-menu-icon-font-size: $text-lg !default;
+$kanban-mb-swl-menu-icon-bgr-font-size: $text-xl !default;
+$kanban-mb-swl-menu-icon-color: inherit !default;
+$kanban-mb-swl-overlay-opacity: 1 !default;
+$kanban-dialog-form-table-td-line-height: $leading-normal !default;
+$kanban-dialog-form-table-td-opacity: 1 !default;
+$kanban-dialog-form-table-td-padding: 8px 0 !default;
+$kanban-dialog-form-table-td-color: rgba($content-text-color-alt1) !default;
+$kanban-dialog-form-table-td-font-weight: $font-weight-medium !default;
+$kanban-mb-popup-content-padding: 5px !default;
+$kanban-mb-popup-content-color: inherit !default;
+$kanban-dialog-text-area-focus-shadow: $shadow-lg !default;
+
+//Color Start
+$kanban-header-text-color: rgba($content-text-color) !default;
+$kanban-header-item-count-color: rgba($content-text-color) !default;
+$kanban-header-limits-color: rgba($content-text-color) !default;
+$kanban-col-expand-collapse-bg-color: none !default;
+$kanban-col-expand-collapse-color: rgba($primary) !default;
+$kanban-col-expand-collapse-border: 1px solid $transparent !default;
+$kanban-col-expand-collapse-box-shadow: $secondary-shadow-focus !default;
+
+//Color End

package/styles/kanban/_theme.scss

@@ -145,4 +145,9 @@
       }
     }
   }
+
+  .e-card-virtual-skeleton-wrapper,
+  .e-card-skeleton-wrapper {
+    background: $kanban-column-bg-color;
+  }
 }

package/styles/kanban/bootstrap-dark.css

@@ -1009,6 +1009,10 @@
   padding: 5px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1034,6 +1038,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 4px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 8px 8px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #2a2a2a;
@@ -1117,4 +1131,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: none;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #2a2a2a;
 }

package/styles/kanban/bootstrap-dark.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
 @import 'ej2-layouts/styles/card/bootstrap-dark-definition.scss';
 @import 'ej2-navigations/styles/treeview/bootstrap-dark-definition.scss';
+@import 'ej2-notifications/styles/skeleton/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/dialog/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';

package/styles/kanban/bootstrap.css

@@ -1007,6 +1007,10 @@
   padding: 5px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1032,6 +1036,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 4px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 8px 8px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #fff;
@@ -1115,4 +1129,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: none;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #f5f5f5;
 }

package/styles/kanban/bootstrap.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap-definition.scss';
 @import 'ej2-layouts/styles/card/bootstrap-definition.scss';
 @import 'ej2-navigations/styles/treeview/bootstrap-definition.scss';
+@import 'ej2-notifications/styles/skeleton/bootstrap-definition.scss';
 @import 'ej2-popups/styles/dialog/bootstrap-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap-definition.scss';

package/styles/kanban/bootstrap4.css

@@ -1086,6 +1086,10 @@
   padding: 5px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1111,6 +1115,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 4px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 8px 8px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #fff;
@@ -1194,4 +1208,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: none;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #f2f4f6;
 }

package/styles/kanban/bootstrap4.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap4-definition.scss';
 @import 'ej2-layouts/styles/card/bootstrap4-definition.scss';
 @import 'ej2-navigations/styles/treeview/bootstrap4-definition.scss';
+@import 'ej2-notifications/styles/skeleton/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/dialog/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';

package/styles/kanban/bootstrap5-dark.css

@@ -1069,6 +1069,10 @@
   padding: 8px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1094,6 +1098,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 6px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 12px 12px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #212529;
@@ -1185,4 +1199,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: 0 0 0 2px #0d6efd;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #282d31;
 }

package/styles/kanban/bootstrap5-dark.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap5-dark-definition.scss';
 @import 'ej2-layouts/styles/card/bootstrap5-dark-definition.scss';
 @import 'ej2-navigations/styles/treeview/bootstrap5-dark-definition.scss';
+@import 'ej2-notifications/styles/skeleton/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/dialog/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap5-dark-definition.scss';

package/styles/kanban/bootstrap5.css

@@ -1069,6 +1069,10 @@
   padding: 8px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1094,6 +1098,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 6px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 12px 12px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #fff;
@@ -1185,4 +1199,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: 0 0 0 2px #0d6efd;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #f8f9fa;
 }

package/styles/kanban/bootstrap5.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap5-definition.scss';
 @import 'ej2-layouts/styles/card/bootstrap5-definition.scss';
 @import 'ej2-navigations/styles/treeview/bootstrap5-definition.scss';
+@import 'ej2-notifications/styles/skeleton/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/dialog/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';

package/styles/kanban/fabric-dark.css

@@ -976,6 +976,10 @@
   padding: 5px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1001,6 +1005,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 0;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 8px 8px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #201f1f;
@@ -1085,4 +1099,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: none;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #333232;
 }

package/styles/kanban/fabric-dark.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/fabric-dark-definition.scss';
 @import 'ej2-layouts/styles/card/fabric-dark-definition.scss';
 @import 'ej2-navigations/styles/treeview/fabric-dark-definition.scss';
+@import 'ej2-notifications/styles/skeleton/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/dialog/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';

package/styles/kanban/fabric.css

@@ -969,6 +969,10 @@
   padding: 5px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -994,6 +998,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 0;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 8px 8px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #fff;
@@ -1078,4 +1092,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: none;
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #f4f4f4;
 }

package/styles/kanban/fabric.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/fabric-definition.scss';
 @import 'ej2-layouts/styles/card/fabric-definition.scss';
 @import 'ej2-navigations/styles/treeview/fabric-definition.scss';
+@import 'ej2-notifications/styles/skeleton/fabric-definition.scss';
 @import 'ej2-popups/styles/dialog/fabric-definition.scss';
 @import 'ej2-popups/styles/popup/fabric-definition.scss';
 @import 'ej2-popups/styles/spinner/fabric-definition.scss';

package/styles/kanban/fluent-dark.css

@@ -1036,6 +1036,10 @@
   padding: 8px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1061,6 +1065,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 2px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 12px 12px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #1b1a19;
@@ -1147,4 +1161,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #201f1e;
 }

package/styles/kanban/fluent-dark.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/fluent-dark-definition.scss';
 @import 'ej2-layouts/styles/card/fluent-dark-definition.scss';
 @import 'ej2-navigations/styles/treeview/fluent-dark-definition.scss';
+@import 'ej2-notifications/styles/skeleton/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/dialog/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';

package/styles/kanban/fluent.css

@@ -1036,6 +1036,10 @@
   padding: 8px 0;
   text-align: left;
 }
+.e-kanban-dialog.e-dialog .e-kanban-form-wrapper table td textarea.e-field,
+.e-kanban-dialog.e-dialog .e-kanban-form-container table td textarea.e-field {
+  resize: vertical;
+}
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table .e-label,
 .e-kanban-dialog.e-dialog .e-kanban-form-container table .e-label {
   padding-right: 10px;
@@ -1061,6 +1065,16 @@
   float: right;
 }
 
+.e-card-virtual-skeleton-wrapper .e-skeleton.e-skeleton-text.e-shimmer-wave {
+  border-radius: 2px;
+}
+
+.e-card-virtual-skeleton-wrapper {
+  height: inherit;
+  overflow: hidden;
+  padding: 12px 12px 0;
+}
+
 /*! kanban component theme */
 .e-kanban {
   background: #fff;
@@ -1147,4 +1161,9 @@
 }
 .e-kanban-dialog.e-dialog .e-kanban-form-wrapper table textarea:focus {
   box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+}
+
+.e-card-virtual-skeleton-wrapper,
+.e-card-skeleton-wrapper {
+  background: #faf9f8;
 }

package/styles/kanban/fluent.scss

@@ -6,6 +6,7 @@
 @import 'ej2-inputs/styles/textbox/fluent-definition.scss';
 @import 'ej2-layouts/styles/card/fluent-definition.scss';
 @import 'ej2-navigations/styles/treeview/fluent-definition.scss';
+@import 'ej2-notifications/styles/skeleton/fluent-definition.scss';
 @import 'ej2-popups/styles/dialog/fluent-definition.scss';
 @import 'ej2-popups/styles/popup/fluent-definition.scss';
 @import 'ej2-popups/styles/spinner/fluent-definition.scss';