(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@angular/router'), require('@wm/core'), require('@wm/components/page'), require('@swipey')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@angular/router', '@wm/core', '@wm/components/page', '@swipey'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.page = global.wm.components.page || {}, global.wm.components.page.leftpanel = {}), global.ng.core, global.ng.common, global.wm.components.base, global.ng.router, global.wm.core, global.wm.components.page, global.swipey));
})(this, (function (exports, i0, common, base, i3, i1, i2, _swipey) { 'use strict';

    function _interopNamespaceDefault(e) {
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n.default = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);

    const registerProps = () => {
        base.register('wm-left-panel', new Map([
            ['animation', { value: 'slide-in', ...base.PROP_STRING }],
            ['class', base.PROP_STRING],
            ['columnwidth', { value: 3, ...base.PROP_NUMBER }],
            ['content', base.PROP_STRING],
            ['gestures', { value: 'on', ...base.PROP_STRING }],
            ['name', base.PROP_STRING],
            ['xscolumnwidth', { value: 10, ...base.PROP_NUMBER }],
            ['hint', base.PROP_STRING],
            ['arialabel', base.PROP_STRING]
        ]));
    };

    class LeftPanelAnimator extends _swipey.SwipeAnimation {
        constructor(leftPanel) {
            super();
            this.leftPanel = leftPanel;
            this.init(this.leftPanel.$ele, this.leftPanel.$page);
        }
        bounds(e, length) {
            let offset = 0;
            this.setGesturesEnabled(this.leftPanel.isGesturesEnabled());
            if (!this._width) {
                this._pageContainerWidth = this.leftPanel.$page.width();
                this._leftPanelWidth = this.leftPanel.$ele.width();
                this._maxX = this._leftPanelWidth / this._pageContainerWidth * 100;
                this._width = this.leftPanel.animation === exports.AnimationType.SLIDE_IN ? this._pageContainerWidth : this._leftPanelWidth;
            }
            this._expanded = this.leftPanel.expanded;
            if (this._expanded) {
                return {
                    'center': this._leftPanelWidth,
                    'lower': -(this._leftPanelWidth - offset)
                };
            }
            if (this.leftPanel.app.isTabletApplicationType) {
                offset = 53.32;
            }
            if (e && (e.pageX || (e.touches && e.touches[0].pageX)) > offset + 100) {
                return {
                    strict: true
                };
            }
            return {
                'center': 0,
                'upper': this._leftPanelWidth - offset
            };
        }
        context() {
            return {
                'w': this._width,
                'pageW': this._pageContainerWidth,
                'leftW': this._leftPanelWidth,
                'maxX': this._maxX,
                'limit': (min, v, max) => {
                    if (v < min) {
                        return min;
                    }
                    if (v > max) {
                        return max;
                    }
                    return v;
                }
            };
        }
        animation() {
            this._$animatedElements = this.leftPanel.$ele;
            if (this.leftPanel.animation === exports.AnimationType.SLIDE_IN) {
                this._$animatedElements = this._$animatedElements.add(this.leftPanel.$page);
                if (this.leftPanel.app.isTabletApplicationType) {
                    return [
                        {
                            'target': this.leftPanel.$ele,
                            'css': {
                                'transform': 'translate3d(${{ limit(-100, -($d * 100 / leftW), 0) + \'%\' }}, 0, 0)'
                            }
                        },
                        {
                            'target': this.leftPanel.$page,
                            'css': {
                                'transform': 'translate3d(${{ (($d) * 100 / pageW) + \'%\' }}, 0, 0)',
                                'width': '${{ (pageW - $d) + \'px\' }}',
                                'z-index': 101
                            }
                        }
                    ];
                }
                return [
                    {
                        'target': this.leftPanel.$ele,
                        'css': {
                            'transform': 'translate3d(-100%, 0, 0)',
                            'opacity': 1,
                            'z-index': 101
                        }
                    },
                    {
                        'target': this.leftPanel.$page,
                        'css': {
                            'transform': 'translate3d(${{ limit( 0, ((($D + $d) * 100 / w)), maxX ) + \'%\' }}, 0, 0)',
                            'opacity': 1,
                            'z-index': 101
                        }
                    }
                ];
            }
            else {
                return {
                    'transform': 'translate3d(${{ limit( -100, ((($D + $d) * 100 / w) - 100), 0 ) + \'%\'}}, 0, 0)',
                    'opacity': 1,
                    'z-index': 101
                };
            }
        }
        onLower() {
            this._expanded = false;
            this.leftPanel.collapse();
            this.resetTransition();
            i1.$appDigest();
        }
        onUpper() {
            this._expanded = true;
            this.leftPanel.expand();
            this.resetTransition();
            i1.$appDigest();
        }
        resetTransition() {
            if (this._$animatedElements) {
                /*
                 * This timeout is for preventing UI flicker at the end of animation.
                 */
                setTimeout(() => {
                    this._$animatedElements.css({
                        'transform': '',
                        'opacity': '',
                        'z-index': '',
                        'width': ''
                    });
                }, 100);
            }
        }
    }

    const DEFAULT_CLS = 'app-left-panel left-panel-collapsed';
    const WIDGET_CONFIG = {
        widgetType: 'wm-left-panel',
        hostClass: DEFAULT_CLS
    };
    exports.AnimationType = void 0;
    (function (AnimationType) {
        AnimationType["SLIDE_IN"] = "slide-in";
        AnimationType["SLIDE_OVER"] = "slide-over";
    })(exports.AnimationType || (exports.AnimationType = {}));
    class LeftPanelDirective extends base.StylableComponent {
        static { this.initializeProps = registerProps(); }
        //If "spa" attribute is set LayoutDirective will present and PageDirective is undefined else PageDirective will present and LayoutDirective is undefined
        constructor(app, page, layout, inj, router, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            this.app = app;
            this.page = page;
            this.layout = layout;
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
            this.$ele = this.$element;
            this.$page = this.getAttr('spa') && layout && layout.$element || page && page.$element;
            i1.addClass(this.$page[0], 'left-panel-collapsed-container');
            if (this.columnwidth) {
                this.setLeftPanelWidth(['md', 'sm'], this.columnwidth);
            }
            if (this.app.isTabletApplicationType) {
                i1.addClass(this.nativeElement, 'wm-tablet-app-left-panel');
            }
            const onRouteChange = router.events.subscribe(e => {
                if (e instanceof i3.NavigationStart) {
                    this.collapse();
                }
            });
            this.registerDestroyListener(() => onRouteChange.unsubscribe());
        }
        collapse() {
            i1.addClass(this.nativeElement, 'swipee-transition');
            i1.switchClass(this.nativeElement, 'left-panel-collapsed', 'left-panel-expanded');
            if (this.expanded) {
                setTimeout(() => {
                    const leftNavButton = $('.app-header-action');
                    leftNavButton.attr('aria-expanded', 'false');
                    leftNavButton.focus();
                }, 50);
            }
            if (i1.isMobile()) {
                i1.addClass(this.nativeElement, 'hidden');
            }
            this.expanded = false;
            i1.switchClass(this.$page[0], 'left-panel-collapsed-container', 'left-panel-expanded-container');
            if (this.animation === exports.AnimationType.SLIDE_IN) {
                this.setPageWidthAndPosition(['md', 'sm'], null, this.columnwidth);
                this.setPageWidthAndPosition(['xs'], null, this.xscolumnwidth);
            }
            if (this._destroyCollapseActionListener) {
                this._destroyCollapseActionListener();
            }
            (this.getAttr("spa") && this.layout || this.page).notify('wmLeftPanel:collapse');
        }
        expand() {
            i1.removeClass(this.nativeElement, 'hidden');
            i1.removeClass(this.nativeElement, 'swipee-transition');
            i1.switchClass(this.nativeElement, 'left-panel-expanded', 'left-panel-collapsed');
            this.expanded = true;
            if (!(this.app.isTabletApplicationType && this.animation === exports.AnimationType.SLIDE_IN)) {
                this._destroyCollapseActionListener = this.listenForCollapseAction();
            }
            i1.switchClass(this.$page[0], 'left-panel-expanded-container', 'left-panel-collapsed-container');
            if (this.animation === exports.AnimationType.SLIDE_IN) {
                this.setPageWidthAndPosition(['md', 'sm'], this.columnwidth);
                this.setPageWidthAndPosition(['xs'], this.xscolumnwidth);
            }
            (this.getAttr("spa") && this.layout || this.page).notify('wmLeftPanel:expand');
            $('.app-header-action').attr('aria-expanded', `${this.expanded}`);
            const focusableElements = base.getKeyboardFocusableElements(this.nativeElement);
            const firstFocusableElement = focusableElements[0];
            const lastFocusableElement = focusableElements[focusableElements.length - 1];
            setTimeout(() => {
                $(firstFocusableElement).focus();
            }, 50);
            $(firstFocusableElement).on('keydown', (event) => {
                if (event.shiftKey && event.key === 'Tab') {
                    this.collapse();
                }
            });
            $(lastFocusableElement).on('keydown', (event) => {
                if (event.key === 'Tab') {
                    this.collapse();
                }
            });
            this.$element.on('keydown', (event) => {
                if (event.key === 'Escape') {
                    this.collapse();
                }
            });
        }
        isGesturesEnabled() {
            return this.gestures === 'on';
        }
        isVisible() {
            return this.expanded;
        }
        onPropertyChange(key, nv, ov) {
            switch (key) {
                case 'animation':
                    if (nv === exports.AnimationType.SLIDE_IN) {
                        i1.removeClass(this.$page[0], 'slide-over-left-panel-container');
                        i1.addClass(this.$page[0], 'slide-in-left-panel-container');
                        this.setPageWidthAndPosition(['md', 'sm'], this.columnwidth);
                        this.setPageWidthAndPosition(['xs'], this.xscolumnwidth);
                    }
                    else if (nv === exports.AnimationType.SLIDE_OVER) {
                        i1.removeClass(this.$page[0], 'slide-in-left-panel-container');
                        i1.addClass(this.$page[0], 'slide-over-left-panel-container');
                    }
                    this._leftPanelAnimator = new LeftPanelAnimator(this);
                    i1.switchClass(this.nativeElement, nv, ov);
                    break;
                case 'columnwidth':
                    this.setLeftPanelWidth(['md', 'sm'], nv, ov);
                    if (this.animation === exports.AnimationType.SLIDE_IN) {
                        this.setPageWidthAndPosition(['md', 'sm'], nv, ov);
                    }
                    break;
                case 'expanded':
                    i1.toggleClass(this.nativeElement, 'left-panel-expanded', nv);
                    i1.toggleClass(this.nativeElement, 'left-panel-collapsed', !nv);
                    break;
                case 'xscolumnwidth':
                    this.setLeftPanelWidth(['xs'], nv, ov);
                    if (this.animation === exports.AnimationType.SLIDE_IN) {
                        this.setPageWidthAndPosition(['xs'], nv, ov);
                    }
                    break;
                default:
                    super.onPropertyChange(key, nv, ov);
            }
        }
        toggle() {
            if (this.app.isTabletApplicationType) {
                setTimeout(() => {
                    this.expanded ? this.collapse() : this.expand();
                }, 50);
            }
            else {
                this.$ele.swipeAnimation(this.expanded ? 'gotoLower' : 'gotoUpper');
            }
        }
        listenForCollapseAction() {
            const eventName = 'click.leftNavToggle';
            let skipEvent = false;
            this.$ele.on(eventName, () => {
                skipEvent = true;
            });
            this.$page.on(eventName, () => {
                if (!skipEvent) {
                    this.toggle();
                }
                skipEvent = false;
            });
            return () => {
                this.$ele.off(eventName);
                this.$page.off(eventName);
            };
        }
        setLeftPanelWidth(devices, newVal, oldVal) {
            devices.forEach(device => {
                if (newVal) {
                    i1.addClass(this.nativeElement, `col-${device}-${newVal}`);
                }
                if (oldVal) {
                    i1.removeClass(this.nativeElement, `col-${device}-${oldVal}`);
                }
            });
        }
        setPageWidthAndPosition(devices, newVal, oldVal) {
            devices.forEach(device => {
                if (newVal) {
                    i1.addClass(this.$page[0], `left-panel-container-${device}-${12 - newVal}`);
                }
                if (oldVal) {
                    i1.removeClass(this.$page[0], `left-panel-container-${device}-${12 - oldVal}`);
                }
            });
        }
        static { this.ɵfac = function LeftPanelDirective_Factory(t) { return new (t || LeftPanelDirective)(i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵdirectiveInject(i2__namespace.PageDirective, 8), i0__namespace.ɵɵdirectiveInject(i2__namespace.LayoutDirective, 8), i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i3__namespace.Router), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: LeftPanelDirective, selectors: [["", "wmLeftPanel", ""]], exportAs: ["wmLeftPanel"], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(LeftPanelDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LeftPanelDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmLeftPanel]',
                    providers: [
                        base.provideAsWidgetRef(LeftPanelDirective)
                    ],
                    exportAs: 'wmLeftPanel'
                }]
        }], () => [{ type: i1__namespace.App }, { type: i2__namespace.PageDirective, decorators: [{
                    type: i0.Optional
                }] }, { type: i2__namespace.LayoutDirective, decorators: [{
                    type: i0.Optional
                }] }, { type: i0__namespace.Injector }, { type: i3__namespace.Router }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

    const components = [
        LeftPanelDirective
    ];
    class LeftPanelModule {
        static { this.ɵfac = function LeftPanelModule_Factory(t) { return new (t || LeftPanelModule)(); }; }
        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: LeftPanelModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [common.CommonModule,
                base.WmComponentsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LeftPanelModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        common.CommonModule,
                        base.WmComponentsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(LeftPanelModule, { declarations: [LeftPanelDirective], imports: [common.CommonModule,
            base.WmComponentsModule], exports: [LeftPanelDirective] }); })();

    exports.LeftPanelDirective = LeftPanelDirective;
    exports.LeftPanelModule = LeftPanelModule;

}));
