assureclaims · Shivam3266 · Sep 13, 2022
diff --git a/projects/dxc-ngx-cdk/package.json b/projects/dxc-ngx-cdk/package.json
@@ -63,7 +63,8 @@
     "ng-mocks": "^10.4.0",
     "rgb-hex": "^3.0.0",
     "rxjs": "~6.5.2",
-    "tslib": "^2.0.0"
+    "tslib": "^2.0.0",
+    "ngx-draggable-resize": "^0.1.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "0.1002.0",

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.html
@@ -1,10 +1,26 @@
-<div class="dialog">
+<div class="dialog" #dialogarea >
   <div class="backOverlay" role="overlay" (click)="onBackgroundClickHandler($event)" [class.backVisible]="overlay">
   </div>
   <div class="container">
-    <div class="dialogContainer">
+    <div  [ngClass]="{'dialogContainer':isMinVisible, 'min-header': !isMinVisible, 'minimise-container': !isMinVisible}" [ngResizable]="isMinVisible"  [ngDraggable]="isMinVisible" [handle]="dialogboxstart" [bounds]="dialogarea" [inBounds]="true" >
       <div class="content" tabindex="0" role="dialog" (keydown)="startKeyPress($event)" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" 
       [attr.aria-describedby]="ariaDescribedBy" #dialogboxstart>
+        <a href="javascript:void(0);" class="minIcon" *ngIf="isMinVisible" [attr.aria-label]="minButtonLabel" [matTooltip]="minButtonLabel"
+          (click)="onMinHandler($event)" [tabindex]="tabIndexValue" role="button">
+          <dxc-button-icon>
+            <span class="icon-dxc-wrapper">
+              <mat-icon class="mat-icon material-icons minmaxicon">minimize</mat-icon>
+            </span>
+          </dxc-button-icon>
+        </a>
+        <a href="javascript:void(0);" class="maxIcon" *ngIf="!isMinVisible" [attr.aria-label]="maxButtonLabel" [matTooltip]="maxButtonLabel"
+          (click)="onMaxHandler($event)" [tabindex]="tabIndexValue" role="button">
+          <dxc-button-icon>
+            <span class="icon-dxc-wrapper">
+              <mat-icon class="mat-icon material-icons maxiconfont">content_copy</mat-icon>
+            </span>
+          </dxc-button-icon>
+        </a>
         <a href="javascript:void(0);" class="closeIcon" *ngIf="isCloseVisible" [attr.aria-label]="closeButtonLabel" [matTooltip]="closeButtonLabel"
           (click)="onCloseHandler($event)" [tabindex]="tabIndexValue" role="button">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -13,7 +29,7 @@
             <path d="M0 0h24v24H0z" fill="none" />
           </svg>
         </a>
-        <ng-content></ng-content>
+        <ng-content #dialogcontent ></ng-content>
         <span #dialogboxreturn tabindex="-1" (onblur)="returnFocusOut($event)"></span>
         <span #dialogboxend tabindex="0" (focus)="endFocus($event)"></span>
       </div>

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.scss
@@ -0,0 +1,27 @@
+.ng-draggable {
+    cursor: grab;
+  }
+
+  .ng-dragging {
+    cursor: grabbing;
+  }
+
+  .min-header {
+    // position: absolute !important;
+    // left: -45px;
+    // top: calc(100vh - 121px);
+    // width: 18% !important;
+    // z-index: 99999;
+    //transform: translate(calc(100% - 490px), 47px) rotate(0deg) scaleX(1) scaleY(1)!important;
+    transform: none !important;
+    bottom: -45px;
+    right: -43px;
+    position: absolute !important;
+
+
+}
+
+.minimise-container{
+  display: block !important;
+  margin: 0px !important; 
+}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts
@@ -19,11 +19,13 @@ import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coerci
   selector: "dxc-dialog",
   templateUrl: "./dxc-dialog.component.html",
   providers: [CssUtils],
