@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
31 lines • 5.67 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../pipes/safe-html/safe-html.pipe";
export class QumlPopupComponent {
constructor() {
this.popUpClose = new EventEmitter();
}
ngAfterViewInit() {
const htmlTagElement = document.getElementById('htmlTag');
if (htmlTagElement) {
htmlTagElement.getElementsByTagName('img')[0].style.width = '70%';
}
}
closePopup() {
this.popUpClose.emit();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QumlPopupComponent, selector: "quml-quml-popup", inputs: { image: "image", htmlTag: "htmlTag" }, outputs: { popUpClose: "popUpClose" }, ngImport: i0, template: "<div class=\"quml-popup\">\n <div class=\"quml-popup-icon\" (click)=\"closePopup()\">✕</div>\n <img *ngIf=\"!htmlTag\" src={{image}} alt=\"Image\">\n</div>\n\n<div *ngIf=\"htmlTag\" class=\"htmlTag\" id=\"htmlTag\" [innerHtml]=\"htmlTag | safeHtml\"></div>\n\n", styles: [".quml-popup{position:absolute;inset:0;background:#0006;padding:1rem;display:flex;align-items:center;justify-content:center;z-index:2}.quml-popup .quml-popup-icon{font-size:1.25rem;right:10%;position:absolute;cursor:pointer;z-index:2;color:var(--white);top:8%}.quml-popup img{box-shadow:0 .25rem .5rem #0003;height:90%;border-radius:.5rem;position:absolute;z-index:2}.htmlTag{position:absolute;top:15%;left:27%;z-index:10}@media only screen and (max-width: 640px){.htmlTag{position:absolute;top:10%;left:27%;z-index:10}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlPopupComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-quml-popup', template: "<div class=\"quml-popup\">\n <div class=\"quml-popup-icon\" (click)=\"closePopup()\">✕</div>\n <img *ngIf=\"!htmlTag\" src={{image}} alt=\"Image\">\n</div>\n\n<div *ngIf=\"htmlTag\" class=\"htmlTag\" id=\"htmlTag\" [innerHtml]=\"htmlTag | safeHtml\"></div>\n\n", styles: [".quml-popup{position:absolute;inset:0;background:#0006;padding:1rem;display:flex;align-items:center;justify-content:center;z-index:2}.quml-popup .quml-popup-icon{font-size:1.25rem;right:10%;position:absolute;cursor:pointer;z-index:2;color:var(--white);top:8%}.quml-popup img{box-shadow:0 .25rem .5rem #0003;height:90%;border-radius:.5rem;position:absolute;z-index:2}.htmlTag{position:absolute;top:15%;left:27%;z-index:10}@media only screen and (max-width: 640px){.htmlTag{position:absolute;top:10%;left:27%;z-index:10}}\n"] }]
}], propDecorators: { image: [{
type: Input
}], htmlTag: [{
type: Input
}], popUpClose: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVtbC1wb3B1cC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9xdW1sLWxpYnJhcnkvc3JjL2xpYi9xdW1sLXBvcHVwL3F1bWwtcG9wdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcXVtbC1saWJyYXJ5L3NyYy9saWIvcXVtbC1wb3B1cC9xdW1sLXBvcHVwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3RGLE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFRWSxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztLQWEzQztJQVhDLGVBQWU7UUFDYixNQUFNLGNBQWMsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQzFELElBQUksY0FBYyxFQUFFO1lBQ2xCLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztTQUNuRTtJQUNILENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QixDQUFDO2tJQWRVLGtCQUFrQjtzSEFBbEIsa0JBQWtCLDhJQ1AvQiwrUUFPQTs7NEZEQWEsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGlCQUFpQjs4QkFLbEIsS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIEFmdGVyVmlld0luaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncXVtbC1xdW1sLXBvcHVwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3F1bWwtcG9wdXAuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9xdW1sLXBvcHVwLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgUXVtbFBvcHVwQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIGltYWdlO1xuICBASW5wdXQoKSBodG1sVGFnOiBhbnk7XG4gIEBPdXRwdXQoKSBwb3BVcENsb3NlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBjb25zdCBodG1sVGFnRWxlbWVudCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdodG1sVGFnJyk7XG4gICAgaWYgKGh0bWxUYWdFbGVtZW50KSB7XG4gICAgICBodG1sVGFnRWxlbWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnaW1nJylbMF0uc3R5bGUud2lkdGggPSAnNzAlJztcbiAgICB9XG4gIH1cblxuICBjbG9zZVBvcHVwKCkge1xuICAgIHRoaXMucG9wVXBDbG9zZS5lbWl0KCk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInF1bWwtcG9wdXBcIj5cbiAgPGRpdiBjbGFzcz1cInF1bWwtcG9wdXAtaWNvblwiIChjbGljayk9XCJjbG9zZVBvcHVwKClcIj4mIzEwMDA1OzwvZGl2PlxuICA8aW1nICpuZ0lmPVwiIWh0bWxUYWdcIiBzcmM9e3tpbWFnZX19IGFsdD1cIkltYWdlXCI+XG48L2Rpdj5cblxuPGRpdiAqbmdJZj1cImh0bWxUYWdcIiBjbGFzcz1cImh0bWxUYWdcIiBpZD1cImh0bWxUYWdcIiBbaW5uZXJIdG1sXT1cImh0bWxUYWcgfCBzYWZlSHRtbFwiPjwvZGl2PlxuXG4iXX0=