@huntsman-cancer-institute/dialog 12.11.9-SNAPSHOT

package/fesm2015/huntsman-cancer-institute-dialog.js

@@ -0,0 +1,1396 @@
+import * as i0 from '@angular/core';
+import { ɵɵngDeclareFactory, ChangeDetectorRef, ɵɵFactoryTarget, ɵɵngDeclareComponent, ɵɵngDeclareClassMetadata, Component, Inject, ViewChild, HostListener, Input, ViewContainerRef, HostBinding, ɵɵngDeclareInjectable, Injectable, EventEmitter, Output, ɵɵngDeclareNgModule, ɵɵngDeclareInjector, NgModule } from '@angular/core';
+import { NgIf, NgForOf, NgClass, CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
+import { MatSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Router } from '@angular/router';
+import { DynamicComponent, DynamicIoDirective, DynamicModule } from 'ng-dynamic-component';
+import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+
+var DialogType;
+(function (DialogType) {
+    DialogType["ERROR"] = "Error";
+    DialogType["WARNING"] = "Warning";
+    DialogType["ALERT"] = "Alert";
+    DialogType["SUCCESS"] = "Succeed";
+    DialogType["FAILED"] = "Failed";
+    DialogType["CONFIRM"] = "Confirm";
+    DialogType["INFO"] = "Info";
+    DialogType["VALIDATION"] = "Validation Error";
+})(DialogType || (DialogType = {}));
+
+var ActionType;
+(function (ActionType) {
+    ActionType["PRIMARY"] = "primary";
+    ActionType["SECONDARY"] = "accent";
+})(ActionType || (ActionType = {}));
+
+class AlertDialogComponent {
+    constructor(dialogRef, data, changeDetector) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.changeDetector = changeDetector;
+        this.type = DialogType;
+        this.message = null;
+        this.title = '';
+        this.icon = '';
+        this.dialogType = '';
+        this.defaultTitle = '';
+        this.actionType = ActionType.SECONDARY;
+        this.originalXClick = 0;
+        this.originalYClick = 0;
+        this.positionX = 0;
+        this.positionY = 0;
+        this.movingDialog = false;
+        if (data) {
+            this.message = Array.isArray(data.message) ? data.message : [data.message];
+            this.title = data.title;
+            this.icon = data.icon;
+            this.dialogType = data.dialogType;
+        }
+    }
+    ngOnInit() {
+        if (this.dialogType) {
+            this.defaultTitle = this.dialogType;
+        }
+        for (let i = 0; i < this.message.length; i++) {
+            this.message[i] = this.message[i].replace(/\n/g, '<br>') + '<br>';
+        }
+    }
+    onClickOk() {
+        this.dialogRef.close(true);
+    }
+    onClickYes() {
+        this.dialogRef.close(true);
+    }
+    onClickNo() {
+        this.dialogRef.close();
+    }
+    onMouseDownHeader(event) {
+        if (!event) {
+            return;
+        }
+        this.positionX = this.topmostLeftmost.nativeElement.offsetLeft;
+        this.positionY = this.topmostLeftmost.nativeElement.offsetTop;
+        this.originalXClick = event.screenX;
+        this.originalYClick = event.screenY;
+        this.movingDialog = true;
+        this.changeDetector.detach();
+    }
+    onMouseMove(event) {
+        if (!event) {
+            return;
+        }
+        if (this.movingDialog) {
+            this.positionX += event.screenX - this.originalXClick;
+            this.positionY += event.screenY - this.originalYClick;
+            this.originalXClick = event.screenX;
+            this.originalYClick = event.screenY;
+            const newDialogPosition = {
+                left: '' + this.positionX + 'px',
+                top: '' + this.positionY + 'px',
+            };
+            this.dialogRef.updatePosition(newDialogPosition);
+        }
+    }
+    onMouseUp() {
+        this.movingDialog = false;
+        this.changeDetector.reattach();
+    }
+}
+AlertDialogComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AlertDialogComponent, deps: [{ token: MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ChangeDetectorRef }], target: ɵɵFactoryTarget.Component });
+AlertDialogComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AlertDialogComponent, selector: "hci-alert-dialog", host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "topmostLeftmost", first: true, predicate: ["topmostLeftmost"], descendants: true }], ngImport: i0, template: `
+        <div class="full-height full-width d-flex flex-column">
+            <div class="full-width dialog-header-colors no-margin no-padding">
+                <div #topmostLeftmost mat-dialog-title (mousedown)="onMouseDownHeader($event)"
+                     class="force-flex-container-row align-center full-width padding   {{ movingDialog ? 'grabbed' : 'grabbable' }}">
+                    <div class="d-flex flex-row align-items-center padded">
+                        <img *ngIf="icon" class="icon" [src]="this.icon">
+                        <div *ngIf="!icon">
+                            <i *ngIf="dialogType === type.ALERT" class="fa fa-exclamation fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.SUCCESS" class="fa fa-check-circle fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.FAILED || dialogType === type.ERROR" class="fa fa-exclamation-triangle fa-2x i-margin i-color-red"></i>
+                            <i *ngIf="dialogType === type.WARNING || dialogType === type.VALIDATION" class="fa fa-exclamation-triangle fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.INFO" class="fa fa-info-circle fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.CONFIRM" class="fa fa-check fa-2x i-margin i-color-blue"></i>
+                        </div>
+                        <h1 *ngIf="dialogType !== type.ERROR"
+                            style="margin:0;">{{this.title ? this.title : defaultTitle}}</h1>
+                        <h1 *ngIf="dialogType === type.ERROR"
+                            style="margin:0; color: Red">{{this.title ? this.title : defaultTitle}}</h1>
+                    </div>
+                </div>
+            </div>
+            <mat-dialog-content class="flex-grow-1 no-margin no-padding">
+                <hr>
+                <div class="flex-grow-1 full-width extra-padded message">
+                    <div *ngFor="let line of message" class="full-width"
+                        [innerHTML]="line" style="white-space: pre-line">
+                    </div>
+                </div>
+                <br>
+            </mat-dialog-content>
+            <mat-dialog-actions class="d-flex justify-content-center no-margin no-padding">
+                <save-footer *ngIf="dialogType !== type.CONFIRM" class="centered-text large-size"
+                             (saveClicked)="onClickOk()" name="Ok"></save-footer>
+                <save-footer *ngIf="dialogType === type.CONFIRM" class="centered-text large-size"
+                             (saveClicked)="onClickYes()" name="Yes"></save-footer>
+                <save-footer *ngIf="dialogType === type.CONFIRM" [actionType]="actionType"
+                             class="centered-text large-size" (saveClicked)="onClickNo()"
+                             name="No"></save-footer>
+            </mat-dialog-actions>
+        </div>
+    `, isInline: true, styles: ["\n        hr {\n            width: 98%;\n        }\n\n        .i-margin {\n            margin-left:  0.3em;\n            margin-right: 0.3em;\n        }\n        .i-color-blue {\n            color: #0077B3FF;\n        }\n        .i-color-red  {\n            color: red;\n        }\n\n        .centered-text { text-align: center; }\n\n        .no-padding{\n            padding:0;\n\n        }\n\n        .no-margin{\n            margin: 0;\n        }\n\n        .grabbable {\n            cursor: move;\n            cursor: grab;\n            cursor: -moz-grab;\n            cursor: -webkit-grab;\n        }\n        .grabbed {\n            cursor: move;\n            cursor: grabbing;\n            cursor: -moz-grabbing;\n            cursor: -webkit-grabbing;\n        }\n\n        .force-flex-container-row{\n            display:flex !important;\n        }\n        .extra-padded {\n            padding: 0.6em 0.9em 0.6em 0.9em;\n        }\n        .large-size {\n            font-size: large;\n        }\n        .primary-action {\n            font-size: large;\n        }\n        .secondary-action {\n            font-size: large;\n        }\n        .message {\n            color: #0F244DFF;\n        }\n    "], directives: [{ type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AlertDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-alert-dialog',
+                    template: `
+        <div class="full-height full-width d-flex flex-column">
+            <div class="full-width dialog-header-colors no-margin no-padding">
+                <div #topmostLeftmost mat-dialog-title (mousedown)="onMouseDownHeader($event)"
+                     class="force-flex-container-row align-center full-width padding   {{ movingDialog ? 'grabbed' : 'grabbable' }}">
+                    <div class="d-flex flex-row align-items-center padded">
+                        <img *ngIf="icon" class="icon" [src]="this.icon">
+                        <div *ngIf="!icon">
+                            <i *ngIf="dialogType === type.ALERT" class="fa fa-exclamation fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.SUCCESS" class="fa fa-check-circle fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.FAILED || dialogType === type.ERROR" class="fa fa-exclamation-triangle fa-2x i-margin i-color-red"></i>
+                            <i *ngIf="dialogType === type.WARNING || dialogType === type.VALIDATION" class="fa fa-exclamation-triangle fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.INFO" class="fa fa-info-circle fa-2x i-margin i-color-blue"></i>
+                            <i *ngIf="dialogType === type.CONFIRM" class="fa fa-check fa-2x i-margin i-color-blue"></i>
+                        </div>
+                        <h1 *ngIf="dialogType !== type.ERROR"
+                            style="margin:0;">{{this.title ? this.title : defaultTitle}}</h1>
+                        <h1 *ngIf="dialogType === type.ERROR"
+                            style="margin:0; color: Red">{{this.title ? this.title : defaultTitle}}</h1>
+                    </div>
+                </div>
+            </div>
+            <mat-dialog-content class="flex-grow-1 no-margin no-padding">
+                <hr>
+                <div class="flex-grow-1 full-width extra-padded message">
+                    <div *ngFor="let line of message" class="full-width"
+                        [innerHTML]="line" style="white-space: pre-line">
+                    </div>
+                </div>
+                <br>
+            </mat-dialog-content>
+            <mat-dialog-actions class="d-flex justify-content-center no-margin no-padding">
+                <save-footer *ngIf="dialogType !== type.CONFIRM" class="centered-text large-size"
+                             (saveClicked)="onClickOk()" name="Ok"></save-footer>
+                <save-footer *ngIf="dialogType === type.CONFIRM" class="centered-text large-size"
+                             (saveClicked)="onClickYes()" name="Yes"></save-footer>
+                <save-footer *ngIf="dialogType === type.CONFIRM" [actionType]="actionType"
+                             class="centered-text large-size" (saveClicked)="onClickNo()"
+                             name="No"></save-footer>
+            </mat-dialog-actions>
+        </div>
+    `,
+                    styles: [`
+        hr {
+            width: 98%;
+        }
+
+        .i-margin {
+            margin-left:  0.3em;
+            margin-right: 0.3em;
+        }
+        .i-color-blue {
+            color: #0077B3FF;
+        }
+        .i-color-red  {
+            color: red;
+        }
+
+        .centered-text { text-align: center; }
+
+        .no-padding{
+            padding:0;
+
+        }
+
+        .no-margin{
+            margin: 0;
+        }
+
+        .grabbable {
+            cursor: move;
+            cursor: grab;
+            cursor: -moz-grab;
+            cursor: -webkit-grab;
+        }
+        .grabbed {
+            cursor: move;
+            cursor: grabbing;
+            cursor: -moz-grabbing;
+            cursor: -webkit-grabbing;
+        }
+
+        .force-flex-container-row{
+            display:flex !important;
+        }
+        .extra-padded {
+            padding: 0.6em 0.9em 0.6em 0.9em;
+        }
+        .large-size {
+            font-size: large;
+        }
+        .primary-action {
+            font-size: large;
+        }
+        .secondary-action {
+            font-size: large;
+        }
+        .message {
+            color: #0F244DFF;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: ChangeDetectorRef }]; }, propDecorators: { topmostLeftmost: [{
+                type: ViewChild,
+                args: ['topmostLeftmost', { static: false }]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }] } });
+
+class SpinnerDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.strokeWidth = 3;
+        this.diameter = 30;
+        this.message = 'Loading...';
+        if (this.data) {
+            if (!!this.data.message) {
+                this.message = this.data.message;
+            }
+            if (!!this.data.diameter) {
+                this.diameter = this.data.diameter;
+            }
+            if (!!this.data.strokeWidth) {
+                this.strokeWidth = this.data.strokeWidth;
+            }
+        }
+    }
+}
+SpinnerDialogComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SpinnerDialogComponent, deps: [{ token: MatDialogRef }, { token: MAT_DIALOG_DATA }], target: ɵɵFactoryTarget.Component });
+SpinnerDialogComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SpinnerDialogComponent, selector: "hci-spinner-dialog", inputs: { strokeWidth: "strokeWidth", diameter: "diameter", message: "message" }, ngImport: i0, template: "<div mat-dialog-title class=\"not-rendered\">\r\n<!--<div mat-dialog-title>-->\r\n</div>\r\n<div mat-dialog-content class=\"full-height padded\">\r\n    <div class=\"full-width full-height t\">\r\n        <div class=\"tr\">\r\n            <div class=\"td vertical-center\" [style.height.px]=\"diameter + 5\">\r\n                <mat-spinner [hidden]=\"false\" strokeWidth=\"{{strokeWidth}}\" [diameter]=\"diameter\"></mat-spinner>\r\n            </div>\r\n            <div class=\"td vertical-center\">\r\n                {{message}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div mat-dialog-actions class=\"not-rendered\">\r\n<!--<div mat-dialog-actions>-->\r\n</div>\r\n", styles: ["\n        .t  { display: table; }\n        .tr { display: table-row; }\n        .td { display: table-cell; }\n\n        .full-height { height: 100%; }\n        .full-width  { width:  100%; }\n\n        .vertical-center { vertical-align: middle; }\n\n        .padded {\n            padding-top: 0.4em;\n            padding-bottom: 0.4em;\n        }\n\n        .not-rendered {\n            padding: 0;\n            margin:  0;\n\n            min-height: 0;\n            max-height: 0;\n            height:     0;\n        }\n\n    "], components: [{ type: MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SpinnerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-spinner-dialog',
+                    templateUrl: 'spinner-dialog.component.html',
+                    styles: [`
+        .t  { display: table; }
+        .tr { display: table-row; }
+        .td { display: table-cell; }
+
+        .full-height { height: 100%; }
+        .full-width  { width:  100%; }
+
+        .vertical-center { vertical-align: middle; }
+
+        .padded {
+            padding-top: 0.4em;
+            padding-bottom: 0.4em;
+        }
+
+        .not-rendered {
+            padding: 0;
+            margin:  0;
+
+            min-height: 0;
+            max-height: 0;
+            height:     0;
+        }
+
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { strokeWidth: [{
+                type: Input
+            }], diameter: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+class CustomDialogComponent {
+    constructor(dialogRef, data, changeDetector) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.changeDetector = changeDetector;
+        this.title = '';
+        this.icon = '';
+        this.actionType = ActionType;
+        this.originalXClick = 0;
+        this.originalYClick = 0;
+        this.movingDialog = false;
+        this.positionX = 0;
+        this.positionY = 0;
+        this.actions = [];
+        this.title = data.title;
+        this.tempRef = data.templateRef;
+        this.icon = data.icon;
+        this.context = data.context;
+        const actionConfig = data.actionConfig ? data.actionConfig : null;
+        this.actions = actionConfig ? actionConfig.actions : [];
+        this.form = actionConfig && actionConfig.formSource ? actionConfig.formSource : null;
+    }
+    get primaryDisable() {
+        return this.form && this.form.invalid;
+    }
+    // todo need make this customizable
+    get secondaryDisable() {
+        return false;
+    }
+    ngOnInit() {
+        this.context.dialog = this.dialogRef;
+        this.vcr.createEmbeddedView(this.tempRef, this.context);
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onMouseDownHeader(event) {
+        if (!event) {
+            return;
+        }
+        this.positionX = this.topmostLeftmost.nativeElement.offsetLeft;
+        this.positionY = this.topmostLeftmost.nativeElement.offsetTop;
+        this.originalXClick = event.screenX;
+        this.originalYClick = event.screenY;
+        this.movingDialog = true;
+        this.changeDetector.detach();
+    }
+    onMouseMove(event) {
+        if (!event) {
+            return;
+        }
+        if (this.movingDialog) {
+            this.positionX += event.screenX - this.originalXClick;
+            this.positionY += event.screenY - this.originalYClick;
+            this.originalXClick = event.screenX;
+            this.originalYClick = event.screenY;
+            const newDialogPosition = {
+                left: '' + this.positionX + 'px',
+                top: '' + this.positionY + 'px',
+            };
+            this.dialogRef.updatePosition(newDialogPosition);
+        }
+    }
+    onMouseUp() {
+        this.movingDialog = false;
+        this.changeDetector.reattach();
+    }
+    executeAction(action) {
+        if (action.externalAction) {
+            action.externalAction(this.dialogRef);
+        }
+        if (action.internalAction && action.internalAction === 'onClose') {
+            this.onClose();
+        }
+    }
+}
+CustomDialogComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomDialogComponent, deps: [{ token: MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ChangeDetectorRef }], target: ɵɵFactoryTarget.Component });
+CustomDialogComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomDialogComponent, selector: "hci-custom-dialog", host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "topmostLeftmost", first: true, predicate: ["topmostLeftmost"], descendants: true }], ngImport: i0, template: `
+        <div class="d-flex full-height full-width flex-column">
+            <div *ngIf="this.title" class="full-width generic-dialog-header-colors no-margin no-padding">
+                <div #topmostLeftmost mat-dialog-title (mousedown)="onMouseDownHeader($event)"
+                     class="force-flex-container-row align-items-center full-width p-2   {{ movingDialog ? 'grabbed' : 'grabbable' }}">
+                    <div class="-flex flex-row align-items-center padded">
+                        <img  *ngIf="icon" class="icon" [src]="this.icon">
+                        <div *ngIf="icon && icon.substr(0, 2) === '<i'" class="i-class" [innerHTML]="icon" ></div>
+                        <h3 style="margin:0;">{{this.title}}</h3>
+                    </div>
+                    <div class="flex-grow-1"></div>
+                    <div class="padded" (click)="onClose()">
+                        <i class="exit fas fa-times"></i>
+                    </div>
+                </div>
+            </div>
+            <mat-dialog-content class="flex-grow-1 full-width no-margin p-2" style="min-height: 6em;">
+                <div #anchor></div>
+            </mat-dialog-content>
+            <mat-dialog-actions *ngIf="actions && actions.length > 0"
+                                class="d-flex flex-row justify-content-end no-margin no-padding generic-dialog-footer-colors">
+                <div *ngFor="let action of actions">
+                    <save-footer *ngIf="action.type === actionType.PRIMARY;else secondary"
+                                 [actionType]="action.type"
+                                 [icon]="action.icon"
+                                 [disableSave]="primaryDisable"
+                                 (saveClicked)="executeAction(action)"
+                                 [name]="action.name">
+                    </save-footer>
+                    <!-- to avoid issue with multiple spinner or dirty notes-->
+                    <ng-template #secondary>
+                        <save-footer [actionType]="action.type"
+                                     (saveClicked)="executeAction(action)"
+                                     [icon]="action.icon"
+                                     [disableSave]="secondaryDisable"
+                                     [name]="action.name">
+                        </save-footer>
+                    </ng-template>
+                </div>
+            </mat-dialog-actions>
+        </div>
+    `, isInline: true, styles: ["\n        .centered-text { text-align: center; }\n\n        .no-padding{\n            padding:0;\n\n        }\n\n        .no-margin{\n            margin: 0;\n        }\n\n        .grabbable {\n            cursor: move;\n            cursor: grab;\n            cursor: -moz-grab;\n            cursor: -webkit-grab;\n        }\n        .grabbed:active {\n            cursor: grabbing;\n            cursor: -moz-grabbing;\n            cursor: -webkit-grabbing;\n        }\n\n        .force-flex-container-row{\n            display:flex !important;\n        }\n\n        .exit{\n            max-width: 20px;\n            cursor: pointer;\n        }\n\n        .i-class {\n            margin-left:  0.3em;\n            margin-right: 0.3em;\n        }\n        mat-dialog-content {\n            max-height: 100vh !important;\n            max-width: 100vw !important ;\n        }\n    "], directives: [{ type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-custom-dialog',
+                    template: `
+        <div class="d-flex full-height full-width flex-column">
+            <div *ngIf="this.title" class="full-width generic-dialog-header-colors no-margin no-padding">
+                <div #topmostLeftmost mat-dialog-title (mousedown)="onMouseDownHeader($event)"
+                     class="force-flex-container-row align-items-center full-width p-2   {{ movingDialog ? 'grabbed' : 'grabbable' }}">
+                    <div class="-flex flex-row align-items-center padded">
+                        <img  *ngIf="icon" class="icon" [src]="this.icon">
+                        <div *ngIf="icon && icon.substr(0, 2) === '<i'" class="i-class" [innerHTML]="icon" ></div>
+                        <h3 style="margin:0;">{{this.title}}</h3>
+                    </div>
+                    <div class="flex-grow-1"></div>
+                    <div class="padded" (click)="onClose()">
+                        <i class="exit fas fa-times"></i>
+                    </div>
+                </div>
+            </div>
+            <mat-dialog-content class="flex-grow-1 full-width no-margin p-2" style="min-height: 6em;">
+                <div #anchor></div>
+            </mat-dialog-content>
+            <mat-dialog-actions *ngIf="actions && actions.length > 0"
+                                class="d-flex flex-row justify-content-end no-margin no-padding generic-dialog-footer-colors">
+                <div *ngFor="let action of actions">
+                    <save-footer *ngIf="action.type === actionType.PRIMARY;else secondary"
+                                 [actionType]="action.type"
+                                 [icon]="action.icon"
+                                 [disableSave]="primaryDisable"
+                                 (saveClicked)="executeAction(action)"
+                                 [name]="action.name">
+                    </save-footer>
+                    <!-- to avoid issue with multiple spinner or dirty notes-->
+                    <ng-template #secondary>
+                        <save-footer [actionType]="action.type"
+                                     (saveClicked)="executeAction(action)"
+                                     [icon]="action.icon"
+                                     [disableSave]="secondaryDisable"
+                                     [name]="action.name">
+                        </save-footer>
+                    </ng-template>
+                </div>
+            </mat-dialog-actions>
+        </div>
+    `,
+                    styles: [`
+        .centered-text { text-align: center; }
+
+        .no-padding{
+            padding:0;
+
+        }
+
+        .no-margin{
+            margin: 0;
+        }
+
+        .grabbable {
+            cursor: move;
+            cursor: grab;
+            cursor: -moz-grab;
+            cursor: -webkit-grab;
+        }
+        .grabbed:active {
+            cursor: grabbing;
+            cursor: -moz-grabbing;
+            cursor: -webkit-grabbing;
+        }
+
+        .force-flex-container-row{
+            display:flex !important;
+        }
+
+        .exit{
+            max-width: 20px;
+            cursor: pointer;
+        }
+
+        .i-class {
+            margin-left:  0.3em;
+            margin-right: 0.3em;
+        }
+        mat-dialog-content {
+            max-height: 100vh !important;
+            max-width: 100vw !important ;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: ChangeDetectorRef }]; }, propDecorators: { vcr: [{
+                type: ViewChild,
+                args: ['anchor', { read: ViewContainerRef, static: true }]
+            }], topmostLeftmost: [{
+                type: ViewChild,
+                args: ['topmostLeftmost', { static: false }]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }] } });
+
+class GenericContainerDialogComponent {
+    constructor(dialog, router, changeDetector, dialogRef, data) {
+        this.dialog = dialog;
+        this.router = router;
+        this.changeDetector = changeDetector;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.classList = 'd-flex flex-column flex-grow-1 flex-shrink-1';
+        this.type = ActionType;
+        this.actions = [];
+        this.originalXClick = 0;
+        this.originalYClick = 0;
+        this.positionX = 0;
+        this.positionY = 0;
+        this.movingDialog = false;
+        if (data) {
+            this.dialogContentBluePrint = data.dialogContent;
+            this.icon = data.icon;
+            this.title = data.title;
+            this.useSaveFooter = data.actionConfig ? data.actionConfig.useSaveFooter : false;
+            this.actions = data.actionConfig ? data.actionConfig.actions : [];
+        }
+    }
+    ngOnInit() {
+    }
+    createdComponent(event) {
+        this.dialogContent = event.instance;
+    }
+    executeAction(action) {
+        if (action.externalAction) {
+            action.externalAction();
+        }
+        if (action.internalAction) {
+            const internalAction = action.internalAction;
+            if (action.internalAction === 'cancel' || action.internalAction === 'onClose') {
+                if (this.dialogContent[internalAction]) {
+                    this.dialogContent[internalAction]();
+                }
+                else {
+                    this.onClose();
+                }
+            }
+            else {
+                if (typeof action.internalActionReturnValue !== 'undefined') {
+                    if (action.internalActionReturnValue) {
+                        this.dialogContent[internalAction](action.internalActionReturnValue);
+                    }
+                }
+                else {
+                    this.dialogContent[internalAction]();
+                }
+            }
+        }
+    }
+    onMouseDownHeader(event) {
+        if (!event) {
+            return;
+        }
+        this.positionX = this.topmostLeftmost.nativeElement.offsetLeft;
+        this.positionY = this.topmostLeftmost.nativeElement.offsetTop;
+        this.originalXClick = event.screenX;
+        this.originalYClick = event.screenY;
+        this.movingDialog = true;
+        this.changeDetector.detach();
+    }
+    onMouseMove(event) {
+        if (!event) {
+            return;
+        }
+        if (this.movingDialog) {
+            this.positionX += event.screenX - this.originalXClick;
+            this.positionY += event.screenY - this.originalYClick;
+            this.originalXClick = event.screenX;
+            this.originalYClick = event.screenY;
+            const newDialogPosition = {
+                left: '' + this.positionX + 'px',
+                top: '' + this.positionY + 'px',
+            };
+            this.dialogRef.updatePosition(newDialogPosition);
+        }
+    }
+    onMouseUp() {
+        this.movingDialog = false;
+        this.changeDetector.reattach();
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    ngOnDestroy() {
+    }
+}
+GenericContainerDialogComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GenericContainerDialogComponent, deps: [{ token: MatDialog }, { token: Router }, { token: ChangeDetectorRef }, { token: MatDialogRef }, { token: MAT_DIALOG_DATA }], target: ɵɵFactoryTarget.Component });
+GenericContainerDialogComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GenericContainerDialogComponent, selector: "hci-generic-container-dialog", host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp($event)" }, properties: { "class": "this.classList" } }, viewQueries: [{ propertyName: "topmostLeftmost", first: true, predicate: ["topmostLeftmost"], descendants: true }], ngImport: i0, template: "<div class=\"full-height full-width d-flex flex-column\" style=\"height: 100%;\">\r\n    <div class=\"full-width generic-dialog-header-colors no-margin no-padding\">\r\n        <div #topmostLeftmost mat-dialog-title (mousedown)=\"onMouseDownHeader($event)\"\r\n             class=\"d-flex align-items-center full-width\" [ngClass]=\"{'grabbed':movingDialog, 'grabbable': !movingDialog}\">\r\n            <div class=\"d-flex flex-row align-items-center p-2\">\r\n                <img class=\"icon\" *ngIf=\"icon && icon.substr(0, 2) !== '<i'\" [src]=\"icon\">\r\n                <div *ngIf=\"icon && icon.substr(0, 2) === '<i'\" class=\"i-class\" [innerHTML]=\"icon\" ></div>\r\n                <h3 style=\"margin:0;\">{{this.title ? this.title : this.dialogContent.innerTitle}}</h3>\r\n            </div>\r\n            <div class=\"flex-grow-1\"></div>\r\n            <div class=\"padded\" (click)=\"onClose()\">\r\n                <i class=\"exit fas fa-times\"></i>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"flex-grow-1 no-margin no-padding\">\r\n        <div class=\"flex-grow-1 full-height full-width padded\">\r\n            <ndc-dynamic [ndcDynamicComponent]=\"this.dialogContentBluePrint\"\r\n                         [ndcDynamicInputs]=\"this.data\"\r\n                         (ndcDynamicCreated)=\"createdComponent($event)\">\r\n            </ndc-dynamic>\r\n        </div>\r\n    </mat-dialog-content>\r\n    <mat-dialog-actions *ngIf=\"actions && actions.length > 0\"\r\n            class=\"d-flex flex-row justify-content-end no-margin no-padding generic-dialog-footer-colors\">\r\n        <div *ngFor=\"let action of actions\">\r\n            <save-footer *ngIf=\"action.type === type.PRIMARY;else secondary\"\r\n                         [actionType]=\"action.type\"\r\n                         [icon]=\"action.icon\"\r\n                         (saveClicked)=\"executeAction(action)\"\r\n                         [disableSave]=\"this.dialogContent.primaryDisable(action)\"\r\n                         [dirty]=\"this.dialogContent.dirty()\"\r\n                         [name]=\"action.name\"\r\n                         [showSpinner]=\"this.dialogContent.showSpinner\">\r\n            </save-footer>\r\n            <!-- to avoid issue with multiple spinner or dirty notes-->\r\n            <ng-template #secondary>\r\n                <save-footer [actionType]=\"action.type\"\r\n                             (saveClicked)=\"executeAction(action)\"\r\n                             [icon]=\"action.icon\"\r\n                             [disableSave]=\"this.dialogContent.secondaryDisable(action)\"\r\n                             [name]=\"action.name\">\r\n\r\n                </save-footer>\r\n            </ng-template>\r\n        </div>\r\n    </mat-dialog-actions>\r\n</div>\r\n", styles: ["\n\n        .no-padding{\n            padding:0;\n        }\n        .no-margin{\n            margin: 0;\n        }\n        .grabbable {\n            cursor: move;\n            cursor: grab;\n            cursor: -moz-grab;\n            cursor: -webkit-grab;\n        }\n        .grabbed:active {\n            cursor: move;\n            cursor: grabbing;\n            cursor: -moz-grabbing;\n            cursor: -webkit-grabbing;\n        }\n        .exit{\n            max-width: 20px;\n            cursor: pointer;\n        }\n        .i-class {\n            margin-left:  0.3em;\n            margin-right: 0.3em;\n        }\n        mat-dialog-content {\n            max-height: 100% !important;\n        }\n\n    "], components: [{ type: DynamicComponent, selector: "ndc-dynamic", inputs: ["ndcDynamicComponent", "ndcDynamicInjector", "ndcDynamicProviders", "ndcDynamicContent"], outputs: ["ndcDynamicCreated"] }], directives: [{ type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs],[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ngComponentOutletNdcDynamicInputs", "ndcDynamicOutputs", "ngComponentOutletNdcDynamicOutputs"] }, { type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GenericContainerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-generic-container-dialog',
+                    templateUrl: './generic-container-dialog.component.html',
+                    styles: [`
+
+        .no-padding{
+            padding:0;
+        }
+        .no-margin{
+            margin: 0;
+        }
+        .grabbable {
+            cursor: move;
+            cursor: grab;
+            cursor: -moz-grab;
+            cursor: -webkit-grab;
+        }
+        .grabbed:active {
+            cursor: move;
+            cursor: grabbing;
+            cursor: -moz-grabbing;
+            cursor: -webkit-grabbing;
+        }
+        .exit{
+            max-width: 20px;
+            cursor: pointer;
+        }
+        .i-class {
+            margin-left:  0.3em;
+            margin-right: 0.3em;
+        }
+        mat-dialog-content {
+            max-height: 100% !important;
+        }
+
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialog }, { type: Router }, { type: ChangeDetectorRef }, { type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { classList: [{
+                type: HostBinding,
+                args: ['class']
+            }], topmostLeftmost: [{
+                type: ViewChild,
+                args: ['topmostLeftmost', { static: false }]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }] } });
+
+var ConfirmType;
+(function (ConfirmType) {
+    ConfirmType["DELETE"] = "delete";
+    ConfirmType["DELETE_W_MESSAGE"] = "deleteMessage";
+    ConfirmType["DELETE_W_PROMPT"] = "deletePrompt";
+    ConfirmType["DISCARD"] = "discard";
+    ConfirmType["CONFIRM_AND_CLOSE"] = "confirmAndClose";
+    ConfirmType["ADD"] = "add";
+    ConfirmType["ALERT"] = "alert";
+    ConfirmType["GENERIC"] = "generic";
+})(ConfirmType || (ConfirmType = {}));
+
+class BaseGenericContainerDialog {
+    constructor() {
+        this.showSpinner = false;
+        this.innerTitle = '';
+        this.primaryDisable = (action) => {
+            return false;
+        };
+        this.secondaryDisable = (action) => {
+            return false;
+        };
+        this.dirty = () => { return false; };
+    }
+}
+BaseGenericContainerDialog.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseGenericContainerDialog, deps: [], target: ɵɵFactoryTarget.Component });
+BaseGenericContainerDialog.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BaseGenericContainerDialog, selector: "ng-component", inputs: { inputData: "inputData" }, ngImport: i0, template: '', isInline: true });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseGenericContainerDialog, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inputData: [{
+                type: Input
+            }] } });
+
+class ConfirmDialogComponent extends BaseGenericContainerDialog {
+    constructor(dialogRef, data) {
+        super();
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.ConfirmType = ConfirmType; // make enum available in template
+        this.prompt = '';
+        this.message1 = '';
+        this.message2 = '';
+        this.confirmType = ConfirmType.GENERIC;
+        const temp = data.confirmType ? data.confirmType : ConfirmType.GENERIC;
+        if (Object.values(ConfirmType).includes(temp)) {
+            this.confirmType = temp;
+        }
+        this.prompt = data.prompt ? data.prompt : '';
+        this.message1 = data.message1 ? data.message1 : '';
+        this.message2 = data.message2 ? data.message2 : '';
+        this.setupMessagesByType();
+    }
+    setupMessagesByType() {
+        // by enum type, setup the messages/prompt
+        switch (this.confirmType) {
+            case ConfirmType.DELETE:
+                this.prompt = 'The following will be deleted:';
+                this.message2 = 'Continue?';
+                break;
+            case ConfirmType.DELETE_W_MESSAGE:
+                this.prompt = 'The following will be deleted:';
+                break;
+            case ConfirmType.DELETE_W_PROMPT:
+                // noop, take all of what was passed in
+                break;
+            case ConfirmType.DISCARD:
+                this.prompt = '';
+                this.message2 = 'Continue?';
+                break;
+            case ConfirmType.CONFIRM_AND_CLOSE:
+                this.prompt = '';
+                this.message2 = '';
+                break;
+            case ConfirmType.ADD:
+                this.prompt = 'The following will be added:';
+                this.message2 = 'Continue?';
+                break;
+            case ConfirmType.ALERT:
+                // noop, will only use the message1 in a special template, and just ignore rest
+                break;
+            case ConfirmType.GENERIC:
+                // TODO: either only use message 1 or just take all passed in...
+                this.prompt = '';
+                this.message2 = '';
+                break;
+            default:
+                throw new Error('Confirm type doesn\'t exist');
+        }
+    }
+    onConfirmClick(value) {
+        this.dialogRef.close(value);
+    }
+}
+ConfirmDialogComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MatDialogRef }, { token: MAT_DIALOG_DATA }], target: ɵɵFactoryTarget.Component });
+ConfirmDialogComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfirmDialogComponent, selector: "hci-confirm-dialog", usesInheritance: true, ngImport: i0, template: `
+    <div class="ri-confirm-body">
+
+      <div *ngIf="confirmType !== ConfirmType.ALERT; else alertBlock">
+        {{prompt}}
+        <div class="ri-confirm-text-delete">{{ message1 }}</div>
+        {{message2}}
+      </div>
+
+
+      <div #alertBlock>
+        <p>We are working to correct it. Contact CODE support if the error persists.</p>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <strong>Show details</strong>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>{{ message1 }}</div>
+        </mat-expansion-panel>
+      </div>
+
+    </div>
+  `, isInline: true, styles: ["\n\n  "], components: [{ type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-confirm-dialog',
+                    template: `
+    <div class="ri-confirm-body">
+
+      <div *ngIf="confirmType !== ConfirmType.ALERT; else alertBlock">
+        {{prompt}}
+        <div class="ri-confirm-text-delete">{{ message1 }}</div>
+        {{message2}}
+      </div>
+
+
+      <div #alertBlock>
+        <p>We are working to correct it. Contact CODE support if the error persists.</p>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <strong>Show details</strong>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>{{ message1 }}</div>
+        </mat-expansion-panel>
+      </div>
+
+    </div>
+  `,
+                    styles: [`
+
+  `]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class DialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this._spinnerDialogIsOpen = false;
+        this.spinnerWorkItemCount = 0;
+        this.checkingSpinnerWorkItems = false;
+        this.spinnerDialogRefs = [];
+    }
+    get spinnerDialogIsOpen() {
+        return this._spinnerDialogIsOpen;
+    }
+    alert(message, title, dialogType, icon, config) {
+        return this.openDialog(message, title, dialogType ? dialogType : DialogType.ALERT, icon, config);
+    }
+    confirm(message, title, icon, config) {
+        return this.openDialog(message, title, DialogType.CONFIRM, icon, config);
+    }
+    /**
+     * Creates a ConfirmDialogComponent with different display depending on
+     * the ConfirmType.
+     * @param title defaults to 'Confirm'
+     * @param icon defaults to 'fa fa-info-circle'
+     * @param config config.data can contain a prompt, message1 and/or
+     * message2 according to the ConfirmType chosen
+     * @param actionConfig sets up the dialog buttons and actions if you want
+     * to override the defaults
+     */
+    confirmByType(confirmType, title, icon, config, actionConfig) {
+        if (!title) {
+            title = 'Confirm';
+        }
+        if (!icon) {
+            icon = 'fa fa-info-circle';
+        }
+        // set up a default if needed
+        if (!config) {
+            config = new MatDialogConfig();
+            config.width = '33vw';
+            config.minWidth = '300px';
+            config.disableClose = true;
+        }
+        if (config.data) {
+            config.data.confirmType = confirmType;
+        }
+        else {
+            config.data = {
+                confirmType
+            };
+        }
+        // if no actions passed in, set up the defaults
+        if (!actionConfig) {
+            // default actions
+            let primary = { type: ActionType.PRIMARY, name: 'YES',
+                internalAction: 'onConfirmClick', internalActionReturnValue: true };
+            let secondary = { type: ActionType.SECONDARY, name: 'GO BACK',
+                internalAction: 'onClose' };
+            // by enum type, setup the messages/prompt
+            // only two need different defaults than generic defaults
+            switch (confirmType) {
+                case ConfirmType.CONFIRM_AND_CLOSE:
+                    primary = { type: ActionType.PRIMARY, name: 'CONFIRM AND CLOSE',
+                        internalAction: 'onConfirmClick', internalActionReturnValue: true };
+                    break;
+                case ConfirmType.ALERT:
+                    primary = undefined;
+                    secondary = { type: ActionType.SECONDARY, name: 'CLOSE',
+                        internalAction: 'onClose' };
+                    break;
+                // case ConfirmType.DELETE:
+                // case ConfirmType.DELETE_W_MESSAGE:
+                // case ConfirmType.DELETE_W_PROMPT:
+                // case ConfirmType.DISCARD:
+                // case ConfirmType.ADD:
+                // case ConfirmType.GENERIC:
+                default:
+                    throw new Error('Confirm type doesn\'t exist');
+            }
+            const actions = [];
+            if (primary) {
+                actions.push(primary);
+            }
+            if (secondary) {
+                actions.push(secondary);
+            }
+            actionConfig = {
+                actions
+            };
+        }
+        return this.genericDialogContainer(ConfirmDialogComponent, title, icon, config, actionConfig);
+    }
+    error(message, title, icon, config) {
+        return this.openDialog(message, title, DialogType.ERROR, icon, config);
+    }
+    info(message, title, icon, config) {
+        return this.openDialog(message, title, DialogType.INFO, icon, config);
+    }
+    createCustomDialog(tempRef, context, title, icon, config, actionConfig) {
+        let configuration = null;
+        if (!config) {
+            configuration = new MatDialogConfig();
+        }
+        else {
+            configuration = config;
+        }
+        configuration.data = configuration.data ? configuration.data : {};
+        configuration.data.templateRef = tempRef;
+        configuration.data.title = title ? title : '';
+        configuration.data.icon = icon ? icon : '';
+        configuration.data.context = context;
+        if (actionConfig) {
+            configuration.data.actionConfig = actionConfig;
+        }
+        configuration.minWidth = configuration.minWidth ? configuration.minWidth : '10em';
+        configuration.width = configuration.width ? configuration.width : '30em';
+        configuration.panelClass = ['mx-sized-dialog', 'no-padding'];
+        configuration.disableClose = true;
+        configuration.hasBackdrop = true;
+        const dialogRef = this.dialog.open(CustomDialogComponent, configuration);
+        return dialogRef;
+    }
+    startDefaultSpinnerDialog() {
+        return this.startSpinnerDialog('Please wait...', 3, 30);
+    }
+    startSpinnerDialog(message, strokeWidth, diameter) {
+        if (this._spinnerDialogIsOpen) {
+            return null;
+        }
+        this._spinnerDialogIsOpen = true;
+        const configuration = new MatDialogConfig();
+        configuration.data = {
+            message,
+            strokeWidth,
+            diameter
+        };
+        configuration.width = '13em';
+        configuration.disableClose = true;
+        const dialogRef = this.dialog.open(SpinnerDialogComponent, configuration);
+        dialogRef.afterClosed().subscribe(() => {
+            this._spinnerDialogIsOpen = false;
+        });
+        this.spinnerDialogRefs.push(dialogRef);
+        return dialogRef;
+    }
+    startNonModalSpinnerDialog(message, strokeWidth, diameter) {
+        if (this._spinnerDialogIsOpen) {
+            return null;
+        }
+        this._spinnerDialogIsOpen = true;
+        const configuration = new MatDialogConfig();
+        configuration.data = {
+            message,
+            strokeWidth,
+            diameter
+        };
+        configuration.width = '13em';
+        configuration.disableClose = true;
+        configuration.hasBackdrop = false;
+        const dialogRef = this.dialog.open(SpinnerDialogComponent, configuration);
+        dialogRef.afterClosed().subscribe(() => {
+            this._spinnerDialogIsOpen = false;
+        });
+        this.spinnerDialogRefs.push(dialogRef);
+        return dialogRef;
+    }
+    // Let there be an alternative, global way to stop all active spinner dialogs.
+    stopAllSpinnerDialogs() {
+        this.spinnerWorkItemCount = 0;
+        for (const dialogRef of this.spinnerDialogRefs) {
+            setTimeout(() => {
+                dialogRef.close();
+            });
+        }
+        this.spinnerDialogRefs = [];
+    }
+    addSpinnerWorkItem() {
+        this.spinnerWorkItemCount++;
+        if (!this.checkingSpinnerWorkItems) {
+            this.checkingSpinnerWorkItems = true;
+            setTimeout(() => {
+                this.checkSpinnerWorkItems();
+            });
+        }
+    }
+    removeSpinnerWorkItem() {
+        this.spinnerWorkItemCount--;
+        if (this.spinnerWorkItemCount < 0) {
+            this.spinnerWorkItemCount = 0;
+        }
+        if (!this.checkingSpinnerWorkItems) {
+            this.checkingSpinnerWorkItems = true;
+            setTimeout(() => {
+                this.checkSpinnerWorkItems();
+            });
+        }
+    }
+    checkSpinnerWorkItems() {
+        this.checkingSpinnerWorkItems = false;
+        if (this.spinnerWorkItemCount) {
+            if (!this._spinnerDialogIsOpen) {
+                this.startDefaultSpinnerDialog();
+            }
+        }
+        else if (this._spinnerDialogIsOpen) {
+            this.stopAllSpinnerDialogs();
+        }
+    }
+    genericDialogContainer(dialogContent, title, icon, config, actionConfig) {
+        let configuration = null;
+        if (!config) {
+            configuration = new MatDialogConfig();
+        }
+        else {
+            configuration = config;
+        }
+        configuration.data = configuration.data ? configuration.data : {};
+        configuration.data.dialogContent = dialogContent;
+        configuration.data.title = title;
+        if (icon) {
+            configuration.data.icon = icon;
+        }
+        if (actionConfig) {
+            configuration.data.actionConfig = actionConfig;
+        }
+        configuration.panelClass = ['mx-sized-dialog', 'no-padding'];
+        configuration.disableClose = true;
+        configuration.hasBackdrop = true;
+        const dialogRef = this.dialog.open(GenericContainerDialogComponent, configuration);
+        return dialogRef.afterClosed();
+    }
+    openDialog(message, title, type, icon, config) {
+        let configuration = null;
+        if (!config) {
+            configuration = new MatDialogConfig();
+        }
+        else {
+            configuration = config;
+        }
+        configuration.data = configuration.data ? configuration.data : {};
+        configuration.data.message = message;
+        configuration.data.title = title ? title : '';
+        configuration.data.icon = icon ? icon : '';
+        configuration.data.dialogType = type ? type : '';
+        configuration.maxWidth = configuration.maxWidth ? configuration.maxWidth : '80vw';
+        configuration.maxHeight = configuration.maxHeight ? configuration.maxHeight : '80vh';
+        configuration.minWidth = configuration.minWidth ? configuration.minWidth : '30em';
+        configuration.panelClass = 'no-padding';
+        configuration.disableClose = true;
+        configuration.autoFocus = false;
+        configuration.hasBackdrop = false;
+        let dialogRef;
+        dialogRef = this.dialog.open(AlertDialogComponent, configuration);
+        return dialogRef.afterClosed();
+    }
+}
+DialogService.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogService, deps: [{ token: MatDialog }], target: ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogService });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MatDialog }]; } });
+
+class SaveFooterComponent {
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+        this.actionType = ActionType.PRIMARY;
+        this.message = 'Your changes have not been saved';
+        this.name = 'Save';
+        this.disableSave = false;
+        this.saveClicked = new EventEmitter();
+        this.type = ActionType;
+    }
+    set dirty(data) {
+        if (data) {
+            this._dirty = data;
+        }
+        else {
+            this._dirty = false;
+        }
+    }
+    get dirty() {
+        return this._dirty;
+    }
+    set showSpinner(showSpinner) {
+        setTimeout(() => {
+            if (showSpinner) {
+                this.dialogService.startDefaultSpinnerDialog();
+            }
+            else {
+                this.dialogService.stopAllSpinnerDialogs();
+            }
+        });
+    }
+    ngOnInit() {
+        // console.log(this.disableSave);
+    }
+    notifySave() {
+        this.saveClicked.emit();
+    }
+    ngOnDestroy() {
+        this.saveClicked.unsubscribe();
+    }
+}
+SaveFooterComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveFooterComponent, deps: [{ token: DialogService }], target: ɵɵFactoryTarget.Component });
+SaveFooterComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SaveFooterComponent, selector: "hci-save-footer", inputs: { actionType: "actionType", icon: "icon", message: "message", name: "name", dirty: "dirty", showSpinner: "showSpinner", disableSave: "disableSave" }, outputs: { saveClicked: "saveClicked" }, ngImport: i0, template: `
+        <div class="full-height full-width" style="margin-bottom: 8px;">
+            <div class="d-flex flex-row align-items-center right-align padded">
+                <div *ngIf="dirty" class="warning-background padded">
+                    {{ message }}
+                </div>
+                <div class="major-left-right-margin">
+                    <button mat-raised-button [disabled]="disableSave"
+                            [color]="actionType" (click)="notifySave()"
+                            [ngClass]="{'primary-action': actionType === type.PRIMARY,
+                                        'secondary-action': actionType === type.SECONDARY && !disableSave }">
+                        <img *ngIf="icon" [src]="icon" alt="">
+                        {{ name }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, styles: ["\n        .primary-action{\n            background-color: #0077B3FF;\n            font-weight: bolder;\n            color: white;\n        }\n        .secondary-action{\n            background-color: #DEF4FFFF;\n            font-weight: bolder;\n            color: #0077B3FF;\n            border: #0077B3FF  solid 1px;\n        }\n\n        .major-left-right-margin {\n            margin-left:  0.5em;\n            margin-right: 0.5em;\n        }\n\n        .right-align {\n            text-align: right;\n            justify-content: flex-end;\n        }\n\n\n        .warning-background { background:#feec89; }\n\n    "], components: [{ type: MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-save-footer',
+                    template: `
+        <div class="full-height full-width" style="margin-bottom: 8px;">
+            <div class="d-flex flex-row align-items-center right-align padded">
+                <div *ngIf="dirty" class="warning-background padded">
+                    {{ message }}
+                </div>
+                <div class="major-left-right-margin">
+                    <button mat-raised-button [disabled]="disableSave"
+                            [color]="actionType" (click)="notifySave()"
+                            [ngClass]="{'primary-action': actionType === type.PRIMARY,
+                                        'secondary-action': actionType === type.SECONDARY && !disableSave }">
+                        <img *ngIf="icon" [src]="icon" alt="">
+                        {{ name }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    `,
+                    styles: [`
+        .primary-action{
+            background-color: #0077B3FF;
+            font-weight: bolder;
+            color: white;
+        }
+        .secondary-action{
+            background-color: #DEF4FFFF;
+            font-weight: bolder;
+            color: #0077B3FF;
+            border: #0077B3FF  solid 1px;
+        }
+
+        .major-left-right-margin {
+            margin-left:  0.5em;
+            margin-right: 0.5em;
+        }
+
+        .right-align {
+            text-align: right;
+            justify-content: flex-end;
+        }
+
+
+        .warning-background { background:#feec89; }
+
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { actionType: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], dirty: [{
+                type: Input
+            }], showSpinner: [{
+                type: Input
+            }], disableSave: [{
+                type: Input
+            }], saveClicked: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright (c) 2016 Huntsman Cancer Institute at the University of Utah, Confidential and Proprietary
+ */
+// import {RouterModule} from "@angular/router";
+// import {MatButtonToggleModule} from "@angular/material/button-toggle";
+// import {MatInputModule} from "@angular/material/input";
+// import {MatIconModule} from "@angular/material/icon";
+// import {TreeModule} from "@circlon/angular-tree-component";
+// import {MatDatepickerModule} from "@angular/material/datepicker";
+// import {MatSelectModule} from "@angular/material/select";
+// import {NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
+// import {MiscModule} from "@huntsman-cancer-institute/misc";
+// import { MatNativeDateModule } from "@angular/material/core";
+// import { MatCheckboxModule } from '@angular/material/checkbox';
+/**
+ * The main @huntsman-cancer-institute/dialog module.  The module exports all components that an implementation might use
+ * and the forRoot() provides a global service for an implementing application.
+ *
+ * @since 1.0.0
+ */
+class DialogModule {
+    static forRoot() {
+        return {
+            providers: [
+                DialogService
+            ],
+            ngModule: DialogModule
+        };
+    }
+}
+DialogModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogModule, deps: [], target: ɵɵFactoryTarget.NgModule });
+DialogModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogModule, declarations: [AlertDialogComponent,
+        ConfirmDialogComponent,
+        CustomDialogComponent,
+        GenericContainerDialogComponent,
+        SaveFooterComponent,
+        SpinnerDialogComponent], imports: [CommonModule,
+        FormsModule,
+        DynamicModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatProgressSpinnerModule
+        // RouterModule,
+        // MiscModule,
+        // NgbModule,
+        // MatButtonToggleModule,
+        // MatInputModule,
+        // MatIconModule,
+        // MatDatepickerModule,
+        // MatNativeDateModule,
+        // MatCheckboxModule,
+        // MatRadioModule,
+        // MatSelectModule,
+        // TreeModule,
+        // NgbNavModule
+    ], exports: [AlertDialogComponent,
+        ConfirmDialogComponent,
+        CustomDialogComponent,
+        GenericContainerDialogComponent,
+        SaveFooterComponent,
+        SpinnerDialogComponent] });
+DialogModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogModule, providers: [
+    // MatDatepickerModule,
+    ], imports: [[
+            CommonModule,
+            FormsModule,
+            DynamicModule,
+            MatButtonModule,
+            MatDialogModule,
+            MatExpansionModule,
+            MatProgressSpinnerModule
+            // RouterModule,
+            // MiscModule,
+            // NgbModule,
+            // MatButtonToggleModule,
+            // MatInputModule,
+            // MatIconModule,
+            // MatDatepickerModule,
+            // MatNativeDateModule,
+            // MatCheckboxModule,
+            // MatRadioModule,
+            // MatSelectModule,
+            // TreeModule,
+            // NgbNavModule
+        ]] });
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        DynamicModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatExpansionModule,
+                        MatProgressSpinnerModule
+                        // RouterModule,
+                        // MiscModule,
+                        // NgbModule,
+                        // MatButtonToggleModule,
+                        // MatInputModule,
+                        // MatIconModule,
+                        // MatDatepickerModule,
+                        // MatNativeDateModule,
+                        // MatCheckboxModule,
+                        // MatRadioModule,
+                        // MatSelectModule,
+                        // TreeModule,
+                        // NgbNavModule
+                    ],
+                    providers: [
+                    // MatDatepickerModule,
+                    ],
+                    declarations: [
+                        AlertDialogComponent,
+                        ConfirmDialogComponent,
+                        CustomDialogComponent,
+                        GenericContainerDialogComponent,
+                        SaveFooterComponent,
+                        SpinnerDialogComponent
+                    ],
+                    entryComponents: [
+                        AlertDialogComponent,
+                        ConfirmDialogComponent,
+                        CustomDialogComponent,
+                        GenericContainerDialogComponent,
+                        SaveFooterComponent,
+                        SpinnerDialogComponent
+                    ],
+                    exports: [
+                        AlertDialogComponent,
+                        ConfirmDialogComponent,
+                        CustomDialogComponent,
+                        GenericContainerDialogComponent,
+                        SaveFooterComponent,
+                        SpinnerDialogComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionType, AlertDialogComponent, BaseGenericContainerDialog, ConfirmDialogComponent, ConfirmType, CustomDialogComponent, DialogModule, DialogService, DialogType, GenericContainerDialogComponent, SaveFooterComponent, SpinnerDialogComponent };
+//# sourceMappingURL=huntsman-cancer-institute-dialog.js.map