@festo-ui/angular 3.1.0 → 3.2.0

package/esm2015/lib/components/stepper/stepper.component.js

@@ -1,28 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-/**
- * A component that shows steps of a process.
- * For example useful in wizard dialogs.
- */
-export class StepperComponent {
-}
-StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: StepperComponent, selector: "fng-stepper", inputs: { steps: "steps", stepIndex: "stepIndex", error: "error" }, ngImport: i0, template: "<div class=\"fng-stepper\" [class.fng-stepper-error]=\"error\">\n  <div *ngFor=\"let step of steps; index as i; first as isFirst\"\n       class=\"fng-step-container\"\n       [class.fng-step-active]=\"i === stepIndex\"\n       [class.fng-step-done]=\"i < stepIndex\"\n       [class.fng-step-first]=\"isFirst\">\n    <div *ngIf=\"!isFirst\" class=\"fng-step-connector\"></div>\n    <div class=\"fng-step\">\n      <div *ngIf=\"i >= stepIndex\">{{i + 1}}</div>\n      <div class=\"fng-step-name fwe-d-none fwe-d-lg-block\">{{step.name}}</div>\n    </div>\n  </div>\n</div>\n", styles: [".fng-stepper{display:flex;width:80%;margin:auto;justify-content:center}.fng-stepper .fng-step-container{display:flex;flex-direction:row;flex:1}.fng-stepper .fng-step-container .fng-step{position:relative;border-radius:50%;border:1px solid #a3b2bc;color:#a3b2bc;width:24px;height:24px;font-size:14px;display:flex;align-items:center;justify-content:center;font-feature-settings:\"tnum\",\"lnum\",lining-nums tabular-nums diagonal-fractions ordinal;font-variant-numeric:lining-nums tabular-nums diagonal-fractions ordinal;transition:border-color .3s,background-color .3s,color .3s}.fng-stepper .fng-step-container .fng-step .fng-step-name{position:absolute;top:30px;left:50%;color:#a3b2bc;transform:translate(-50%);white-space:pre;transition:color .3s}.fng-stepper .fng-step-container .fng-step-connector{border-bottom:1px solid #a3b2bc;flex:1;height:50%;transition:border-color .3s}.fng-stepper .fng-step-container.fng-step-active .fng-step,.fng-stepper .fng-step-container.fng-step-done .fng-step{background:#0091DC;border-color:#0091dc;color:#fff}.fng-stepper .fng-step-container.fng-step-active .fng-step .fng-step-name,.fng-stepper .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#0091dc}.fng-stepper .fng-step-container.fng-step-active .fng-step-connector,.fng-stepper .fng-step-container.fng-step-done .fng-step-connector{border-color:#0091dc}.fng-stepper .fng-step-container.fng-step-done .fng-step:before{content:\"\";position:absolute;border-left:1px solid white;border-bottom:1px solid white;top:6px;left:4px;width:14px;height:7px;transform:rotate(-45deg)}.fng-stepper .fng-step-container.fng-step-first{flex:0;flex-basis:24px}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step{background:#D00019;border-color:#d00019;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step .fng-step-name{color:#d00019}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step-connector{border-color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step{background:#a3b2bc;border-color:#a3b2bc;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step-connector{border-color:#a3b2bc}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: StepperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fng-stepper',
-                    templateUrl: './stepper.component.html',
-                    styleUrls: ['./stepper.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], propDecorators: { steps: [{
-                type: Input
-            }], stepIndex: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=stepper.component.js.map

