@syncfusion/ej2-layouts 28.2.5 → 29.1.34

package/dist/global/index.d.ts

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

package/package.json

@@ -1,46 +1,44 @@
 {
-  "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@28.2.3",
+  "_from": "@syncfusion/ej2-layouts@~29.1.33",
+  "_id": "@syncfusion/ej2-layouts@29.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-P+LsAf5zfQ+8Ky+n654yJQ2sJ9W53TLqXxFKijrzEKD2WjwpM/QAZ16MyP7VbP5fLIzMzltzZeivsU8+m7+EAw==",
+  "_integrity": "sha512-zsMJJIXyfg6EkPUpf73Psr5luHdi0f/1a8r1guJIp2q5OGt3CbjY7POm8X8+F6IuwzLMRRi56n416BofyvlLiw==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
     "type": "range",
     "registry": true,
-    "raw": "@syncfusion/ej2-layouts@*",
+    "raw": "@syncfusion/ej2-layouts@~29.1.33",
     "name": "@syncfusion/ej2-layouts",
     "escapedName": "@syncfusion%2fej2-layouts",
     "scope": "@syncfusion",
-    "rawSpec": "*",
+    "rawSpec": "~29.1.33",
     "saveSpec": null,
-    "fetchSpec": "*"
+    "fetchSpec": "~29.1.33"
   },
   "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
     "/@syncfusion/ej2-angular-layouts",
     "/@syncfusion/ej2-filemanager",
     "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-kanban",
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-28.2.3.tgz",
-  "_shasum": "16816c6b4e4e620a3f0fd0cb8cb7c4d4e1dfd6ff",
-  "_spec": "@syncfusion/ej2-layouts@*",
-  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
+  "_resolved": "https://registry.npmjs.org/@syncfusion/ej2-layouts/-/ej2-layouts-29.1.33.tgz",
+  "_shasum": "ac459890c3cb494ce6ec14f39bf155735f30aa59",
+  "_spec": "@syncfusion/ej2-layouts@~29.1.33",
+  "_where": "E:\\march2025\\memory-leaks\\node_modules\\@syncfusion\\ej2-filemanager",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.5"
+    "@syncfusion/ej2-base": "~29.1.33"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
   "devDependencies": {},
   "es2015": "./dist/es6/ej2-layouts.es5.js",
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -74,8 +72,7 @@
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
-  "typings": "index.d.ts",
-  "version": "28.2.5",
   "sideEffects": false,
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
-}
+  "typings": "index.d.ts",
+  "version": "29.1.34"
+}

package/src/dashboard-layout/dashboard-layout.d.ts

@@ -423,6 +423,7 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
     protected panelResponsiveUpdate(): void;
     protected updateRowHeight(): void;
     protected setHeightWidth(): void;
+    private setEmptyLayoutHeight;
     protected setHeightAndWidth(panelElement: HTMLElement, panelModel: PanelModel): void;
     protected renderCell(panel: PanelModel, isStringTemplate: boolean, index: number): HTMLElement;
     protected setPanelPosition(cellElement: HTMLElement, row: number, col: number): void;

package/src/dashboard-layout/dashboard-layout.js

