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

package/components/containers/panel/bundles/index.umd.js

@@ -0,0 +1,223 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/base'), require('@angular/core'), require('@wm/core'), require('ngx-bootstrap/dropdown'), require('@wm/components/navigation/menu'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/base', '@angular/core', '@wm/core', 'ngx-bootstrap/dropdown', '@wm/components/navigation/menu', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.containers = global.wm.components.containers || {}, global.wm.components.containers.panel = {}), global.ng.common, global.wm.components.base, global.ng.core, global.wm.core, global.ngxBootstrap.dropdown, global.wm.components.navigation.menu, global._));
+})(this, (function (exports, i2, base, i0, core, i1, menu, lodashEs) { '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 i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const registerProps = () => {
+        base.register('wm-panel', new Map([
+            ['actions', {}],
+            ['animation', base.PROP_STRING],
+            ['autoclose', base.PROP_STRING],
+            ['badgetype', { value: 'default', ...base.PROP_STRING }],
+            ['badgevalue', base.PROP_STRING],
+            ['class', base.PROP_STRING],
+            ['closable', base.PROP_BOOLEAN],
+            ['collapsible', base.PROP_BOOLEAN],
+            ['conditionalclass', base.PROP_ANY],
+            ['conditionalstyle', base.PROP_ANY],
+            ['content', base.PROP_STRING],
+            ['datafield', base.PROP_STRING],
+            ['enablefullscreen', base.PROP_BOOLEAN],
+            ['expanded', { value: true, ...base.PROP_BOOLEAN }],
+            ['fullscreen', base.PROP_BOOLEAN],
+            ['helptext', base.PROP_STRING],
+            ['iconclass', base.PROP_STRING],
+            ['iconheight', base.PROP_STRING],
+            ['iconmargin', base.PROP_STRING],
+            ['iconurl', base.PROP_STRING],
+            ['iconwidth', base.PROP_STRING],
+            ['itemaction', base.PROP_STRING],
+            ['itemchildren', base.PROP_STRING],
+            ['itemicon', base.PROP_STRING],
+            ['itemlabel', base.PROP_STRING],
+            ['itemlink', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['subheading', base.PROP_STRING],
+            ['title', base.PROP_STRING],
+            ['userrole', base.PROP_STRING],
+            ['hint', base.PROP_STRING]
+        ]));
+    };
+
+    const DEFAULT_CLS = 'app-panel panel';
+    const WIDGET_CONFIG = { widgetType: 'wm-panel', hostClass: DEFAULT_CLS };
+    class PanelComponent extends menu.MenuAdapterComponent {
+        static { this.initializeProps = registerProps(); }
+        // conditions to show the footer
+        get hideFooter() {
+            return !this.hasFooter || !this.expanded;
+        }
+        // conditions to show header
+        get showHeader() {
+            return this.iconurl || this.iconclass || this.collapsible || this.actions || this.title || this.subheading || this.enablefullscreen;
+        }
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.$lazyLoad = core.noop;
+            this.expanded = true;
+            this.helpClass = '';
+            this.helptext = '';
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.SHELL);
+            this.fullScreenTitle = `${this.appLocale.LABEL_FULLSCREEN}/${this.appLocale.LABEL_EXITFULLSCREEN}`;
+            this.expandCollapseTitle = `${this.appLocale.LABEL_COLLAPSE}/${this.appLocale.LABEL_EXPAND}`;
+            core.removeAttr(this.nativeElement, 'title');
+        }
+        // toggle the panel state between collapsed - expanded. invoke the respective callbacks
+        toggle($event) {
+            if (this.collapsible) {
+                this.invokeEventCallback(this.expanded ? 'collapse' : 'expand', { $event });
+                this.expanded = !this.expanded;
+                if (this.expanded) {
+                    this.$lazyLoad();
+                    this.reDrawChildren();
+                }
+            }
+        }
+        expand($event) {
+            if (!this.expanded) {
+                this.toggle($event);
+            }
+        }
+        collapse($event) {
+            if (this.expanded) {
+                this.toggle($event);
+            }
+        }
+        // toggle the fullscreen state of the panel. invoke the respective callbacks
+        toggleFullScreen($event) {
+            if (this.enablefullscreen) {
+                this.invokeEventCallback(this.fullscreen ? 'exitfullscreen' : 'fullscreen', { $event });
+                this.fullscreen = !this.fullscreen;
+                core.toggleClass(this.nativeElement, 'fullscreen', this.fullscreen);
+                // Re-plot the widgets inside panel
+                this.reDrawChildren();
+            }
+            this.computeDimensions();
+        }
+        // show/hide help
+        toggleHelp() {
+            this.helpClass = this.helpClass ? '' : 'show-help';
+            core.toggleClass(this.nativeElement, 'show-help', !!this.helpClass);
+            core.$appDigest();
+        }
+        // On action item click
+        menuActionItemClick($event, $item) {
+            this.selectedAction = lodashEs.omit($item, ['children', 'value']);
+            this.invokeEventCallback('actionsclick', { $event, $item: this.selectedAction });
+        }
+        // hide the panel and invoke the respective event handler
+        close($event) {
+            this.getWidget().show = false;
+            this.invokeEventCallback('close', { $event });
+        }
+        // calculation of dimensions when the panel the panel state changes from/to fullscreen
+        computeDimensions() {
+            const headerHeight = this.panelHeader.nativeElement.offsetHeight;
+            const footer = this.nativeElement.querySelector('.panel-footer');
+            const content = this.panelContent.nativeElement;
+            const vHeight = window.innerHeight;
+            let inlineHeight;
+            if (this.fullscreen) {
+                inlineHeight = this.hideFooter ? (vHeight - headerHeight) : vHeight - (footer.offsetHeight + headerHeight);
+            }
+            else {
+                inlineHeight = this.height || '';
+            }
+            core.setCSS(content, 'height', inlineHeight);
+        }
+        // notify the redrawable components(charts, grid)
+        reDrawChildren() {
+            setTimeout(() => {
+                if (this.reDrawableComponents) {
+                    this.reDrawableComponents.forEach(c => c.redraw());
+                }
+            }, 100);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'expanded') {
+                this.expanded = nv;
+            }
+            else if (key === 'content') {
+                setTimeout(() => {
+                    if (this.expanded || !this.collapsible) {
+                        this.$lazyLoad();
+                    }
+                }, 20);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngAfterContentInit() {
+            super.ngAfterContentInit();
+            this.hasFooter = !!this.nativeElement.querySelector('[wmPanelFooter]');
+            base.styler(this.panelBody.nativeElement, this, base.APPLY_STYLES_TYPE.INNER_SHELL);
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Clear ViewChild references
+            this.panelHeader = null;
+            this.panelContent = null;
+            this.panelBody = null;
+            // MEMORY LEAK FIX: Clear ContentChildren QueryList reference
+            if (this.reDrawableComponents) {
+                this.reDrawableComponents = null;
+            }
+            // MEMORY LEAK FIX: Clear lazy load function reference
+            this.$lazyLoad = null;
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PanelComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PanelComponent, isStandalone: true, selector: "[wmPanel]", providers: [
+                base.provideAsWidgetRef(PanelComponent)
+            ], queries: [{ propertyName: "reDrawableComponents", predicate: base.RedrawableDirective, descendants: true }], viewQueries: [{ propertyName: "panelHeader", first: true, predicate: ["panelHeading"], descendants: true }, { propertyName: "panelContent", first: true, predicate: ["panelContent"], descendants: true, static: true }, { propertyName: "panelBody", first: true, predicate: ["panelBody"], descendants: true, static: true }], exportAs: ["wmPanel"], usesInheritance: true, ngImport: i0__namespace, template: "@if (showHeader) {\n  <div class=\"panel-heading {{helpClass}}\"  #panelHeading>\n    <div class=\"panel-title\">\n      <a href=\"javascript:void(0)\" class=\"panel-toggle\" (click)=\"toggle($event)\" [attr.aria-expanded]=\"!!expanded\">\n        <div class=\"pull-left\">\n          @if (iconclass && !iconurl) {\n            <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n          }\n          @if (iconurl) {\n            <img data-identifier=\"img\" title=\"iconurl\" alt=\"Panel icon\" class=\"panel-image-icon\"\n              [src]=\"iconurl | image\"\n              [ngStyle]=\"{width: iconwidth ,height: iconheight, margin: iconmargin}\" />\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\" [title]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n      </a>\n      <div class=\"panel-actions\">\n        @if (badgevalue) {\n          <span\n          class=\"app-badge label label-{{badgetype}}\">{{badgevalue}}</span>\n        }\n        @if (actions) {\n          <div wmMenu aria-label=\"dropdown\" dropdown type=\"anchor\" class=\"panel-action\" dataset.bind=\"actions\"\n            caption=\"\" menuposition=\"down,left\" iconclass=\"wi wi-more-vert\"\n            autoclose.bind=\"autoclose\" datafield.bind=\"datafield\" select.event=\"menuActionItemClick($event,$item)\">\n          </div>\n        }\n        @if (helptext) {\n          <button type=\"button\" aria-label=\"Help\" class=\"app-icon panel-action wi\" [title]=\"appLocale.LABEL_HELP\"\n            (click)=\"toggleHelp()\"><i class=\"wi-question\"></i></button>\n          }\n          @if (collapsible) {\n            <button type=\"button\" aria-label=\"Collapse/Expand\" class=\"app-icon wi panel-action\"\n              [title]=\"expandCollapseTitle\" (click)=\"toggle($event);\" [attr.aria-expanded]=\"!!expanded\"><i\n            [ngClass]=\"expanded ? 'wi-minus' : 'wi-plus'\"></i></button>\n          }\n          @if (enablefullscreen) {\n            <button type=\"button\" aria-label=\"Fullscreen/Exit\" class=\"app-icon panel-action wi\"\n              [title]=\"fullScreenTitle\" (click)=\"toggleFullScreen($event);\"><i\n            [ngClass]=\"fullscreen ? 'wi-fullscreen-exit' : 'wi-fullscreen'\"></i></button>\n          }\n          @if (closable) {\n            <button type=\"button\" aria-label=\"Close button\" class=\"app-icon panel-action\"\n              title=\"{{appLocale.LABEL_CLOSE}}\" (click)=\"close($event)\"><i\n            class=\"wi wi-close\"></i></button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"panel-content\"  [hidden]=\"!expanded\" #panelContent>\n    <!-- Todo Bandhavya - implement smooth scroll -->\n    <div partial-container-target #panelBody [ngClass]=\"['panel-body', helpClass]\">\n      <ng-content></ng-content>\n    </div>\n    <aside class=\"panel-help-message\" [ngClass]=\"helpClass\">\n      <h5 class=\"panel-help-header\" [textContent]=\"appLocale.LABEL_HELP\"></h5>\n      <div class=\"panel-help-content\" [innerHTML]=\"helptext | trustAs : 'html'\"></div>\n    </aside>\n  </div>\n  <div class=\"app-panel-footer panel-footer clearfix\"  [hidden]=\"hideFooter\">\n    <ng-content select=\"[wmPanelFooter]\"></ng-content>\n  </div>\n", dependencies: [{ kind: "ngmodule", type: i1.BsDropdownModule }, { kind: "directive", type: i1__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: menu.MenuComponent, selector: "[wmMenu]" }, { kind: "pipe", type: base.TrustAsPipe, name: "trustAs" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i1.BsDropdownModule, i2.CommonModule, base.TextContentDirective, base.TrustAsPipe, menu.MenuComponent], selector: '[wmPanel]', providers: [
+                            base.provideAsWidgetRef(PanelComponent)
+                        ], exportAs: 'wmPanel', template: "@if (showHeader) {\n  <div class=\"panel-heading {{helpClass}}\"  #panelHeading>\n    <div class=\"panel-title\">\n      <a href=\"javascript:void(0)\" class=\"panel-toggle\" (click)=\"toggle($event)\" [attr.aria-expanded]=\"!!expanded\">\n        <div class=\"pull-left\">\n          @if (iconclass && !iconurl) {\n            <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n          }\n          @if (iconurl) {\n            <img data-identifier=\"img\" title=\"iconurl\" alt=\"Panel icon\" class=\"panel-image-icon\"\n              [src]=\"iconurl | image\"\n              [ngStyle]=\"{width: iconwidth ,height: iconheight, margin: iconmargin}\" />\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\" [title]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n      </a>\n      <div class=\"panel-actions\">\n        @if (badgevalue) {\n          <span\n          class=\"app-badge label label-{{badgetype}}\">{{badgevalue}}</span>\n        }\n        @if (actions) {\n          <div wmMenu aria-label=\"dropdown\" dropdown type=\"anchor\" class=\"panel-action\" dataset.bind=\"actions\"\n            caption=\"\" menuposition=\"down,left\" iconclass=\"wi wi-more-vert\"\n            autoclose.bind=\"autoclose\" datafield.bind=\"datafield\" select.event=\"menuActionItemClick($event,$item)\">\n          </div>\n        }\n        @if (helptext) {\n          <button type=\"button\" aria-label=\"Help\" class=\"app-icon panel-action wi\" [title]=\"appLocale.LABEL_HELP\"\n            (click)=\"toggleHelp()\"><i class=\"wi-question\"></i></button>\n          }\n          @if (collapsible) {\n            <button type=\"button\" aria-label=\"Collapse/Expand\" class=\"app-icon wi panel-action\"\n              [title]=\"expandCollapseTitle\" (click)=\"toggle($event);\" [attr.aria-expanded]=\"!!expanded\"><i\n            [ngClass]=\"expanded ? 'wi-minus' : 'wi-plus'\"></i></button>\n          }\n          @if (enablefullscreen) {\n            <button type=\"button\" aria-label=\"Fullscreen/Exit\" class=\"app-icon panel-action wi\"\n              [title]=\"fullScreenTitle\" (click)=\"toggleFullScreen($event);\"><i\n            [ngClass]=\"fullscreen ? 'wi-fullscreen-exit' : 'wi-fullscreen'\"></i></button>\n          }\n          @if (closable) {\n            <button type=\"button\" aria-label=\"Close button\" class=\"app-icon panel-action\"\n              title=\"{{appLocale.LABEL_CLOSE}}\" (click)=\"close($event)\"><i\n            class=\"wi wi-close\"></i></button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"panel-content\"  [hidden]=\"!expanded\" #panelContent>\n    <!-- Todo Bandhavya - implement smooth scroll -->\n    <div partial-container-target #panelBody [ngClass]=\"['panel-body', helpClass]\">\n      <ng-content></ng-content>\n    </div>\n    <aside class=\"panel-help-message\" [ngClass]=\"helpClass\">\n      <h5 class=\"panel-help-header\" [textContent]=\"appLocale.LABEL_HELP\"></h5>\n      <div class=\"panel-help-content\" [innerHTML]=\"helptext | trustAs : 'html'\"></div>\n    </aside>\n  </div>\n  <div class=\"app-panel-footer panel-footer clearfix\"  [hidden]=\"hideFooter\">\n    <ng-content select=\"[wmPanelFooter]\"></ng-content>\n  </div>\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { panelHeader: [{
+                    type: i0.ViewChild,
+                    args: ['panelHeading', { static: false }]
+                }], panelContent: [{
+                    type: i0.ViewChild,
+                    args: ['panelContent', { static: true }]
+                }], panelBody: [{
+                    type: i0.ViewChild,
+                    args: ['panelBody', { static: true }]
+                }], reDrawableComponents: [{
+                    type: i0.ContentChildren,
+                    args: [base.RedrawableDirective, { descendants: true }]
+                }] } });
+
+    exports.PanelComponent = PanelComponent;
+
+}));