package/esm2015/lib/components/stepper/stepper.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular/src/lib/components/stepper/stepper.component.ts","../../../../../../../libs/angular/src/lib/components/stepper/stepper.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;;AAY7F;;;GAGG;AAQH,MAAM,OAAO,gBAAgB;;6GAAhB,gBAAgB;iGAAhB,gBAAgB,uHCvB7B,+jBAaA;2FDUa,gBAAgB;kBAP5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,aAAa;oBACvB,WAAW,EAAE,0BAA0B;oBACvC,SAAS,EAAE,CAAC,0BAA0B,CAAC;oBACvC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;8BAKU,KAAK;sBAAb,KAAK;gBAKG,SAAS;sBAAjB,KAAK;gBAKG,KAAK;sBAAb,KAAK","sourcesContent":["import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\n\n/**\n * Contains all properties of a wizard step.\n */\nexport interface WizardStep {\n  /**\n   * The name of the step.\n   */\n  name: string;\n}\n\n/**\n * A component that shows steps of a process.\n * For example useful in wizard dialogs.\n */\n@Component({\n  selector: 'fng-stepper',\n  templateUrl: './stepper.component.html',\n  styleUrls: ['./stepper.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class StepperComponent {\n  /**\n   * The steps.\n   */\n  @Input() steps: WizardStep[];\n\n  /**\n   * The current step index.\n   */\n  @Input() stepIndex: number;\n\n  /**\n   * When true the wizard will change to error mode.\n   */\n  @Input() error: boolean;\n}\n","<div class=\"fng-stepper\" [class.fng-stepper-error]=\"error\">\n  <div *ngFor=\"let step of steps; index as i; first as isFirst\"\n       class=\"fng-step-container\"\n       [class.fng-step-active]=\"i === stepIndex\"\n       [class.fng-step-done]=\"i < stepIndex\"\n       [class.fng-step-first]=\"isFirst\">\n    <div *ngIf=\"!isFirst\" class=\"fng-step-connector\"></div>\n    <div class=\"fng-step\">\n      <div *ngIf=\"i >= stepIndex\">{{i + 1}}</div>\n      <div class=\"fng-step-name fwe-d-none fwe-d-lg-block\">{{step.name}}</div>\n    </div>\n  </div>\n</div>\n"]}

package/esm2015/lib/components/table-header-cell/table-header-cell.directive.js

@@ -1,58 +0,0 @@
-import { Directive, Input, Output, EventEmitter } from '@angular/core';
-import * as i0 from "@angular/core";
-export class TableHeaderCellDirective {
-    constructor() {
-        this.changeOrder = new EventEmitter();
-    }
-    get active() {
-        if (this.order == null) {
-            return false;
-        }
-        if (this.order.orderBy == null || this.fngTh == null) {
-            return false;
-        }
-        return this.order.orderBy === this.fngTh;
-    }
-    get orderDescending() {
-        return this.active && !this.order.ascending;
-    }
-    onChangeOrder() {
-        this.changeOrder.emit(this.fngTh);
-    }
-}
-TableHeaderCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TableHeaderCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TableHeaderCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: TableHeaderCellDirective, selector: "[fngTh]", inputs: { order: "order", fngTh: "fngTh", abbr: "abbr", colspan: "colspan", headers: "headers", rowspan: "rowspan", scope: "scope" }, outputs: { changeOrder: "changeOrder" }, host: { listeners: { "click": "onChangeOrder()" }, properties: { "class.fwe-table-order": "order != null", "class.fwe-active": "active", "class.fwe-table-order-descending": "orderDescending", "attr.abbr": "abbr", "attr.colspan": "colspan", "attr.headers": "headers", "attr.rowspan": "rowspan", "attr.scope": "scope" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TableHeaderCellDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fngTh]',
-                    host: {
-                        '[class.fwe-table-order]': 'order != null',
-                        '[class.fwe-active]': 'active',
-                        '[class.fwe-table-order-descending]': 'orderDescending',
-                        '[attr.abbr]': 'abbr',
-                        '[attr.colspan]': 'colspan',
-                        '[attr.headers]': 'headers',
-                        '[attr.rowspan]': 'rowspan',
-                        '[attr.scope]': 'scope',
-                        '(click)': 'onChangeOrder()'
-                    }
-                }]
-        }], propDecorators: { order: [{
-                type: Input
-            }], fngTh: [{
-                type: Input
-            }], changeOrder: [{
-                type: Output
-            }], abbr: [{
-                type: Input
-            }], colspan: [{
-                type: Input
-            }], headers: [{
-                type: Input
-            }], rowspan: [{
-                type: Input
-            }], scope: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=table-header-cell.directive.js.map

package/esm2015/lib/components/table-header-cell/table-header-cell.directive.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-header-cell.directive.js","sourceRoot":"","sources":["../../../../../../../libs/angular/src/lib/components/table-header-cell/table-header-cell.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;AAqBvE,MAAM,OAAO,wBAAwB;IAdrC;QAkBY,gBAAW,GAAG,IAAI,YAAY,EAAU,CAAC;KA4BpD;IAnBC,IAAI,MAAM;QACR,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE;YACtB,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE;YACpD,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK,CAAC;IAC3C,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;IAC9C,CAAC;IAED,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;;qHA/BU,wBAAwB;yGAAxB,wBAAwB;2FAAxB,wBAAwB;kBAdpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,SAAS;oBACnB,IAAI,EAAE;wBACJ,yBAAyB,EAAE,eAAe;wBAC1C,oBAAoB,EAAE,QAAQ;wBAC9B,oCAAoC,EAAE,iBAAiB;wBACvD,aAAa,EAAE,MAAM;wBACrB,gBAAgB,EAAE,SAAS;wBAC3B,gBAAgB,EAAE,SAAS;wBAC3B,gBAAgB,EAAE,SAAS;wBAC3B,cAAc,EAAE,OAAO;wBACvB,SAAS,EAAE,iBAAiB;qBAC7B;iBACF;8BAEU,KAAK;sBAAb,KAAK;gBACG,KAAK;sBAAb,KAAK;gBAEI,WAAW;sBAApB,MAAM;gBAGE,IAAI;sBAAZ,KAAK;gBACG,OAAO;sBAAf,KAAK;gBACG,OAAO;sBAAf,KAAK;gBACG,OAAO;sBAAf,KAAK;gBACG,KAAK;sBAAb,KAAK","sourcesContent":["import { Directive, Input, Output, EventEmitter } from '@angular/core';\n\nexport interface TableColumnOrder {\n  orderBy?: string;\n  ascending: boolean;\n}\n\n@Directive({\n  selector: '[fngTh]',\n  host: {\n    '[class.fwe-table-order]': 'order != null',\n    '[class.fwe-active]': 'active',\n    '[class.fwe-table-order-descending]': 'orderDescending',\n    '[attr.abbr]': 'abbr',\n    '[attr.colspan]': 'colspan',\n    '[attr.headers]': 'headers',\n    '[attr.rowspan]': 'rowspan',\n    '[attr.scope]': 'scope',\n    '(click)': 'onChangeOrder()'\n  }\n})\nexport class TableHeaderCellDirective {\n  @Input() order: TableColumnOrder;\n  @Input() fngTh: string;\n\n  @Output() changeOrder = new EventEmitter<string>();\n\n  /* Attributes */\n  @Input() abbr: string;\n  @Input() colspan: number;\n  @Input() headers: string;\n  @Input() rowspan: number;\n  @Input() scope: string;\n\n  get active(): boolean {\n    if (this.order == null) {\n      return false;\n    }\n\n    if (this.order.orderBy == null || this.fngTh == null) {\n      return false;\n    }\n\n    return this.order.orderBy === this.fngTh;\n  }\n\n  get orderDescending(): boolean {\n    return this.active && !this.order.ascending;\n  }\n\n  onChangeOrder() {\n    this.changeOrder.emit(this.fngTh);\n  }\n}\n"]}

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

@@ -1,35 +0,0 @@
-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" }, 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: [{
-                    selector: 'fng-tab-pane',
-                    templateUrl: './tab-pane.component.html',
-                    styleUrls: ['./tab-pane.component.scss']
-                }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], isVisible: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=tab-pane.component.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,362 +0,0 @@
-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";
-export class TabsComponent {
-    constructor(elRef, document, renderer, cd) {
-        this.elRef = elRef;
-        this.document = document;
-        this.renderer = renderer;
-        this.cd = cd;
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.viewType = 'responsive';
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.showDivider = false;
-        this.config = null;
-        this.fngTabChange = new EventEmitter();
-        this.componentId = `tabs-${++TabsComponent.nextId}`;
-        this.tabs = [];
-        this.useCompactDensity = true;
-        this.activeTab = null;
-        this.complete = new Subject();
-        this.injectedWindow = this.document.defaultView;
-    }
-    ngAfterContentInit() {
-        this.initTabs();
-        if (null === this.activeTab) {
-            this.panes.map((pane, i) => {
-                if (0 === i) {
-                    pane.isVisible = true;
-                }
-            });
-        }
-        else {
-            this.panes.find(pane => null != this.activeTab.paneId && pane.tabPaneId === this.activeTab.paneId).isVisible = true;
-        }
-    }
-    ngAfterViewInit() {
-        var _a, _b, _c, _d;
-        this.elemScroller = (_a = this.scroller) === null || _a === void 0 ? void 0 : _a.nativeElement;
-        this.elemScrollArea = (_b = this.scrollAera) === null || _b === void 0 ? void 0 : _b.nativeElement;
-        this.elemScrollContent = (_c = this.scrollContent) === null || _c === void 0 ? void 0 : _c.nativeElement;
-        const initialWidth = (_d = this.elemScrollArea) === null || _d === void 0 ? void 0 : _d.offsetWidth;
-        if (initialWidth > 768) {
-            this.useCompactDensity = false;
-            this.cd.detectChanges();
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            const width = this.elemScrollArea.offsetWidth;
-            if (width > 768 && this.useCompactDensity === true) {
-                this.useCompactDensity = false;
-                this.cd.detectChanges();
-            }
-            else if (width <= 768 && this.useCompactDensity === false) {
-                this.useCompactDensity = true;
-                this.cd.detectChanges();
-            }
-        });
-        if (this.elemScrollArea != null) {
-            this.resizeObserver.observe(this.elemScrollArea);
-        }
-        this.handleTabPaneChanges();
-    }
-    ngOnDestroy() {
-        this.complete.next(true);
-        this.complete.unsubscribe();
-    }
-    showTabPane(id) {
-        var _a;
-        const pane = this.panes.find(p => p.tabPaneId === id);
-        if (null != pane) {
-            this.panes.map(p => {
-                p.isVisible = false;
-            });
-            pane.isVisible = true;
-            this.tabs.map(tab => {
-                if (tab.paneId !== pane.tabPaneId) {
-                    tab.active = false;
-                }
-                else {
-                    tab.active = true;
-                }
-            });
-            this.fngTabChange.emit({
-                previous: (_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.paneId,
-                current: id
-            });
-            this.activeTab = this.tabs.find(tab => !!tab.active);
-        }
-    }
-    handleTabScroll(event, index) {
-        const scrollContentWidth = this.elemScrollContent.offsetWidth;
-        const scrollAreaWidth = this.elemScrollArea.offsetWidth;
-        // check if no scroll is needed
-        if (scrollAreaWidth > scrollContentWidth) {
-            return;
-        }
-        // check index
-        if (!this.indexIsInRange(index)) {
-            return;
-        }
-        // always scroll to 0 if scrolling to the first tab
-        if (index === 0) {
-            this.scrollTo(0);
-            return;
-        }
-        // always scroll to the max value if scrolling to the last tab
-        if (index === this.tabs.length - 1) {
-            this.scrollTo(this.elemScrollContent.offsetWidth);
-            return;
-        }
-        const currentTab = event.target;
-        this.scrollIntoView(index, currentTab);
-    }
-    initTabs() {
-        this.tabs = [];
-        this.panes.map((pane, i) => {
-            pane.tabId = this.componentId + '-tab-' + i;
-            const tab = {
-                name: null != pane.name ? pane.name : '',
-                paneId: null != pane.tabPaneId ? pane.tabPaneId : null,
-                icon: null != pane.icon ? pane.icon : null,
-                active: null != pane.active ? pane.active : false
-            };
-            this.tabs.push(tab);
-        });
-        this.initActiveTab();
-        this.cd.detectChanges();
-    }
-    initActiveTab() {
-        const activeTab = this.tabs.find((tab) => !!tab.active);
-        if (!activeTab && 0 < this.tabs.length) {
-            this.tabs[0] = Object.assign(Object.assign({}, this.tabs[0]), { active: true });
-            this.activeTab = this.tabs[0];
-        }
-        else {
-            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);
-        const scrollDelta = safeScrollX - currentScrollX;
-        this.animate({
-            finalScrollPosition: safeScrollX,
-            scrollDelta
-        });
-    }
-    scrollIntoView(index, tab) {
-        const scrollPosition = this.getScrollPosition();
-        const barWidth = this.elemScrollArea.offsetWidth;
-        const tabDimensions = this.computeDimensions(tab);
-        const nextIndex = this.findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
-        if (!this.indexIsInRange(nextIndex)) {
-            return;
-        }
-        const scrollIncrement = this.calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
-        this.incrementScroll(scrollIncrement);
-    }
-    incrementScroll(scrollXIncrement) {
-        // no scroll needed
-        if (scrollXIncrement === 0) {
-            return;
-        }
-        const scrollOperation = this.getIncrementScrollOperation(scrollXIncrement);
-        this.animate(scrollOperation);
-    }
-    animate(animation) {
-        // no animation needed
-        if (animation.scrollDelta === 0) {
-            return;
-        }
-        this.stopScrollAnimation();
-        // this animation uses the flip approach
-        // https://aerotwist.com/blog/flip-your-animations/
-        // https://css-tricks.com/animating-layouts-with-the-flip-technique/
-        this.elemScrollArea.scrollLeft = animation.finalScrollPosition;
-        this.setScrollContentStyleProperty('transform', `translateX(${animation.scrollDelta}px)`);
-        // force repaint
-        this.elemScrollArea.getBoundingClientRect();
-        requestAnimationFrame(() => {
-            this.renderer.addClass(this.elemScroller, 'fng-tab-scroller--animating');
-            this.setScrollContentStyleProperty('transform', 'none');
-        });
-    }
-    stopScrollAnimation() {
-        const currentScrollPosition = this.getAnimatingScrollPosition();
-        this.renderer.removeClass(this.elemScroller, 'fng-tab-scroller--animating');
-        this.setScrollContentStyleProperty('transform', 'translateX(0px)');
-        this.elemScrollArea.scrollLeft = currentScrollPosition;
-    }
-    getAnimatingScrollPosition() {
-        const currentTranslateX = this.calculateCurrentTranslateX();
-        const scrollLeft = this.elemScrollArea.scrollLeft;
-        return scrollLeft - currentTranslateX;
-    }
-    getIncrementScrollOperation(scrollX) {
-        const currentScrollX = this.getScrollPosition();
-        const targetScrollX = scrollX + currentScrollX;
-        const safeScrollX = this.clampScrollValue(targetScrollX);
-        const scrollDelta = safeScrollX - currentScrollX;
-        return {
-            finalScrollPosition: safeScrollX,
-            scrollDelta
-        };
-    }
-    clampScrollValue(scrollX) {
-        const edges = this.calculateScrollEdges();
-        return Math.min(Math.max(edges.left, scrollX), edges.right);
-    }
-    calculateScrollEdges() {
-        const scrollContentWidth = this.elemScrollContent.offsetWidth;
-        const scrollAreaWidth = this.elemScrollArea.offsetWidth;
-        return {
-            left: 0,
-            right: scrollContentWidth - scrollAreaWidth
-        };
-    }
-    computeDimensions(tab) {
-        const rootWidth = tab.offsetWidth;
-        const rootLeft = tab.offsetLeft;
-        const tabContent = tab.querySelector('.fng-tab-content');
-        const contentWidth = tabContent.offsetWidth;
-        const contentLeft = tabContent.offsetLeft;
-        return {
-            contentLeft: rootLeft + contentLeft,
-            contentRight: rootLeft + contentLeft + contentWidth,
-            rootLeft,
-            rootRight: rootLeft + rootWidth
-        };
-    }
-    calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
-        const nextTab = this.elRef.nativeElement.querySelector(`#${this.componentId}-tab-${nextIndex}`);
-        const nextTabDimensions = this.computeDimensions(nextTab);
-        const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
-        const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
-        const leftIncrement = relativeContentRight - 48;
-        const rightIncrement = relativeContentLeft + 48;
-        if (nextIndex < index) {
-            return Math.min(leftIncrement, 0);
-        }
-        return Math.max(rightIncrement, 0);
-    }
-    indexIsInRange(index) {
-        return index >= 0 && index < this.tabs.length;
-    }
-    getScrollPosition() {
-        const currentTranslateX = this.calculateCurrentTranslateX();
-        const scrollLeft = this.elemScrollArea.scrollLeft;
-        return scrollLeft - currentTranslateX;
-    }
-    calculateCurrentTranslateX() {
-        const transformValue = this.getScrollContentStyleValue('transform');
-        if (transformValue === 'none') {
-            return 0;
-        }
-        // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'
-        // get all the parenthesized values
-        const match = /\((.+?)\)/.exec(transformValue);
-        if (!match) {
-            return 0;
-        }
-        const matrixParams = match[1];
-        // we need value of tx -> translateX
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const [a, b, c, d, tx, ty] = matrixParams.split(',');
-        return parseFloat(tx);
-    }
-    getScrollContentStyleValue(propName) {
-        return this.injectedWindow.getComputedStyle(this.elemScrollContent).getPropertyValue(propName);
-    }
-    setScrollContentStyleProperty(propName, value) {
-        this.renderer.setStyle(this.elemScrollContent, propName, value);
-    }
-    findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
-        /**
-         * tabs are laid out in the tab scroller like this:
-         *
-         *    scroll position
-         *    +---+
-         *    |   |   bar width
-         *    |   +-----------------------------------+
-         *    |   |                                   |
-         *    |   v                                   v
-         *    |   +-----------------------------------+
-         *    v   |             tab scroller          |
-         *    +------------+--------------+-------------------+
-         *    |    tab     |      tab     |        tab        |
-         *    +------------+--------------+-------------------+
-         *        |                                   |
-         *        +-----------------------------------+
-         *
-         * to determine the next adjacent index, we look at the tab root left and
-         * tab root right, both relative to the scroll position. if the tab root
-         * left is less than 0, then we know it's out of view to the left. if the
-         * tab root right minus the bar width is greater than 0, we know the tab is
-         * out of view to the right. from there, we either increment or decrement
-         * the index.
-         */
-        const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
-        const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
-        const relativeRootDelta = relativeRootLeft + relativeRootRight;
-        const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
-        const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
-        if (leftEdgeIsCloser) {
-            return index - 1;
-        }
-        if (rightEdgeIsCloser) {
-            return index + 1;
-        }
-        return -1;
-    }
-}
-TabsComponent.nextId = 0;
-TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabsComponent, selector: "fng-tabs", inputs: { viewType: ["fngTabsViewType", "viewType"], showDivider: ["fngTabsUseBottomDivider", "showDivider"], config: "config" }, outputs: { fngTabChange: "fngTabChange" }, queries: [{ propertyName: "panes", predicate: TabPaneComponent }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "scrollAera", first: true, predicate: ["scrollAera"], descendants: true }, { propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true }], ngImport: i0, template: "<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", styles: [".fwe-legacy-tabs{margin:48px 0;width:100%;height:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;width:75%;padding-left:0;margin-bottom:0;margin-top:0;list-style:none;font-size:16px}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{height:48px;max-height:48px;background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{display:inline-block;width:100%;height:48px;padding:11px 16px 13px;line-height:24px;cursor:pointer;color:var(--fwe-black);white-space:nowrap}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:baseline;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}@media (max-width: 375px){.fwe-legacy-tab-bar{justify-content:space-between;background-color:var(--fwe-white);width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{color:var(--fwe-icon-gray)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-icon-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fng-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}.fng-tab-bar{width:100%}.fng-tab-scroller{overflow-y:hidden}.fng-tab-scroller-scroll-area{position:relative;display:flex;overflow-x:hidden}.fng-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fng-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fng-tab-scroller-scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;padding:0 17px 0 16px}.fng-tab-scroller-scroll-content--with-divider .fng-tab-scroller-divider-line{display:block}.fng-tab-scroller--animating .fng-tab-scroller-scroll-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-scroller-divider-line{display:none;position:absolute;top:0;left:0;right:0;bottom:0;border-bottom:1px solid var(--fwe-control)}.fng-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.fng-tab-indicator-content{transform-origin:left;opacity:0}.fng-tab-indicator-content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.fng-tab-indicator .fng-tab-indicator-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-indicator .fng-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fng-tab-indicator--active .fng-tab-indicator-content{opacity:1}.fng-tab{position:relative;display:flex;flex:1 0 auto;justify-content:center;padding:0;margin:0;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1;height:36px}.fng-tab:not(:last-child){margin-right:32px}.fng-tab::-moz-focus-inner{padding:0;border:0}.fng-tab .fng-tab-text-label{color:var(--fwe-text)}.fng-tab--active .fng-tab-text-label{color:var(--fwe-caerul)}.fng-tab-content{position:relative;display:flex;align-items:flex-start;justify-content:center;height:inherit;pointer-events:none}.fng-tab-text-label{display:inline-block;z-index:2}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab{flex:none}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab:not(:last-child){margin-right:64px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-scroll-content{padding:0 32px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-divider-line{padding-right:64px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fng-tabs',
-                    templateUrl: './tabs.component.html',
-                    styleUrls: ['./tabs.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewType: [{
-                type: Input,
-                args: ['fngTabsViewType']
-            }], showDivider: [{
-                type: Input,
-                args: ['fngTabsUseBottomDivider']
-            }], config: [{
-                type: Input
-            }], fngTabChange: [{
-                type: Output
-            }], panes: [{
-                type: ContentChildren,
-                args: [TabPaneComponent]
-            }], scroller: [{
-                type: ViewChild,
-                args: ['scroller']
-            }], scrollAera: [{
-                type: ViewChild,
-                args: ['scrollAera']
-            }], scrollContent: [{
-                type: ViewChild,
-                args: ['scrollContent']
-            }] } });
-//# sourceMappingURL=tabs.component.js.map

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

