@festo-ui/angular 3.0.0-pre-20220105.2 → 3.1.0

package/bundles/festo-ui-angular.umd.js

@@ -1259,12 +1259,17 @@
     var TabPaneComponent = /** @class */ (function () {
         function TabPaneComponent() {
             this.tabPaneId = "tab-panel-content-" + ++TabPaneComponent.nextId;
+            this.changesSubject = new rxjs.Subject();
+            this.changes$ = this.changesSubject.asObservable();
         }
+        TabPaneComponent.prototype.ngOnChanges = function () {
+            this.changesSubject.next(true);
+        };
         return TabPaneComponent;
     }());
     TabPaneComponent.nextId = 0;
     TabPaneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TabPaneComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabPaneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible" }, ngImport: i0__namespace, template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] });
+    TabPaneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: TabPaneComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1300,6 +1305,7 @@
             this.tabs = [];
             this.useCompactDensity = true;
             this.activeTab = null;
+            this.complete = new rxjs.Subject();
             this.injectedWindow = this.document.defaultView;
         }
         TabsComponent.prototype.ngAfterContentInit = function () {
@@ -1341,6 +1347,11 @@
             if (this.elemScrollArea != null) {
                 this.resizeObserver.observe(this.elemScrollArea);
             }
+            this.handleTabPaneChanges();
+        };
+        TabsComponent.prototype.ngOnDestroy = function () {
+            this.complete.next(true);
+            this.complete.unsubscribe();
         };
         TabsComponent.prototype.showTabPane = function (id) {
             var _a;
@@ -1391,6 +1402,7 @@
         };
         TabsComponent.prototype.initTabs = function () {
             var _this = this;
+            this.tabs = [];
             this.panes.map(function (pane, i) {
                 pane.tabId = _this.componentId + '-tab-' + i;
                 var tab = {
@@ -1402,6 +1414,7 @@
                 _this.tabs.push(tab);
             });
             this.initActiveTab();
+            this.cd.detectChanges();
         };
         TabsComponent.prototype.initActiveTab = function () {
             var activeTab = this.tabs.find(function (tab) { return !!tab.active; });
@@ -1413,6 +1426,16 @@
                 this.activeTab = activeTab;
             }
         };
+        TabsComponent.prototype.handleTabPaneChanges = function () {
+            var _this = this;
+            // first subscribe to any changes in tab pane, so that the tabs in this view wiil be updated
+            this.panes.forEach(function (pane) {
+                pane.changes$.pipe(operators.takeUntil(_this.complete)).subscribe(function () {
+                    // on changes in a tab pane, we init the tabs again
+                    _this.initTabs();
+                });
+            });
+        };
         TabsComponent.prototype.scrollTo = function (scrollX) {
             var currentScrollX = this.getScrollPosition();
             var safeScrollX = this.clampScrollValue(scrollX);