@syncfusion/ej2-layouts 19.2.55 → 19.3.48

package/src/splitter/splitter.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Property, setStyleAttribute, ChildProperty, compile, isBlazor } from '@syncfusion/ej2-base';
+import { Component, Property, setStyleAttribute, ChildProperty, compile } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, addClass, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Event, EventHandler, selectAll, removeClass, select, Browser, detach, formatUnit } from '@syncfusion/ej2-base';
 import { SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';
@@ -261,13 +261,15 @@ var Splitter = /** @class */ (function (_super) {
     };
     Splitter.prototype.preRender = function () {
         this.onReportWindowSize = this.reportWindowSize.bind(this);
+        this.onMouseMoveHandler = this.onMouseMove.bind(this);
+        this.onMouseUpHandler = this.onMouseUp.bind(this);
+        this.onTouchMoveHandler = this.onMouseMove.bind(this);
+        this.onTouchEndHandler = this.onMouseUp.bind(this);
         this.wrapper = this.element.cloneNode(true);
         this.wrapperParent = this.element.parentElement;
-        if (!this.checkBlazor()) {
-            removeClass([this.wrapper], ['e-control', 'e-lib', ROOT]);
-            var orientation_1 = this.orientation === 'Horizontal' ? HORIZONTAL_PANE : VERTICAL_PANE;
-            addClass([this.element], orientation_1);
-        }
+        removeClass([this.wrapper], ['e-control', 'e-lib', ROOT]);
+        var orientation = this.orientation === 'Horizontal' ? HORIZONTAL_PANE : VERTICAL_PANE;
+        addClass([this.element], orientation);
         var name = Browser.info.name;
         var css = (name === 'msie') ? 'e-ie' : '';
         this.setCssClass(this.element, css);
@@ -294,19 +296,15 @@ var Splitter = /** @class */ (function (_super) {
      * @private
      */
     Splitter.prototype.render = function () {
-        if (!this.checkBlazor()) {
-            this.checkDataAttributes();
-            this.setCssClass(this.element, this.cssClass);
-            this.isEnabled(this.enabled);
-            this.setDimension(this.getHeight(this.element), this.getWidth(this.element));
-        }
+        this.checkDataAttributes();
+        this.setCssClass(this.element, this.cssClass);
+        this.isEnabled(this.enabled);
+        this.setDimension(this.getHeight(this.element), this.getWidth(this.element));
         this.createSplitPane(this.element);
         this.addSeparator(this.element);
         this.getPanesDimensions();
         this.setPaneSettings();
-        if (!this.checkBlazor()) {
-            this.setRTL(this.enableRtl);
-        }
+        this.setRTL(this.enableRtl);
         if (this.enableReversePanes) {
             this.setReversePane();
         }
@@ -334,11 +332,15 @@ var Splitter = /** @class */ (function (_super) {
             this.totalPercent = previousFlexBasis + nextFlexBasis;
             this.totalWidth = this.convertPercentageToPixel(this.totalPercent + '%');
             if (e.type === 'keydown' && (!isNullOrUndefined(e.keyCode))) {
-                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0) {
+                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.nextPaneIndex].min) <
+                        this.convertPercentageToPixel((nextFlexBasis - 1) + '%'))) {
                     this.previousPane.style.flexBasis = (previousFlexBasis + 1) + '%';
                     this.nextPane.style.flexBasis = (nextFlexBasis - 1) + '%';
                 }
-                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0) {
+                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.prevPaneIndex].min) <
+                        this.convertPercentageToPixel((previousFlexBasis - 1) + '%'))) {
                     this.previousPane.style.flexBasis = (previousFlexBasis - 1) + '%';
                     this.nextPane.style.flexBasis = (nextFlexBasis + 1) + '%';
                 }
@@ -348,13 +350,15 @@ var Splitter = /** @class */ (function (_super) {
             this.totalWidth = (this.orientation === 'Horizontal') ? this.previousPane.offsetWidth + this.nextPane.offsetWidth :
                 this.previousPane.offsetHeight + this.nextPane.offsetHeight;
             if (e.type === 'keydown' && (!isNullOrUndefined(e.keyCode))) {
-                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0) {
+                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.nextPaneIndex].min) < (nextPaneSize + splitBarSize))) {
                     this.addStaticPaneClass();
                     this.previousPane.style.flexBasis = (prePaneSize + splitBarSize) + 'px';
                     this.nextPane.style.flexBasis = (nextPaneSize < splitBarSize) ? '0px' :
                         (nextPaneSize - splitBarSize) + 'px';
                 }
