npm - @festo-ui/angular - Versions diffs - 3.0.0 → 3.1.0 - Mend

@festo-ui/angular 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/esm2015/lib/components/tabs/tab-pane/tab-pane.component.js CHANGED Viewed

@@ -1,13 +1,19 @@
 import { Component, Input } from '@angular/core';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export class TabPaneComponent {
     constructor() {
         this.tabPaneId = `tab-panel-content-${++TabPaneComponent.nextId}`;
+        this.changesSubject = new Subject();
+        this.changes$ = this.changesSubject.asObservable();
+    }
+    ngOnChanges() {
+        this.changesSubject.next(true);
     }
 }
 TabPaneComponent.nextId = 0;
 TabPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabPaneComponent.ɵcmp = i0.ɵɵ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, 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.ɵɵ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, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabPaneComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/components/tabs/tab-pane/tab-pane.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-pane.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular/src/lib/components/tabs/tab-pane/tab-pane.component.ts","../../../../../../../../libs/angular/src/lib/components/tabs/tab-pane/tab-pane.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,~~EAAE~~,MAAM,eAAe,CAAC;;~~AAOjD~~,MAAM,OAAO,gBAAgB;IAL7B;~~QAeE~~,cAAS,GAAG,qBAAqB,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC;~~KAC9D~~;;~~AAVQ~~,uBAAM,GAAG,CAAC,CAAC;6GADP,gBAAgB;iGAAhB,gBAAgB,~~gJCP7B~~,mLAGA;~~2FDIa~~,gBAAgB;kBAL5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,WAAW,EAAE,2BAA2B;oBACxC,SAAS,EAAE,CAAC,2BAA2B,CAAC;iBACzC;8BAIU,EAAE;sBAAV,KAAK;gBACG,IAAI;sBAAZ,KAAK;gBACG,IAAI;sBAAZ,KAAK;gBACG,MAAM;sBAAd,KAAK;gBACG,SAAS;sBAAjB,KAAK","sourcesContent":["import { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'fng-tab-pane',\n templateUrl: './tab-pane.component.html',\n styleUrls: ['./tab-pane.component.scss']\n})\nexport class TabPaneComponent {\n static nextId = 0;\n // @deprcated Input() id is not in use anymore but still exists for backwards compatiblity\n @Input() id: string;\n @Input() name: string;\n @Input() icon: string;\n @Input() active: boolean;\n @Input() isVisible: boolean;\n\n tabId: string;\n tabPaneId = `tab-panel-content-${++TabPaneComponent.nextId}`;\n}\n","<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"]}
1	+ {"version":3,"file":"tab-pane.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular/src/lib/components/tabs/tab-pane/tab-pane.component.ts","../../../../../../../../libs/angular/src/lib/components/tabs/tab-pane/tab-pane.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAa,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;;AAO/B,MAAM,OAAO,gBAAgB;IAL7B;QAcE,cAAS,GAAG,qBAAqB,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC;QAErD,mBAAc,GAAG,IAAI,OAAO,EAAW,CAAC;QAChD,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;KAK/C;IAHC,WAAW;QACT,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;;AAfM,uBAAM,GAAG,CAAC,CAAC;6GADP,gBAAgB;iGAAhB,gBAAgB,qKCR7B,mLAGA;2FDKa,gBAAgB;kBAL5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,WAAW,EAAE,2BAA2B;oBACxC,SAAS,EAAE,CAAC,2BAA2B,CAAC;iBACzC;8BAIU,EAAE;sBAAV,KAAK;gBACG,IAAI;sBAAZ,KAAK;gBACG,IAAI;sBAAZ,KAAK;gBACG,MAAM;sBAAd,KAAK;gBACG,SAAS;sBAAjB,KAAK","sourcesContent":["import { Component, Input, OnChanges } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Component({\n selector: 'fng-tab-pane',\n templateUrl: './tab-pane.component.html',\n styleUrls: ['./tab-pane.component.scss']\n})\nexport class TabPaneComponent implements OnChanges {\n static nextId = 0;\n // @deprcated Input() id is not in use anymore but still exists for backwards compatiblity\n @Input() id: string;\n @Input() name: string;\n @Input() icon: string;\n @Input() active: boolean;\n @Input() isVisible: boolean;\n tabId: string;\n tabPaneId = `tab-panel-content-${++TabPaneComponent.nextId}`;\n\n private changesSubject = new Subject<boolean>();\n changes$ = this.changesSubject.asObservable();\n\n ngOnChanges(): void {\n this.changesSubject.next(true);\n }\n}\n","<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"]}

package/esm2015/lib/components/tabs/tabs.component.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, Output, QueryList, Renderer2, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { TabPaneComponent } from './tab-pane/tab-pane.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
@@ -19,6 +21,7 @@ export class TabsComponent {
         this.tabs = [];
         this.useCompactDensity = true;
         this.activeTab = null;
+        this.complete = new Subject();
         this.injectedWindow = this.document.defaultView;
     }
     ngAfterContentInit() {
@@ -58,6 +61,11 @@ export class TabsComponent {
         if (this.elemScrollArea != null) {
             this.resizeObserver.observe(this.elemScrollArea);
         }
+        this.handleTabPaneChanges();
+    }
+    ngOnDestroy() {
+        this.complete.next(true);
+        this.complete.unsubscribe();
     }
     showTabPane(id) {
         var _a;
@@ -107,6 +115,7 @@ export class TabsComponent {
         this.scrollIntoView(index, currentTab);
     }
     initTabs() {
+        this.tabs = [];
         this.panes.map((pane, i) => {
             pane.tabId = this.componentId + '-tab-' + i;
             const tab = {
@@ -118,6 +127,7 @@ export class TabsComponent {
             this.tabs.push(tab);
         });
         this.initActiveTab();
+        this.cd.detectChanges();
     }
     initActiveTab() {
         const activeTab = this.tabs.find((tab) => !!tab.active);
@@ -129,6 +139,15 @@ export class TabsComponent {
             this.activeTab = activeTab;
         }
     }
+    handleTabPaneChanges() {
+        // first subscribe to any changes in tab pane, so that the tabs in this view wiil be updated
+        this.panes.forEach(pane => {
+            pane.changes$.pipe(takeUntil(this.complete)).subscribe(() => {
+                // on changes in a tab pane, we init the tabs again
+                this.initTabs();
+            });
+        });
+    }
     scrollTo(scrollX) {
         const currentScrollX = this.getScrollPosition();
         const safeScrollX = this.clampScrollValue(scrollX);

package/esm2015/lib/components/tabs/tabs.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular/src/lib/components/tabs/tabs.component.ts","../../../../../../../libs/angular/src/lib/components/tabs/tabs.component.html"],"names":[],"mappings":"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","sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Inject,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChild\n} from '@angular/core';\n\nimport { TabPaneComponent } from './tab-pane/tab-pane.component';\n\nexport interface Tab {\n name: string;\n paneId: string;\n active?: boolean;\n icon?: string;\n}\n\n// fill: use the remaining space and add in same proportion to every tab item\n// equal: make all tab items same width (as the one with largest content)\nexport type TabItemAppearance = 'fill' \| 'equal' \| 'default';\n\n// legacy: recommended for desktop only applications\n// responsive: desktop, tablet, mobile with scrollable tabs\nexport type TabViewType = 'legacy' \| 'responsive';\n\n// configuration options for legacy tab view type\nexport interface TabsConfiguration {\n tabBar?: {\n fullWidth?: boolean;\n };\n tabItems?: {\n appearance: TabItemAppearance;\n };\n}\n\n// provides details about the left and right edges of the tab element and the tab content element\n// these values are used to determine the visual position of the tab with respect of its parent container\nexport interface TabDimensions {\n rootLeft: number;\n rootRight: number;\n contentLeft: number;\n contentRight: number;\n}\n\nexport interface TabScrollAnimation {\n finalScrollPosition: number;\n scrollDelta: number;\n}\n\nexport interface TabScrollHorizontalEdges {\n left: number;\n right: number;\n}\n\n@Component({\n selector: 'fng-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TabsComponent implements AfterContentInit, AfterViewInit {\n static nextId = 0;\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('fngTabsViewType') viewType: TabViewType = 'responsive';\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('fngTabsUseBottomDivider') showDivider: boolean = false;\n\n @Input() config: TabsConfiguration = null;\n @Output() fngTabChange = new EventEmitter<{ previous: string; current: string }>();\n\n @ContentChildren(TabPaneComponent) panes: QueryList<TabPaneComponent>;\n @ViewChild('scroller') scroller: ElementRef;\n @ViewChild('scrollAera') scrollAera: ElementRef;\n @ViewChild('scrollContent') scrollContent: ElementRef;\n\n componentId = `tabs-${++TabsComponent.nextId}`;\n tabs: Tab[] = [];\n useCompactDensity: boolean = true;\n private activeTab: Tab = null;\n private elemScroller: HTMLElement;\n private elemScrollArea: HTMLElement;\n private elemScrollContent: HTMLElement;\n private readonly injectedWindow: Window;\n private resizeObserver: ResizeObserver;\n\n constructor(\n private elRef: ElementRef,\n @Inject(DOCUMENT) private document: Document,\n private renderer: Renderer2,\n private cd: ChangeDetectorRef\n ) {\n this.injectedWindow = this.document.defaultView;\n }\n\n ngAfterContentInit() {\n this.initTabs();\n if (null === this.activeTab) {\n this.panes.map((pane, i) => {\n if (0 === i) {\n pane.isVisible = true;\n }\n });\n } else {\n this.panes.find(pane => null != this.activeTab.paneId && pane.tabPaneId === this.activeTab.paneId).isVisible = true;\n }\n }\n\n ngAfterViewInit(): void {\n this.elemScroller = this.scroller?.nativeElement;\n this.elemScrollArea = this.scrollAera?.nativeElement;\n this.elemScrollContent = this.scrollContent?.nativeElement;\n const initialWidth = this.elemScrollArea?.offsetWidth;\n if (initialWidth > 768) {\n this.useCompactDensity = false;\n this.cd.detectChanges();\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n const width = this.elemScrollArea.offsetWidth;\n if (width > 768 && this.useCompactDensity === true) {\n this.useCompactDensity = false;\n this.cd.detectChanges();\n } else if (width <= 768 && this.useCompactDensity === false) {\n this.useCompactDensity = true;\n this.cd.detectChanges();\n }\n });\n\n if (this.elemScrollArea != null) {\n this.resizeObserver.observe(this.elemScrollArea);\n }\n }\n\n showTabPane(id: string) {\n const pane = this.panes.find(p => p.tabPaneId === id);\n if (null != pane) {\n this.panes.map(p => {\n p.isVisible = false;\n });\n pane.isVisible = true;\n\n this.tabs.map(tab => {\n if (tab.paneId !== pane.tabPaneId) {\n tab.active = false;\n } else {\n tab.active = true;\n }\n });\n this.fngTabChange.emit({\n previous: this.activeTab?.paneId,\n current: id\n });\n this.activeTab = this.tabs.find(tab => !!tab.active);\n }\n }\n\n handleTabScroll(event: any, index: number) {\n const scrollContentWidth = this.elemScrollContent.offsetWidth;\n const scrollAreaWidth = this.elemScrollArea.offsetWidth;\n\n // check if no scroll is needed\n if (scrollAreaWidth > scrollContentWidth) {\n return;\n }\n\n // check index\n if (!this.indexIsInRange(index)) {\n return;\n }\n\n // always scroll to 0 if scrolling to the first tab\n if (index === 0) {\n this.scrollTo(0);\n return;\n }\n\n // always scroll to the max value if scrolling to the last tab\n if (index === this.tabs.length - 1) {\n this.scrollTo(this.elemScrollContent.offsetWidth);\n return;\n }\n\n const currentTab: HTMLElement = event.target;\n this.scrollIntoView(index, currentTab);\n }\n\n private initTabs() {\n this.panes.map((pane, i) => {\n pane.tabId = this.componentId + '-tab-' + i;\n\n const tab: Tab = {\n name: null != pane.name ? pane.name : '',\n paneId: null != pane.tabPaneId ? pane.tabPaneId : null,\n icon: null != pane.icon ? pane.icon : null,\n active: null != pane.active ? pane.active : false\n };\n this.tabs.push(tab);\n });\n\n this.initActiveTab();\n }\n\n private initActiveTab() {\n const activeTab: Tab = this.tabs.find((tab: Tab) => !!tab.active);\n if (!activeTab && 0 < this.tabs.length) {\n this.tabs[0] = { ...this.tabs[0], active: true };\n this.activeTab = this.tabs[0];\n } else {\n this.activeTab = activeTab;\n }\n }\n\n private scrollTo(scrollX: number) {\n const currentScrollX = this.getScrollPosition();\n const safeScrollX = this.clampScrollValue(scrollX);\n const scrollDelta = safeScrollX - currentScrollX;\n this.animate({\n finalScrollPosition: safeScrollX,\n scrollDelta\n });\n }\n\n private scrollIntoView(index: number, tab: HTMLElement) {\n const scrollPosition = this.getScrollPosition();\n const barWidth = this.elemScrollArea.offsetWidth;\n const tabDimensions = this.computeDimensions(tab);\n const nextIndex = this.findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);\n\n if (!this.indexIsInRange(nextIndex)) {\n return;\n }\n\n const scrollIncrement = this.calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);\n this.incrementScroll(scrollIncrement);\n }\n\n private incrementScroll(scrollXIncrement: number) {\n // no scroll needed\n if (scrollXIncrement === 0) {\n return;\n }\n const scrollOperation = this.getIncrementScrollOperation(scrollXIncrement);\n this.animate(scrollOperation);\n }\n\n private animate(animation: TabScrollAnimation) {\n // no animation needed\n if (animation.scrollDelta === 0) {\n return;\n }\n\n this.stopScrollAnimation();\n\n // this animation uses the flip approach\n // https://aerotwist.com/blog/flip-your-animations/\n // https://css-tricks.com/animating-layouts-with-the-flip-technique/\n this.elemScrollArea.scrollLeft = animation.finalScrollPosition;\n this.setScrollContentStyleProperty('transform', `translateX(${animation.scrollDelta}px)`);\n // force repaint\n this.elemScrollArea.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n this.renderer.addClass(this.elemScroller, 'fng-tab-scroller--animating');\n this.setScrollContentStyleProperty('transform', 'none');\n });\n }\n\n private stopScrollAnimation() {\n const currentScrollPosition = this.getAnimatingScrollPosition();\n this.renderer.removeClass(this.elemScroller, 'fng-tab-scroller--animating');\n this.setScrollContentStyleProperty('transform', 'translateX(0px)');\n this.elemScrollArea.scrollLeft = currentScrollPosition;\n }\n\n private getAnimatingScrollPosition(): number {\n const currentTranslateX = this.calculateCurrentTranslateX();\n const scrollLeft = this.elemScrollArea.scrollLeft;\n return scrollLeft - currentTranslateX;\n }\n\n private getIncrementScrollOperation(scrollX: number): TabScrollAnimation {\n const currentScrollX = this.getScrollPosition();\n const targetScrollX = scrollX + currentScrollX;\n const safeScrollX = this.clampScrollValue(targetScrollX);\n const scrollDelta = safeScrollX - currentScrollX;\n return {\n finalScrollPosition: safeScrollX,\n scrollDelta\n };\n }\n\n private clampScrollValue(scrollX: number): number {\n const edges = this.calculateScrollEdges();\n return Math.min(Math.max(edges.left, scrollX), edges.right);\n }\n\n private calculateScrollEdges(): TabScrollHorizontalEdges {\n const scrollContentWidth = this.elemScrollContent.offsetWidth;\n const scrollAreaWidth = this.elemScrollArea.offsetWidth;\n return {\n left: 0,\n right: scrollContentWidth - scrollAreaWidth\n };\n }\n\n private computeDimensions(tab: HTMLElement): TabDimensions {\n const rootWidth = tab.offsetWidth;\n const rootLeft = tab.offsetLeft;\n\n const tabContent: HTMLElement = tab.querySelector<HTMLElement>('.fng-tab-content');\n const contentWidth = tabContent.offsetWidth;\n const contentLeft = tabContent.offsetLeft;\n\n return {\n contentLeft: rootLeft + contentLeft,\n contentRight: rootLeft + contentLeft + contentWidth,\n rootLeft,\n rootRight: rootLeft + rootWidth\n };\n }\n\n private calculateScrollIncrement(index: number, nextIndex: number, scrollPosition: number, barWidth: number): number {\n const nextTab: HTMLElement = (this.elRef.nativeElement as HTMLElement).querySelector<HTMLElement>(\n `#${this.componentId}-tab-${nextIndex}`\n );\n const nextTabDimensions = this.computeDimensions(nextTab);\n const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;\n const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;\n const leftIncrement = relativeContentRight - 48;\n const rightIncrement = relativeContentLeft + 48;\n\n if (nextIndex < index) {\n return Math.min(leftIncrement, 0);\n }\n\n return Math.max(rightIncrement, 0);\n }\n\n private indexIsInRange(index: number) {\n return index >= 0 && index < this.tabs.length;\n }\n\n private getScrollPosition(): number {\n const currentTranslateX = this.calculateCurrentTranslateX();\n const scrollLeft = this.elemScrollArea.scrollLeft;\n\n return scrollLeft - currentTranslateX;\n }\n\n private calculateCurrentTranslateX(): number {\n const transformValue = this.getScrollContentStyleValue('transform');\n if (transformValue === 'none') {\n return 0;\n }\n\n // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'\n // get all the parenthesized values\n const match = /\$(.+?)\$/.exec(transformValue);\n if (!match) {\n return 0;\n }\n\n const matrixParams = match[1];\n // we need value of tx -> translateX\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [a, b, c, d, tx, ty] = matrixParams.split(',');\n return parseFloat(tx);\n }\n\n private getScrollContentStyleValue(propName: string) {\n return this.injectedWindow.getComputedStyle(this.elemScrollContent).getPropertyValue(propName);\n }\n\n private setScrollContentStyleProperty(propName: string, value: any) {\n this.renderer.setStyle(this.elemScrollContent, propName, value);\n }\n\n private findAdjacentTabIndexClosestToEdge(index: number, tabDimensions: TabDimensions, scrollPosition: number, barWidth: number): number {\n /*\n tabs are laid out in the tab scroller like this:\n \n scroll position\n * +---+\n * \| \| bar width\n * \| +-----------------------------------+\n * \| \| \|\n * \| v v\n * \| +-----------------------------------+\n * v \| tab scroller \|\n * +------------+--------------+-------------------+\n * \| tab \| tab \| tab \|\n * +------------+--------------+-------------------+\n * \| \|\n * +-----------------------------------+\n \n to determine the next adjacent index, we look at the tab root left and\n * tab root right, both relative to the scroll position. if the tab root\n * left is less than 0, then we know it's out of view to the left. if the\n * tab root right minus the bar width is greater than 0, we know the tab is\n * out of view to the right. from there, we either increment or decrement\n * the index.\n /\n const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;\n const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;\n const relativeRootDelta = relativeRootLeft + relativeRootRight;\n const leftEdgeIsCloser = relativeRootLeft < 0 \|\| relativeRootDelta < 0;\n const rightEdgeIsCloser = relativeRootRight > 0 \|\| relativeRootDelta > 0;\n\n if (leftEdgeIsCloser) {\n return index - 1;\n }\n\n if (rightEdgeIsCloser) {\n return index + 1;\n }\n\n return -1;\n }\n}\n","<ng-container ngIf=\"viewType === 'legacy'\">\n <div class=\"fwe-legacy-tabs\">\n <ul\n role=\"tablist\"\n class=\"fwe-legacy-tab-bar\"\n [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\n [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\n [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\n >\n <li ngFor=\"let tab of tabs; let i = index\" class=\"fwe-legacy-tab-item\" [class.fwe-active]=\"tab?.active\">\n <ng-container ngIf=\"null == tab?.icon\">\n <a\n [id]=\"componentId + '-tab-' + i\"\n [attr.aria-controls]=\"tab.paneId\"\n [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n role=\"tab\"\n class=\"fwe-legacy-tab-link\"\n (click)=\"showTabPane(tab.paneId)\"\n >{{ tab.name }}</a\n >\n </ng-container>\n <ng-container ngIf=\"null != tab?.icon\">\n <a\n [id]=\"componentId + '-tab-' + i\"\n [attr.aria-controls]=\"tab.paneId\"\n [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n role=\"tab\"\n class=\"fwe-legacy-tab-link\"\n (click)=\"showTabPane(tab.paneId)\"\n [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\n >\n <i [class]=\"'fwe-icon ' + tab.icon\"></i>\n <span>{{ tab.name }}</span>\n </a>\n </ng-container>\n </li>\n </ul>\n <div class=\"fwe-legacy-tab-panel-content\">\n <ng-container ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n </div>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"viewType !== 'legacy'\">\n <div class=\"fng-tab-bar\" role=\"tablist\">\n <div class=\"fng-tab-scroller\" #scroller>\n <div\n class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\n [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\n #scrollAera\n >\n <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\n <button\n ngFor=\"let tab of tabs; let i = index\"\n role=\"tab\"\n class=\"fng-tab\"\n [id]=\"componentId + '-tab-' + i\"\n [attr.aria-controls]=\"tab.paneId\"\n [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n [tabindex]=\"i === 0 ? 0 : -1\"\n [class.fng-tab--active]=\"tab?.active\"\n (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\n >\n <span class=\"fng-tab-content\">\n <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\n </span>\n <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\n <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\n </span>\n </button>\n <div class=\"fng-tab-scroller-divider-line\"></div>\n </div>\n </div>\n </div>\n <div class=\"fng-tab-panel-content\">\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n </div>\n </div>\n</ng-container>\n\n<ng-template #tabPanelContent>\n <ng-content></ng-content>\n</ng-template>\n"]}
1	+ {"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular/src/lib/components/tabs/tabs.component.ts","../../../../../../../libs/angular/src/lib/components/tabs/tabs.component.html"],"names":[],"mappings":"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","sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Inject,\n Input,\n OnDestroy,\n Output,\n QueryList,\n Renderer2,\n ViewChild\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { TabPaneComponent } from './tab-pane/tab-pane.component';\n\nexport interface Tab {\n name: string;\n paneId: string;\n active?: boolean;\n icon?: string;\n}\n\n// fill: use the remaining space and add in same proportion to every tab item\n// equal: make all tab items same width (as the one with largest content)\nexport type TabItemAppearance = 'fill' \| 'equal' \| 'default';\n\n// legacy: recommended for desktop only applications\n// responsive: desktop, tablet, mobile with scrollable tabs\nexport type TabViewType = 'legacy' \| 'responsive';\n\n// configuration options for legacy tab view type\nexport interface TabsConfiguration {\n tabBar?: {\n fullWidth?: boolean;\n };\n tabItems?: {\n appearance: TabItemAppearance;\n };\n}\n\n// provides details about the left and right edges of the tab element and the tab content element\n// these values are used to determine the visual position of the tab with respect of its parent container\nexport interface TabDimensions {\n rootLeft: number;\n rootRight: number;\n contentLeft: number;\n contentRight: number;\n}\n\nexport interface TabScrollAnimation {\n finalScrollPosition: number;\n scrollDelta: number;\n}\n\nexport interface TabScrollHorizontalEdges {\n left: number;\n right: number;\n}\n\n@Component({\n selector: 'fng-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TabsComponent implements AfterContentInit, AfterViewInit, OnDestroy {\n static nextId = 0;\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('fngTabsViewType') viewType: TabViewType = 'responsive';\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('fngTabsUseBottomDivider') showDivider: boolean = false;\n\n @Input() config: TabsConfiguration = null;\n @Output() fngTabChange = new EventEmitter<{ previous: string; current: string }>();\n\n @ContentChildren(TabPaneComponent) panes: QueryList<TabPaneComponent>;\n @ViewChild('scroller') scroller: ElementRef;\n @ViewChild('scrollAera') scrollAera: ElementRef;\n @ViewChild('scrollContent') scrollContent: ElementRef;\n\n componentId = `tabs-${++TabsComponent.nextId}`;\n tabs: Tab[] = [];\n useCompactDensity: boolean = true;\n private activeTab: Tab = null;\n private elemScroller: HTMLElement;\n private elemScrollArea: HTMLElement;\n private elemScrollContent: HTMLElement;\n private readonly injectedWindow: Window;\n private resizeObserver: ResizeObserver;\n private complete: Subject<boolean> = new Subject();\n\n constructor(\n private elRef: ElementRef,\n @Inject(DOCUMENT) private document: Document,\n private renderer: Renderer2,\n private cd: ChangeDetectorRef\n ) {\n this.injectedWindow = this.document.defaultView;\n }\n\n ngAfterContentInit() {\n this.initTabs();\n if (null === this.activeTab) {\n this.panes.map((pane, i) => {\n if (0 === i) {\n pane.isVisible = true;\n }\n });\n } else {\n this.panes.find(pane => null != this.activeTab.paneId && pane.tabPaneId === this.activeTab.paneId).isVisible = true;\n }\n }\n\n ngAfterViewInit(): void {\n this.elemScroller = this.scroller?.nativeElement;\n this.elemScrollArea = this.scrollAera?.nativeElement;\n this.elemScrollContent = this.scrollContent?.nativeElement;\n const initialWidth = this.elemScrollArea?.offsetWidth;\n if (initialWidth > 768) {\n this.useCompactDensity = false;\n this.cd.detectChanges();\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n const width = this.elemScrollArea.offsetWidth;\n if (width > 768 && this.useCompactDensity === true) {\n this.useCompactDensity = false;\n this.cd.detectChanges();\n } else if (width <= 768 && this.useCompactDensity === false) {\n this.useCompactDensity = true;\n this.cd.detectChanges();\n }\n });\n\n if (this.elemScrollArea != null) {\n this.resizeObserver.observe(this.elemScrollArea);\n }\n\n this.handleTabPaneChanges();\n }\n\n ngOnDestroy(): void {\n this.complete.next(true);\n this.complete.unsubscribe();\n }\n\n showTabPane(id: string) {\n const pane = this.panes.find(p => p.tabPaneId === id);\n if (null != pane) {\n this.panes.map(p => {\n p.isVisible = false;\n });\n pane.isVisible = true;\n\n this.tabs.map(tab => {\n if (tab.paneId !== pane.tabPaneId) {\n tab.active = false;\n } else {\n tab.active = true;\n }\n });\n this.fngTabChange.emit({\n previous: this.activeTab?.paneId,\n current: id\n });\n this.activeTab = this.tabs.find(tab => !!tab.active);\n }\n }\n\n handleTabScroll(event: any, index: number) {\n const scrollContentWidth = this.elemScrollContent.offsetWidth;\n const scrollAreaWidth = this.elemScrollArea.offsetWidth;\n\n // check if no scroll is needed\n if (scrollAreaWidth > scrollContentWidth) {\n return;\n }\n\n // check index\n if (!this.indexIsInRange(index)) {\n return;\n }\n\n // always scroll to 0 if scrolling to the first tab\n if (index === 0) {\n this.scrollTo(0);\n return;\n }\n\n // always scroll to the max value if scrolling to the last tab\n if (index === this.tabs.length - 1) {\n this.scrollTo(this.elemScrollContent.offsetWidth);\n return;\n }\n\n const currentTab: HTMLElement = event.target;\n this.scrollIntoView(index, currentTab);\n }\n\n private initTabs() {\n this.tabs = [];\n this.panes.map((pane, i) => {\n pane.tabId = this.componentId + '-tab-' + i;\n const tab: Tab = {\n name: null != pane.name ? pane.name : '',\n paneId: null != pane.tabPaneId ? pane.tabPaneId : null,\n icon: null != pane.icon ? pane.icon : null,\n active: null != pane.active ? pane.active : false\n };\n this.tabs.push(tab);\n });\n\n this.initActiveTab();\n this.cd.detectChanges();\n }\n\n private initActiveTab() {\n const activeTab: Tab = this.tabs.find((tab: Tab) => !!tab.active);\n if (!activeTab && 0 < this.tabs.length) {\n this.tabs[0] = { ...this.tabs[0], active: true };\n this.activeTab = this.tabs[0];\n } else {\n this.activeTab = activeTab;\n }\n }\n\n private handleTabPaneChanges() {\n // first subscribe to any changes in tab pane, so that the tabs in this view wiil be updated\n this.panes.forEach(pane => {\n pane.changes$.pipe(takeUntil(this.complete)).subscribe(() => {\n // on changes in a tab pane, we init the tabs again\n this.initTabs();\n });\n });\n }\n\n private scrollTo(scrollX: number) {\n const currentScrollX = this.getScrollPosition();\n const safeScrollX = this.clampScrollValue(scrollX);\n const scrollDelta = safeScrollX - currentScrollX;\n this.animate({\n finalScrollPosition: safeScrollX,\n scrollDelta\n });\n }\n\n private scrollIntoView(index: number, tab: HTMLElement) {\n const scrollPosition = this.getScrollPosition();\n const barWidth = this.elemScrollArea.offsetWidth;\n const tabDimensions = this.computeDimensions(tab);\n const nextIndex = this.findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);\n\n if (!this.indexIsInRange(nextIndex)) {\n return;\n }\n\n const scrollIncrement = this.calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);\n this.incrementScroll(scrollIncrement);\n }\n\n private incrementScroll(scrollXIncrement: number) {\n // no scroll needed\n if (scrollXIncrement === 0) {\n return;\n }\n const scrollOperation = this.getIncrementScrollOperation(scrollXIncrement);\n this.animate(scrollOperation);\n }\n\n private animate(animation: TabScrollAnimation) {\n // no animation needed\n if (animation.scrollDelta === 0) {\n return;\n }\n\n this.stopScrollAnimation();\n\n // this animation uses the flip approach\n // https://aerotwist.com/blog/flip-your-animations/\n // https://css-tricks.com/animating-layouts-with-the-flip-technique/\n this.elemScrollArea.scrollLeft = animation.finalScrollPosition;\n this.setScrollContentStyleProperty('transform', `translateX(${animation.scrollDelta}px)`);\n // force repaint\n this.elemScrollArea.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n this.renderer.addClass(this.elemScroller, 'fng-tab-scroller--animating');\n this.setScrollContentStyleProperty('transform', 'none');\n });\n }\n\n private stopScrollAnimation() {\n const currentScrollPosition = this.getAnimatingScrollPosition();\n this.renderer.removeClass(this.elemScroller, 'fng-tab-scroller--animating');\n this.setScrollContentStyleProperty('transform', 'translateX(0px)');\n this.elemScrollArea.scrollLeft = currentScrollPosition;\n }\n\n private getAnimatingScrollPosition(): number {\n const currentTranslateX = this.calculateCurrentTranslateX();\n const scrollLeft = this.elemScrollArea.scrollLeft;\n return scrollLeft - currentTranslateX;\n }\n\n private getIncrementScrollOperation(scrollX: number): TabScrollAnimation {\n const currentScrollX = this.getScrollPosition();\n const targetScrollX = scrollX + currentScrollX;\n const safeScrollX = this.clampScrollValue(targetScrollX);\n const scrollDelta = safeScrollX - currentScrollX;\n return {\n finalScrollPosition: safeScrollX,\n scrollDelta\n };\n }\n\n private clampScrollValue(scrollX: number): number {\n const edges = this.calculateScrollEdges();\n return Math.min(Math.max(edges.left, scrollX), edges.right);\n }\n\n private calculateScrollEdges(): TabScrollHorizontalEdges {\n const scrollContentWidth = this.elemScrollContent.offsetWidth;\n const scrollAreaWidth = this.elemScrollArea.offsetWidth;\n return {\n left: 0,\n right: scrollContentWidth - scrollAreaWidth\n };\n }\n\n private computeDimensions(tab: HTMLElement): TabDimensions {\n const rootWidth = tab.offsetWidth;\n const rootLeft = tab.offsetLeft;\n\n const tabContent: HTMLElement = tab.querySelector<HTMLElement>('.fng-tab-content');\n const contentWidth = tabContent.offsetWidth;\n const contentLeft = tabContent.offsetLeft;\n\n return {\n contentLeft: rootLeft + contentLeft,\n contentRight: rootLeft + contentLeft + contentWidth,\n rootLeft,\n rootRight: rootLeft + rootWidth\n };\n }\n\n private calculateScrollIncrement(index: number, nextIndex: number, scrollPosition: number, barWidth: number): number {\n const nextTab: HTMLElement = (this.elRef.nativeElement as HTMLElement).querySelector<HTMLElement>(\n `#${this.componentId}-tab-${nextIndex}`\n );\n const nextTabDimensions = this.computeDimensions(nextTab);\n const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;\n const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;\n const leftIncrement = relativeContentRight - 48;\n const rightIncrement = relativeContentLeft + 48;\n\n if (nextIndex < index) {\n return Math.min(leftIncrement, 0);\n }\n\n return Math.max(rightIncrement, 0);\n }\n\n private indexIsInRange(index: number) {\n return index >= 0 && index < this.tabs.length;\n }\n\n private getScrollPosition(): number {\n const currentTranslateX = this.calculateCurrentTranslateX();\n const scrollLeft = this.elemScrollArea.scrollLeft;\n\n return scrollLeft - currentTranslateX;\n }\n\n private calculateCurrentTranslateX(): number {\n const transformValue = this.getScrollContentStyleValue('transform');\n if (transformValue === 'none') {\n return 0;\n }\n\n // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'\n // get all the parenthesized values\n const match = /\$(.+?)\$/.exec(transformValue);\n if (!match) {\n return 0;\n }\n\n const matrixParams = match[1];\n // we need value of tx -> translateX\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [a, b, c, d, tx, ty] = matrixParams.split(',');\n return parseFloat(tx);\n }\n\n private getScrollContentStyleValue(propName: string) {\n return this.injectedWindow.getComputedStyle(this.elemScrollContent).getPropertyValue(propName);\n }\n\n private setScrollContentStyleProperty(propName: string, value: any) {\n this.renderer.setStyle(this.elemScrollContent, propName, value);\n }\n\n private findAdjacentTabIndexClosestToEdge(index: number, tabDimensions: TabDimensions, scrollPosition: number, barWidth: number): number {\n /*\n tabs are laid out in the tab scroller like this:\n \n scroll position\n * +---+\n * \| \| bar width\n * \| +-----------------------------------+\n * \| \| \|\n * \| v v\n * \| +-----------------------------------+\n * v \| tab scroller \|\n * +------------+--------------+-------------------+\n * \| tab \| tab \| tab \|\n * +------------+--------------+-------------------+\n * \| \|\n * +-----------------------------------+\n \n to determine the next adjacent index, we look at the tab root left and\n * tab root right, both relative to the scroll position. if the tab root\n * left is less than 0, then we know it's out of view to the left. if the\n * tab root right minus the bar width is greater than 0, we know the tab is\n * out of view to the right. from there, we either increment or decrement\n * the index.\n /\n const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;\n const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;\n const relativeRootDelta = relativeRootLeft + relativeRootRight;\n const leftEdgeIsCloser = relativeRootLeft < 0 \|\| relativeRootDelta < 0;\n const rightEdgeIsCloser = relativeRootRight > 0 \|\| relativeRootDelta > 0;\n\n if (leftEdgeIsCloser) {\n return index - 1;\n }\n\n if (rightEdgeIsCloser) {\n return index + 1;\n }\n\n return -1;\n }\n}\n","<ng-container ngIf=\"viewType === 'legacy'\">\n <div class=\"fwe-legacy-tabs\">\n <ul\n role=\"tablist\"\n class=\"fwe-legacy-tab-bar\"\n [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\n [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\n [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\n >\n <li ngFor=\"let tab of tabs; let i = index\" class=\"fwe-legacy-tab-item\" [class.fwe-active]=\"tab?.active\">\n <ng-container ngIf=\"null == tab?.icon\">\n <a\n [id]=\"componentId + '-tab-' + i\"\n [attr.aria-controls]=\"tab.paneId\"\n [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n role=\"tab\"\n class=\"fwe-legacy-tab-link\"\n (click)=\"showTabPane(tab.paneId)\"\n >{{ tab.name }}</a\n >\n </ng-container>\n <ng-container ngIf=\"null != tab?.icon\">\n <a\n [id]=\"componentId + '-tab-' + i\"\n [attr.aria-controls]=\"tab.paneId\"\n [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n role=\"tab\"\n class=\"fwe-legacy-tab-link\"\n (click)=\"showTabPane(tab.paneId)\"\n [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\n >\n <i [class]=\"'fwe-icon ' + tab.icon\"></i>\n <span>{{ tab.name }}</span>\n </a>\n </ng-container>\n </li>\n </ul>\n <div class=\"fwe-legacy-tab-panel-content\">\n <ng-container ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n </div>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"viewType !== 'legacy'\">\n <div class=\"fng-tab-bar\" role=\"tablist\">\n <div class=\"fng-tab-scroller\" #scroller>\n <div\n class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\n [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\n #scrollAera\n >\n <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\n <button\n ngFor=\"let tab of tabs; let i = index\"\n role=\"tab\"\n class=\"fng-tab\"\n [id]=\"componentId + '-tab-' + i\"\n [attr.aria-controls]=\"tab.paneId\"\n [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n [tabindex]=\"i === 0 ? 0 : -1\"\n [class.fng-tab--active]=\"tab?.active\"\n (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\n >\n <span class=\"fng-tab-content\">\n <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\n </span>\n <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\n <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\n </span>\n </button>\n <div class=\"fng-tab-scroller-divider-line\"></div>\n </div>\n </div>\n </div>\n <div class=\"fng-tab-panel-content\">\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n </div>\n </div>\n</ng-container>\n\n<ng-template #tabPanelContent>\n <ng-content></ng-content>\n</ng-template>\n"]}

package/fesm2015/festo-ui-angular.js CHANGED Viewed

@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule, ConnectionPositionPair } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
-import { take, debounceTime, takeUntil, filter } from 'rxjs/operators';
+import { take, takeUntil, debounceTime, filter } from 'rxjs/operators';
 import SimpleBar from 'simplebar';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -890,11 +890,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
 class TabPaneComponent {
     constructor() {
         this.tabPaneId = `tab-panel-content-${++TabPaneComponent.nextId}`;
+        this.changesSubject = new Subject();
+        this.changes$ = this.changesSubject.asObservable();
+    }
+    ngOnChanges() {
+        this.changesSubject.next(true);
     }
 }
 TabPaneComponent.nextId = 0;
 TabPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabPaneComponent.ɵcmp = i0.ɵɵ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, 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.ɵɵ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, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabPaneComponent, decorators: [{
             type: Component,
             args: [{
@@ -930,6 +935,7 @@ class TabsComponent {
         this.tabs = [];
         this.useCompactDensity = true;
         this.activeTab = null;
+        this.complete = new Subject();
         this.injectedWindow = this.document.defaultView;
     }
     ngAfterContentInit() {
@@ -969,6 +975,11 @@ class TabsComponent {
         if (this.elemScrollArea != null) {
             this.resizeObserver.observe(this.elemScrollArea);
         }
+        this.handleTabPaneChanges();
+    }
+    ngOnDestroy() {
+        this.complete.next(true);
+        this.complete.unsubscribe();
     }
     showTabPane(id) {
         var _a;
@@ -1018,6 +1029,7 @@ class TabsComponent {
         this.scrollIntoView(index, currentTab);
     }
     initTabs() {
+        this.tabs = [];
         this.panes.map((pane, i) => {
             pane.tabId = this.componentId + '-tab-' + i;
             const tab = {
@@ -1029,6 +1041,7 @@ class TabsComponent {
             this.tabs.push(tab);
         });
         this.initActiveTab();
+        this.cd.detectChanges();
     }
     initActiveTab() {
         const activeTab = this.tabs.find((tab) => !!tab.active);
@@ -1040,6 +1053,15 @@ class TabsComponent {
             this.activeTab = activeTab;
         }
     }
+    handleTabPaneChanges() {
+        // first subscribe to any changes in tab pane, so that the tabs in this view wiil be updated
+        this.panes.forEach(pane => {
+            pane.changes$.pipe(takeUntil(this.complete)).subscribe(() => {
+                // on changes in a tab pane, we init the tabs again
+                this.initTabs();
+            });
+        });
+    }
     scrollTo(scrollX) {
         const currentScrollX = this.getScrollPosition();
         const safeScrollX = this.clampScrollValue(scrollX);