@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
47 lines • 11.5 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../util-service";
import * as i2 from "@angular/common";
import * as i3 from "../icon/close/close.component";
import * as i4 from "../pipes/safe-html/safe-html.pipe";
export class McqSolutionsComponent {
constructor(utilService) {
this.utilService = utilService;
this.close = new EventEmitter();
}
closeSolution() {
if (this.solutionVideoPlayer) {
this.solutionVideoPlayer.nativeElement.pause();
}
this.close.emit({
close: true
});
}
ngAfterViewInit() {
this.utilService.updateSourceOfVideoElement(this.baseUrl, this.media, this.identifier);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqSolutionsComponent, deps: [{ token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: McqSolutionsComponent, selector: "quml-mcq-solutions", inputs: { question: "question", options: "options", solutions: "solutions", baseUrl: "baseUrl", media: "media", identifier: "identifier" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "solutionVideoPlayer", first: true, predicate: ["solutionVideoPlayer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"solutions\">\n <div class=\"close-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Close\" (click)=\"closeSolution()\" (keydown.enter)=\"closeSolution()\">\n <quml-close tabindex=\"-1\"></quml-close>\n </div>\n <div class=\"solution-header\">Question</div>\n <div [innerHtml]=\"question | safeHtml\"></div>\n <div class=\"solution-header\">Options</div>\n <div class=\"solution-options-container\">\n <div class=\"solution-options\" *ngFor=\"let option of options\">\n <div [innerHtml]=\"option.label | safeHtml\"></div>\n </div>\n</div>\n <ng-container *ngIf=\"solutions\">\n <div class=\"solution-header\">Solution</div>\n <div *ngIf=\"!showVideoSolution\">\n <div *ngFor=\"let solution of solutions | keyvalue\">\n <div [innerHtml]=\"solution.value | safeHtml\"></div>\n </div>\n </div>\n</ng-container>\n <div class=\"scoreboard-button-container\">\n <button type=\"submit\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius\" (click)=\"closeSolution()\">Done</button>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-close-icon: #000}.solutions{top:0;left:0;width:100%;height:100%;padding:1rem;overflow:auto}.solution-header{color:var(--gray-800);font-size:.875rem;font-weight:700;margin:1rem 0;clear:both}.close-icon{float:right;cursor:pointer;width:3rem;height:3rem;border-radius:50%;padding:.25rem}.close-icon:hover{background:#00000026}.close-icon:hover quml-close svg polygon#Shape{fill:var(--white)}.close-icon quml-close{display:flex;align-items:center;justify-content:center}.close-icon quml-close svg g polygon:first-child{fill:var(--quml-close-icon)}.video-container{text-align:center;margin:.5rem auto}.scoreboard-button-container{text-align:center;clear:both;margin:1rem 0}.solution-options-container .solution-options{margin-bottom:.5rem}.image-style-align-right{float:right!important;text-align:right!important;margin-left:.5rem!important}.image-style-align-left{float:left!important;text-align:left!important;margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CloseComponent, selector: "quml-close" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqSolutionsComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-mcq-solutions', template: "<div class=\"solutions\">\n <div class=\"close-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Close\" (click)=\"closeSolution()\" (keydown.enter)=\"closeSolution()\">\n <quml-close tabindex=\"-1\"></quml-close>\n </div>\n <div class=\"solution-header\">Question</div>\n <div [innerHtml]=\"question | safeHtml\"></div>\n <div class=\"solution-header\">Options</div>\n <div class=\"solution-options-container\">\n <div class=\"solution-options\" *ngFor=\"let option of options\">\n <div [innerHtml]=\"option.label | safeHtml\"></div>\n </div>\n</div>\n <ng-container *ngIf=\"solutions\">\n <div class=\"solution-header\">Solution</div>\n <div *ngIf=\"!showVideoSolution\">\n <div *ngFor=\"let solution of solutions | keyvalue\">\n <div [innerHtml]=\"solution.value | safeHtml\"></div>\n </div>\n </div>\n</ng-container>\n <div class=\"scoreboard-button-container\">\n <button type=\"submit\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius\" (click)=\"closeSolution()\">Done</button>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-close-icon: #000}.solutions{top:0;left:0;width:100%;height:100%;padding:1rem;overflow:auto}.solution-header{color:var(--gray-800);font-size:.875rem;font-weight:700;margin:1rem 0;clear:both}.close-icon{float:right;cursor:pointer;width:3rem;height:3rem;border-radius:50%;padding:.25rem}.close-icon:hover{background:#00000026}.close-icon:hover quml-close svg polygon#Shape{fill:var(--white)}.close-icon quml-close{display:flex;align-items:center;justify-content:center}.close-icon quml-close svg g polygon:first-child{fill:var(--quml-close-icon)}.video-container{text-align:center;margin:.5rem auto}.scoreboard-button-container{text-align:center;clear:both;margin:1rem 0}.solution-options-container .solution-options{margin-bottom:.5rem}.image-style-align-right{float:right!important;text-align:right!important;margin-left:.5rem!important}.image-style-align-left{float:left!important;text-align:left!important;margin-right:.5rem!important}\n"] }]
}], ctorParameters: function () { return [{ type: i1.UtilService }]; }, propDecorators: { question: [{
type: Input
}], options: [{
type: Input
}], solutions: [{
type: Input
}], baseUrl: [{
type: Input
}], media: [{
type: Input
}], identifier: [{
type: Input
}], close: [{
type: Output
}], solutionVideoPlayer: [{
type: ViewChild,
args: ['solutionVideoPlayer', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWNxLXNvbHV0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9xdW1sLWxpYnJhcnkvc3JjL2xpYi9tY3Etc29sdXRpb25zL21jcS1zb2x1dGlvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcXVtbC1saWJyYXJ5L3NyYy9saWIvbWNxLXNvbHV0aW9ucy9tY3Etc29sdXRpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUE2QixNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBTzdHLE1BQU0sT0FBTyxxQkFBcUI7SUFhaEMsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFObEMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFNUyxDQUFDO0lBRS9DLGFBQWE7UUFDWCxJQUFJLElBQUksQ0FBQyxtQkFBbUIsRUFBRTtZQUM1QixJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2hEO1FBQ0QsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUM7WUFDZCxLQUFLLEVBQUUsSUFBSTtTQUNaLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFdBQVcsQ0FBQywwQkFBMEIsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3pGLENBQUM7a0lBMUJVLHFCQUFxQjtzSEFBckIscUJBQXFCLDZXQ1BsQyxnbENBdUJNOzs0RkRoQk8scUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLG9CQUFvQjtrR0FLckIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0ksS0FBSztzQkFBZCxNQUFNO2dCQUM0QyxtQkFBbUI7c0JBQXJFLFNBQVM7dUJBQUMscUJBQXFCLEVBQUcsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiwgQWZ0ZXJWaWV3SW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVXRpbFNlcnZpY2UgfSBmcm9tICcuLi91dGlsLXNlcnZpY2UnO1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncXVtbC1tY3Etc29sdXRpb25zJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21jcS1zb2x1dGlvbnMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tY3Etc29sdXRpb25zLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTWNxU29sdXRpb25zQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCAge1xuICBASW5wdXQoKSBxdWVzdGlvbjogYW55O1xuICBASW5wdXQoKSBvcHRpb25zOiBhbnk7XG4gIEBJbnB1dCgpIHNvbHV0aW9uczogYW55O1xuICBASW5wdXQoKSBiYXNlVXJsOiBzdHJpbmc7XG4gIEBJbnB1dCgpIG1lZGlhOiBhbnk7XG4gIEBJbnB1dCgpIGlkZW50aWZpZXI6IHN0cmluZztcbiAgQE91dHB1dCgpIGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAVmlld0NoaWxkKCdzb2x1dGlvblZpZGVvUGxheWVyJyAsIHtzdGF0aWM6IHRydWV9KSBzb2x1dGlvblZpZGVvUGxheWVyOiBFbGVtZW50UmVmO1xuICBcbiAgc2hvd1ZpZGVvU29sdXRpb246IGJvb2xlYW47XG4gIHByZXZpb3VzQWN0aXZlRWxlbWVudDogSFRNTEVsZW1lbnQ7XG4gIFxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHV0aWxTZXJ2aWNlOiBVdGlsU2VydmljZSl7fVxuXG4gIGNsb3NlU29sdXRpb24oKSB7XG4gICAgaWYgKHRoaXMuc29sdXRpb25WaWRlb1BsYXllcikge1xuICAgICAgdGhpcy5zb2x1dGlvblZpZGVvUGxheWVyLm5hdGl2ZUVsZW1lbnQucGF1c2UoKTtcbiAgICB9XG4gICAgdGhpcy5jbG9zZS5lbWl0KHtcbiAgICAgIGNsb3NlOiB0cnVlXG4gICAgfSk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy51dGlsU2VydmljZS51cGRhdGVTb3VyY2VPZlZpZGVvRWxlbWVudCh0aGlzLmJhc2VVcmwsIHRoaXMubWVkaWEsIHRoaXMuaWRlbnRpZmllcik7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInNvbHV0aW9uc1wiPlxuICAgIDxkaXYgY2xhc3M9XCJjbG9zZS1pY29uXCIgcm9sZT1cImJ1dHRvblwiIHRhYmluZGV4PVwiMFwiIGFyaWEtbGFiZWw9XCJDbG9zZVwiICAoY2xpY2spPVwiY2xvc2VTb2x1dGlvbigpXCIgKGtleWRvd24uZW50ZXIpPVwiY2xvc2VTb2x1dGlvbigpXCI+XG4gICAgICAgIDxxdW1sLWNsb3NlIHRhYmluZGV4PVwiLTFcIj48L3F1bWwtY2xvc2U+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNvbHV0aW9uLWhlYWRlclwiPlF1ZXN0aW9uPC9kaXY+XG4gICAgPGRpdiBbaW5uZXJIdG1sXT1cInF1ZXN0aW9uIHwgc2FmZUh0bWxcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic29sdXRpb24taGVhZGVyXCI+T3B0aW9uczwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzb2x1dGlvbi1vcHRpb25zLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJzb2x1dGlvbi1vcHRpb25zXCIgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCI+XG4gICAgICAgIDxkaXYgW2lubmVySHRtbF09XCJvcHRpb24ubGFiZWwgfCBzYWZlSHRtbFwiPjwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInNvbHV0aW9uc1wiPlxuICAgIDxkaXYgY2xhc3M9XCJzb2x1dGlvbi1oZWFkZXJcIj5Tb2x1dGlvbjwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCIhc2hvd1ZpZGVvU29sdXRpb25cIj5cbiAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgc29sdXRpb24gb2Ygc29sdXRpb25zIHwga2V5dmFsdWVcIj5cbiAgICAgICAgICAgIDxkaXYgIFtpbm5lckh0bWxdPVwic29sdXRpb24udmFsdWUgfCBzYWZlSHRtbFwiPjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvbmctY29udGFpbmVyPlxuICAgIDxkaXYgY2xhc3M9XCJzY29yZWJvYXJkLWJ1dHRvbi1jb250YWluZXJcIj5cbiAgICAgICAgPGJ1dHRvbiB0eXBlPVwic3VibWl0XCIgY2xhc3M9XCJzYi1idG4gc2ItYnRuLXByaW1hcnkgc2ItYnRuLW5vcm1hbCBzYi1idG4tcmFkaXVzXCIgKGNsaWNrKT1cImNsb3NlU29sdXRpb24oKVwiPkRvbmU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==