@wavemaker/app-ng-runtime 12.0.0-next.45002 → 12.0.0-next.45006

app-ng-runtime/components/containers/tabs/fesm2022/index.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, Attribute, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { Component, Attribute, Inject, Optional, HostBinding, ContentChildren, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@wm/components/base';
-import { PROP_STRING, PROP_ANY, PROP_NUMBER, PROP_BOOLEAN, register, StylableComponent, styler, APPLY_STYLES_TYPE, RedrawableDirective, provideAsWidgetRef, createArrayFrom, WmComponentsModule } from '@wm/components/base';
+import { PROP_STRING, PROP_ANY, PROP_NUMBER, PROP_BOOLEAN, register, StylableComponent, APPLY_STYLES_TYPE, styler, RedrawableDirective, provideAsWidgetRef, createArrayFrom, WmComponentsModule } from '@wm/components/base';
 import * as i1 from '@wm/core';
 import { setCSSFromObj, addClass, setCSS, $appDigest, isMobileApp, noop, removeAttr, removeClass, appendNode } from '@wm/core';
 import { SwipeAnimation } from '@swipey';
+import { find, isArray, indexOf, get, forEach, isEmpty, findIndex } from 'lodash-es';
 
 class TabsAnimator extends SwipeAnimation {
     constructor(tabs) {
@@ -111,16 +112,16 @@ const registerProps$1 = () => {
 
 const registerProps = () => {
     register('wm-tabpane', new Map([
-        ['active', PROP_BOOLEAN],
+        ['active', PROP_BOOLEAN], // internal property
         ['badgevalue', PROP_STRING],
         ['badgetype', { value: 'default', ...PROP_STRING }],
         ['class', PROP_STRING],
         ['content', PROP_STRING],
         ['disabled', PROP_BOOLEAN],
-        ['dynamicPaneIndex', PROP_NUMBER],
+        ['dynamicPaneIndex', PROP_NUMBER], // internal property
         ['heading', PROP_STRING],
         ['isdefaulttab', PROP_STRING],
-        ['isdynamic', PROP_BOOLEAN],
+        ['isdynamic', PROP_BOOLEAN], // internal property
         ['name', PROP_STRING],
         ['paneicon', PROP_STRING],
         ['show', { value: true, ...PROP_BOOLEAN }],
@@ -138,8 +139,8 @@ const WIDGET_CONFIG$1 = {
 };
 class TabPaneComponent extends StylableComponent {
     static { this.initializeProps = registerProps(); }
-    constructor(inj, tabsRef, heading, title) {
-        super(inj, WIDGET_CONFIG$1);
+    constructor(inj, tabsRef, heading, title, explicitContext) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
         this.tabsRef = tabsRef;
         this.heading = heading;
         this.title = title;
@@ -251,7 +252,7 @@ class TabPaneComponent extends StylableComponent {
             this.tabsRef.registerDynamicTab(this);
         }
     }
-    static { this.ɵfac = function TabPaneComponent_Factory(t) { return new (t || TabPaneComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TabsComponent), i0.ɵɵinjectAttribute('heading'), i0.ɵɵinjectAttribute('title')); }; }
+    static { this.ɵfac = function TabPaneComponent_Factory(t) { return new (t || TabPaneComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TabsComponent), i0.ɵɵinjectAttribute('heading'), i0.ɵɵinjectAttribute('title'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabPaneComponent, selectors: [["div", "wmTabPane", ""]], contentQueries: function TabPaneComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, RedrawableDirective, 5);
         } if (rf & 2) {
@@ -270,18 +271,23 @@ class TabPaneComponent extends StylableComponent {
             i0.ɵɵproperty("wmSmoothscroll", ctx.smoothscroll);
         } }, dependencies: [i2.SmoothScrollDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabPaneComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabPaneComponent, [{
         type: Component,
         args: [{ selector: 'div[wmTabPane]', providers: [
                     provideAsWidgetRef(TabPaneComponent)
                 ], template: "<div class=\"tab-body\" partial-container-target [wmSmoothscroll]=\"smoothscroll\">\n    <ng-content></ng-content>\n</div>" }]
-    }], function () { return [{ type: i0.Injector }, { type: TabsComponent }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: TabsComponent }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['heading']
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['title']
-            }] }]; }, { isActive: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { isActive: [{
             type: HostBinding,
             args: ['class.active']
         }], disabled: [{
@@ -291,14 +297,20 @@ class TabPaneComponent extends StylableComponent {
             type: ContentChildren,
             args: [RedrawableDirective, { descendants: true }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabPaneComponent, { className: "TabPaneComponent", filePath: "tab-pane/tab-pane.component.ts", lineNumber: 31 }); })();
 
 const _c0 = ["wmTabs", ""];
-const _c1 = function (a1) { return ["app-icon", a1]; };
+const _c1 = ["*", [["div", "wmRepeatTemplate", ""]]];
+const _c2 = ["*", "div[wmRepeatTemplate]"];
+const _c3 = (a0, a1) => ({ "nav-stacked": a0, "nav-justified": a1 });
+const _c4 = (a0, a1) => ({ "active": a0, "disabled": a1 });
+const _c5 = a0 => ["app-icon", a0];
+const _c6 = (a0, a1) => ({ "tab-stacked": a0, "tab-justified": a1 });
 function TabsComponent_li_1_i_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 8);
 } if (rf & 2) {
     const pane_r3 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c1, pane_r3.paneicon));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c5, pane_r3.paneicon));
 } }
 function TabsComponent_li_1_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 6);
@@ -307,46 +319,44 @@ function TabsComponent_li_1_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMapInterpolate1("label label-", pane_r3.badgetype, "");
     i0.ɵɵproperty("textContent", pane_r3.badgevalue);
 } }
