@festo-ui/angular 5.0.0-dev.86 → 5.0.0-dev.87
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.
|
@@ -1774,10 +1774,10 @@ class FngTabsComponent {
|
|
|
1774
1774
|
}
|
|
1775
1775
|
FngTabsComponent.nextId = 0;
|
|
1776
1776
|
FngTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngTabsComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1777
|
-
FngTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: FngTabsComponent, isStandalone: true, selector: "fng-tabs", inputs: { viewType: ["fngTabsViewType", "viewType"], showDivider: ["fngTabsUseBottomDivider", "showDivider"], config: "config" }, outputs: { fngBeforeTabChange: "fngBeforeTabChange", fngTabChange: "fngTabChange" }, queries: [{ propertyName: "panes", predicate: FngTabPaneComponent }], 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'\">\r\n <div class=\"fwe-legacy-tabs\">\r\n <ul\r\n role=\"tablist\"\r\n class=\"fwe-legacy-tab-bar\"\r\n [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\r\n [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\r\n [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\r\n >\r\n <li\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n class=\"fwe-legacy-tab-item\"\r\n [ngClass]=\"{ 'fwe-active': tab?.active, 'fwe-disabled': tab?.disabled }\"\r\n >\r\n <ng-container *ngIf=\"null == tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n >{{ tab.name }}</a\r\n >\r\n </ng-container>\r\n <ng-container *ngIf=\"null != tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\r\n >\r\n <i [class]=\"'fwe-icon ' + tab.icon\"></i>\r\n <span>{{ tab.name }}</span>\r\n </a>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <div class=\"fwe-legacy-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"viewType !== 'legacy'\">\r\n <div class=\"fng-tab-bar\" role=\"tablist\">\r\n <div class=\"fng-tab-scroller\" #scroller>\r\n <div\r\n class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\r\n [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\r\n #scrollAera\r\n >\r\n <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\r\n <button\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n role=\"tab\"\r\n class=\"fng-tab\"\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [tabindex]=\"i === 0 ? 0 : -1\"\r\n [class.fng-tab--active]=\"tab?.active\"\r\n [class.fng-tab--disabled]=\"tab?.disabled\"\r\n (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\r\n >\r\n <span class=\"fng-tab-content\">\r\n <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\r\n </span>\r\n <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\r\n <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\r\n </span>\r\n </button>\r\n <div class=\"fng-tab-scroller-divider-line\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fng-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #tabPanelContent>\r\n <ng-content></ng-content>\r\n</ng-template>\r\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;inset: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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1777
|
+
FngTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: FngTabsComponent, isStandalone: true, selector: "fng-tabs", inputs: { viewType: ["fngTabsViewType", "viewType"], showDivider: ["fngTabsUseBottomDivider", "showDivider"], config: "config" }, outputs: { fngBeforeTabChange: "fngBeforeTabChange", fngTabChange: "fngTabChange" }, queries: [{ propertyName: "panes", predicate: FngTabPaneComponent }], 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'\">\r\n <div class=\"fwe-legacy-tabs\">\r\n <ul\r\n role=\"tablist\"\r\n class=\"fwe-legacy-tab-bar\"\r\n [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\r\n [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\r\n [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\r\n >\r\n <li\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n class=\"fwe-legacy-tab-item\"\r\n [ngClass]=\"{ 'fwe-active': tab?.active, 'fwe-disabled': tab?.disabled }\"\r\n >\r\n <ng-container *ngIf=\"null == tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n >{{ tab.name }}</a\r\n >\r\n </ng-container>\r\n <ng-container *ngIf=\"null != tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\r\n >\r\n <i [class]=\"'fwe-icon ' + tab.icon\"></i>\r\n <span>{{ tab.name }}</span>\r\n </a>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <div class=\"fwe-legacy-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"viewType !== 'legacy'\">\r\n <div class=\"fng-tab-bar\" role=\"tablist\">\r\n <div class=\"fng-tab-scroller\" #scroller>\r\n <div\r\n class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\r\n [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\r\n #scrollAera\r\n >\r\n <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\r\n <button\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n role=\"tab\"\r\n class=\"fng-tab\"\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [tabindex]=\"i === 0 ? 0 : -1\"\r\n [class.fng-tab--active]=\"tab?.active\"\r\n [class.fng-tab--disabled]=\"tab?.disabled\"\r\n (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\r\n >\r\n <span class=\"fng-tab-content\">\r\n <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\r\n </span>\r\n <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\r\n <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\r\n </span>\r\n </button>\r\n <div class=\"fng-tab-scroller-divider-line\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fng-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #tabPanelContent>\r\n <ng-content></ng-content>\r\n</ng-template>\r\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-item:not(.fwe-active) .fwe-legacy-tab-link:hover{color:var(--fwe-btn-text);background-color:var(--fwe-btn-hover)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link:active{background-color:var(--fwe-btn-active)}.fwe-legacy-tab-link{display:inline-block;width:100%;height:46px;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-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;inset: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:hover .fng-tab-text-label{color:var(--fwe-caerul)}.fng-tab:active .fng-tab-text-label{color:var(--fwe-btn-hero-active)}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1778
1778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngTabsComponent, decorators: [{
|
|
1779
1779
|
type: Component,
|
|
1780
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'fng-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"viewType === 'legacy'\">\r\n <div class=\"fwe-legacy-tabs\">\r\n <ul\r\n role=\"tablist\"\r\n class=\"fwe-legacy-tab-bar\"\r\n [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\r\n [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\r\n [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\r\n >\r\n <li\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n class=\"fwe-legacy-tab-item\"\r\n [ngClass]=\"{ 'fwe-active': tab?.active, 'fwe-disabled': tab?.disabled }\"\r\n >\r\n <ng-container *ngIf=\"null == tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n >{{ tab.name }}</a\r\n >\r\n </ng-container>\r\n <ng-container *ngIf=\"null != tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\r\n >\r\n <i [class]=\"'fwe-icon ' + tab.icon\"></i>\r\n <span>{{ tab.name }}</span>\r\n </a>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <div class=\"fwe-legacy-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"viewType !== 'legacy'\">\r\n <div class=\"fng-tab-bar\" role=\"tablist\">\r\n <div class=\"fng-tab-scroller\" #scroller>\r\n <div\r\n class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\r\n [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\r\n #scrollAera\r\n >\r\n <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\r\n <button\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n role=\"tab\"\r\n class=\"fng-tab\"\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [tabindex]=\"i === 0 ? 0 : -1\"\r\n [class.fng-tab--active]=\"tab?.active\"\r\n [class.fng-tab--disabled]=\"tab?.disabled\"\r\n (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\r\n >\r\n <span class=\"fng-tab-content\">\r\n <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\r\n </span>\r\n <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\r\n <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\r\n </span>\r\n </button>\r\n <div class=\"fng-tab-scroller-divider-line\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fng-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #tabPanelContent>\r\n <ng-content></ng-content>\r\n</ng-template>\r\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:
|
|
1780
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'fng-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"viewType === 'legacy'\">\r\n <div class=\"fwe-legacy-tabs\">\r\n <ul\r\n role=\"tablist\"\r\n class=\"fwe-legacy-tab-bar\"\r\n [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\r\n [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\r\n [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\r\n >\r\n <li\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n class=\"fwe-legacy-tab-item\"\r\n [ngClass]=\"{ 'fwe-active': tab?.active, 'fwe-disabled': tab?.disabled }\"\r\n >\r\n <ng-container *ngIf=\"null == tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n >{{ tab.name }}</a\r\n >\r\n </ng-container>\r\n <ng-container *ngIf=\"null != tab?.icon\">\r\n <a\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [attr.aria-disabled]=\"true === tab?.disabled ? true : false\"\r\n role=\"tab\"\r\n class=\"fwe-legacy-tab-link\"\r\n (click)=\"showTabPane(tab.paneId)\"\r\n [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\r\n >\r\n <i [class]=\"'fwe-icon ' + tab.icon\"></i>\r\n <span>{{ tab.name }}</span>\r\n </a>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <div class=\"fwe-legacy-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"viewType !== 'legacy'\">\r\n <div class=\"fng-tab-bar\" role=\"tablist\">\r\n <div class=\"fng-tab-scroller\" #scroller>\r\n <div\r\n class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\r\n [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\r\n #scrollAera\r\n >\r\n <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\r\n <button\r\n *ngFor=\"let tab of tabs; let i = index\"\r\n role=\"tab\"\r\n class=\"fng-tab\"\r\n [id]=\"componentId + '-tab-' + i\"\r\n [attr.aria-controls]=\"tab.paneId\"\r\n [attr.aria-selected]=\"true === tab?.active ? true : false\"\r\n [tabindex]=\"i === 0 ? 0 : -1\"\r\n [class.fng-tab--active]=\"tab?.active\"\r\n [class.fng-tab--disabled]=\"tab?.disabled\"\r\n (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\r\n >\r\n <span class=\"fng-tab-content\">\r\n <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\r\n </span>\r\n <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\r\n <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\r\n </span>\r\n </button>\r\n <div class=\"fng-tab-scroller-divider-line\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"fng-tab-panel-content\">\r\n <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #tabPanelContent>\r\n <ng-content></ng-content>\r\n</ng-template>\r\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-item:not(.fwe-active) .fwe-legacy-tab-link:hover{color:var(--fwe-btn-text);background-color:var(--fwe-btn-hover)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link:active{background-color:var(--fwe-btn-active)}.fwe-legacy-tab-link{display:inline-block;width:100%;height:46px;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-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;inset: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:hover .fng-tab-text-label{color:var(--fwe-caerul)}.fng-tab:active .fng-tab-text-label{color:var(--fwe-btn-hero-active)}.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"] }]
|
|
1781
1781
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
|
|
1782
1782
|
type: Inject,
|
|
1783
1783
|
args: [DOCUMENT]
|