UNPKG

@tekdi/sunbird-quml-player

Version:

The QuML player library components are powered by Angular. This player is primarily designed to be used on Sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability and maintainability, hence reducing the redundant d

59 lines 18.7 kB
import { Component, EventEmitter, Output } from '@angular/core'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; export class ProgressIndicatorsComponent { constructor() { this.close = new EventEmitter(); this.indicators = [ { iconText: '1', title: 'Correct', class: 'correct' }, { iconText: '1', title: 'Incorrect', class: 'incorrect' }, { iconText: '1', title: 'Attempted', class: 'attempted' }, { iconText: '1', title: 'Not viewed', class: '' }, { iconText: '1', title: 'Skipped', class: 'skipped' }, { iconText: '1', title: 'Current', class: 'current' }, { iconText: 'i', title: 'Info page', class: '' }, { iconText: '<img src="./assets/flag_active.svg" alt="Flag logo: Show scoreboard">', title: 'Summary page', class: '' } ]; } /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressIndicatorsComponent, selector: "quml-progress-indicators", outputs: { close: "close" }, ngImport: i0, template: "<div class=\"progress-indicators\">\n <div class=\"progress-indicators__overlay\">\n <div class=\"progress-indicators__popup\" aria-modal=\"true\">\n <div class=\"close-btn\" (click)=\"close.emit(true)\">\n <button type=\"button\" id=\"close\" class=\"close-icon\" data-animation=\"showShadow\"\n aria-label=\"player-close-btn\"></button>\n </div>\n <div class=\"progress-indicators__metadata\">\n <h5 class=\"progress-indicators__title text-left\">Progress bar indicators</h5>\n <div class=\"progress-indicators__content\">\n <div class=\"progress-indicators__item\" *ngFor=\"let item of indicators\">\n <span class=\"default\" [ngClass]=\"item.class ? item.class : ''\" [innerHtml]=\"item.iconText\"></span>\n <p>{{item.title}}</p>\n </div>\n </div>\n <div class=\"progress-indicators__action-btns\">\n <button type=\"button\" class=\"sb-btn sb-btn-normal sb-btn-primary sb-btn-radius submit-btn\"\n (click)=\"close.emit(true)\">Close</button>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":host .progress-indicators{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .3s;opacity:1}:host .progress-indicators__overlay{width:100%;height:100%;background:rgba(var(--rc-rgba-black),.5);display:flex;align-items:center;justify-content:center;transition:all .3s}:host .progress-indicators__popup{width:90%;max-width:22.5rem;min-height:13.125rem;background:var(--white);border-radius:1rem;box-shadow:0 0 1.5em rgba(var(--rc-rgba-black),.22);padding:1.5rem;position:relative;transition:all .3s ease-in;transform:scale(.5);transform:scale(1)}:host .progress-indicators__close-btn{position:absolute;top:.75rem;right:.75rem;width:1.5rem;height:1.5rem;cursor:pointer}:host .progress-indicators__close-btn img{max-width:100%}:host .progress-indicators__metadata{display:flex;flex-direction:column;height:100%}:host .progress-indicators__title{font-size:1rem;font-weight:700;line-height:1.375rem;word-break:break-word}:host .progress-indicators__content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}:host .progress-indicators__content div{width:50%}:host .progress-indicators__item{display:flex;align-items:center;justify-content:flex-start;margin-bottom:1rem}:host .progress-indicators__item p{padding-left:8px;margin:0}:host .progress-indicators__text{color:var(--gray-400);word-break:break-word}:host .progress-indicators__size{color:var(--black)}:host .progress-indicators__text,:host .progress-indicators__size{font-size:.875rem;line-height:1.25rem}:host .progress-indicators__title,:host .progress-indicators__text,:host .progress-indicators__size{margin:0 0 1.5em}:host .progress-indicators__action-btns{display:flex;align-items:center;justify-content:flex-end}:host .progress-indicators__action-btns .cancel-btn,:host .progress-indicators__action-btns .submit-btn{outline:none;border:none;font-size:.75rem;text-transform:uppercase;cursor:pointer;line-height:normal}:host .progress-indicators .close-btn{position:absolute;top:.75rem;right:.75rem}:host .progress-indicators .close-btn .close-icon{width:1.875rem;height:1.875rem;background:0 0;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0}:host .progress-indicators .close-btn .close-icon:after{content:\"\";transform:rotate(-45deg)}:host .progress-indicators .close-btn .close-icon:before{content:\"\";transform:rotate(45deg)}:host .progress-indicators .close-btn .close-icon:after,:host .progress-indicators .close-btn .close-icon:before{content:\"\";width:1.25rem;height:.125rem;position:absolute;background-color:var(--black)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]{box-shadow:0 0 0 0 var(--red) inset;transition:.2s cubic-bezier(.175,.885,.52,1.775);border:0px solid var(--white)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:before{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:after{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover{box-shadow:0 0 0 .25rem var(--red) inset}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:before{transform:scale(.7) rotate(45deg);transition-delay:.1s;background-color:var(--red)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:after{transform:scale(.7) rotate(-45deg);transition-delay:.1s;background-color:var(--red)}:host .default{background-color:var(--quml-question-bg);border-radius:50%;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid #ccc;font-size:.8rem;font-weight:700;line-height:1.6rem}:host .correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg);color:var(--white);border:0 solid transparent}:host .incorrect{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg);color:var(--white);border:0 solid transparent}:host .skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}:host .current{color:var(--primary-color);border:.0625rem solid var(--primary-color)}:host .current:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}:host .attempted{color:var(--white);background:var(--primary-color)}::ng-deep html[dir=rtl] .close-btn{left:.75rem;right:auto}\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: "16.2.12", ngImport: i0, type: ProgressIndicatorsComponent, decorators: [{ type: Component, args: [{ selector: 'quml-progress-indicators', template: "<div class=\"progress-indicators\">\n <div class=\"progress-indicators__overlay\">\n <div class=\"progress-indicators__popup\" aria-modal=\"true\">\n <div class=\"close-btn\" (click)=\"close.emit(true)\">\n <button type=\"button\" id=\"close\" class=\"close-icon\" data-animation=\"showShadow\"\n aria-label=\"player-close-btn\"></button>\n </div>\n <div class=\"progress-indicators__metadata\">\n <h5 class=\"progress-indicators__title text-left\">Progress bar indicators</h5>\n <div class=\"progress-indicators__content\">\n <div class=\"progress-indicators__item\" *ngFor=\"let item of indicators\">\n <span class=\"default\" [ngClass]=\"item.class ? item.class : ''\" [innerHtml]=\"item.iconText\"></span>\n <p>{{item.title}}</p>\n </div>\n </div>\n <div class=\"progress-indicators__action-btns\">\n <button type=\"button\" class=\"sb-btn sb-btn-normal sb-btn-primary sb-btn-radius submit-btn\"\n (click)=\"close.emit(true)\">Close</button>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":host .progress-indicators{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .3s;opacity:1}:host .progress-indicators__overlay{width:100%;height:100%;background:rgba(var(--rc-rgba-black),.5);display:flex;align-items:center;justify-content:center;transition:all .3s}:host .progress-indicators__popup{width:90%;max-width:22.5rem;min-height:13.125rem;background:var(--white);border-radius:1rem;box-shadow:0 0 1.5em rgba(var(--rc-rgba-black),.22);padding:1.5rem;position:relative;transition:all .3s ease-in;transform:scale(.5);transform:scale(1)}:host .progress-indicators__close-btn{position:absolute;top:.75rem;right:.75rem;width:1.5rem;height:1.5rem;cursor:pointer}:host .progress-indicators__close-btn img{max-width:100%}:host .progress-indicators__metadata{display:flex;flex-direction:column;height:100%}:host .progress-indicators__title{font-size:1rem;font-weight:700;line-height:1.375rem;word-break:break-word}:host .progress-indicators__content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}:host .progress-indicators__content div{width:50%}:host .progress-indicators__item{display:flex;align-items:center;justify-content:flex-start;margin-bottom:1rem}:host .progress-indicators__item p{padding-left:8px;margin:0}:host .progress-indicators__text{color:var(--gray-400);word-break:break-word}:host .progress-indicators__size{color:var(--black)}:host .progress-indicators__text,:host .progress-indicators__size{font-size:.875rem;line-height:1.25rem}:host .progress-indicators__title,:host .progress-indicators__text,:host .progress-indicators__size{margin:0 0 1.5em}:host .progress-indicators__action-btns{display:flex;align-items:center;justify-content:flex-end}:host .progress-indicators__action-btns .cancel-btn,:host .progress-indicators__action-btns .submit-btn{outline:none;border:none;font-size:.75rem;text-transform:uppercase;cursor:pointer;line-height:normal}:host .progress-indicators .close-btn{position:absolute;top:.75rem;right:.75rem}:host .progress-indicators .close-btn .close-icon{width:1.875rem;height:1.875rem;background:0 0;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0}:host .progress-indicators .close-btn .close-icon:after{content:\"\";transform:rotate(-45deg)}:host .progress-indicators .close-btn .close-icon:before{content:\"\";transform:rotate(45deg)}:host .progress-indicators .close-btn .close-icon:after,:host .progress-indicators .close-btn .close-icon:before{content:\"\";width:1.25rem;height:.125rem;position:absolute;background-color:var(--black)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]{box-shadow:0 0 0 0 var(--red) inset;transition:.2s cubic-bezier(.175,.885,.52,1.775);border:0px solid var(--white)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:before{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:after{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover{box-shadow:0 0 0 .25rem var(--red) inset}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:before{transform:scale(.7) rotate(45deg);transition-delay:.1s;background-color:var(--red)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:after{transform:scale(.7) rotate(-45deg);transition-delay:.1s;background-color:var(--red)}:host .default{background-color:var(--quml-question-bg);border-radius:50%;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid #ccc;font-size:.8rem;font-weight:700;line-height:1.6rem}:host .correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg);color:var(--white);border:0 solid transparent}:host .incorrect{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg);color:var(--white);border:0 solid transparent}:host .skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}:host .current{color:var(--primary-color);border:.0625rem solid var(--primary-color)}:host .current:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}:host .attempted{color:var(--white);background:var(--primary-color)}::ng-deep html[dir=rtl] .close-btn{left:.75rem;right:auto}\n"] }] }], propDecorators: { close: [{ type: Output }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtaW5kaWNhdG9ycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9xdW1sLWxpYnJhcnkvc3JjL2xpYi9wcm9ncmVzcy1pbmRpY2F0b3JzL3Byb2dyZXNzLWluZGljYXRvcnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcXVtbC1saWJyYXJ5L3NyYy9saWIvcHJvZ3Jlc3MtaW5kaWNhdG9ycy9wcm9ncmVzcy1pbmRpY2F0b3JzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBWWhFLE1BQU0sT0FBTywyQkFBMkI7SUFMeEM7UUFPWSxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUM5QyxlQUFVLEdBQWlCO1lBQ3pCO2dCQUNFLFFBQVEsRUFBRSxHQUFHO2dCQUNiLEtBQUssRUFBRSxTQUFTO2dCQUNoQixLQUFLLEVBQUUsU0FBUzthQUNqQjtZQUNEO2dCQUNFLFFBQVEsRUFBRSxHQUFHO2dCQUNiLEtBQUssRUFBRSxXQUFXO2dCQUNsQixLQUFLLEVBQUUsV0FBVzthQUNuQjtZQUNEO2dCQUNFLFFBQVEsRUFBRSxHQUFHO2dCQUNiLEtBQUssRUFBRSxXQUFXO2dCQUNsQixLQUFLLEVBQUUsV0FBVzthQUNuQjtZQUNEO2dCQUNFLFFBQVEsRUFBRSxHQUFHO2dCQUNiLEtBQUssRUFBRSxZQUFZO2dCQUNuQixLQUFLLEVBQUUsRUFBRTthQUNWO1lBQ0Q7Z0JBQ0UsUUFBUSxFQUFFLEdBQUc7Z0JBQ2IsS0FBSyxFQUFFLFNBQVM7Z0JBQ2hCLEtBQUssRUFBRSxTQUFTO2FBQ2pCO1lBQ0Q7Z0JBQ0UsUUFBUSxFQUFFLEdBQUc7Z0JBQ2IsS0FBSyxFQUFFLFNBQVM7Z0JBQ2hCLEtBQUssRUFBRSxTQUFTO2FBQ2pCO1lBQ0Q7Z0JBQ0UsUUFBUSxFQUFFLEdBQUc7Z0JBQ2IsS0FBSyxFQUFFLFdBQVc7Z0JBQ2xCLEtBQUssRUFBRSxFQUFFO2FBQ1Y7WUFDRDtnQkFDRSxRQUFRLEVBQUUsdUVBQXVFO2dCQUNqRixLQUFLLEVBQUUsY0FBYztnQkFDckIsS0FBSyxFQUFFLEVBQUU7YUFDVjtTQUFDLENBQUM7S0FDTjtrSUE1Q1ksMkJBQTJCO3NIQUEzQiwyQkFBMkIsNkZDWnhDLDBtQ0FzQk07OzRGRFZPLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDRSwwQkFBMEI7OEJBTTFCLEtBQUs7c0JBQWQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBJSW5kaWNhdG9yIHtcbiAgaWNvblRleHQ6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgY2xhc3M6IHN0cmluZztcbn1cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3F1bWwtcHJvZ3Jlc3MtaW5kaWNhdG9ycycsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy1pbmRpY2F0b3JzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtaW5kaWNhdG9ycy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzSW5kaWNhdG9yc0NvbXBvbmVudCB7XG5cbiAgQE91dHB1dCgpIGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBpbmRpY2F0b3JzOiBJSW5kaWNhdG9yW10gPSBbXG4gICAge1xuICAgICAgaWNvblRleHQ6ICcxJyxcbiAgICAgIHRpdGxlOiAnQ29ycmVjdCcsXG4gICAgICBjbGFzczogJ2NvcnJlY3QnXG4gICAgfSxcbiAgICB7XG4gICAgICBpY29uVGV4dDogJzEnLFxuICAgICAgdGl0bGU6ICdJbmNvcnJlY3QnLFxuICAgICAgY2xhc3M6ICdpbmNvcnJlY3QnXG4gICAgfSxcbiAgICB7XG4gICAgICBpY29uVGV4dDogJzEnLFxuICAgICAgdGl0bGU6ICdBdHRlbXB0ZWQnLFxuICAgICAgY2xhc3M6ICdhdHRlbXB0ZWQnXG4gICAgfSxcbiAgICB7XG4gICAgICBpY29uVGV4dDogJzEnLFxuICAgICAgdGl0bGU6ICdOb3Qgdmlld2VkJyxcbiAgICAgIGNsYXNzOiAnJ1xuICAgIH0sXG4gICAge1xuICAgICAgaWNvblRleHQ6ICcxJyxcbiAgICAgIHRpdGxlOiAnU2tpcHBlZCcsXG4gICAgICBjbGFzczogJ3NraXBwZWQnXG4gICAgfSxcbiAgICB7XG4gICAgICBpY29uVGV4dDogJzEnLFxuICAgICAgdGl0bGU6ICdDdXJyZW50JyxcbiAgICAgIGNsYXNzOiAnY3VycmVudCdcbiAgICB9LFxuICAgIHtcbiAgICAgIGljb25UZXh0OiAnaScsXG4gICAgICB0aXRsZTogJ0luZm8gcGFnZScsXG4gICAgICBjbGFzczogJydcbiAgICB9LFxuICAgIHtcbiAgICAgIGljb25UZXh0OiAnPGltZyBzcmM9XCIuL2Fzc2V0cy9mbGFnX2FjdGl2ZS5zdmdcIiBhbHQ9XCJGbGFnIGxvZ286IFNob3cgc2NvcmVib2FyZFwiPicsXG4gICAgICB0aXRsZTogJ1N1bW1hcnkgcGFnZScsXG4gICAgICBjbGFzczogJydcbiAgICB9XTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJwcm9ncmVzcy1pbmRpY2F0b3JzXCI+XG4gIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1pbmRpY2F0b3JzX19vdmVybGF5XCI+XG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWluZGljYXRvcnNfX3BvcHVwXCIgYXJpYS1tb2RhbD1cInRydWVcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjbG9zZS1idG5cIiAoY2xpY2spPVwiY2xvc2UuZW1pdCh0cnVlKVwiPlxuICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBpZD1cImNsb3NlXCIgY2xhc3M9XCJjbG9zZS1pY29uXCIgZGF0YS1hbmltYXRpb249XCJzaG93U2hhZG93XCJcbiAgICAgICAgICBhcmlhLWxhYmVsPVwicGxheWVyLWNsb3NlLWJ0blwiPjwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtaW5kaWNhdG9yc19fbWV0YWRhdGFcIj5cbiAgICAgICAgPGg1IGNsYXNzPVwicHJvZ3Jlc3MtaW5kaWNhdG9yc19fdGl0bGUgdGV4dC1sZWZ0XCI+UHJvZ3Jlc3MgYmFyIGluZGljYXRvcnM8L2g1PlxuICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtaW5kaWNhdG9yc19fY29udGVudFwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1pbmRpY2F0b3JzX19pdGVtXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaW5kaWNhdG9yc1wiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJkZWZhdWx0XCIgW25nQ2xhc3NdPVwiaXRlbS5jbGFzcyA/IGl0ZW0uY2xhc3MgOiAnJ1wiIFtpbm5lckh0bWxdPVwiaXRlbS5pY29uVGV4dFwiPjwvc3Bhbj5cbiAgICAgICAgICAgIDxwPnt7aXRlbS50aXRsZX19PC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWluZGljYXRvcnNfX2FjdGlvbi1idG5zXCI+XG4gICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJzYi1idG4gc2ItYnRuLW5vcm1hbCBzYi1idG4tcHJpbWFyeSBzYi1idG4tcmFkaXVzIHN1Ym1pdC1idG5cIlxuICAgICAgICAgICAgKGNsaWNrKT1cImNsb3NlLmVtaXQodHJ1ZSlcIj5DbG9zZTwvYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==