@@ -1017,7 +1017,8 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.setHeightWidth = function () {
         var heightValue;
-        if (isNullOrUndefined(this.cellSpacing)) {
+        if (isNullOrUndefined(this.cellSpacing) || (this.panels.length === 0 && this.panelCollection &&
+            this.panelCollection.length === 0)) {
             return;
         }
         if (this.checkMediaQuery()) {
@@ -1039,6 +1040,10 @@ var DashboardLayout = /** @class */ (function (_super) {
         var widthValue = window.getComputedStyle(this.element).width;
         setStyle(this.element, { 'width': widthValue });
     };
+    DashboardLayout.prototype.setEmptyLayoutHeight = function () {
+        this.element.style.removeProperty('height');
+        this.element.style.removeProperty('width');
+    };
     DashboardLayout.prototype.setHeightAndWidth = function (panelElement, panelModel) {
         setStyle(panelElement, { 'height': formatUnit(this.setXYDimensions(panelModel)[0]) });
         setStyle(panelElement, { 'width': formatUnit(this.setXYDimensions(panelModel)[1]) });
@@ -2549,6 +2554,7 @@ var DashboardLayout = /** @class */ (function (_super) {
         this.updateCloneArrayObject();
         this.checkForChanges(false, null, clonedPanels);
         this.removeAllCalled = false;
+        this.setEmptyLayoutHeight();
     };
     /**
      * Removes the panel from the DashboardLayout.
@@ -2588,6 +2594,9 @@ var DashboardLayout = /** @class */ (function (_super) {
         });
         this.updateCloneArrayObject();
         this.checkForChanges(false, null, [removedPanel]);
+        if (this.panels.length === 0 && this.panelCollection.length === 0) {
+            this.setEmptyLayoutHeight();
+        }
     };
     /**
      *Moves the panel in the DashboardLayout.
@@ -2840,8 +2849,10 @@ var DashboardLayout = /** @class */ (function (_super) {
                     break;
                 case 'cellSpacing':
                     this.setProperties({ cellSpacing: newProp.cellSpacing }, true);
-                    this.updateCellSizeAndSpacing();
-                    this.updateGridLines();
+                    if (!this.checkMediaQuery()) {
+                        this.updateCellSizeAndSpacing();
+                        this.updateGridLines();
+                    }
                     break;
                 case 'draggableHandle':
                     this.setProperties({ draggableHandle: newProp.draggableHandle }, true);

package/styles/bootstrap4-lite.css

@@ -441,14 +441,14 @@
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
   background-color: #007bff;
-  border: 1px solid #0062cc;
+  border: 1px solid rgb(0, 98.4, 204);
   color: #fff;
   outline: 0;
 }
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
-  background-color: #0069d9;
-  border: 1px solid #0062cc;
+  background-color: rgb(0, 104.55, 216.75);
+  border: 1px solid rgb(0, 98.4, 204);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
@@ -459,8 +459,8 @@
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #0062cc;
-  border: 1px solid #005cbf;
+  background-color: rgb(0, 98.4, 204);
+  border: 1px solid rgb(0, 92.25, 191.25);
   color: #fff;
 }
 .e-card .e-card-content {

package/styles/bootstrap4.css

@@ -441,14 +441,14 @@
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
   background-color: #007bff;
-  border: 1px solid #0062cc;
+  border: 1px solid rgb(0, 98.4, 204);
   color: #fff;
   outline: 0;
 }
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
-  background-color: #0069d9;
-  border: 1px solid #0062cc;
+  background-color: rgb(0, 104.55, 216.75);
+  border: 1px solid rgb(0, 98.4, 204);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
@@ -459,8 +459,8 @@
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #0062cc;
-  border: 1px solid #005cbf;
+  background-color: rgb(0, 98.4, 204);
+  border: 1px solid rgb(0, 92.25, 191.25);
   color: #fff;
 }
 .e-card .e-card-content {

package/styles/bootstrap5-dark-lite.css

@@ -419,7 +419,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background: #212529;
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -431,14 +431,14 @@
 }
 .e-card:focus {
   background-color: #212529;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-card:active {
   background-color: #212529;
   border-color: #0d6efd;
 }
 .e-card .e-card-separator {
-  border-bottom: 1px solid #444c54;
+  border-bottom: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-card .e-card-header-caption .e-card-header-title {
   color: #fff;
@@ -464,19 +464,19 @@
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background-color: #0d6efd;
-  border: 1px solid #565e64;
+  border: 1px solid rgb(86.4, 93.6, 100);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
-  background-color: #5c636a;
+  background-color: rgb(91.8, 99.45, 106.25);
   border: 1px solid;
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #565e64;
-  border: 1px solid #51585e;
+  background-color: rgb(86.4, 93.6, 100);
+  border: 1px solid rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-card .e-card-content {
@@ -833,7 +833,7 @@
 }
 
 .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
-  border: solid 1px #444c54;
+  border: solid 1px rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
   color: #fff;
@@ -842,7 +842,7 @@
   border: transparent;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
   border-left: none;
   border-right: none;
 }
@@ -913,7 +913,7 @@
   color: #0d6efd;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #212529;
@@ -1053,7 +1053,7 @@
 }
 
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   border-collapse: collapse;
   height: 100%;
   width: 100%;
@@ -1076,7 +1076,7 @@
   position: relative;
 }
 .e-dashboardlayout.e-control .e-panel {
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   height: 100%;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1112,7 +1112,7 @@
   transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: 1px solid #444c54;
+  border-bottom: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   color: #fff;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 14px;
@@ -1184,7 +1184,7 @@
   cursor: default;
 }
 .e-dashboardlayout.e-control .e-holder {
-  background: #031633;
+  background: rgb(2.6, 22, 50.6);
   border: 1px #0d6efd dashed;
   border-radius: 4px;
   position: absolute;
@@ -1214,7 +1214,7 @@
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
   color: #fff;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -1515,8 +1515,8 @@
 }
 
 .e-timeline .e-dot {
-  background-color: #444c54;
-  border-color: #444c54;
+  background-color: rgb(68.0034482759, 75.85, 83.6965517241);
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   color: #fff;
   outline-color: #212529;
 }
@@ -1524,7 +1524,7 @@
   background-color: #212529;
 }
 .e-timeline .e-timeline-item.e-connector::after {
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-timeline .e-content {
   color: #e9ecef;

package/styles/bootstrap5-dark.css

@@ -419,7 +419,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background: #212529;
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -431,14 +431,14 @@
 }
 .e-card:focus {
   background-color: #212529;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-card:active {
   background-color: #212529;
   border-color: #0d6efd;
 }
 .e-card .e-card-separator {
-  border-bottom: 1px solid #444c54;
+  border-bottom: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-card .e-card-header-caption .e-card-header-title {
   color: #fff;
@@ -464,19 +464,19 @@
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background-color: #0d6efd;
-  border: 1px solid #565e64;
+  border: 1px solid rgb(86.4, 93.6, 100);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
-  background-color: #5c636a;
+  background-color: rgb(91.8, 99.45, 106.25);
   border: 1px solid;
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #565e64;
-  border: 1px solid #51585e;
+  background-color: rgb(86.4, 93.6, 100);
+  border: 1px solid rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-card .e-card-content {
@@ -969,7 +969,7 @@
 }
 
 .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
-  border: solid 1px #444c54;
+  border: solid 1px rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
   color: #fff;
@@ -978,7 +978,7 @@
   border: transparent;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
   border-left: none;
   border-right: none;
 }
@@ -1049,7 +1049,7 @@
   color: #0d6efd;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #212529;
@@ -1229,7 +1229,7 @@
 }
 
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   border-collapse: collapse;
   height: 100%;
   width: 100%;
@@ -1252,7 +1252,7 @@
   position: relative;
 }
 .e-dashboardlayout.e-control .e-panel {
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   height: 100%;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1288,7 +1288,7 @@
   transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: 1px solid #444c54;
+  border-bottom: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   color: #fff;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 14px;
@@ -1360,7 +1360,7 @@
   cursor: default;
 }
 .e-dashboardlayout.e-control .e-holder {
-  background: #031633;
+  background: rgb(2.6, 22, 50.6);
   border: 1px #0d6efd dashed;
   border-radius: 4px;
   position: absolute;
@@ -1390,7 +1390,7 @@
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
   color: #fff;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -1708,8 +1708,8 @@
 }
 
 .e-timeline .e-dot {
-  background-color: #444c54;
-  border-color: #444c54;
+  background-color: rgb(68.0034482759, 75.85, 83.6965517241);
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   color: #fff;
   outline-color: #212529;
 }
@@ -1717,7 +1717,7 @@
   background-color: #212529;
 }
 .e-timeline .e-timeline-item.e-connector::after {
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-timeline .e-content {
   color: #e9ecef;

package/styles/bootstrap5-lite.css

@@ -464,19 +464,19 @@
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background-color: #0d6efd;
-  border: 1px solid #565e64;
+  border: 1px solid rgb(86.4, 93.6, 100);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
-  background-color: #5c636a;
+  background-color: rgb(91.8, 99.45, 106.25);
   border: 1px solid;
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #565e64;
-  border: 1px solid #51585e;
+  background-color: rgb(86.4, 93.6, 100);
+  border: 1px solid rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-card .e-card-content {
@@ -1184,7 +1184,7 @@
   cursor: default;
 }
 .e-dashboardlayout.e-control .e-holder {
-  background: #e7f1ff;
+  background: rgb(230.8, 240.5, 254.8);
   border: 1px #0d6efd dashed;
   border-radius: 4px;
   position: absolute;

package/styles/bootstrap5.css

@@ -464,19 +464,19 @@
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background-color: #0d6efd;
-  border: 1px solid #565e64;
+  border: 1px solid rgb(86.4, 93.6, 100);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
-  background-color: #5c636a;
+  background-color: rgb(91.8, 99.45, 106.25);
   border: 1px solid;
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #565e64;
-  border: 1px solid #51585e;
+  background-color: rgb(86.4, 93.6, 100);
+  border: 1px solid rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-card .e-card-content {
@@ -1360,7 +1360,7 @@
   cursor: default;
 }
 .e-dashboardlayout.e-control .e-holder {
-  background: #e7f1ff;
+  background: rgb(230.8, 240.5, 254.8);
   border: 1px #0d6efd dashed;
   border-radius: 4px;
   position: absolute;

package/styles/card/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Card Base
 
 $card-img-brdr-radious: 50% !default;
@@ -100,15 +102,15 @@ $card-image-title-bg: rgba($black, .35) !default;
 
 $card-action-btn-bg-color: $primary !default;
 $card-action-btn-font-color: $primary-font !default;
-$card-action-btn-border: 1px solid darken($primary, 10%) !default;
-$card-action-btn-hover-bg: darken($primary, 7.5%) !default;
-$card-action-btn-hover-border: 1px solid darken($primary, 10%) !default;
+$card-action-btn-border: 1px solid color.adjust($primary, $lightness: -10%) !default;
+$card-action-btn-hover-bg: color.adjust($primary, $lightness: -7.5%) !default;
+$card-action-btn-hover-border: 1px solid color.adjust($primary, $lightness: -10%) !default;
 $card-action-btn-hover-font: $primary-font !default;
 $card-action-btn-focus-bg: $primary !default;
 $card-action-btn-focus-border: 1px solid $primary !default;
 $card-action-btn-focus-font: $primary-font !default;
-$card-action-btn-pressed-bg: darken($primary, 10%) !default;
-$card-action-btn-pressed-border: 1px solid darken($primary, 12.5%) !default;
+$card-action-btn-pressed-bg: color.adjust($primary, $lightness: -10%) !default;
+$card-action-btn-pressed-border: 1px solid color.adjust($primary, $lightness: -12.5%) !default;
 $card-action-btn-pressed-font: $primary-font !default;
 
 $card-font-color: $gray-900 !default;

package/styles/card/bootstrap4.css

@@ -392,14 +392,14 @@
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
   background-color: #007bff;
-  border: 1px solid #0062cc;
+  border: 1px solid rgb(0, 98.4, 204);
   color: #fff;
   outline: 0;
 }
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
-  background-color: #0069d9;
-  border: 1px solid #0062cc;
+  background-color: rgb(0, 104.55, 216.75);
+  border: 1px solid rgb(0, 98.4, 204);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
@@ -410,8 +410,8 @@
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #0062cc;
-  border: 1px solid #005cbf;
+  background-color: rgb(0, 98.4, 204);
+  border: 1px solid rgb(0, 92.25, 191.25);
   color: #fff;
 }
 .e-card .e-card-content {

package/styles/card/bootstrap5-dark.css

@@ -355,7 +355,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background: #212529;
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -367,14 +367,14 @@
 }
 .e-card:focus {
   background-color: #212529;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-card:active {
   background-color: #212529;
   border-color: #0d6efd;
 }
 .e-card .e-card-separator {
-  border-bottom: 1px solid #444c54;
+  border-bottom: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-card .e-card-header-caption .e-card-header-title {
   color: #fff;
@@ -400,19 +400,19 @@
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background-color: #0d6efd;
-  border: 1px solid #565e64;
+  border: 1px solid rgb(86.4, 93.6, 100);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
-  background-color: #5c636a;
+  background-color: rgb(91.8, 99.45, 106.25);
   border: 1px solid;
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #565e64;
-  border: 1px solid #51585e;
+  background-color: rgb(86.4, 93.6, 100);
+  border: 1px solid rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-card .e-card-content {

package/styles/card/bootstrap5.css

@@ -400,19 +400,19 @@
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background-color: #0d6efd;
-  border: 1px solid #565e64;
+  border: 1px solid rgb(86.4, 93.6, 100);
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
-  background-color: #5c636a;
+  background-color: rgb(91.8, 99.45, 106.25);
   border: 1px solid;
   color: #fff;
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
-  background-color: #565e64;
-  border: 1px solid #51585e;
+  background-color: rgb(86.4, 93.6, 100);
+  border: 1px solid rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-card .e-card-content {