-                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0) {
+                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.prevPaneIndex].min) < (prePaneSize - splitBarSize))) {
                     this.addStaticPaneClass();
                     this.previousPane.style.flexBasis = (prePaneSize < splitBarSize) ? '0px' :
                         (prePaneSize - splitBarSize) + 'px';
@@ -375,11 +379,12 @@ var Splitter = /** @class */ (function (_super) {
                 && (!isPrevpaneExpanded && !isNextpaneCollapsed && !isPrevpaneCollapsed || (isPrevpaneExpanded) && !isNextpaneCollapsed) &&
                 document.activeElement.classList.contains(SPLIT_BAR) && (this.paneSettings[index].resizable &&
                 this.paneSettings[index + 1].resizable)) {
+                event.preventDefault();
                 this.checkPaneSize(event);
                 this.triggerResizing(event);
             }
             else if (event.keyCode === 13 && this.paneSettings[index].collapsible &&
-                document.activeElement.classList.contains(SPLIT_BAR)) {
+                document.activeElement.classList.contains(SPLIT_BAR) && this.currentSeparator.classList.contains(SPLIT_BAR_ACTIVE)) {
                 if (!this.previousPane.classList.contains(COLLAPSE_PANE)) {
                     this.collapse(index);
                     addClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
@@ -391,6 +396,18 @@ var Splitter = /** @class */ (function (_super) {
             }
         }
     };
+    Splitter.prototype.getMinInPixel = function (minValue) {
+        var min;
+        if (isNullOrUndefined(minValue)) {
+            return 0;
+        }
+        var paneMinRange = this.convertPixelToNumber(minValue.toString());
+        if (minValue.indexOf('%') > 0) {
+            paneMinRange = this.convertPercentageToPixel(minValue);
+        }
+        min = this.convertPixelToNumber((paneMinRange).toString());
+        return min;
+    };
     /**
      * @param {string} value - specifies the string value
      * @returns {string} returns the string
@@ -464,9 +481,6 @@ var Splitter = /** @class */ (function (_super) {
         });
         this.restoreElem();
     };
-    Splitter.prototype.checkBlazor = function () {
-        return isBlazor() && this.isServerRendered;
-    };
     Splitter.prototype.setPaneSettings = function () {
         var childCount = this.allPanes.length;
         var paneCollection = [];
@@ -866,52 +880,20 @@ var Splitter = /** @class */ (function (_super) {
         this.isResizable() ? this.allPanes[index].classList.add(RESIZABLE_PANE) : this.allPanes[index].classList.remove(RESIZABLE_PANE);
     };
     Splitter.prototype.addSeparator = function (target) {
-        var _this = this;
         var childCount = this.allPanes.length;
         var clonedEle = target.children;
         var separator;
         var proxy;
-        if (this.checkBlazor()) {
-            for (var j = 0; j < this.element.children.length; j++) {
-                if (this.element.children[j].classList.contains(SPLIT_BAR)) {
-                    this.allBars.push(this.element.children[j]);
-                }
-            }
-        }
         for (var i = 0; i < childCount; i++) {
             if (i < childCount - 1) {
-                if (!this.checkBlazor()) {
-                    separator = this.createSeparator(i);
-                    setStyleAttribute(separator, { 'order': (i * 2) + 1 });
-                    this.separatorOrder.push((i * 2) + 1);
-                    clonedEle[i].parentNode.appendChild(separator);
-                    this.currentSeparator = separator;
-                    separator.setAttribute('role', 'separator');
-                    separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
-                }
-                if (this.checkBlazor()) {
-                    proxy = this;
-                    separator = this.allBars[i];
-                    this.updateIconClass();
-                }
-                if (!this.checkBlazor()) {
-                    this.wireClickEvents();
-                }
-                if (this.checkBlazor() && !isNullOrUndefined(separator)) {
-                    this.currentSeparator = separator;
-                    this.addMouseActions(separator);
-                    this.wireClickEvents();
-                    separator.addEventListener('focus', function () {
-                        if (document.activeElement.classList.contains('e-split-bar')) {
-                            proxy.currentSeparator = document.activeElement;
-                            proxy.currentSeparator.classList.add(SPLIT_BAR_ACTIVE);
-                        }
-                        _this.getPaneDetails();
-                    });
-                    separator.addEventListener('blur', function () {
-                        proxy.currentSeparator.classList.remove(SPLIT_BAR_ACTIVE);
-                    });
-                }
+                separator = this.createSeparator(i);
+                setStyleAttribute(separator, { 'order': (i * 2) + 1 });
+                this.separatorOrder.push((i * 2) + 1);
+                clonedEle[i].parentNode.appendChild(separator);
+                this.currentSeparator = separator;
+                separator.setAttribute('role', 'separator');
+                separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
+                this.wireClickEvents();
                 if (!isNullOrUndefined(separator)) {
                     if (this.isResizable()) {
                         EventHandler.add(separator, 'mousedown', this.onMouseDown, this);
@@ -1100,21 +1082,21 @@ var Splitter = /** @class */ (function (_super) {
         }
     };
     Splitter.prototype.wireResizeEvents = function () {
-        EventHandler.add(document, 'mousemove', this.onMouseMove, this);
-        EventHandler.add(document, 'mouseup', this.onMouseUp, this);
+        document.addEventListener('mousemove', this.onMouseMoveHandler, true);
+        document.addEventListener('mouseup', this.onMouseUpHandler, true);
         var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';
         var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';
-        EventHandler.add(document, touchMoveEvent, this.onMouseMove, this);
-        EventHandler.add(document, touchEndEvent, this.onMouseUp, this);
+        document.addEventListener(touchMoveEvent, this.onTouchMoveHandler, true);
+        document.addEventListener(touchEndEvent, this.onTouchEndHandler, true);
     };
     Splitter.prototype.unwireResizeEvents = function () {
         this.element.ownerDocument.defaultView.removeEventListener('resize', this.onReportWindowSize);
         var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';
         var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';
-        EventHandler.remove(document, 'mousemove', this.onMouseMove);
-        EventHandler.remove(document, 'mouseup', this.onMouseUp);
-        EventHandler.remove(document, touchMoveEvent, this.onMouseMove);
-        EventHandler.remove(document, touchEndEvent, this.onMouseUp);
+        document.removeEventListener('mousemove', this.onMouseMoveHandler, true);
+        document.removeEventListener('mouseup', this.onMouseUpHandler, true);
+        document.removeEventListener(touchMoveEvent, this.onTouchMoveHandler, true);
+        document.removeEventListener(touchEndEvent, this.onTouchEndHandler, true);
     };
     Splitter.prototype.wireClickEvents = function () {
         EventHandler.add(this.currentSeparator, 'touchstart click', this.clickHandler, this);
@@ -1370,13 +1352,7 @@ var Splitter = /** @class */ (function (_super) {
         }
     };
     Splitter.prototype.beforeAction = function (e) {
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            separator: this.currentSeparator,
-            cancel: false
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1475,12 +1451,7 @@ var Splitter = /** @class */ (function (_super) {
         }
     };
     Splitter.prototype.afterAction = function (e) {
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            separator: this.currentSeparator
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1493,10 +1464,6 @@ var Splitter = /** @class */ (function (_super) {
         this.currentBarIndex = this.getOrderIndex(parseInt(e.target.parentElement.style.order, 10), 'splitbar');
     };
     Splitter.prototype.getSeparatorIndex = function (target) {
-        var separator = this.orientation === 'Horizontal' ? SPLIT_H_BAR : SPLIT_V_BAR;
-        if (this.checkBlazor() && this.allBars.length < 1) {
-            this.allBars = selectAll('.' + separator, this.element);
-        }
         var array = [].slice.call(this.allBars);
         array = this.enableReversePanes ? array.reverse() : array;
         return array.indexOf(target);
@@ -1526,13 +1493,7 @@ var Splitter = /** @class */ (function (_super) {
         this.getPaneDetails();
     };
     Splitter.prototype.triggerResizing = function (e) {
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            paneSize: [this.prePaneDimenson, this.nextPaneDimension],
-            separator: this.currentSeparator
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1553,13 +1514,7 @@ var Splitter = /** @class */ (function (_super) {
         addClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
         this.updateCursorPosition(e, 'previous');
         this.getPaneDetails();
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.getPreviousPaneIndex(), this.getNextPaneIndex()],
-            separator: this.currentSeparator,
-            cancel: false
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1944,13 +1899,7 @@ var Splitter = /** @class */ (function (_super) {
     Splitter.prototype.onMouseUp = function (e) {
         removeClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
         this.unwireResizeEvents();
-        var eventArgs = isBlazor() ? {
-            event: e,
-            element: this.element,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            separator: this.currentSeparator,
-            paneSize: [this.prePaneDimenson, this.nextPaneDimension]
-        } : {
+        var eventArgs = {
             event: e,
             element: this.element,
             pane: [this.previousPane, this.nextPane],
@@ -2054,12 +2003,7 @@ var Splitter = /** @class */ (function (_super) {
         }
         var templateFUN;
         if (!isNullOrUndefined(templateFn)) {
-            if (isBlazor() && !this.isStringTemplate) {
-                templateFUN = templateFn({}, this, prop, this.element.id + 'content' + this.allPanes.length.toString(), this.isStringTemplate);
-            }
-            else {
-                templateFUN = templateFn({}, this, prop, this.element.id + 'content' + this.allPanes.length.toString(), true);
-            }
+            templateFUN = templateFn({}, this, prop, this.element.id + 'content' + this.allPanes.length.toString(), true);
         }
         if (!isNullOrUndefined(templateFn) && templateFUN && templateFUN.length > 0) {
             [].slice.call(templateFUN).forEach(function (el) {
@@ -2073,13 +2017,11 @@ var Splitter = /** @class */ (function (_super) {
     };
     Splitter.prototype.createSplitPane = function (target) {
         var childCount = target.children.length;
-        if (!this.checkBlazor()) {
-            for (var i = 0; i < this.paneSettings.length; i++) {
-                if (childCount < this.paneSettings.length) {
-                    var childElement = this.createElement('div');
-                    this.element.appendChild(childElement);
-                    childCount = childCount + 1;
-                }
+        for (var i = 0; i < this.paneSettings.length; i++) {
+            if (childCount < this.paneSettings.length) {
+                var childElement = this.createElement('div');
+                this.element.appendChild(childElement);
+                childCount = childCount + 1;
             }
         }
         childCount = target.children.length;
@@ -2089,30 +2031,23 @@ var Splitter = /** @class */ (function (_super) {
             for (var i = 0; i < childCount; i++) {
                 // To accept only div and span element as pane
                 if (child[i].nodeName === 'DIV' || child[i].nodeName === 'SPAN') {
-                    if (this.checkBlazor() && child[i].classList.contains(PANE)) {
-                        this.allPanes.push(child[i]);
+                    this.allPanes.push(child[i]);
+                    if (this.orientation === 'Horizontal') {
+                        addClass([child[i]], [PANE, SPLIT_H_PANE, SCROLL_PANE]);
+                        this.panesDimension(i, child);
                     }
-                    else if (!this.checkBlazor()) {
-                        this.allPanes.push(child[i]);
+                    else {
+                        addClass([child[i]], [PANE, SPLIT_V_PANE, SCROLL_PANE]);
+                        this.panesDimension(i, child);
                     }
-                    if (!this.checkBlazor()) {
-                        if (this.orientation === 'Horizontal') {
-                            addClass([child[i]], [PANE, SPLIT_H_PANE, SCROLL_PANE]);
-                            this.panesDimension(i, child);
-                        }
-                        else {
-                            addClass([child[i]], [PANE, SPLIT_V_PANE, SCROLL_PANE]);
-                            this.panesDimension(i, child);
-                        }
-                        if (!isNullOrUndefined(this.paneSettings[i]) && !isNullOrUndefined(this.paneSettings[i].content)) {
-                            this.setTemplate(this.paneSettings[i].content, child[i]);
-                        }
-                        if (!isNullOrUndefined(this.paneSettings[i]) && this.paneSettings[i].cssClass) {
-                            this.setCssClass(child[i], this.paneSettings[i].cssClass);
-                        }
-                        if (!isNullOrUndefined(this.paneSettings[i])) {
-                            this.paneCollapsible(child[i], i);
-                        }
+                    if (!isNullOrUndefined(this.paneSettings[i]) && !isNullOrUndefined(this.paneSettings[i].content)) {
+                        this.setTemplate(this.paneSettings[i].content, child[i]);
+                    }
+                    if (!isNullOrUndefined(this.paneSettings[i]) && this.paneSettings[i].cssClass) {
+                        this.setCssClass(child[i], this.paneSettings[i].cssClass);
+                    }
+                    if (!isNullOrUndefined(this.paneSettings[i])) {
+                        this.paneCollapsible(child[i], i);
                     }
                 }
             }
@@ -2145,24 +2080,15 @@ var Splitter = /** @class */ (function (_super) {
      */
     Splitter.prototype.destroy = function () {
         if (!this.isDestroyed) {
-            if (!this.checkBlazor()) {
-                _super.prototype.destroy.call(this);
-            }
+            _super.prototype.destroy.call(this);
             EventHandler.remove(document, 'touchstart click', this.onDocumentClick);
+            this.element.ownerDocument.defaultView.removeEventListener('resize', this.onReportWindowSize, true);
             while (this.element.attributes.length > 0) {
                 this.element.removeAttribute(this.element.attributes[0].name);
             }
-            if (this.checkBlazor()) {
-                var splitNodes = this.element.children;
-                for (var i = splitNodes.length - 1; i >= 0; i--) {
-                    detach(splitNodes[i]);
-                }
-            }
-            else {
-                this.element.innerHTML = this.wrapper.innerHTML;
-                for (var i = 0; i < this.wrapper.attributes.length; i++) {
-                    this.element.setAttribute(this.wrapper.attributes[i].name, this.wrapper.attributes[i].value);
-                }
+            this.element.innerHTML = this.wrapper.innerHTML;
+            for (var i = 0; i < this.wrapper.attributes.length; i++) {
+                this.element.setAttribute(this.wrapper.attributes[i].name, this.wrapper.attributes[i].value);
             }
             if (this.refreshing) {
                 addClass([this.element], ['e-control', 'e-lib', ROOT]);

package/styles/avatar/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/avatar/_bootstrap5-definition.scss

@@ -0,0 +1,25 @@
+// Avatar Base
+$avatar-base-border-radius: 2px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;

package/styles/avatar/_layout.scss

@@ -17,7 +17,7 @@
     overflow: hidden;
     position: relative;
     width: $avatar-base-width;
-    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
       line-height: $avatar-base-line-height;
     }
 
@@ -32,7 +32,7 @@
 
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
         height: 24px;
         line-height: $avatar-base-xsmall-line-height;
         width: 24px;
@@ -41,7 +41,7 @@
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
         height: 32px;
         line-height: $avatar-base-small-line-height;
         width: 32px;
@@ -50,7 +50,7 @@
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
         height: 48px;
         line-height: $avatar-base-large-line-height;
         width: 48px;
@@ -59,7 +59,7 @@
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5') {
         height: 56px;
         line-height: $avatar-base-xlarge-line-height;
         width: 56px;

package/styles/avatar/_tailwind-dark-definition.scss

@@ -1,25 +1 @@
-// Avatar Base
-$avatar-base-border-radius: 4px !default;
-$avatar-base-background-color: $content-bg-color-alt3 !default;
-$avatar-base-font-size: $text-sm !default;
-$avatar-base-width: 40px !default;
-$avatar-base-height: 40px !default;
-$avatar-base-line-height: 22px !default;
-$avatar-base-text-color: $content-text-color-alt2 !default;
-$avatar-base-font-weight: $font-weight-medium !default;
-$avatar-base-img-height: 100% !default;
-
-// Circle Avatar
-$avatar-circle-border-radius: 50% !default;
-
-// Avatar size
-$avatar-xsmall-font-size: $text-xxs !default;
-$avatar-small-font-size: $text-xs !default;
-$avatar-large-font-size: $text-lg !default;
-$avatar-xlarge-font-size: $text-xl !default;
-
-// Avatar Line Height
-$avatar-base-xsmall-line-height: 16px !default;
-$avatar-base-small-line-height: 18px !default;
-$avatar-base-large-line-height: 28px !default;
-$avatar-base-xlarge-line-height: 28px !default;
+@import './tailwind-definition.scss';

package/styles/avatar/bootstrap5-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: #495057;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 2px;
+  color: #adb5bd;
+  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;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+
+.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: 18px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/bootstrap5-dark.scss

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

package/styles/avatar/bootstrap5.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #dee2e6;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 2px;
+  color: #6c757d;
+  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;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+
+.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: 18px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/bootstrap5.scss

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