@wizco/fenixds-ngx
Version:
Componentes fenix design system para Angular.
109 lines • 17.2 kB
JavaScript
import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation, } from '@angular/core';
import * as i0 from "@angular/core";
export class SubTabsComponent {
el;
selectedIndex = 0;
tabChange = new EventEmitter();
indicator;
resizeObserver;
constructor(el) {
this.el = el;
}
ngAfterContentInit() {
this.indicator = document.createElement('div');
this.indicator.className = 'wco-sub-tabs__indicator';
this.el.nativeElement.prepend(this.indicator);
setTimeout(() => {
this.reserveBoldWidth();
this.indicator.style.transition = 'none';
this.applySelection(this.selectedIndex, false);
requestAnimationFrame(() => requestAnimationFrame(() => {
this.indicator.style.transition = '';
}));
}, 0);
this.resizeObserver = new ResizeObserver(() => {
this.refreshIndicator();
});
this.resizeObserver.observe(this.el.nativeElement);
}
ngOnChanges(changes) {
if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
this.applySelection(this.selectedIndex, false);
}
}
onClick(event) {
const items = this.getItems();
const target = event.target;
for (let i = 0; i < items.length; i++) {
if (items[i] === target || items[i].contains(target)) {
this.applySelection(i, true);
break;
}
}
}
getItems() {
return Array.from(this.el.nativeElement.children).filter((c) => !c.classList.contains('wco-sub-tabs__indicator'));
}
reserveBoldWidth() {
const items = this.getItems();
const host = this.el.nativeElement;
items.forEach((item) => {
const clone = item.cloneNode(true);
clone.style.cssText = `
font-weight: 600;
visibility: hidden;
position: absolute;
pointer-events: none;
white-space: nowrap;
`;
host.appendChild(clone);
const boldWidth = clone.offsetWidth;
host.removeChild(clone);
item.style.minWidth = boldWidth + 'px';
});
}
applySelection(index, emit) {
const items = this.getItems();
if (!items.length)
return;
const clamped = Math.max(0, Math.min(index, items.length - 1));
this.selectedIndex = clamped;
items.forEach((item, i) => {
item.classList.toggle('wco-subtab-selected', i === clamped);
});
this.moveIndicator(items[clamped]);
if (emit) {
this.tabChange.emit(clamped);
}
}
refreshIndicator() {
const items = this.getItems();
const selected = items[this.selectedIndex];
if (selected) {
this.moveIndicator(selected);
}
}
moveIndicator(element) {
if (!this.indicator)
return;
this.el.nativeElement.style.setProperty('--subtab-left', element.offsetLeft + 'px');
this.el.nativeElement.style.setProperty('--subtab-width', element.offsetWidth + 'px');
}
ngOnDestroy() {
this.resizeObserver?.disconnect();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubTabsComponent, isStandalone: true, selector: "wco-sub-tabs", inputs: { selectedIndex: "selectedIndex" }, outputs: { tabChange: "tabChange" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:var(--wco-color-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-quark)}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:var(--wco-spacing-quark);bottom:var(--wco-spacing-quark);left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:var(--wco-color-neutral-50);border-radius:var(--wco-radius-md);box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs);background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:var(--wco-font-weight-500);color:var(--wco-color-neutral-700);border-radius:var(--wco-radius-md);white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:var(--wco-borderwidth-thick) solid var(--wco-color-primary-300);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:var(--wco-font-weight-bold)}\n"], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-sub-tabs', standalone: true, imports: [], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:var(--wco-color-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-quark)}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:var(--wco-spacing-quark);bottom:var(--wco-spacing-quark);left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:var(--wco-color-neutral-50);border-radius:var(--wco-radius-md);box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs);background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:var(--wco-font-weight-500);color:var(--wco-color-neutral-700);border-radius:var(--wco-radius-md);white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:var(--wco-borderwidth-thick) solid var(--wco-color-primary-300);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:var(--wco-font-weight-bold)}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedIndex: [{
type: Input
}], tabChange: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ViLXRhYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvbmVudHMvc3JjL2xpYi9zdWItdGFicy9zdWItdGFicy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFFVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBRU4saUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDOztBQVV2QixNQUFNLE9BQU8sZ0JBQWdCO0lBVVA7SUFSYixhQUFhLEdBQUcsQ0FBQyxDQUFDO0lBR2xCLFNBQVMsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBRXRDLFNBQVMsQ0FBZTtJQUN4QixjQUFjLENBQWtCO0lBRXhDLFlBQW9CLEVBQTJCO1FBQTNCLE9BQUUsR0FBRixFQUFFLENBQXlCO0lBQUcsQ0FBQztJQUVuRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxHQUFHLHlCQUF5QixDQUFDO1FBQ3JELElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFOUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUM7WUFDekMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxDQUFDO1lBQy9DLHFCQUFxQixDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDLEdBQUcsRUFBRTtnQkFDckQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztZQUN2QyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ04sQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRU4sSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLGNBQWMsQ0FBQyxHQUFHLEVBQUU7WUFDNUMsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDMUIsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDdEUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ2pELENBQUM7SUFDSCxDQUFDO0lBR0QsT0FBTyxDQUFDLEtBQVk7UUFDbEIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQzlCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUFxQixDQUFDO1FBRTNDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDdEMsSUFBSSxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztnQkFDckQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7Z0JBQzdCLE1BQU07WUFDUixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFTyxRQUFRO1FBQ2QsT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDLE1BQU0sQ0FDdEQsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMseUJBQXlCLENBQUMsQ0FDdkMsQ0FBQztJQUNyQixDQUFDO0lBRU8sZ0JBQWdCO1FBQ3RCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUM5QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQztRQUVuQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDckIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQWdCLENBQUM7WUFDbEQsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUc7Ozs7OztPQU1yQixDQUFDO1lBQ0YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN4QixNQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDO1lBQ3BDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDeEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN6QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTyxjQUFjLENBQUMsS0FBYSxFQUFFLElBQWE7UUFDakQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQzlCLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTTtZQUFFLE9BQU87UUFFMUIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQy9ELElBQUksQ0FBQyxhQUFhLEdBQUcsT0FBTyxDQUFDO1FBRTdCLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxLQUFLLE9BQU8sQ0FBQyxDQUFDO1FBQzlELENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztRQUVuQyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDL0IsQ0FBQztJQUNILENBQUM7SUFFTyxnQkFBZ0I7UUFDdEIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQzlCLE1BQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDM0MsSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNiLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDL0IsQ0FBQztJQUNILENBQUM7SUFFTyxhQUFhLENBQUMsT0FBb0I7UUFDeEMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTO1lBQUUsT0FBTztRQUM1QixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLGVBQWUsRUFBRSxPQUFPLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxDQUFDO1FBQ3BGLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLEVBQUUsT0FBTyxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsQ0FBQztJQUN4RixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxjQUFjLEVBQUUsVUFBVSxFQUFFLENBQUM7SUFDcEMsQ0FBQzt3R0EvR1UsZ0JBQWdCOzRGQUFoQixnQkFBZ0IsbU9BSmpCLDJCQUEyQjs7NEZBSTFCLGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLEVBQUUsWUFDRCwyQkFBMkIsaUJBRXRCLGlCQUFpQixDQUFDLElBQUk7K0VBSTlCLGFBQWE7c0JBRG5CLEtBQUs7Z0JBSUMsU0FBUztzQkFEZixNQUFNO2dCQW1DUCxPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2NvLXN1Yi10YWJzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PmAsXG4gIHN0eWxlVXJsczogWycuL3N1Yi10YWJzLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFN1YlRhYnNDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZWxlY3RlZEluZGV4ID0gMDtcblxuICBAT3V0cHV0KClcbiAgcHVibGljIHRhYkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIHByaXZhdGUgaW5kaWNhdG9yITogSFRNTEVsZW1lbnQ7XG4gIHByaXZhdGUgcmVzaXplT2JzZXJ2ZXI/OiBSZXNpemVPYnNlcnZlcjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge31cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbmRpY2F0b3IgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcbiAgICB0aGlzLmluZGljYXRvci5jbGFzc05hbWUgPSAnd2NvLXN1Yi10YWJzX19pbmRpY2F0b3InO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5wcmVwZW5kKHRoaXMuaW5kaWNhdG9yKTtcblxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5yZXNlcnZlQm9sZFdpZHRoKCk7XG4gICAgICB0aGlzLmluZGljYXRvci5zdHlsZS50cmFuc2l0aW9uID0gJ25vbmUnO1xuICAgICAgdGhpcy5hcHBseVNlbGVjdGlvbih0aGlzLnNlbGVjdGVkSW5kZXgsIGZhbHNlKTtcbiAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCkgPT4ge1xuICAgICAgICB0aGlzLmluZGljYXRvci5zdHlsZS50cmFuc2l0aW9uID0gJyc7XG4gICAgICB9KSk7XG4gICAgfSwgMCk7XG5cbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyKCgpID0+IHtcbiAgICAgIHRoaXMucmVmcmVzaEluZGljYXRvcigpO1xuICAgIH0pO1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydzZWxlY3RlZEluZGV4J10gJiYgIWNoYW5nZXNbJ3NlbGVjdGVkSW5kZXgnXS5maXJzdENoYW5nZSkge1xuICAgICAgdGhpcy5hcHBseVNlbGVjdGlvbih0aGlzLnNlbGVjdGVkSW5kZXgsIGZhbHNlKTtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG4gIG9uQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgaXRlbXMgPSB0aGlzLmdldEl0ZW1zKCk7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBpdGVtcy5sZW5ndGg7IGkrKykge1xuICAgICAgaWYgKGl0ZW1zW2ldID09PSB0YXJnZXQgfHwgaXRlbXNbaV0uY29udGFpbnModGFyZ2V0KSkge1xuICAgICAgICB0aGlzLmFwcGx5U2VsZWN0aW9uKGksIHRydWUpO1xuICAgICAgICBicmVhaztcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGdldEl0ZW1zKCk6IEhUTUxFbGVtZW50W10ge1xuICAgIHJldHVybiBBcnJheS5mcm9tKHRoaXMuZWwubmF0aXZlRWxlbWVudC5jaGlsZHJlbikuZmlsdGVyKFxuICAgICAgKGMpID0+ICFjLmNsYXNzTGlzdC5jb250YWlucygnd2NvLXN1Yi10YWJzX19pbmRpY2F0b3InKVxuICAgICkgYXMgSFRNTEVsZW1lbnRbXTtcbiAgfVxuXG4gIHByaXZhdGUgcmVzZXJ2ZUJvbGRXaWR0aCgpOiB2b2lkIHtcbiAgICBjb25zdCBpdGVtcyA9IHRoaXMuZ2V0SXRlbXMoKTtcbiAgICBjb25zdCBob3N0ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50O1xuXG4gICAgaXRlbXMuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgICAgY29uc3QgY2xvbmUgPSBpdGVtLmNsb25lTm9kZSh0cnVlKSBhcyBIVE1MRWxlbWVudDtcbiAgICAgIGNsb25lLnN0eWxlLmNzc1RleHQgPSBgXG4gICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7XG4gICAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgIGA7XG4gICAgICBob3N0LmFwcGVuZENoaWxkKGNsb25lKTtcbiAgICAgIGNvbnN0IGJvbGRXaWR0aCA9IGNsb25lLm9mZnNldFdpZHRoO1xuICAgICAgaG9zdC5yZW1vdmVDaGlsZChjbG9uZSk7XG4gICAgICBpdGVtLnN0eWxlLm1pbldpZHRoID0gYm9sZFdpZHRoICsgJ3B4JztcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgYXBwbHlTZWxlY3Rpb24oaW5kZXg6IG51bWJlciwgZW1pdDogYm9vbGVhbik6IHZvaWQge1xuICAgIGNvbnN0IGl0ZW1zID0gdGhpcy5nZXRJdGVtcygpO1xuICAgIGlmICghaXRlbXMubGVuZ3RoKSByZXR1cm47XG5cbiAgICBjb25zdCBjbGFtcGVkID0gTWF0aC5tYXgoMCwgTWF0aC5taW4oaW5kZXgsIGl0ZW1zLmxlbmd0aCAtIDEpKTtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBjbGFtcGVkO1xuXG4gICAgaXRlbXMuZm9yRWFjaCgoaXRlbSwgaSkgPT4ge1xuICAgICAgaXRlbS5jbGFzc0xpc3QudG9nZ2xlKCd3Y28tc3VidGFiLXNlbGVjdGVkJywgaSA9PT0gY2xhbXBlZCk7XG4gICAgfSk7XG5cbiAgICB0aGlzLm1vdmVJbmRpY2F0b3IoaXRlbXNbY2xhbXBlZF0pO1xuXG4gICAgaWYgKGVtaXQpIHtcbiAgICAgIHRoaXMudGFiQ2hhbmdlLmVtaXQoY2xhbXBlZCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSByZWZyZXNoSW5kaWNhdG9yKCk6IHZvaWQge1xuICAgIGNvbnN0IGl0ZW1zID0gdGhpcy5nZXRJdGVtcygpO1xuICAgIGNvbnN0IHNlbGVjdGVkID0gaXRlbXNbdGhpcy5zZWxlY3RlZEluZGV4XTtcbiAgICBpZiAoc2VsZWN0ZWQpIHtcbiAgICAgIHRoaXMubW92ZUluZGljYXRvcihzZWxlY3RlZCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBtb3ZlSW5kaWNhdG9yKGVsZW1lbnQ6IEhUTUxFbGVtZW50KTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmluZGljYXRvcikgcmV0dXJuO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1zdWJ0YWItbGVmdCcsIGVsZW1lbnQub2Zmc2V0TGVmdCArICdweCcpO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1zdWJ0YWItd2lkdGgnLCBlbGVtZW50Lm9mZnNldFdpZHRoICsgJ3B4Jyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyPy5kaXNjb25uZWN0KCk7XG4gIH1cbn1cbiJdfQ==