ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
66 lines • 20.6 kB
JavaScript
import { Component, ContentChildren, Input, ViewChild } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { slideInAnimation } from '../../core/animations/slide-in';
import { TabLinkDirective } from './tab-link.directive';
import { TabsGroupComponent } from '../tabs-group/tabs-group.component';
import * as i0 from "@angular/core";
import * as i1 from "../../core/theme/theme.service";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "../../buttons/icon/icon.component";
export class NavTabsComponent extends TabsGroupComponent {
constructor(themeService, cdRef, router) {
super(themeService, cdRef);
this.themeService = themeService;
this.cdRef = cdRef;
this.router = router;
this.tabGroup = [];
this.minHeight = 0;
}
setSubscriptions() {
super.setSubscriptions();
const subRouter = this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe(() => {
this.selectTab();
});
this.subscription.add(subRouter);
}
getRouteAnimation(outlet) {
return outlet.activatedRouteData.index === undefined ? -1 : outlet.activatedRouteData.index;
}
ngAfterContentInit() {
this.tabGroup = [];
this.tabs.forEach(tabInstance => this.tabGroup.push(tabInstance));
this.selectTab();
}
}
NavTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NavTabsComponent, deps: [{ token: i1.ThemeService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
NavTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: NavTabsComponent, selector: "sdk-nav-tab-group", inputs: { minHeight: "minHeight" }, queries: [{ propertyName: "tabs", predicate: TabLinkDirective }], viewQueries: [{ propertyName: "containerElement", first: true, predicate: ["parent"], descendants: true, static: true }, { propertyName: "tabsWrapperElement", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "arrowLeftElement", first: true, predicate: ["arrowLeft"], descendants: true, static: true }, { propertyName: "arrowRightElement", first: true, predicate: ["arrowRight"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sdk-tab-container\" #parent>\n <div class=\"sdk-tab-container__header\">\n <button class=\"sdk-tab-container__arrow sdk-tab-container__arrow--left\" #arrowLeft\n [disabled]=\"tabsScrollRect?.left + 1 >= containerRect?.left - arrowWidth\"\n [ngStyle]=\"{'width': arrowWidth + 'px', 'display': isArrows ? 'flex' : 'none'}\">\n <sdk-icon [icon]=\"'chevron_left'\"></sdk-icon>\n </button>\n\n <div class=\"sdk-tab-container__tabs-wrapper\">\n <div class=\"sdk-tab-container__tabs-scroll\" #tabs>\n <ng-container *ngFor=\"let tab of tabGroup\">\n <a class=\"sdk-tab-container__tab\"\n [attr.disabled]=\"tab.disabled || null\"\n [class.sdk-tab-container__tab--fill]=\"activeTabStyle === 'fill'\"\n [routerLink]=\"tab.routerLink\"\n routerLinkActive=\"sdk-tab-container__tab--active\">\n <span>{{tab.label}}</span>\n <div class=\"sdk-tab__background\"></div>\n </a>\n </ng-container>\n <div class=\"slide\" *ngIf=\"activeTabStyle === 'border'\" [ngStyle]=\"slideMeasure\"></div>\n </div>\n\n </div>\n\n <button class=\"sdk-tab-container__arrow sdk-tab-container__arrow--right\" #arrowRight\n [disabled]=\"tabsScrollRect?.right - 3 <= containerRect?.right - arrowWidth\"\n [ngStyle]=\"{'width': arrowWidth + 'px', 'display': isArrows ? 'flex' : 'none'}\">\n <sdk-icon [icon]=\"'chevron_right'\"></sdk-icon>\n </button>\n </div>\n\n <section class=\"sdk-nav-tab__content\" [style.minHeight.px]=\"minHeight\" [@routeAnimations]=\"animation && getRouteAnimation(router)\">\n <router-outlet #router=\"outlet\"></router-outlet>\n </section>\n</div>\n", styles: [".sdk-tab-container{min-width:320px;width:100%;max-width:100%}.sdk-tab-container__header{height:48px;display:flex;position:relative}.sdk-tab-container__header:after{content:\"\";border-bottom:2px solid var(--regular);width:100%;position:absolute;height:2px;bottom:0;z-index:-1}.sdk-tab-container__tab{transition:.4s}.sdk-tab-container__tab:hover{color:var(--base-a100)}.sdk-tab-container__tabs-wrapper{display:flex;position:relative;overflow:hidden;width:100%}.sdk-tab-container__tabs-scroll{left:0;position:absolute;display:flex;width:max-content;transition:all .4s}.sdk-tab-container__tab{padding:0 24px;height:48px;color:var(--base-a90);display:flex;white-space:nowrap;cursor:pointer;align-items:center;outline:none;transition:all .3s;position:relative}.sdk-tab-container__tab span{overflow:hidden;text-overflow:ellipsis}.sdk-tab-container__tab.sdk-tab-container__tab--active{color:var(--primary);opacity:1}.sdk-tab-container__tab.sdk-tab-container__tab--oversize{overflow:hidden}.slide{position:absolute;height:3px;left:0;background-color:var(--primary);bottom:0;transition:all .4s}.sdk-tab-container__content{padding:24px;position:relative}.sdk-tab-container__tab--fill .sdk-tab__background{position:absolute;z-index:-1;left:0;top:0;height:100%;width:0;background-color:var(--primary)}.sdk-tab-container__tab--active.sdk-tab-container__tab--fill{color:#fff}.sdk-tab-container__tab--active.sdk-tab-container__tab--fill .sdk-tab__background{animation:sdk-painting .3s;width:100%}.sdk-tab-container__arrow{display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}.sdk-tab-container__arrow--right{box-shadow:-2px 0 6px 1px var(--base-a10)}.sdk-tab-container__arrow--left{box-shadow:2px 0 6px 1px var(--base-a10)}.sdk-tab-container__arrow--disabled{opacity:.4}.sdk-tab-container__tab-icon{height:24px;width:24px;position:relative;left:-8px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.IconComponent, selector: "sdk-icon", inputs: ["icon", "image", "inline", "size", "color"] }], animations: [
slideInAnimation
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NavTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-nav-tab-group', animations: [
slideInAnimation
], template: "<div class=\"sdk-tab-container\" #parent>\n <div class=\"sdk-tab-container__header\">\n <button class=\"sdk-tab-container__arrow sdk-tab-container__arrow--left\" #arrowLeft\n [disabled]=\"tabsScrollRect?.left + 1 >= containerRect?.left - arrowWidth\"\n [ngStyle]=\"{'width': arrowWidth + 'px', 'display': isArrows ? 'flex' : 'none'}\">\n <sdk-icon [icon]=\"'chevron_left'\"></sdk-icon>\n </button>\n\n <div class=\"sdk-tab-container__tabs-wrapper\">\n <div class=\"sdk-tab-container__tabs-scroll\" #tabs>\n <ng-container *ngFor=\"let tab of tabGroup\">\n <a class=\"sdk-tab-container__tab\"\n [attr.disabled]=\"tab.disabled || null\"\n [class.sdk-tab-container__tab--fill]=\"activeTabStyle === 'fill'\"\n [routerLink]=\"tab.routerLink\"\n routerLinkActive=\"sdk-tab-container__tab--active\">\n <span>{{tab.label}}</span>\n <div class=\"sdk-tab__background\"></div>\n </a>\n </ng-container>\n <div class=\"slide\" *ngIf=\"activeTabStyle === 'border'\" [ngStyle]=\"slideMeasure\"></div>\n </div>\n\n </div>\n\n <button class=\"sdk-tab-container__arrow sdk-tab-container__arrow--right\" #arrowRight\n [disabled]=\"tabsScrollRect?.right - 3 <= containerRect?.right - arrowWidth\"\n [ngStyle]=\"{'width': arrowWidth + 'px', 'display': isArrows ? 'flex' : 'none'}\">\n <sdk-icon [icon]=\"'chevron_right'\"></sdk-icon>\n </button>\n </div>\n\n <section class=\"sdk-nav-tab__content\" [style.minHeight.px]=\"minHeight\" [@routeAnimations]=\"animation && getRouteAnimation(router)\">\n <router-outlet #router=\"outlet\"></router-outlet>\n </section>\n</div>\n", styles: [".sdk-tab-container{min-width:320px;width:100%;max-width:100%}.sdk-tab-container__header{height:48px;display:flex;position:relative}.sdk-tab-container__header:after{content:\"\";border-bottom:2px solid var(--regular);width:100%;position:absolute;height:2px;bottom:0;z-index:-1}.sdk-tab-container__tab{transition:.4s}.sdk-tab-container__tab:hover{color:var(--base-a100)}.sdk-tab-container__tabs-wrapper{display:flex;position:relative;overflow:hidden;width:100%}.sdk-tab-container__tabs-scroll{left:0;position:absolute;display:flex;width:max-content;transition:all .4s}.sdk-tab-container__tab{padding:0 24px;height:48px;color:var(--base-a90);display:flex;white-space:nowrap;cursor:pointer;align-items:center;outline:none;transition:all .3s;position:relative}.sdk-tab-container__tab span{overflow:hidden;text-overflow:ellipsis}.sdk-tab-container__tab.sdk-tab-container__tab--active{color:var(--primary);opacity:1}.sdk-tab-container__tab.sdk-tab-container__tab--oversize{overflow:hidden}.slide{position:absolute;height:3px;left:0;background-color:var(--primary);bottom:0;transition:all .4s}.sdk-tab-container__content{padding:24px;position:relative}.sdk-tab-container__tab--fill .sdk-tab__background{position:absolute;z-index:-1;left:0;top:0;height:100%;width:0;background-color:var(--primary)}.sdk-tab-container__tab--active.sdk-tab-container__tab--fill{color:#fff}.sdk-tab-container__tab--active.sdk-tab-container__tab--fill .sdk-tab__background{animation:sdk-painting .3s;width:100%}.sdk-tab-container__arrow{display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}.sdk-tab-container__arrow--right{box-shadow:-2px 0 6px 1px var(--base-a10)}.sdk-tab-container__arrow--left{box-shadow:2px 0 6px 1px var(--base-a10)}.sdk-tab-container__arrow--disabled{opacity:.4}.sdk-tab-container__tab-icon{height:24px;width:24px;position:relative;left:-8px}\n"] }]
}], ctorParameters: function () { return [{ type: i1.ThemeService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }]; }, propDecorators: { tabs: [{
type: ContentChildren,
args: [TabLinkDirective]
}], containerElement: [{
type: ViewChild,
args: ['parent', { static: true }]
}], tabsWrapperElement: [{
type: ViewChild,
args: ['tabs', { static: true }]
}], arrowLeftElement: [{
type: ViewChild,
args: ['arrowLeft', { static: true }]
}], arrowRightElement: [{
type: ViewChild,
args: ['arrowRight', { static: true }]
}], minHeight: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2LXRhYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9uZ3gtc2xpY2Uta2l0L3NyYy9saWIvbmF2aWdhdGlvbi9uYXYtdGFicy9uYXYtdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL25neC1zbGljZS1raXQvc3JjL2xpYi9uYXZpZ2F0aW9uL25hdi10YWJzL25hdi10YWJzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFHSCxTQUFTLEVBQ1QsZUFBZSxFQUFFLEtBQUssRUFFdEIsU0FBUyxFQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQXdCLE1BQU0saUJBQWlCLENBQUM7QUFDdEUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXhDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7Ozs7QUFXeEUsTUFBTSxPQUFPLGdCQUFpQixTQUFRLGtCQUFrQjtJQVlwRCxZQUNXLFlBQTBCLEVBQ3ZCLEtBQXdCLEVBQzFCLE1BQWM7UUFFdEIsS0FBSyxDQUFDLFlBQVksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUpwQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUN2QixVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUMxQixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBWm5CLGFBQVEsR0FBdUIsRUFBRSxDQUFDO1FBT3pCLGNBQVMsR0FBVyxDQUFDLENBQUM7SUFRdEMsQ0FBQztJQUVNLGdCQUFnQjtRQUNuQixLQUFLLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztRQUN6QixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU07YUFDL0IsSUFBSSxDQUNELE1BQU0sQ0FBQyxDQUFDLEtBQW9CLEVBQUUsRUFBRSxDQUFDLEtBQUssWUFBWSxhQUFhLENBQUMsQ0FDbkU7YUFDQSxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ1osSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO1FBRVAsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVNLGlCQUFpQixDQUFDLE1BQW9CO1FBQ3pDLE9BQU8sTUFBTSxDQUFDLGtCQUFrQixDQUFDLEtBQUssS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsa0JBQWtCLENBQUMsS0FBSyxDQUFDO0lBQ2hHLENBQUM7SUFFTSxrQkFBa0I7UUFDckIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs2R0F6Q1EsZ0JBQWdCO2lHQUFoQixnQkFBZ0Isa0hBRVIsZ0JBQWdCLHVmQzFCckMsODREQW9DQSxvN0ZEakJnQjtRQUNSLGdCQUFnQjtLQUNuQjsyRkFHUSxnQkFBZ0I7a0JBVDVCLFNBQVM7K0JBQ0ksbUJBQW1CLGNBR2pCO3dCQUNSLGdCQUFnQjtxQkFDbkI7d0pBSzBDLElBQUk7c0JBQTlDLGVBQWU7dUJBQUMsZ0JBQWdCO2dCQUdXLGdCQUFnQjtzQkFBM0QsU0FBUzt1QkFBQyxRQUFRLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUNPLGtCQUFrQjtzQkFBM0QsU0FBUzt1QkFBQyxNQUFNLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUNjLGdCQUFnQjtzQkFBOUQsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUNVLGlCQUFpQjtzQkFBaEUsU0FBUzt1QkFBQyxZQUFZLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUV2QixTQUFTO3NCQUF4QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBBZnRlckNvbnRlbnRJbml0LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBDb250ZW50Q2hpbGRyZW4sIElucHV0LFxuICAgIFF1ZXJ5TGlzdCxcbiAgICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOYXZpZ2F0aW9uRW5kLCBSb3V0ZXIsIFJvdXRlck91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBUaGVtZVNlcnZpY2UgfSBmcm9tICcuLi8uLi9jb3JlL3RoZW1lL3RoZW1lLnNlcnZpY2UnO1xuaW1wb3J0IHsgc2xpZGVJbkFuaW1hdGlvbiB9IGZyb20gJy4uLy4uL2NvcmUvYW5pbWF0aW9ucy9zbGlkZS1pbic7XG5pbXBvcnQgeyBUYWJMaW5rRGlyZWN0aXZlIH0gZnJvbSAnLi90YWItbGluay5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgVGFic0dyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vdGFicy1ncm91cC90YWJzLWdyb3VwLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RrLW5hdi10YWItZ3JvdXAnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9uYXYtdGFicy5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbmF2LXRhYnMuY29tcG9uZW50LnNjc3MnXSxcbiAgICBhbmltYXRpb25zOiBbXG4gICAgICAgIHNsaWRlSW5BbmltYXRpb25cbiAgICBdXG59KVxuXG5leHBvcnQgY2xhc3MgTmF2VGFic0NvbXBvbmVudCBleHRlbmRzIFRhYnNHcm91cENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG4gICAgQENvbnRlbnRDaGlsZHJlbihUYWJMaW5rRGlyZWN0aXZlKSBwdWJsaWMgIHRhYnMhOiBRdWVyeUxpc3Q8VGFiTGlua0RpcmVjdGl2ZT47XG4gICAgcHVibGljIHRhYkdyb3VwOiBUYWJMaW5rRGlyZWN0aXZlW10gPSBbXTtcblxuICAgIEBWaWV3Q2hpbGQoJ3BhcmVudCcsIHtzdGF0aWM6IHRydWV9KSBwdWJsaWMgY29udGFpbmVyRWxlbWVudDtcbiAgICBAVmlld0NoaWxkKCd0YWJzJywge3N0YXRpYzogdHJ1ZX0pIHB1YmxpYyB0YWJzV3JhcHBlckVsZW1lbnQ7XG4gICAgQFZpZXdDaGlsZCgnYXJyb3dMZWZ0Jywge3N0YXRpYzogdHJ1ZX0pIHB1YmxpYyBhcnJvd0xlZnRFbGVtZW50O1xuICAgIEBWaWV3Q2hpbGQoJ2Fycm93UmlnaHQnLCB7c3RhdGljOiB0cnVlfSkgcHVibGljIGFycm93UmlnaHRFbGVtZW50O1xuXG4gICAgQElucHV0KCkgcHVibGljIG1pbkhlaWdodDogbnVtYmVyID0gMDtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwdWJsaWMgdGhlbWVTZXJ2aWNlOiBUaGVtZVNlcnZpY2UsXG4gICAgICAgIHByb3RlY3RlZCBjZFJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgICAgIHByaXZhdGUgcm91dGVyOiBSb3V0ZXIsXG4gICAgKSB7XG4gICAgICAgIHN1cGVyKHRoZW1lU2VydmljZSwgY2RSZWYpO1xuICAgIH1cblxuICAgIHB1YmxpYyBzZXRTdWJzY3JpcHRpb25zKCk6IHZvaWQge1xuICAgICAgICBzdXBlci5zZXRTdWJzY3JpcHRpb25zKCk7XG4gICAgICAgIGNvbnN0IHN1YlJvdXRlciA9IHRoaXMucm91dGVyLmV2ZW50c1xuICAgICAgICAgICAgLnBpcGUoXG4gICAgICAgICAgICAgICAgZmlsdGVyKChldmVudDogTmF2aWdhdGlvbkVuZCkgPT4gZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKVxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5zZWxlY3RUYWIoKTtcbiAgICAgICAgICAgIH0pO1xuXG4gICAgICAgIHRoaXMuc3Vic2NyaXB0aW9uLmFkZChzdWJSb3V0ZXIpO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXRSb3V0ZUFuaW1hdGlvbihvdXRsZXQ6IFJvdXRlck91dGxldCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiBvdXRsZXQuYWN0aXZhdGVkUm91dGVEYXRhLmluZGV4ID09PSB1bmRlZmluZWQgPyAtMSA6IG91dGxldC5hY3RpdmF0ZWRSb3V0ZURhdGEuaW5kZXg7XG4gICAgfVxuXG4gICAgcHVibGljIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50YWJHcm91cCA9IFtdO1xuICAgICAgICB0aGlzLnRhYnMuZm9yRWFjaCh0YWJJbnN0YW5jZSA9PiB0aGlzLnRhYkdyb3VwLnB1c2godGFiSW5zdGFuY2UpKTtcbiAgICAgICAgdGhpcy5zZWxlY3RUYWIoKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2RrLXRhYi1jb250YWluZXJcIiAjcGFyZW50PlxuICAgIDxkaXYgY2xhc3M9XCJzZGstdGFiLWNvbnRhaW5lcl9faGVhZGVyXCI+XG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJzZGstdGFiLWNvbnRhaW5lcl9fYXJyb3cgc2RrLXRhYi1jb250YWluZXJfX2Fycm93LS1sZWZ0XCIgI2Fycm93TGVmdFxuICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCJ0YWJzU2Nyb2xsUmVjdD8ubGVmdCArIDEgPj0gY29udGFpbmVyUmVjdD8ubGVmdCAtIGFycm93V2lkdGhcIlxuICAgICAgICAgICAgICAgIFtuZ1N0eWxlXT1cInsnd2lkdGgnOiBhcnJvd1dpZHRoICsgJ3B4JywgJ2Rpc3BsYXknOiBpc0Fycm93cyA/ICdmbGV4JyA6ICdub25lJ31cIj5cbiAgICAgICAgICAgIDxzZGstaWNvbiBbaWNvbl09XCInY2hldnJvbl9sZWZ0J1wiPjwvc2RrLWljb24+XG4gICAgICAgIDwvYnV0dG9uPlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzZGstdGFiLWNvbnRhaW5lcl9fdGFicy13cmFwcGVyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2RrLXRhYi1jb250YWluZXJfX3RhYnMtc2Nyb2xsXCIgI3RhYnM+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYkdyb3VwXCI+XG4gICAgICAgICAgICAgICAgICAgIDxhIGNsYXNzPVwic2RrLXRhYi1jb250YWluZXJfX3RhYlwiXG4gICAgICAgICAgICAgICAgICAgICAgIFthdHRyLmRpc2FibGVkXT1cInRhYi5kaXNhYmxlZCB8fCBudWxsXCJcbiAgICAgICAgICAgICAgICAgICAgICAgW2NsYXNzLnNkay10YWItY29udGFpbmVyX190YWItLWZpbGxdPVwiYWN0aXZlVGFiU3R5bGUgPT09ICdmaWxsJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgIFtyb3V0ZXJMaW5rXT1cInRhYi5yb3V0ZXJMaW5rXCJcbiAgICAgICAgICAgICAgICAgICAgICAgcm91dGVyTGlua0FjdGl2ZT1cInNkay10YWItY29udGFpbmVyX190YWItLWFjdGl2ZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4+e3t0YWIubGFiZWx9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZGstdGFiX19iYWNrZ3JvdW5kXCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvYT5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xpZGVcIiAqbmdJZj1cImFjdGl2ZVRhYlN0eWxlID09PSAnYm9yZGVyJ1wiIFtuZ1N0eWxlXT1cInNsaWRlTWVhc3VyZVwiPjwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInNkay10YWItY29udGFpbmVyX19hcnJvdyBzZGstdGFiLWNvbnRhaW5lcl9fYXJyb3ctLXJpZ2h0XCIgI2Fycm93UmlnaHRcbiAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwidGFic1Njcm9sbFJlY3Q/LnJpZ2h0IC0gMyA8PSBjb250YWluZXJSZWN0Py5yaWdodCAtIGFycm93V2lkdGhcIlxuICAgICAgICAgICAgICAgIFtuZ1N0eWxlXT1cInsnd2lkdGgnOiBhcnJvd1dpZHRoICsgJ3B4JywgJ2Rpc3BsYXknOiBpc0Fycm93cyA/ICdmbGV4JyA6ICdub25lJ31cIj5cbiAgICAgICAgICAgIDxzZGstaWNvbiBbaWNvbl09XCInY2hldnJvbl9yaWdodCdcIj48L3Nkay1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwic2RrLW5hdi10YWJfX2NvbnRlbnRcIiBbc3R5bGUubWluSGVpZ2h0LnB4XT1cIm1pbkhlaWdodFwiIFtAcm91dGVBbmltYXRpb25zXT1cImFuaW1hdGlvbiAmJiBnZXRSb3V0ZUFuaW1hdGlvbihyb3V0ZXIpXCI+XG4gICAgICAgIDxyb3V0ZXItb3V0bGV0ICNyb3V0ZXI9XCJvdXRsZXRcIj48L3JvdXRlci1vdXRsZXQ+XG4gICAgPC9zZWN0aW9uPlxuPC9kaXY+XG4iXX0=