@huntsman-cancer-institute/dialog 12.11.9-SNAPSHOT

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

@@ -0,0 +1,1047 @@
+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 = {}));
+
+var AlertDialogComponent = /** @class */ (function () {
+    function AlertDialogComponent(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;
+        }
+    }
+    AlertDialogComponent.prototype.ngOnInit = function () {
+        if (this.dialogType) {
+            this.defaultTitle = this.dialogType;
+        }
+        for (var i = 0; i < this.message.length; i++) {
+            this.message[i] = this.message[i].replace(/\n/g, '<br>') + '<br>';
+        }
+    };
+    AlertDialogComponent.prototype.onClickOk = function () {
+        this.dialogRef.close(true);
+    };
+    AlertDialogComponent.prototype.onClickYes = function () {
+        this.dialogRef.close(true);
+    };
+    AlertDialogComponent.prototype.onClickNo = function () {
+        this.dialogRef.close();
+    };
+    AlertDialogComponent.prototype.onMouseDownHeader = function (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();
+    };
+    AlertDialogComponent.prototype.onMouseMove = function (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;
+            var newDialogPosition = {
+                left: '' + this.positionX + 'px',
+                top: '' + this.positionY + 'px',
+            };
+            this.dialogRef.updatePosition(newDialogPosition);
+        }
+    };
+    AlertDialogComponent.prototype.onMouseUp = function () {
+        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: "\n        <div class=\"full-height full-width d-flex flex-column\">\n            <div class=\"full-width dialog-header-colors no-margin no-padding\">\n                <div #topmostLeftmost mat-dialog-title (mousedown)=\"onMouseDownHeader($event)\"\n                     class=\"force-flex-container-row align-center full-width padding   {{ movingDialog ? 'grabbed' : 'grabbable' }}\">\n                    <div class=\"d-flex flex-row align-items-center padded\">\n                        <img *ngIf=\"icon\" class=\"icon\" [src]=\"this.icon\">\n                        <div *ngIf=\"!icon\">\n                            <i *ngIf=\"dialogType === type.ALERT\" class=\"fa fa-exclamation fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.SUCCESS\" class=\"fa fa-check-circle fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.FAILED || dialogType === type.ERROR\" class=\"fa fa-exclamation-triangle fa-2x i-margin i-color-red\"></i>\n                            <i *ngIf=\"dialogType === type.WARNING || dialogType === type.VALIDATION\" class=\"fa fa-exclamation-triangle fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.INFO\" class=\"fa fa-info-circle fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.CONFIRM\" class=\"fa fa-check fa-2x i-margin i-color-blue\"></i>\n                        </div>\n                        <h1 *ngIf=\"dialogType !== type.ERROR\"\n                            style=\"margin:0;\">{{this.title ? this.title : defaultTitle}}</h1>\n                        <h1 *ngIf=\"dialogType === type.ERROR\"\n                            style=\"margin:0; color: Red\">{{this.title ? this.title : defaultTitle}}</h1>\n                    </div>\n                </div>\n            </div>\n            <mat-dialog-content class=\"flex-grow-1 no-margin no-padding\">\n                <hr>\n                <div class=\"flex-grow-1 full-width extra-padded message\">\n                    <div *ngFor=\"let line of message\" class=\"full-width\"\n                        [innerHTML]=\"line\" style=\"white-space: pre-line\">\n                    </div>\n                </div>\n                <br>\n            </mat-dialog-content>\n            <mat-dialog-actions class=\"d-flex justify-content-center no-margin no-padding\">\n                <save-footer *ngIf=\"dialogType !== type.CONFIRM\" class=\"centered-text large-size\"\n                             (saveClicked)=\"onClickOk()\" name=\"Ok\"></save-footer>\n                <save-footer *ngIf=\"dialogType === type.CONFIRM\" class=\"centered-text large-size\"\n                             (saveClicked)=\"onClickYes()\" name=\"Yes\"></save-footer>\n                <save-footer *ngIf=\"dialogType === type.CONFIRM\" [actionType]=\"actionType\"\n                             class=\"centered-text large-size\" (saveClicked)=\"onClickNo()\"\n                             name=\"No\"></save-footer>\n            </mat-dialog-actions>\n        </div>\n    ", 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]" }] });
+    return AlertDialogComponent;
+}());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AlertDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-alert-dialog',
+                    template: "\n        <div class=\"full-height full-width d-flex flex-column\">\n            <div class=\"full-width dialog-header-colors no-margin no-padding\">\n                <div #topmostLeftmost mat-dialog-title (mousedown)=\"onMouseDownHeader($event)\"\n                     class=\"force-flex-container-row align-center full-width padding   {{ movingDialog ? 'grabbed' : 'grabbable' }}\">\n                    <div class=\"d-flex flex-row align-items-center padded\">\n                        <img *ngIf=\"icon\" class=\"icon\" [src]=\"this.icon\">\n                        <div *ngIf=\"!icon\">\n                            <i *ngIf=\"dialogType === type.ALERT\" class=\"fa fa-exclamation fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.SUCCESS\" class=\"fa fa-check-circle fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.FAILED || dialogType === type.ERROR\" class=\"fa fa-exclamation-triangle fa-2x i-margin i-color-red\"></i>\n                            <i *ngIf=\"dialogType === type.WARNING || dialogType === type.VALIDATION\" class=\"fa fa-exclamation-triangle fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.INFO\" class=\"fa fa-info-circle fa-2x i-margin i-color-blue\"></i>\n                            <i *ngIf=\"dialogType === type.CONFIRM\" class=\"fa fa-check fa-2x i-margin i-color-blue\"></i>\n                        </div>\n                        <h1 *ngIf=\"dialogType !== type.ERROR\"\n                            style=\"margin:0;\">{{this.title ? this.title : defaultTitle}}</h1>\n                        <h1 *ngIf=\"dialogType === type.ERROR\"\n                            style=\"margin:0; color: Red\">{{this.title ? this.title : defaultTitle}}</h1>\n                    </div>\n                </div>\n            </div>\n            <mat-dialog-content class=\"flex-grow-1 no-margin no-padding\">\n                <hr>\n                <div class=\"flex-grow-1 full-width extra-padded message\">\n                    <div *ngFor=\"let line of message\" class=\"full-width\"\n                        [innerHTML]=\"line\" style=\"white-space: pre-line\">\n                    </div>\n                </div>\n                <br>\n            </mat-dialog-content>\n            <mat-dialog-actions class=\"d-flex justify-content-center no-margin no-padding\">\n                <save-footer *ngIf=\"dialogType !== type.CONFIRM\" class=\"centered-text large-size\"\n                             (saveClicked)=\"onClickOk()\" name=\"Ok\"></save-footer>\n                <save-footer *ngIf=\"dialogType === type.CONFIRM\" class=\"centered-text large-size\"\n                             (saveClicked)=\"onClickYes()\" name=\"Yes\"></save-footer>\n                <save-footer *ngIf=\"dialogType === type.CONFIRM\" [actionType]=\"actionType\"\n                             class=\"centered-text large-size\" (saveClicked)=\"onClickNo()\"\n                             name=\"No\"></save-footer>\n            </mat-dialog-actions>\n        </div>\n    ",
+                    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    "]
+                }]
+        }], 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']]
+            }] } });
+
+var SpinnerDialogComponent = /** @class */ (function () {
+    function SpinnerDialogComponent(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]" }] });
+    return SpinnerDialogComponent;
+}());
+ɵɵ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: ["\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    "]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { strokeWidth: [{
+                type: Input
+            }], diameter: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+var CustomDialogComponent = /** @class */ (function () {
+    function CustomDialogComponent(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;
+        var actionConfig = data.actionConfig ? data.actionConfig : null;
+        this.actions = actionConfig ? actionConfig.actions : [];
+        this.form = actionConfig && actionConfig.formSource ? actionConfig.formSource : null;
+    }
+    Object.defineProperty(CustomDialogComponent.prototype, "primaryDisable", {
+        get: function () {
+            return this.form && this.form.invalid;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CustomDialogComponent.prototype, "secondaryDisable", {
+        // todo need make this customizable
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CustomDialogComponent.prototype.ngOnInit = function () {
+        this.context.dialog = this.dialogRef;
+        this.vcr.createEmbeddedView(this.tempRef, this.context);
+    };
+    CustomDialogComponent.prototype.onClose = function () {
+        this.dialogRef.close();
+    };
+    CustomDialogComponent.prototype.onMouseDownHeader = function (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();
+    };
+    CustomDialogComponent.prototype.onMouseMove = function (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;
+            var newDialogPosition = {
+                left: '' + this.positionX + 'px',
+                top: '' + this.positionY + 'px',
+            };
+            this.dialogRef.updatePosition(newDialogPosition);
+        }
+    };
+    CustomDialogComponent.prototype.onMouseUp = function () {
+        this.movingDialog = false;
+        this.changeDetector.reattach();
+    };
+    CustomDialogComponent.prototype.executeAction = function (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: "\n        <div class=\"d-flex full-height full-width flex-column\">\n            <div *ngIf=\"this.title\" class=\"full-width generic-dialog-header-colors no-margin no-padding\">\n                <div #topmostLeftmost mat-dialog-title (mousedown)=\"onMouseDownHeader($event)\"\n                     class=\"force-flex-container-row align-items-center full-width p-2   {{ movingDialog ? 'grabbed' : 'grabbable' }}\">\n                    <div class=\"-flex flex-row align-items-center padded\">\n                        <img  *ngIf=\"icon\" class=\"icon\" [src]=\"this.icon\">\n                        <div *ngIf=\"icon && icon.substr(0, 2) === '<i'\" class=\"i-class\" [innerHTML]=\"icon\" ></div>\n                        <h3 style=\"margin:0;\">{{this.title}}</h3>\n                    </div>\n                    <div class=\"flex-grow-1\"></div>\n                    <div class=\"padded\" (click)=\"onClose()\">\n                        <i class=\"exit fas fa-times\"></i>\n                    </div>\n                </div>\n            </div>\n            <mat-dialog-content class=\"flex-grow-1 full-width no-margin p-2\" style=\"min-height: 6em;\">\n                <div #anchor></div>\n            </mat-dialog-content>\n            <mat-dialog-actions *ngIf=\"actions && actions.length > 0\"\n                                class=\"d-flex flex-row justify-content-end no-margin no-padding generic-dialog-footer-colors\">\n                <div *ngFor=\"let action of actions\">\n                    <save-footer *ngIf=\"action.type === actionType.PRIMARY;else secondary\"\n                                 [actionType]=\"action.type\"\n                                 [icon]=\"action.icon\"\n                                 [disableSave]=\"primaryDisable\"\n                                 (saveClicked)=\"executeAction(action)\"\n                                 [name]=\"action.name\">\n                    </save-footer>\n                    <!-- to avoid issue with multiple spinner or dirty notes-->\n                    <ng-template #secondary>\n                        <save-footer [actionType]=\"action.type\"\n                                     (saveClicked)=\"executeAction(action)\"\n                                     [icon]=\"action.icon\"\n                                     [disableSave]=\"secondaryDisable\"\n                                     [name]=\"action.name\">\n                        </save-footer>\n                    </ng-template>\n                </div>\n            </mat-dialog-actions>\n        </div>\n    ", 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"] }] });
+    return CustomDialogComponent;
+}());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-custom-dialog',
+                    template: "\n        <div class=\"d-flex full-height full-width flex-column\">\n            <div *ngIf=\"this.title\" class=\"full-width generic-dialog-header-colors no-margin no-padding\">\n                <div #topmostLeftmost mat-dialog-title (mousedown)=\"onMouseDownHeader($event)\"\n                     class=\"force-flex-container-row align-items-center full-width p-2   {{ movingDialog ? 'grabbed' : 'grabbable' }}\">\n                    <div class=\"-flex flex-row align-items-center padded\">\n                        <img  *ngIf=\"icon\" class=\"icon\" [src]=\"this.icon\">\n                        <div *ngIf=\"icon && icon.substr(0, 2) === '<i'\" class=\"i-class\" [innerHTML]=\"icon\" ></div>\n                        <h3 style=\"margin:0;\">{{this.title}}</h3>\n                    </div>\n                    <div class=\"flex-grow-1\"></div>\n                    <div class=\"padded\" (click)=\"onClose()\">\n                        <i class=\"exit fas fa-times\"></i>\n                    </div>\n                </div>\n            </div>\n            <mat-dialog-content class=\"flex-grow-1 full-width no-margin p-2\" style=\"min-height: 6em;\">\n                <div #anchor></div>\n            </mat-dialog-content>\n            <mat-dialog-actions *ngIf=\"actions && actions.length > 0\"\n                                class=\"d-flex flex-row justify-content-end no-margin no-padding generic-dialog-footer-colors\">\n                <div *ngFor=\"let action of actions\">\n                    <save-footer *ngIf=\"action.type === actionType.PRIMARY;else secondary\"\n                                 [actionType]=\"action.type\"\n                                 [icon]=\"action.icon\"\n                                 [disableSave]=\"primaryDisable\"\n                                 (saveClicked)=\"executeAction(action)\"\n                                 [name]=\"action.name\">\n                    </save-footer>\n                    <!-- to avoid issue with multiple spinner or dirty notes-->\n                    <ng-template #secondary>\n                        <save-footer [actionType]=\"action.type\"\n                                     (saveClicked)=\"executeAction(action)\"\n                                     [icon]=\"action.icon\"\n                                     [disableSave]=\"secondaryDisable\"\n                                     [name]=\"action.name\">\n                        </save-footer>\n                    </ng-template>\n                </div>\n            </mat-dialog-actions>\n        </div>\n    ",
+                    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    "]
+                }]
+        }], 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']]
+            }] } });
+
+var GenericContainerDialogComponent = /** @class */ (function () {
+    function GenericContainerDialogComponent(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 : [];
+        }
+    }
+    GenericContainerDialogComponent.prototype.ngOnInit = function () {
+    };
+    GenericContainerDialogComponent.prototype.createdComponent = function (event) {
+        this.dialogContent = event.instance;
+    };
+    GenericContainerDialogComponent.prototype.executeAction = function (action) {
+        if (action.externalAction) {
+            action.externalAction();
+        }
+        if (action.internalAction) {
+            var 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]();
+                }
+            }
+        }
+    };
+    GenericContainerDialogComponent.prototype.onMouseDownHeader = function (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();
+    };
+    GenericContainerDialogComponent.prototype.onMouseMove = function (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;
+            var newDialogPosition = {
+                left: '' + this.positionX + 'px',
+                top: '' + this.positionY + 'px',
+            };
+            this.dialogRef.updatePosition(newDialogPosition);
+        }
+    };
+    GenericContainerDialogComponent.prototype.onMouseUp = function () {
+        this.movingDialog = false;
+        this.changeDetector.reattach();
+    };
+    GenericContainerDialogComponent.prototype.onClose = function () {
+        this.dialogRef.close();
+    };
+    GenericContainerDialogComponent.prototype.ngOnDestroy = function () {
+    };
+    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"] }] });
+    return GenericContainerDialogComponent;
+}());
+ɵɵ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: ["\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    "]
+                }]
+        }], 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 = {}));
+
+var BaseGenericContainerDialog = /** @class */ (function () {
+    function BaseGenericContainerDialog() {
+        this.showSpinner = false;
+        this.innerTitle = '';
+        this.primaryDisable = function (action) {
+            return false;
+        };
+        this.secondaryDisable = function (action) {
+            return false;
+        };
+        this.dirty = function () { 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 });
+    return BaseGenericContainerDialog;
+}());
+ɵɵ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
+            }] } });
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var ConfirmDialogComponent = /** @class */ (function (_super) {
+    __extends(ConfirmDialogComponent, _super);
+    function ConfirmDialogComponent(dialogRef, data) {
+        var _this = _super.call(this) || this;
+        _this.dialogRef = dialogRef;
+        _this.data = data;
+        _this.ConfirmType = ConfirmType; // make enum available in template
+        _this.prompt = '';
+        _this.message1 = '';
+        _this.message2 = '';
+        _this.confirmType = ConfirmType.GENERIC;
+        var 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();
+        return _this;
+    }
+    ConfirmDialogComponent.prototype.setupMessagesByType = function () {
+        // 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');
+        }
+    };
+    ConfirmDialogComponent.prototype.onConfirmClick = function (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: "\n    <div class=\"ri-confirm-body\">\n\n      <div *ngIf=\"confirmType !== ConfirmType.ALERT; else alertBlock\">\n        {{prompt}}\n        <div class=\"ri-confirm-text-delete\">{{ message1 }}</div>\n        {{message2}}\n      </div>\n\n\n      <div #alertBlock>\n        <p>We are working to correct it. Contact CODE support if the error persists.</p>\n        <mat-expansion-panel>\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <strong>Show details</strong>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div>{{ message1 }}</div>\n        </mat-expansion-panel>\n      </div>\n\n    </div>\n  ", 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" }] });
+    return ConfirmDialogComponent;
+}(BaseGenericContainerDialog));
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-confirm-dialog',
+                    template: "\n    <div class=\"ri-confirm-body\">\n\n      <div *ngIf=\"confirmType !== ConfirmType.ALERT; else alertBlock\">\n        {{prompt}}\n        <div class=\"ri-confirm-text-delete\">{{ message1 }}</div>\n        {{message2}}\n      </div>\n\n\n      <div #alertBlock>\n        <p>We are working to correct it. Contact CODE support if the error persists.</p>\n        <mat-expansion-panel>\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <strong>Show details</strong>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div>{{ message1 }}</div>\n        </mat-expansion-panel>\n      </div>\n\n    </div>\n  ",
+                    styles: ["\n\n  "]
+                }]
+        }], ctorParameters: function () { return [{ type: MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var DialogService = /** @class */ (function () {
+    function DialogService(dialog) {
+        this.dialog = dialog;
+        this._spinnerDialogIsOpen = false;
+        this.spinnerWorkItemCount = 0;
+        this.checkingSpinnerWorkItems = false;
+        this.spinnerDialogRefs = [];
+    }
+    Object.defineProperty(DialogService.prototype, "spinnerDialogIsOpen", {
+        get: function () {
+            return this._spinnerDialogIsOpen;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DialogService.prototype.alert = function (message, title, dialogType, icon, config) {
+        return this.openDialog(message, title, dialogType ? dialogType : DialogType.ALERT, icon, config);
+    };
+    DialogService.prototype.confirm = function (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
+     */
+    DialogService.prototype.confirmByType = function (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: confirmType
+            };
+        }
+        // if no actions passed in, set up the defaults
+        if (!actionConfig) {
+            // default actions
+            var primary = { type: ActionType.PRIMARY, name: 'YES',
+                internalAction: 'onConfirmClick', internalActionReturnValue: true };
+            var 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');
+            }
+            var actions = [];
+            if (primary) {
+                actions.push(primary);
+            }
+            if (secondary) {
+                actions.push(secondary);
+            }
+            actionConfig = {
+                actions: actions
+            };
+        }
+        return this.genericDialogContainer(ConfirmDialogComponent, title, icon, config, actionConfig);
+    };
+    DialogService.prototype.error = function (message, title, icon, config) {
+        return this.openDialog(message, title, DialogType.ERROR, icon, config);
+    };
+    DialogService.prototype.info = function (message, title, icon, config) {
+        return this.openDialog(message, title, DialogType.INFO, icon, config);
+    };
+    DialogService.prototype.createCustomDialog = function (tempRef, context, title, icon, config, actionConfig) {
+        var 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;
+        var dialogRef = this.dialog.open(CustomDialogComponent, configuration);
+        return dialogRef;
+    };
+    DialogService.prototype.startDefaultSpinnerDialog = function () {
+        return this.startSpinnerDialog('Please wait...', 3, 30);
+    };
+    DialogService.prototype.startSpinnerDialog = function (message, strokeWidth, diameter) {
+        var _this = this;
+        if (this._spinnerDialogIsOpen) {
+            return null;
+        }
+        this._spinnerDialogIsOpen = true;
+        var configuration = new MatDialogConfig();
+        configuration.data = {
+            message: message,
+            strokeWidth: strokeWidth,
+            diameter: diameter
+        };
+        configuration.width = '13em';
+        configuration.disableClose = true;
+        var dialogRef = this.dialog.open(SpinnerDialogComponent, configuration);
+        dialogRef.afterClosed().subscribe(function () {
+            _this._spinnerDialogIsOpen = false;
+        });
+        this.spinnerDialogRefs.push(dialogRef);
+        return dialogRef;
+    };
+    DialogService.prototype.startNonModalSpinnerDialog = function (message, strokeWidth, diameter) {
+        var _this = this;
+        if (this._spinnerDialogIsOpen) {
+            return null;
+        }
+        this._spinnerDialogIsOpen = true;
+        var configuration = new MatDialogConfig();
+        configuration.data = {
+            message: message,
+            strokeWidth: strokeWidth,
+            diameter: diameter
+        };
+        configuration.width = '13em';
+        configuration.disableClose = true;
+        configuration.hasBackdrop = false;
+        var dialogRef = this.dialog.open(SpinnerDialogComponent, configuration);
+        dialogRef.afterClosed().subscribe(function () {
+            _this._spinnerDialogIsOpen = false;
+        });
+        this.spinnerDialogRefs.push(dialogRef);
+        return dialogRef;
+    };
+    // Let there be an alternative, global way to stop all active spinner dialogs.
+    DialogService.prototype.stopAllSpinnerDialogs = function () {
+        var e_1, _a;
+        this.spinnerWorkItemCount = 0;
+        var _loop_1 = function (dialogRef) {
+            setTimeout(function () {
+                dialogRef.close();
+            });
+        };
+        try {
+            for (var _b = __values(this.spinnerDialogRefs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var dialogRef = _c.value;
+                _loop_1(dialogRef);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        this.spinnerDialogRefs = [];
+    };
+    DialogService.prototype.addSpinnerWorkItem = function () {
+        var _this = this;
+        this.spinnerWorkItemCount++;
+        if (!this.checkingSpinnerWorkItems) {
+            this.checkingSpinnerWorkItems = true;
+            setTimeout(function () {
+                _this.checkSpinnerWorkItems();
+            });
+        }
+    };
+    DialogService.prototype.removeSpinnerWorkItem = function () {
+        var _this = this;
+        this.spinnerWorkItemCount--;
+        if (this.spinnerWorkItemCount < 0) {
+            this.spinnerWorkItemCount = 0;
+        }
+        if (!this.checkingSpinnerWorkItems) {
+            this.checkingSpinnerWorkItems = true;
+            setTimeout(function () {
+                _this.checkSpinnerWorkItems();
+            });
+        }
+    };
+    DialogService.prototype.checkSpinnerWorkItems = function () {
+        this.checkingSpinnerWorkItems = false;
+        if (this.spinnerWorkItemCount) {
+            if (!this._spinnerDialogIsOpen) {
+                this.startDefaultSpinnerDialog();
+            }
+        }
+        else if (this._spinnerDialogIsOpen) {
+            this.stopAllSpinnerDialogs();
+        }
+    };
+    DialogService.prototype.genericDialogContainer = function (dialogContent, title, icon, config, actionConfig) {
+        var 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;
+        var dialogRef = this.dialog.open(GenericContainerDialogComponent, configuration);
+        return dialogRef.afterClosed();
+    };
+    DialogService.prototype.openDialog = function (message, title, type, icon, config) {
+        var 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;
+        var 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 });
+    return DialogService;
+}());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MatDialog }]; } });
+
+var SaveFooterComponent = /** @class */ (function () {
+    function SaveFooterComponent(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;
+    }
+    Object.defineProperty(SaveFooterComponent.prototype, "dirty", {
+        get: function () {
+            return this._dirty;
+        },
+        set: function (data) {
+            if (data) {
+                this._dirty = data;
+            }
+            else {
+                this._dirty = false;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SaveFooterComponent.prototype, "showSpinner", {
+        set: function (showSpinner) {
+            var _this = this;
+            setTimeout(function () {
+                if (showSpinner) {
+                    _this.dialogService.startDefaultSpinnerDialog();
+                }
+                else {
+                    _this.dialogService.stopAllSpinnerDialogs();
+                }
+            });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SaveFooterComponent.prototype.ngOnInit = function () {
+        // console.log(this.disableSave);
+    };
+    SaveFooterComponent.prototype.notifySave = function () {
+        this.saveClicked.emit();
+    };
+    SaveFooterComponent.prototype.ngOnDestroy = function () {
+        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: "\n        <div class=\"full-height full-width\" style=\"margin-bottom: 8px;\">\n            <div class=\"d-flex flex-row align-items-center right-align padded\">\n                <div *ngIf=\"dirty\" class=\"warning-background padded\">\n                    {{ message }}\n                </div>\n                <div class=\"major-left-right-margin\">\n                    <button mat-raised-button [disabled]=\"disableSave\"\n                            [color]=\"actionType\" (click)=\"notifySave()\"\n                            [ngClass]=\"{'primary-action': actionType === type.PRIMARY,\n                                        'secondary-action': actionType === type.SECONDARY && !disableSave }\">\n                        <img *ngIf=\"icon\" [src]=\"icon\" alt=\"\">\n                        {{ name }}\n                    </button>\n                </div>\n            </div>\n        </div>\n    ", 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"] }] });
+    return SaveFooterComponent;
+}());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hci-save-footer',
+                    template: "\n        <div class=\"full-height full-width\" style=\"margin-bottom: 8px;\">\n            <div class=\"d-flex flex-row align-items-center right-align padded\">\n                <div *ngIf=\"dirty\" class=\"warning-background padded\">\n                    {{ message }}\n                </div>\n                <div class=\"major-left-right-margin\">\n                    <button mat-raised-button [disabled]=\"disableSave\"\n                            [color]=\"actionType\" (click)=\"notifySave()\"\n                            [ngClass]=\"{'primary-action': actionType === type.PRIMARY,\n                                        'secondary-action': actionType === type.SECONDARY && !disableSave }\">\n                        <img *ngIf=\"icon\" [src]=\"icon\" alt=\"\">\n                        {{ name }}\n                    </button>\n                </div>\n            </div>\n        </div>\n    ",
+                    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    "]
+                }]
+        }], 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
+ */
+var DialogModule = /** @class */ (function () {
+    function DialogModule() {
+    }
+    DialogModule.forRoot = function () {
+        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
+            ]] });
+    return DialogModule;
+}());
+ɵɵ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