+  styleUrls: ['./dxc-dialog.component.scss']
 })
 export class DxcDialogComponent implements AfterViewInit {
   @ViewChild('dialogboxstart', { read: ElementRef, static: false }) dialogboxstart: ElementRef;
   @ViewChild('dialogboxreturn', { read: ElementRef, static: false }) dialogboxreturn: ElementRef;
   @ViewChild('dialogboxend', { read: ElementRef, static: false }) dialogboxend: ElementRef;
+  @ViewChild('dialogcontent', { read: ElementRef, static: false }) dialogcontent: ElementRef;
   @Input('ariaLabel') ariaLabel: string = null;
   @Input('ariaLabelledBy') ariaLabelledBy: string = null;
   @Input('ariaDescribedBy') ariaDescribedBy: string = null; 
@@ -33,6 +35,8 @@ export class DxcDialogComponent implements AfterViewInit {
   }
 
   @Input() closeButtonLabel: string = 'Close'
+  @Input() minButtonLabel: string = 'Minimize'
+  @Input() maxButtonLabel: string = 'Maximize'
   @Input()
   get overlay(): boolean {
     return this._overlay;
@@ -49,6 +53,16 @@ export class DxcDialogComponent implements AfterViewInit {
     this._isCloseVisible = coerceBooleanProperty(value);
   }
   private _isCloseVisible = true;
+
+  private _isMinVisible = true;
+
+  @Input()
+  get isMinVisible(): boolean {
+    return this._isMinVisible;
+  }
+  set isMinVisible(value: boolean) {
+    this._isMinVisible = coerceBooleanProperty(value);
+  }
   @Input() padding: any;
   @Input()
   get tabIndexValue(): number {
@@ -61,11 +75,15 @@ export class DxcDialogComponent implements AfterViewInit {
   @Output() onCloseClick = new EventEmitter<any>();
   @Output() onBackgroundClick = new EventEmitter<any>();
 
+  @Output() onMinimiseClick = new EventEmitter<any>();
+  @Output() onMaxmiseClick = new EventEmitter<any>();
+
   @HostBinding("class") className;
 
   defaultInputs = new BehaviorSubject<any>({
     overlay: true,
     isCloseVisible: true,
+    isMaxVisible :false,
     padding: null,
     tabIndexValue: 0
   });
@@ -90,13 +108,38 @@ export class DxcDialogComponent implements AfterViewInit {
     this.onCloseClick.emit($event);
   }
 
+  public onMinHandler($event: any): void {
+    // var m = this.dialogcontent;
+    // this.onMinimiseClick.emit($event);
+    this.isMinVisible = false;
+    if(this.dialogboxreturn?.nativeElement?.parentElement != null){
+      let element = this.dialogboxreturn.nativeElement.parentElement.getElementsByTagName("form");
+      if(element.length > 0){
+        element[0].style.display = 'none';
+      }
+    }
+  }
+
+  public onMaxHandler($event: any): void {
+    // var m = this.dialogcontent;
+    // this.onMaxmiseClick.emit($event);
+    this.isMinVisible = true;
+    if(this.dialogboxreturn?.nativeElement?.parentElement != null){
+      let element = this.dialogboxreturn.nativeElement.parentElement.getElementsByTagName("form");
+      if(element.length > 0){
+        element[0].style.display = 'block';
+      }
+    }
+  }
+
   public onBackgroundClickHandler($event: any): void {
     this.onBackgroundClick.emit($event);
   }
 
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.dialogboxstart.nativeElement.focus();
+      this.dialogcontent.nativeElement.focus();
     }, 1);
   }
 
@@ -190,6 +233,38 @@ export class DxcDialogComponent implements AfterViewInit {
                 height: 34px;
               }
             }
+            .minIcon {
+              display: flex;
+              justify-content: flex-end;
+              position: absolute;
+              top: 2px;
+              right: 52px;
+              svg {
+                cursor: pointer;
+                width: 34px;
+                height: 34px;
+              }
+            }
+            .maxIcon {
+                display: flex;
+                justify-content: flex-end;
+                position: absolute;
+                top: 13px;
+                right: 52px;
+                svg {
+                  cursor: pointer;
+                  width: 34px;
+                  height: 34px;
+                }
+              }
+              .minmaxicon
+              {
+                font-size:30px;
+              }  
+              .maxiconfont
+              {
+                font-size:23px;
+              } 
             .content {
               overflow-y: initial;
               ::-webkit-scrollbar {

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.module.ts
@@ -2,10 +2,13 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { DxcDialogComponent } from "./dxc-dialog.component";
+import { AngularDraggableModule } from 'ngx-draggable-resize';
+import { MatIconModule } from '@angular/material/icon';
+import { DxcButtonModule } from './../dxc-button/dxc-button.module';
 
 @NgModule({
   declarations: [DxcDialogComponent],
-  imports: [CommonModule, MatTooltipModule],
+  imports: [CommonModule, MatTooltipModule,AngularDraggableModule,MatIconModule,DxcButtonModule],
   exports: [DxcDialogComponent],
 })
 export class DxcDialogModule {}