@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/page/left-panel/fesm2022/index.mjs

@@ -0,0 +1,400 @@
+import * as i0 from '@angular/core';
+import { Optional, Inject, Attribute, Directive } from '@angular/core';
+import * as i3 from '@angular/router';
+import { NavigationStart } from '@angular/router';
+import * as i1 from '@wm/core';
+import { $appDigest, addClass, getNavClass, switchClass, isMobile, removeClass, toggleClass } from '@wm/core';
+import { register, PROP_STRING, PROP_NUMBER, StylableComponent, styler, APPLY_STYLES_TYPE, getKeyboardFocusableElements, provideAsWidgetRef } from '@wm/components/base';
+import * as i2 from '@wm/components/page';
+import { SwipeAnimation } from '@swipey';
+
+const registerProps = () => {
+    register('wm-left-panel', new Map([
+        ['animation', { value: 'slide-in', ...PROP_STRING }],
+        ['class', PROP_STRING],
+        ['columnwidth', { value: 3, ...PROP_NUMBER }],
+        ['content', PROP_STRING],
+        ['gestures', { value: 'on', ...PROP_STRING }],
+        ['name', PROP_STRING],
+        ['xscolumnwidth', { value: 10, ...PROP_NUMBER }],
+        ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING]
+    ]));
+};
+
+class LeftPanelAnimator extends 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 === 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 === 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();
+        $appDigest();
+    }
+    onUpper() {
+        this._expanded = true;
+        this.leftPanel.expand();
+        this.resetTransition();
+        $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
+};
+var AnimationType;
+(function (AnimationType) {
+    AnimationType["SLIDE_IN"] = "slide-in";
+    AnimationType["SLIDE_OVER"] = "slide-over";
+})(AnimationType || (AnimationType = {}));
+class LeftPanelDirective extends 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, navtype, navHeight) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.app = app;
+        this.page = page;
+        this.layout = layout;
+        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
+        this.$ele = this.$element;
+        this.$page = this.getAttr('spa') && layout && layout.$element || page && page.$element;
+        addClass(this.$page[0], 'left-panel-collapsed-container');
+        if (this.columnwidth) {
+            this.setLeftPanelWidth(['md', 'sm'], this.columnwidth);
+        }
+        if (this.app.isTabletApplicationType) {
+            addClass(this.nativeElement, 'wm-tablet-app-left-panel');
+        }
+        const onRouteChange = router.events.subscribe(e => {
+            if (e instanceof NavigationStart) {
+                this.collapse();
+            }
+        });
+        this.registerDestroyListener(() => onRouteChange.unsubscribe());
+        if (!navtype)
+            navtype = 'drawer';
+        this.$element.addClass(getNavClass(navtype));
+        if (navHeight) {
+            this.$element.addClass(getNavClass(navHeight));
+            addClass(this.$page[0], getNavClass(navHeight));
+        }
+    }
+    collapse() {
+        addClass(this.nativeElement, 'swipee-transition');
+        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 (isMobile()) {
+            addClass(this.nativeElement, 'hidden');
+        }
+        this.expanded = false;
+        switchClass(this.$page[0], 'left-panel-collapsed-container', 'left-panel-expanded-container');
+        if (this.animation === 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() {
+        removeClass(this.nativeElement, 'hidden');
+        removeClass(this.nativeElement, 'swipee-transition');
+        switchClass(this.nativeElement, 'left-panel-expanded', 'left-panel-collapsed');
+        this.expanded = true;
+        if (!(this.app.isTabletApplicationType && this.animation === AnimationType.SLIDE_IN)) {
+            this._destroyCollapseActionListener = this.listenForCollapseAction();
+        }
+        switchClass(this.$page[0], 'left-panel-expanded-container', 'left-panel-collapsed-container');
+        if (this.animation === 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 = 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 === AnimationType.SLIDE_IN) {
+                    removeClass(this.$page[0], 'slide-over-left-panel-container');
+                    addClass(this.$page[0], 'slide-in-left-panel-container');
+                    this.setPageWidthAndPosition(['md', 'sm'], this.columnwidth);
+                    this.setPageWidthAndPosition(['xs'], this.xscolumnwidth);
+                }
+                else if (nv === AnimationType.SLIDE_OVER) {
+                    removeClass(this.$page[0], 'slide-in-left-panel-container');
+                    addClass(this.$page[0], 'slide-over-left-panel-container');
+                }
+                this._leftPanelAnimator = new LeftPanelAnimator(this);
+                switchClass(this.nativeElement, nv, ov);
+                break;
+            case 'columnwidth':
+                this.setLeftPanelWidth(['md', 'sm'], nv, ov);
+                if (this.animation === AnimationType.SLIDE_IN) {
+                    this.setPageWidthAndPosition(['md', 'sm'], nv, ov);
+                }
+                break;
+            case 'expanded':
+                toggleClass(this.nativeElement, 'left-panel-expanded', nv);
+                toggleClass(this.nativeElement, 'left-panel-collapsed', !nv);
+                break;
+            case 'xscolumnwidth':
+                this.setLeftPanelWidth(['xs'], nv, ov);
+                if (this.animation === 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) {
+                addClass(this.nativeElement, `col-${device}-${newVal}`);
+            }
+            if (oldVal) {
+                removeClass(this.nativeElement, `col-${device}-${oldVal}`);
+            }
+        });
+    }
+    setPageWidthAndPosition(devices, newVal, oldVal) {
+        devices.forEach(device => {
+            if (newVal) {
+                addClass(this.$page[0], `left-panel-container-${device}-${12 - newVal}`);
+            }
+            if (oldVal) {
+                removeClass(this.$page[0], `left-panel-container-${device}-${12 - oldVal}`);
+            }
+        });
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clean up collapse action listener
+        if (this._destroyCollapseActionListener) {
+            this._destroyCollapseActionListener();
+            this._destroyCollapseActionListener = null;
+        }
+        // MEMORY LEAK FIX: Clear left panel animator reference
+        if (this._leftPanelAnimator) {
+            this._leftPanelAnimator = null;
+        }
+        // MEMORY LEAK FIX: Clear jQuery references
+        this.$ele = null;
+        this.$page = null;
+        // Note: Router subscription is already cleaned up via registerDestroyListener
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LeftPanelDirective, deps: [{ token: i1.App }, { token: i2.PageDirective, optional: true }, { token: i2.LayoutDirective, optional: true }, { token: i0.Injector }, { token: i3.Router }, { token: 'EXPLICIT_CONTEXT', optional: true }, { token: 'navtype', attribute: true }, { token: 'navheight', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LeftPanelDirective, isStandalone: true, selector: "[wmLeftPanel]", providers: [
+            provideAsWidgetRef(LeftPanelDirective)
+        ], exportAs: ["wmLeftPanel"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LeftPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmLeftPanel]',
+                    providers: [
+                        provideAsWidgetRef(LeftPanelDirective)
+                    ],
+                    exportAs: 'wmLeftPanel'
+                }]
+        }], ctorParameters: () => [{ type: i1.App }, { type: i2.PageDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i2.LayoutDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.Injector }, { type: i3.Router }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['navtype']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['navheight']
+                }] }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnimationType, LeftPanelDirective };
+//# sourceMappingURL=index.mjs.map

