truly-ui
Version:
Web Components for Desktop Applications.
78 lines (76 loc) • 18.4 kB
JavaScript
/*
MIT License
Copyright (c) 2019 Temainfo Software
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
import { Component, EventEmitter, Input, Output, ViewChild, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TlTimelineItem {
constructor() {
this.align = 'left';
this.color = 'primary';
this.data = [];
this.initialize = new EventEmitter();
}
ngOnInit() {
this.initialize.emit();
this.changeSide();
}
changeSide() {
if (this.side) {
this.sideString = 'left';
}
else {
this.sideString = 'right';
}
}
setTemplateView(item, index) {
const node = this.template.createEmbeddedView({
item: item,
index: index
});
this.insertOnView(node);
}
insertOnView(node) {
this.view.insert(node);
}
}
/** @nocollapse */ TlTimelineItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlTimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TlTimelineItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TlTimelineItem, selector: "tl-timeline-item", inputs: { align: "align", side: "side", date: "date", color: "color", data: "data", template: "template" }, outputs: { initialize: "initialize" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<li [class]=\"'tl-timeline-item ' + color\" #customTemplateRef>\n <div [class]=\"'tl-timeline-item-tail tail-' + align\"></div>\n <div [class]=\"'tl-timeline-item-head head-' + align\">\n <div class=\"head-date\" *ngIf=\"date\">\n <span class=\"date-day\">{{ date | date : 'dd' }}</span>\n <span class=\"date-month\">{{ date | date : 'MMM' | uppercase }}</span>\n <span class=\"date-year\">{{ date | date : 'yyyy' }}</span>\n <span class=\"date-separator\"></span>\n <span class=\"date-hour\">{{ date | date : 'H:mm' }}</span>\n </div>\n <div class=\"head-dot\"></div>\n </div>\n <div class=\"tl-timeline-item-content\"\n [ngClass]=\"align === 'center' ? (date) ? 'float-' + sideString + ' arrow-' + sideString : 'float-df-' + sideString + ' arrow-' + sideString : (date) ? 'content-' + align : 'content-df-' + align\">\n <div #view></div>\n </div>\n <div class=\"clearfix\"></div>\n</li>\n", styles: [".tl-timeline-item{position:relative;padding:0 0 20px;list-style:none;margin:0 10px 0 20px;min-height:100px}.tl-timeline-item .tl-timeline-item-head{width:50px;position:absolute}.tl-timeline-item .head-left{left:-20px}.tl-timeline-item .head-center{left:50%;margin-left:-24px}.tl-timeline-item .head-right{right:-20px}.tl-timeline-item .tl-timeline-item-head span{display:block;text-align:center;line-height:1.1}.tl-timeline-item .tl-timeline-item-head .head-date{padding:4px 0;border-radius:6px}.tl-timeline-item .tl-timeline-item-head .head-date .date-day{font-size:2em}.tl-timeline-item .tl-timeline-item-head .head-date .date-month{font-size:1em;margin-top:-3px;letter-spacing:1px}.tl-timeline-item .tl-timeline-item-head .head-date .date-year{font-size:12px;margin-top:6px}.tl-timeline-item .tl-timeline-item-head .head-date .date-separator{margin:4px 0}.tl-timeline-item .tl-timeline-item-head .head-date .date-hour{font-size:12px;font-weight:500}.tl-timeline-item .tl-timeline-item-head .head-dot{margin-left:20px;margin-top:6px;width:10px;height:10px;border-radius:50%}.tl-timeline-item .tl-timeline-item-tail{position:absolute;top:.75em;height:100%}.tl-timeline-item .tail-left{left:4px}.tl-timeline-item .tail-center{left:50%}.tl-timeline-item .tail-right{right:4px}.tl-timeline-item .tl-timeline-item-content{position:relative}.tl-timeline-item .tl-timeline-item-content:before{position:absolute;top:0;font-size:23px;font-family:Ionicons}.tl-timeline-item .tl-timeline-item-content .content-head{display:table;width:100%;padding:10px;border-top-left-radius:6px;border-top-right-radius:6px;background:#66cc99;color:#fff}.tl-timeline-item .tl-timeline-item-content .content-head .content-title{display:table-cell;font-size:16px;font-weight:700}.tl-timeline-item .tl-timeline-item-content .content-head .content-time{display:table-cell;text-align:right;font-size:12px}.tl-timeline-item .tl-timeline-item-content .content-body{border:1px solid #DDDDDD;border-top:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.tl-timeline-item .tl-timeline-item-content .content-body .content-subtitle{border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;background:#f2f2f2;padding:5px 10px;font-size:14px}.tl-timeline-item .tl-timeline-item-content .content-body .content-text{padding:5px 10px;font-size:12px}.tl-timeline-item .content-left{margin:0 0 0 40px}.tl-timeline-item .content-right{margin:0 40px 0 0}.tl-timeline-item .content-df-left{margin:0 0 0 25px}.tl-timeline-item .content-df-right{margin:0 25px 0 0}.tl-timeline-item .float-left{width:calc(50% - 40px);float:left}.tl-timeline-item .float-right{width:calc(50% - 40px);float:right}.tl-timeline-item .float-df-left{width:calc(50% - 20px);float:left}.tl-timeline-item .float-df-right{width:calc(50% - 20px);float:right}.tl-timeline-item .content-left:before,.tl-timeline-item .content-df-left:before,.tl-timeline-item .arrow-right:before{content:\"\\f282\";left:-5px}.tl-timeline-item .content-right:before,.tl-timeline-item .content-df-right:before,.tl-timeline-item .arrow-left:before{content:\"\\f284\";right:-5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlTimelineItem, decorators: [{
type: Component,
args: [{ selector: 'tl-timeline-item', template: "<li [class]=\"'tl-timeline-item ' + color\" #customTemplateRef>\n <div [class]=\"'tl-timeline-item-tail tail-' + align\"></div>\n <div [class]=\"'tl-timeline-item-head head-' + align\">\n <div class=\"head-date\" *ngIf=\"date\">\n <span class=\"date-day\">{{ date | date : 'dd' }}</span>\n <span class=\"date-month\">{{ date | date : 'MMM' | uppercase }}</span>\n <span class=\"date-year\">{{ date | date : 'yyyy' }}</span>\n <span class=\"date-separator\"></span>\n <span class=\"date-hour\">{{ date | date : 'H:mm' }}</span>\n </div>\n <div class=\"head-dot\"></div>\n </div>\n <div class=\"tl-timeline-item-content\"\n [ngClass]=\"align === 'center' ? (date) ? 'float-' + sideString + ' arrow-' + sideString : 'float-df-' + sideString + ' arrow-' + sideString : (date) ? 'content-' + align : 'content-df-' + align\">\n <div #view></div>\n </div>\n <div class=\"clearfix\"></div>\n</li>\n", styles: [".tl-timeline-item{position:relative;padding:0 0 20px;list-style:none;margin:0 10px 0 20px;min-height:100px}.tl-timeline-item .tl-timeline-item-head{width:50px;position:absolute}.tl-timeline-item .head-left{left:-20px}.tl-timeline-item .head-center{left:50%;margin-left:-24px}.tl-timeline-item .head-right{right:-20px}.tl-timeline-item .tl-timeline-item-head span{display:block;text-align:center;line-height:1.1}.tl-timeline-item .tl-timeline-item-head .head-date{padding:4px 0;border-radius:6px}.tl-timeline-item .tl-timeline-item-head .head-date .date-day{font-size:2em}.tl-timeline-item .tl-timeline-item-head .head-date .date-month{font-size:1em;margin-top:-3px;letter-spacing:1px}.tl-timeline-item .tl-timeline-item-head .head-date .date-year{font-size:12px;margin-top:6px}.tl-timeline-item .tl-timeline-item-head .head-date .date-separator{margin:4px 0}.tl-timeline-item .tl-timeline-item-head .head-date .date-hour{font-size:12px;font-weight:500}.tl-timeline-item .tl-timeline-item-head .head-dot{margin-left:20px;margin-top:6px;width:10px;height:10px;border-radius:50%}.tl-timeline-item .tl-timeline-item-tail{position:absolute;top:.75em;height:100%}.tl-timeline-item .tail-left{left:4px}.tl-timeline-item .tail-center{left:50%}.tl-timeline-item .tail-right{right:4px}.tl-timeline-item .tl-timeline-item-content{position:relative}.tl-timeline-item .tl-timeline-item-content:before{position:absolute;top:0;font-size:23px;font-family:Ionicons}.tl-timeline-item .tl-timeline-item-content .content-head{display:table;width:100%;padding:10px;border-top-left-radius:6px;border-top-right-radius:6px;background:#66cc99;color:#fff}.tl-timeline-item .tl-timeline-item-content .content-head .content-title{display:table-cell;font-size:16px;font-weight:700}.tl-timeline-item .tl-timeline-item-content .content-head .content-time{display:table-cell;text-align:right;font-size:12px}.tl-timeline-item .tl-timeline-item-content .content-body{border:1px solid #DDDDDD;border-top:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.tl-timeline-item .tl-timeline-item-content .content-body .content-subtitle{border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;background:#f2f2f2;padding:5px 10px;font-size:14px}.tl-timeline-item .tl-timeline-item-content .content-body .content-text{padding:5px 10px;font-size:12px}.tl-timeline-item .content-left{margin:0 0 0 40px}.tl-timeline-item .content-right{margin:0 40px 0 0}.tl-timeline-item .content-df-left{margin:0 0 0 25px}.tl-timeline-item .content-df-right{margin:0 25px 0 0}.tl-timeline-item .float-left{width:calc(50% - 40px);float:left}.tl-timeline-item .float-right{width:calc(50% - 40px);float:right}.tl-timeline-item .float-df-left{width:calc(50% - 20px);float:left}.tl-timeline-item .float-df-right{width:calc(50% - 20px);float:right}.tl-timeline-item .content-left:before,.tl-timeline-item .content-df-left:before,.tl-timeline-item .arrow-right:before{content:\"\\f282\";left:-5px}.tl-timeline-item .content-right:before,.tl-timeline-item .content-df-right:before,.tl-timeline-item .arrow-left:before{content:\"\\f284\";right:-5px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { align: [{
type: Input
}], side: [{
type: Input
}], date: [{
type: Input
}], color: [{
type: Input
}], data: [{
type: Input
}], template: [{
type: Input
}], initialize: [{
type: Output
}], view: [{
type: ViewChild,
args: ['view', { read: ViewContainerRef, static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUtaXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RydWx5LXVpL3NyYy9jb21wb25lbnRzL3RpbWVsaW5lL3BhcnRzL3RpbWVsaW5lLWl0ZW0vdGltZWxpbmUtaXRlbS50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RydWx5LXVpL3NyYy9jb21wb25lbnRzL3RpbWVsaW5lL3BhcnRzL3RpbWVsaW5lLWl0ZW0vdGltZWxpbmUtaXRlbS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQW9CRTtBQUVGLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEVBRU4sU0FBUyxFQUNULGdCQUFnQixFQUNqQixNQUFNLGVBQWUsQ0FBQzs7O0FBUXZCLE1BQU0sT0FBTyxjQUFjO0lBb0J6QjtRQWxCUyxVQUFLLEdBQUcsTUFBTSxDQUFDO1FBTWYsVUFBSyxHQUFHLFNBQVMsQ0FBQztRQUVsQixTQUFJLEdBQWUsRUFBRSxDQUFDO1FBSXJCLGVBQVUsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQU05QyxDQUFDO0lBRWhCLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksSUFBSSxDQUFDLElBQUksRUFBRTtZQUNiLElBQUksQ0FBQyxVQUFVLEdBQUcsTUFBTSxDQUFDO1NBQzFCO2FBQU07WUFDTCxJQUFJLENBQUMsVUFBVSxHQUFHLE9BQU8sQ0FBQztTQUMzQjtJQUNILENBQUM7SUFFRCxlQUFlLENBQUMsSUFBSSxFQUFFLEtBQUs7UUFDekIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQztZQUM1QyxJQUFJLEVBQUUsSUFBSTtZQUNWLEtBQUssRUFBRSxLQUFLO1NBQ2IsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsWUFBWSxDQUFDLElBQUk7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDOzsrSEE3Q1UsY0FBYzttSEFBZCxjQUFjLG9SQWdCQyxnQkFBZ0IsMkNDdkQ1Qyw2NkJBa0JBOzRGRHFCYSxjQUFjO2tCQUwxQixTQUFTOytCQUNFLGtCQUFrQjswRUFNbkIsS0FBSztzQkFBYixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLFVBQVU7c0JBQW5CLE1BQU07Z0JBRW9ELElBQUk7c0JBQTlELFNBQVM7dUJBQUMsTUFBTSxFQUFFLEVBQUMsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICAgIE1JVCBMaWNlbnNlXG5cbiAgICBDb3B5cmlnaHQgKGMpIDIwMTkgVGVtYWluZm8gU29mdHdhcmVcblxuICAgIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHlcbiAgICBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0byBkZWFsXG4gICAgaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0c1xuICAgIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yIHNlbGxcbiAgICBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbiAgICBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuICAgIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluIGFsbFxuICAgIGNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuXG4gICAgVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEIFwiQVMgSVNcIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUlxuICAgIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuICAgIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuICAgIEFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVJcbiAgICBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuICAgIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU4gVEhFXG4gICAgU09GVFdBUkUuXG4qL1xuXG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NoaWxkLFxuICBWaWV3Q29udGFpbmVyUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtGaXhlZFBvc2l0aW9uRGlyZWN0aXZlfSBmcm9tICcuLi8uLi8uLi9taXNjL2ZpeGVkLXBvc2l0aW9uLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RsLXRpbWVsaW5lLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vdGltZWxpbmUtaXRlbS5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGltZWxpbmUtaXRlbS5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRsVGltZWxpbmVJdGVtIGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKSBhbGlnbiA9ICdsZWZ0JztcblxuICBASW5wdXQoKSBzaWRlOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpIGRhdGU6IG51bWJlcjtcblxuICBASW5wdXQoKSBjb2xvciA9ICdwcmltYXJ5JztcblxuICBASW5wdXQoKSBkYXRhOiBBcnJheTxhbnk+ID0gW107XG5cbiAgQElucHV0KCkgdGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQE91dHB1dCgpIGluaXRpYWxpemU6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBWaWV3Q2hpbGQoJ3ZpZXcnLCB7cmVhZDogVmlld0NvbnRhaW5lclJlZiwgc3RhdGljOiB0cnVlfSkgdmlldzogVmlld0NvbnRhaW5lclJlZjtcblxuICBwdWJsaWMgc2lkZVN0cmluZzogc3RyaW5nO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmluaXRpYWxpemUuZW1pdCgpO1xuICAgIHRoaXMuY2hhbmdlU2lkZSgpO1xuICB9XG5cbiAgY2hhbmdlU2lkZSgpIHtcbiAgICBpZiAodGhpcy5zaWRlKSB7XG4gICAgICB0aGlzLnNpZGVTdHJpbmcgPSAnbGVmdCc7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuc2lkZVN0cmluZyA9ICdyaWdodCc7XG4gICAgfVxuICB9XG5cbiAgc2V0VGVtcGxhdGVWaWV3KGl0ZW0sIGluZGV4KSB7XG4gICAgY29uc3Qgbm9kZSA9IHRoaXMudGVtcGxhdGUuY3JlYXRlRW1iZWRkZWRWaWV3KHtcbiAgICAgIGl0ZW06IGl0ZW0sXG4gICAgICBpbmRleDogaW5kZXhcbiAgICB9KTtcbiAgICB0aGlzLmluc2VydE9uVmlldyhub2RlKTtcbiAgfVxuXG4gIGluc2VydE9uVmlldyhub2RlKSB7XG4gICAgdGhpcy52aWV3Lmluc2VydChub2RlKTtcbiAgfVxuXG59XG4iLCI8bGkgW2NsYXNzXT1cIid0bC10aW1lbGluZS1pdGVtICcgKyBjb2xvclwiICNjdXN0b21UZW1wbGF0ZVJlZj5cbiAgPGRpdiBbY2xhc3NdPVwiJ3RsLXRpbWVsaW5lLWl0ZW0tdGFpbCB0YWlsLScgKyBhbGlnblwiPjwvZGl2PlxuICA8ZGl2IFtjbGFzc109XCIndGwtdGltZWxpbmUtaXRlbS1oZWFkIGhlYWQtJyArIGFsaWduXCI+XG4gICAgPGRpdiBjbGFzcz1cImhlYWQtZGF0ZVwiICpuZ0lmPVwiZGF0ZVwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJkYXRlLWRheVwiPnt7IGRhdGUgfCBkYXRlIDogJ2RkJyB9fTwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZGF0ZS1tb250aFwiPnt7IGRhdGUgfCBkYXRlIDogJ01NTScgfCB1cHBlcmNhc2UgfX08L3NwYW4+XG4gICAgICA8c3BhbiBjbGFzcz1cImRhdGUteWVhclwiPnt7IGRhdGUgfCBkYXRlIDogJ3l5eXknIH19PC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJkYXRlLXNlcGFyYXRvclwiPjwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZGF0ZS1ob3VyXCI+e3sgZGF0ZSB8IGRhdGUgOiAnSDptbScgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImhlYWQtZG90XCI+PC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwidGwtdGltZWxpbmUtaXRlbS1jb250ZW50XCJcbiAgICAgICBbbmdDbGFzc109XCJhbGlnbiA9PT0gJ2NlbnRlcicgPyAoZGF0ZSkgPyAnZmxvYXQtJyArIHNpZGVTdHJpbmcgKyAnIGFycm93LScgKyBzaWRlU3RyaW5nIDogJ2Zsb2F0LWRmLScgKyBzaWRlU3RyaW5nICsgJyBhcnJvdy0nICsgc2lkZVN0cmluZyA6IChkYXRlKSA/ICdjb250ZW50LScgKyBhbGlnbiA6ICdjb250ZW50LWRmLScgKyBhbGlnblwiPlxuICAgIDxkaXYgI3ZpZXc+PC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY2xlYXJmaXhcIj48L2Rpdj5cbjwvbGk+XG4iXX0=