@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
95 lines (90 loc) • 15.3 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i4 from '@tapsellorg/angular-material-library/src/lib/loader';
import { PghLoader, PghLoaderModule } from '@tapsellorg/angular-material-library/src/lib/loader';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i5 from '@tapsellorg/angular-material-library/src/lib/common';
import { PghSafeModule } from '@tapsellorg/angular-material-library/src/lib/common';
class PghCreativePreviewComponent {
constructor() {
this.muted = signal(true);
this.landscape = signal(false);
this.loader = new PghLoader();
this.loadingType = true;
this.hasSoundType = signal(true);
this.hasError = signal(false);
this.creative = input(undefined, {
alias: 'pghCreative',
});
this.template = input(undefined, {
alias: 'pghTemplate',
});
this.type = input('video', {
alias: 'pghCreativeType',
});
}
ngOnChanges() {
this.checkType();
this.setMediaType();
this.setLoader();
}
checkType() {
if (['video', 'image', 'iframe'].includes(this.type()) && !this.creative()) {
throw new Error('PghCreativePreviewComponent: You must specify a creative.');
}
else if (this.type() === 'template' && !this.template()) {
throw new Error('PghCreativePreviewComponent: You must specify a template.');
}
}
setMediaType() {
this.loadingType = ['video', 'image', 'iframe'].includes(this.type());
this.hasSoundType.set(['video'].includes(this.type()));
}
setLoader() {
if (this.loadingType) {
this.loader.activate();
}
}
errorLoadingContent() {
this.loader.deactivate();
this.hasError.set(true);
}
contentLoaded() {
this.loader.deactivate();
}
toggleMute() {
this.muted.set(!this.muted());
}
toggleLandscape() {
this.landscape.set(!this.landscape());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghCreativePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghCreativePreviewComponent, isStandalone: false, selector: "pgh-creative-preview", inputs: { creative: { classPropertyName: "creative", publicName: "pghCreative", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "pghTemplate", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "pghCreativeType", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pgh-container\">\n <div class=\"m-2\">\n <button mat-icon-button (click)=\"toggleLandscape()\">\n <mat-icon svgIcon=\"screen_rotation\"></mat-icon>\n </button>\n </div>\n <div class=\"pgh-preview d-flex align-items-center justify-content-center\">\n <div class=\"pgh-device\" [class.landscape]=\"landscape()\">\n <div class=\"pgh-sleep\"></div>\n <div class=\"pgh-sensor\"></div>\n <div class=\"pgh-speaker\"></div>\n <div class=\"pgh-screen w-100 h-100\">\n <div class=\"pgh-ads-header d-flex justify-content-space-between p-2\">\n @if (hasSoundType()) { @if (!muted()) {\n <button mat-mini-fab color=\"gray\" (click)=\"toggleMute()\">\n <mat-icon svgIcon=\"volume_up\"></mat-icon>\n </button>\n } @if (muted()) {\n <button mat-mini-fab color=\"gray\" (click)=\"toggleMute()\">\n <mat-icon svgIcon=\"volume_off\"></mat-icon>\n </button>\n } }\n </div>\n <div class=\"pgh-ads-player d-flex align-items-center w-100 h-100\" [pghLoader]=\"loader\">\n @if (hasError()) {\n <div class=\"pgh-creative-error w-100 p-3\">\n \u0645\u0634\u06A9\u0644\u06CC \u062F\u0631 \u0644\u0648\u062F \u0645\u062D\u062A\u0648\u0627 \u067E\u06CC\u0634 \u0622\u0645\u062F\u0647\u060C \u0644\u0637\u0641\u0627 \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.\n <br />\n \u062F\u0631 \u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u0645\u0634\u06A9\u0644 \u0645\u062C\u062F\u062F\u0627 \u067E\u06CC\u0634 \u0622\u0645\u062F\u060C \u0644\u0637\u0641\u0627 \u0627\u0637\u0644\u0627\u0639 \u062F\u0647\u06CC\u062F.\n </div>\n } @if (!hasError()) { @if (type() === 'video') {\n <video\n [src]=\"creative()! | pghSafe : 'resourceUrl'\"\n [muted]=\"muted()\"\n autoplay\n (loadeddata)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n ></video>\n } @if (type() === 'image') {\n <img\n [src]=\"creative()! | pghSafe : 'resourceUrl'\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n />\n } @if (type() === 'iframe') {\n <iframe\n [src]=\"creative()! | pghSafe : 'resourceUrl'\"\n frameborder=\"0\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n ></iframe>\n } @if (type() === 'template') {\n <ng-container *ngTemplateOutlet=\"template()!\"></ng-container>\n } }\n </div>\n </div>\n <div class=\"pgh-home\"></div>\n </div>\n </div>\n</div>\n", styles: [".pgh-container{overflow:hidden;width:fit-content}.pgh-container .pgh-preview{height:700px;width:700px}.pgh-device{position:relative;box-sizing:content-box!important;padding-block:60px;padding-inline:18px;border-radius:42px;width:280px;height:497px;background:var(--fff)}.pgh-device .pgh-screen{z-index:3;overflow:hidden;border-radius:1px;box-shadow:0 0 0 3px var(--111);background:var(--000)}.pgh-device .pgh-screen .pgh-ads-header{z-index:4;position:absolute}.pgh-device .pgh-screen .pgh-ads-header>button{opacity:.7}.pgh-device .pgh-sleep{width:3px;height:100px;position:absolute;inset-inline-end:-3px;top:100px;background:var(--ccc);border-radius:2px}.pgh-device .pgh-speaker{width:68px;height:8px;position:absolute;top:20px;z-index:3;inset-inline-end:50%;margin-inline-end:-34px;background-color:var(--bbb);border-radius:4px}.pgh-device .pgh-sensor{position:absolute;top:20px;inset-inline-start:110px;background:var(--333);border-radius:100%;width:8px;height:8px;z-index:3}.pgh-device .pgh-home{position:absolute;z-index:3;bottom:17px;inset-inline-end:50%;width:70px;height:20px;background:var(--fff);border-radius:18px;margin-inline-end:-35px;border:2px solid var(--444)}.pgh-device.landscape{padding-block:18px;padding-inline:60px;width:497px;height:280px}.pgh-device.landscape .pgh-sleep{width:100px;height:3px;inset-inline-end:calc(100% - 200px);top:-3px}.pgh-device.landscape .pgh-speaker{height:68px;width:8px;inset-inline-end:calc(100% - 30px);top:50%;margin-inline-end:0;margin-top:-34px}.pgh-device.landscape .pgh-sensor{inset-inline-start:21px;top:calc(100% - 117px)}.pgh-device.landscape .pgh-home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-inline-end:0;inset-inline-end:17px}.pgh-ads-player>video{width:100%;height:100%}.pgh-ads-player>img{max-width:100%;max-height:100%}.pgh-ads-player>iframe{width:100%;height:100%}.pgh-creative-error{background-color:var(--fff)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "directive", type: i4.PghLoaderDirective, selector: "[pghLoader]", inputs: ["pghLoader", "color", "pghDisabledWhileLoading", "pghLoaderType"], exportAs: ["pghLoader"] }, { kind: "pipe", type: i5.PghSafePipe, name: "pghSafe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghCreativePreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-creative-preview', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"pgh-container\">\n <div class=\"m-2\">\n <button mat-icon-button (click)=\"toggleLandscape()\">\n <mat-icon svgIcon=\"screen_rotation\"></mat-icon>\n </button>\n </div>\n <div class=\"pgh-preview d-flex align-items-center justify-content-center\">\n <div class=\"pgh-device\" [class.landscape]=\"landscape()\">\n <div class=\"pgh-sleep\"></div>\n <div class=\"pgh-sensor\"></div>\n <div class=\"pgh-speaker\"></div>\n <div class=\"pgh-screen w-100 h-100\">\n <div class=\"pgh-ads-header d-flex justify-content-space-between p-2\">\n @if (hasSoundType()) { @if (!muted()) {\n <button mat-mini-fab color=\"gray\" (click)=\"toggleMute()\">\n <mat-icon svgIcon=\"volume_up\"></mat-icon>\n </button>\n } @if (muted()) {\n <button mat-mini-fab color=\"gray\" (click)=\"toggleMute()\">\n <mat-icon svgIcon=\"volume_off\"></mat-icon>\n </button>\n } }\n </div>\n <div class=\"pgh-ads-player d-flex align-items-center w-100 h-100\" [pghLoader]=\"loader\">\n @if (hasError()) {\n <div class=\"pgh-creative-error w-100 p-3\">\n \u0645\u0634\u06A9\u0644\u06CC \u062F\u0631 \u0644\u0648\u062F \u0645\u062D\u062A\u0648\u0627 \u067E\u06CC\u0634 \u0622\u0645\u062F\u0647\u060C \u0644\u0637\u0641\u0627 \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.\n <br />\n \u062F\u0631 \u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u0645\u0634\u06A9\u0644 \u0645\u062C\u062F\u062F\u0627 \u067E\u06CC\u0634 \u0622\u0645\u062F\u060C \u0644\u0637\u0641\u0627 \u0627\u0637\u0644\u0627\u0639 \u062F\u0647\u06CC\u062F.\n </div>\n } @if (!hasError()) { @if (type() === 'video') {\n <video\n [src]=\"creative()! | pghSafe : 'resourceUrl'\"\n [muted]=\"muted()\"\n autoplay\n (loadeddata)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n ></video>\n } @if (type() === 'image') {\n <img\n [src]=\"creative()! | pghSafe : 'resourceUrl'\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n />\n } @if (type() === 'iframe') {\n <iframe\n [src]=\"creative()! | pghSafe : 'resourceUrl'\"\n frameborder=\"0\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n ></iframe>\n } @if (type() === 'template') {\n <ng-container *ngTemplateOutlet=\"template()!\"></ng-container>\n } }\n </div>\n </div>\n <div class=\"pgh-home\"></div>\n </div>\n </div>\n</div>\n", styles: [".pgh-container{overflow:hidden;width:fit-content}.pgh-container .pgh-preview{height:700px;width:700px}.pgh-device{position:relative;box-sizing:content-box!important;padding-block:60px;padding-inline:18px;border-radius:42px;width:280px;height:497px;background:var(--fff)}.pgh-device .pgh-screen{z-index:3;overflow:hidden;border-radius:1px;box-shadow:0 0 0 3px var(--111);background:var(--000)}.pgh-device .pgh-screen .pgh-ads-header{z-index:4;position:absolute}.pgh-device .pgh-screen .pgh-ads-header>button{opacity:.7}.pgh-device .pgh-sleep{width:3px;height:100px;position:absolute;inset-inline-end:-3px;top:100px;background:var(--ccc);border-radius:2px}.pgh-device .pgh-speaker{width:68px;height:8px;position:absolute;top:20px;z-index:3;inset-inline-end:50%;margin-inline-end:-34px;background-color:var(--bbb);border-radius:4px}.pgh-device .pgh-sensor{position:absolute;top:20px;inset-inline-start:110px;background:var(--333);border-radius:100%;width:8px;height:8px;z-index:3}.pgh-device .pgh-home{position:absolute;z-index:3;bottom:17px;inset-inline-end:50%;width:70px;height:20px;background:var(--fff);border-radius:18px;margin-inline-end:-35px;border:2px solid var(--444)}.pgh-device.landscape{padding-block:18px;padding-inline:60px;width:497px;height:280px}.pgh-device.landscape .pgh-sleep{width:100px;height:3px;inset-inline-end:calc(100% - 200px);top:-3px}.pgh-device.landscape .pgh-speaker{height:68px;width:8px;inset-inline-end:calc(100% - 30px);top:50%;margin-inline-end:0;margin-top:-34px}.pgh-device.landscape .pgh-sensor{inset-inline-start:21px;top:calc(100% - 117px)}.pgh-device.landscape .pgh-home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-inline-end:0;inset-inline-end:17px}.pgh-ads-player>video{width:100%;height:100%}.pgh-ads-player>img{max-width:100%;max-height:100%}.pgh-ads-player>iframe{width:100%;height:100%}.pgh-creative-error{background-color:var(--fff)}\n"] }]
}], ctorParameters: () => [] });
class PghCreativePreviewModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghCreativePreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghCreativePreviewModule, declarations: [PghCreativePreviewComponent], imports: [CommonModule, MatIconModule, MatButtonModule, PghLoaderModule, PghSafeModule], exports: [PghCreativePreviewComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghCreativePreviewModule, imports: [CommonModule, MatIconModule, MatButtonModule, PghLoaderModule, PghSafeModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghCreativePreviewModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghCreativePreviewComponent],
imports: [CommonModule, MatIconModule, MatButtonModule, PghLoaderModule, PghSafeModule],
exports: [PghCreativePreviewComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghCreativePreviewComponent, PghCreativePreviewModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-creative-preview.mjs.map