@@ -1 +0,0 @@
-{"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/esm2015/lib/content/content.module.js

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconComponent } from './icon/icon.component';
-import * as i0 from "@angular/core";
-export * from './icon/icon.component';
-export class FestoAngularContentModule {
-}
-FestoAngularContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
-FestoAngularContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        IconComponent
-                    ],
-                    imports: [CommonModule],
-                    exports: [
-                        IconComponent
-                    ],
-                    providers: [],
-                }]
-        }] });
-//# sourceMappingURL=content.module.js.map

package/esm2015/lib/content/content.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"content.module.js","sourceRoot":"","sources":["../../../../../../libs/angular/src/lib/content/content.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;;AAEtD,cAAc,uBAAuB,CAAC;AAYtC,MAAM,OAAO,yBAAyB;;sHAAzB,yBAAyB;uHAAzB,yBAAyB,iBARlC,aAAa,aAEJ,YAAY,aAErB,aAAa;uHAIJ,yBAAyB,aAFzB,EAAE,YAJJ,CAAE,YAAY,CAAE;2FAMd,yBAAyB;kBAVrC,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,aAAa;qBACd;oBACD,OAAO,EAAE,CAAE,YAAY,CAAE;oBACzB,OAAO,EAAE;wBACP,aAAa;qBACd;oBACD,SAAS,EAAE,EAAE;iBACd","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconComponent } from './icon/icon.component';\n\nexport * from './icon/icon.component';\n\n@NgModule({\n  declarations: [\n    IconComponent\n  ],\n  imports: [ CommonModule ],\n  exports: [\n    IconComponent\n  ],\n  providers: [],\n})\nexport class FestoAngularContentModule {}\n"]}