angular-dashboard-calendar
Version:
The only ever calendar module in npm
94 lines • 23 kB
JavaScript
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DashboardCalendarComponent {
constructor() {
this.calendarDays = document.querySelector(".calendar-days");
this.today = new Date();
this.date = new Date();
this.days = [];
this.currentMonth = this.date.toLocaleDateString("en-US", { month: 'long', year: 'numeric' });
console.log(this.today.getDate());
this.currentDate = this.today.getDate();
this.today.setHours(0, 0, 0, 0);
this.renderCalendar();
}
ngOnInit() {
}
renderCalendar() {
const prevLastDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate();
const totalMonthDay = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate();
const startWeekDay = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDay();
console.log(prevLastDay, totalMonthDay, startWeekDay);
// if (!this.calendarDays) return;
// this.calendarDays.innerHTML = "";
let totalCalendarDay = 6 * 7;
// console.log(totalCalendarDay);
for (let i = 0; i < totalCalendarDay; i++) {
let day = i - startWeekDay;
// console.log(day);
if (i <= startWeekDay) {
// adding previous month days
//this.calendarDays.innerHTML += `${prevLastDay - i}`;
console.log(prevLastDay - i);
this.days.push('');
}
else if (i <= startWeekDay + totalMonthDay) {
// adding this month days
this.date.setDate(day);
this.date.setHours(0, 0, 0, 0);
let dayClass = this.date.getTime() === this.today.getTime() ? 'current-day' : 'month-day';
// this.calendarDays.innerHTML += `${day}`;
console.log(day);
this.days.push(day);
}
else {
// adding next month days
// this.calendarDays.innerHTML += `${day - totalMonthDay}`;
}
}
}
nextMonth() {
const monthMap = {
"January": 0,
"February": 1,
"March": 2,
"April": 3,
"May": 4,
"June": 5,
"July": 6,
"August": 7,
"September": 8,
"October": 9,
"November": 10,
"December": 11
};
// const currentDate = new Date();
// const currentMonth = currentDate.getMonth();
// console.log(currentMonth);
const currentDate = new Date();
const currentShownMonth = document.querySelector(".current-month")?.textContent;
if (currentShownMonth) {
const monthNamea = currentShownMonth.trim();
const parts = monthNamea.split(" ");
// The first part should be the month name
const monthName = parts[0];
const monthNumber = monthMap[monthName];
const nextMonth = (monthNumber === 11) ? 0 : monthNumber + 1;
const nextMonthDate = new Date(currentDate.getFullYear(), nextMonth);
const nextMonthName = nextMonthDate.toLocaleString('default', { month: 'long', year: 'numeric' });
console.log(nextMonthName);
this.currentMonth = nextMonthName;
}
// Get the month number from the mapping object
// console.log("Month number:", monthNumber);
// console.log(currentShownMonth);
}
}
DashboardCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DashboardCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardCalendarComponent, selector: "angular-dashboard-calendar", ngImport: i0, template: "\r\n <div class=\"card\">\r\n <div class=\"calendar-toolbar\">\r\n <!-- <button class=\"prev month-btn\">\r\n <i class=\"fas fa-chevron-left\"></i>\r\n </button> -->\r\n <div class=\"current-month\">{{currentMonth}}</div>\r\n <button (click)=\"nextMonth()\" class=\"next month-btn\">\r\n <img src=\"../../assets/right-arrow.png\">\r\n <!-- <i class=\"fas fa-chevron-right\"></i> -->\r\n </button>\r\n </div>\r\n <div class=\"calendar\">\r\n <div class=\"weekdays\">\r\n <div class=\"weekday-name\" style=\"color:red\">Su</div>\r\n <div class=\"weekday-name\">Mo</div>\r\n <div class=\"weekday-name\">Tu</div>\r\n <div class=\"weekday-name\">We</div>\r\n <div class=\"weekday-name\">Th</div>\r\n <div class=\"weekday-name\">Fr</div>\r\n <div class=\"weekday-name\">Sa</div>\r\n </div>\r\n <div class=\"weekdays\">\r\n <div [ngClass]=\"{ 'current-day': day=== currentDate}\" *ngFor=\"let day of days\" class=\"day-list\">{{day}}</div>\r\n </div>\r\n\r\n </div>\r\n <!-- <div class=\"goto-buttons\">\r\n <button type=\"button\" class=\"btn prev-year\">Prev Year</button>\r\n <button type=\"button\" class=\"btn today\">Today</button>\r\n <button type=\"button\" class=\"btn next-year\">Next Year</button>\r\n </div> -->\r\n </div>\r\n", styles: ["*{margin:0;padding:0}body{height:100vh;background:rgb(238,174,202);background:radial-gradient(circle,rgba(238,174,202,1) 0%,rgba(148,187,233,1) 100%);display:flex;justify-content:center;align-items:center;font-family:Quicksand,sans-serif;-webkit-user-select:none;user-select:none}.card{width:316px;height:-moz-fit-content;height:fit-content;background-color:#fff;border-radius:15px;box-shadow:0 0 10px #efefef}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 15px;border-bottom:1px solid #efefef}.calendar-toolbar>.current-month{font-size:20px;font-weight:700;color:#19181a}.calendar-toolbar>[class$=month-btn]{width:40px;aspect-ratio:1;text-align:center;line-height:40px;font-size:14px;color:#19181a;background:#f8f7fa;border:none;border-radius:15px}.weekdays,.calendar-days{display:flex;flex-wrap:wrap;padding-inline:18px}.weekdays{padding-top:12px}.calendar-days{padding-bottom:12px}.weekday-name,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.weekday-name,.day-list{color:#19181a;font-weight:700}.day-list,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.current-day{background-color:#7047eb;color:#f8f7fa;border-radius:15px;font-weight:700;transition:.5s;cursor:pointer}.padding-day{color:#a5a5a5;-webkit-user-select:none;user-select:none}.calendar-toolbar>[class$=month-btn]:hover,.month-day:hover,.btn:hover{border-radius:15px;background-color:#f8f7fa;color:#7047eb;transition:.1s;cursor:pointer;box-shadow:inset 0 0 0 1.5px #7047eb}.calendar-toolbar>[class$=month-btn]:focus,.month-day:focus,.btn:focus{border-radius:15px;background-color:#7047eb;color:#f8f7fa}.goto-buttons{border-top:1px solid #efefef;padding-block:18px;display:flex;justify-content:space-evenly}.btn{background:#f8f7fa;border:none;border-radius:15px;padding:11px 13px;color:#19181a;font-family:Quicksand,sans-serif;font-weight:600;font-size:.9rem;margin-right:1px;box-shadow:0 0 #efefef}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardCalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'angular-dashboard-calendar', template: "\r\n <div class=\"card\">\r\n <div class=\"calendar-toolbar\">\r\n <!-- <button class=\"prev month-btn\">\r\n <i class=\"fas fa-chevron-left\"></i>\r\n </button> -->\r\n <div class=\"current-month\">{{currentMonth}}</div>\r\n <button (click)=\"nextMonth()\" class=\"next month-btn\">\r\n <img src=\"../../assets/right-arrow.png\">\r\n <!-- <i class=\"fas fa-chevron-right\"></i> -->\r\n </button>\r\n </div>\r\n <div class=\"calendar\">\r\n <div class=\"weekdays\">\r\n <div class=\"weekday-name\" style=\"color:red\">Su</div>\r\n <div class=\"weekday-name\">Mo</div>\r\n <div class=\"weekday-name\">Tu</div>\r\n <div class=\"weekday-name\">We</div>\r\n <div class=\"weekday-name\">Th</div>\r\n <div class=\"weekday-name\">Fr</div>\r\n <div class=\"weekday-name\">Sa</div>\r\n </div>\r\n <div class=\"weekdays\">\r\n <div [ngClass]=\"{ 'current-day': day=== currentDate}\" *ngFor=\"let day of days\" class=\"day-list\">{{day}}</div>\r\n </div>\r\n\r\n </div>\r\n <!-- <div class=\"goto-buttons\">\r\n <button type=\"button\" class=\"btn prev-year\">Prev Year</button>\r\n <button type=\"button\" class=\"btn today\">Today</button>\r\n <button type=\"button\" class=\"btn next-year\">Next Year</button>\r\n </div> -->\r\n </div>\r\n", styles: ["*{margin:0;padding:0}body{height:100vh;background:rgb(238,174,202);background:radial-gradient(circle,rgba(238,174,202,1) 0%,rgba(148,187,233,1) 100%);display:flex;justify-content:center;align-items:center;font-family:Quicksand,sans-serif;-webkit-user-select:none;user-select:none}.card{width:316px;height:-moz-fit-content;height:fit-content;background-color:#fff;border-radius:15px;box-shadow:0 0 10px #efefef}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 15px;border-bottom:1px solid #efefef}.calendar-toolbar>.current-month{font-size:20px;font-weight:700;color:#19181a}.calendar-toolbar>[class$=month-btn]{width:40px;aspect-ratio:1;text-align:center;line-height:40px;font-size:14px;color:#19181a;background:#f8f7fa;border:none;border-radius:15px}.weekdays,.calendar-days{display:flex;flex-wrap:wrap;padding-inline:18px}.weekdays{padding-top:12px}.calendar-days{padding-bottom:12px}.weekday-name,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.weekday-name,.day-list{color:#19181a;font-weight:700}.day-list,[class$=-day]{width:40px;height:40px;color:#19181a;text-align:center;line-height:40px;font-weight:500;font-size:1rem}.current-day{background-color:#7047eb;color:#f8f7fa;border-radius:15px;font-weight:700;transition:.5s;cursor:pointer}.padding-day{color:#a5a5a5;-webkit-user-select:none;user-select:none}.calendar-toolbar>[class$=month-btn]:hover,.month-day:hover,.btn:hover{border-radius:15px;background-color:#f8f7fa;color:#7047eb;transition:.1s;cursor:pointer;box-shadow:inset 0 0 0 1.5px #7047eb}.calendar-toolbar>[class$=month-btn]:focus,.month-day:focus,.btn:focus{border-radius:15px;background-color:#7047eb;color:#f8f7fa}.goto-buttons{border-top:1px solid #efefef;padding-block:18px;display:flex;justify-content:space-evenly}.btn{background:#f8f7fa;border:none;border-radius:15px;padding:11px 13px;color:#19181a;font-family:Quicksand,sans-serif;font-weight:600;font-size:.9rem;margin-right:1px;box-shadow:0 0 #efefef}\n"] }]
}], ctorParameters: function () { return []; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGFzaGJvYXJkLWNhbGVuZGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NhbGVuZGFyLWxpYnJhcnkvc3JjL2xpYi9kYXNoYm9hcmQtY2FsZW5kYXIvZGFzaGJvYXJkLWNhbGVuZGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NhbGVuZGFyLWxpYnJhcnkvc3JjL2xpYi9kYXNoYm9hcmQtY2FsZW5kYXIvZGFzaGJvYXJkLWNhbGVuZGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU8xQyxNQUFNLE9BQU8sMEJBQTBCO0lBT3JDO1FBSkEsaUJBQVksR0FBdUIsUUFBUSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzVFLFVBQUssR0FBUyxJQUFJLElBQUksRUFBRSxDQUFDO1FBQ3pCLFNBQUksR0FBUyxJQUFJLElBQUksRUFBRSxDQUFDO1FBQ3hCLFNBQUksR0FBUSxFQUFFLENBQUE7UUFFWixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQztRQUM5RixPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDcEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDaEMsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3hC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LFdBQVcsQ0FBQztRQUVoRixJQUFHLGlCQUFpQixFQUFDO1lBQ3JCLE1BQU0sVUFBVSxHQUFRLGlCQUFpQixDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2xELE1BQU0sS0FBSyxHQUFHLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7WUFFcEMsMENBQTBDO1lBQzFDLE1BQU0sU0FBUyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUUxQixNQUFNLFdBQVcsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUM7WUFFeEMsTUFBTSxTQUFTLEdBQUcsQ0FBQyxXQUFXLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUM3RCxNQUFNLGFBQWEsR0FBRyxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxFQUFFLEVBQUUsU0FBUyxDQUFDLENBQUM7WUFDckUsTUFBTSxhQUFhLEdBQUcsYUFBYSxDQUFDLGNBQWMsQ0FBQyxTQUFTLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUMsQ0FBQyxDQUFDO1lBQ2pHLE9BQU8sQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxhQUFhLENBQUM7U0FDaEM7UUFFRCwrQ0FBK0M7UUFHaEQsOENBQThDO1FBQzlDLG1DQUFtQztJQUVuQyxDQUFDOzt3SEF2R1ksMEJBQTBCOzRHQUExQiwwQkFBMEIsa0VDUHZDLDQ2Q0FpQ0E7NEZEMUJhLDBCQUEwQjtrQkFMdEMsU0FBUzsrQkFDRSw0QkFBNEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYW5ndWxhci1kYXNoYm9hcmQtY2FsZW5kYXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXNoYm9hcmQtY2FsZW5kYXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2Rhc2hib2FyZC1jYWxlbmRhci5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIERhc2hib2FyZENhbGVuZGFyQ29tcG9uZW50IHtcclxuICBjdXJyZW50TW9udGg6IGFueTtcclxuICBjdXJyZW50RGF0ZTogYW55O1xyXG4gIGNhbGVuZGFyRGF5czogSFRNTEVsZW1lbnQgfCBudWxsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi5jYWxlbmRhci1kYXlzXCIpO1xyXG4gIHRvZGF5OiBEYXRlID0gbmV3IERhdGUoKTtcclxuICBkYXRlOiBEYXRlID0gbmV3IERhdGUoKTtcclxuICBkYXlzOiBhbnkgPSBbXVxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgdGhpcy5jdXJyZW50TW9udGggPSB0aGlzLmRhdGUudG9Mb2NhbGVEYXRlU3RyaW5nKFwiZW4tVVNcIiwgeyBtb250aDogJ2xvbmcnLCB5ZWFyOiAnbnVtZXJpYycgfSk7XHJcbiAgICBjb25zb2xlLmxvZyh0aGlzLnRvZGF5LmdldERhdGUoKSk7XHJcbnRoaXMuY3VycmVudERhdGUgPSB0aGlzLnRvZGF5LmdldERhdGUoKTtcclxuICAgIHRoaXMudG9kYXkuc2V0SG91cnMoMCwgMCwgMCwgMCk7XHJcbiAgICB0aGlzLnJlbmRlckNhbGVuZGFyKCk7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG5cclxuIHJlbmRlckNhbGVuZGFyKCk6IHZvaWQge1xyXG4gIGNvbnN0IHByZXZMYXN0RGF5ID0gbmV3IERhdGUodGhpcy5kYXRlLmdldEZ1bGxZZWFyKCksIHRoaXMuZGF0ZS5nZXRNb250aCgpLCAwKS5nZXREYXRlKCk7XHJcbiAgY29uc3QgdG90YWxNb250aERheSA9IG5ldyBEYXRlKHRoaXMuZGF0ZS5nZXRGdWxsWWVhcigpLCB0aGlzLmRhdGUuZ2V0TW9udGgoKSArIDEsIDApLmdldERhdGUoKTtcclxuICBjb25zdCBzdGFydFdlZWtEYXkgPSBuZXcgRGF0ZSh0aGlzLmRhdGUuZ2V0RnVsbFllYXIoKSwgdGhpcy5kYXRlLmdldE1vbnRoKCksIDApLmdldERheSgpO1xyXG5jb25zb2xlLmxvZyhwcmV2TGFzdERheSwgdG90YWxNb250aERheSwgc3RhcnRXZWVrRGF5KTtcclxuXHJcbiAvLyBpZiAoIXRoaXMuY2FsZW5kYXJEYXlzKSByZXR1cm47XHJcblxyXG4gLy8gdGhpcy5jYWxlbmRhckRheXMuaW5uZXJIVE1MID0gXCJcIjtcclxuXHJcbiAgbGV0IHRvdGFsQ2FsZW5kYXJEYXkgPSA2ICogNztcclxuIC8vIGNvbnNvbGUubG9nKHRvdGFsQ2FsZW5kYXJEYXkpO1xyXG5cclxuICBmb3IgKGxldCBpID0gMDsgaSA8IHRvdGFsQ2FsZW5kYXJEYXk7IGkrKykge1xyXG4gICAgbGV0IGRheSA9IGkgLSBzdGFydFdlZWtEYXk7XHJcbiAgLy8gIGNvbnNvbGUubG9nKGRheSk7XHJcblxyXG4gICAgaWYgKGkgPD0gc3RhcnRXZWVrRGF5KSB7XHJcblxyXG5cclxuICAgICAgLy8gYWRkaW5nIHByZXZpb3VzIG1vbnRoIGRheXNcclxuICAgICAgLy90aGlzLmNhbGVuZGFyRGF5cy5pbm5lckhUTUwgKz0gYCR7cHJldkxhc3REYXkgLSBpfWA7XHJcbiAgICAgIGNvbnNvbGUubG9nKHByZXZMYXN0RGF5IC0gaSk7XHJcbiAgICAgIHRoaXMuZGF5cy5wdXNoKCcnKVxyXG4gICAgfSBlbHNlIGlmIChpIDw9IHN0YXJ0V2Vla0RheSArIHRvdGFsTW9udGhEYXkpIHtcclxuICAgICAgLy8gYWRkaW5nIHRoaXMgbW9udGggZGF5c1xyXG4gICAgICB0aGlzLmRhdGUuc2V0RGF0ZShkYXkpO1xyXG4gICAgICB0aGlzLmRhdGUuc2V0SG91cnMoMCwgMCwgMCwgMCk7XHJcblxyXG4gICAgICBsZXQgZGF5Q2xhc3MgPSB0aGlzLmRhdGUuZ2V0VGltZSgpID09PSB0aGlzLnRvZGF5LmdldFRpbWUoKSA/ICdjdXJyZW50LWRheScgOiAnbW9udGgtZGF5JztcclxuICAgIC8vICB0aGlzLmNhbGVuZGFyRGF5cy5pbm5lckhUTUwgKz0gYCR7ZGF5fWA7XHJcbiAgICAgIGNvbnNvbGUubG9nKGRheSk7XHJcblxyXG4gICAgICB0aGlzLmRheXMucHVzaChkYXkpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgLy8gYWRkaW5nIG5leHQgbW9udGggZGF5c1xyXG4gICAgLy8gIHRoaXMuY2FsZW5kYXJEYXlzLmlubmVySFRNTCArPSBgJHtkYXkgLSB0b3RhbE1vbnRoRGF5fWA7XHJcbiAgICB9XHJcbiAgfVxyXG4gIH1cclxuXHJcbm5leHRNb250aCgpe1xyXG4gIGNvbnN0IG1vbnRoTWFwOiBhbnkgPSB7XHJcbiAgICBcIkphbnVhcnlcIjogMCxcclxuICAgIFwiRmVicnVhcnlcIjogMSxcclxuICAgIFwiTWFyY2hcIjogMixcclxuICAgIFwiQXByaWxcIjogMyxcclxuICAgIFwiTWF5XCI6IDQsXHJcbiAgICBcIkp1bmVcIjogNSxcclxuICAgIFwiSnVseVwiOiA2LFxyXG4gICAgXCJBdWd1c3RcIjogNyxcclxuICAgIFwiU2VwdGVtYmVyXCI6IDgsXHJcbiAgICBcIk9jdG9iZXJcIjogOSxcclxuICAgIFwiTm92ZW1iZXJcIjogMTAsXHJcbiAgICBcIkRlY2VtYmVyXCI6IDExXHJcbiAgfTtcclxuLy8gIGNvbnN0IGN1cnJlbnREYXRlID0gbmV3IERhdGUoKTtcclxuLy8gY29uc3QgY3VycmVudE1vbnRoID0gY3VycmVudERhdGUuZ2V0TW9udGgoKTtcclxuLy8gY29uc29sZS5sb2coY3VycmVudE1vbnRoKTtcclxuY29uc3QgY3VycmVudERhdGUgPSBuZXcgRGF0ZSgpO1xyXG4gY29uc3QgY3VycmVudFNob3duTW9udGggPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLmN1cnJlbnQtbW9udGhcIik/LnRleHRDb250ZW50O1xyXG5cclxuIGlmKGN1cnJlbnRTaG93bk1vbnRoKXtcclxuIGNvbnN0IG1vbnRoTmFtZWE6IGFueSA9IGN1cnJlbnRTaG93bk1vbnRoLnRyaW0oKTtcclxuY29uc3QgcGFydHMgPSBtb250aE5hbWVhLnNwbGl0KFwiIFwiKTtcclxuXHJcbi8vIFRoZSBmaXJzdCBwYXJ0IHNob3VsZCBiZSB0aGUgbW9udGggbmFtZVxyXG5jb25zdCBtb250aE5hbWUgPSBwYXJ0c1swXTtcclxuXHJcbiBjb25zdCBtb250aE51bWJlciA9IG1vbnRoTWFwW21vbnRoTmFtZV07XHJcblxyXG4gY29uc3QgbmV4dE1vbnRoID0gKG1vbnRoTnVtYmVyID09PSAxMSkgPyAwIDogbW9udGhOdW1iZXIgKyAxO1xyXG4gY29uc3QgbmV4dE1vbnRoRGF0ZSA9IG5ldyBEYXRlKGN1cnJlbnREYXRlLmdldEZ1bGxZZWFyKCksIG5leHRNb250aCk7XHJcbiBjb25zdCBuZXh0TW9udGhOYW1lID0gbmV4dE1vbnRoRGF0ZS50b0xvY2FsZVN0cmluZygnZGVmYXVsdCcsIHsgbW9udGg6ICdsb25nJywgeWVhcjogJ251bWVyaWMnfSk7XHJcbiBjb25zb2xlLmxvZyhuZXh0TW9udGhOYW1lKTtcclxudGhpcy5jdXJyZW50TW9udGggPSBuZXh0TW9udGhOYW1lO1xyXG4gfVxyXG5cclxuIC8vIEdldCB0aGUgbW9udGggbnVtYmVyIGZyb20gdGhlIG1hcHBpbmcgb2JqZWN0XHJcblxyXG5cclxuLy8gIGNvbnNvbGUubG9nKFwiTW9udGggbnVtYmVyOlwiLCBtb250aE51bWJlcik7XHJcbi8vICBjb25zb2xlLmxvZyhjdXJyZW50U2hvd25Nb250aCk7XHJcblxyXG59XHJcbn1cclxuIiwiXHJcbiAgICA8ZGl2IGNsYXNzPVwiY2FyZFwiPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY2FsZW5kYXItdG9vbGJhclwiPlxyXG4gICAgICAgIDwhLS0gPGJ1dHRvbiBjbGFzcz1cInByZXYgbW9udGgtYnRuXCI+XHJcbiAgICAgICAgICA8aSBjbGFzcz1cImZhcyBmYS1jaGV2cm9uLWxlZnRcIj48L2k+XHJcbiAgICAgICAgPC9idXR0b24+IC0tPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjdXJyZW50LW1vbnRoXCI+e3tjdXJyZW50TW9udGh9fTwvZGl2PlxyXG4gICAgICAgIDxidXR0b24gKGNsaWNrKT1cIm5leHRNb250aCgpXCIgY2xhc3M9XCJuZXh0IG1vbnRoLWJ0blwiPlxyXG4gICAgICAgICAgPGltZyBzcmM9XCIuLi8uLi9hc3NldHMvcmlnaHQtYXJyb3cucG5nXCI+XHJcbiAgICAgICAgICA8IS0tIDxpIGNsYXNzPVwiZmFzIGZhLWNoZXZyb24tcmlnaHRcIj48L2k+IC0tPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cImNhbGVuZGFyXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIndlZWtkYXlzXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwid2Vla2RheS1uYW1lXCIgc3R5bGU9XCJjb2xvcjpyZWRcIj5TdTwvZGl2PlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cIndlZWtkYXktbmFtZVwiPk1vPC9kaXY+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwid2Vla2RheS1uYW1lXCI+VHU8L2Rpdj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJ3ZWVrZGF5LW5hbWVcIj5XZTwvZGl2PlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cIndlZWtkYXktbmFtZVwiPlRoPC9kaXY+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwid2Vla2RheS1uYW1lXCI+RnI8L2Rpdj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJ3ZWVrZGF5LW5hbWVcIj5TYTwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3ZWVrZGF5c1wiPlxyXG4gICAgICAgICAgPGRpdiBbbmdDbGFzc109XCJ7ICdjdXJyZW50LWRheSc6IGRheT09PSBjdXJyZW50RGF0ZX1cIiAqbmdGb3I9XCJsZXQgZGF5IG9mIGRheXNcIiBjbGFzcz1cImRheS1saXN0XCI+e3tkYXl9fTwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDwhLS0gPGRpdiBjbGFzcz1cImdvdG8tYnV0dG9uc1wiPlxyXG4gICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiYnRuIHByZXYteWVhclwiPlByZXYgWWVhcjwvYnV0dG9uPlxyXG4gICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiYnRuIHRvZGF5XCI+VG9kYXk8L2J1dHRvbj5cclxuICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImJ0biBuZXh0LXllYXJcIj5OZXh0IFllYXI8L2J1dHRvbj5cclxuICAgICAgPC9kaXY+IC0tPlxyXG4gICAgPC9kaXY+XHJcbiJdfQ==