package/components/containers/panel/fesm2022/index.mjs

@@ -0,0 +1,210 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { register, PROP_STRING, PROP_BOOLEAN, PROP_ANY, styler, APPLY_STYLES_TYPE, TextContentDirective, TrustAsPipe, RedrawableDirective, provideAsWidgetRef } from '@wm/components/base';
+import * as i0 from '@angular/core';
+import { ContentChildren, ViewChild, Inject, Optional, Component } from '@angular/core';
+import { noop, removeAttr, toggleClass, $appDigest, setCSS } from '@wm/core';
+import * as i1 from 'ngx-bootstrap/dropdown';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { MenuAdapterComponent, MenuComponent } from '@wm/components/navigation/menu';
+import { omit } from 'lodash-es';
+
+const registerProps = () => {
+    register('wm-panel', new Map([
+        ['actions', {}],
+        ['animation', PROP_STRING],
+        ['autoclose', PROP_STRING],
+        ['badgetype', { value: 'default', ...PROP_STRING }],
+        ['badgevalue', PROP_STRING],
+        ['class', PROP_STRING],
+        ['closable', PROP_BOOLEAN],
+        ['collapsible', PROP_BOOLEAN],
+        ['conditionalclass', PROP_ANY],
+        ['conditionalstyle', PROP_ANY],
+        ['content', PROP_STRING],
+        ['datafield', PROP_STRING],
+        ['enablefullscreen', PROP_BOOLEAN],
+        ['expanded', { value: true, ...PROP_BOOLEAN }],
+        ['fullscreen', PROP_BOOLEAN],
+        ['helptext', PROP_STRING],
+        ['iconclass', PROP_STRING],
+        ['iconheight', PROP_STRING],
+        ['iconmargin', PROP_STRING],
+        ['iconurl', PROP_STRING],
+        ['iconwidth', PROP_STRING],
+        ['itemaction', PROP_STRING],
+        ['itemchildren', PROP_STRING],
+        ['itemicon', PROP_STRING],
+        ['itemlabel', PROP_STRING],
+        ['itemlink', PROP_STRING],
+        ['name', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['subheading', PROP_STRING],
+        ['title', PROP_STRING],
+        ['userrole', PROP_STRING],
+        ['hint', PROP_STRING]
+    ]));
+};
+
+const DEFAULT_CLS = 'app-panel panel';
+const WIDGET_CONFIG = { widgetType: 'wm-panel', hostClass: DEFAULT_CLS };
+class PanelComponent extends MenuAdapterComponent {
+    static { this.initializeProps = registerProps(); }
+    // conditions to show the footer
+    get hideFooter() {
+        return !this.hasFooter || !this.expanded;
+    }
+    // conditions to show header
+    get showHeader() {
+        return this.iconurl || this.iconclass || this.collapsible || this.actions || this.title || this.subheading || this.enablefullscreen;
+    }
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.$lazyLoad = noop;
+        this.expanded = true;
+        this.helpClass = '';
+        this.helptext = '';
+        styler(this.nativeElement, this, APPLY_STYLES_TYPE.SHELL);
+        this.fullScreenTitle = `${this.appLocale.LABEL_FULLSCREEN}/${this.appLocale.LABEL_EXITFULLSCREEN}`;
+        this.expandCollapseTitle = `${this.appLocale.LABEL_COLLAPSE}/${this.appLocale.LABEL_EXPAND}`;
+        removeAttr(this.nativeElement, 'title');
+    }
+    // toggle the panel state between collapsed - expanded. invoke the respective callbacks
+    toggle($event) {
+        if (this.collapsible) {
+            this.invokeEventCallback(this.expanded ? 'collapse' : 'expand', { $event });
+            this.expanded = !this.expanded;
+            if (this.expanded) {
+                this.$lazyLoad();
+                this.reDrawChildren();
+            }
+        }
+    }
+    expand($event) {
+        if (!this.expanded) {
+            this.toggle($event);
+        }
+    }
+    collapse($event) {
+        if (this.expanded) {
+            this.toggle($event);
+        }
+    }
+    // toggle the fullscreen state of the panel. invoke the respective callbacks
+    toggleFullScreen($event) {
+        if (this.enablefullscreen) {
+            this.invokeEventCallback(this.fullscreen ? 'exitfullscreen' : 'fullscreen', { $event });
+            this.fullscreen = !this.fullscreen;
+            toggleClass(this.nativeElement, 'fullscreen', this.fullscreen);
+            // Re-plot the widgets inside panel
+            this.reDrawChildren();
+        }
+        this.computeDimensions();
+    }
+    // show/hide help
+    toggleHelp() {
+        this.helpClass = this.helpClass ? '' : 'show-help';
+        toggleClass(this.nativeElement, 'show-help', !!this.helpClass);
+        $appDigest();
+    }
+    // On action item click
+    menuActionItemClick($event, $item) {
+        this.selectedAction = omit($item, ['children', 'value']);
+        this.invokeEventCallback('actionsclick', { $event, $item: this.selectedAction });
+    }
+    // hide the panel and invoke the respective event handler
+    close($event) {
+        this.getWidget().show = false;
+        this.invokeEventCallback('close', { $event });
+    }
+    // calculation of dimensions when the panel the panel state changes from/to fullscreen
+    computeDimensions() {
+        const headerHeight = this.panelHeader.nativeElement.offsetHeight;
+        const footer = this.nativeElement.querySelector('.panel-footer');
+        const content = this.panelContent.nativeElement;
+        const vHeight = window.innerHeight;
+        let inlineHeight;
+        if (this.fullscreen) {
+            inlineHeight = this.hideFooter ? (vHeight - headerHeight) : vHeight - (footer.offsetHeight + headerHeight);
+        }
+        else {
+            inlineHeight = this.height || '';
+        }
+        setCSS(content, 'height', inlineHeight);
+    }
+    // notify the redrawable components(charts, grid)
+    reDrawChildren() {
+        setTimeout(() => {
+            if (this.reDrawableComponents) {
+                this.reDrawableComponents.forEach(c => c.redraw());
+            }
+        }, 100);
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'expanded') {
+            this.expanded = nv;
+        }
+        else if (key === 'content') {
+            setTimeout(() => {
+                if (this.expanded || !this.collapsible) {
+                    this.$lazyLoad();
+                }
+            }, 20);
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.hasFooter = !!this.nativeElement.querySelector('[wmPanelFooter]');
+        styler(this.panelBody.nativeElement, this, APPLY_STYLES_TYPE.INNER_SHELL);
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild references
+        this.panelHeader = null;
+        this.panelContent = null;
+        this.panelBody = null;
+        // MEMORY LEAK FIX: Clear ContentChildren QueryList reference
+        if (this.reDrawableComponents) {
+            this.reDrawableComponents = null;
+        }
+        // MEMORY LEAK FIX: Clear lazy load function reference
+        this.$lazyLoad = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PanelComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PanelComponent, isStandalone: true, selector: "[wmPanel]", providers: [
+            provideAsWidgetRef(PanelComponent)
+        ], queries: [{ propertyName: "reDrawableComponents", predicate: RedrawableDirective, descendants: true }], viewQueries: [{ propertyName: "panelHeader", first: true, predicate: ["panelHeading"], descendants: true }, { propertyName: "panelContent", first: true, predicate: ["panelContent"], descendants: true, static: true }, { propertyName: "panelBody", first: true, predicate: ["panelBody"], descendants: true, static: true }], exportAs: ["wmPanel"], usesInheritance: true, ngImport: i0, template: "@if (showHeader) {\n  <div class=\"panel-heading {{helpClass}}\"  #panelHeading>\n    <div class=\"panel-title\">\n      <a href=\"javascript:void(0)\" class=\"panel-toggle\" (click)=\"toggle($event)\" [attr.aria-expanded]=\"!!expanded\">\n        <div class=\"pull-left\">\n          @if (iconclass && !iconurl) {\n            <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n          }\n          @if (iconurl) {\n            <img data-identifier=\"img\" title=\"iconurl\" alt=\"Panel icon\" class=\"panel-image-icon\"\n              [src]=\"iconurl | image\"\n              [ngStyle]=\"{width: iconwidth ,height: iconheight, margin: iconmargin}\" />\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\" [title]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n      </a>\n      <div class=\"panel-actions\">\n        @if (badgevalue) {\n          <span\n          class=\"app-badge label label-{{badgetype}}\">{{badgevalue}}</span>\n        }\n        @if (actions) {\n          <div wmMenu aria-label=\"dropdown\" dropdown type=\"anchor\" class=\"panel-action\" dataset.bind=\"actions\"\n            caption=\"\" menuposition=\"down,left\" iconclass=\"wi wi-more-vert\"\n            autoclose.bind=\"autoclose\" datafield.bind=\"datafield\" select.event=\"menuActionItemClick($event,$item)\">\n          </div>\n        }\n        @if (helptext) {\n          <button type=\"button\" aria-label=\"Help\" class=\"app-icon panel-action wi\" [title]=\"appLocale.LABEL_HELP\"\n            (click)=\"toggleHelp()\"><i class=\"wi-question\"></i></button>\n          }\n          @if (collapsible) {\n            <button type=\"button\" aria-label=\"Collapse/Expand\" class=\"app-icon wi panel-action\"\n              [title]=\"expandCollapseTitle\" (click)=\"toggle($event);\" [attr.aria-expanded]=\"!!expanded\"><i\n            [ngClass]=\"expanded ? 'wi-minus' : 'wi-plus'\"></i></button>\n          }\n          @if (enablefullscreen) {\n            <button type=\"button\" aria-label=\"Fullscreen/Exit\" class=\"app-icon panel-action wi\"\n              [title]=\"fullScreenTitle\" (click)=\"toggleFullScreen($event);\"><i\n            [ngClass]=\"fullscreen ? 'wi-fullscreen-exit' : 'wi-fullscreen'\"></i></button>\n          }\n          @if (closable) {\n            <button type=\"button\" aria-label=\"Close button\" class=\"app-icon panel-action\"\n              title=\"{{appLocale.LABEL_CLOSE}}\" (click)=\"close($event)\"><i\n            class=\"wi wi-close\"></i></button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"panel-content\"  [hidden]=\"!expanded\" #panelContent>\n    <!-- Todo Bandhavya - implement smooth scroll -->\n    <div partial-container-target #panelBody [ngClass]=\"['panel-body', helpClass]\">\n      <ng-content></ng-content>\n    </div>\n    <aside class=\"panel-help-message\" [ngClass]=\"helpClass\">\n      <h5 class=\"panel-help-header\" [textContent]=\"appLocale.LABEL_HELP\"></h5>\n      <div class=\"panel-help-content\" [innerHTML]=\"helptext | trustAs : 'html'\"></div>\n    </aside>\n  </div>\n  <div class=\"app-panel-footer panel-footer clearfix\"  [hidden]=\"hideFooter\">\n    <ng-content select=\"[wmPanelFooter]\"></ng-content>\n  </div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: MenuComponent, selector: "[wmMenu]" }, { kind: "pipe", type: TrustAsPipe, name: "trustAs" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [BsDropdownModule, CommonModule, TextContentDirective, TrustAsPipe, MenuComponent], selector: '[wmPanel]', providers: [
+                        provideAsWidgetRef(PanelComponent)
+                    ], exportAs: 'wmPanel', template: "@if (showHeader) {\n  <div class=\"panel-heading {{helpClass}}\"  #panelHeading>\n    <div class=\"panel-title\">\n      <a href=\"javascript:void(0)\" class=\"panel-toggle\" (click)=\"toggle($event)\" [attr.aria-expanded]=\"!!expanded\">\n        <div class=\"pull-left\">\n          @if (iconclass && !iconurl) {\n            <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n          }\n          @if (iconurl) {\n            <img data-identifier=\"img\" title=\"iconurl\" alt=\"Panel icon\" class=\"panel-image-icon\"\n              [src]=\"iconurl | image\"\n              [ngStyle]=\"{width: iconwidth ,height: iconheight, margin: iconmargin}\" />\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\" [title]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n      </a>\n      <div class=\"panel-actions\">\n        @if (badgevalue) {\n          <span\n          class=\"app-badge label label-{{badgetype}}\">{{badgevalue}}</span>\n        }\n        @if (actions) {\n          <div wmMenu aria-label=\"dropdown\" dropdown type=\"anchor\" class=\"panel-action\" dataset.bind=\"actions\"\n            caption=\"\" menuposition=\"down,left\" iconclass=\"wi wi-more-vert\"\n            autoclose.bind=\"autoclose\" datafield.bind=\"datafield\" select.event=\"menuActionItemClick($event,$item)\">\n          </div>\n        }\n        @if (helptext) {\n          <button type=\"button\" aria-label=\"Help\" class=\"app-icon panel-action wi\" [title]=\"appLocale.LABEL_HELP\"\n            (click)=\"toggleHelp()\"><i class=\"wi-question\"></i></button>\n          }\n          @if (collapsible) {\n            <button type=\"button\" aria-label=\"Collapse/Expand\" class=\"app-icon wi panel-action\"\n              [title]=\"expandCollapseTitle\" (click)=\"toggle($event);\" [attr.aria-expanded]=\"!!expanded\"><i\n            [ngClass]=\"expanded ? 'wi-minus' : 'wi-plus'\"></i></button>\n          }\n          @if (enablefullscreen) {\n            <button type=\"button\" aria-label=\"Fullscreen/Exit\" class=\"app-icon panel-action wi\"\n              [title]=\"fullScreenTitle\" (click)=\"toggleFullScreen($event);\"><i\n            [ngClass]=\"fullscreen ? 'wi-fullscreen-exit' : 'wi-fullscreen'\"></i></button>\n          }\n          @if (closable) {\n            <button type=\"button\" aria-label=\"Close button\" class=\"app-icon panel-action\"\n              title=\"{{appLocale.LABEL_CLOSE}}\" (click)=\"close($event)\"><i\n            class=\"wi wi-close\"></i></button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"panel-content\"  [hidden]=\"!expanded\" #panelContent>\n    <!-- Todo Bandhavya - implement smooth scroll -->\n    <div partial-container-target #panelBody [ngClass]=\"['panel-body', helpClass]\">\n      <ng-content></ng-content>\n    </div>\n    <aside class=\"panel-help-message\" [ngClass]=\"helpClass\">\n      <h5 class=\"panel-help-header\" [textContent]=\"appLocale.LABEL_HELP\"></h5>\n      <div class=\"panel-help-content\" [innerHTML]=\"helptext | trustAs : 'html'\"></div>\n    </aside>\n  </div>\n  <div class=\"app-panel-footer panel-footer clearfix\"  [hidden]=\"hideFooter\">\n    <ng-content select=\"[wmPanelFooter]\"></ng-content>\n  </div>\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { panelHeader: [{
+                type: ViewChild,
+                args: ['panelHeading', { static: false }]
+            }], panelContent: [{
+                type: ViewChild,
+                args: ['panelContent', { static: true }]
+            }], panelBody: [{
+                type: ViewChild,
+                args: ['panelBody', { static: true }]
+            }], reDrawableComponents: [{
+                type: ContentChildren,
+                args: [RedrawableDirective, { descendants: true }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PanelComponent };
+//# sourceMappingURL=index.mjs.map

package/components/containers/panel/fesm2022/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/containers/panel/src/panel.props.ts","../../../../../projects/components/widgets/containers/panel/src/panel.component.ts","../../../../../projects/components/widgets/containers/panel/src/panel.component.html","../../../../../projects/components/widgets/containers/panel/src/index.ts"],"sourcesContent":["import { PROP_ANY, PROP_BOOLEAN, PROP_STRING, register } from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-panel',\n        new Map(\n            [\n                ['actions', {}],\n                ['animation', PROP_STRING],\n                ['autoclose', PROP_STRING],\n                ['badgetype', { value: 'default', ...PROP_STRING }],\n                ['badgevalue', PROP_STRING],\n                ['class', PROP_STRING],\n                ['closable', PROP_BOOLEAN],\n                ['collapsible', PROP_BOOLEAN],\n                ['conditionalclass', PROP_ANY],\n                ['conditionalstyle', PROP_ANY],\n                ['content', PROP_STRING],\n                ['datafield', PROP_STRING],\n                ['enablefullscreen', PROP_BOOLEAN],\n                ['expanded', { value: true, ...PROP_BOOLEAN }],\n                ['fullscreen', PROP_BOOLEAN],\n                ['helptext', PROP_STRING],\n                ['iconclass', PROP_STRING],\n                ['iconheight', PROP_STRING],\n                ['iconmargin', PROP_STRING],\n                ['iconurl', PROP_STRING],\n                ['iconwidth', PROP_STRING],\n                ['itemaction', PROP_STRING],\n                ['itemchildren', PROP_STRING],\n                ['itemicon', PROP_STRING],\n                ['itemlabel', PROP_STRING],\n                ['itemlink', PROP_STRING],\n                ['name', PROP_STRING],\n                ['show', { value: true, ...PROP_BOOLEAN }],\n                ['subheading', PROP_STRING],\n                ['title', PROP_STRING],\n                ['userrole', PROP_STRING],\n                ['hint', PROP_STRING]\n            ]\n        )\n    );\n};\n","import { CommonModule } from '@angular/common';\nimport { TextContentDirective, TrustAsPipe } from \"@wm/components/base\";\nimport {\n    AfterContentInit,\n    Component,\n    ContentChildren,\n    ElementRef,\n    Inject,\n    Injector,\n    OnDestroy,\n    OnInit,\n    Optional,\n    ViewChild\n} from '@angular/core';\n\nimport { $appDigest, noop, removeAttr, setCSS, toggleClass } from '@wm/core';\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { APPLY_STYLES_TYPE, IWidgetConfig, provideAsWidgetRef, RedrawableDirective, styler } from '@wm/components/base';\nimport { MenuAdapterComponent, MenuComponent } from '@wm/components/navigation/menu';\nimport { registerProps } from './panel.props';\nimport { omit } from \"lodash-es\";\n\nconst DEFAULT_CLS = 'app-panel panel';\nconst WIDGET_CONFIG: IWidgetConfig = { widgetType: 'wm-panel', hostClass: DEFAULT_CLS };\n\n@Component({\n    standalone: true,\n    imports: [BsDropdownModule, CommonModule, TextContentDirective, TrustAsPipe, MenuComponent],\n    selector: '[wmPanel]',\n    templateUrl: './panel.component.html',\n    providers: [\n        provideAsWidgetRef(PanelComponent)\n    ],\n    exportAs: 'wmPanel'\n})\n\nexport class PanelComponent extends MenuAdapterComponent implements OnInit, AfterContentInit, OnDestroy {\n    static initializeProps = registerProps();\n\n    public $lazyLoad = noop;\n    public iconurl: string;\n    public iconclass: string;\n    public collapsible: boolean;\n    public expanded = true;\n    public enablefullscreen: boolean;\n    public fullscreen: boolean;\n    public title: string;\n    public subheading: string;\n    public actions: any;\n    public selectedAction: any;\n\n    public helpClass = '';\n    public helptext = '';\n    private fullScreenTitle: string;\n    private expandCollapseTitle: string;\n\n    @ViewChild('panelHeading', { static: false }) private panelHeader: ElementRef;\n    @ViewChild('panelContent', { static: true }) private panelContent: ElementRef;\n    @ViewChild('panelBody', { static: true }) private panelBody: ElementRef;\n    @ContentChildren(RedrawableDirective, { descendants: true }) reDrawableComponents;\n\n    private hasFooter: boolean;\n\n    // conditions to show the footer\n    public get hideFooter() {\n        return !this.hasFooter || !this.expanded;\n    }\n\n    // conditions to show header\n    public get showHeader() {\n        return this.iconurl || this.iconclass || this.collapsible || this.actions || this.title || this.subheading || this.enablefullscreen;\n    }\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n\n        styler(this.nativeElement, this, APPLY_STYLES_TYPE.SHELL);\n\n        this.fullScreenTitle = `${this.appLocale.LABEL_FULLSCREEN}/${this.appLocale.LABEL_EXITFULLSCREEN}`;\n        this.expandCollapseTitle = `${this.appLocale.LABEL_COLLAPSE}/${this.appLocale.LABEL_EXPAND}`;\n        removeAttr(this.nativeElement, 'title');\n    }\n\n    // toggle the panel state between collapsed - expanded. invoke the respective callbacks\n    public toggle($event) {\n        if (this.collapsible) {\n            this.invokeEventCallback(this.expanded ? 'collapse' : 'expand', { $event });\n            this.expanded = !this.expanded;\n            if (this.expanded) {\n                this.$lazyLoad();\n                this.reDrawChildren();\n            }\n        }\n    }\n\n    public expand($event) {\n        if (!this.expanded) {\n            this.toggle($event);\n        }\n    }\n\n    public collapse($event) {\n        if (this.expanded) {\n            this.toggle($event);\n        }\n    }\n\n    // toggle the fullscreen state of the panel. invoke the respective callbacks\n    protected toggleFullScreen($event) {\n        if (this.enablefullscreen) {\n            this.invokeEventCallback(this.fullscreen ? 'exitfullscreen' : 'fullscreen', { $event });\n            this.fullscreen = !this.fullscreen;\n            toggleClass(this.nativeElement, 'fullscreen', this.fullscreen);\n            // Re-plot the widgets inside panel\n            this.reDrawChildren();\n        }\n        this.computeDimensions();\n    }\n\n    // show/hide help\n    protected toggleHelp() {\n        this.helpClass = this.helpClass ? '' : 'show-help';\n        toggleClass(this.nativeElement, 'show-help', !!this.helpClass);\n        $appDigest();\n    }\n\n    // On action item click\n    protected menuActionItemClick($event, $item) {\n        this.selectedAction = omit($item, ['children', 'value']);\n        this.invokeEventCallback('actionsclick', { $event, $item: this.selectedAction });\n    }\n\n    // hide the panel and invoke the respective event handler\n    protected close($event) {\n        this.getWidget().show = false;\n        this.invokeEventCallback('close', { $event });\n    }\n\n    // calculation of dimensions when the panel the panel state changes from/to fullscreen\n    private computeDimensions() {\n        const headerHeight = this.panelHeader.nativeElement.offsetHeight;\n        const footer = this.nativeElement.querySelector('.panel-footer') as HTMLElement;\n        const content = this.panelContent.nativeElement;\n        const vHeight = window.innerHeight;\n\n        let inlineHeight;\n\n        if (this.fullscreen) {\n            inlineHeight = this.hideFooter ? (vHeight - headerHeight) : vHeight - (footer.offsetHeight + headerHeight);\n        } else {\n            inlineHeight = this.height || '';\n        }\n\n        setCSS(content, 'height', inlineHeight);\n    }\n\n    // notify the redrawable components(charts, grid)\n    private reDrawChildren() {\n        setTimeout(() => {\n            if (this.reDrawableComponents) {\n                this.reDrawableComponents.forEach(c => c.redraw());\n            }\n        }, 100);\n    }\n\n    onPropertyChange(key: string, nv: any, ov?: any) {\n        if (key === 'expanded') {\n            this.expanded = nv;\n        } else if (key === 'content') {\n            setTimeout(() => {\n                if (this.expanded || !this.collapsible) {\n                    this.$lazyLoad();\n                }\n            }, 20);\n        } else {\n            super.onPropertyChange(key, nv, ov);\n        }\n    }\n\n    ngAfterContentInit() {\n        super.ngAfterContentInit();\n        this.hasFooter = !!this.nativeElement.querySelector('[wmPanelFooter]');\n        styler(this.panelBody.nativeElement as HTMLElement, this, APPLY_STYLES_TYPE.INNER_SHELL);\n    }\n\n    ngOnDestroy() {\n        // MEMORY LEAK FIX: Clear ViewChild references\n        this.panelHeader = null;\n        this.panelContent = null;\n        this.panelBody = null;\n\n        // MEMORY LEAK FIX: Clear ContentChildren QueryList reference\n        if (this.reDrawableComponents) {\n            this.reDrawableComponents = null;\n        }\n\n        // MEMORY LEAK FIX: Clear lazy load function reference\n        this.$lazyLoad = null;\n\n        super.ngOnDestroy();\n    }\n}\n","@if (showHeader) {\n  <div class=\"panel-heading {{helpClass}}\"  #panelHeading>\n    <div class=\"panel-title\">\n      <a href=\"javascript:void(0)\" class=\"panel-toggle\" (click)=\"toggle($event)\" [attr.aria-expanded]=\"!!expanded\">\n        <div class=\"pull-left\">\n          @if (iconclass && !iconurl) {\n            <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n          }\n          @if (iconurl) {\n            <img data-identifier=\"img\" title=\"iconurl\" alt=\"Panel icon\" class=\"panel-image-icon\"\n              [src]=\"iconurl | image\"\n              [ngStyle]=\"{width: iconwidth ,height: iconheight, margin: iconmargin}\" />\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\" [title]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n      </a>\n      <div class=\"panel-actions\">\n        @if (badgevalue) {\n          <span\n          class=\"app-badge label label-{{badgetype}}\">{{badgevalue}}</span>\n        }\n        @if (actions) {\n          <div wmMenu aria-label=\"dropdown\" dropdown type=\"anchor\" class=\"panel-action\" dataset.bind=\"actions\"\n            caption=\"\" menuposition=\"down,left\" iconclass=\"wi wi-more-vert\"\n            autoclose.bind=\"autoclose\" datafield.bind=\"datafield\" select.event=\"menuActionItemClick($event,$item)\">\n          </div>\n        }\n        @if (helptext) {\n          <button type=\"button\" aria-label=\"Help\" class=\"app-icon panel-action wi\" [title]=\"appLocale.LABEL_HELP\"\n            (click)=\"toggleHelp()\"><i class=\"wi-question\"></i></button>\n          }\n          @if (collapsible) {\n            <button type=\"button\" aria-label=\"Collapse/Expand\" class=\"app-icon wi panel-action\"\n              [title]=\"expandCollapseTitle\" (click)=\"toggle($event);\" [attr.aria-expanded]=\"!!expanded\"><i\n            [ngClass]=\"expanded ? 'wi-minus' : 'wi-plus'\"></i></button>\n          }\n          @if (enablefullscreen) {\n            <button type=\"button\" aria-label=\"Fullscreen/Exit\" class=\"app-icon panel-action wi\"\n              [title]=\"fullScreenTitle\" (click)=\"toggleFullScreen($event);\"><i\n            [ngClass]=\"fullscreen ? 'wi-fullscreen-exit' : 'wi-fullscreen'\"></i></button>\n          }\n          @if (closable) {\n            <button type=\"button\" aria-label=\"Close button\" class=\"app-icon panel-action\"\n              title=\"{{appLocale.LABEL_CLOSE}}\" (click)=\"close($event)\"><i\n            class=\"wi wi-close\"></i></button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"panel-content\"  [hidden]=\"!expanded\" #panelContent>\n    <!-- Todo Bandhavya - implement smooth scroll -->\n    <div partial-container-target #panelBody [ngClass]=\"['panel-body', helpClass]\">\n      <ng-content></ng-content>\n    </div>\n    <aside class=\"panel-help-message\" [ngClass]=\"helpClass\">\n      <h5 class=\"panel-help-header\" [textContent]=\"appLocale.LABEL_HELP\"></h5>\n      <div class=\"panel-help-content\" [innerHTML]=\"helptext | trustAs : 'html'\"></div>\n    </aside>\n  </div>\n  <div class=\"app-panel-footer panel-footer clearfix\"  [hidden]=\"hideFooter\">\n    <ng-content select=\"[wmPanelFooter]\"></ng-content>\n  </div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/components/containers/panel/index.d.ts

@@ -0,0 +1,46 @@
+import * as i0 from '@angular/core';
+import { OnInit, AfterContentInit, OnDestroy, Injector } from '@angular/core';
+import { MenuAdapterComponent } from '@wm/components/navigation/menu';
+
+declare class PanelComponent extends MenuAdapterComponent implements OnInit, AfterContentInit, OnDestroy {
+    static initializeProps: void;
+    $lazyLoad: (...args: any[]) => void;
+    iconurl: string;
+    iconclass: string;
+    collapsible: boolean;
+    expanded: boolean;
+    enablefullscreen: boolean;
+    fullscreen: boolean;
+    title: string;
+    subheading: string;
+    actions: any;
+    selectedAction: any;
+    helpClass: string;
+    helptext: string;
+    private fullScreenTitle;
+    private expandCollapseTitle;
+    private panelHeader;
+    private panelContent;
+    private panelBody;
+    reDrawableComponents: any;
+    private hasFooter;
+    get hideFooter(): boolean;
+    get showHeader(): any;
+    constructor(inj: Injector, explicitContext: any);
+    toggle($event: any): void;
+    expand($event: any): void;
+    collapse($event: any): void;
+    protected toggleFullScreen($event: any): void;
+    protected toggleHelp(): void;
+    protected menuActionItemClick($event: any, $item: any): void;
+    protected close($event: any): void;
+    private computeDimensions;
+    private reDrawChildren;
+    onPropertyChange(key: string, nv: any, ov?: any): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "[wmPanel]", ["wmPanel"], {}, {}, ["reDrawableComponents"], ["*", "[wmPanelFooter]"], true, never>;
+}
+
+export { PanelComponent };

package/components/containers/panel/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/containers/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/containers/tabs/.npmignore

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