package/components/page/left-panel/fesm2022/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/page/left-panel/src/left-panel.props.ts","../../../../../projects/components/widgets/page/left-panel/src/left-panel.animator.ts","../../../../../projects/components/widgets/page/left-panel/src/left-panel.directive.ts","../../../../../projects/components/widgets/page/left-panel/src/index.ts"],"sourcesContent":["import {PROP_NUMBER, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-left-panel',\n        new Map(\n            [\n                ['animation', {value: 'slide-in', ...PROP_STRING}],\n                ['class', PROP_STRING],\n                ['columnwidth', { value: 3, ...PROP_NUMBER}],\n                ['content', PROP_STRING],\n                ['gestures', {value: 'on', ... PROP_STRING}],\n                ['name', PROP_STRING],\n                ['xscolumnwidth', { value: 10, ...PROP_NUMBER}],\n                ['hint', PROP_STRING],\n                ['arialabel', PROP_STRING]\n            ]\n        )\n    );\n};\n","import { SwipeAnimation } from '@swipey';\n\nimport { $appDigest } from '@wm/core';\n\nimport { AnimationType, LeftPanelDirective } from './left-panel.directive';\n\nexport class LeftPanelAnimator extends SwipeAnimation {\n    private _$animatedElements;\n    private _expanded: boolean;\n    private _leftPanelWidth: number;\n    private _maxX: number;\n    private _pageContainerWidth: number;\n    private _width: number;\n\n    constructor(private leftPanel: LeftPanelDirective) {\n        super();\n        this.init(this.leftPanel.$ele, this.leftPanel.$page);\n    }\n\n    public bounds(e, length): {} {\n        let offset = 0;\n        this.setGesturesEnabled(this.leftPanel.isGesturesEnabled());\n        if (!this._width) {\n            this._pageContainerWidth = this.leftPanel.$page.width();\n            this._leftPanelWidth = this.leftPanel.$ele.width();\n            this._maxX = this._leftPanelWidth / this._pageContainerWidth * 100;\n            this._width = this.leftPanel.animation === AnimationType.SLIDE_IN ? this._pageContainerWidth : this._leftPanelWidth;\n        }\n        this._expanded = this.leftPanel.expanded;\n\n        if (this._expanded) {\n            return {\n                'center': this._leftPanelWidth,\n                'lower': -(this._leftPanelWidth - offset)\n            };\n        }\n        if (this.leftPanel.app.isTabletApplicationType) {\n            offset = 53.32;\n        }\n        if (e && (e.pageX || (e.touches && e.touches[0].pageX)) > offset + 100) {\n            return {\n                strict: true\n            };\n        }\n        return {\n            'center': 0,\n            'upper': this._leftPanelWidth - offset\n        };\n    }\n\n    public context() {\n        return {\n            'w': this._width,\n            'pageW': this._pageContainerWidth,\n            'leftW': this._leftPanelWidth,\n            'maxX': this._maxX,\n            'limit': (min: number, v: number, max: number) => {\n                if (v < min) {\n                    return min;\n                }\n                if (v > max) {\n                    return max;\n                }\n                return v;\n            }\n        };\n    }\n\n    public animation() {\n        this._$animatedElements = this.leftPanel.$ele;\n        if (this.leftPanel.animation === AnimationType.SLIDE_IN) {\n            this._$animatedElements = this._$animatedElements.add(this.leftPanel.$page);\n            if (this.leftPanel.app.isTabletApplicationType) {\n                return [\n                    {\n                        'target': this.leftPanel.$ele,\n                        'css': {\n                            'transform': 'translate3d(${{ limit(-100, -($d * 100 / leftW), 0) + \\'%\\' }}, 0, 0)'\n                        }\n                    },\n                    {\n                        'target': this.leftPanel.$page,\n                        'css': {\n                            'transform': 'translate3d(${{ (($d) * 100 / pageW) + \\'%\\' }}, 0, 0)',\n                            'width': '${{ (pageW - $d) + \\'px\\' }}',\n                            'z-index': 101\n                        }\n                    }\n                ];\n            }\n            return [\n                {\n                    'target': this.leftPanel.$ele,\n                    'css': {\n                        'transform': 'translate3d(-100%, 0, 0)',\n                        'opacity': 1,\n                        'z-index': 101\n                    }\n                },\n                {\n                    'target': this.leftPanel.$page,\n                    'css': {\n                        'transform': 'translate3d(${{ limit( 0, ((($D + $d) * 100 / w)), maxX ) + \\'%\\' }}, 0, 0)',\n                        'opacity': 1,\n                        'z-index': 101\n                    }\n                }];\n        } else {\n            return {\n                'transform': 'translate3d(${{ limit( -100, ((($D + $d) * 100 / w) - 100), 0 ) + \\'%\\'}}, 0, 0)',\n                'opacity': 1,\n                'z-index': 101\n            };\n        }\n    }\n\n    public onLower(): void {\n        this._expanded = false;\n        this.leftPanel.collapse();\n        this.resetTransition();\n        $appDigest();\n    }\n\n    public onUpper(): void {\n        this._expanded = true;\n        this.leftPanel.expand();\n        this.resetTransition();\n        $appDigest();\n    }\n\n    private resetTransition() {\n        if (this._$animatedElements) {\n            /*\n             * This timeout is for preventing UI flicker at the end of animation.\n             */\n            setTimeout(() => {\n                this._$animatedElements.css({\n                    'transform': '',\n                    'opacity': '',\n                    'z-index': '',\n                    'width': ''\n                });\n            }, 100);\n        }\n    }\n}\n","import {Attribute, Directive, Inject, Injector, OnDestroy, Optional} from '@angular/core';\nimport { NavigationStart, Router } from '@angular/router';\n\nimport {App, addClass, removeClass, switchClass, toggleClass, isMobile, getNavClass } from '@wm/core';\nimport { APPLY_STYLES_TYPE, getKeyboardFocusableElements,  IWidgetConfig, provideAsWidgetRef, StylableComponent, styler } from '@wm/components/base';\nimport { LayoutDirective, PageDirective } from '@wm/components/page';\n\nimport { registerProps } from './left-panel.props';\nimport { LeftPanelAnimator } from './left-panel.animator';\n\nconst DEFAULT_CLS = 'app-left-panel left-panel-collapsed';\nconst WIDGET_CONFIG: IWidgetConfig = {\n    widgetType: 'wm-left-panel',\n    hostClass: DEFAULT_CLS\n};\n\nexport enum AnimationType {\n    SLIDE_IN = 'slide-in',\n    SLIDE_OVER = 'slide-over'\n}\n\n@Directive({\n  standalone: true,\n    selector: '[wmLeftPanel]',\n    providers: [\n        provideAsWidgetRef(LeftPanelDirective)\n    ],\n    exportAs: 'wmLeftPanel'\n})\nexport class LeftPanelDirective extends StylableComponent implements OnDestroy {\n    static initializeProps = registerProps();\n\n    public animation: AnimationType;\n    public columnwidth: number;\n    public expanded: boolean;\n    public gestures: string;\n    public xscolumnwidth: number;\n\n    public $ele;\n    public $page;\n\n    private _destroyCollapseActionListener: () => void;\n    private _leftPanelAnimator;\n\n    //If \"spa\" attribute is set LayoutDirective will present and PageDirective is undefined else PageDirective will present and LayoutDirective is undefined\n    constructor(public app: App, @Optional() private page: PageDirective, @Optional() private layout: LayoutDirective, inj: Injector, router: Router, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any, @Attribute('navtype') navtype: string, @Attribute('navheight') navHeight: string) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);\n        this.$ele = this.$element;\n        this.$page = this.getAttr('spa') && layout && layout.$element || page && page.$element;\n        addClass(this.$page[0], 'left-panel-collapsed-container');\n        if (this.columnwidth) {\n            this.setLeftPanelWidth(['md', 'sm'], this.columnwidth);\n        }\n        if (this.app.isTabletApplicationType) {\n            addClass(this.nativeElement, 'wm-tablet-app-left-panel');\n        }\n        const onRouteChange = router.events.subscribe(e => {\n            if (e instanceof NavigationStart) {\n                this.collapse();\n            }\n        });\n        this.registerDestroyListener(() => onRouteChange.unsubscribe());\n        if(!navtype) navtype = 'drawer';\n        this.$element.addClass(getNavClass(navtype));\n        if (navHeight) {\n            this.$element.addClass(getNavClass(navHeight));\n            addClass(this.$page[0], getNavClass(navHeight));\n        }\n    }\n\n    public collapse(): void {\n        addClass(this.nativeElement, 'swipee-transition');\n        switchClass(this.nativeElement, 'left-panel-collapsed', 'left-panel-expanded');\n        if (this.expanded) {\n            setTimeout(() => {\n                const leftNavButton = $('.app-header-action');\n                leftNavButton.attr('aria-expanded', 'false');\n                leftNavButton.focus();\n            }, 50);\n        }\n        if (isMobile()) {\n            addClass(this.nativeElement, 'hidden');\n        }\n        this.expanded = false;\n        switchClass(this.$page[0], 'left-panel-collapsed-container', 'left-panel-expanded-container');\n        if (this.animation === AnimationType.SLIDE_IN) {\n            this.setPageWidthAndPosition(['md', 'sm'], null, this.columnwidth);\n            this.setPageWidthAndPosition(['xs'], null, this.xscolumnwidth);\n        }\n        if (this._destroyCollapseActionListener) {\n            this._destroyCollapseActionListener();\n        }\n        (this.getAttr(\"spa\") && this.layout || this.page).notify('wmLeftPanel:collapse');\n    }\n\n    public expand(): void {\n        removeClass(this.nativeElement, 'hidden');\n        removeClass(this.nativeElement, 'swipee-transition');\n        switchClass(this.nativeElement, 'left-panel-expanded', 'left-panel-collapsed');\n        this.expanded = true;\n        if (!(this.app.isTabletApplicationType && this.animation === AnimationType.SLIDE_IN)) {\n            this._destroyCollapseActionListener = this.listenForCollapseAction();\n        }\n        switchClass(this.$page[0], 'left-panel-expanded-container', 'left-panel-collapsed-container');\n        if (this.animation === AnimationType.SLIDE_IN) {\n            this.setPageWidthAndPosition(['md', 'sm'], this.columnwidth);\n            this.setPageWidthAndPosition(['xs'], this.xscolumnwidth);\n        }\n        (this.getAttr(\"spa\") && this.layout || this.page).notify('wmLeftPanel:expand');\n        $('.app-header-action').attr('aria-expanded', `${this.expanded}`);\n        const focusableElements = getKeyboardFocusableElements(this.nativeElement);\n        const firstFocusableElement = focusableElements[0];\n        const lastFocusableElement = focusableElements[focusableElements.length - 1];\n        setTimeout(() => {\n            $(firstFocusableElement).focus();\n        }, 50);\n        $(firstFocusableElement).on('keydown', (event) => {\n            if (event.shiftKey && event.key === 'Tab') {\n                this.collapse();\n            }\n        });\n        $(lastFocusableElement).on('keydown', (event) => {\n            if (event.key === 'Tab') {\n                this.collapse();\n            }\n        });\n        this.$element.on('keydown', (event) => {\n            if (event.key === 'Escape') {\n                this.collapse();\n            }\n        });\n    }\n\n    public isGesturesEnabled(): boolean {\n        return this.gestures === 'on';\n    }\n\n    public isVisible(): boolean {\n        return this.expanded;\n    }\n\n    public onPropertyChange(key, nv, ov) {\n        switch (key) {\n            case 'animation' :\n                if (nv === AnimationType.SLIDE_IN) {\n                    removeClass(this.$page[0], 'slide-over-left-panel-container');\n                    addClass(this.$page[0], 'slide-in-left-panel-container');\n                    this.setPageWidthAndPosition(['md', 'sm'], this.columnwidth);\n                    this.setPageWidthAndPosition(['xs'], this.xscolumnwidth);\n                } else if (nv === AnimationType.SLIDE_OVER) {\n                    removeClass(this.$page[0], 'slide-in-left-panel-container');\n                    addClass(this.$page[0], 'slide-over-left-panel-container');\n                }\n                this._leftPanelAnimator = new LeftPanelAnimator(this);\n                switchClass(this.nativeElement, nv, ov);\n                break;\n            case 'columnwidth':\n                this.setLeftPanelWidth(['md', 'sm'], nv, ov);\n                if (this.animation === AnimationType.SLIDE_IN) {\n                    this.setPageWidthAndPosition(['md', 'sm'], nv, ov);\n                }\n                break;\n            case 'expanded':\n                toggleClass(this.nativeElement, 'left-panel-expanded', nv);\n                toggleClass(this.nativeElement, 'left-panel-collapsed', !nv);\n                break;\n            case 'xscolumnwidth':\n                this.setLeftPanelWidth(['xs'], nv, ov);\n                if (this.animation === AnimationType.SLIDE_IN) {\n                    this.setPageWidthAndPosition(['xs'], nv, ov);\n                }\n                break;\n            default:\n                super.onPropertyChange(key, nv, ov);\n        }\n    }\n\n    public  toggle(): void {\n        if (this.app.isTabletApplicationType) {\n            setTimeout(() => {\n                this.expanded ? this.collapse() : this.expand();\n            }, 50);\n        } else {\n            this.$ele.swipeAnimation(this.expanded ? 'gotoLower' : 'gotoUpper');\n        }\n    }\n\n    private listenForCollapseAction(): () => void {\n        const eventName = 'click.leftNavToggle';\n        let skipEvent = false;\n        this.$ele.on(eventName, () => {\n            skipEvent = true;\n        });\n        this.$page.on(eventName, () =>  {\n            if (!skipEvent) {\n                this.toggle();\n            }\n            skipEvent = false;\n        });\n        return () => {\n            this.$ele.off(eventName);\n            this.$page.off(eventName);\n        };\n    }\n\n    private setLeftPanelWidth(devices: string[], newVal: number, oldVal?: number) {\n        devices.forEach(device => {\n            if (newVal) {\n                addClass(this.nativeElement, `col-${device}-${newVal}`);\n            }\n            if (oldVal) {\n                removeClass(this.nativeElement, `col-${device}-${oldVal}`);\n            }\n        });\n    }\n\n    private setPageWidthAndPosition(devices: string[], newVal: number, oldVal?: number) {\n        devices.forEach(device => {\n            if (newVal) {\n                addClass(this.$page[0], `left-panel-container-${device}-${12 - newVal}`);\n            }\n            if (oldVal) {\n                removeClass(this.$page[0], `left-panel-container-${device}-${12 - oldVal}`);\n            }\n        });\n    }\n\n    ngOnDestroy() {\n        // MEMORY LEAK FIX: Clean up collapse action listener\n        if (this._destroyCollapseActionListener) {\n            this._destroyCollapseActionListener();\n            this._destroyCollapseActionListener = null;\n        }\n\n        // MEMORY LEAK FIX: Clear left panel animator reference\n        if (this._leftPanelAnimator) {\n            this._leftPanelAnimator = null;\n        }\n\n        // MEMORY LEAK FIX: Clear jQuery references\n        this.$ele = null;\n        this.$page = null;\n\n        // Note: Router subscription is already cleaned up via registerDestroyListener\n\n        super.ngOnDestroy();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/components/page/left-panel/index.d.ts

@@ -0,0 +1,41 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, Injector } from '@angular/core';
+import { Router } from '@angular/router';
+import { App } from '@wm/core';
+import { StylableComponent } from '@wm/components/base';
+import { PageDirective, LayoutDirective } from '@wm/components/page';
+
+declare enum AnimationType {
+    SLIDE_IN = "slide-in",
+    SLIDE_OVER = "slide-over"
+}
+declare class LeftPanelDirective extends StylableComponent implements OnDestroy {
+    app: App;
+    private page;
+    private layout;
+    static initializeProps: void;
+    animation: AnimationType;
+    columnwidth: number;
+    expanded: boolean;
+    gestures: string;
+    xscolumnwidth: number;
+    $ele: any;
+    $page: any;
+    private _destroyCollapseActionListener;
+    private _leftPanelAnimator;
+    constructor(app: App, page: PageDirective, layout: LayoutDirective, inj: Injector, router: Router, explicitContext: any, navtype: string, navHeight: string);
+    collapse(): void;
+    expand(): void;
+    isGesturesEnabled(): boolean;
+    isVisible(): boolean;
+    onPropertyChange(key: any, nv: any, ov: any): void;
+    toggle(): void;
+    private listenForCollapseAction;
+    private setLeftPanelWidth;
+    private setPageWidthAndPosition;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LeftPanelDirective, [null, { optional: true; }, { optional: true; }, null, null, { optional: true; }, { attribute: "navtype"; }, { attribute: "navheight"; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LeftPanelDirective, "[wmLeftPanel]", ["wmLeftPanel"], {}, {}, never, never, true, never>;
+}
+
+export { AnimationType, LeftPanelDirective };

package/components/page/left-panel/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/page/left-panel",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "module": "fesm2022/index.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/index.mjs"
+    }
+  }
+}

