@syncfusion/ej2-layouts 26.2.10 → 27.1.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.2.10
+*  version : 27.1.48
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@26.2.5",
+  "_id": "@syncfusion/ej2-layouts@21.4.6",
   "_inBundle": false,
-  "_integrity": "sha512-AFr8E+b5BDE2+WYyTjs+0p+tLEkdfWNNb03jrvNdSKLpiA5BrEtkfi0OM7aEeQBvxDmzF3Jc+gMhz8KCynAbaA==",
+  "_integrity": "sha512-fcmMpxibtqFpKhshnSLcQrl7IHeHQ7l4z9xJiHv3JSh5cMvj71Pe3G6ZCbscAb6Ca1WOtshbQhIOo5HD4KPAfA==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -26,16 +26,17 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-26.2.5.tgz",
-  "_shasum": "55079d626d6b05e81892f9a9930f1dc103d79f6b",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-21.4.6.tgz",
+  "_shasum": "06f30ac02c1763988dbc0467af2326a13425b05f",
   "_spec": "@syncfusion/ej2-layouts@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.2.10"
+    "@syncfusion/ej2-base": "~27.1.48",
+    "markdown-spellcheck": "^1.3.1"
   },
   "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.",
@@ -75,7 +76,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "26.2.10",
+  "version": "27.1.48",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/splitter/splitter.js

@@ -954,7 +954,9 @@ var Splitter = /** @class */ (function (_super) {
                 this.currentSeparator = separator;
                 separator.setAttribute('role', 'separator');
                 separator.setAttribute('aria-valuenow', i.toString());
-                separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
+                if (!isNullOrUndefined(this.orientation)) {
+                    separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
+                }
                 this.wireClickEvents();
                 if (!isNullOrUndefined(separator)) {
                     if (this.isResizable()) {

package/styles/avatar/_layout.scss

@@ -48,34 +48,34 @@
 
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(24px, 24px, $avatar-base-xsmall-line-height);
       }
     }
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(32px, 32px, $avatar-base-small-line-height);
       }
     }
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(48px, 48px, $avatar-base-large-line-height);
       }
-      @if ($skin-name == 'bootstrap5') {
+      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
         border-radius: $avatar-large-border-radius;
       }
     }
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(56px, 56px, $avatar-base-xlarge-line-height);
       }
-      @if ($skin-name == 'bootstrap5') {
+      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
         border-radius: $avatar-large-border-radius;
       }
     }

package/styles/avatar/bootstrap5.3.css

@@ -0,0 +1,66 @@
+
+
+
+
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-color: var(--color-sf-content-bg-color-alt3);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 2px;
+  color: var(--color-sf-icon-color);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  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;
+  font-weight: 500;
+  height: 40px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+}
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  width: 24px;
+  line-height: 16px;
+}
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  width: 32px;
+  line-height: 18px;
+}
+.e-avatar.e-avatar-large {
+  font-size: 18px;
+  height: 48px;
+  width: 48px;
+  line-height: 28px;
+  border-radius: 4px;
+}
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  width: 56px;
+  line-height: 28px;
+  border-radius: 4px;
+}

package/styles/avatar/bootstrap5.3.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/definition/bootstrap5.3.scss';
+@import 'bootstrap5.3-definition.scss';
+@import 'all.scss';