@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/src/sidebar/sidebar.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -17,8 +17,8 @@ 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, formatUnit, EventHandler, Event, isNullOrUndefined, closest } from '@syncfusion/ej2-base';
-import { Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';
+import { Component, formatUnit, EventHandler, Event, isNullOrUndefined, closest, Browser } from '@syncfusion/ej2-base';
+import { Property, NotifyPropertyChanges, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { setStyleAttribute as setStyle, addClass, removeClass, Touch } from '@syncfusion/ej2-base';
 var CONTROL = 'e-control';
 var ROOT = 'e-sidebar';
@@ -35,6 +35,7 @@ var OVER = 'e-over';
 var PUSH = 'e-push';
 var SLIDE = 'e-slide';
 var VISIBILITY = 'e-visibility';
+var DISPLAY = 'e-sidebar-display';
 var MAINCONTENTANIMATION = 'e-content-animation';
 var DISABLEANIMATION = 'e-disable-animation';
 var CONTEXT = 'e-sidebar-context';
@@ -55,6 +56,7 @@ var SIDEBARABSOLUTE = 'e-sidebar-absolute';
  */
 var Sidebar = /** @class */ (function (_super) {
     __extends(Sidebar, _super);
+    /* eslint-enable */
     function Sidebar(options, element) {
         return _super.call(this, options, element) || this;
     }
@@ -64,6 +66,7 @@ var Sidebar = /** @class */ (function (_super) {
     Sidebar.prototype.render = function () {
         this.initialize();
         this.wireEvents();
+        this.renderComplete();
     };
     Sidebar.prototype.initialize = function () {
         this.setTarget();
@@ -74,19 +77,25 @@ var Sidebar = /** @class */ (function (_super) {
         }
         if (this.isOpen) {
             this.show();
+            this.firstRender = true;
         }
         else {
             this.setMediaQuery();
         }
+        this.checkType(true);
         this.setType(this.type);
         this.setCloseOnDocumentClick();
         this.setEnableRTL();
+        if (Browser.isDevice) {
+            this.windowWidth = window.innerWidth;
+        }
     };
     Sidebar.prototype.setEnableRTL = function () {
-        this.enableRtl ? (addClass([this.element], RTL)) :
-            (removeClass([this.element], RTL));
+        (this.enableRtl ? addClass : removeClass)([this.element], RTL);
     };
     Sidebar.prototype.setTarget = function () {
+        this.targetEle = this.element.nextElementSibling;
+        this.sidebarEleCopy = this.element.cloneNode(true);
         if (typeof (this.target) === 'string') {
             this.setProperties({ target: document.querySelector(this.target) }, true);
         }
@@ -94,7 +103,18 @@ var Sidebar = /** @class */ (function (_super) {
             this.target.insertBefore(this.element, this.target.children[0]);
             addClass([this.element], SIDEBARABSOLUTE);
             addClass([this.target], CONTEXT);
+            this.targetEle = this.getTargetElement();
+        }
+    };
+    Sidebar.prototype.getTargetElement = function () {
+        var siblingElement = this.element.nextElementSibling;
+        while (!isNOU(siblingElement)) {
+            if (!siblingElement.classList.contains(ROOT)) {
+                break;
+            }
+            siblingElement = siblingElement.nextElementSibling;
         }
+        return siblingElement;
     };
     Sidebar.prototype.setCloseOnDocumentClick = function () {
         if (this.closeOnDocumentClick) {
@@ -131,31 +151,55 @@ var Sidebar = /** @class */ (function (_super) {
         setStyle(this.element, { 'z-index': '' + this.zIndex });
     };
     Sidebar.prototype.addClass = function () {
+        if (this.element.tagName === 'EJS-SIDEBAR') {
+            addClass([this.element], DISPLAY);
+        }
         var classELement = document.querySelector('.e-main-content');
-        if (!isNullOrUndefined((classELement ||
-            this.element.nextElementSibling))) {
-            addClass([classELement || this.element.nextElementSibling], [MAINCONTENTANIMATION]);
+        if (!isNullOrUndefined(classELement || this.targetEle)) {
+            addClass([classELement || this.targetEle], [MAINCONTENTANIMATION]);
         }
+        this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : null;
         if (!this.enableDock && this.type !== 'Auto') {
             addClass([this.element], [VISIBILITY]);
         }
         removeClass([this.element], [OPEN, CLOSE, RIGHT, LEFT, SLIDE, PUSH, OVER]);
         this.element.classList.add(ROOT);
         addClass([this.element], (this.position === 'Right') ? RIGHT : LEFT);
-        if (this.type === 'Auto' && !Browser.isDevice && !this.enableDock) {
-            this.setProperties({ isOpen: true }, true);
-            addClass([this.element], OPEN);
+        if (this.enableDock) {
+            addClass([this.element], DOCKER);
         }
-        else {
-            this.setProperties({ isOpen: false }, true);
+        if (!isNullOrUndefined(this.tabIndex)) {
+            this.element.setAttribute('tabindex', this.tabIndex);
+        }
+        if (this.type === 'Auto' && !Browser.isDevice) {
+            this.show();
+        }
+        else if (!this.isOpen) {
             addClass([this.element], CLOSE);
         }
     };
+    Sidebar.prototype.checkType = function (val) {
+        if (!(this.type === 'Push' || this.type === 'Over' || this.type === 'Slide')) {
+            this.type = 'Auto';
+        }
+        else {
+            if (!this.element.classList.contains(CLOSE) && !val) {
+                this.hide();
+            }
+        }
+    };
+    Sidebar.prototype.transitionEnd = function (e) {
+        this.setDock();
+        if (!isNullOrUndefined(e) && !this.firstRender) {
+            this.triggerChange();
+        }
+        this.firstRender = false;
+        EventHandler.remove(this.element, 'transitionend', this.transitionEnd);
+    };
     Sidebar.prototype.destroyBackDrop = function () {
-        var sibling = document.querySelector('.e-main-content') ||
-            this.element.nextElementSibling;
-        if (this.target && this.showBackdrop && sibling) {
-            removeClass([sibling], CONTEXTBACKDROP);
+        var sibling = document.querySelector('.e-main-content') || this.targetEle;
+        if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
+            removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -163,72 +207,110 @@ var Sidebar = /** @class */ (function (_super) {
             this.modal = null;
         }
     };
+    /* eslint-disable */
     /**
      * Hide the Sidebar component, if it is in an open state.
-     * @returns void
+     *
+     * @returns {void}
+     *
      */
-    Sidebar.prototype.hide = function () {
-        var closeArguments = { model: this, element: this.element, cancel: false };
-        this.trigger('close', closeArguments);
-        if (!closeArguments.cancel) {
-            if (this.element.classList.contains(CLOSE)) {
-                return;
+    Sidebar.prototype.hide = function (e) {
+        var _this = this;
+        var closeArguments = {
+            model: this,
+            element: this.element,
+            cancel: false,
+            isInteracted: !isNullOrUndefined(e),
+            event: (e || null)
+        };
+        this.trigger('close', closeArguments, function (observedcloseArgs) {
+            if (!observedcloseArgs.cancel) {
+                if (_this.element.classList.contains(CLOSE)) {
+                    return;
+                }
+                if (_this.element.classList.contains(OPEN) && !_this.animate) {
+                    _this.triggerChange();
+                }
+                addClass([_this.element], CLOSE);
+                removeClass([_this.element], OPEN);
+                setStyle(_this.element, { 'width': formatUnit(_this.enableDock ? _this.dockSize : _this.width) });
+                _this.setType(_this.type);
+                var sibling = document.querySelector('.e-main-content') || _this.targetEle;
+                if (!_this.enableDock && sibling) {
+                    sibling.style.transform = 'translateX(' + 0 + 'px)';
+                    sibling.style[_this.position === 'Left' ? 'marginLeft' : 'marginRight'] = '0px';
+                }
+                _this.destroyBackDrop();
+                _this.setAnimation();
+                if (_this.type === 'Slide') {
+                    document.body.classList.remove('e-sidebar-overflow');
+                }
+                _this.setProperties({ isOpen: false }, true);
+                if (_this.enableDock) {
+                    setTimeout(function () { return _this.setTimeOut(); }, 50);
+                }
+                EventHandler.add(_this.element, 'transitionend', _this.transitionEnd, _this);
+            }
+        });
+    };
+    Sidebar.prototype.setTimeOut = function () {
+        var sibling = document.querySelector('.e-main-content') || this.targetEle;
+        var elementWidth = this.element.getBoundingClientRect().width;
+        if (this.element.classList.contains(OPEN) && sibling && !(this.type === 'Over' && this.enableDock)) {
+            if (this.position === 'Left') {
+                sibling.style.marginLeft = this.setDimension(this.width === 'auto' ? elementWidth : this.width);
             }
-            if (this.element.classList.contains(OPEN)) {
-                var changeArguments = { name: 'change', element: this.element };
-                this.trigger('change', changeArguments);
+            else {
+                sibling.style.marginRight = this.setDimension(this.width === 'auto' ? elementWidth : this.width);
             }
-            addClass([this.element], CLOSE);
-            removeClass([this.element], OPEN);
-            this.enableDock ? setStyle(this.element, { 'width': formatUnit(this.dockSize) }) :
-                setStyle(this.element, { 'width': formatUnit(this.width) });
-            this.setDock();
-            this.setType(this.type);
-            var sibling = document.querySelector('.e-main-content') ||
-                this.element.nextElementSibling;
-            if (!this.enableDock && sibling) {
-                sibling.style.transform = 'translateX(' + 0 + 'px)';
-                this.position === 'Left' ? sibling.style.marginLeft = '0px' : sibling.style.marginRight = '0px';
+        }
+        else if (this.element.classList.contains(CLOSE) && sibling) {
+            if (this.position === 'Left') {
+                sibling.style.marginLeft = this.setDimension(this.dockSize === 'auto' ? elementWidth : this.dockSize);
             }
-            this.destroyBackDrop();
-            this.setCloseOnDocumentClick();
-            this.setAnimation();
-            if (this.type === 'Slide') {
-                document.body.classList.remove('e-sidebar-overflow');
+            else {
+                sibling.style.marginRight = this.setDimension(this.dockSize === 'auto' ? elementWidth : this.dockSize);
             }
-            this.setProperties({ isOpen: false }, true);
         }
     };
+    /* eslint-disable */
     /**
      * Shows the Sidebar component, if it is in closed state.
-     * @returns void
+     *
+     * @returns {void}
      */
-    Sidebar.prototype.show = function () {
-        var openArguments = { model: this, element: this.element, cancel: false };
-        this.trigger('open', openArguments);
-        if (!openArguments.cancel) {
-            removeClass([this.element], VISIBILITY);
-            if (this.element.classList.contains(OPEN)) {
-                return;
-            }
-            if (this.element.classList.contains(CLOSE)) {
-                var changeArguments = { name: 'change', element: this.element };
-                this.trigger('change', changeArguments);
-            }
-            addClass([this.element], [OPEN, TRASITION]);
-            setStyle(this.element, { 'transform': '' });
-            removeClass([this.element], CLOSE);
-            setStyle(this.element, { 'width': formatUnit(this.width) });
-            var elementWidth = this.element.getBoundingClientRect().width;
-            this.setType(this.type);
-            this.createBackDrop();
-            this.setCloseOnDocumentClick();
-            this.setAnimation();
-            if (this.type === 'Slide') {
-                document.body.classList.add('e-sidebar-overflow');
+    Sidebar.prototype.show = function (e) {
+        var _this = this;
+        var openArguments = {
+            model: this,
+            element: this.element,
+            cancel: false,
+            isInteracted: !isNullOrUndefined(e),
+            event: (e || null)
+        };
+        this.trigger('open', openArguments, function (observedopenArgs) {
+            if (!observedopenArgs.cancel) {
+                removeClass([_this.element], VISIBILITY);
+                if (_this.element.classList.contains(OPEN)) {
+                    return;
+                }
+                if (_this.element.classList.contains(CLOSE) && !_this.animate) {
+                    _this.triggerChange();
+                }
+                addClass([_this.element], [OPEN, TRASITION]);
+                setStyle(_this.element, { 'transform': '' });
+                removeClass([_this.element], CLOSE);
+                setStyle(_this.element, { 'width': formatUnit(_this.width) });
+                _this.setType(_this.type);
+                _this.createBackDrop();
+                _this.setAnimation();
+                if (_this.type === 'Slide') {
+                    document.body.classList.add('e-sidebar-overflow');
+                }
+                _this.setProperties({ isOpen: true }, true);
+                EventHandler.add(_this.element, 'transitionend', _this.transitionEnd, _this);
             }
-            this.setProperties({ isOpen: true }, true);
-        }
+        });
     };
     Sidebar.prototype.setAnimation = function () {
         if (this.animate) {
@@ -238,6 +320,10 @@ var Sidebar = /** @class */ (function (_super) {
             addClass([this.element], DISABLEANIMATION);
         }
     };
+    Sidebar.prototype.triggerChange = function () {
+        var changeArguments = { name: 'change', element: this.element };
+        this.trigger('change', changeArguments);
+    };
     Sidebar.prototype.setDock = function () {
         if (this.enableDock && this.position === 'Left' && !this.getState()) {
             setStyle(this.element, { 'transform': 'translateX(' + -100 + '%) translateX(' + this.setDimension(this.dockSize) + ')' });
@@ -250,10 +336,13 @@ var Sidebar = /** @class */ (function (_super) {
         }
     };
     Sidebar.prototype.createBackDrop = function () {
-        if (this.target && this.showBackdrop) {
-            var sibling = document.querySelector('.e-main-content') ||
-                this.element.nextElementSibling;
-            addClass([sibling], CONTEXTBACKDROP);
+        if (this.target && this.showBackdrop && this.getState()) {
+            var targetString = this.target;
+            var sibling = document.querySelector('.e-main-content') || this.targetEle;
+            this.defaultBackdropDiv = this.createElement('div');
+            addClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            setStyle(this.defaultBackdropDiv, { height: targetString.style.height });
+            sibling.appendChild(this.defaultBackdropDiv);
         }
         else if (this.showBackdrop && !this.modal && this.getState()) {
             this.modal = this.createElement('div');
@@ -267,31 +356,48 @@ var Sidebar = /** @class */ (function (_super) {
     };
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - returns module name.
      * @private
+     *
      */
     Sidebar.prototype.getModuleName = function () {
         return 'sidebar';
     };
     /**
      * Shows or hides the Sidebar based on the current state.
-     * @returns void
+     *
+     * @returns {void}
      */
-    Sidebar.prototype.toggle = function (e) {
-        this.element.classList.contains(OPEN) ? this.hide() : this.show();
+    Sidebar.prototype.toggle = function () {
+        if (this.element.classList.contains(OPEN)) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
     };
     Sidebar.prototype.getState = function () {
         return this.element.classList.contains(OPEN) ? true : false;
     };
     Sidebar.prototype.setMediaQuery = function () {
-        if (this.mediaQuery && this.mediaQuery.matches) {
-            this.show();
-        }
-        else if (this.mediaQuery && this.getState()) {
-            this.hide();
+        if (this.mediaQuery) {
+            var media = false;
+            if (typeof (this.mediaQuery) === 'string') {
+                media = window.matchMedia(this.mediaQuery).matches;
+            }
+            else {
+                media = (this.mediaQuery).matches;
+            }
+            if (media && this.windowWidth !== window.innerWidth) {
+                this.show();
+            }
+            else if (this.getState() && this.windowWidth !== window.innerWidth) {
+                this.hide();
+            }
         }
     };
-    Sidebar.prototype.resize = function (e) {
+    Sidebar.prototype.resize = function () {
         if (this.type === 'Auto') {
             if (Browser.isDevice) {
                 addClass([this.element], OVER);
@@ -301,25 +407,28 @@ var Sidebar = /** @class */ (function (_super) {
             }
         }
         this.setMediaQuery();
+        if (Browser.isDevice) {
+            this.windowWidth = window.innerWidth;
+        }
     };
     Sidebar.prototype.documentclickHandler = function (e) {
         if (closest(e.target, '.' + CONTROL + '' + '.' + ROOT)) {
             return;
         }
-        this.hide();
+        this.hide(e);
     };
     Sidebar.prototype.enableGestureHandler = function (args) {
-        if (this.position === 'Left' && args.swipeDirection === 'Right' &&
+        if (!this.isOpen && this.position === 'Left' && args.swipeDirection === 'Right' &&
             (args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {
             this.show();
         }
-        else if (this.position === 'Left' && args.swipeDirection === 'Left') {
+        else if (this.isOpen && this.position === 'Left' && args.swipeDirection === 'Left') {
             this.hide();
         }
-        else if (this.position === 'Right' && args.swipeDirection === 'Right') {
+        else if (this.isOpen && this.position === 'Right' && args.swipeDirection === 'Right') {
             this.hide();
         }
-        else if (this.position === 'Right' && args.swipeDirection === 'Left'
+        else if (!this.isOpen && this.position === 'Right' && args.swipeDirection === 'Left'
             && (window.innerWidth - args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {
             this.show();
         }
@@ -338,10 +447,10 @@ var Sidebar = /** @class */ (function (_super) {
     };
     Sidebar.prototype.wireEvents = function () {
         this.setEnableGestures();
-        window.addEventListener('resize', this.resize.bind(this));
+        EventHandler.add(window, 'resize', this.resize, this);
     };
     Sidebar.prototype.unWireEvents = function () {
-        window.removeEventListener('resize', this.resize.bind(this));
+        EventHandler.remove(window, 'resize', this.resize);
         EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);
         if (this.mainContentEle) {
             this.mainContentEle.destroy();
@@ -350,14 +459,28 @@ var Sidebar = /** @class */ (function (_super) {
             this.sidebarEle.destroy();
         }
     };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param {SidebarModel} newProp - specifies newProp value.
+     * @param {SidebarModel} oldProp - specifies oldProp value.
+     * @returns {void}
+     * @private
+     *
+     */
     Sidebar.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var sibling = document.querySelector('.e-main-content') ||
-            this.element.nextElementSibling;
+        var sibling = document.querySelector('.e-main-content') || this.targetEle;
+        var isRendered = this.isServerRendered;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
                 case 'isOpen':
-                    this.isOpen ? this.show() : this.hide();
+                    if (this.isOpen) {
+                        this.show();
+                    }
+                    else {
+                        this.hide();
+                    }
                     break;
                 case 'width':
                     this.setWidth();
@@ -369,15 +492,17 @@ var Sidebar = /** @class */ (function (_super) {
                     this.setAnimation();
                     break;
                 case 'type':
+                    this.checkType(false);
                     removeClass([this.element], [VISIBILITY]);
                     this.addClass();
-                    this.setType(this.type);
+                    addClass([this.element], this.type === 'Auto' ? (Browser.isDevice ? ['e-over'] :
+                        ['e-push']) : ['e-' + this.type.toLowerCase()]);
                     break;
                 case 'position':
                     this.element.style.transform = '';
                     this.setDock();
                     if (sibling) {
-                        this.position === 'Left' ? sibling.style.marginRight = '0px' : sibling.style.marginLeft = '0px';
+                        sibling.style[this.position === 'Left' ? 'marginRight' : 'marginLeft'] = '0px';
                     }
                     if (this.position === 'Right') {
                         removeClass([this.element], LEFT);
@@ -411,9 +536,9 @@ var Sidebar = /** @class */ (function (_super) {
                         setStyle(sibling, { 'margin-left': 0, 'margin-right': 0 });
                         document.body.insertAdjacentElement('afterbegin', this.element);
                     }
-                    else {
-                        _super.prototype.refresh.call(this);
-                    }
+                    this.isServerRendered = false;
+                    _super.prototype.refresh.call(this);
+                    this.isServerRendered = isRendered;
                     break;
                 case 'closeOnDocumentClick':
                     this.setCloseOnDocumentClick();
@@ -441,15 +566,11 @@ var Sidebar = /** @class */ (function (_super) {
     Sidebar.prototype.setType = function (type) {
         var elementWidth = this.element.getBoundingClientRect().width;
         this.setZindex();
-        if (this.enableDock) {
-            addClass([this.element], DOCKER);
-        }
-        var sibling = document.querySelector('.e-main-content') ||
-            this.element.nextElementSibling;
+        var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (sibling) {
             sibling.style.transform = 'translateX(' + 0 + 'px)';
-            if (!Browser.isDevice && this.type !== 'Auto') {
-                this.position === 'Left' ? sibling.style.marginLeft = '0px' : sibling.style.marginRight = '0px';
+            if (!Browser.isDevice && this.type !== 'Auto' && !(this.type === 'Over' && this.enableDock)) {
+                sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = '0px';
             }
         }
         var margin = this.position === 'Left' ? elementWidth + 'px' : elementWidth + 'px';
@@ -459,7 +580,7 @@ var Sidebar = /** @class */ (function (_super) {
             case 'Push':
                 addClass([this.element], [PUSH]);
                 if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {
-                    this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;
+                    sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
                 }
                 break;
             case 'Slide':
@@ -470,9 +591,9 @@ var Sidebar = /** @class */ (function (_super) {
                 break;
             case 'Over':
                 addClass([this.element], [OVER]);
-                if (this.enableDock && this.element.classList.contains(CLOSE)) {
+                if (this.enableDock && (this.element.classList.contains(CLOSE) || this.isOpen)) {
                     if (sibling) {
-                        this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = this.setDimension(this.dockSize);
                     }
                 }
                 break;
@@ -480,7 +601,7 @@ var Sidebar = /** @class */ (function (_super) {
                 addClass([this.element], [TRASITION]);
                 if (Browser.isDevice) {
                     if (sibling && (this.enableDock) && !this.getState()) {
-                        this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
                         addClass([this.element], PUSH);
                     }
                     else {
@@ -490,30 +611,39 @@ var Sidebar = /** @class */ (function (_super) {
                 else {
                     addClass([this.element], PUSH);
                     if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {
-                        this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
                     }
-                    this.setProperties({ isOpen: true }, true);
                 }
                 this.createBackDrop();
         }
     };
     /**
      * Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
-     * @returns void
+     *
+     * @returns {void}
+     *
      */
     Sidebar.prototype.destroy = function () {
         _super.prototype.destroy.call(this);
-        removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION]);
         if (this.target) {
-            removeClass([this.element], SIDEBARABSOLUTE);
             removeClass([this.target], CONTEXT);
         }
         this.destroyBackDrop();
-        this.element.style.width = '';
-        this.element.style.zIndex = '';
-        this.element.style.transform = '';
-        var sibling = document.querySelector('.e-main-content')
-            || this.element.nextElementSibling;
+        if (this.element) {
+            removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION]);
+            removeClass([this.element], SIDEBARABSOLUTE);
+            this.element.style.width = '';
+            this.element.style.zIndex = '';
+            this.element.style.transform = '';
+            if (!isNullOrUndefined(this.sidebarEleCopy.getAttribute('tabindex'))) {
+                this.element.setAttribute('tabindex', this.tabIndex);
+            }
+            else {
+                this.element.removeAttribute('tabindex');
+            }
+        }
+        this.windowWidth = null;
+        var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (!isNullOrUndefined(sibling)) {
             sibling.style.margin = '';
             sibling.style.transform = '';