@syncfusion/ej2-vue-layouts 19.4.52 → 20.1.47

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-layouts@*",
-  "_id": "@syncfusion/ej2-vue-layouts@19.4.48",
+  "_id": "@syncfusion/ej2-vue-layouts@19.6.9",
   "_inBundle": false,
-  "_integrity": "sha512-x/dDo82LFKIArWPTJaWxsNlJQ1v2byYfAlFCzW7w5V9o3929yKys+LeTBzFF29js/CGNoaEmtKSMZMactbkeDA==",
+  "_integrity": "sha512-TU/9GJmPDgfbAEXCXFEVkbivIbVwBP5T5mT1F7dBkkUPCl4m2bkXS4Jc9XbTOzebrjzKcaihix6Tov6oW49SgQ==",
   "_location": "/@syncfusion/ej2-vue-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-layouts/-/ej2-vue-layouts-19.4.48.tgz",
-  "_shasum": "1fcfdf72c369cc5947cc7f27e8af3d83ffd473b5",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-layouts/-/ej2-vue-layouts-19.6.9.tgz",
+  "_shasum": "bf76442d0d923aedb4269349ea4380dfa7778cf4",
   "_spec": "@syncfusion/ej2-vue-layouts@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-layouts": "19.4.52",
-    "@syncfusion/ej2-vue-base": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-layouts": "20.1.47",
+    "@syncfusion/ej2-vue-base": "~20.1.47"
   },
   "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. for Vue",
@@ -65,6 +65,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
-  "version": "19.4.52",
+  "version": "20.1.47",
   "sideEffects": false
 }

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

@@ -28,6 +28,7 @@ export declare class DashboardLayoutComponent extends ComponentBase {
     clearTemplate(templateNames?: string[]): any;
     setProperties(prop: any, muteOnChange: boolean): void;
     render(createElement: any): any;
+    custom(): void;
     addPanel(panel: Object): void;
     movePanel(id: string, row: number, col: number): void;
     refresh(): void;

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

@@ -56,6 +56,7 @@ var DashboardLayoutComponent = /** @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     DashboardLayoutComponent.prototype.clearTemplate = function (templateNames) {
@@ -114,6 +115,9 @@ var DashboardLayoutComponent = /** @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    DashboardLayoutComponent.prototype.custom = function () {
+        this.updated();
+    };
     DashboardLayoutComponent.prototype.addPanel = function (panel) {
         return this.ej2Instances.addPanel(panel);
     };
@@ -145,7 +149,12 @@ var DashboardLayoutComponent = /** @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], DashboardLayoutComponent);
     return DashboardLayoutComponent;

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

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class PanelsDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const PanelsPlugin: {

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

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var PanelsDirective = /** @class */ (function (_super) {
     __extends(PanelsDirective, _super);
     function PanelsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    PanelsDirective.prototype.render = function () {
+    PanelsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    PanelsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     PanelsDirective.prototype.getTag = function () {
         return 'e-panels';
     };
     PanelsDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], PanelsDirective);
     return PanelsDirective;
 }(vueImport));

package/src/splitter/panesettings.directive.d.ts

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class PanesDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const PanesPlugin: {

package/src/splitter/panesettings.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var PanesDirective = /** @class */ (function (_super) {
     __extends(PanesDirective, _super);
     function PanesDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    PanesDirective.prototype.render = function () {
+    PanesDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    PanesDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     PanesDirective.prototype.getTag = function () {
         return 'e-panes';
     };
     PanesDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], PanesDirective);
     return PanesDirective;
 }(vueImport));

package/src/splitter/splitter.component.d.ts

@@ -28,6 +28,7 @@ export declare class SplitterComponent extends ComponentBase {
     clearTemplate(templateNames?: string[]): any;
     setProperties(prop: any, muteOnChange: boolean): void;
     render(createElement: any): any;
+    custom(): void;
     addPane(paneProperties: Object, index: number): void;
     collapse(index: number): void;
     expand(index: number): void;

package/src/splitter/splitter.component.js

@@ -56,6 +56,7 @@ var SplitterComponent = /** @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     SplitterComponent.prototype.clearTemplate = function (templateNames) {
@@ -114,6 +115,9 @@ var SplitterComponent = /** @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    SplitterComponent.prototype.custom = function () {
+        this.updated();
+    };
     SplitterComponent.prototype.addPane = function (paneProperties, index) {
         return this.ej2Instances.addPane(paneProperties, index);
     };
@@ -133,7 +137,12 @@ var SplitterComponent = /** @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], SplitterComponent);
     return SplitterComponent;

package/styles/avatar/bootstrap5-dark.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;

package/styles/avatar/bootstrap5.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;

package/styles/avatar/fluent-dark.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #292827;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: #a19f9d;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 24px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 20px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 24px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/fluent-dark.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/fluent-dark.scss';

package/styles/avatar/fluent.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #edebe9;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: #605e5c;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 24px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 20px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 24px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/fluent.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/fluent.scss';

package/styles/bootstrap-dark.css

@@ -762,7 +762,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -770,7 +770,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -980,14 +980,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap.css

@@ -763,7 +763,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -771,7 +771,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -981,14 +981,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap4.css

@@ -769,7 +769,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -777,7 +777,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -987,14 +987,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap5-dark.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
@@ -106,6 +108,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -159,7 +162,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -357,6 +360,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -463,7 +467,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -578,7 +582,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #212529;
-  border: 1px solid #ced4da;
+  border: 1px solid #444c54;
   box-shadow: none;
   color: #fff;
   outline: none;
@@ -764,7 +768,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -772,7 +776,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -982,14 +986,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -1111,7 +1115,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1166,7 +1170,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1360,7 +1364,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: none;
+  border-bottom: 1px solid #444c54;
   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;