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
285 lines (277 loc) • 11.1 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, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core';
import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils';
import { PrimeTemplate, SharedModule } 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 = /*@__PURE__*/ (() => { let ɵBlockUiStyle_BaseFactory; return function BlockUiStyle_Factory(__ngFactoryType__) { return (ɵBlockUiStyle_BaseFactory || (ɵBlockUiStyle_BaseFactory = i0.ɵɵgetInheritedFactory(BlockUiStyle)))(__ngFactoryType__ || BlockUiStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BlockUiStyle, factory: BlockUiStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BlockUiStyle, [{
type: Injectable
}], null, null); })();
/**
*
* 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 = {}));
const _c0 = ["content"];
const _c1 = ["mask"];
const _c2 = ["*"];
const _c3 = a0 => ({ "p-blockui-mask-document": a0, "p-blockui p-blockui-mask p-overlay-mask": true });
const _c4 = () => ({ display: "none" });
function BlockUI_ng_container_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
/**
* 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 = function BlockUI_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BlockUI)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BlockUI, selectors: [["p-blockUI"], ["p-blockui"], ["p-block-ui"]], contentQueries: function BlockUI_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, _c0, 4);
i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
} }, viewQuery: function BlockUI_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c1, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mask = _t.first);
} }, inputs: { target: "target", autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], styleClass: "styleClass", blocked: [2, "blocked", "blocked", booleanAttribute] }, features: [i0.ɵɵProvidersFeature([BlockUiStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2, decls: 4, vars: 11, consts: [["mask", ""], [3, "ngClass", "ngStyle"], [4, "ngTemplateOutlet"]], template: function BlockUI_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵelementStart(0, "div", 1, 0);
i0.ɵɵprojection(2);
i0.ɵɵtemplate(3, BlockUI_ng_container_3_Template, 1, 0, "ng-container", 2);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵclassMap(ctx.styleClass);
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c3, !ctx.target))("ngStyle", i0.ɵɵpureFunction0(10, _c4));
i0.ɵɵattribute("aria-busy", ctx.blocked)("data-pc-name", "blockui")("data-pc-section", "root");
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx.contentTemplate || ctx._contentTemplate);
} }, dependencies: [CommonModule, i1.NgClass, i1.NgTemplateOutlet, i1.NgStyle, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BlockUI, [{
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]
}]
}], () => [], { 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]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BlockUI, { className: "BlockUI", filePath: "blockui.ts", lineNumber: 53 }); })();
class BlockUIModule {
static ɵfac = function BlockUIModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BlockUIModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: BlockUIModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [BlockUI, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BlockUIModule, [{
type: NgModule,
args: [{
imports: [BlockUI, SharedModule],
exports: [BlockUI, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(BlockUIModule, { imports: [BlockUI, SharedModule], exports: [BlockUI, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { BlockUI, BlockUIClasses, BlockUIModule, BlockUiStyle };
//# sourceMappingURL=primeng-blockui.mjs.map