@netgrif/components
Version:
Netgrif Application Engine frontend Angular components
35 lines • 15.2 kB
JavaScript
import { Component } from '@angular/core';
import { AbstractTabViewComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@netgrif/components-core";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/tabs";
import * as i4 from "@ngbracket/ngx-layout";
import * as i5 from "@ngbracket/ngx-layout/extended";
import * as i6 from "@angular/material/badge";
import * as i7 from "@angular/material/button";
import * as i8 from "@angular/material/icon";
import * as i9 from "@angular/cdk/portal";
import * as i10 from "../tab-creation-detector/tab-creation-detector.component";
import * as i11 from "@ngx-translate/core";
/**
* Component that renders a tab view.
*
* See {@link TabView} for the class that holds the logic for this view.
*/
export class TabViewComponent extends AbstractTabViewComponent {
_viewService;
_logger;
constructor(_viewService, _logger, injector) {
super(_viewService, _logger, injector);
this._viewService = _viewService;
this._logger = _logger;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabViewComponent, deps: [{ token: i1.ViewService }, { token: i1.LoggerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TabViewComponent, selector: "nc-tab-view", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n [class.center-tabs]=\"align === 'center'\"\n [class.end-tabs]=\"align === 'end'\"\n mat-stretch-tabs=\"false\"\n (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\" [ngClass]=\"{'label-opacity': i === tabView.selectedIndex.value}\">\n <ng-template mat-tab-label>\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <mat-icon class=\"icon-margin-right\" [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\"\n *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n </div>\n <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n <mat-icon [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\">clear</mat-icon>\n </button>\n </div>\n </ng-template>\n <!-- TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n <!-- <ng-template matTabContent>-->\n <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n [tabIndex]=\"i\"></nc-tab-creation-detector>\n <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n </ng-template>\n </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-mdc-badge-content{top:-3px!important;right:-24px!important}.custom-badge{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i10.TabCreationDetectorComponent, selector: "nc-tab-creation-detector" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabViewComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-tab-view', template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n [class.center-tabs]=\"align === 'center'\"\n [class.end-tabs]=\"align === 'end'\"\n mat-stretch-tabs=\"false\"\n (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\" [ngClass]=\"{'label-opacity': i === tabView.selectedIndex.value}\">\n <ng-template mat-tab-label>\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <mat-icon class=\"icon-margin-right\" [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\"\n *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n </div>\n <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n <mat-icon [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\">clear</mat-icon>\n </button>\n </div>\n </ng-template>\n <!-- TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n <!-- <ng-template matTabContent>-->\n <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n [tabIndex]=\"i\"></nc-tab-creation-detector>\n <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n </ng-template>\n </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-mdc-badge-content{top:-3px!important;right:-24px!important}.custom-badge{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}\n"] }]
}], ctorParameters: () => [{ type: i1.ViewService }, { type: i1.LoggerService }, { type: i0.Injector }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvdGFicy90YWItdmlldy90YWItdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi90YWJzL3RhYi12aWV3L3RhYi12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFDLHdCQUF3QixFQUE2QixNQUFNLDBCQUEwQixDQUFDOzs7Ozs7Ozs7Ozs7O0FBRTlGOzs7O0dBSUc7QUFNSCxNQUFNLE9BQU8sZ0JBQWlCLFNBQVEsd0JBQXdCO0lBRXBDO0lBQXFDO0lBQTNELFlBQXNCLFlBQXlCLEVBQVksT0FBc0IsRUFBRSxRQUFrQjtRQUNqRyxLQUFLLENBQUMsWUFBWSxFQUFFLE9BQU8sRUFBRSxRQUFRLENBQUMsQ0FBQztRQURyQixpQkFBWSxHQUFaLFlBQVksQ0FBYTtRQUFZLFlBQU8sR0FBUCxPQUFPLENBQWU7SUFFakYsQ0FBQzt3R0FKUSxnQkFBZ0I7NEZBQWhCLGdCQUFnQiwwRUNiN0IsbS9EQTZCQTs7NEZEaEJhLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDSSxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdG9yfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QWJzdHJhY3RUYWJWaWV3Q29tcG9uZW50LCBMb2dnZXJTZXJ2aWNlLCBWaWV3U2VydmljZX0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcblxuLyoqXG4gKiBDb21wb25lbnQgdGhhdCByZW5kZXJzIGEgdGFiIHZpZXcuXG4gKlxuICogU2VlIHtAbGluayBUYWJWaWV3fSBmb3IgdGhlIGNsYXNzIHRoYXQgaG9sZHMgdGhlIGxvZ2ljIGZvciB0aGlzIHZpZXcuXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtdGFiLXZpZXcnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWItdmlldy5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdGFiLXZpZXcuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJWaWV3Q29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RUYWJWaWV3Q29tcG9uZW50IHtcblxuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBfdmlld1NlcnZpY2U6IFZpZXdTZXJ2aWNlLCBwcm90ZWN0ZWQgX2xvZ2dlcjogTG9nZ2VyU2VydmljZSwgaW5qZWN0b3I6IEluamVjdG9yKSB7XG4gICAgICAgIHN1cGVyKF92aWV3U2VydmljZSwgX2xvZ2dlciwgaW5qZWN0b3IpO1xuICAgIH1cbn1cbiIsIjxtYXQtdGFiLWdyb3VwIFtzZWxlY3RlZEluZGV4XT1cInRhYlZpZXcuc2VsZWN0ZWRJbmRleC52YWx1ZVwiXG4gICAgICAgICAgICAgICBbY2xhc3MuY2VudGVyLXRhYnNdPVwiYWxpZ24gPT09ICdjZW50ZXInXCJcbiAgICAgICAgICAgICAgIFtjbGFzcy5lbmQtdGFic109XCJhbGlnbiA9PT0gJ2VuZCdcIlxuICAgICAgICAgICAgICAgbWF0LXN0cmV0Y2gtdGFicz1cImZhbHNlXCJcbiAgICAgICAgICAgICAgIChzZWxlY3RlZFRhYkNoYW5nZSk9XCJ0YWJWaWV3LnRhYkNoYW5nZSgkZXZlbnQpXCIgY2xhc3M9XCJ0YWItZ3JvdXBcIlxuICAgICAgICAgICAgICAgW2NsYXNzLm5hZS10YWItZmlsbC1oZWlnaHRdPVwic3RyZXRjaFwiIGZ4RmxleD5cbiAgICA8bWF0LXRhYiAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYlZpZXcub3BlbmVkVGFiczsgbGV0IGk9aW5kZXhcIiBbbmdDbGFzc109XCJ7J2xhYmVsLW9wYWNpdHknOiBpID09PSB0YWJWaWV3LnNlbGVjdGVkSW5kZXgudmFsdWV9XCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBtYXQtdGFiLWxhYmVsPlxuICAgICAgICAgICAgPGRpdiBmeExheW91dD1cInJvd1wiIGZ4TGF5b3V0QWxpZ249XCJzdGFydCBjZW50ZXJcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGZ4RmxleCBmeExheW91dD1cInJvd1wiIGZ4TGF5b3V0QWxpZ249XCJzdGFydCBjZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwiaWNvbi1tYXJnaW4tcmlnaHRcIiBbbmdDbGFzc109XCJ7J2ljb24tdGFiLWNvbG9yJzogaSA9PT0gdGFiVmlldy5zZWxlY3RlZEluZGV4LnZhbHVlfVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cInRhYi5nZXRJY29uKCkgIT09IHVuZGVmaW5lZFwiPnt7dGFiLmdldEljb24kKCl8YXN5bmN9fTwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3VzdG9tLWJhZGdlXCIgW21hdEJhZGdlXT1cIihiYWRnZUNvdW50KHRhYikgfCBhc3luYylcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbbWF0QmFkZ2VIaWRkZW5dPVwiKGJhZGdlSGlkZGVuKHRhYikgfCBhc3luYylcIj57eygodGFiLmdldFRleHQkKCkgfCBhc3luYykgfCB0cmFuc2xhdGUpICsgKChiYWRnZUhpZGRlbih0YWIpIHwgYXN5bmMpID8gJycgOiBvZmZzZXQpfX08L3NwYW4+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gKm5nSWY9XCJ0YWIuY2FuQmVDbG9zZWRcIiAoY2xpY2spPVwidGFiVmlldy5jbG9zZVRhYkluZGV4KGkpXCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbiBbbmdDbGFzc109XCJ7J2ljb24tdGFiLWNvbG9yJzogaSA9PT0gdGFiVmlldy5zZWxlY3RlZEluZGV4LnZhbHVlfVwiPmNsZWFyPC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICA8IS0tICAgICAgICBUT0RPIDE2LjQuMjAyMCAtIGxhenkgbG9hZGluZyBvZiB0YWIgY29udGVudHMgaXMgZGlzYWJsZWQgZm9yIG5vdyAtLT5cbiAgICAgICAgPCEtLSAgICAgICAgPG5nLXRlbXBsYXRlIG1hdFRhYkNvbnRlbnQ+LS0+XG4gICAgICAgIDxuYy10YWItY3JlYXRpb24tZGV0ZWN0b3IgW2luaXRpYWxpemVUYWJGdW5jdGlvbl09XCJpbml0aWFsaXplVGFiTGFtYmRhXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbdGFiSW5kZXhdPVwiaVwiPjwvbmMtdGFiLWNyZWF0aW9uLWRldGVjdG9yPlxuICAgICAgICA8bmctdGVtcGxhdGUgW25nSWZdPVwidGFiLmlzVGFiSW5pdGlhbGl6ZWRcIiBjbGFzcz1cImZ1bGwtaGVpZ2h0XCI+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgW2Nka1BvcnRhbE91dGxldF09XCJ0YWIucG9ydGFsXCIgY2xhc3M9XCJmdWxsLWhlaWdodFwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9tYXQtdGFiPlxuPC9tYXQtdGFiLWdyb3VwPlxuIl19