1 | import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, ContentChildren, ViewChild, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { DomHandler } from 'primeng/dom';
|
4 | import { PrimeTemplate } from 'primeng/api';
|
5 |
|
6 | class BlockUI {
|
7 | constructor(el, cd) {
|
8 | this.el = el;
|
9 | this.cd = cd;
|
10 | this.autoZIndex = true;
|
11 | this.baseZIndex = 0;
|
12 | }
|
13 | get blocked() {
|
14 | return this._blocked;
|
15 | }
|
16 | set blocked(val) {
|
17 | this._blocked = val;
|
18 | if (this.mask && this.mask.nativeElement) {
|
19 | if (this._blocked)
|
20 | this.block();
|
21 | else
|
22 | this.unblock();
|
23 | }
|
24 | }
|
25 | ngAfterViewInit() {
|
26 | if (this.target && !this.target.getBlockableElement) {
|
27 | throw 'Target of BlockUI must implement BlockableUI interface';
|
28 | }
|
29 | }
|
30 | ngAfterContentInit() {
|
31 | this.templates.forEach((item) => {
|
32 | switch (item.getType()) {
|
33 | case 'content':
|
34 | this.contentTemplate = item.template;
|
35 | break;
|
36 | default:
|
37 | this.contentTemplate = item.template;
|
38 | break;
|
39 | }
|
40 | });
|
41 | }
|
42 | block() {
|
43 | if (this.target) {
|
44 | this.target.getBlockableElement().appendChild(this.mask.nativeElement);
|
45 | this.target.getBlockableElement().style.position = 'relative';
|
46 | }
|
47 | else {
|
48 | document.body.appendChild(this.mask.nativeElement);
|
49 | }
|
50 | if (this.autoZIndex) {
|
51 | this.mask.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
|
52 | }
|
53 | }
|
54 | unblock() {
|
55 | this.el.nativeElement.appendChild(this.mask.nativeElement);
|
56 | }
|
57 | ngOnDestroy() {
|
58 | this.unblock();
|
59 | }
|
60 | }
|
61 | BlockUI.decorators = [
|
62 | { type: Component, args: [{
|
63 | selector: 'p-blockUI',
|
64 | template: `
|
65 | <div #mask [class]="styleClass" [ngClass]="{'p-blockui-document':!target, 'p-blockui p-component-overlay': true}" [ngStyle]="{display: blocked ? 'flex' : 'none'}">
|
66 | <ng-content></ng-content>
|
67 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
68 | </div>
|
69 | `,
|
70 | changeDetection: ChangeDetectionStrategy.OnPush,
|
71 | encapsulation: ViewEncapsulation.None,
|
72 | styles: [".p-blockui{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,0);display:-ms-flexbox;display:flex;height:100%;justify-content:center;left:0;top:0;transition-property:background-color;width:100%}.p-blockui,.p-blockui.p-component-overlay{position:absolute}.p-blockui-document.p-component-overlay{position:fixed}.p-blockui-leave.p-component-overlay{background-color:rgba(0,0,0,0)}"]
|
73 | },] }
|
74 | ];
|
75 | BlockUI.ctorParameters = () => [
|
76 | { type: ElementRef },
|
77 | { type: ChangeDetectorRef }
|
78 | ];
|
79 | BlockUI.propDecorators = {
|
80 | target: [{ type: Input }],
|
81 | autoZIndex: [{ type: Input }],
|
82 | baseZIndex: [{ type: Input }],
|
83 | styleClass: [{ type: Input }],
|
84 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
|
85 | mask: [{ type: ViewChild, args: ['mask',] }],
|
86 | blocked: [{ type: Input }]
|
87 | };
|
88 | class BlockUIModule {
|
89 | }
|
90 | BlockUIModule.decorators = [
|
91 | { type: NgModule, args: [{
|
92 | imports: [CommonModule],
|
93 | exports: [BlockUI],
|
94 | declarations: [BlockUI]
|
95 | },] }
|
96 | ];
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 | export { BlockUI, BlockUIModule };
|
103 |
|