diff --git a/projects/dxc-ngx-cdk/package.json b/projects/dxc-ngx-cdk/package.json index 02bd9239b..900afd3a2 100644 --- 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 index 7dc8c669a..773c69e61 100644 --- 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 @@ -
+
-
+
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 new file mode 100644 index 000000000..66f7de16a --- /dev/null +++ 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; +} \ No newline at end of file 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 index 29226463b..1fcf24f04 100644 --- 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(); @Output() onBackgroundClick = new EventEmitter(); + @Output() onMinimiseClick = new EventEmitter(); + @Output() onMaxmiseClick = new EventEmitter(); + @HostBinding("class") className; defaultInputs = new BehaviorSubject({ overlay: true, isCloseVisible: true, + isMaxVisible :false, padding: null, tabIndexValue: 0 }); @@ -90,6 +108,30 @@ 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); } @@ -97,6 +139,7 @@ export class DxcDialogComponent implements AfterViewInit { 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 index 58b394e55..14aedf9df 100644 --- 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 {}