ing

src/app/pages/home/home-page.component.html

@@ -8,6 +8,26 @@
                         <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>
                     </div>
                 </p-panel>
+
+                <h3 class="first">Document</h3>
+                <p-blockUI [blocked]="blockedDocument"></p-blockUI>
+
+                <button type="button" pButton label="Block" (click)="blockDocument()"></button>
+
+                <h3>Panel</h3>
+                <button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
+                <button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
+
+                <p-blockUI [target]="pnl" [blocked]="blockedPanel">
+                    <i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
+                </p-blockUI>
+                <p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
+                    son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is
+                    just like the head of the family, kind and benevolent to those who give respect, but given to ruthless
+                    violence whenever anything stands against the good of the family.
+                </p-panel>
             </div>
         </div>
     </div>

src/app/pages/home/home-page.component.ts

@@ -9,6 +9,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomePageComponent implements OnInit {
 
+  blockedPanel = false;
+
+  blockedDocument = false;
 
   constructor() { }
 
@@ -16,5 +19,10 @@ export class HomePageComponent implements OnInit {
   }
 
 
-
+  blockDocument() {
+    this.blockedDocument = true;
+    setTimeout(() => {
+      this.blockedDocument = false;
+    }, 3000);
+  }
 }

src/app/pages/pages.component.html

@@ -1,6 +1,6 @@
 <app-toolbar>
-  <app-nic-dropdown></app-nic-dropdown>
-  <app-scanner-setting-dropdown></app-scanner-setting-dropdown>
+  <app-nic-dropdown [blockTarget]="pagesContent"></app-nic-dropdown>
+  <app-scanner-setting-dropdown [blockTarget]="pagesContent"></app-scanner-setting-dropdown>
 
   <div class="sidebar-section" style="width: 250px;">
     <div class="toolbar-dropdown closed" aria-expanded="false">
@@ -53,6 +53,8 @@
   </div>
 </app-toolbar>
 
-<div #bodyPlaceholder>
-  <router-outlet #o="outlet"></router-outlet>
-</div>
+<p-panel #pagesContent [showHeader]="false">
+  <div id="pages-content">
+    <router-outlet #o="outlet"></router-outlet>
+  </div>
+</p-panel>

src/app/pages/pages.component.scss

@@ -0,0 +1,3 @@
+#pages-content {
+  min-height: 100vh;
+}

src/commons/component/nic-dropdown.component.html

@@ -1,4 +1,4 @@
-<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
+<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
   <p-header>
     192.168.1.0/24
   </p-header>
@@ -8,4 +8,4 @@
   <p-footer>
     Footer content here
   </p-footer>
-</p-dropdownPanel>
+</of-p-dropdownPanel>

src/commons/component/nic-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-nic-dropdown',
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./nic-dropdown.component.scss'],
 })
 export class NicDropdownComponent {
+  @Input() blockTarget: any;
 
   constructor(
   ) {

src/commons/component/scanner-setting-dropdown.component.html

@@ -1,10 +1,28 @@
-<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
+<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
   <p-header>
     <div>IP Type: V4, Range: 192.168.1.1 ~ 192.168.1.254</div>
     <div>Port Type: TCP, UDP, Range: 1 ~ 1024</div>
   </p-header>
-  Body Content
+  <h3 class="first">Document</h3>
+  <p-blockUI [blocked]="blockedDocument"></p-blockUI>
+
+  <button type="button" pButton label="Block" (click)="blockDocument()"></button>
+
+  <h3>Panel</h3>
+  <button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
+  <button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
+
+  <p-blockUI [target]="pnl" [blocked]="blockedPanel">
+    <i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
+  </p-blockUI>
+  <p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
+    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
+    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
+    life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good
+    of the family.
+  </p-panel>
   <p-footer>
     Footer content here
   </p-footer>
-</p-dropdownPanel>
+</of-p-dropdownPanel>

src/commons/component/scanner-setting-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-scanner-setting-dropdown',
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./scanner-setting-dropdown.component.scss'],
 })
 export class ScannerSettingDropdownComponent {
+  @Input() blockTarget: any;
 
   constructor(
   ) {