+
+ ();
@Output() onBackgroundClick = new EventEmitter();
@@ -97,6 +110,7 @@ export class DxcDialogComponent implements AfterViewInit {
ngAfterViewInit(): void {
setTimeout(() => {
this.dialogboxstart.nativeElement.focus();
+ this.headerHeight = this.dialogHeader.nativeElement?.clientHeight ? this.dialogHeader.nativeElement : this.headerHeight;
}, 1);
}
@@ -122,7 +136,7 @@ export class DxcDialogComponent implements AfterViewInit {
if (overlay === true) {
return css`
background-color: var(--dialog-overlayColor);
- opacity: 0.8 !important;
+ opacity: var(--dialog-overlayOpacity) !important;
`;
} else
return css`
@@ -158,9 +172,6 @@ export class DxcDialogComponent implements AfterViewInit {
opacity: 1;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
.dialogContainer {
- overflow: unset;
- max-width: 80%;
- min-width: 800px;
${inputs.isCloseVisible
? css`
min-height: 72px;
@@ -169,29 +180,25 @@ export class DxcDialogComponent implements AfterViewInit {
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
${this.utils.getPaddings(inputs.padding)}
display: flex;
- max-height: calc(100% - 96px);
flex-direction: column;
- margin: 48px;
position: relative;
- overflow-y: auto;
border-radius: 4px;
- color: rgba(0, 0, 0, 0.87);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
background-color: var(--dialog-backgroundColor);
+ .dialog-header{
+ background-color: var(--dialog-header-backgroundColor);
+ border-bottom: 1px solid var(--dialog-header-borderColor);
+ }
.closeIcon {
- display: flex;
- justify-content: flex-end;
- position: absolute;
- top: 20px;
- right: 20px;
svg {
cursor: pointer;
- width: 34px;
- height: 34px;
+ width: 24px;
+ height: 24px;
}
}
.content {
- overflow-y: initial;
+ overflow-y: overlay;
+ height: calc(100% - ${this.headerHeight + 5}px);
::-webkit-scrollbar {
width: 3px;
}
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..16e1b030b 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,12 @@ import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MatTooltipModule } from '@angular/material/tooltip';
import { DxcDialogComponent } from "./dxc-dialog.component";
+import { DxcDialogHeaderComponent } from './dxc-dialog-header/dxc-dialog-header.component';
+import { DxcDialogBodyComponent } from './dxc-dialog-body/dxc-dialog-body.component';
@NgModule({
- declarations: [DxcDialogComponent],
+ declarations: [DxcDialogComponent, DxcDialogHeaderComponent, DxcDialogBodyComponent],
imports: [CommonModule, MatTooltipModule],
- exports: [DxcDialogComponent],
+ exports: [DxcDialogComponent, DxcDialogHeaderComponent, DxcDialogBodyComponent],
})
export class DxcDialogModule {}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/props/dailog-props.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/props/dailog-props.ts
new file mode 100644
index 000000000..331281fa6
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/props/dailog-props.ts
@@ -0,0 +1,21 @@
+export enum MODEL_HEIGHT {
+ xs = 30,
+ esm = 40,
+ sm = 50,
+ md = 60,
+ emd = 70,
+ lg = 80,
+ elg = 90,
+ xl = 100
+}
+
+export enum MODEL_WIDTH {
+ xs = 30,
+ esm = 40,
+ sm = 50,
+ md = 60,
+ emd = 70,
+ lg = 80,
+ elg = 90,
+ xl = 100
+}
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts
index a9691d22b..ba340ce3f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts
@@ -22,6 +22,9 @@ import { FileData } from "./interfaces/file.interface";
import { FilesService } from "./services/files.services";
import { NgChanges } from "../typings/ng-onchange";
import { FileInputProperties, Space, Spacing } from "./dxc-file-input.types";
+import { FileMetaData } from './model/file.metadata';
+import { ChunkMetaData } from './model/chunk.metadata';
+import { IFileUploadRequest, EventType } from "./model/fileuploadrequest.data";
@Component({
selector: "dxc-file-input",
@@ -130,12 +133,20 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
set tabIndexValue(value: number) {
this._tabIndexValue = coerceNumberProperty(value);
}
+ /**
+ * request object gets the value from APP and pass to halstack library.
+ */
+ @Input('requests') requests: IFileUploadRequest = null;
private _tabIndexValue = 0;
hasShowError: boolean = false;
/**
* This event will emit when the user selects or drops a file. The file or list of files will be sent as a parameter.
*/
@Output() callbackFile = new EventEmitter();
+ /**
+ * This event has been added to indicate only PREUPLOAD, UPLOAD and POSTUPLOAD events. The event type will be sent as a parameter.
+ */
+ @Output() uploadEventType = new EventEmitter();
defaultInputs = new BehaviorSubject({
name: null,
@@ -163,10 +174,19 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
hasSingleFile: boolean = false;
hasErrorSingleFile: boolean = false;
hasValue: boolean = false;
-
+ globalChunkCount: number = 0;
+ globalActualChunkCount: number = 0;
+ fileDataUpload: FileMetaData;
+ GUID: string;
+ fileEventType: EventType = EventType.PREUPLOAD;
+ chunkResult: boolean;
+ data: Array = [];
+ postResp: any;
+
constructor(private utils: CssUtils, private service: FilesService) {
this.service.files.subscribe(({ files, event }) => {
if (event !== "reset" && (files.length || this.hasValue)) {
+ this.data = files;
this.hasShowError = this.isErrorShow();
this.hasMultipleFiles = this.isMultipleFilesPrintables();
this.hasSingleFile = this.isSingleFilesPrintables();
@@ -264,6 +284,7 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
this.service.emptyArrayFiles();
}
this.getPreviewsFiles(event.dataTransfer.files);
+ this.processFiles(event.dataTransfer.files);
}
}
@@ -277,10 +298,120 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
this.service.emptyArrayFiles();
}
this.getPreviewsFiles(event.target.files);
+ this.processFiles(event.target.files);
event.target.value = "";
}
}
+ /**
+ * File upload logic to send file as chunk and receive response.
+ * @param event
+ */
+ processFiles(event) {
+ this.files=event;
+ this.fileEventType = EventType.UPLOAD;
+ for(let i=0;i {
+ this.uploadComplete(this.fileDataUpload).then(resp => {
+ this.data[0].postResponse = resp;
+ this.fileEventType = EventType.POSTUPLOAD;
+ //let data = this.getPreview(file);
+ this.data[0].eventType = this.fileEventType;
+ this.callbackFile.emit(this.data);
+ });
+ }, 3000);
+ }
+ }
+
+ readFile(file,lastChunksize: number, callback) {
+ let filedata = new ChunkMetaData();
+ filedata.fileName = this.globalActualChunkCount + "-" + this.GUID + file.name;
+ filedata.fileSize = file.size;
+ filedata.fileType = file.type;
+ this.fileDataUpload.GUID = this.GUID;
+ var chunk = file.slice(lastChunksize,lastChunksize+1000000);
+ if(chunk.size !=0) {
+ let fileReader = new FileReader();
+ fileReader.onloadend= (result)=>{
+ // Store base64 encoded representation of file
+ filedata.fileAsBase64 = fileReader.result.toString();
+ this.globalActualChunkCount++;
+ this.fileDataUpload.fileNames.push(filedata.fileName);
+ return callback(filedata,file,lastChunksize,fileReader.result)
+ }
+ fileReader.readAsDataURL(chunk);
+ }else {
+ return callback(filedata,file,lastChunksize,false);
+ }
+ }
+ private async uploads(theFile: ChunkMetaData)
+ {
+ const response = await fetch(this.requests.uploadRequest.url, {
+ method: 'POST',
+ body: JSON.stringify(theFile),
+ headers: {
+ 'Content-Type': 'application/json',
+ Accept: 'application/json',
+ clientId: '0',
+ 'Authorization': 'bearer '+ sessionStorage.session
+ }
+ });
+ if (!response.ok) {
+ throw new Error(`Error! status: ${response.status}`);
+ }
+}
+ private async uploadComplete(theFiles: FileMetaData) {
+ const response = await fetch(this.requests.uploadCompleteRequest.url, {
+ method: 'POST',
+ body: JSON.stringify(theFiles),
+ headers: {
+ 'Content-Type': 'application/json',
+ Accept: 'application/json',
+ clientId: '0',
+ 'Authorization': 'bearer '+ sessionStorage.session
+ }
+ });
+ if (!response.ok) {
+ throw new Error(`Error! status: ${response.status}`);
+ }
+
+ // const result: CreateUserResponse
+ const result = (await response.json());
+
+ //console.log('result is: ', JSON.stringify(result, null, 4));
+
+ return result;
+ }
+
/**
* Common function for both file modes.
* @param eventFiles
@@ -305,6 +436,8 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
data: file,
image: null,
error: this.checkFileSize(file),
+ eventType: this.fileEventType,
+ postResponse: this.postResp
};
this.service.addFile(fileToAdd);
} else {
@@ -312,6 +445,8 @@ export class DxcFileInputComponent implements OnChanges, OnInit {
data: file,
image: event.target["result"],
error: this.checkFileSize(file),
+ eventType: this.fileEventType,
+ postResponse: this.postResp
};
this.service.addFile(fileToAdd);
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/interfaces/file.interface.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/interfaces/file.interface.ts
index fbf05333a..589204dfc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/interfaces/file.interface.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/interfaces/file.interface.ts
@@ -1,5 +1,8 @@
+import { EventType } from "../model/fileuploadrequest.data";
export interface FileData{
data: File;
error: string;
image: string | ArrayBuffer;
+ eventType: EventType;
+ postResponse: string
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/chunk.metadata.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/chunk.metadata.ts
new file mode 100644
index 000000000..1c18967ba
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/chunk.metadata.ts
@@ -0,0 +1,6 @@
+export class ChunkMetaData {
+ fileName: string = "";
+ fileSize: number = 0;
+ fileType: string = "";
+ fileAsBase64: string = "";
+}
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/file.metadata.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/file.metadata.ts
new file mode 100644
index 000000000..e94dcec31
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/file.metadata.ts
@@ -0,0 +1,7 @@
+import { ChunkMetaData } from "./chunk.metadata";
+
+export class FileMetaData {
+ //filedatas = [FileToUpload];
+ GUID: string = "";
+ fileNames : string[] = [];
+}
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/fileuploadrequest.data.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/fileuploadrequest.data.ts
new file mode 100644
index 000000000..38eb272be
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/model/fileuploadrequest.data.ts
@@ -0,0 +1,32 @@
+//import { IRequest } from './configuration.model';
+import { HttpParams, HttpHeaders } from '@angular/common/http';
+
+export interface IFileUploadRequest {
+ uploadRequest: IRequest,
+ uploadCompleteRequest: IRequest,
+}
+
+export interface IEventResponse {
+ eventType: EventType;
+}
+
+export enum EventType {
+ PREUPLOAD = "PREUPLOAD",
+ UPLOAD = "UPLOAD",
+ POSTUPLOAD = "POSTUPLOAD"
+}
+export interface IRequest {
+ url: string;
+ methodType: EMethod;
+ params?: HttpParams;
+ body?: any;
+ serverSideFilter?: boolean;
+ headers?: HttpHeaders;
+}
+export declare enum EMethod {
+ GET = 0,
+ POST = 1,
+ PATCH = 2,
+ PUT = 3,
+ DELETE = 4
+}
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/services/files.services.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/services/files.services.ts
index 74106aadb..5ddaea988 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/services/files.services.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/services/files.services.ts
@@ -48,7 +48,6 @@ export class FilesService {
event: "remove",
});
}
-
emptyArrayFiles(){
this.files.next({
files: [],
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html
index 0c412d2cf..88d5832f7 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html
@@ -8,7 +8,7 @@
See https://github.com/angular/components/issues/20694
-->
{{assistiveText}}
-
+
+
+
+
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..91dbb69e7
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.scss
@@ -0,0 +1,282 @@
+$size: (30: 30%,
+ 40: 40%,
+ 50: 50%,
+ 60: 60%,
+ 70: 70%,
+ 80: 80%,
+ 90: 90%,
+ 100: 100%);
+
+@mixin size-modifiers {
+
+ @each $name,
+ $value in $size {
+ .mph-#{$name} {
+ @if $value <=40 {
+ min-height: $value;
+ height: auto;
+ }
+
+ @else {
+ height: $value;
+ }
+ }
+
+ .mpw-#{$name} {
+ @if $value <=40 {
+ min-width: $value;
+ width: auto;
+ }
+
+ @else {
+ width: $value;
+ }
+ }
+ }
+}
+
+.dialog {
+ @include size-modifiers;
+}
+
+
+/* ----------- iPhone 4 and 4S ----------- */
+
+/* Portrait and Landscape */
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Portrait */
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
+
+/* Portrait and Landscape */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {}
+
+/* Portrait */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
+
+/* Portrait and Landscape */
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Portrait */
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* ----------- iPhone 6+, 7+ and 8+ ----------- */
+
+/* Portrait and Landscape */
+@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Portrait */
+@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* ----------- iPhone X ----------- */
+
+/* Portrait and Landscape */
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Portrait */
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !important;
+ }
+ }
+
+}
+
+@media only screen and (max-width: 768px) {
+ .dialog {
+ [class*="mph-"] {
+ height: 95% !important;
+ }
+
+ [class*="mpw-"] {
+ width: 95% !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
index 29226463b..47f7b0f2c 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
@@ -14,19 +14,23 @@ import { css } from "emotion";
import { BehaviorSubject } from "rxjs";
import { CssUtils } from "../utils";
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-
+import { MODEL_HEIGHT, MODEL_WIDTH} from './props/dailog-props';
@Component({
selector: "dxc-dialog",
templateUrl: "./dxc-dialog.component.html",
+ styleUrls: ["./dxc-dialog.component.scss"],
providers: [CssUtils],
})
export class DxcDialogComponent implements AfterViewInit {
@ViewChild('dialogboxstart', { read: ElementRef, static: false }) dialogboxstart: ElementRef;
+ @ViewChild('dialogHeader', { read: ElementRef, static: false }) dialogHeader: ElementRef;
@ViewChild('dialogboxreturn', { read: ElementRef, static: false }) dialogboxreturn: ElementRef;
@ViewChild('dialogboxend', { read: ElementRef, static: false }) dialogboxend: ElementRef;
@Input('ariaLabel') ariaLabel: string = null;
@Input('ariaLabelledBy') ariaLabelledBy: string = null;
- @Input('ariaDescribedBy') ariaDescribedBy: string = null;
+ @Input('ariaDescribedBy') ariaDescribedBy: string = null;
+ @Input('height') height: MODEL_HEIGHT = MODEL_HEIGHT.lg;
+ @Input('width') width: MODEL_WIDTH = MODEL_WIDTH.md;
@HostListener('keydown.escape')
escape() {
this.onCloseHandler(true);
@@ -58,6 +62,15 @@ export class DxcDialogComponent implements AfterViewInit {
this._tabIndexValue = coerceNumberProperty(value);
}
private _tabIndexValue;
+ @Input()
+ get headerHeight(): number {
+ return this._headerHeight;
+ }
+ set headerHeight(value: number) {
+ this._headerHeight = value;
+ }
+ private _headerHeight = 40;
+
@Output() onCloseClick = new EventEmitter