package/components/page/right-panel/.npmignore

@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json

package/components/page/right-panel/bundles/index.umd.js

@@ -0,0 +1,86 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/core', '@wm/components/base'], 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.rightpanel = {}), global.ng.core, global.wm.core, global.wm.components.base));
+})(this, (function (exports, i0, core, base) { '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);
+
+    const registerProps = () => {
+        base.register('wm-right-panel', new Map([
+            ['class', base.PROP_STRING],
+            ['columnwidth', base.PROP_NUMBER],
+            ['content', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['hint', base.PROP_STRING],
+            ['arialabel', base.PROP_STRING]
+        ]));
+    };
+
+    const DEFAULT_CLS = 'app-right-panel';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-right-panel',
+        hostClass: DEFAULT_CLS
+    };
+    class RightPanelDirective extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, explicitContext, navtype) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
+            if (!navtype)
+                navtype = 'drawer';
+            this.$element.addClass(core.getNavClass(navtype));
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'columnwidth') {
+                core.switchClass(this.nativeElement, `col-sm-${nv}`, ov ? ` col-sm-${ov}` : '');
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: RightPanelDirective, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }, { token: 'navtype', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: RightPanelDirective, isStandalone: true, selector: "[wmRightPanel]", providers: [
+                base.provideAsWidgetRef(RightPanelDirective)
+            ], exportAs: ["wmRightPanel"], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: RightPanelDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmRightPanel]',
+                        providers: [
+                            base.provideAsWidgetRef(RightPanelDirective)
+                        ],
+                        exportAs: 'wmRightPanel'
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['navtype']
+                    }] }] });
+
+    exports.RightPanelDirective = RightPanelDirective;
+
+}));