@dotglitch/ngx-common
Version:
Angular components and utilities that are commonly used.
135 lines • 23.6 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
export class ParallaxCardComponent {
get wrapper() { return this.element.nativeElement; }
get cardFront() { return this.wrapper.querySelector('.card.front'); }
get cardBack() { return this.wrapper.querySelector('.card.backface'); }
get backgroundElement() { return this.cardFront.querySelector('.card-bg'); }
get backfaceBackgroundElement() { return this.cardBack.querySelector('.card-bg'); }
constructor(element) {
this.element = element;
/**
*
*/
this.loaded = new EventEmitter();
/**
* Width of the card
* @default `240px`
*/
this.width = '240px';
/**
* Height of the card
* @default `320px`
*/
this.height = '320px';
/**
* Inset padding of the parallax
* @default 80
*/
this.bgInset = 80;
/**
* Duration for the flip animation in ms
* @default 80
*/
this.flipAnimationDuration = 1600;
this.renderCardFront = true;
this.renderCardBack = true;
this.showBackOfCard = false;
this.pointerX = 0;
this.pointerY = 0;
this.pointerLeave = 0;
this.render = () => {
const { width, height } = this.wrapper.getBoundingClientRect();
const mousePX = this.pointerX / width;
const mousePY = this.pointerY / height;
// Rotation factors
const rX = mousePX * this.bgInset / 1.75;
const rY = mousePY * -this.bgInset / 1.75;
// Translation factors
const tX = mousePX * -this.bgInset * 2;
const tY = mousePY * -this.bgInset * 2;
if (this.renderCardFront) {
this.backgroundElement.style.transform = `translateX(${tX}px) translateY(${tY}px)`;
}
if (this.renderCardBack) {
this.backfaceBackgroundElement.style.transform = `translateX(${tX}px) translateY(${tY}px)`;
}
if (this.showBackOfCard) {
this.cardFront.style.transform = `rotateY(180deg) rotateX(${-rY}deg)`;
this.cardBack.style.transform = `rotateY(${-rX}deg) rotateX(${-rY}deg)`;
}
else {
this.cardFront.style.transform = `rotateY(${rX}deg) rotateX(${rY}deg)`;
this.cardBack.style.transform = `rotateY(180deg) rotateX(${-rY}deg)`;
}
};
}
ngAfterViewInit() {
const el = this.wrapper;
// Directly attach events to the wrapper
el.onpointermove = (e) => this.onPointerMove(e);
el.onpointerenter = () => this.onPointerEnter();
el.onpointerleave = () => this.onPointerLeave();
el.onclick = () => this.onClick();
this.loaded.emit();
}
onPointerMove(e) {
const { width, height, left, top } = this.wrapper.getBoundingClientRect();
this.pointerX = e.pageX - left - (width / 2);
this.pointerY = e.pageY - top - (height / 2);
this.render();
}
onPointerEnter() {
clearTimeout(this.pointerLeave);
}
onPointerLeave() {
this.pointerLeave = setTimeout(() => {
this.pointerX = 0;
this.pointerY = 0;
this.render();
}, 600);
}
// TODO: This can get intercepted in some states
onClick() {
this.showBackOfCard = !this.showBackOfCard;
this.render();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ParallaxCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ParallaxCardComponent, isStandalone: true, selector: "ngx-parallax-card", inputs: { width: "width", height: "height", bgInset: "bgInset", flipAnimationDuration: "flipAnimationDuration" }, outputs: { loaded: "loaded" }, host: { properties: { "style.width": "width", "style.height": "height", "style.--card-bg-inset": "-bgInset+\"px\"", "style.--flip-animation-duration": "flipAnimationDuration+\"ms\"", "class.flip": "showBackOfCard" } }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: TemplateRef }, { propertyName: "background", first: true, predicate: ["background"], descendants: true, read: TemplateRef }, { propertyName: "backContent", first: true, predicate: ["backContent"], descendants: true, read: TemplateRef }, { propertyName: "backBackground", first: true, predicate: ["backBackground"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (renderCardBack) {\n <div class=\"card backface\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"backBackground\" />\n </div>\n <div class=\"card-content\">\n <ng-template [ngTemplateOutlet]=\"backContent\" />\n </div>\n </div>\n}\n\n@if (renderCardFront) {\n <div class=\"card front\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"background\" />\n </div>\n <div class=\"card-content\">\n @if (content) {\n <ng-template [ngTemplateOutlet]=\"content\"/>\n }\n @else {\n <ng-content/>\n }\n </div>\n </div>\n}\n\n\n", styles: [":host{display:block;position:relative;cursor:pointer;--easing-function: cubic-bezier(.23, 1, .32, 1);--border-radius: 9px}.card{position:absolute;height:100%;width:100%;background-color:#333;backface-visibility:hidden;overflow:hidden;box-shadow:#0000 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px;border-radius:var(--border-radius);transition:transform var(--flip-animation-duration) var(--easing-function),box-shadow 2s var(--easing-function);transform-style:preserve-3d}.card:hover{box-shadow:#fff6 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card:hover .card-content{border:2px solid #fff}.card-bg{inset:var(--card-bg-inset);position:absolute;pointer-events:none;transition:transform .6s var(--easing-function)}.card-content{position:absolute;top:0;color:#fff;height:100%;width:100%;z-index:1;border:2px solid rgba(255,255,255,0);border-radius:var(--border-radius);transition:transform .6s var(--easing-function),border-color .6s var(--easing-function)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ParallaxCardComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-parallax-card', imports: [
NgTemplateOutlet
], host: {
'[style.width]': 'width',
'[style.height]': 'height',
'[style.--card-bg-inset]': '-bgInset+"px"',
'[style.--flip-animation-duration]': 'flipAnimationDuration+"ms"',
'[class.flip]': 'showBackOfCard'
}, standalone: true, template: "@if (renderCardBack) {\n <div class=\"card backface\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"backBackground\" />\n </div>\n <div class=\"card-content\">\n <ng-template [ngTemplateOutlet]=\"backContent\" />\n </div>\n </div>\n}\n\n@if (renderCardFront) {\n <div class=\"card front\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"background\" />\n </div>\n <div class=\"card-content\">\n @if (content) {\n <ng-template [ngTemplateOutlet]=\"content\"/>\n }\n @else {\n <ng-content/>\n }\n </div>\n </div>\n}\n\n\n", styles: [":host{display:block;position:relative;cursor:pointer;--easing-function: cubic-bezier(.23, 1, .32, 1);--border-radius: 9px}.card{position:absolute;height:100%;width:100%;background-color:#333;backface-visibility:hidden;overflow:hidden;box-shadow:#0000 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px;border-radius:var(--border-radius);transition:transform var(--flip-animation-duration) var(--easing-function),box-shadow 2s var(--easing-function);transform-style:preserve-3d}.card:hover{box-shadow:#fff6 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card:hover .card-content{border:2px solid #fff}.card-bg{inset:var(--card-bg-inset);position:absolute;pointer-events:none;transition:transform .6s var(--easing-function)}.card-content{position:absolute;top:0;color:#fff;height:100%;width:100%;z-index:1;border:2px solid rgba(255,255,255,0);border-radius:var(--border-radius);transition:transform .6s var(--easing-function),border-color .6s var(--easing-function)}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
type: ContentChild,
args: ['content', { read: TemplateRef }]
}], background: [{
type: ContentChild,
args: ['background', { read: TemplateRef }]
}], backContent: [{
type: ContentChild,
args: ['backContent', { read: TemplateRef }]
}], backBackground: [{
type: ContentChild,
args: ['backBackground', { read: TemplateRef }]
}], loaded: [{
type: Output
}], width: [{
type: Input
}], height: [{
type: Input
}], bgInset: [{
type: Input
}], flipAnimationDuration: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFyYWxsYXgtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vc3JjL2NvbXBvbmVudHMvcGFyYWxsYXgtY2FyZC9wYXJhbGxheC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbW1vbi9zcmMvY29tcG9uZW50cy9wYXJhbGxheC1jYXJkL3BhcmFsbGF4LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQXVCOUcsTUFBTSxPQUFPLHFCQUFxQjtJQXdDOUIsSUFBWSxPQUFPLEtBQUssT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQTRCLENBQUMsQ0FBQyxDQUFDO0lBQzNFLElBQVksU0FBUyxLQUFLLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFnQixDQUFDLENBQUMsQ0FBQztJQUM1RixJQUFZLFFBQVEsS0FBSyxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFnQixDQUFDLENBQUMsQ0FBQztJQUM5RixJQUFZLGlCQUFpQixLQUFLLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFtQixDQUFDLENBQUMsQ0FBQztJQUN0RyxJQUFZLHlCQUF5QixLQUFLLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFtQixDQUFDLENBQUMsQ0FBQztJQU03RyxZQUNxQixPQUFtQjtRQUFuQixZQUFPLEdBQVAsT0FBTyxDQUFZO1FBekN4Qzs7V0FFRztRQUNPLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRXRDOzs7V0FHRztRQUNNLFVBQUssR0FBZSxPQUFPLENBQUM7UUFDckM7OztXQUdHO1FBQ00sV0FBTSxHQUFjLE9BQU8sQ0FBQztRQUNyQzs7O1dBR0c7UUFDTSxZQUFPLEdBQVksRUFBRSxDQUFDO1FBQy9COzs7V0FHRztRQUNNLDBCQUFxQixHQUFZLElBQUksQ0FBQztRQUUvQyxvQkFBZSxHQUFHLElBQUksQ0FBQztRQUN2QixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUN0QixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQVFmLGFBQVEsR0FBRyxDQUFDLENBQUM7UUFDYixhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ2IsaUJBQVksR0FBRyxDQUFDLENBQUM7UUE0Q3pCLFdBQU0sR0FBRyxHQUFHLEVBQUU7WUFDVixNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMscUJBQXFCLEVBQUUsQ0FBQztZQUMvRCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUN0QyxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQztZQUV2QyxtQkFBbUI7WUFDbkIsTUFBTSxFQUFFLEdBQUcsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1lBQ3pDLE1BQU0sRUFBRSxHQUFHLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1lBRTFDLHNCQUFzQjtZQUN0QixNQUFNLEVBQUUsR0FBRyxPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsQ0FBQztZQUN2QyxNQUFNLEVBQUUsR0FBRyxPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsQ0FBQztZQUV2QyxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztnQkFDdkIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsY0FBYyxFQUFFLGtCQUFrQixFQUFFLEtBQUssQ0FBQztZQUN2RixDQUFDO1lBQ0QsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLGNBQWMsRUFBRSxrQkFBa0IsRUFBRSxLQUFLLENBQUM7WUFDL0YsQ0FBQztZQUVELElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO2dCQUN0QixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsMkJBQTJCLENBQUMsRUFBRSxNQUFNLENBQUM7Z0JBQ3RFLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxXQUFXLENBQUMsRUFBRSxnQkFBZ0IsQ0FBQyxFQUFFLE1BQU0sQ0FBQztZQUM1RSxDQUFDO2lCQUNJLENBQUM7Z0JBQ0YsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLFdBQVcsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLENBQUM7Z0JBQ3ZFLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRywyQkFBMkIsQ0FBQyxFQUFFLE1BQU0sQ0FBQztZQUN6RSxDQUFDO1FBQ0wsQ0FBQyxDQUFBO0lBcEVHLENBQUM7SUFFTCxlQUFlO1FBQ1gsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUV4Qix3Q0FBd0M7UUFDeEMsRUFBRSxDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNoRCxFQUFFLENBQUMsY0FBYyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUNoRCxFQUFFLENBQUMsY0FBYyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUNoRCxFQUFFLENBQUMsT0FBTyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUVsQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxhQUFhLENBQUMsQ0FBZTtRQUN6QixNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBQzFFLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDLEtBQUssR0FBRyxJQUFJLEdBQUcsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDN0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsS0FBSyxHQUFHLEdBQUcsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUU3QyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVELGNBQWM7UUFDVixZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxjQUFjO1FBQ1YsSUFBSSxDQUFDLFlBQVksR0FBRyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO1lBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO1lBQ2xCLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUNsQixDQUFDLEVBQUUsR0FBRyxDQUFRLENBQUM7SUFDbkIsQ0FBQztJQUVELGdEQUFnRDtJQUNoRCxPQUFPO1FBQ0gsSUFBSSxDQUFDLGNBQWMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUM7UUFDM0MsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFBO0lBQ2pCLENBQUM7OEdBMUZRLHFCQUFxQjtrR0FBckIscUJBQXFCLG9nQkFHRyxXQUFXLG1HQUNSLFdBQVcscUdBR1YsV0FBVywyR0FDUixXQUFXLDZCQ2hDdkQsMHpCQTRCQSwrZ0NEZlEsZ0JBQWdCOzsyRkFXWCxxQkFBcUI7a0JBaEJqQyxTQUFTOytCQUNJLG1CQUFtQixXQUdwQjt3QkFDTCxnQkFBZ0I7cUJBQ25CLFFBQ0s7d0JBQ0YsZUFBZSxFQUFFLE9BQU87d0JBQ3hCLGdCQUFnQixFQUFFLFFBQVE7d0JBQzFCLHlCQUF5QixFQUFFLGVBQWU7d0JBQzFDLG1DQUFtQyxFQUFFLDRCQUE0Qjt3QkFDakUsY0FBYyxFQUFFLGdCQUFnQjtxQkFDbkMsY0FDVyxJQUFJOytFQUtnQyxPQUFPO3NCQUF0RCxZQUFZO3VCQUFDLFNBQVMsRUFBRSxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUU7Z0JBQ0ssVUFBVTtzQkFBNUQsWUFBWTt1QkFBQyxZQUFZLEVBQUUsRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFO2dCQUdHLFdBQVc7c0JBQTlELFlBQVk7dUJBQUMsYUFBYSxFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtnQkFDSyxjQUFjO3NCQUFwRSxZQUFZO3VCQUFDLGdCQUFnQixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtnQkFLM0MsTUFBTTtzQkFBZixNQUFNO2dCQU1FLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csT0FBTztzQkFBZixLQUFLO2dCQUtHLHFCQUFxQjtzQkFBN0IsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxudHlwZSBDU1NVbml0U3RyaW5nID0gJ3B4JyB8ICclJyB8ICdlbScgfCAnaW4nIHwgJyc7XG50eXBlIENTU1VuaXQgPSBgJHtudW1iZXJ9JHtDU1NVbml0U3RyaW5nfWAgfCBgdmFyKC0tJHtzdHJpbmd9KWA7XG50eXBlIENTU1N0cmluZyA9IENTU1VuaXQgfFxuICAgIGBjYWxjKCR7Q1NTVW5pdHwnJ30keycnfCcgJ30keycrJ3wnLSd8Jy8nfCcqJ30keycnfCcgJ30ke0NTU1VuaXR8Jyd9KWBcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3gtcGFyYWxsYXgtY2FyZCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3BhcmFsbGF4LWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3BhcmFsbGF4LWNhcmQuY29tcG9uZW50LnNjc3MnXSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIE5nVGVtcGxhdGVPdXRsZXRcbiAgICBdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tzdHlsZS53aWR0aF0nOiAnd2lkdGgnLFxuICAgICAgICAnW3N0eWxlLmhlaWdodF0nOiAnaGVpZ2h0JyxcbiAgICAgICAgJ1tzdHlsZS4tLWNhcmQtYmctaW5zZXRdJzogJy1iZ0luc2V0K1wicHhcIicsXG4gICAgICAgICdbc3R5bGUuLS1mbGlwLWFuaW1hdGlvbi1kdXJhdGlvbl0nOiAnZmxpcEFuaW1hdGlvbkR1cmF0aW9uK1wibXNcIicsXG4gICAgICAgICdbY2xhc3MuZmxpcF0nOiAnc2hvd0JhY2tPZkNhcmQnXG4gICAgfSxcbiAgICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIFBhcmFsbGF4Q2FyZENvbXBvbmVudCB7XG5cbiAgICAvLyBGcm9udCBvZiBjYXJkXG4gICAgQENvbnRlbnRDaGlsZCgnY29udGVudCcsIHsgcmVhZDogVGVtcGxhdGVSZWYgfSkgY29udGVudDogVGVtcGxhdGVSZWY8RWxlbWVudFJlZj47XG4gICAgQENvbnRlbnRDaGlsZCgnYmFja2dyb3VuZCcsIHsgcmVhZDogVGVtcGxhdGVSZWYgfSkgYmFja2dyb3VuZDogVGVtcGxhdGVSZWY8RWxlbWVudFJlZj47XG5cbiAgICAvLyBCYWNrIG9mIGNhcmRcbiAgICBAQ29udGVudENoaWxkKCdiYWNrQ29udGVudCcsIHsgcmVhZDogVGVtcGxhdGVSZWYgfSkgYmFja0NvbnRlbnQ6IFRlbXBsYXRlUmVmPEVsZW1lbnRSZWY+O1xuICAgIEBDb250ZW50Q2hpbGQoJ2JhY2tCYWNrZ3JvdW5kJywgeyByZWFkOiBUZW1wbGF0ZVJlZiB9KSBiYWNrQmFja2dyb3VuZDogVGVtcGxhdGVSZWY8RWxlbWVudFJlZj47XG5cbiAgICAvKipcbiAgICAgKlxuICAgICAqL1xuICAgIEBPdXRwdXQoKSBsb2FkZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICAvKipcbiAgICAgKiBXaWR0aCBvZiB0aGUgY2FyZFxuICAgICAqIEBkZWZhdWx0IGAyNDBweGBcbiAgICAgKi9cbiAgICBASW5wdXQoKSB3aWR0aDogIENTU1N0cmluZyA9ICcyNDBweCc7XG4gICAgLyoqXG4gICAgICogSGVpZ2h0IG9mIHRoZSBjYXJkXG4gICAgICogQGRlZmF1bHQgYDMyMHB4YFxuICAgICAqL1xuICAgIEBJbnB1dCgpIGhlaWdodDogQ1NTU3RyaW5nID0gJzMyMHB4JztcbiAgICAvKipcbiAgICAgKiBJbnNldCBwYWRkaW5nIG9mIHRoZSBwYXJhbGxheFxuICAgICAqIEBkZWZhdWx0IDgwXG4gICAgICovXG4gICAgQElucHV0KCkgYmdJbnNldDogIG51bWJlciA9IDgwO1xuICAgIC8qKlxuICAgICAqIER1cmF0aW9uIGZvciB0aGUgZmxpcCBhbmltYXRpb24gaW4gbXNcbiAgICAgKiBAZGVmYXVsdCA4MFxuICAgICAqL1xuICAgIEBJbnB1dCgpIGZsaXBBbmltYXRpb25EdXJhdGlvbjogIG51bWJlciA9IDE2MDA7XG5cbiAgICByZW5kZXJDYXJkRnJvbnQgPSB0cnVlO1xuICAgIHJlbmRlckNhcmRCYWNrID0gdHJ1ZTtcbiAgICBzaG93QmFja09mQ2FyZCA9IGZhbHNlO1xuXG4gICAgcHJpdmF0ZSBnZXQgd3JhcHBlcigpIHsgcmV0dXJuIHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50OyB9XG4gICAgcHJpdmF0ZSBnZXQgY2FyZEZyb250KCkgeyByZXR1cm4gdGhpcy53cmFwcGVyLnF1ZXJ5U2VsZWN0b3IoJy5jYXJkLmZyb250JykgYXMgSFRNTEVsZW1lbnQ7IH1cbiAgICBwcml2YXRlIGdldCBjYXJkQmFjaygpIHsgcmV0dXJuIHRoaXMud3JhcHBlci5xdWVyeVNlbGVjdG9yKCcuY2FyZC5iYWNrZmFjZScpIGFzIEhUTUxFbGVtZW50OyB9XG4gICAgcHJpdmF0ZSBnZXQgYmFja2dyb3VuZEVsZW1lbnQoKSB7IHJldHVybiB0aGlzLmNhcmRGcm9udC5xdWVyeVNlbGVjdG9yKCcuY2FyZC1iZycpIGFzIEhUTUxEaXZFbGVtZW50OyB9XG4gICAgcHJpdmF0ZSBnZXQgYmFja2ZhY2VCYWNrZ3JvdW5kRWxlbWVudCgpIHsgcmV0dXJuIHRoaXMuY2FyZEJhY2sucXVlcnlTZWxlY3RvcignLmNhcmQtYmcnKSBhcyBIVE1MRGl2RWxlbWVudDsgfVxuXG4gICAgcHJpdmF0ZSBwb2ludGVyWCA9IDA7XG4gICAgcHJpdmF0ZSBwb2ludGVyWSA9IDA7XG4gICAgcHJpdmF0ZSBwb2ludGVyTGVhdmUgPSAwO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudDogRWxlbWVudFJlZlxuICAgICkgeyB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgICAgIGNvbnN0IGVsID0gdGhpcy53cmFwcGVyO1xuXG4gICAgICAgIC8vIERpcmVjdGx5IGF0dGFjaCBldmVudHMgdG8gdGhlIHdyYXBwZXJcbiAgICAgICAgZWwub25wb2ludGVybW92ZSA9IChlKSA9PiB0aGlzLm9uUG9pbnRlck1vdmUoZSk7XG4gICAgICAgIGVsLm9ucG9pbnRlcmVudGVyID0gKCkgPT4gdGhpcy5vblBvaW50ZXJFbnRlcigpO1xuICAgICAgICBlbC5vbnBvaW50ZXJsZWF2ZSA9ICgpID0+IHRoaXMub25Qb2ludGVyTGVhdmUoKTtcbiAgICAgICAgZWwub25jbGljayA9ICgpID0+IHRoaXMub25DbGljaygpO1xuXG4gICAgICAgIHRoaXMubG9hZGVkLmVtaXQoKTtcbiAgICB9XG5cbiAgICBvblBvaW50ZXJNb3ZlKGU6IFBvaW50ZXJFdmVudCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBoZWlnaHQsIGxlZnQsIHRvcCB9ID0gdGhpcy53cmFwcGVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgICAgICB0aGlzLnBvaW50ZXJYID0gZS5wYWdlWCAtIGxlZnQgLSAod2lkdGggLyAyKTtcbiAgICAgICAgdGhpcy5wb2ludGVyWSA9IGUucGFnZVkgLSB0b3AgLSAoaGVpZ2h0IC8gMik7XG5cbiAgICAgICAgdGhpcy5yZW5kZXIoKTtcbiAgICB9XG5cbiAgICBvblBvaW50ZXJFbnRlcigpIHtcbiAgICAgICAgY2xlYXJUaW1lb3V0KHRoaXMucG9pbnRlckxlYXZlKTtcbiAgICB9XG5cbiAgICBvblBvaW50ZXJMZWF2ZSgpIHtcbiAgICAgICAgdGhpcy5wb2ludGVyTGVhdmUgPSBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMucG9pbnRlclggPSAwO1xuICAgICAgICAgICAgdGhpcy5wb2ludGVyWSA9IDA7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcigpO1xuICAgICAgICB9LCA2MDApIGFzIGFueTtcbiAgICB9XG5cbiAgICAvLyBUT0RPOiBUaGlzIGNhbiBnZXQgaW50ZXJjZXB0ZWQgaW4gc29tZSBzdGF0ZXNcbiAgICBvbkNsaWNrKCkge1xuICAgICAgICB0aGlzLnNob3dCYWNrT2ZDYXJkID0gIXRoaXMuc2hvd0JhY2tPZkNhcmQ7XG4gICAgICAgIHRoaXMucmVuZGVyKClcbiAgICB9XG5cbiAgICByZW5kZXIgPSAoKSA9PiB7XG4gICAgICAgIGNvbnN0IHsgd2lkdGgsIGhlaWdodCB9ID0gdGhpcy53cmFwcGVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgICAgICBjb25zdCBtb3VzZVBYID0gdGhpcy5wb2ludGVyWCAvIHdpZHRoO1xuICAgICAgICBjb25zdCBtb3VzZVBZID0gdGhpcy5wb2ludGVyWSAvIGhlaWdodDtcblxuICAgICAgICAvLyBSb3RhdGlvbiBmYWN0b3JzXG4gICAgICAgIGNvbnN0IHJYID0gbW91c2VQWCAqIHRoaXMuYmdJbnNldCAvIDEuNzU7XG4gICAgICAgIGNvbnN0IHJZID0gbW91c2VQWSAqIC10aGlzLmJnSW5zZXQgLyAxLjc1O1xuXG4gICAgICAgIC8vIFRyYW5zbGF0aW9uIGZhY3RvcnNcbiAgICAgICAgY29uc3QgdFggPSBtb3VzZVBYICogLXRoaXMuYmdJbnNldCAqIDI7XG4gICAgICAgIGNvbnN0IHRZID0gbW91c2VQWSAqIC10aGlzLmJnSW5zZXQgKiAyO1xuXG4gICAgICAgIGlmICh0aGlzLnJlbmRlckNhcmRGcm9udCkge1xuICAgICAgICAgICAgdGhpcy5iYWNrZ3JvdW5kRWxlbWVudC5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWCgke3RYfXB4KSB0cmFuc2xhdGVZKCR7dFl9cHgpYDtcbiAgICAgICAgfVxuICAgICAgICBpZiAodGhpcy5yZW5kZXJDYXJkQmFjaykge1xuICAgICAgICAgICAgdGhpcy5iYWNrZmFjZUJhY2tncm91bmRFbGVtZW50LnN0eWxlLnRyYW5zZm9ybSA9IGB0cmFuc2xhdGVYKCR7dFh9cHgpIHRyYW5zbGF0ZVkoJHt0WX1weClgO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMuc2hvd0JhY2tPZkNhcmQpIHtcbiAgICAgICAgICAgIHRoaXMuY2FyZEZyb250LnN0eWxlLnRyYW5zZm9ybSA9IGByb3RhdGVZKDE4MGRlZykgcm90YXRlWCgkey1yWX1kZWcpYDtcbiAgICAgICAgICAgIHRoaXMuY2FyZEJhY2suc3R5bGUudHJhbnNmb3JtID0gYHJvdGF0ZVkoJHstclh9ZGVnKSByb3RhdGVYKCR7LXJZfWRlZylgO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5jYXJkRnJvbnQuc3R5bGUudHJhbnNmb3JtID0gYHJvdGF0ZVkoJHtyWH1kZWcpIHJvdGF0ZVgoJHtyWX1kZWcpYDtcbiAgICAgICAgICAgIHRoaXMuY2FyZEJhY2suc3R5bGUudHJhbnNmb3JtID0gYHJvdGF0ZVkoMTgwZGVnKSByb3RhdGVYKCR7LXJZfWRlZylgO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiQGlmIChyZW5kZXJDYXJkQmFjaykge1xuICAgIDxkaXYgY2xhc3M9XCJjYXJkIGJhY2tmYWNlXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLWJnXCIgc3R5bGU9XCJ0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCkgdHJhbnNsYXRlWSgwKVwiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImJhY2tCYWNrZ3JvdW5kXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJiYWNrQ29udGVudFwiIC8+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxufVxuXG5AaWYgKHJlbmRlckNhcmRGcm9udCkge1xuICAgIDxkaXYgY2xhc3M9XCJjYXJkIGZyb250XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLWJnXCIgc3R5bGU9XCJ0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCkgdHJhbnNsYXRlWSgwKVwiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImJhY2tncm91bmRcIiAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNhcmQtY29udGVudFwiPlxuICAgICAgICAgICAgQGlmIChjb250ZW50KSB7XG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbnRlbnRcIi8+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBAZWxzZSB7XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQvPlxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbn1cblxuXG4iXX0=