@syncfusion/ej2-navigations 28.1.39 → 28.2.3-1479479

package/blazorGlobalSrc/sidebar/sidebar.js

@@ -0,0 +1,729 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, 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';
+var DOCKER = 'e-dock';
+var CLOSE = 'e-close';
+var OPEN = 'e-open';
+var TRASITION = 'e-transition';
+var DEFAULTBACKDROP = 'e-sidebar-overlay';
+var RTL = 'e-rtl';
+var RIGHT = 'e-right';
+var LEFT = 'e-left';
+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';
+var SIDEBARABSOLUTE = 'e-sidebar-absolute';
+/**
+ * Sidebar is an expandable or collapsible
+ * component that typically act as a side container to place the primary or secondary content alongside of the main content.
+ * ```html
+ * <aside id="sidebar">
+ * </aside>
+ * ```
+ * ```typescript
+ * <script>
+ *   let sidebarObject: Sidebar = new Sidebar();
+ *   sidebarObject.appendTo("#sidebar");
+ * </script>
+ * ```
+ */
+var Sidebar = /** @class */ (function (_super) {
+    __extends(Sidebar, _super);
+    function Sidebar(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.documentClickContext = _this.documentclickHandler.bind(_this);
+        return _this;
+    }
+    Sidebar.prototype.preRender = function () {
+        this.setWidth();
+    };
+    Sidebar.prototype.render = function () {
+        this.initialize();
+        this.wireEvents();
+        this.renderComplete();
+    };
+    Sidebar.prototype.initialize = function () {
+        this.setTarget();
+        this.addClass();
+        this.setZindex();
+        if (this.enableDock) {
+            this.setDock();
+        }
+        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 : 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);
+        }
+        if (this.target) {
+            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) {
+            document.addEventListener('mousedown', this.documentClickContext);
+            document.addEventListener('touchstart', this.documentClickContext);
+        }
+        else {
+            document.removeEventListener('mousedown', this.documentClickContext);
+            document.removeEventListener('touchstart', this.documentClickContext);
+        }
+    };
+    Sidebar.prototype.setWidth = function () {
+        if (this.enableDock && this.position === 'Left') {
+            setStyle(this.element, { 'width': this.setDimension(this.dockSize) });
+        }
+        else if (this.enableDock && this.position === 'Right') {
+            setStyle(this.element, { 'width': this.setDimension(this.dockSize) });
+        }
+        else if (!this.enableDock) {
+            setStyle(this.element, { 'width': this.setDimension(this.width) });
+        }
+    };
+    Sidebar.prototype.setDimension = function (width) {
+        if (typeof width === 'number') {
+            width = formatUnit(width);
+        }
+        else if (typeof width === 'string') {
+            width = (width.match(/px|%|em/)) ? width : formatUnit(width);
+        }
+        else {
+            width = '100%';
+        }
+        return width;
+    };
+    Sidebar.prototype.setZindex = function () {
+        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.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.enableDock) {
+            addClass([this.element], DOCKER);
+        }
+        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, DISABLEANIMATION]);
+        }
+    };
+    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.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';
+            this.modal.outerHTML = '';
+            this.modal = null;
+        }
+    };
+    /**
+     * Hide the Sidebar component, if it is in an open state.
+     *
+     * @param {Event} e - The event triggering the hide action.
+     * @returns {void}
+     *
+     */
+    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);
+            }
+            else {
+                sibling.style.marginRight = this.setDimension(this.width === 'auto' ? elementWidth : this.width);
+            }
+        }
+        else if (this.element.classList.contains(CLOSE) && sibling) {
+            if (this.position === 'Left') {
+                sibling.style.marginLeft = this.setDimension(this.dockSize === 'auto' ? elementWidth : this.dockSize);
+            }
+            else {
+                sibling.style.marginRight = this.setDimension(this.dockSize === 'auto' ? elementWidth : this.dockSize);
+            }
+        }
+    };
+    /**
+     * Shows the Sidebar component, if it is in closed state.
+     *
+     * @param {Event} e - The optional event triggering the show action.
+     * @returns {void}
+     */
+    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, DISABLEANIMATION]);
+                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);
+            }
+        });
+    };
+    Sidebar.prototype.setAnimation = function () {
+        if (this.animate) {
+            removeClass([this.element], DISABLEANIMATION);
+        }
+        else {
+            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) + ')' });
+        }
+        else if (this.enableDock && this.position === 'Right' && !this.getState()) {
+            setStyle(this.element, { 'transform': 'translateX(' + 100 + '%) translateX(' + '-' + this.setDimension(this.dockSize) + ')' });
+        }
+        if (this.element.classList.contains(CLOSE) && this.enableDock) {
+            setStyle(this.element, { 'width': this.setDimension(this.dockSize) });
+        }
+    };
+    Sidebar.prototype.createBackDrop = function () {
+        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');
+            this.modal.className = DEFAULTBACKDROP;
+            this.modal.style.display = 'block';
+            document.body.appendChild(this.modal);
+        }
+    };
+    Sidebar.prototype.getPersistData = function () {
+        return this.addOnPersist(['type', 'position', 'isOpen']);
+    };
+    /**
+     * Returns the current module name.
+     *
+     * @returns {string} - returns module name.
+     * @private
+     *
+     */
+    Sidebar.prototype.getModuleName = function () {
+        return 'sidebar';
+    };
+    /**
+     * Shows or hides the Sidebar based on the current state.
+     *
+     * @returns {void}
+     */
+    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) {
+            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 () {
+        if (!isNullOrUndefined(this.width) && this.width !== 'auto' && typeof this.width === 'string' && !this.width.includes('px')) {
+            this.setType(this.type);
+        }
+        if (this.type === 'Auto') {
+            if (Browser.isDevice) {
+                addClass([this.element], OVER);
+            }
+            else {
+                addClass([this.element], PUSH);
+            }
+        }
+        this.setMediaQuery();
+        if (Browser.isDevice) {
+            this.windowWidth = window.innerWidth;
+        }
+    };
+    Sidebar.prototype.documentclickHandler = function (e) {
+        if (closest(e.target, '.' + CONTROL + '' + '.' + ROOT)) {
+            return;
+        }
+        this.hide(e);
+    };
+    Sidebar.prototype.enableGestureHandler = function (args) {
+        if (!this.isOpen && this.position === 'Left' && args.swipeDirection === 'Right' &&
+            (args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {
+            this.show();
+        }
+        else if (this.isOpen && this.position === 'Left' && args.swipeDirection === 'Left') {
+            this.hide(args.originalEvent);
+        }
+        else if (this.isOpen && this.position === 'Right' && args.swipeDirection === 'Right') {
+            this.hide(args.originalEvent);
+        }
+        else if (!this.isOpen && this.position === 'Right' && args.swipeDirection === 'Left'
+            && (window.innerWidth - args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {
+            this.show();
+        }
+    };
+    Sidebar.prototype.setEnableGestures = function () {
+        if (this.enableGestures) {
+            this.mainContentEle = new Touch(document.body, { swipe: this.enableGestureHandler.bind(this) });
+            this.sidebarEle = new Touch(this.element, { swipe: this.enableGestureHandler.bind(this) });
+        }
+        else {
+            if (this.mainContentEle && this.sidebarEle) {
+                this.mainContentEle.destroy();
+                this.sidebarEle.destroy();
+            }
+        }
+    };
+    Sidebar.prototype.wireEvents = function () {
+        this.setEnableGestures();
+        EventHandler.add(window, 'resize', this.resize, this);
+    };
+    Sidebar.prototype.unWireEvents = function () {
+        EventHandler.remove(window, 'resize', this.resize);
+        EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);
+        if (this.mainContentEle) {
+            this.mainContentEle.destroy();
+        }
+        if (this.sidebarEle) {
+            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.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':
+                    if (this.isOpen) {
+                        this.show();
+                    }
+                    else {
+                        this.hide();
+                    }
+                    break;
+                case 'width':
+                    this.setWidth();
+                    if (!this.getState()) {
+                        this.setDock();
+                    }
+                    break;
+                case 'animate':
+                    this.setAnimation();
+                    break;
+                case 'type':
+                    this.checkType(false);
+                    removeClass([this.element], [VISIBILITY]);
+                    this.addClass();
+                    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) {
+                        sibling.style[this.position === 'Left' ? 'marginRight' : 'marginLeft'] = '0px';
+                    }
+                    if (this.position === 'Right') {
+                        removeClass([this.element], LEFT);
+                        addClass([this.element], RIGHT);
+                    }
+                    else {
+                        removeClass([this.element], RIGHT);
+                        addClass([this.element], LEFT);
+                    }
+                    this.setType(this.type);
+                    break;
+                case 'showBackdrop':
+                    if (this.showBackdrop) {
+                        this.createBackDrop();
+                    }
+                    else {
+                        if (this.modal) {
+                            this.modal.style.display = 'none';
+                            this.modal.outerHTML = '';
+                            this.modal = null;
+                        }
+                    }
+                    break;
+                case 'target':
+                    if (typeof (this.target) === 'string') {
+                        this.setProperties({ target: document.querySelector(this.target) }, true);
+                    }
+                    if (isNullOrUndefined(this.target)) {
+                        removeClass([this.element], SIDEBARABSOLUTE);
+                        removeClass([oldProp.target], CONTEXT);
+                        setStyle(sibling, { 'margin-left': 0, 'margin-right': 0 });
+                        document.body.insertAdjacentElement('afterbegin', this.element);
+                    }
+                    this.isServerRendered = false;
+                    _super.prototype.refresh.call(this);
+                    this.isServerRendered = isRendered;
+                    break;
+                case 'closeOnDocumentClick':
+                    this.setCloseOnDocumentClick();
+                    break;
+                case 'enableDock':
+                    if (!this.getState()) {
+                        this.setDock();
+                    }
+                    break;
+                case 'zIndex':
+                    this.setZindex();
+                    break;
+                case 'mediaQuery':
+                    this.setMediaQuery();
+                    break;
+                case 'enableGestures':
+                    this.setEnableGestures();
+                    break;
+                case 'enableRtl':
+                    this.setEnableRTL();
+                    break;
+            }
+        }
+    };
+    Sidebar.prototype.setType = function (type) {
+        var elementWidth = this.element.getBoundingClientRect().width;
+        this.setZindex();
+        var sibling = document.querySelector('.e-main-content') || this.targetEle;
+        if (sibling) {
+            sibling.style.transform = 'translateX(' + 0 + 'px)';
+            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';
+        var eleWidth = this.position === 'Left' ? elementWidth : -(elementWidth);
+        removeClass([this.element], [PUSH, OVER, SLIDE]);
+        switch (type) {
+            case 'Push':
+                addClass([this.element], [PUSH]);
+                if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {
+                    sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
+                }
+                break;
+            case 'Slide':
+                addClass([this.element], [SLIDE]);
+                if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {
+                    sibling.style.transform = 'translateX(' + eleWidth + 'px)';
+                }
+                break;
+            case 'Over':
+                addClass([this.element], [OVER]);
+                if (this.enableDock && (this.element.classList.contains(CLOSE) || this.isOpen)) {
+                    if (sibling) {
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = this.setDimension(this.dockSize);
+                    }
+                }
+                break;
+            case 'Auto':
+                addClass([this.element], [TRASITION]);
+                if (Browser.isDevice) {
+                    if (sibling && (this.enableDock) && !this.getState()) {
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
+                        addClass([this.element], PUSH);
+                    }
+                    else {
+                        addClass([this.element], OVER);
+                    }
+                }
+                else {
+                    addClass([this.element], PUSH);
+                    if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] = margin;
+                    }
+                }
+                this.createBackDrop();
+        }
+    };
+    /**
+     * Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
+     *
+     * @returns {void}
+     *
+     */
+    Sidebar.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        if (this.target) {
+            removeClass([this.target], CONTEXT);
+        }
+        this.destroyBackDrop();
+        if (this.element) {
+            removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION, DISABLEANIMATION]);
+            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 = '';
+        }
+        this.unWireEvents();
+    };
+    __decorate([
+        Property('auto')
+    ], Sidebar.prototype, "dockSize", void 0);
+    __decorate([
+        Property(null)
+    ], Sidebar.prototype, "mediaQuery", void 0);
+    __decorate([
+        Property(false)
+    ], Sidebar.prototype, "enableDock", void 0);
+    __decorate([
+        Property('en-US')
+    ], Sidebar.prototype, "locale", void 0);
+    __decorate([
+        Property(false)
+    ], Sidebar.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property(true)
+    ], Sidebar.prototype, "enableGestures", void 0);
+    __decorate([
+        Property(false)
+    ], Sidebar.prototype, "isOpen", void 0);
+    __decorate([
+        Property(false)
+    ], Sidebar.prototype, "enableRtl", void 0);
+    __decorate([
+        Property(true)
+    ], Sidebar.prototype, "animate", void 0);
+    __decorate([
+        Property('auto')
+    ], Sidebar.prototype, "height", void 0);
+    __decorate([
+        Property(false)
+    ], Sidebar.prototype, "closeOnDocumentClick", void 0);
+    __decorate([
+        Property('Left')
+    ], Sidebar.prototype, "position", void 0);
+    __decorate([
+        Property(null)
+    ], Sidebar.prototype, "target", void 0);
+    __decorate([
+        Property(false)
+    ], Sidebar.prototype, "showBackdrop", void 0);
+    __decorate([
+        Property('Auto')
+    ], Sidebar.prototype, "type", void 0);
+    __decorate([
+        Property('auto')
+    ], Sidebar.prototype, "width", void 0);
+    __decorate([
+        Property(1000)
+    ], Sidebar.prototype, "zIndex", void 0);
+    __decorate([
+        Event()
+    ], Sidebar.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Sidebar.prototype, "close", void 0);
+    __decorate([
+        Event()
+    ], Sidebar.prototype, "open", void 0);
+    __decorate([
+        Event()
+    ], Sidebar.prototype, "change", void 0);
+    __decorate([
+        Event()
+    ], Sidebar.prototype, "destroyed", void 0);
+    Sidebar = __decorate([
+        NotifyPropertyChanges
+    ], Sidebar);
+    return Sidebar;
+}(Component));
+export { Sidebar };