-const _c2 = function (a0, a1) { return { "active": a0, "disabled": a1 }; };
 function TabsComponent_li_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 3)(1, "a", 4);
-    i0.ɵɵlistener("click", function TabsComponent_li_1_Template_a_click_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r10); const pane_r3 = restoredCtx.$implicit; const i_r4 = restoredCtx.index; pane_r3.select($event); return i0.ɵɵresetView(pane_r3.tabpaneHeaderClick($event, i_r4)); })("keydown", function TabsComponent_li_1_Template_a_keydown_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onkeydown($event)); });
+    i0.ɵɵlistener("click", function TabsComponent_li_1_Template_a_click_1_listener($event) { const ctx_r1 = i0.ɵɵrestoreView(_r1); const pane_r3 = ctx_r1.$implicit; const i_r4 = ctx_r1.index; pane_r3.select($event); return i0.ɵɵresetView(pane_r3.tabpaneHeaderClick($event, i_r4)); })("keydown", function TabsComponent_li_1_Template_a_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onkeydown($event)); });
     i0.ɵɵtemplate(2, TabsComponent_li_1_i_2_Template, 1, 3, "i", 5);
     i0.ɵɵelement(3, "span", 6);
     i0.ɵɵtemplate(4, TabsComponent_li_1_span_4_Template, 1, 4, "span", 7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const pane_r3 = ctx.$implicit;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c2, pane_r3.isActive, pane_r3.disabled))("hidden", !pane_r3.show);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c4, pane_r3.isActive, pane_r3.disabled))("hidden", !pane_r3.show);
     i0.ɵɵattribute("data-paneid", pane_r3.widgetId);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("tabindex", pane_r3.isActive ? "0" : "-1");
     i0.ɵɵattribute("aria-label", pane_r3.title)("title", pane_r3.title)("aria-selected", pane_r3.isActive);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", pane_r3.paneicon);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", pane_r3.title);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", pane_r3.badgevalue);
 } }
