@festo-ui/angular 3.2.1-pre-20220809.2 → 3.2.1-pre-20220824.4
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.
- package/esm2020/lib/components/loading-indicator/loading-indicator.component.mjs +3 -3
- package/esm2020/lib/components/popovers/popover.service.mjs +2 -2
- package/esm2020/lib/components/tabs/tab-pane/tab-pane.component.mjs +5 -2
- package/esm2020/lib/components/tabs/tabs.component.mjs +41 -21
- package/fesm2015/festo-ui-angular.mjs +49 -25
- package/fesm2015/festo-ui-angular.mjs.map +1 -1
- package/fesm2020/festo-ui-angular.mjs +47 -24
- package/fesm2020/festo-ui-angular.mjs.map +1 -1
- package/lib/components/tabs/tab-pane/tab-pane.component.d.ts +2 -1
- package/lib/components/tabs/tabs.component.d.ts +7 -1
- package/package.json +1 -1
- package/scss/base/components/loading-indicator/loading-indicator.component.scss +0 -21
- package/scss/base/components/tabs/tabs.component.scss +14 -0
|
@@ -8,7 +8,7 @@ import * as i1$2 from '@angular/cdk/overlay';
|
|
|
8
8
|
import { OverlayConfig, OverlayModule, ConnectionPositionPair } from '@angular/cdk/overlay';
|
|
9
9
|
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
10
10
|
import { delay, take, takeUntil, debounceTime, filter } from 'rxjs/operators';
|
|
11
|
-
import { Subject } from 'rxjs';
|
|
11
|
+
import { Subject, noop } from 'rxjs';
|
|
12
12
|
import SimpleBar from 'simplebar';
|
|
13
13
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
14
14
|
import * as i1$3 from '@angular/platform-browser';
|
|
@@ -119,10 +119,10 @@ class LoadingIndicatorComponent {
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
-
LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: LoadingIndicatorComponent, selector: "fng-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"
|
|
122
|
+
LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: LoadingIndicatorComponent, selector: "fng-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"fwe-waiting-container\" [class.fwe-waiting-container-sm]=\"size === 'small'\">\n <div\n class=\"fwe-waiting-indicator\"\n [class.fwe-waiting-indicator-md]=\"size === 'medium'\"\n [class.fwe-waiting-indicator-sm]=\"size === 'small'\"\n >\n <div class=\"fwe-waiting-circle-1\"></div>\n <div class=\"fwe-waiting-circle-2\"></div>\n <div class=\"fwe-waiting-circle-3\"></div>\n <div class=\"fwe-waiting-circle-4\"></div>\n </div>\n <div class=\"fwe-waiting-content-container\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["fng-loading-indicator{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'fng-loading-indicator', encapsulation: ViewEncapsulation.None, template: "<div class=\"
|
|
125
|
+
args: [{ selector: 'fng-loading-indicator', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-waiting-container\" [class.fwe-waiting-container-sm]=\"size === 'small'\">\n <div\n class=\"fwe-waiting-indicator\"\n [class.fwe-waiting-indicator-md]=\"size === 'medium'\"\n [class.fwe-waiting-indicator-sm]=\"size === 'small'\"\n >\n <div class=\"fwe-waiting-circle-1\"></div>\n <div class=\"fwe-waiting-circle-2\"></div>\n <div class=\"fwe-waiting-circle-3\"></div>\n <div class=\"fwe-waiting-circle-4\"></div>\n </div>\n <div class=\"fwe-waiting-content-container\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["fng-loading-indicator{display:block}\n"] }]
|
|
126
126
|
}], propDecorators: { size: [{
|
|
127
127
|
type: Input
|
|
128
128
|
}] } });
|
|
@@ -607,7 +607,7 @@ class PopoverService {
|
|
|
607
607
|
fn(PopoverTypes.Tooltip, positions);
|
|
608
608
|
break;
|
|
609
609
|
case PopoverTypes.Menu:
|
|
610
|
-
positions = [PopoverPosition.Right, PopoverPosition.Left];
|
|
610
|
+
positions = [PopoverPosition.Right, PopoverPosition.Left, PopoverPosition.Bottom, PopoverPosition.Top];
|
|
611
611
|
fn(PopoverTypes.Menu, positions);
|
|
612
612
|
break;
|
|
613
613
|
case PopoverTypes.Legend:
|
|
@@ -994,6 +994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
994
994
|
|
|
995
995
|
class TabPaneComponent {
|
|
996
996
|
constructor() {
|
|
997
|
+
this.disabled = false;
|
|
997
998
|
this.tabPaneId = `tab-panel-content-${++TabPaneComponent.nextId}`;
|
|
998
999
|
this.changesSubject = new Subject();
|
|
999
1000
|
this.changes$ = this.changesSubject.asObservable();
|
|
@@ -1004,7 +1005,7 @@ class TabPaneComponent {
|
|
|
1004
1005
|
}
|
|
1005
1006
|
TabPaneComponent.nextId = 0;
|
|
1006
1007
|
TabPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1007
|
-
TabPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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"] });
|
|
1008
|
+
TabPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible", disabled: "disabled" }, 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"] });
|
|
1008
1009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabPaneComponent, decorators: [{
|
|
1009
1010
|
type: Component,
|
|
1010
1011
|
args: [{ selector: 'fng-tab-pane', 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"] }]
|
|
@@ -1018,6 +1019,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1018
1019
|
type: Input
|
|
1019
1020
|
}], isVisible: [{
|
|
1020
1021
|
type: Input
|
|
1022
|
+
}], disabled: [{
|
|
1023
|
+
type: Input
|
|
1021
1024
|
}] } });
|
|
1022
1025
|
|
|
1023
1026
|
class TabsComponent {
|
|
@@ -1029,6 +1032,7 @@ class TabsComponent {
|
|
|
1029
1032
|
this.viewType = 'responsive';
|
|
1030
1033
|
this.showDivider = false;
|
|
1031
1034
|
this.config = null;
|
|
1035
|
+
this.fngBeforeTabChange = new EventEmitter();
|
|
1032
1036
|
this.fngTabChange = new EventEmitter();
|
|
1033
1037
|
this.componentId = `tabs-${++TabsComponent.nextId}`;
|
|
1034
1038
|
this.tabs = [];
|
|
@@ -1081,24 +1085,40 @@ class TabsComponent {
|
|
|
1081
1085
|
}
|
|
1082
1086
|
showTabPane(id) {
|
|
1083
1087
|
const pane = this.panes.find(p => p.tabPaneId === id);
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
p
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
tab.
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1088
|
+
const handleTabChange = (id) => {
|
|
1089
|
+
if (pane != null && pane.disabled !== true) {
|
|
1090
|
+
this.panes.map(p => {
|
|
1091
|
+
p.isVisible = false;
|
|
1092
|
+
});
|
|
1093
|
+
pane.isVisible = true;
|
|
1094
|
+
this.tabs.map(tab => {
|
|
1095
|
+
if (tab.paneId !== pane.tabPaneId) {
|
|
1096
|
+
tab.active = false;
|
|
1097
|
+
}
|
|
1098
|
+
else {
|
|
1099
|
+
tab.active = true;
|
|
1100
|
+
}
|
|
1101
|
+
});
|
|
1102
|
+
this.fngTabChange.emit({
|
|
1103
|
+
previous: this.activeTab?.paneId,
|
|
1104
|
+
current: id
|
|
1105
|
+
});
|
|
1106
|
+
this.activeTab = this.tabs.find(tab => !!tab.active);
|
|
1107
|
+
this.cd.detectChanges();
|
|
1108
|
+
}
|
|
1109
|
+
};
|
|
1110
|
+
if (this.fngBeforeTabChange?.observers?.length > 0 && pane.disabled !== true) {
|
|
1111
|
+
this.fngBeforeTabChange.emit({
|
|
1112
|
+
ok: () => {
|
|
1113
|
+
handleTabChange(id);
|
|
1114
|
+
},
|
|
1115
|
+
cancel: () => {
|
|
1116
|
+
noop();
|
|
1095
1117
|
}
|
|
1096
1118
|
});
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
});
|
|
1101
|
-
this.activeTab = this.tabs.find(tab => !!tab.active);
|
|
1119
|
+
}
|
|
1120
|
+
else {
|
|
1121
|
+
handleTabChange(id);
|
|
1102
1122
|
}
|
|
1103
1123
|
}
|
|
1104
1124
|
handleTabScroll(event, index) {
|
|
@@ -1133,7 +1153,8 @@ class TabsComponent {
|
|
|
1133
1153
|
name: null != pane.name ? pane.name : '',
|
|
1134
1154
|
paneId: null != pane.tabPaneId ? pane.tabPaneId : null,
|
|
1135
1155
|
icon: null != pane.icon ? pane.icon : null,
|
|
1136
|
-
active: null != pane.active ? pane.active : false
|
|
1156
|
+
active: null != pane.active ? pane.active : false,
|
|
1157
|
+
disabled: null != pane.disabled ? pane.disabled : false
|
|
1137
1158
|
};
|
|
1138
1159
|
this.tabs.push(tab);
|
|
1139
1160
|
});
|
|
@@ -1335,10 +1356,10 @@ class TabsComponent {
|
|
|
1335
1356
|
}
|
|
1336
1357
|
TabsComponent.nextId = 0;
|
|
1337
1358
|
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1338
|
-
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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
|
|
1359
|
+
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TabsComponent, selector: "fng-tabs", inputs: { viewType: ["fngTabsViewType", "viewType"], showDivider: ["fngTabsUseBottomDivider", "showDivider"], config: "config" }, outputs: { fngBeforeTabChange: "fngBeforeTabChange", 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\n *ngFor=\"let tab of tabs; let i = index\"\n class=\"fwe-legacy-tab-item\"\n [ngClass]=\"{ 'fwe-active': tab?.active, 'fwe-disabled': tab?.disabled }\"\n >\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 [attr.aria-disabled]=\"true === tab?.disabled ? 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 [attr.aria-disabled]=\"true === tab?.disabled ? 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 [class.fng-tab--disabled]=\"tab?.disabled\"\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:var(--fwe-font-size-base)}.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.fwe-disabled{background-color:var(--fwe-control-disabled)}.fwe-legacy-tab-item.fwe-disabled .fwe-legacy-tab-link{color:var(--fwe-text-disabled)}.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: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--disabled .fng-tab-text-label{color:var(--fwe-text-disabled)}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1339
1360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1340
1361
|
type: Component,
|
|
1341
|
-
args: [{ selector: 'fng-tabs', changeDetection: ChangeDetectionStrategy.OnPush, 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
|
|
1362
|
+
args: [{ selector: 'fng-tabs', changeDetection: ChangeDetectionStrategy.OnPush, 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\n *ngFor=\"let tab of tabs; let i = index\"\n class=\"fwe-legacy-tab-item\"\n [ngClass]=\"{ 'fwe-active': tab?.active, 'fwe-disabled': tab?.disabled }\"\n >\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 [attr.aria-disabled]=\"true === tab?.disabled ? 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 [attr.aria-disabled]=\"true === tab?.disabled ? 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 [class.fng-tab--disabled]=\"tab?.disabled\"\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:var(--fwe-font-size-base)}.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.fwe-disabled{background-color:var(--fwe-control-disabled)}.fwe-legacy-tab-item.fwe-disabled .fwe-legacy-tab-link{color:var(--fwe-text-disabled)}.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: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--disabled .fng-tab-text-label{color:var(--fwe-text-disabled)}.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"] }]
|
|
1342
1363
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
|
|
1343
1364
|
type: Inject,
|
|
1344
1365
|
args: [DOCUMENT]
|
|
@@ -1350,6 +1371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1350
1371
|
args: ['fngTabsUseBottomDivider']
|
|
1351
1372
|
}], config: [{
|
|
1352
1373
|
type: Input
|
|
1374
|
+
}], fngBeforeTabChange: [{
|
|
1375
|
+
type: Output
|
|
1353
1376
|
}], fngTabChange: [{
|
|
1354
1377
|
type: Output
|
|
1355
1378
|
}], panes: [{
|