primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
264 lines (256 loc) • 10.4 kB
JavaScript
import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, booleanAttribute, numberAttribute, ContentChildren, ViewChild, ContentChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { ZIndexUtils } from 'primeng/utils';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-blockui {
position: relative;
}
.p-blockui-mask {
border-radius: ${dt('blockui.border.radius')};
}
.p-blockui-mask.p-overlay-mask {
position: absolute;
}
.p-blockui-mask-document.p-overlay-mask {
position: fixed;
}
`;
const classes = {
root: 'p-blockui'
};
class BlockUiStyle extends BaseStyle {
name = 'blockui';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUiStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUiStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUiStyle, decorators: [{
type: Injectable
}] });
/**
*
* BlockUI represents people using icons, labels and images.
*
* [Live Demo](https://www.primeng.org/blockui)
*
* @module blockuistyle
*
*/
var BlockUIClasses;
(function (BlockUIClasses) {
/**
* Class name of the root element
*/
BlockUIClasses["root"] = "p-blockui";
})(BlockUIClasses || (BlockUIClasses = {}));
/**
* BlockUI can either block other components or the whole page.
* @group Components
*/
class BlockUI extends BaseComponent {
/**
* 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;
}
}
/**
* template of the content
* @group Templates
*/
contentTemplate;
mask;
_blocked = false;
animationEndListener;
_componentStyle = inject(BlockUiStyle);
constructor() {
super();
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this._blocked)
this.block();
if (this.target && !this.target.getBlockableElement) {
throw 'Target of BlockUI must implement BlockableUI interface';
}
}
_contentTemplate;
templates;
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);
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));
// TODO Add animation
this.destroyModal();
// addClass(this.mask.nativeElement, 'p-overlay-mask-leave');
}
}
destroyModal() {
this._blocked = false;
if (this.mask && isPlatformBrowser(this.platformId)) {
ZIndexUtils.clear(this.mask.nativeElement);
// removeClass(this.mask.nativeElement, 'p-overlay-mask-leave');
this.renderer.removeChild(this.el.nativeElement, this.mask.nativeElement);
unblockBodyScroll();
}
this.unbindAnimationEndListener();
this.cd.markForCheck();
}
unbindAnimationEndListener() {
if (this.animationEndListener && this.mask) {
this.animationEndListener();
this.animationEndListener = null;
}
}
ngOnDestroy() {
this.unblock();
this.destroyModal();
super.ngOnDestroy();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUI, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: BlockUI, isStandalone: true, selector: "p-blockUI, p-blockui, p-block-ui", inputs: { target: "target", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], styleClass: "styleClass", blocked: ["blocked", "blocked", booleanAttribute] }, providers: [BlockUiStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<div
#mask
[class]="styleClass"
[attr.aria-busy]="blocked"
[ngClass]="{ 'p-blockui-mask-document': !target, 'p-blockui p-blockui-mask p-overlay-mask': true }"
[ngStyle]="{ display: 'none' }"
[attr.data-pc-name]="'blockui'"
[attr.data-pc-section]="'root'"
>
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUI, decorators: [{
type: Component,
args: [{
selector: 'p-blockUI, p-blockui, p-block-ui',
standalone: true,
imports: [CommonModule, SharedModule],
template: `
<div
#mask
[class]="styleClass"
[attr.aria-busy]="blocked"
[ngClass]="{ 'p-blockui-mask-document': !target, 'p-blockui p-blockui-mask p-overlay-mask': true }"
[ngStyle]="{ display: 'none' }"
[attr.data-pc-name]="'blockui'"
[attr.data-pc-section]="'root'"
>
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [BlockUiStyle]
}]
}], ctorParameters: () => [], propDecorators: { target: [{
type: Input
}], autoZIndex: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], styleClass: [{
type: Input
}], blocked: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], mask: [{
type: ViewChild,
args: ['mask']
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class BlockUIModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: BlockUIModule, imports: [BlockUI, SharedModule], exports: [BlockUI, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUIModule, imports: [BlockUI, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BlockUIModule, decorators: [{
type: NgModule,
args: [{
imports: [BlockUI, SharedModule],
exports: [BlockUI, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BlockUI, BlockUIClasses, BlockUIModule, BlockUiStyle };
//# sourceMappingURL=primeng-blockui.mjs.map