@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
131 lines (125 loc) • 10.9 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, HostListener, Directive, NgModule } from '@angular/core';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import * as i3 from '@tapsellorg/angular-material-library/src/lib/loader';
import { PghLoader, PghLoaderModule } from '@tapsellorg/angular-material-library/src/lib/loader';
import * as i4 from '@tapsellorg/angular-material-library/src/lib/common';
import { PghSafePipe, PghSafeModule } from '@tapsellorg/angular-material-library/src/lib/common';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class PghLightboxComponent {
constructor(matDialogRef, dialogData) {
this.matDialogRef = matDialogRef;
this.dialogData = dialogData;
this.loader = new PghLoader();
this.hasError = signal(false);
this.type = signal('image');
this.loadingType = signal(true); // default type is `image`
this.loadingMediaTitle = signal('');
this.matDialogRef.addPanelClass('pgh-lightbox-dialog');
this.handleLightboxType();
if (this.loadingType()) {
this.loader.activate();
}
}
handleLightboxType() {
this.type.set(this.dialogData.type);
if (this.type() === 'image') {
this.loadingType.set(true);
this.loadingMediaTitle.set('تصویر');
}
else if (this.type() === 'iframe') {
this.loadingType.set(true);
this.loadingMediaTitle.set('محتوا');
}
else {
this.loadingType.set(false);
}
}
contentLoaded() {
this.loader.deactivate();
}
errorLoadingContent() {
this.loader.deactivate();
this.hasError.set(true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghLightboxComponent, isStandalone: false, selector: "pgh-lightbox", providers: [PghSafePipe], ngImport: i0, template: "@if (!loadingType()) {\n<div class=\"pgh-lightbox-container\">\n <ng-container *ngTemplateOutlet=\"dialogData.template!\"></ng-container>\n</div>\n} @if (loadingType()) {\n<div class=\"pgh-lightbox-container\" [pghLoader]=\"loader\">\n @if (hasError()) {\n <div class=\"pgh-lightbox-error\">\n <div>\n \u0645\u0634\u06A9\u0644\u06CC \u062F\u0631 \u0644\u0648\u062F\n <span>{{ loadingMediaTitle() }}</span>\n \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 </div>\n } @if (!hasError() && type() === 'image') {\n <img\n [src]=\"dialogData.src! | pghSafe : 'resourceUrl'\"\n alt=\"\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n />\n } @if (!hasError() && type() === 'iframe') {\n <iframe\n class=\"pgh-lightbox-iframe\"\n [src]=\"dialogData.src! | pghSafe : 'resourceUrl'\"\n frameborder=\"0\"\n width=\"1000\"\n height=\"1000\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n ></iframe>\n }\n</div>\n}\n", styles: [".pgh-lightbox-dialog .mat-mdc-dialog-container{max-height:95vh;padding:1rem}.pgh-lightbox-container{min-height:12.5rem;min-width:12.5rem}.pgh-lightbox-error{width:12.5rem;height:12.5rem;display:flex;justify-content:center;align-items:center;text-align:center}.pgh-lightbox-iframe{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PghLoaderDirective, selector: "[pghLoader]", inputs: ["pghLoader", "color", "pghDisabledWhileLoading", "pghLoaderType"], exportAs: ["pghLoader"] }, { kind: "pipe", type: i4.PghSafePipe, name: "pghSafe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-lightbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [PghSafePipe], standalone: false, template: "@if (!loadingType()) {\n<div class=\"pgh-lightbox-container\">\n <ng-container *ngTemplateOutlet=\"dialogData.template!\"></ng-container>\n</div>\n} @if (loadingType()) {\n<div class=\"pgh-lightbox-container\" [pghLoader]=\"loader\">\n @if (hasError()) {\n <div class=\"pgh-lightbox-error\">\n <div>\n \u0645\u0634\u06A9\u0644\u06CC \u062F\u0631 \u0644\u0648\u062F\n <span>{{ loadingMediaTitle() }}</span>\n \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 </div>\n } @if (!hasError() && type() === 'image') {\n <img\n [src]=\"dialogData.src! | pghSafe : 'resourceUrl'\"\n alt=\"\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n />\n } @if (!hasError() && type() === 'iframe') {\n <iframe\n class=\"pgh-lightbox-iframe\"\n [src]=\"dialogData.src! | pghSafe : 'resourceUrl'\"\n frameborder=\"0\"\n width=\"1000\"\n height=\"1000\"\n (load)=\"contentLoaded()\"\n (error)=\"errorLoadingContent()\"\n ></iframe>\n }\n</div>\n}\n", styles: [".pgh-lightbox-dialog .mat-mdc-dialog-container{max-height:95vh;padding:1rem}.pgh-lightbox-container{min-height:12.5rem;min-width:12.5rem}.pgh-lightbox-error{width:12.5rem;height:12.5rem;display:flex;justify-content:center;align-items:center;text-align:center}.pgh-lightbox-iframe{max-width:100%;max-height:100%}\n"] }]
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
class PghLightboxDirective {
onClick() {
this.matDialog
.open(PghLightboxComponent, {
data: this.isLoadingType() && !this.isContentTemplate()
? { type: this.type(), src: this.content() }
: { type: 'template', template: this.content() },
})
.afterClosed()
.subscribe(() => {
this.pghLightboxClosed.emit();
});
}
isLoadingType() {
return this.lightBoxLoadingTypes.includes(this.type());
}
isContentTemplate() {
return typeof this.content() !== 'string';
}
constructor(matDialog) {
this.matDialog = matDialog;
this.content = input.required({
alias: 'pghLightbox',
});
this.type = input('image', {
alias: 'pghLightboxType',
});
this.pghLightboxClosed = output();
this.lightBoxLoadingTypes = ['image', 'iframe'];
}
ngOnChanges(changes) {
if (this.isLoadingType() && this.isContentTemplate()) {
throw new Error('pghLightbox content must be a string');
}
else if (!this.isLoadingType && !this.isContentTemplate()) {
throw new Error('pghLightbox content must be a template');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxDirective, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.13", type: PghLightboxDirective, isStandalone: false, selector: "[pghLightbox]", inputs: { content: { classPropertyName: "content", publicName: "pghLightbox", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "pghLightboxType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pghLightboxClosed: "pghLightboxClosed" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxDirective, decorators: [{
type: Directive,
args: [{
selector: '[pghLightbox]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { onClick: [{
type: HostListener,
args: ['click']
}] } });
class PghLightboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxModule, declarations: [PghLightboxComponent, PghLightboxDirective], imports: [CommonModule, MatDialogModule, PghLoaderModule, PghSafeModule], exports: [PghLightboxComponent, PghLightboxDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxModule, imports: [CommonModule, MatDialogModule, PghLoaderModule, PghSafeModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLightboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghLightboxComponent, PghLightboxDirective],
imports: [CommonModule, MatDialogModule, PghLoaderModule, PghSafeModule],
exports: [PghLightboxComponent, PghLightboxDirective],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghLightboxComponent, PghLightboxDirective, PghLightboxModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-lightbox.mjs.map