import * as i2 from '@angular/common'; import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { PLATFORM_ID, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ContentChildren, ViewChild, NgModule } from '@angular/core'; import * as i1 from 'primeng/api'; import { PrimeTemplate } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { ZIndexUtils } from 'primeng/utils'; /** * BlockUI can either block other components or the whole page. * @group Components */ class BlockUI { document; el; cd; config; renderer; platformId; /** * Name of the local ng-template variable referring to another component. * @group Props */ target; /** * Whether to automatically manage layering. * @group Props */ autoZIndex = true; /** * Base zIndex value to use in layering. * @group Props */ baseZIndex = 0; /** * Class of the element. * @group Props */ styleClass; /** * Current blocked state as a boolean. * @group Props */ get blocked() { return this._blocked; } set blocked(val) { if (this.mask && this.mask.nativeElement) { if (val) this.block(); else this.unblock(); } else { this._blocked = val; } } templates; mask; _blocked = false; animationEndListener; contentTemplate; constructor(document, el, cd, config, renderer, platformId) { this.document = document; this.el = el; this.cd = cd; this.config = config; this.renderer = renderer; this.platformId = platformId; } ngAfterViewInit() { if (this._blocked) this.block(); if (this.target && !this.target.getBlockableElement) { throw 'Target of BlockUI must implement BlockableUI interface'; } } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'content': this.contentTemplate = item.template; break; default: this.contentTemplate = item.template; break; } }); } block() { if (isPlatformBrowser(this.platformId)) { this._blocked = true; this.mask.nativeElement.style.display = 'flex'; if (this.target) { this.target.getBlockableElement().appendChild(this.mask.nativeElement); this.target.getBlockableElement().style.position = 'relative'; } else { this.renderer.appendChild(this.document.body, this.mask.nativeElement); DomHandler.blockBodyScroll(); } if (this.autoZIndex) { ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex + this.config.zIndex.modal); } } } unblock() { if (isPlatformBrowser(this.platformId) && this.mask && !this.animationEndListener) { this.animationEndListener = this.renderer.listen(this.mask.nativeElement, 'animationend', this.destroyModal.bind(this)); DomHandler.addClass(this.mask.nativeElement, 'p-component-overlay-leave'); } } destroyModal() { this._blocked = false; if (this.mask && isPlatformBrowser(this.platformId)) { ZIndexUtils.clear(this.mask.nativeElement); DomHandler.removeClass(this.mask.nativeElement, 'p-component-overlay-leave'); this.renderer.removeChild(this.el.nativeElement, this.mask.nativeElement); DomHandler.unblockBodyScroll(); } this.unbindAnimationEndListener(); this.cd.markForCheck(); } unbindAnimationEndListener() { if (this.animationEndListener && this.mask) { this.animationEndListener(); this.animationEndListener = null; } } ngOnDestroy() { this.unblock(); this.destroyModal(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BlockUI, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: BlockUI, selector: "p-blockUI", inputs: { target: "target", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], styleClass: "styleClass", blocked: "blocked" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: `
`, isInline: true, styles: ["@layer primeng{.p-blockui{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;transition-property:background-color;display:flex;align-items:center;justify-content:center}.p-blockui.p-component-overlay{position:absolute}.p-blockui-document.p-component-overlay{position:fixed}.p-blockui-leave.p-component-overlay{background-color:transparent}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BlockUI, decorators: [{ type: Component, args: [{ selector: 'p-blockUI', template: `
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'p-element' }, styles: ["@layer primeng{.p-blockui{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;transition-property:background-color;display:flex;align-items:center;justify-content:center}.p-blockui.p-component-overlay{position:absolute}.p-blockui-document.p-component-overlay{position:fixed}.p-blockui-leave.p-component-overlay{background-color:transparent}}\n"] }] }], ctorParameters: () => [{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT] }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }, { type: i0.Renderer2 }, { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }], propDecorators: { target: [{ type: Input }], autoZIndex: [{ type: Input, args: [{ transform: booleanAttribute }] }], baseZIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], styleClass: [{ type: Input }], blocked: [{ type: Input }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }], mask: [{ type: ViewChild, args: ['mask'] }] } }); class BlockUIModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BlockUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: BlockUIModule, declarations: [BlockUI], imports: [CommonModule], exports: [BlockUI] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BlockUIModule, imports: [CommonModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BlockUIModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule], exports: [BlockUI], declarations: [BlockUI] }] }] }); /** * Generated bundle index. Do not edit. */ export { BlockUI, BlockUIModule }; //# sourceMappingURL=primeng-blockui.mjs.map