-const _c3 = function (a0, a1) { return { "tab-stacked": a0, "tab-justified": a1 }; };
 function TabsComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵprojection(1, 0, ["ngProjectAs", "div[wmTabPane]", 5, ["div", "wmTabPane", ""]]);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c3, ctx_r1.vertical, ctx_r1.justified));
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c6, ctx_r4.vertical, ctx_r4.justified));
 } }
 function TabsComponent_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r12 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r12.nodatamessage);
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r4.nodatamessage);
 } }
 function TabsComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
@@ -354,14 +364,11 @@ function TabsComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(2, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c3, ctx_r2.vertical, ctx_r2.justified));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r2.fieldDefs && !ctx_r2.fieldDefs.length);
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c6, ctx_r4.vertical, ctx_r4.justified));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r4.fieldDefs && !ctx_r4.fieldDefs.length);
 } }
-const _c4 = ["*", [["div", "wmRepeatTemplate", ""]]];
-const _c5 = function (a0, a1) { return { "nav-stacked": a0, "nav-justified": a1 }; };
-const _c6 = ["*", "div[wmRepeatTemplate]"];
 const DEFAULT_CLS = 'app-tabs clearfix';
 const WIDGET_CONFIG = {
     widgetType: 'wm-tabs',
@@ -369,10 +376,10 @@ const WIDGET_CONFIG = {
 };
 class TabsComponent extends StylableComponent {
     static { this.initializeProps = registerProps$1(); }
-    constructor(inj, dynamicComponentProvider, _transition, _tabsPosition, statePersistence) {
+    constructor(inj, dynamicComponentProvider, _transition, _tabsPosition, statePersistence, explicitContext) {
         // handle to the promise resolver
         let resolveFn = noop;
-        super(inj, WIDGET_CONFIG, new Promise(res => resolveFn = res));
+        super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
         this.transition = _transition;
         this.tabsposition = _tabsPosition;
         this.statePersistence = statePersistence;
@@ -407,8 +414,8 @@ class TabsComponent extends StylableComponent {
         const isLastPane = this.dynamicTabs.length === this.dynamicPaneIndex;
         if (isLastPane) {
             for (let i = 0; i < this.dynamicTabs.length; i++) {
-                const newPaneRef = _.find(this.dynamicTabs, pane => pane.dynamicPaneIndex === i);
-                const isPaneAlreadyExist = _.find(this.panes.toArray(), newPaneRef);
+                const newPaneRef = find(this.dynamicTabs, pane => pane.dynamicPaneIndex === i);
+                const isPaneAlreadyExist = find(this.panes.toArray(), newPaneRef);
                 if (!isPaneAlreadyExist) {
                     this.panes.reset([...this.panes.toArray(), newPaneRef]);
                     if (newPaneRef.active) {
@@ -425,13 +432,13 @@ class TabsComponent extends StylableComponent {
      * @param tabpanes - list of tabpanes
      */
     addPane(tabpanes) {
-        if (!_.isArray(tabpanes)) {
+        if (!isArray(tabpanes)) {
             tabpanes = [tabpanes];
         }
         const paneNamesList = [];
-        _.forEach(tabpanes, (pane, index) => {
-            const isPaneAlreadyCreated = _.find(this.panes.toArray(), { name: pane.name });
-            const isPaneNameExist = _.indexOf(paneNamesList, pane.name);
+        forEach(tabpanes, (pane, index) => {
+            const isPaneAlreadyCreated = find(this.panes.toArray(), { name: pane.name });
+            const isPaneNameExist = indexOf(paneNamesList, pane.name);
             // If user tries to add tabpane with the same name which is already exists then do not create the pane
             if (isPaneAlreadyCreated || isPaneNameExist > 0) {
                 console.warn(`The tab pane with name ${pane.name} already exists`);
@@ -442,13 +449,13 @@ class TabsComponent extends StylableComponent {
             this.dynamicPaneIndex++;
             const name = pane.name ? pane.name : `tabpane${this.panes.toArray().length + (index + 1)}`;
             paneNamesList.push(name);
-            const partialParams = _.get(pane, 'params');
-            _.forEach(pane, (value, key) => {
+            const partialParams = get(pane, 'params');
+            forEach(pane, (value, key) => {
                 if (key !== 'params') {
                     propsTmpl = `${propsTmpl} ${key}="${value}"`;
                 }
             });
-            _.forEach(partialParams, (value, key) => {
+            forEach(partialParams, (value, key) => {
                 paramMarkup = `${paramMarkup} <wm-param name="${key}" value="${value}"></wm-param>`;
             });
             const markup = `<wm-tabpane dynamicPaneIndex="${this.dynamicPaneIndex - 1}" isdynamic="true" name="${name}" ${propsTmpl}>
@@ -482,7 +489,7 @@ class TabsComponent extends StylableComponent {
         }
         let headerElement;
         // invoke deselect event callback on the preset active tab
-        if (!_.isEmpty(this.activeTab)) {
+        if (!isEmpty(this.activeTab)) {
             this.activeTab.deselect();
         }
         this.activeTab = paneRef.getWidget();
@@ -538,7 +545,7 @@ class TabsComponent extends StylableComponent {
     }
     // Returns the active tab index from tabs.
     getActiveTabIndex() {
-        return _.findIndex(this.panes.toArray(), { isActive: true });
+        return findIndex(this.panes.toArray(), { isActive: true });
     }
     isValidPaneIndex(index) {
         return (index >= 0 && index < this.panes.length);
@@ -547,7 +554,7 @@ class TabsComponent extends StylableComponent {
         return this.panes.toArray()[index];
     }
     getPaneRefByName(name) {
-        return _.find(this.panes.toArray(), { name: name });
+        return find(this.panes.toArray(), { name: name });
     }
     // returns false if the pane is hidden or disabled
     isSelectableTab(paneRef) {
@@ -705,7 +712,7 @@ class TabsComponent extends StylableComponent {
         super.ngAfterViewInit();
         this.registerTabsScroll();
     }
-    static { this.ɵfac = function TabsComponent_Factory(t) { return new (t || TabsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.DynamicComponentRefProvider), i0.ɵɵinjectAttribute('transition'), i0.ɵɵinjectAttribute('tabsposition'), i0.ɵɵdirectiveInject(i1.StatePersistence)); }; }
+    static { this.ɵfac = function TabsComponent_Factory(t) { return new (t || TabsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.DynamicComponentRefProvider), i0.ɵɵinjectAttribute('transition'), i0.ɵɵinjectAttribute('tabsposition'), i0.ɵɵdirectiveInject(i1.StatePersistence), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabsComponent, selectors: [["div", "wmTabs", ""]], contentQueries: function TabsComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, TabPaneComponent, 4);
         } if (rf & 2) {
@@ -713,38 +720,43 @@ class TabsComponent extends StylableComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panes = _t);
         } }, exportAs: ["wmTabs"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(TabsComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c6, decls: 4, vars: 7, consts: [["role", "tablist", 1, "nav", "nav-tabs", 3, "ngClass"], ["class", "tab-header", "role", "presentation", 3, "ngClass", "hidden", 4, "ngFor", "ngForOf"], ["class", "tab-content", 3, "ngClass", 4, "ngIf"], ["role", "presentation", 1, "tab-header", 3, "ngClass", "hidden"], ["href", "javascript:void(0);", "role", "tab", 1, "tab-heading", 3, "tabindex", "click", "keydown"], [3, "ngClass", 4, "ngIf"], [3, "textContent"], [3, "class", "textContent", 4, "ngIf"], [3, "ngClass"], [1, "tab-content", 3, "ngClass"], [4, "ngIf"]], template: function TabsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c4);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c2, decls: 4, vars: 7, consts: [["role", "tablist", 1, "nav", "nav-tabs", 3, "ngClass"], ["class", "tab-header", "role", "presentation", 3, "ngClass", "hidden", 4, "ngFor", "ngForOf"], ["class", "tab-content", 3, "ngClass", 4, "ngIf"], ["role", "presentation", 1, "tab-header", 3, "ngClass", "hidden"], ["href", "javascript:void(0);", "role", "tab", 1, "tab-heading", 3, "click", "keydown", "tabindex"], [3, "ngClass", 4, "ngIf"], [3, "textContent"], [3, "class", "textContent", 4, "ngIf"], [3, "ngClass"], [1, "tab-content", 3, "ngClass"], [4, "ngIf"]], template: function TabsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1);
             i0.ɵɵelementStart(0, "ul", 0);
             i0.ɵɵtemplate(1, TabsComponent_li_1_Template, 5, 13, "li", 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(2, TabsComponent_div_2_Template, 2, 4, "div", 2);
-            i0.ɵɵtemplate(3, TabsComponent_div_3_Template, 3, 5, "div", 2);
+            i0.ɵɵtemplate(2, TabsComponent_div_2_Template, 2, 4, "div", 2)(3, TabsComponent_div_3_Template, 3, 5, "div", 2);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c5, ctx.vertical, ctx.justified));
-            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c3, ctx.vertical, ctx.justified));
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.panes);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.type !== "dynamic");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.type === "dynamic");
         } }, dependencies: [i2$1.NgClass, i2$1.NgForOf, i2$1.NgIf, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsComponent, [{
         type: Component,
         args: [{ selector: 'div[wmTabs]', exportAs: 'wmTabs', providers: [
                     provideAsWidgetRef(TabsComponent)
                 ], template: "<ul class=\"nav nav-tabs\" [ngClass]=\"{'nav-stacked': vertical, 'nav-justified': justified}\" role=\"tablist\">\n    <li class=\"tab-header\" *ngFor=\"let pane of panes; let i=index;\" [attr.data-paneid]=\"pane.widgetId\" [ngClass]=\"{'active': pane.isActive, 'disabled': pane.disabled}\"\n        [hidden]=\"!pane.show\" role=\"presentation\">\n        <a class=\"tab-heading\" href=\"javascript:void(0);\" [attr.aria-label]=\"pane.title\" [attr.title]=\"pane.title\" [tabindex]=\"pane.isActive ? '0' : '-1'\"\n           [attr.aria-selected]=\"pane.isActive\" role=\"tab\" (click)=\"pane.select($event); pane.tabpaneHeaderClick($event, i);\" (keydown)=\"onkeydown($event)\">\n                <i [ngClass]=\"['app-icon', pane.paneicon]\" *ngIf=\"pane.paneicon\"></i>\n                <span [textContent]=\"pane.title\"></span>\n                <span *ngIf=\"pane.badgevalue\" class=\"label label-{{pane.badgetype}}\" [textContent]=\"pane.badgevalue\"></span>\n        </a>\n    </li>\n</ul>\n<div class=\"tab-content\" *ngIf=\"type !== 'dynamic'\" [ngClass]=\"{'tab-stacked': vertical, 'tab-justified': justified}\">\n    <ng-content ngProjectAs=\"div[wmTabPane]\"></ng-content>\n</div>\n<div class=\"tab-content\" *ngIf=\"type === 'dynamic'\" [ngClass]=\"{'tab-stacked': vertical, 'tab-justified': justified}\">\n    <div *ngIf=\"fieldDefs && !fieldDefs.length\">{{nodatamessage}}</div>\n    <ng-content select=\"div[wmRepeatTemplate]\"></ng-content>\n</div>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i1.DynamicComponentRefProvider }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: i1.DynamicComponentRefProvider }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['transition']
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['tabsposition']
-            }] }, { type: i1.StatePersistence }]; }, { panes: [{
+            }] }, { type: i1.StatePersistence }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { panes: [{
             type: ContentChildren,
             args: [TabPaneComponent]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabsComponent, { className: "TabsComponent", filePath: "tabs.component.ts", lineNumber: 51 }); })();
 
 const components = [
     TabPaneComponent,
@@ -756,7 +768,7 @@ class TabsModule {
     static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsModule, [{
         type: NgModule,
         args: [{
                 imports: [