@lowcodeunit/applications-flow-common 1.33.292-lets-get-social-ish → 1.33.293-lets-get-social-ish

package/fesm2020/lowcodeunit-applications-flow-common.mjs

@@ -41,11 +41,11 @@ import * as i4$3 from 'skeleton-elements/angular';
 import { SkeletonElementsModule } from 'skeleton-elements/angular';
 import * as i2$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import moment from 'moment';
+import { EaCApplicationAsCode } from '@semanticjs/common';
 import * as i3$1 from '@angular/material/snack-bar';
+import * as i7$1 from '@angular/material/menu';
+import moment from 'moment';
 import * as i3$2 from '@angular/platform-browser';
-import { EaCApplicationAsCode } from '@semanticjs/common';
-import * as i4$4 from '@angular/material/menu';
 import * as i8$2 from '@angular/router';
 
 /**
@@ -3757,1150 +3757,1439 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 args: ['feed-item']
             }] } });
 
-class GhControlComponent {
-    constructor() {
-        this.InputLabel = "Create Pull Request";
-        this.selectedBtn = "pr-btn";
+class EditApplicationFormComponent {
+    constructor(formBldr, eacSvc) {
+        this.formBldr = formBldr;
+        this.eacSvc = eacSvc;
+        this.SaveFormEvent = new EventEmitter;
+        this.HasSaveButton = true;
     }
-    ngOnInit() {
+    get DescriptionFormControl() {
+        return this.ApplicationFormGroup?.controls.description;
     }
-    ngAfterViewInit() {
-        this.addSelectBtn();
+    get NameFormControl() {
+        return this.ApplicationFormGroup?.controls.name;
     }
-    CreateFeatureBranch() {
-        this.removeSelectedBtn();
-        this.InputLabel = "Create Feature Branch";
-        this.selectedBtn = "fb-btn";
-        this.addSelectBtn();
-        console.log("create feature branch selected");
+    get RouteFormControl() {
+        return this.ApplicationFormGroup?.controls.route;
     }
-    OpenIssue() {
-        this.removeSelectedBtn();
-        this.InputLabel = "Open Issue";
-        this.selectedBtn = "oi-btn";
-        this.addSelectBtn();
-        console.log("open issue selected");
+    get State() {
+        return this.eacSvc.State;
     }
-    CreatePullRequest() {
-        this.removeSelectedBtn();
-        this.InputLabel = "Create Pull Request";
-        this.selectedBtn = "pr-btn";
-        this.addSelectBtn();
-        console.log("create pull request selected");
+    ngOnInit() {
+        this.setupApplicationForm();
     }
-    OpenMoreInfo() {
-        console.log("more info selected");
+    SubmitApplicationControl() {
+        console.log("application form: ", this.ApplicationFormGroup.value);
+        this.SaveApplication();
     }
-    Submit() {
-        console.log("submitting: ", this.value);
-        switch (this.selectedBtn) {
-            case "pr-btn":
-                //Pull request
-                console.log("creating pull request: ", this.value);
-                break;
-            case "oi-btn":
-                //Open Issue
-                console.log("Open issue: ", this.value);
-                break;
-            case "fb-btn":
-                //Feature Branch
-                console.log("creating feature branch: ", this.value);
-                break;
-            default:
-                console.log("hmm");
+    SaveApplication() {
+        const app = this.EditingApplication;
+        // console.log("APP=", app);
+        app.Application = {
+            Name: this.NameFormControl.value,
+            Description: this.DescriptionFormControl.value,
+            PriorityShift: this.EditingApplication?.Application?.PriorityShift || 0,
+        };
+        app.LookupConfig.PathRegex = `${this.RouteFormControl.value}.*`;
+        switch (app.Processor.Type) {
+            case 'DFS':
+                app.Processor.BaseHref = `${this.RouteFormControl.value}/`.replace('//', '/');
                 break;
         }
+        if (!app.LookupConfig.PathRegex.startsWith('/')) {
+            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
+        }
+        const saveAppReq = {
+            ProjectLookup: this.ProjectLookup,
+            Application: app,
+            ApplicationLookup: this.ApplicationLookup,
+        };
+        console.log("processor details being submitted: ", app.Processor);
+        this.eacSvc.SaveApplicationAsCode(saveAppReq).then(res => {
+            this.SaveFormEvent.emit(res);
+        });
     }
     //HELPERS
-    addSelectBtn() {
-        document.getElementById(this.selectedBtn).classList.add('selected');
-    }
-    removeSelectedBtn() {
-        document.getElementById(this.selectedBtn).classList.remove('selected');
+    setupApplicationForm() {
+        if (this.EditingApplication != null) {
+            this.ApplicationFormGroup = this.formBldr.group({
+                name: [this.EditingApplication.Application?.Name, Validators.required],
+                description: [
+                    this.EditingApplication.Application?.Description,
+                    Validators.required,
+                ],
+                route: [this.CurrentRoute ? this.CurrentRoute :
+                        this.EditingApplication.LookupConfig?.PathRegex.replace('.*', '') ||
+                            '/',
+                    Validators.required,
+                ],
+                // priority: [
+                //   this.EditingApplication.Application?.Priority || 10000,
+                //   Validators.required,
+                // ],
+            });
+        }
     }
 }
-GhControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GhControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GhControlComponent, selector: "lcu-gh-control", ngImport: i0, template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.MatLabel, selector: "mat-label" }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, decorators: [{
+EditApplicationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EditApplicationFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
+EditApplicationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EditApplicationFormComponent, selector: "lcu-edit-application-form", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], CurrentRoute: ["current-route", "CurrentRoute"], EditingApplication: ["editing-application", "EditingApplication"], HasSaveButton: ["has-save-button", "HasSaveButton"], ProjectLookup: ["project-lookup", "ProjectLookup"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"ApplicationFormGroup\" (ngSubmit)=\"SubmitApplicationControl()\" >\n    <!-- <mat-card class=\"spread flow-card\"> -->\n      <!-- <mat-card-header>\n        <mat-card-title>\n          <ng-container *ngIf=\"EditingApplication?.Application\">\n            Edit Application:\n            {{ EditingApplication.Application?.Name }}\n          </ng-container>\n\n          <ng-container *ngIf=\"!EditingApplication?.Application\">\n            Create an Application\n          </ng-container>\n        </mat-card-title>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n        <ng-container *ngIf=\"State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!State?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Name\"\n              formControlName=\"name\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <textarea\n              matInput\n              placeholder=\"Description\"\n              formControlName=\"description\"\n              rows=\"3\"\n              required\n            ></textarea>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Route\"\n              formControlName=\"route\"\n              required\n            />\n          </mat-form-field>\n      </ng-container>\n\n      <!-- </mat-card-content> -->\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n        *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ApplicationFormGroup.valid || !ApplicationFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save\n        </button>\n        <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader>\n        \n    </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EditApplicationFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-gh-control', template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'lcu-edit-application-form', template: "<form class=\"form-card\" [formGroup]=\"ApplicationFormGroup\" (ngSubmit)=\"SubmitApplicationControl()\" >\n    <!-- <mat-card class=\"spread flow-card\"> -->\n      <!-- <mat-card-header>\n        <mat-card-title>\n          <ng-container *ngIf=\"EditingApplication?.Application\">\n            Edit Application:\n            {{ EditingApplication.Application?.Name }}\n          </ng-container>\n\n          <ng-container *ngIf=\"!EditingApplication?.Application\">\n            Create an Application\n          </ng-container>\n        </mat-card-title>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n        <ng-container *ngIf=\"State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!State?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Name\"\n              formControlName=\"name\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <textarea\n              matInput\n              placeholder=\"Description\"\n              formControlName=\"description\"\n              rows=\"3\"\n              required\n            ></textarea>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Route\"\n              formControlName=\"route\"\n              required\n            />\n          </mat-form-field>\n      </ng-container>\n\n      <!-- </mat-card-content> -->\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n        *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ApplicationFormGroup.valid || !ApplicationFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save\n        </button>\n        <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader>\n        \n    </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: EaCService }]; }, propDecorators: { ApplicationLookup: [{
+                type: Input,
+                args: ['application-lookup']
+            }], CurrentRoute: [{
+                type: Input,
+                args: ['current-route']
+            }], EditingApplication: [{
+                type: Input,
+                args: ['editing-application']
+            }], HasSaveButton: [{
+                type: Input,
+                args: ['has-save-button']
+            }], ProjectLookup: [{
+                type: Input,
+                args: ['project-lookup']
+            }], SaveFormEvent: [{
+                type: Output,
+                args: ['save-form-event']
+            }] } });
 
-class DevopsSourceControlFormComponent {
-    //  Constructors
-    constructor(appsFlowSvc, eacSvc, formBuilder) {
+class ProcessorDetailsFormComponent {
+    constructor(appsFlowSvc, formBldr, eacSvc) {
         this.appsFlowSvc = appsFlowSvc;
+        this.formBldr = formBldr;
         this.eacSvc = eacSvc;
-        this.formBuilder = formBuilder;
-        this.SeparatorKeysCodes = [ENTER, COMMA];
-        this.SaveStatusEvent = new EventEmitter();
-        this.BuildPath = null;
-        this.HostingDetails = new ProjectHostingDetails();
-        this.SelectedBranches = [];
-        this.SourceControlRoot = '';
-        this.SkeletonEffect = "wave";
-        this.UseBranches = true;
-        this.UseBuildPath = false;
-    }
-    //  Properties
-    get ArtifactLookups() {
-        return this.DevOpsAction?.ArtifactLookups;
+        this.redirectTooltip = '';
+        this.HasSaveButton = true;
+        this.SaveFormEvent = new EventEmitter();
     }
-    get ArtifactLookup() {
-        const artLookup = this.DevOpsAction?.ArtifactLookups
-            ? this.DevOpsAction?.ArtifactLookups[0]
-            : null;
-        return artLookup;
+    get APIRootFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.apiRoot;
     }
-    get Artifact() {
-        return this.Environment?.Artifacts && this.ArtifactLookup
-            ? this.Environment?.Artifacts[this.ArtifactLookup] || {}
-            : {};
+    get Environment() {
+        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
     }
-    get BranchesFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
+    get BuildFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.build;
     }
     get BuildPathFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
+        return this.ProcessorDetailsFormGroup?.controls.buildPath;
     }
-    get DevOpsActionLookups() {
-        // console.log(this.DevOpsActions);
-        return Object.keys(this.DevOpsActions || {});
+    get ClientIDFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.clientId;
     }
-    get DevOpsAction() {
-        return this.Environment.DevOpsActions && this.DevOpsActionLookup
-            ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
-            : {};
+    get ClientSecretFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.clientSecret;
     }
-    get DevOpsActionLookup() {
-        if (!!this.DevOpsActionLookupFormControl?.value) {
-            return this.DevOpsActionLookupFormControl.value;
-        }
-        if (!!this.EditingSourceControl?.DevOpsActionTriggerLookups) {
-            return this.EditingSourceControl?.DevOpsActionTriggerLookups[0];
-        }
-        else {
-            return null;
-        }
+    get DefaultFileFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.defaultFile;
     }
-    get DevOpsActionLookupFormControl() {
-        return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
+    get DefaultSourceControl() {
+        return {
+            Organization: this.EditingApplication?.LowCodeUnit?.Organization,
+            Repository: this.EditingApplication?.LowCodeUnit?.Repository,
+        };
     }
-    get DevOpsActions() {
-        return this.Environment.DevOpsActions || {};
+    get InboundPathFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.inboundPath;
     }
-    get EditingSourceControl() {
-        let sc = this.Environment?.Sources
-            ? this.Environment?.Sources[this.EditingSourceControlLookup]
-            : null;
-        if (sc == null && this.EditingSourceControlLookup) {
-            sc = {};
-        }
-        return sc;
+    get IncludeRequestFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.includeRequest;
     }
-    get MainBranchFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
+    get MethodsFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.methods;
     }
-    get OrganizationFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
+    get PackageFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.package;
     }
-    get RepositoryFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
+    get PermanentFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.permanent;
+    }
+    get PreserveMethodFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.preserveMethod;
+    }
+    get RedirectFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.redirect;
+    }
+    get ScopesFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.scopes;
+    }
+    get SecurityFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.security;
     }
     get State() {
         return this.eacSvc.State;
     }
-    //  Life Cycle
-    ngAfterViewInit() { }
-    ngOnDestroy() {
-        this.destroyFormControls();
+    get SourceControls() {
+        return this.Environment?.Sources || {};
     }
-    ngOnInit() {
-        console.log("source control lookup", this.EditingSourceControlLookup);
-        if (this.EditingSourceControlLookup === null) {
-            this.CreateNewSourceControl();
-        }
-        console.log("source control", this.EditingSourceControl);
-        if (this.EditingSourceControl != null) {
-            this.DevOpsSourceControlFormGroup = this.formBuilder.group({});
-            this.setupFormControls();
-        }
-        this.RefreshOrganizations();
-    }
-    //  API Methods
-    AddBranchOption(event) {
-        this.addBranchOption(event.value);
-        event.input.value = '';
-    }
-    BranchOptionSelected(event) {
-        this.addBranchOption(event.option.value);
+    get SourceControlFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.sourceControl;
     }
-    BranchesChanged(branches) {
-        this.loadProjectHostingDetails();
+    get SPARootFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.spaRoot;
     }
-    BuildPathChanged(event) {
-        //do something??
+    get TokenLookupFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.tokenLookup;
     }
-    CreateNewSourceControl() {
-        this.SetEditingSourceControl(Guid.CreateRaw());
+    get ValidFormControls() {
+        let vfc = new Array();
+        for (const field in this.ProcessorDetailsFormGroup.controls) {
+            const control = this.ProcessorDetailsFormGroup.get(field);
+            if (control.valid) {
+                vfc.push(control);
+            }
+        }
+        // console.log("VFC=", vfc)
+        return vfc;
     }
-    CreateRepository() {
-        this.CreatingRepository = true;
-        this.RepositoryFormControl.reset();
+    get VersionFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.version;
     }
-    CancelCreateRepository() {
-        this.CreatingRepository = false;
+    get ZipFileFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.zipFile;
     }
-    DevOpsActionLookupChanged(event) {
-        this.configureDevOpsAction();
+    ngOnInit() {
+        if (!this.EditingApplication) {
+            this.CreateNewApplication();
+        }
+        else {
+            this.setupProcessorDetailsForm();
+        }
     }
-    MainBranchChanged(event) {
-        this.emitBranchesChanged();
+    CreateNewApplication() {
+        this.SetEditingApplication(Guid.CreateRaw());
     }
-    OrganizationChanged(event) {
-        const org = this.OrganizationFormControl;
-        this.RepositoryFormControl.reset();
-        if (this.UseBranches) {
-            this.BranchesFormControl.reset();
-            this.SelectedBranches = [];
+    DetermineTooltipText() {
+        let permanentValue = this.PermanentFormControl.value;
+        let preserveValue = this.PreserveMethodFormControl.value;
+        if (permanentValue === true && preserveValue === false) {
+            this.redirectTooltip = '301 – Permanent and Not Preserve';
         }
-        this.listRepositories();
-    }
-    RefreshOrganizations() {
-        // this.Loading = true;
-        this.listOrganizations();
-        this.OrganizationFormControl?.reset();
-        this.RepositoryFormControl?.reset();
-        if (this.UseBranches) {
-            this.BranchesFormControl?.reset();
+        else if (permanentValue === false && preserveValue === false) {
+            this.redirectTooltip = '302 – Not Permanent and Not Preserve';
         }
-    }
-    RemoveBranchOption(option) {
-        const index = this.SelectedBranches.indexOf(option);
-        if (index >= 0) {
-            this.SelectedBranches.splice(index, 1);
+        else if (permanentValue === false && preserveValue === true) {
+            this.redirectTooltip = '307 – Not Permanent and Preserve';
+        }
+        else if (permanentValue === true && preserveValue === true) {
+            this.redirectTooltip = '308 – Permanent and Preserve';
         }
-        this.emitBranchesChanged();
     }
-    RepositoryChanged(event) {
-        const repo = this.RepositoryFormControl;
-        if (this.UseBranches) {
-            this.BranchesFormControl.reset();
-            this.SelectedBranches = [];
-            this.listBranches();
+    SaveProcessorDetails() {
+        const app = this.EditingApplication;
+        app.LookupConfig.AllowedMethods = this.MethodsFormControl?.value
+            ?.split(' ')
+            .filter((v) => !!v);
+        app.Processor.Type = this.ProcessorType;
+        switch (app.Processor.Type) {
+            case 'DFS':
+                app.Processor.DefaultFile =
+                    this.DefaultFileFormControl.value || 'index.html';
+                app.LowCodeUnit = {
+                    Type: this.LCUType,
+                };
+                switch (app.LowCodeUnit.Type) {
+                    case 'GitHub':
+                        app.LowCodeUnit.Organization =
+                            this.SourceControls[this.SourceControlFormControl.value]?.Organization;
+                        app.LowCodeUnit.Repository =
+                            this.SourceControls[this.SourceControlFormControl.value]?.Repository;
+                        app.LowCodeUnit.Build = this.BuildFormControl.value;
+                        app.LowCodeUnit.Path = this.BuildPathFormControl.value;
+                        app.LowCodeUnit.SourceControlLookup =
+                            this.SourceControlFormControl.value;
+                        break;
+                    case 'NPM':
+                        app.LowCodeUnit.Package = this.PackageFormControl.value;
+                        app.LowCodeUnit.Version = this.VersionFormControl.value;
+                        break;
+                    case 'WordPress':
+                        app.LowCodeUnit.APIRoot = this.APIRootFormControl.value;
+                        break;
+                    case 'Zip':
+                        app.LowCodeUnit.ZipFile = this.ZipFileFormControl.value;
+                        break;
+                }
+                break;
+            case 'OAuth':
+                app.Processor.Scopes = this.ScopesFormControl.value.split(' ');
+                app.Processor.TokenLookup = this.TokenLookupFormControl.value;
+                app.LowCodeUnit = {
+                    Type: this.LCUType,
+                };
+                switch (app.LowCodeUnit.Type) {
+                    case 'GitHubOAuth':
+                        app.LowCodeUnit.ClientID = this.ClientIDFormControl.value;
+                        app.LowCodeUnit.ClientSecret = this.ClientSecretFormControl.value;
+                        break;
+                }
+                break;
+            case 'Proxy':
+                app.Processor.InboundPath = this.InboundPathFormControl.value;
+                app.LowCodeUnit = {
+                    Type: this.LCUType,
+                };
+                switch (app.LowCodeUnit.Type) {
+                    case 'API':
+                        app.LowCodeUnit.APIRoot = this.APIRootFormControl.value;
+                        app.LowCodeUnit.Security = this.SecurityFormControl.value;
+                        break;
+                    case 'SPA':
+                        app.LowCodeUnit.SPARoot = this.SPARootFormControl.value;
+                        break;
+                }
+                break;
+            case 'Redirect':
+                app.Processor.IncludeRequest = !!this.IncludeRequestFormControl.value;
+                app.Processor.Permanent = !!this.PermanentFormControl.value;
+                app.Processor.PreserveMethod = !!this.PreserveMethodFormControl.value;
+                app.Processor.Redirect = this.RedirectFormControl.value;
+                break;
         }
-        if (!this.UseBranches) {
-            this.listBuildPaths();
+        if (!app.LookupConfig.PathRegex.startsWith('/')) {
+            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
         }
-    }
-    SaveRepository() {
-        this.Loading = true;
-        const org = this.OrganizationFormControl.value;
-        const repoName = this.RepositoryFormControl.value;
-        this.appsFlowSvc
-            .CreateRepository(org, repoName)
-            .subscribe((response) => {
-            if (response.Status.Code === 0) {
-                this.listRepositories(repoName);
-                this.CreatingRepository = false;
-            }
-            else {
-                //  TODO:  Need to surface an error to the user...
-                this.Loading = false;
-            }
+        const saveAppReq = {
+            ProjectLookup: this.ProjectLookup,
+            Application: app,
+            ApplicationLookup: this.EditingApplicationLookup || Guid.CreateRaw(),
+        };
+        this.eacSvc.SaveApplicationAsCode(saveAppReq).then((res) => {
+            this.SaveFormEvent.emit(res);
         });
     }
-    SetEditingSourceControl(scLookup) {
-        this.EditingSourceControlLookup = scLookup;
-    }
-    SubmitSourceControl() {
-        console.log('source control submitted: ', this.DevOpsSourceControlFormGroup.value);
-        this.SaveSourceControl();
+    SetEditingApplication(appLookup) {
+        this.EditingApplication = new EaCApplicationAsCode();
+        this.EditingApplicationLookup = appLookup;
+        this.setupProcessorDetailsForm();
     }
-    SaveSourceControl() {
-        const saveEnvReq = {
-            Environment: {
-                ...this.Environment,
-                Sources: this.Environment.Sources || {},
-            },
-            EnvironmentLookup: this.EnvironmentLookup,
-            EnterpriseDataTokens: {},
-        };
-        let source = {
-            ...this.EditingSourceControl,
-            Branches: this.SelectedBranches,
-            MainBranch: this.MainBranchFormControl.value,
-        };
-        source = {
-            ...source,
-            Type: 'GitHub',
-            Name: `@${this.OrganizationFormControl.value}/${this.RepositoryFormControl.value}`,
-            DevOpsActionTriggerLookups: [this.DevOpsActionLookup],
-            Organization: this.OrganizationFormControl.value,
-            Repository: this.RepositoryFormControl.value,
-        };
-        const scLookup = `github://${source.Organization}/${source.Repository}`;
-        saveEnvReq.Environment.Sources[scLookup] = source;
-        console.log('save SC: ', saveEnvReq);
-        let resp = this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
-        resp.then((res) => {
-            this.SaveStatusEvent.emit(res);
-        });
+    SourceControlChanged(event) {
+        this.listBuildPaths();
     }
-    //  Helpers
-    addBranchOption(value) {
-        value = (value || '').trim();
-        if (value && this.SelectedBranches.indexOf(value) < 0) {
-            this.SelectedBranches.push(value);
-        }
-        this.BranchesInput.nativeElement.blur();
-        this.emitBranchesChanged();
+    ProcessorTypeChanged(event) {
+        this.ProcessorType = event.value;
+        this.setupProcessorTypeSubForm();
     }
-    configureDevOpsAction() {
-        setTimeout(() => {
-            this.DevOpsActionLookupFormControl.setValue(this.DevOpsActionLookup);
-        }, 0);
+    LCUTypeChanged(event) {
+        this.LCUType = event.value;
+        this.setupLcuTypeSubForm();
     }
-    destroyFormControls() {
-        this.DevOpsSourceControlFormGroup.removeControl([this.SourceControlRoot, 'mainBranch'].join(''));
-        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'branches'].join(''));
-        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'buildPath'].join(''));
-        this.SelectedBranches = [];
-        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'organization'].join(''));
-        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'repository'].join(''));
-    }
-    emitBranchesChanged() {
-        if (this.SelectedBranches?.length > 0 &&
-            (!this.MainBranchFormControl.value ||
-                this.SelectedBranches.indexOf(this.MainBranchFormControl.value) < 0)) {
-            this.MainBranchFormControl.setValue(this.SelectedBranches.find((branch) => branch === 'main' || branch === 'master') || this.SelectedBranches[0]);
-        }
-        else if (this.SelectedBranches?.length <= 0) {
-            this.MainBranchFormControl.reset();
-        }
-        this.BranchesFormControl.setValue(this.SelectedBranches.join(','));
-        this.BranchesChanged(this.SelectedBranches || []);
+    //HELPERS
+    cleanupLcuTypeSubForm() {
+        this.ProcessorDetailsFormGroup.removeControl('methods');
+        this.ProcessorDetailsFormGroup.removeControl('apiRoot');
+        this.ProcessorDetailsFormGroup.removeControl('security');
+        this.ProcessorDetailsFormGroup.removeControl('spaRoot');
+        this.ProcessorDetailsFormGroup.removeControl('applicationId');
+        this.ProcessorDetailsFormGroup.removeControl('sourceControl');
+        this.ProcessorDetailsFormGroup.removeControl('build');
+        this.ProcessorDetailsFormGroup.removeControl('clientId');
+        this.ProcessorDetailsFormGroup.removeControl('clientSecret');
+        this.ProcessorDetailsFormGroup.removeControl('package');
+        this.ProcessorDetailsFormGroup.removeControl('version');
+        this.ProcessorDetailsFormGroup.removeControl('zipFile');
     }
-    listBranches() {
-        if (this.UseBranches) {
-            this.Loading = true;
-            this.appsFlowSvc
-                .ListBranches(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
-                .subscribe((response) => {
-                this.BranchOptions = response.Model;
-                this.Loading = false;
-                if (this.EditingSourceControl?.Branches?.length > 0) {
-                    this.SelectedBranches = this.EditingSourceControl.Branches;
-                }
-                else if (this.BranchOptions?.length === 1) {
-                    this.BranchesFormControl.setValue(this.BranchOptions[0].Name);
-                    this.SelectedBranches = [this.BranchOptions[0].Name];
-                }
-                this.emitBranchesChanged();
-                this.listBuildPaths();
-            });
-        }
+    cleanupProcessorTypeSubForm() {
+        this.ProcessorDetailsFormGroup.removeControl('defaultFile');
+        // this.ApplicationFormGroup.removeControl('dfsLcuType');
+        // this.ApplicationFormGroup.removeControl('oauthLcuType');
+        this.ProcessorDetailsFormGroup.removeControl('scopes');
+        this.ProcessorDetailsFormGroup.removeControl('tokenLookup');
+        this.ProcessorDetailsFormGroup.removeControl('inboundPath');
+        this.ProcessorDetailsFormGroup.removeControl('proxyLcuType');
+        this.ProcessorDetailsFormGroup.removeControl('includeRequest');
+        this.ProcessorDetailsFormGroup.removeControl('redirect');
+        this.ProcessorDetailsFormGroup.removeControl('permanent');
+        this.ProcessorDetailsFormGroup.removeControl('preserveMethod');
+        this.cleanupLcuTypeSubForm();
     }
     listBuildPaths() {
-        if (this.UseBuildPath) {
-            this.Loading = true;
-            this.appsFlowSvc
-                .ListBuildPaths(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
-                .subscribe((response) => {
-                this.BuildPathOptions = response.Model;
-                this.Loading = false;
-                if (this.BuildPathOptions?.length === 1) {
-                    this.BuildPathFormControl.setValue(this.BuildPathOptions[0]);
-                }
-            });
-        }
-    }
-    listOrganizations() {
-        this.Loading = true;
+        this.State.Loading = true;
+        console.log("Source Control: ", this.SourceControls[this.SourceControlFormControl.value]);
         this.appsFlowSvc
-            .ListOrganizations()
+            .ListBuildPaths(this.SourceControls[this.SourceControlFormControl.value]?.Organization, this.SourceControls[this.SourceControlFormControl.value]?.Repository)
             .subscribe((response) => {
-            this.OrganizationOptions = response.Model;
-            console.log("Organization Options: ", this.OrganizationOptions);
-            this.Loading = false;
-            if (this.EditingSourceControl?.Organization) {
-                setTimeout(() => {
-                    this.OrganizationFormControl.setValue(this.EditingSourceControl.Organization);
-                    this.listRepositories(this.EditingSourceControl?.Repository);
-                }, 0);
-            }
+            this.BuildPathOptions = response.Model;
+            console.log("build path options: ", this.BuildPathOptions);
+            this.State.Loading = false;
+            // if (this.BuildPathOptions?.length === 1) {
+            //   this.BuildPathFormControl.setValue(this.BuildPathOptions[0]);
+            // }
         });
     }
-    listRepositories(activeRepo = null) {
-        this.Loading = true;
-        this.appsFlowSvc
-            .ListRepositories(this.OrganizationFormControl.value)
-            .subscribe((response) => {
-            this.RepositoryOptions = response.Model;
-            this.Loading = false;
-            if (activeRepo) {
-                setTimeout(() => {
-                    this.RepositoryFormControl.setValue(activeRepo);
-                    this.listBranches();
-                    if (!this.UseBranches) {
-                        this.listBuildPaths();
-                    }
-                }, 0);
-            }
-            else if (this.RepositoryOptions?.length <= 0) {
-                this.CreatingRepository = true;
+    setupLcuTypeSubForm() {
+        this.cleanupLcuTypeSubForm();
+        if (this.LCUType) {
+            switch (this.LCUType) {
+                case 'API':
+                    this.setupLCUAPIForm();
+                    break;
+                case 'ApplicationPointer':
+                    this.setupLCUApplicationPointerForm();
+                    break;
+                case 'GitHub':
+                    this.setupLCUGitHubForm();
+                    break;
+                case 'GitHubOAuth':
+                    this.setupLCUGitHubOAuthForm();
+                    break;
+                case 'WordPress':
+                    this.setupLCUWordPressForm();
+                    break;
+                // case 'NPM':
+                //   this.setupLCUNPMForm();
+                //   break;
+                case 'SPA':
+                    this.setupLCUSPAForm();
+                    break;
+                case 'Zip':
+                    this.setupLCUZipForm();
+                    break;
             }
-        });
-    }
-    loadProjectHostingDetails() {
-        if (this.SelectedBranches?.length > 0) {
-            this.HostingDetails.Loading = true;
-            this.appsFlowSvc
-                .LoadProjectHostingDetails()
-                .subscribe((response) => {
-                this.HostingDetails = response.Model;
-                this.HostingDetails.Loading = false;
-                this.configureDevOpsAction();
-            }, (err) => {
-                this.HostingDetails.Loading = false;
-            });
         }
     }
-    setupFormControls() {
-        this.destroyFormControls();
-        console.log("Source Control: ", this.EditingSourceControl);
-        this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new FormControl(this.DevOpsActionLookup || '', []));
-        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new FormControl(this.EditingSourceControl.Organization ?? '', Validators.required));
-        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new FormControl(this.EditingSourceControl.Repository ?? '', Validators.required));
-        if (this.UseBranches) {
-            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'branches'].join(''), new FormControl(this.EditingSourceControl?.Branches ?? '', Validators.required));
-            this.SelectedBranches = this.EditingSourceControl?.Branches;
-            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'mainBranch'].join(''), new FormControl(this.EditingSourceControl.MainBranch ?? '', Validators.required));
-        }
-        if (this.UseBuildPath) {
-            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'buildPath'].join(''), new FormControl(this.BuildPath ?? '', Validators.required));
+    setupProcessorDetailsForm() {
+        this.ProcessorType = this.EditingApplication?.Processor?.Type || '';
+        // console.log('EDITING APP = ', this.EditingApplication);
+        if (this.EditingApplication != null) {
+            this.ProcessorDetailsFormGroup = this.formBldr.group({
+                procType: [this.ProcessorType, [Validators.required]],
+            });
+            // this.setupDfsForm();
+            // this.setupLcuTypeSubForm();
+            this.setupProcessorTypeSubForm();
         }
     }
-}
-DevopsSourceControlFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, deps: [{ token: ApplicationsFlowService }, { token: EaCService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DevopsSourceControlFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: { EditingSourceControlLookup: ["editing-source-control-lookup", "EditingSourceControlLookup"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"] }, outputs: { SaveStatusEvent: "save-status-event" }, viewQueries: [{ propertyName: "BranchesInput", first: true, predicate: ["branches"], descendants: true }], ngImport: i0, template: "<form \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\n\n  <!-- <mat-card class=\"spread\" class=\"sc-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header> -->\n\n    <!-- <mat-card-content> -->\n\n      <ng-container *ngIf=\"State?.Loading\">\n        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n\n        <!-- <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block> -->\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select \n              formControlName=\"devOpsActionLookup\" \n              placeholder=\"DevOps Action\"\n              [disabled]=\"HostingDetails?.Loading\" \n              (selectionChange)=\"DevOpsActionLookupChanged($event)\"\n            >\n              <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                  {{ devOpsAction.Name }}\n                </mat-option>\n              </ng-container>\n\n              <mat-option value=\"\">-- Create New --</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n          <mat-form-field \n            class=\"mat-full-width with-hint margin-bottom\" \n            *ngIf=\"OrganizationOptions?.length > 0\"\n          >\n            <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n            <mat-select \n              [formControlName]=\"SourceControlRoot + 'organization'\" \n              placeholder=\"Organization\"\n              (selectionChange)=\"OrganizationChanged($event)\" \n              [disabled]=\"Loading || HostingDetails?.Loading\" \n              required\n            >\n              <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n                <mat-option [value]=\"orgOpt.Name\">\n                  {{ orgOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" class=\"primary-link\" target=\"_blank\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  RepositoryFormControl?.valid ||\n                  (OrganizationFormControl?.valid && !Loading)\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                      OrganizationFormControl?.valid\n                        ? 'Repository'\n                        : 'Repository (select organization first)'\n                    \" [disabled]=\"\n                      !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                    \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n              <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n                <mat-option [value]=\"repoOpt.Name\">\n                  {{ repoOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <input matInput placeholder=\"Repository (creates new if does not exist)\"\n              [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n              [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n            <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n              *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n              add_circle\n            </mat-icon>\n\n            <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n              *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n              <mat-icon matSuffix color=\"primary\">\n                save\n              </mat-icon>\n            </button>\n\n            <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n              <mat-icon matSuffix>\n                cancel\n              </mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BranchesFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBranches\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-label>Selected Branches</mat-label>\n\n            <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n              <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n                <mat-option [value]=\"branchOpt.Name\">\n                  {{ branchOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-autocomplete>\n\n            <mat-chip-list #selectedBranches>\n              <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n                *ngFor=\"let selBranch of SelectedBranches\">\n                {{ selBranch }}\n                <mat-icon matChipRemove>cancel</mat-icon>\n              </mat-chip>\n\n              <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n                [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n                [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n                (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n                required />\n            </mat-chip-list>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n              [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n              <ng-container *ngFor=\"let branch of SelectedBranches\">\n                <mat-option [value]=\"branch\">\n                  {{ branch }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" target=\"_blank\"class=\"primary-link\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BuildPathFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBuildPath\n                \">\n          <mat-form-field class=\"mat-full-width with-hint\">\n            <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n              [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n              <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                <mat-option [value]=\"buildPath\">\n                  {{ buildPath }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-hint>\n              The build path identifies which build action to use for your\n              configuration.\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div *ngIf=\"Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n                Loading organizations\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                      \">\n                Loading repositories\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n                Loading branches\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                        !BuildPathFormControl?.valid\n                      \">\n                Loading build paths\n              </h4>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- </div> -->\n\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n      <!-- <button \n        mat-raised-button \n        *ngIf=\"!State?.Loading\"\n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader> -->\n      \n  <!-- </mat-card-actions> -->\n  <!-- </mat-card> -->\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}.primary-link{color:#4a918e;text-decoration:none}.s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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"] }, { type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatPrefix, selector: "[matPrefix]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.MatLabel, selector: "mat-label" }, { type: i9$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-devops-source-control-form', template: "<form \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\n\n  <!-- <mat-card class=\"spread\" class=\"sc-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header> -->\n\n    <!-- <mat-card-content> -->\n\n      <ng-container *ngIf=\"State?.Loading\">\n        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n\n        <!-- <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block> -->\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select \n              formControlName=\"devOpsActionLookup\" \n              placeholder=\"DevOps Action\"\n              [disabled]=\"HostingDetails?.Loading\" \n              (selectionChange)=\"DevOpsActionLookupChanged($event)\"\n            >\n              <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                  {{ devOpsAction.Name }}\n                </mat-option>\n              </ng-container>\n\n              <mat-option value=\"\">-- Create New --</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n          <mat-form-field \n            class=\"mat-full-width with-hint margin-bottom\" \n            *ngIf=\"OrganizationOptions?.length > 0\"\n          >\n            <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n            <mat-select \n              [formControlName]=\"SourceControlRoot + 'organization'\" \n              placeholder=\"Organization\"\n              (selectionChange)=\"OrganizationChanged($event)\" \n              [disabled]=\"Loading || HostingDetails?.Loading\" \n              required\n            >\n              <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n                <mat-option [value]=\"orgOpt.Name\">\n                  {{ orgOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" class=\"primary-link\" target=\"_blank\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  RepositoryFormControl?.valid ||\n                  (OrganizationFormControl?.valid && !Loading)\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                      OrganizationFormControl?.valid\n                        ? 'Repository'\n                        : 'Repository (select organization first)'\n                    \" [disabled]=\"\n                      !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                    \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n              <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n                <mat-option [value]=\"repoOpt.Name\">\n                  {{ repoOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <input matInput placeholder=\"Repository (creates new if does not exist)\"\n              [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n              [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n            <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n              *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n              add_circle\n            </mat-icon>\n\n            <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n              *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n              <mat-icon matSuffix color=\"primary\">\n                save\n              </mat-icon>\n            </button>\n\n            <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n              <mat-icon matSuffix>\n                cancel\n              </mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BranchesFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBranches\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-label>Selected Branches</mat-label>\n\n            <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n              <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n                <mat-option [value]=\"branchOpt.Name\">\n                  {{ branchOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-autocomplete>\n\n            <mat-chip-list #selectedBranches>\n              <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n                *ngFor=\"let selBranch of SelectedBranches\">\n                {{ selBranch }}\n                <mat-icon matChipRemove>cancel</mat-icon>\n              </mat-chip>\n\n              <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n                [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n                [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n                (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n                required />\n            </mat-chip-list>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n              [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n              <ng-container *ngFor=\"let branch of SelectedBranches\">\n                <mat-option [value]=\"branch\">\n                  {{ branch }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" target=\"_blank\"class=\"primary-link\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BuildPathFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBuildPath\n                \">\n          <mat-form-field class=\"mat-full-width with-hint\">\n            <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n              [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n              <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                <mat-option [value]=\"buildPath\">\n                  {{ buildPath }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-hint>\n              The build path identifies which build action to use for your\n              configuration.\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div *ngIf=\"Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n                Loading organizations\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                      \">\n                Loading repositories\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n                Loading branches\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                        !BuildPathFormControl?.valid\n                      \">\n                Loading build paths\n              </h4>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- </div> -->\n\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n      <!-- <button \n        mat-raised-button \n        *ngIf=\"!State?.Loading\"\n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader> -->\n      \n  <!-- </mat-card-actions> -->\n  <!-- </mat-card> -->\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}.primary-link{color:#4a918e;text-decoration:none}.s-block{margin:10px 0;width:100%;height:40px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$2.FormBuilder }]; }, propDecorators: { EditingSourceControlLookup: [{
-                type: Input,
-                args: ['editing-source-control-lookup']
-            }], Environment: [{
-                type: Input,
-                args: ['environment']
-            }], EnvironmentLookup: [{
-                type: Input,
-                args: ['environment-lookup']
-            }], SaveStatusEvent: [{
-                type: Output,
-                args: ['save-status-event']
-            }], BranchesInput: [{
-                type: ViewChild,
-                args: ['branches']
-            }] } });
-
-class SourceControlDialogComponent {
-    constructor(dialogRef, eacSvc, data, snackBar) {
-        this.dialogRef = dialogRef;
-        this.eacSvc = eacSvc;
-        this.data = data;
-        this.snackBar = snackBar;
+    setupLCUGitHubForm() {
+        console.log('EditingApplication: ', this.EditingApplication);
+        this.ProcessorDetailsFormGroup.addControl('sourceControl', this.formBldr.control(this.EditingApplication.LowCodeUnit?.SourceControlLookup || '', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('buildPath', this.formBldr.control(this.EditingApplication.LowCodeUnit?.Path || '', [
+            Validators.required,
+        ]));
+        this.ProcessorDetailsFormGroup.addControl('build', this.formBldr.control(this.EditingApplication.LowCodeUnit?.Build || 'latest', [Validators.required]));
+        this.listBuildPaths();
     }
-    get DevOpsSourceControlFormGroup() {
-        return this.DevopsSourceControl?.DevOpsSourceControlFormGroup;
+    setupLCUApplicationPointerForm() {
+        this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ApplicationID || '', [Validators.required]));
     }
-    get HasConnection() {
-        return this.State.GitHub.HasConnection;
+    setupLCUSPAForm() {
+        this.ProcessorDetailsFormGroup.addControl('spaRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.SPARoot || '', [Validators.required]));
     }
-    get State() {
-        return this.eacSvc.State;
+    setupLCUAPIForm() {
+        this.ProcessorDetailsFormGroup.addControl('methods', this.formBldr.control(this.EditingApplication.LookupConfig?.AllowedMethods?.join(' ') || '', []));
+        this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.APIRoot || '', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('security', this.formBldr.control(this.EditingApplication.LowCodeUnit?.Security || '', [Validators.required]));
     }
-    ngOnInit() {
+    setupLCUGitHubOAuthForm() {
+        this.ProcessorDetailsFormGroup.addControl('clientId', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ClientID || '', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('clientSecret', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ClientSecret || '', [Validators.required]));
     }
-    CloseDialog() {
-        this.dialogRef.close();
+    setupLCUWordPressForm() {
+        this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.APIRoot || '', [Validators.required]));
     }
-    HandleSaveStatusEvent(event) {
-        console.log("event to save: ", event);
-        if (event.Code === 0) {
-            this.snackBar.open("Source Control Succesfully Saved", "Dismiss", {
-                duration: 5000
-            });
-            this.CloseDialog();
-        }
-        else {
-            this.ErrorMessage = event.Message;
-        }
+    setupProxyForm() {
+        this.LCUType = this.EditingApplication.LowCodeUnit?.Type || '';
+        this.ProcessorDetailsFormGroup.addControl('inboundPath', this.formBldr.control(this.EditingApplication.Processor?.InboundPath || '', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [Validators.required]));
     }
-    SaveSourceControl() {
-        this.DevopsSourceControl.SaveSourceControl();
+    setupRedirectForm() {
+        this.ProcessorDetailsFormGroup.addControl('redirect', this.formBldr.control(this.EditingApplication.Processor?.Redirect || '', [
+            Validators.required,
+        ]));
+        this.ProcessorDetailsFormGroup.addControl('permanent', this.formBldr.control(this.EditingApplication.Processor?.Permanent || false, []));
+        this.ProcessorDetailsFormGroup.addControl('preserveMethod', this.formBldr.control(this.EditingApplication.Processor?.PreserveMethod || false, []));
+        this.ProcessorDetailsFormGroup.addControl('includeRequest', this.formBldr.control(this.EditingApplication.Processor?.IncludeRequest || false, []));
+        this.DetermineTooltipText();
+    }
+    setupOAuthForm() {
+        this.LCUType = this.EditingApplication.LowCodeUnit?.Type || '';
+        this.ProcessorDetailsFormGroup.addControl('scopes', this.formBldr.control(this.EditingApplication.Processor?.Scopes?.Join(' ') || '', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('tokenLookup', this.formBldr.control(this.EditingApplication.Processor?.TokenLookup || '', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [Validators.required]));
+    }
+    setupLCUZipForm() {
+        this.ProcessorDetailsFormGroup.addControl('zipFile', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ZipFile || '', [Validators.required]));
+    }
+    setupDfsForm() {
+        this.LCUType = this.EditingApplication.LowCodeUnit?.Type || '';
+        this.ProcessorDetailsFormGroup.addControl('defaultFile', this.formBldr.control(this.EditingApplication.Processor?.DefaultFile || 'index.html', [Validators.required]));
+        this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [Validators.required]));
+    }
+    setupProcessorTypeSubForm() {
+        this.cleanupProcessorTypeSubForm();
+        if (this.ProcessorType) {
+            switch (this.ProcessorType) {
+                case 'DFS':
+                    this.setupDfsForm();
+                    break;
+                case 'OAuth':
+                    this.setupOAuthForm();
+                    break;
+                case 'Proxy':
+                    this.setupProxyForm();
+                    break;
+                case 'Redirect':
+                    this.setupRedirectForm();
+                    break;
+            }
+        }
+        this.setupLcuTypeSubForm();
     }
 }
-SourceControlDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, deps: [{ token: i2$2.MatDialogRef }, { token: EaCService }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-SourceControlDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SourceControlDialogComponent, selector: "lcu-source-control-dialog", viewQueries: [{ propertyName: "DevopsSourceControl", first: true, predicate: DevopsSourceControlFormComponent, descendants: true }], ngImport: i0, template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n        <h2 mat-dialog-title>Source Control</h2>\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<mat-dialog-content>\n\n        <ng-container *ngIf=\"!HasConnection\">\n                \n                <lcu-git-auth></lcu-git-auth>\n\n        </ng-container>\n\n        <ng-conatiner *ngIf=\"HasConnection\" fxLayout=\"column\">\n\n                <div fxLayoutAlign=\"center center\">\n                        <lcu-devops-source-control-form\n                                [environment]=\"data.environment\"\n                                [environment-lookup]=\"data.environmentLookup\"\n                                [editing-source-control-lookup]=\"data.scLookup\"\n                                (save-status-event)=\"HandleSaveStatusEvent($event)\">\n                        </lcu-devops-source-control-form>\n                </div>\n                \n                <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n                        {{ ErrorMessage }}\n                </mat-error>\n\n        </ng-conatiner>\n\n</mat-dialog-content>\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n        class=\"action-button\"\n        mat-raised-button \n        *ngIf=\"!State?.Loading\" \n        fxFlex=\"25%\" \n        color=\"primary\" \n        (click)=\"SaveSourceControl()\"\n        [disabled]=\"!DevOpsSourceControlFormGroup?.valid || !DevOpsSourceControlFormGroup?.dirty\">\n        <!-- <mat-icon>save</mat-icon> -->\n        Save\n      </button>\n\n</mat-dialog-actions>\n\n\n\n", styles: [".dialog-header{width:100%}.action-button{margin:0 10px}\n"], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GitAuthComponent, selector: "lcu-git-auth" }, { type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: ["editing-source-control-lookup", "environment", "environment-lookup"], outputs: ["save-status-event"] }], directives: [{ type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, decorators: [{
+ProcessorDetailsFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProcessorDetailsFormComponent, deps: [{ token: ApplicationsFlowService }, { token: i1$2.FormBuilder }, { token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
+ProcessorDetailsFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ProcessorDetailsFormComponent, selector: "lcu-processor-details-form", inputs: { EditingApplication: ["editing-application", "EditingApplication"], EditingApplicationLookup: ["editing-application-lookup", "EditingApplicationLookup"], HasSaveButton: ["has-save-button", "HasSaveButton"], SourceControlLookups: ["source-control-lookups", "SourceControlLookups"], ProjectLookup: ["project-lookup", "ProjectLookup"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SaveProcessorDetails()\">\n<!-- <mat-card class=\"spread flow-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header> -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n\n      <ng-container *ngFor=\"let fc of ValidFormControls\">\n\n        <skeleton-block  \n        [id]=\"fc\"\n        class=\"s-block\" \n        effect=\"wave\"\n        ></skeleton-block>\n        \n      </ng-container>\n\n      <lcu-loader *ngIf=\"LCUType === 'Redirect'\" [loading]=\"State?.Loading\"></lcu-loader>\n\n    </ng-container>\n    <!-- END SKELETON -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n\n    <!-- <mat-card-content> -->\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <mat-option value=\"WordPress\">WordPress</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <!-- <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls> -->\n\n              <mat-form-field class=\"mat-full-width\">\n                <mat-select\n                  placeholder=\"Source Control\"\n                  formControlName=\"sourceControl\"\n                  (selectionChange)=\"SourceControlChanged($event)\"\n                  required\n                >\n                  <mat-option \n                    *ngFor=\"let scLookup of SourceControlLookups\" \n                    [value]=\"scLookup\">\n                     {{scLookup}}\n                  </mat-option>\n                  \n    \n                  <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width with-hint\"\n                *ngIf=\"\n                SourceControlFormControl?.valid\n                \"\n              >          \n                <mat-select\n                  formControlName=\"buildPath\"\n                  placeholder=\"Build Path\"\n                  required\n                >\n                  <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                    <mat-option [value]=\"buildPath\">\n                      {{ buildPath }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-hint>\n                  The build path identifies which build action to use for your\n                  configuration.\n                </mat-hint>\n              </mat-form-field>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n\n            <div *ngSwitchCase=\"'WordPress'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            \n          </div>\n          \n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"includeRequest\">\n              Include Path and Query?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Should the redirect include the path and query?\"\n            >\n              info_outline\n            </mat-icon>\n          </div>\n        </div>\n      </div>\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ProcessorDetailsFormGroup.valid || !ProcessorDetailsFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Processor Details\n        </button> -->\n        <!-- <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader> -->\n\n    <!-- </mat-card-actions> -->\n\n  </ng-container>\n  \n<!-- </mat-card> -->\n</form>\n  \n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: NpmPackageSelectComponent, selector: "lcu-npm-package-select", inputs: ["npm-package", "npm-package-version", "form-group"] }, { type: i12$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProcessorDetailsFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-source-control-dialog', template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n        <h2 mat-dialog-title>Source Control</h2>\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<mat-dialog-content>\n\n        <ng-container *ngIf=\"!HasConnection\">\n                \n                <lcu-git-auth></lcu-git-auth>\n\n        </ng-container>\n\n        <ng-conatiner *ngIf=\"HasConnection\" fxLayout=\"column\">\n\n                <div fxLayoutAlign=\"center center\">\n                        <lcu-devops-source-control-form\n                                [environment]=\"data.environment\"\n                                [environment-lookup]=\"data.environmentLookup\"\n                                [editing-source-control-lookup]=\"data.scLookup\"\n                                (save-status-event)=\"HandleSaveStatusEvent($event)\">\n                        </lcu-devops-source-control-form>\n                </div>\n                \n                <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n                        {{ ErrorMessage }}\n                </mat-error>\n\n        </ng-conatiner>\n\n</mat-dialog-content>\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n        class=\"action-button\"\n        mat-raised-button \n        *ngIf=\"!State?.Loading\" \n        fxFlex=\"25%\" \n        color=\"primary\" \n        (click)=\"SaveSourceControl()\"\n        [disabled]=\"!DevOpsSourceControlFormGroup?.valid || !DevOpsSourceControlFormGroup?.dirty\">\n        <!-- <mat-icon>save</mat-icon> -->\n        Save\n      </button>\n\n</mat-dialog-actions>\n\n\n\n", styles: [".dialog-header{width:100%}.action-button{margin:0 10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$2.MatDialogRef }, { type: EaCService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { DevopsSourceControl: [{
-                type: ViewChild,
-                args: [DevopsSourceControlFormComponent]
+            args: [{ selector: 'lcu-processor-details-form', template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SaveProcessorDetails()\">\n<!-- <mat-card class=\"spread flow-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header> -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n\n      <ng-container *ngFor=\"let fc of ValidFormControls\">\n\n        <skeleton-block  \n        [id]=\"fc\"\n        class=\"s-block\" \n        effect=\"wave\"\n        ></skeleton-block>\n        \n      </ng-container>\n\n      <lcu-loader *ngIf=\"LCUType === 'Redirect'\" [loading]=\"State?.Loading\"></lcu-loader>\n\n    </ng-container>\n    <!-- END SKELETON -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n\n    <!-- <mat-card-content> -->\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <mat-option value=\"WordPress\">WordPress</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <!-- <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls> -->\n\n              <mat-form-field class=\"mat-full-width\">\n                <mat-select\n                  placeholder=\"Source Control\"\n                  formControlName=\"sourceControl\"\n                  (selectionChange)=\"SourceControlChanged($event)\"\n                  required\n                >\n                  <mat-option \n                    *ngFor=\"let scLookup of SourceControlLookups\" \n                    [value]=\"scLookup\">\n                     {{scLookup}}\n                  </mat-option>\n                  \n    \n                  <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width with-hint\"\n                *ngIf=\"\n                SourceControlFormControl?.valid\n                \"\n              >          \n                <mat-select\n                  formControlName=\"buildPath\"\n                  placeholder=\"Build Path\"\n                  required\n                >\n                  <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                    <mat-option [value]=\"buildPath\">\n                      {{ buildPath }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-hint>\n                  The build path identifies which build action to use for your\n                  configuration.\n                </mat-hint>\n              </mat-form-field>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n\n            <div *ngSwitchCase=\"'WordPress'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            \n          </div>\n          \n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"includeRequest\">\n              Include Path and Query?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Should the redirect include the path and query?\"\n            >\n              info_outline\n            </mat-icon>\n          </div>\n        </div>\n      </div>\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ProcessorDetailsFormGroup.valid || !ProcessorDetailsFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Processor Details\n        </button> -->\n        <!-- <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader> -->\n\n    <!-- </mat-card-actions> -->\n\n  </ng-container>\n  \n<!-- </mat-card> -->\n</form>\n  \n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: i1$2.FormBuilder }, { type: EaCService }]; }, propDecorators: { EditingApplication: [{
+                type: Input,
+                args: ['editing-application']
+            }], EditingApplicationLookup: [{
+                type: Input,
+                args: ['editing-application-lookup']
+            }], HasSaveButton: [{
+                type: Input,
+                args: ['has-save-button']
+            }], SourceControlLookups: [{
+                type: Input,
+                args: ['source-control-lookups']
+            }], ProjectLookup: [{
+                type: Input,
+                args: ['project-lookup']
+            }], SaveFormEvent: [{
+                type: Output,
+                args: ['save-form-event']
             }] } });
 
-class MainFeedCardComponent {
-    constructor(eacSvc, dialog, sanitizer) {
+class NewApplicationDialogComponent {
+    constructor(eacSvc, dialogRef, data, snackBar) {
         this.eacSvc = eacSvc;
-        this.dialog = dialog;
-        this.sanitizer = sanitizer;
-    }
-    get ActiveEnvironment() {
-        return this.State?.EaC?.Environments[this.ActiveEnvironmentLookup];
-    }
-    get ActiveEnvironmentLookup() {
-        //  TODO:  Eventually support multiple environments
-        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
-        return envLookups[0];
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.snackBar = snackBar;
+        this.HasSaveButton = false;
     }
     get Environment() {
-        // console.log("Ent Environment var: ", this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment]);
-        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
+        return this.State?.EaC?.Environments[this.data.environmentLookup];
     }
-    get Icon() {
-        if (this.FeedItem.Status.Code === 0) {
-            return 'check_circle';
-        }
-        else if (this.FeedItem.Status.Code === 1) {
-            return 'cancel';
-        }
-        else if (this.FeedItem.Status.Code === 2) {
-            return 'sync';
-        }
-        else {
-            return 'help_outline';
-        }
+    get SourceControls() {
+        return this.Environment?.Sources || {};
     }
-    get IconColor() {
-        if (this.FeedItem.Status.Code === 0) {
-            return 'green';
-        }
-        else if (this.FeedItem.Status.Code === 1) {
-            return 'red';
-        }
-        else if (this.FeedItem.Status.Code === 2) {
-            return 'blue';
-        }
-        else {
-            return 'gray';
-        }
+    get SourceControlLookups() {
+        return Object.keys(this.Environment.Sources || {});
     }
     get State() {
         return this.eacSvc.State;
     }
-    //  Life Cycle
     ngOnInit() {
-        this.handleRefresh();
+        this.SetupApplication(Guid.CreateRaw());
     }
-    //  API Methods
-    CalculateTimelapse(timestamp) {
-        return moment(timestamp).fromNow();
+    CloseDialog() {
+        this.dialogRef.close();
     }
-    HandleAction(action) {
-        if (action.ActionType == 'Link') {
-            if (action.Action.startsWith('http')) {
-                window.open(action.Action, '_blank');
-            }
-            else {
-                window.location.href = action.Action;
-            }
+    SetupApplication(appLookup) {
+        this.NewApplication = new EaCApplicationAsCode;
+        this.NewApplicationLookup = appLookup;
+    }
+    SaveApplication() {
+        const app = {
+            Application: {
+                Name: this.ApplicationFormControls.NameFormControl.value,
+                Description: this.ApplicationFormControls.DescriptionFormControl.value,
+                PriorityShift: 0,
+            },
+            AccessRightLookups: [],
+            DataTokens: {},
+            LicenseConfigurationLookups: [],
+            LookupConfig: {
+                IsPrivate: false,
+                IsTriggerSignIn: false,
+                PathRegex: `${this.ApplicationFormControls.RouteFormControl.value}.*`,
+                QueryRegex: '',
+                HeaderRegex: '',
+                AllowedMethods: this.ProcessorDetailsFormControls.MethodsFormControl?.value
+                    ?.split(' ')
+                    .filter((v) => !!v),
+            },
+            Processor: {
+                Type: this.ProcessorDetailsFormControls.ProcessorType,
+            },
+        };
+        switch (app.Processor.Type) {
+            case 'DFS':
+                app.Processor.BaseHref = `${this.ApplicationFormControls.RouteFormControl.value}/`.replace('//', '/');
+                app.Processor.DefaultFile =
+                    this.ProcessorDetailsFormControls.DefaultFileFormControl.value || 'index.html';
+                app.LowCodeUnit = {
+                    Type: this.ProcessorDetailsFormControls.LCUType,
+                };
+                switch (app.LowCodeUnit.Type) {
+                    case 'GitHub':
+                        app.LowCodeUnit.Organization =
+                            this.SourceControls[this.ProcessorDetailsFormControls.SourceControlFormControl.value].Organization;
+                        app.LowCodeUnit.Repository =
+                            this.SourceControls[this.ProcessorDetailsFormControls.SourceControlFormControl.value].Repository;
+                        app.LowCodeUnit.Build = this.ProcessorDetailsFormControls.BuildFormControl.value;
+                        app.LowCodeUnit.Path =
+                            this.ProcessorDetailsFormControls.BuildPathFormControl.value;
+                        break;
+                    case 'NPM':
+                        app.LowCodeUnit.Package = this.ProcessorDetailsFormControls.PackageFormControl.value;
+                        app.LowCodeUnit.Version = this.ProcessorDetailsFormControls.VersionFormControl.value;
+                        break;
+                    case 'Zip':
+                        app.LowCodeUnit.ZipFile = this.ProcessorDetailsFormControls.ZipFileFormControl.value;
+                        break;
+                }
+                break;
+            case 'OAuth':
+                app.Processor.Scopes = this.ProcessorDetailsFormControls.ScopesFormControl.value.split(' ');
+                app.Processor.TokenLookup = this.ProcessorDetailsFormControls.TokenLookupFormControl.value;
+                app.LowCodeUnit = {
+                    Type: this.ProcessorDetailsFormControls.LCUType,
+                };
+                switch (app.LowCodeUnit.Type) {
+                    case 'GitHubOAuth':
+                        app.LowCodeUnit.ClientID = this.ProcessorDetailsFormControls.ClientIDFormControl.value;
+                        app.LowCodeUnit.ClientSecret = this.ProcessorDetailsFormControls.ClientSecretFormControl.value;
+                        break;
+                }
+                break;
+            case 'Proxy':
+                app.Processor.InboundPath = this.ProcessorDetailsFormControls.InboundPathFormControl.value;
+                app.LowCodeUnit = {
+                    Type: this.ProcessorDetailsFormControls.LCUType,
+                };
+                switch (app.LowCodeUnit.Type) {
+                    case 'API':
+                        app.LowCodeUnit.APIRoot = this.ProcessorDetailsFormControls.APIRootFormControl.value;
+                        app.LowCodeUnit.Security = this.ProcessorDetailsFormControls.SecurityFormControl.value;
+                        break;
+                    case 'SPA':
+                        app.LowCodeUnit.SPARoot = this.ProcessorDetailsFormControls.SPARootFormControl.value;
+                        break;
+                }
+                break;
+            case 'Redirect':
+                app.Processor.Permanent = !!this.ProcessorDetailsFormControls.PermanentFormControl.value;
+                app.Processor.PreserveMethod = !!this.ProcessorDetailsFormControls.PreserveMethodFormControl.value;
+                app.Processor.Redirect = this.ProcessorDetailsFormControls.RedirectFormControl.value;
+                break;
         }
-        else if (action.ActionType == 'Modal') {
-            if (action.Action == 'AddSourceControl') {
-                this.OpenSourceControlDialog(null);
-            }
-            else {
-                alert('other modaled ' + action.Action);
+        if (!app.LookupConfig.PathRegex.startsWith('/')) {
+            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
+        }
+        const saveAppReq = {
+            ProjectLookup: this.data.projectLookup,
+            Application: app,
+            ApplicationLookup: this.NewApplicationLookup,
+        };
+        // this.HasBuildFormControl.value &&  taken out from below if statement
+        if (this.ProcessorDetailsFormControls.ProcessorType !== 'redirect' && this.ProcessorDetailsFormControls.LCUType === 'GitHub') {
+            if (app) {
+                app.LowCodeUnit.SourceControlLookup = this.ProcessorDetailsFormControls.SourceControlFormControl.value;
             }
         }
+        else if (app) {
+            app.LowCodeUnit.SourceControlLookup = null;
+        }
+        // console.log("Save new App request: ", saveAppReq);
+        this.eacSvc.SaveApplicationAsCode(saveAppReq).then(res => {
+            this.handleSaveStatus(res);
+        });
     }
-    OpenSourceControlDialog(scLookup) {
-        const dialogRef = this.dialog.open(SourceControlDialogComponent, {
-            width: '550px',
-            data: {
-                environment: this.Environment,
-                environmentLookup: this.ActiveEnvironmentLookup,
-                scLookup: scLookup,
-            },
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            // console.log('The dialog was closed');
-            // console.log("result:", result)
-        });
-    }
-    SafeHtml(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
-    }
-    //  Helpers
-    handleRefresh() {
-        if (this.FeedItem?.RefreshLink) {
-            setTimeout(() => {
-                this.eacSvc.CheckUserFeedItem(this.FeedItem).subscribe(async (response) => {
-                    if (response.Status.Code === 0) {
-                        this.FeedItem = response.Model;
-                        this.handleRefresh();
-                    }
-                    else {
-                        console.log(response);
-                    }
-                }, (err) => {
-                    console.log(err);
-                });
-            }, 5000);
+    handleSaveStatus(status) {
+        console.log("event to save: ", status);
+        if (status.Code === 0) {
+            this.snackBar.open("Application Succesfully Created", "Dismiss", {
+                duration: 5000
+            });
+            this.CloseDialog();
+        }
+        else {
+            this.ErrorMessage = status.Message;
         }
     }
 }
-MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }, { token: i2$2.MatDialog }, { token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-MainFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainFeedCardComponent, selector: "lcu-main-feed-card", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <div *ngIf=\"FeedItem.Subtext\">{{ FeedItem.Subtext }}</div>\n\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <div class=\"feed-card-container\">\n      <div class=\"feed-card-main-content\">\n        <mat-tab-group>\n          <ng-container *ngFor=\"let tab of FeedItem.Tabs\">\n            <mat-tab [label]=\"tab.Title\">\n              <div class=\"tab\">\n                <ng-container *ngIf=\"tab.Data?.Commit?.Message\">\n                  <div class=\"commit-message\">\n                    {{ tab.Data?.Commit?.Message }}\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"tab.Data?.Video\">\n                  <div\n                    class=\"video\"\n                    [innerHTML]=\"SafeHtml(tab.Data.Video)\"\n                  ></div>\n                </ng-container>\n              </div>\n            </mat-tab>\n          </ng-container>\n        </mat-tab-group>\n      </div>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}:host .tab{margin:2em}:host .tab .video iframe{display:block;margin:auto}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i4.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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, decorators: [{
+NewApplicationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NewApplicationDialogComponent, deps: [{ token: EaCService }, { token: i2$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+NewApplicationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NewApplicationDialogComponent, selector: "lcu-new-application-dialog", viewQueries: [{ propertyName: "ApplicationFormControls", first: true, predicate: EditApplicationFormComponent, descendants: true }, { propertyName: "ProcessorDetailsFormControls", first: true, predicate: ProcessorDetailsFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Create Application</h2>\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n    <lcu-edit-application-form \n        [current-route]=\"data.currentRoute\"\n        [editing-application]=\"NewApplication\"\n        [has-save-button]=\"HasSaveButton\"\n    >\n    </lcu-edit-application-form>\n\n    <lcu-processor-details-form \n        [editing-application]=\"NewApplication\"\n        [editing-application-lookup]=\"NewApplicationLookup\"\n        [has-save-button]=\"HasSaveButton\"\n        [source-control-lookups]=\"SourceControlLookups\"\n        [project-lookup]=\"data.projectLookup\"\n    >\n    </lcu-processor-details-form>\n\n    <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n        {{ ErrorMessage }}\n    </mat-error>\n</mat-dialog-content>\n\n<mat-dialog-actions\n    class=\"actions-container\" \n    div fxLayout=\"row\" \n    fxLayoutAlign=\"end center\"\n>\n\n    <button \n        class=\"action-button\"\n        mat-raised-button\n        fxFlex=\"25%\"\n        (click)=\"CloseDialog()\"\n    >\n        Cancel\n    </button>\n\n\n    <button \n        *ngIf=\"ProcessorDetailsFormControls && ApplicationFormControls && !State?.Loading\"\n        mat-raised-button \n        color=\"primary\"\n        fxFlex=\"25%\"\n        class=\"new-app-submit\" \n        (click)=\"SaveApplication()\"\n        [disabled]=\"\n            !ProcessorDetailsFormControls?.ProcessorDetailsFormGroup?.valid \n            || \n            !ApplicationFormControls?.ApplicationFormGroup?.valid\n        \"\n    >\n        Save Application\n    </button>\n</mat-dialog-actions>\n\n\n", styles: [""], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditApplicationFormComponent, selector: "lcu-edit-application-form", inputs: ["application-lookup", "current-route", "editing-application", "has-save-button", "project-lookup"], outputs: ["save-form-event"] }, { type: ProcessorDetailsFormComponent, selector: "lcu-processor-details-form", inputs: ["editing-application", "editing-application-lookup", "has-save-button", "source-control-lookups", "project-lookup"], outputs: ["save-form-event"] }], directives: [{ type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NewApplicationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-main-feed-card', template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <div *ngIf=\"FeedItem.Subtext\">{{ FeedItem.Subtext }}</div>\n\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <div class=\"feed-card-container\">\n      <div class=\"feed-card-main-content\">\n        <mat-tab-group>\n          <ng-container *ngFor=\"let tab of FeedItem.Tabs\">\n            <mat-tab [label]=\"tab.Title\">\n              <div class=\"tab\">\n                <ng-container *ngIf=\"tab.Data?.Commit?.Message\">\n                  <div class=\"commit-message\">\n                    {{ tab.Data?.Commit?.Message }}\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"tab.Data?.Video\">\n                  <div\n                    class=\"video\"\n                    [innerHTML]=\"SafeHtml(tab.Data.Video)\"\n                  ></div>\n                </ng-container>\n              </div>\n            </mat-tab>\n          </ng-container>\n        </mat-tab-group>\n      </div>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}:host .tab{margin:2em}:host .tab .video iframe{display:block;margin:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: EaCService }, { type: i2$2.MatDialog }, { type: i3$2.DomSanitizer }]; }, propDecorators: { FeedItem: [{
-                type: Input,
-                args: ['feed-item']
+            args: [{ selector: 'lcu-new-application-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Create Application</h2>\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n    <lcu-edit-application-form \n        [current-route]=\"data.currentRoute\"\n        [editing-application]=\"NewApplication\"\n        [has-save-button]=\"HasSaveButton\"\n    >\n    </lcu-edit-application-form>\n\n    <lcu-processor-details-form \n        [editing-application]=\"NewApplication\"\n        [editing-application-lookup]=\"NewApplicationLookup\"\n        [has-save-button]=\"HasSaveButton\"\n        [source-control-lookups]=\"SourceControlLookups\"\n        [project-lookup]=\"data.projectLookup\"\n    >\n    </lcu-processor-details-form>\n\n    <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n        {{ ErrorMessage }}\n    </mat-error>\n</mat-dialog-content>\n\n<mat-dialog-actions\n    class=\"actions-container\" \n    div fxLayout=\"row\" \n    fxLayoutAlign=\"end center\"\n>\n\n    <button \n        class=\"action-button\"\n        mat-raised-button\n        fxFlex=\"25%\"\n        (click)=\"CloseDialog()\"\n    >\n        Cancel\n    </button>\n\n\n    <button \n        *ngIf=\"ProcessorDetailsFormControls && ApplicationFormControls && !State?.Loading\"\n        mat-raised-button \n        color=\"primary\"\n        fxFlex=\"25%\"\n        class=\"new-app-submit\" \n        (click)=\"SaveApplication()\"\n        [disabled]=\"\n            !ProcessorDetailsFormControls?.ProcessorDetailsFormGroup?.valid \n            || \n            !ApplicationFormControls?.ApplicationFormGroup?.valid\n        \"\n    >\n        Save Application\n    </button>\n</mat-dialog-actions>\n\n\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i2$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { ApplicationFormControls: [{
+                type: ViewChild,
+                args: [EditApplicationFormComponent]
+            }], ProcessorDetailsFormControls: [{
+                type: ViewChild,
+                args: [ProcessorDetailsFormComponent]
             }] } });
 
-class TwoColumnHeaderComponent {
-    constructor() { }
-    ngOnInit() {
+class GhControlComponent {
+    constructor(eacSvc, dialog) {
+        this.eacSvc = eacSvc;
+        this.dialog = dialog;
+        this.InputLabel = "Create Pull Request";
+        this.SkeletonEffect = "wave";
+        this.selectedBtn = "pr-btn";
     }
-}
-TwoColumnHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TwoColumnHeaderComponent, selector: "lcu-two-column-header", ngImport: i0, template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-two-column-header', template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class CardCarouselComponent {
-    constructor() {
-        this.carouselIndex = 0;
+    get ActiveEnvironmentLookup() {
+        //  TODO:  Eventually support multiple environments
+        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
+        return envLookups[0];
+    }
+    get State() {
+        return this.eacSvc.State;
     }
     ngOnInit() {
     }
     ngAfterViewInit() {
-        this.assignCarouselClass();
+        this.addSelectBtn();
     }
-    LeftChevronClicked() {
-        this.removeCarouselClasses();
-        if (this.carouselIndex === 0) {
-            this.carouselIndex = this.Stats.length - 1;
-        }
-        else {
-            this.carouselIndex--;
-        }
-        this.assignCarouselClass();
+    CreateFeatureBranch() {
+        this.removeSelectedBtn();
+        this.InputLabel = "Create Feature Branch";
+        this.selectedBtn = "fb-btn";
+        this.addSelectBtn();
+        console.log("create feature branch selected");
     }
-    MoreDetailsClicked() {
-        console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
+    OpenIssue() {
+        this.removeSelectedBtn();
+        this.InputLabel = "Open Issue";
+        this.selectedBtn = "oi-btn";
+        this.addSelectBtn();
+        console.log("open issue selected");
     }
-    RightChevronClicked() {
-        this.removeCarouselClasses();
-        if (this.carouselIndex === this.Stats.length - 1) {
-            this.carouselIndex = 0;
-        }
-        else {
-            this.carouselIndex++;
+    CreatePullRequest() {
+        this.removeSelectedBtn();
+        this.InputLabel = "Create Pull Request";
+        this.selectedBtn = "pr-btn";
+        this.addSelectBtn();
+        console.log("create pull request selected");
+    }
+    CreateNewApp() {
+        const dialogRef = this.dialog.open(NewApplicationDialogComponent, {
+            width: '600px',
+            data: {
+                environmentLookup: this.ActiveEnvironmentLookup,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            // console.log('The dialog was closed');
+            // console.log("result:", result)
+        });
+    }
+    RouteToPath(path) {
+        window.location.href = path;
+    }
+    Submit() {
+        console.log("submitting: ", this.value);
+        switch (this.selectedBtn) {
+            case "pr-btn":
+                //Pull request
+                console.log("creating pull request: ", this.value);
+                break;
+            case "oi-btn":
+                //Open Issue
+                console.log("Open issue: ", this.value);
+                break;
+            case "fb-btn":
+                //Feature Branch
+                console.log("creating feature branch: ", this.value);
+                break;
+            default:
+                console.log("hmm");
+                break;
         }
-        this.assignCarouselClass();
     }
     //HELPERS
-    removeCarouselClasses() {
-        for (let i = 0; i < this.Stats.length; i++) {
-            if (i === this.carouselIndex) {
-                document.getElementById("carousel-" + this.carouselIndex).classList.remove('active');
-            }
-            else {
-                document.getElementById("carousel-" + i).classList.remove('hidden');
-            }
-        }
+    addSelectBtn() {
+        document.getElementById(this.selectedBtn).classList.add('selected');
     }
-    assignCarouselClass() {
-        for (let i = 0; i < this.Stats.length; i++) {
-            if (i === this.carouselIndex) {
-                document.getElementById("carousel-" + this.carouselIndex).classList.add('active');
-            }
-            else {
-                document.getElementById("carousel-" + i).classList.add('hidden');
-            }
-        }
+    removeSelectedBtn() {
+        document.getElementById(this.selectedBtn).classList.remove('selected');
     }
 }
-CardCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CardCarouselComponent, selector: "lcu-card-carousel", inputs: { Stats: ["stats", "Stats"] }, ngImport: i0, template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, decorators: [{
+GhControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, deps: [{ token: EaCService }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+GhControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GhControlComponent, selector: "lcu-gh-control", ngImport: i0, template: "<mat-card class=\"social-card\">\n    \n\n    <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n            <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n            <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n                <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                    <mat-label>{{InputLabel}}</mat-label>\n                    <input matInput type=\"text\" [(ngModel)]=\"value\">\n                    <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                    <mat-icon>close</mat-icon>\n                    </button> -->\n                </mat-form-field>\n            </div>\n\n            <button \n                fxFlex=\"15%\" \n                mat-button \n                (click)=\"Submit()\" \n                id=\"submit-btn\" \n                color=\"primary\"\n            >\n                Submit\n            </button>\n\n        </div>\n\n        <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n            <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n            <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n            <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\" aria-label=\"menu\">\n                <mat-icon>more_horiz</mat-icon>\n              </button>\n              <mat-menu #menu=\"matMenu\">\n                <button \n                    class=\"gh-menu-action\" \n                    mat-menu-item\n                    (click)=\"CreateNewApp()\" \n                >\n                    Create New App\n                </button>\n\n                <button \n                    class=\"gh-menu-action\" \n                    mat-menu-item \n                    (click)=\"RouteToPath('/dashboard/create-project')\" \n                >\n                    Create Project\n                </button>\n                \n              </mat-menu>\n        </mat-card-actions>\n    </ng-container>\n\n    <!-- SKELETON -->\n    <ng-container *ngIf=\"State?.Loading\">\n        <div \n            id=\"gh-card-skeleton\" \n            fxLayout=\"row\" \n            fxLayoutAlign=\"center center\"\n        >\n\n            <skeleton-avatar  \n                class=\"gh-icon\" \n                [showIcon]=\"false\" \n                [effect]=\"SkeletonEffect\"\n            ></skeleton-avatar>\n\n            <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n                <skeleton-block  height=\"60px\" [effect]=\"SkeletonEffect\"></skeleton-block>\n            </div>\n\n            <div \n                skeleton-text  \n                fxFlex=\"15%\"  \n                [effect]=\"SkeletonEffect\"\n                style=\"margin: 0px 10px;\"\n            >\n                Submit\n            </div>\n\n\n        </div>\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\">Pull Request</div>\n            <div skeleton-text [effect]=\"SkeletonEffect\">Open Issue</div>\n            <div skeleton-text [effect]=\"SkeletonEffect\">Feature Branch</div>\n            <div skeleton-text [effect]=\"SkeletonEffect\">\n                <mat-icon>more_horiz</mat-icon>\n            </div>\n        </div>\n\n    </ng-container>\n</mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}.gh-input ::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}.gh-input ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.gh-input ::ng-deep .mat-form-field-underline{display:none}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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"] }, { type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$3.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.MatLabel, selector: "mat-label" }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-card-carousel', template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { Stats: [{
-                type: Input,
-                args: ['stats']
-            }] } });
+            args: [{ selector: 'lcu-gh-control', template: "<mat-card class=\"social-card\">\n    \n\n    <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n            <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n            <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n                <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                    <mat-label>{{InputLabel}}</mat-label>\n                    <input matInput type=\"text\" [(ngModel)]=\"value\">\n                    <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                    <mat-icon>close</mat-icon>\n                    </button> -->\n                </mat-form-field>\n            </div>\n\n            <button \n                fxFlex=\"15%\" \n                mat-button \n                (click)=\"Submit()\" \n                id=\"submit-btn\" \n                color=\"primary\"\n            >\n                Submit\n            </button>\n\n        </div>\n\n        <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n            <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n            <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n            <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\" aria-label=\"menu\">\n                <mat-icon>more_horiz</mat-icon>\n              </button>\n              <mat-menu #menu=\"matMenu\">\n                <button \n                    class=\"gh-menu-action\" \n                    mat-menu-item\n                    (click)=\"CreateNewApp()\" \n                >\n                    Create New App\n                </button>\n\n                <button \n                    class=\"gh-menu-action\" \n                    mat-menu-item \n                    (click)=\"RouteToPath('/dashboard/create-project')\" \n                >\n                    Create Project\n                </button>\n                \n              </mat-menu>\n        </mat-card-actions>\n    </ng-container>\n\n    <!-- SKELETON -->\n    <ng-container *ngIf=\"State?.Loading\">\n        <div \n            id=\"gh-card-skeleton\" \n            fxLayout=\"row\" \n            fxLayoutAlign=\"center center\"\n        >\n\n            <skeleton-avatar  \n                class=\"gh-icon\" \n                [showIcon]=\"false\" \n                [effect]=\"SkeletonEffect\"\n            ></skeleton-avatar>\n\n            <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n                <skeleton-block  height=\"60px\" [effect]=\"SkeletonEffect\"></skeleton-block>\n            </div>\n\n            <div \n                skeleton-text  \n                fxFlex=\"15%\"  \n                [effect]=\"SkeletonEffect\"\n                style=\"margin: 0px 10px;\"\n            >\n                Submit\n            </div>\n\n\n        </div>\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\">Pull Request</div>\n            <div skeleton-text [effect]=\"SkeletonEffect\">Open Issue</div>\n            <div skeleton-text [effect]=\"SkeletonEffect\">Feature Branch</div>\n            <div skeleton-text [effect]=\"SkeletonEffect\">\n                <mat-icon>more_horiz</mat-icon>\n            </div>\n        </div>\n\n    </ng-container>\n</mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}.gh-input ::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}.gh-input ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.gh-input ::ng-deep .mat-form-field-underline{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i2$2.MatDialog }]; } });
 
-class SecurityToggleComponent {
-    constructor(eacSvc, formBldr) {
+class DevopsSourceControlFormComponent {
+    //  Constructors
+    constructor(appsFlowSvc, eacSvc, formBuilder) {
+        this.appsFlowSvc = appsFlowSvc;
         this.eacSvc = eacSvc;
-        this.formBldr = formBldr;
-        this.SaveFormEvent = new EventEmitter;
-        this.SkeletonEffect = 'wave';
+        this.formBuilder = formBuilder;
+        this.SeparatorKeysCodes = [ENTER, COMMA];
+        this.SaveStatusEvent = new EventEmitter();
+        this.BuildPath = null;
+        this.HostingDetails = new ProjectHostingDetails();
+        this.SelectedBranches = [];
+        this.SourceControlRoot = '';
+        this.SkeletonEffect = "wave";
+        this.UseBranches = true;
+        this.UseBuildPath = false;
     }
-    get IsPrivateFormControl() {
-        return this.SecurityFormGroup?.controls.isPrivate;
+    //  Properties
+    get ArtifactLookups() {
+        return this.DevOpsAction?.ArtifactLookups;
     }
-    get IsTriggerSignInFormControl() {
-        return this.SecurityFormGroup?.controls.isTriggerSignIn;
+    get ArtifactLookup() {
+        const artLookup = this.DevOpsAction?.ArtifactLookups
+            ? this.DevOpsAction?.ArtifactLookups[0]
+            : null;
+        return artLookup;
     }
-    get State() {
-        return this.eacSvc.State;
+    get Artifact() {
+        return this.Environment?.Artifacts && this.ArtifactLookup
+            ? this.Environment?.Artifacts[this.ArtifactLookup] || {}
+            : {};
     }
-    ngOnInit() {
-        this.setupSecurityFormGroup();
+    get BranchesFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
     }
-    SecuritySubmit() {
-        //save the security settings
-        console.log("submitting security values: ", this.SecurityFormGroup.value);
-        this.SaveFormEvent.emit(this.SecurityFormGroup.value);
+    get BuildPathFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
     }
-    setupSecurityFormGroup() {
-        this.ProcessorType = this.EditingApplication?.Processor?.Type || '';
-        this.SecurityFormGroup = this.formBldr.group({});
-        this.setupSecurityForm();
+    get DevOpsActionLookups() {
+        // console.log(this.DevOpsActions);
+        return Object.keys(this.DevOpsActions || {});
     }
-    setupSecurityForm() {
-        this.SecurityFormGroup.addControl('isPrivate', this.formBldr.control(this.EditingApplication.LookupConfig?.IsPrivate || false, [Validators.required]));
-        this.SecurityFormGroup.addControl('isTriggerSignIn', this.formBldr.control(this.EditingApplication.LookupConfig?.IsTriggerSignIn || false, [Validators.required]));
+    get DevOpsAction() {
+        return this.Environment.DevOpsActions && this.DevOpsActionLookup
+            ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
+            : {};
     }
-}
-SecurityToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SecurityToggleComponent, deps: [{ token: EaCService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-SecurityToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SecurityToggleComponent, selector: "lcu-security-toggle", inputs: { EditingApplication: ["editing-application", "EditingApplication"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i12$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i4.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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SecurityToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-security-toggle', template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"] }]
-        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$2.FormBuilder }]; }, propDecorators: { EditingApplication: [{
-                type: Input,
-                args: ['editing-application']
-            }], SaveFormEvent: [{
-                type: Output,
-                args: ['save-form-event']
-            }] } });
-
-class ProcessorDetailsFormComponent {
-    constructor(appsFlowSvc, formBldr, eacSvc) {
-        this.appsFlowSvc = appsFlowSvc;
-        this.formBldr = formBldr;
-        this.eacSvc = eacSvc;
-        this.redirectTooltip = '';
-        this.HasSaveButton = true;
-        this.SaveFormEvent = new EventEmitter();
-    }
-    get APIRootFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.apiRoot;
+    get DevOpsActionLookup() {
+        if (!!this.DevOpsActionLookupFormControl?.value) {
+            return this.DevOpsActionLookupFormControl.value;
+        }
+        if (!!this.EditingSourceControl?.DevOpsActionTriggerLookups) {
+            return this.EditingSourceControl?.DevOpsActionTriggerLookups[0];
+        }
+        else {
+            return null;
+        }
     }
-    get Environment() {
-        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
+    get DevOpsActionLookupFormControl() {
+        return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
     }
-    get BuildFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.build;
+    get DevOpsActions() {
+        return this.Environment.DevOpsActions || {};
     }
-    get BuildPathFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.buildPath;
+    get EditingSourceControl() {
+        let sc = this.Environment?.Sources
+            ? this.Environment?.Sources[this.EditingSourceControlLookup]
+            : null;
+        if (sc == null && this.EditingSourceControlLookup) {
+            sc = {};
+        }
+        return sc;
     }
-    get ClientIDFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.clientId;
+    get MainBranchFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
     }
-    get ClientSecretFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.clientSecret;
+    get OrganizationFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
     }
-    get DefaultFileFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.defaultFile;
+    get RepositoryFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
     }
-    get DefaultSourceControl() {
-        return {
-            Organization: this.EditingApplication?.LowCodeUnit?.Organization,
-            Repository: this.EditingApplication?.LowCodeUnit?.Repository,
-        };
+    get State() {
+        return this.eacSvc.State;
     }
-    get InboundPathFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.inboundPath;
+    //  Life Cycle
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        this.destroyFormControls();
     }
-    get IncludeRequestFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.includeRequest;
+    ngOnInit() {
+        console.log("source control lookup", this.EditingSourceControlLookup);
+        if (this.EditingSourceControlLookup === null) {
+            this.CreateNewSourceControl();
+        }
+        console.log("source control", this.EditingSourceControl);
+        if (this.EditingSourceControl != null) {
+            this.DevOpsSourceControlFormGroup = this.formBuilder.group({});
+            this.setupFormControls();
+        }
+        this.RefreshOrganizations();
     }
-    get MethodsFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.methods;
+    //  API Methods
+    AddBranchOption(event) {
+        this.addBranchOption(event.value);
+        event.input.value = '';
     }
-    get PackageFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.package;
+    BranchOptionSelected(event) {
+        this.addBranchOption(event.option.value);
     }
-    get PermanentFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.permanent;
+    BranchesChanged(branches) {
+        this.loadProjectHostingDetails();
     }
-    get PreserveMethodFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.preserveMethod;
+    BuildPathChanged(event) {
+        //do something??
     }
-    get RedirectFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.redirect;
+    CreateNewSourceControl() {
+        this.SetEditingSourceControl(Guid.CreateRaw());
     }
-    get ScopesFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.scopes;
+    CreateRepository() {
+        this.CreatingRepository = true;
+        this.RepositoryFormControl.reset();
     }
-    get SecurityFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.security;
+    CancelCreateRepository() {
+        this.CreatingRepository = false;
     }
-    get State() {
-        return this.eacSvc.State;
+    DevOpsActionLookupChanged(event) {
+        this.configureDevOpsAction();
     }
-    get SourceControls() {
-        return this.Environment?.Sources || {};
+    MainBranchChanged(event) {
+        this.emitBranchesChanged();
     }
-    get SourceControlFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.sourceControl;
+    OrganizationChanged(event) {
+        const org = this.OrganizationFormControl;
+        this.RepositoryFormControl.reset();
+        if (this.UseBranches) {
+            this.BranchesFormControl.reset();
+            this.SelectedBranches = [];
+        }
+        this.listRepositories();
     }
-    get SPARootFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.spaRoot;
+    RefreshOrganizations() {
+        // this.Loading = true;
+        this.listOrganizations();
+        this.OrganizationFormControl?.reset();
+        this.RepositoryFormControl?.reset();
+        if (this.UseBranches) {
+            this.BranchesFormControl?.reset();
+        }
     }
-    get TokenLookupFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.tokenLookup;
+    RemoveBranchOption(option) {
+        const index = this.SelectedBranches.indexOf(option);
+        if (index >= 0) {
+            this.SelectedBranches.splice(index, 1);
+        }
+        this.emitBranchesChanged();
     }
-    get ValidFormControls() {
-        let vfc = new Array();
-        for (const field in this.ProcessorDetailsFormGroup.controls) {
-            const control = this.ProcessorDetailsFormGroup.get(field);
-            if (control.valid) {
-                vfc.push(control);
-            }
+    RepositoryChanged(event) {
+        const repo = this.RepositoryFormControl;
+        if (this.UseBranches) {
+            this.BranchesFormControl.reset();
+            this.SelectedBranches = [];
+            this.listBranches();
+        }
+        if (!this.UseBranches) {
+            this.listBuildPaths();
         }
-        // console.log("VFC=", vfc)
-        return vfc;
     }
-    get VersionFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.version;
+    SaveRepository() {
+        this.Loading = true;
+        const org = this.OrganizationFormControl.value;
+        const repoName = this.RepositoryFormControl.value;
+        this.appsFlowSvc
+            .CreateRepository(org, repoName)
+            .subscribe((response) => {
+            if (response.Status.Code === 0) {
+                this.listRepositories(repoName);
+                this.CreatingRepository = false;
+            }
+            else {
+                //  TODO:  Need to surface an error to the user...
+                this.Loading = false;
+            }
+        });
     }
-    get ZipFileFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.zipFile;
+    SetEditingSourceControl(scLookup) {
+        this.EditingSourceControlLookup = scLookup;
     }
-    ngOnInit() {
-        if (!this.EditingApplication) {
-            this.CreateNewApplication();
-        }
-        else {
-            this.setupProcessorDetailsForm();
-        }
+    SubmitSourceControl() {
+        console.log('source control submitted: ', this.DevOpsSourceControlFormGroup.value);
+        this.SaveSourceControl();
     }
-    CreateNewApplication() {
-        this.SetEditingApplication(Guid.CreateRaw());
+    SaveSourceControl() {
+        const saveEnvReq = {
+            Environment: {
+                ...this.Environment,
+                Sources: this.Environment.Sources || {},
+            },
+            EnvironmentLookup: this.EnvironmentLookup,
+            EnterpriseDataTokens: {},
+        };
+        let source = {
+            ...this.EditingSourceControl,
+            Branches: this.SelectedBranches,
+            MainBranch: this.MainBranchFormControl.value,
+        };
+        source = {
+            ...source,
+            Type: 'GitHub',
+            Name: `@${this.OrganizationFormControl.value}/${this.RepositoryFormControl.value}`,
+            DevOpsActionTriggerLookups: [this.DevOpsActionLookup],
+            Organization: this.OrganizationFormControl.value,
+            Repository: this.RepositoryFormControl.value,
+        };
+        const scLookup = `github://${source.Organization}/${source.Repository}`;
+        saveEnvReq.Environment.Sources[scLookup] = source;
+        console.log('save SC: ', saveEnvReq);
+        let resp = this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
+        resp.then((res) => {
+            this.SaveStatusEvent.emit(res);
+        });
     }
-    DetermineTooltipText() {
-        let permanentValue = this.PermanentFormControl.value;
-        let preserveValue = this.PreserveMethodFormControl.value;
-        if (permanentValue === true && preserveValue === false) {
-            this.redirectTooltip = '301 – Permanent and Not Preserve';
-        }
-        else if (permanentValue === false && preserveValue === false) {
-            this.redirectTooltip = '302 – Not Permanent and Not Preserve';
-        }
-        else if (permanentValue === false && preserveValue === true) {
-            this.redirectTooltip = '307 – Not Permanent and Preserve';
-        }
-        else if (permanentValue === true && preserveValue === true) {
-            this.redirectTooltip = '308 – Permanent and Preserve';
+    //  Helpers
+    addBranchOption(value) {
+        value = (value || '').trim();
+        if (value && this.SelectedBranches.indexOf(value) < 0) {
+            this.SelectedBranches.push(value);
         }
+        this.BranchesInput.nativeElement.blur();
+        this.emitBranchesChanged();
     }
-    SaveProcessorDetails() {
-        const app = this.EditingApplication;
-        app.LookupConfig.AllowedMethods = this.MethodsFormControl?.value
-            ?.split(' ')
-            .filter((v) => !!v);
-        app.Processor.Type = this.ProcessorType;
-        switch (app.Processor.Type) {
-            case 'DFS':
-                app.Processor.DefaultFile =
-                    this.DefaultFileFormControl.value || 'index.html';
-                app.LowCodeUnit = {
-                    Type: this.LCUType,
-                };
-                switch (app.LowCodeUnit.Type) {
-                    case 'GitHub':
-                        app.LowCodeUnit.Organization =
-                            this.SourceControls[this.SourceControlFormControl.value]?.Organization;
-                        app.LowCodeUnit.Repository =
-                            this.SourceControls[this.SourceControlFormControl.value]?.Repository;
-                        app.LowCodeUnit.Build = this.BuildFormControl.value;
-                        app.LowCodeUnit.Path = this.BuildPathFormControl.value;
-                        app.LowCodeUnit.SourceControlLookup =
-                            this.SourceControlFormControl.value;
-                        break;
-                    case 'NPM':
-                        app.LowCodeUnit.Package = this.PackageFormControl.value;
-                        app.LowCodeUnit.Version = this.VersionFormControl.value;
-                        break;
-                    case 'WordPress':
-                        app.LowCodeUnit.APIRoot = this.APIRootFormControl.value;
-                        break;
-                    case 'Zip':
-                        app.LowCodeUnit.ZipFile = this.ZipFileFormControl.value;
-                        break;
+    configureDevOpsAction() {
+        setTimeout(() => {
+            this.DevOpsActionLookupFormControl.setValue(this.DevOpsActionLookup);
+        }, 0);
+    }
+    destroyFormControls() {
+        this.DevOpsSourceControlFormGroup.removeControl([this.SourceControlRoot, 'mainBranch'].join(''));
+        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'branches'].join(''));
+        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'buildPath'].join(''));
+        this.SelectedBranches = [];
+        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'organization'].join(''));
+        this.DevOpsSourceControlFormGroup?.removeControl([this.SourceControlRoot, 'repository'].join(''));
+    }
+    emitBranchesChanged() {
+        if (this.SelectedBranches?.length > 0 &&
+            (!this.MainBranchFormControl.value ||
+                this.SelectedBranches.indexOf(this.MainBranchFormControl.value) < 0)) {
+            this.MainBranchFormControl.setValue(this.SelectedBranches.find((branch) => branch === 'main' || branch === 'master') || this.SelectedBranches[0]);
+        }
+        else if (this.SelectedBranches?.length <= 0) {
+            this.MainBranchFormControl.reset();
+        }
+        this.BranchesFormControl.setValue(this.SelectedBranches.join(','));
+        this.BranchesChanged(this.SelectedBranches || []);
+    }
+    listBranches() {
+        if (this.UseBranches) {
+            this.Loading = true;
+            this.appsFlowSvc
+                .ListBranches(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
+                .subscribe((response) => {
+                this.BranchOptions = response.Model;
+                this.Loading = false;
+                if (this.EditingSourceControl?.Branches?.length > 0) {
+                    this.SelectedBranches = this.EditingSourceControl.Branches;
                 }
-                break;
-            case 'OAuth':
-                app.Processor.Scopes = this.ScopesFormControl.value.split(' ');
-                app.Processor.TokenLookup = this.TokenLookupFormControl.value;
-                app.LowCodeUnit = {
-                    Type: this.LCUType,
-                };
-                switch (app.LowCodeUnit.Type) {
-                    case 'GitHubOAuth':
-                        app.LowCodeUnit.ClientID = this.ClientIDFormControl.value;
-                        app.LowCodeUnit.ClientSecret = this.ClientSecretFormControl.value;
-                        break;
+                else if (this.BranchOptions?.length === 1) {
+                    this.BranchesFormControl.setValue(this.BranchOptions[0].Name);
+                    this.SelectedBranches = [this.BranchOptions[0].Name];
                 }
-                break;
-            case 'Proxy':
-                app.Processor.InboundPath = this.InboundPathFormControl.value;
-                app.LowCodeUnit = {
-                    Type: this.LCUType,
-                };
-                switch (app.LowCodeUnit.Type) {
-                    case 'API':
-                        app.LowCodeUnit.APIRoot = this.APIRootFormControl.value;
-                        app.LowCodeUnit.Security = this.SecurityFormControl.value;
-                        break;
-                    case 'SPA':
-                        app.LowCodeUnit.SPARoot = this.SPARootFormControl.value;
-                        break;
+                this.emitBranchesChanged();
+                this.listBuildPaths();
+            });
+        }
+    }
+    listBuildPaths() {
+        if (this.UseBuildPath) {
+            this.Loading = true;
+            this.appsFlowSvc
+                .ListBuildPaths(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
+                .subscribe((response) => {
+                this.BuildPathOptions = response.Model;
+                this.Loading = false;
+                if (this.BuildPathOptions?.length === 1) {
+                    this.BuildPathFormControl.setValue(this.BuildPathOptions[0]);
                 }
-                break;
-            case 'Redirect':
-                app.Processor.IncludeRequest = !!this.IncludeRequestFormControl.value;
-                app.Processor.Permanent = !!this.PermanentFormControl.value;
-                app.Processor.PreserveMethod = !!this.PreserveMethodFormControl.value;
-                app.Processor.Redirect = this.RedirectFormControl.value;
-                break;
+            });
+        }
+    }
+    listOrganizations() {
+        this.Loading = true;
+        this.appsFlowSvc
+            .ListOrganizations()
+            .subscribe((response) => {
+            this.OrganizationOptions = response.Model;
+            console.log("Organization Options: ", this.OrganizationOptions);
+            this.Loading = false;
+            if (this.EditingSourceControl?.Organization) {
+                setTimeout(() => {
+                    this.OrganizationFormControl.setValue(this.EditingSourceControl.Organization);
+                    this.listRepositories(this.EditingSourceControl?.Repository);
+                }, 0);
+            }
+        });
+    }
+    listRepositories(activeRepo = null) {
+        this.Loading = true;
+        this.appsFlowSvc
+            .ListRepositories(this.OrganizationFormControl.value)
+            .subscribe((response) => {
+            this.RepositoryOptions = response.Model;
+            this.Loading = false;
+            if (activeRepo) {
+                setTimeout(() => {
+                    this.RepositoryFormControl.setValue(activeRepo);
+                    this.listBranches();
+                    if (!this.UseBranches) {
+                        this.listBuildPaths();
+                    }
+                }, 0);
+            }
+            else if (this.RepositoryOptions?.length <= 0) {
+                this.CreatingRepository = true;
+            }
+        });
+    }
+    loadProjectHostingDetails() {
+        if (this.SelectedBranches?.length > 0) {
+            this.HostingDetails.Loading = true;
+            this.appsFlowSvc
+                .LoadProjectHostingDetails()
+                .subscribe((response) => {
+                this.HostingDetails = response.Model;
+                this.HostingDetails.Loading = false;
+                this.configureDevOpsAction();
+            }, (err) => {
+                this.HostingDetails.Loading = false;
+            });
+        }
+    }
+    setupFormControls() {
+        this.destroyFormControls();
+        console.log("Source Control: ", this.EditingSourceControl);
+        this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new FormControl(this.DevOpsActionLookup || '', []));
+        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new FormControl(this.EditingSourceControl.Organization ?? '', Validators.required));
+        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new FormControl(this.EditingSourceControl.Repository ?? '', Validators.required));
+        if (this.UseBranches) {
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'branches'].join(''), new FormControl(this.EditingSourceControl?.Branches ?? '', Validators.required));
+            this.SelectedBranches = this.EditingSourceControl?.Branches;
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'mainBranch'].join(''), new FormControl(this.EditingSourceControl.MainBranch ?? '', Validators.required));
+        }
+        if (this.UseBuildPath) {
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'buildPath'].join(''), new FormControl(this.BuildPath ?? '', Validators.required));
+        }
+    }
+}
+DevopsSourceControlFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, deps: [{ token: ApplicationsFlowService }, { token: EaCService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DevopsSourceControlFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: { EditingSourceControlLookup: ["editing-source-control-lookup", "EditingSourceControlLookup"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"] }, outputs: { SaveStatusEvent: "save-status-event" }, viewQueries: [{ propertyName: "BranchesInput", first: true, predicate: ["branches"], descendants: true }], ngImport: i0, template: "<form \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\n\n  <!-- <mat-card class=\"spread\" class=\"sc-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header> -->\n\n    <!-- <mat-card-content> -->\n\n      <ng-container *ngIf=\"State?.Loading\">\n        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n\n        <!-- <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block> -->\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select \n              formControlName=\"devOpsActionLookup\" \n              placeholder=\"DevOps Action\"\n              [disabled]=\"HostingDetails?.Loading\" \n              (selectionChange)=\"DevOpsActionLookupChanged($event)\"\n            >\n              <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                  {{ devOpsAction.Name }}\n                </mat-option>\n              </ng-container>\n\n              <mat-option value=\"\">-- Create New --</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n          <mat-form-field \n            class=\"mat-full-width with-hint margin-bottom\" \n            *ngIf=\"OrganizationOptions?.length > 0\"\n          >\n            <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n            <mat-select \n              [formControlName]=\"SourceControlRoot + 'organization'\" \n              placeholder=\"Organization\"\n              (selectionChange)=\"OrganizationChanged($event)\" \n              [disabled]=\"Loading || HostingDetails?.Loading\" \n              required\n            >\n              <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n                <mat-option [value]=\"orgOpt.Name\">\n                  {{ orgOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" class=\"primary-link\" target=\"_blank\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  RepositoryFormControl?.valid ||\n                  (OrganizationFormControl?.valid && !Loading)\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                      OrganizationFormControl?.valid\n                        ? 'Repository'\n                        : 'Repository (select organization first)'\n                    \" [disabled]=\"\n                      !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                    \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n              <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n                <mat-option [value]=\"repoOpt.Name\">\n                  {{ repoOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <input matInput placeholder=\"Repository (creates new if does not exist)\"\n              [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n              [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n            <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n              *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n              add_circle\n            </mat-icon>\n\n            <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n              *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n              <mat-icon matSuffix color=\"primary\">\n                save\n              </mat-icon>\n            </button>\n\n            <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n              <mat-icon matSuffix>\n                cancel\n              </mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BranchesFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBranches\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-label>Selected Branches</mat-label>\n\n            <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n              <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n                <mat-option [value]=\"branchOpt.Name\">\n                  {{ branchOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-autocomplete>\n\n            <mat-chip-list #selectedBranches>\n              <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n                *ngFor=\"let selBranch of SelectedBranches\">\n                {{ selBranch }}\n                <mat-icon matChipRemove>cancel</mat-icon>\n              </mat-chip>\n\n              <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n                [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n                [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n                (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n                required />\n            </mat-chip-list>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n              [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n              <ng-container *ngFor=\"let branch of SelectedBranches\">\n                <mat-option [value]=\"branch\">\n                  {{ branch }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" target=\"_blank\"class=\"primary-link\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BuildPathFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBuildPath\n                \">\n          <mat-form-field class=\"mat-full-width with-hint\">\n            <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n              [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n              <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                <mat-option [value]=\"buildPath\">\n                  {{ buildPath }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-hint>\n              The build path identifies which build action to use for your\n              configuration.\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div *ngIf=\"Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n                Loading organizations\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                      \">\n                Loading repositories\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n                Loading branches\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                        !BuildPathFormControl?.valid\n                      \">\n                Loading build paths\n              </h4>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- </div> -->\n\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n      <!-- <button \n        mat-raised-button \n        *ngIf=\"!State?.Loading\"\n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader> -->\n      \n  <!-- </mat-card-actions> -->\n  <!-- </mat-card> -->\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}.primary-link{color:#4a918e;text-decoration:none}.s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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"] }, { type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatPrefix, selector: "[matPrefix]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.MatLabel, selector: "mat-label" }, { type: i9$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-devops-source-control-form', template: "<form \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\n\n  <!-- <mat-card class=\"spread\" class=\"sc-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header> -->\n\n    <!-- <mat-card-content> -->\n\n      <ng-container *ngIf=\"State?.Loading\">\n        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n\n        <!-- <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          [effect]=\"SkeletonEffect\"  \n        ></skeleton-block> -->\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select \n              formControlName=\"devOpsActionLookup\" \n              placeholder=\"DevOps Action\"\n              [disabled]=\"HostingDetails?.Loading\" \n              (selectionChange)=\"DevOpsActionLookupChanged($event)\"\n            >\n              <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                  {{ devOpsAction.Name }}\n                </mat-option>\n              </ng-container>\n\n              <mat-option value=\"\">-- Create New --</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n          <mat-form-field \n            class=\"mat-full-width with-hint margin-bottom\" \n            *ngIf=\"OrganizationOptions?.length > 0\"\n          >\n            <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n            <mat-select \n              [formControlName]=\"SourceControlRoot + 'organization'\" \n              placeholder=\"Organization\"\n              (selectionChange)=\"OrganizationChanged($event)\" \n              [disabled]=\"Loading || HostingDetails?.Loading\" \n              required\n            >\n              <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n                <mat-option [value]=\"orgOpt.Name\">\n                  {{ orgOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" class=\"primary-link\" target=\"_blank\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  RepositoryFormControl?.valid ||\n                  (OrganizationFormControl?.valid && !Loading)\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                      OrganizationFormControl?.valid\n                        ? 'Repository'\n                        : 'Repository (select organization first)'\n                    \" [disabled]=\"\n                      !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                    \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n              <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n                <mat-option [value]=\"repoOpt.Name\">\n                  {{ repoOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <input matInput placeholder=\"Repository (creates new if does not exist)\"\n              [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n              [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n            <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n              *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n              add_circle\n            </mat-icon>\n\n            <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n              *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n              <mat-icon matSuffix color=\"primary\">\n                save\n              </mat-icon>\n            </button>\n\n            <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n              <mat-icon matSuffix>\n                cancel\n              </mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BranchesFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBranches\n                \">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-label>Selected Branches</mat-label>\n\n            <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n              <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n                <mat-option [value]=\"branchOpt.Name\">\n                  {{ branchOpt.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-autocomplete>\n\n            <mat-chip-list #selectedBranches>\n              <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n                *ngFor=\"let selBranch of SelectedBranches\">\n                {{ selBranch }}\n                <mat-icon matChipRemove>cancel</mat-icon>\n              </mat-chip>\n\n              <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n                [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n                [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n                (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n                required />\n            </mat-chip-list>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n            <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n              [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n              <ng-container *ngFor=\"let branch of SelectedBranches\">\n                <mat-option [value]=\"branch\">\n                  {{ branch }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-icon matSuffix (click)=\"RefreshOrganizations()\" color=\"accent\"> refresh </mat-icon>\n\n            <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n              <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n            </a>\n\n            <mat-hint>\n              If you don't have an organization or would like to create a new one,\n              <a href=\"https://github.com/account/organizations/new\" target=\"_blank\"class=\"primary-link\">\n                start here\n              </a>\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"card\" *ngIf=\"\n                  (BuildPathFormControl?.valid ||\n                    (OrganizationFormControl?.valid &&\n                      RepositoryFormControl?.valid &&\n                      !Loading)) &&\n                  !CreatingRepository &&\n                  UseBuildPath\n                \">\n          <mat-form-field class=\"mat-full-width with-hint\">\n            <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n            <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n              [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n              <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                <mat-option [value]=\"buildPath\">\n                  {{ buildPath }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n\n            <mat-hint>\n              The build path identifies which build action to use for your\n              configuration.\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div *ngIf=\"Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n                Loading organizations\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                      \">\n                Loading repositories\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n                Loading branches\n              </h4>\n\n              <h4 class=\"mat-title\" *ngIf=\"\n                        (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                        !BuildPathFormControl?.valid\n                      \">\n                Loading build paths\n              </h4>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- </div> -->\n\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n      <!-- <button \n        mat-raised-button \n        *ngIf=\"!State?.Loading\"\n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader> -->\n      \n  <!-- </mat-card-actions> -->\n  <!-- </mat-card> -->\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}.primary-link{color:#4a918e;text-decoration:none}.s-block{margin:10px 0;width:100%;height:40px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$2.FormBuilder }]; }, propDecorators: { EditingSourceControlLookup: [{
+                type: Input,
+                args: ['editing-source-control-lookup']
+            }], Environment: [{
+                type: Input,
+                args: ['environment']
+            }], EnvironmentLookup: [{
+                type: Input,
+                args: ['environment-lookup']
+            }], SaveStatusEvent: [{
+                type: Output,
+                args: ['save-status-event']
+            }], BranchesInput: [{
+                type: ViewChild,
+                args: ['branches']
+            }] } });
+
+class SourceControlDialogComponent {
+    constructor(dialogRef, eacSvc, data, snackBar) {
+        this.dialogRef = dialogRef;
+        this.eacSvc = eacSvc;
+        this.data = data;
+        this.snackBar = snackBar;
+    }
+    get DevOpsSourceControlFormGroup() {
+        return this.DevopsSourceControl?.DevOpsSourceControlFormGroup;
+    }
+    get HasConnection() {
+        return this.State.GitHub.HasConnection;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    ngOnInit() {
+    }
+    CloseDialog() {
+        this.dialogRef.close();
+    }
+    HandleSaveStatusEvent(event) {
+        console.log("event to save: ", event);
+        if (event.Code === 0) {
+            this.snackBar.open("Source Control Succesfully Saved", "Dismiss", {
+                duration: 5000
+            });
+            this.CloseDialog();
+        }
+        else {
+            this.ErrorMessage = event.Message;
+        }
+    }
+    SaveSourceControl() {
+        this.DevopsSourceControl.SaveSourceControl();
+    }
+}
+SourceControlDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, deps: [{ token: i2$2.MatDialogRef }, { token: EaCService }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+SourceControlDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SourceControlDialogComponent, selector: "lcu-source-control-dialog", viewQueries: [{ propertyName: "DevopsSourceControl", first: true, predicate: DevopsSourceControlFormComponent, descendants: true }], ngImport: i0, template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n        <h2 mat-dialog-title>Source Control</h2>\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<mat-dialog-content>\n\n        <ng-container *ngIf=\"!HasConnection\">\n                \n                <lcu-git-auth></lcu-git-auth>\n\n        </ng-container>\n\n        <ng-conatiner *ngIf=\"HasConnection\" fxLayout=\"column\">\n\n                <div fxLayoutAlign=\"center center\">\n                        <lcu-devops-source-control-form\n                                [environment]=\"data.environment\"\n                                [environment-lookup]=\"data.environmentLookup\"\n                                [editing-source-control-lookup]=\"data.scLookup\"\n                                (save-status-event)=\"HandleSaveStatusEvent($event)\">\n                        </lcu-devops-source-control-form>\n                </div>\n                \n                <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n                        {{ ErrorMessage }}\n                </mat-error>\n\n        </ng-conatiner>\n\n</mat-dialog-content>\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n        class=\"action-button\"\n        mat-raised-button \n        *ngIf=\"!State?.Loading\" \n        fxFlex=\"25%\" \n        color=\"primary\" \n        (click)=\"SaveSourceControl()\"\n        [disabled]=\"!DevOpsSourceControlFormGroup?.valid || !DevOpsSourceControlFormGroup?.dirty\">\n        <!-- <mat-icon>save</mat-icon> -->\n        Save\n      </button>\n\n</mat-dialog-actions>\n\n\n\n", styles: [".dialog-header{width:100%}.action-button{margin:0 10px}\n"], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GitAuthComponent, selector: "lcu-git-auth" }, { type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: ["editing-source-control-lookup", "environment", "environment-lookup"], outputs: ["save-status-event"] }], directives: [{ type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-source-control-dialog', template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n        <h2 mat-dialog-title>Source Control</h2>\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<mat-dialog-content>\n\n        <ng-container *ngIf=\"!HasConnection\">\n                \n                <lcu-git-auth></lcu-git-auth>\n\n        </ng-container>\n\n        <ng-conatiner *ngIf=\"HasConnection\" fxLayout=\"column\">\n\n                <div fxLayoutAlign=\"center center\">\n                        <lcu-devops-source-control-form\n                                [environment]=\"data.environment\"\n                                [environment-lookup]=\"data.environmentLookup\"\n                                [editing-source-control-lookup]=\"data.scLookup\"\n                                (save-status-event)=\"HandleSaveStatusEvent($event)\">\n                        </lcu-devops-source-control-form>\n                </div>\n                \n                <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n                        {{ ErrorMessage }}\n                </mat-error>\n\n        </ng-conatiner>\n\n</mat-dialog-content>\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n        class=\"action-button\"\n        mat-raised-button \n        *ngIf=\"!State?.Loading\" \n        fxFlex=\"25%\" \n        color=\"primary\" \n        (click)=\"SaveSourceControl()\"\n        [disabled]=\"!DevOpsSourceControlFormGroup?.valid || !DevOpsSourceControlFormGroup?.dirty\">\n        <!-- <mat-icon>save</mat-icon> -->\n        Save\n      </button>\n\n</mat-dialog-actions>\n\n\n\n", styles: [".dialog-header{width:100%}.action-button{margin:0 10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$2.MatDialogRef }, { type: EaCService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { DevopsSourceControl: [{
+                type: ViewChild,
+                args: [DevopsSourceControlFormComponent]
+            }] } });
+
+class MainFeedCardComponent {
+    constructor(eacSvc, dialog, sanitizer) {
+        this.eacSvc = eacSvc;
+        this.dialog = dialog;
+        this.sanitizer = sanitizer;
+    }
+    get ActiveEnvironment() {
+        return this.State?.EaC?.Environments[this.ActiveEnvironmentLookup];
+    }
+    get ActiveEnvironmentLookup() {
+        //  TODO:  Eventually support multiple environments
+        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
+        return envLookups[0];
+    }
+    get Environment() {
+        // console.log("Ent Environment var: ", this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment]);
+        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
+    }
+    get Icon() {
+        if (this.FeedItem.Status.Code === 0) {
+            return 'check_circle';
+        }
+        else if (this.FeedItem.Status.Code === 1) {
+            return 'cancel';
+        }
+        else if (this.FeedItem.Status.Code === 2) {
+            return 'sync';
+        }
+        else {
+            return 'help_outline';
+        }
+    }
+    get IconColor() {
+        if (this.FeedItem.Status.Code === 0) {
+            return 'green';
+        }
+        else if (this.FeedItem.Status.Code === 1) {
+            return 'red';
         }
-        if (!app.LookupConfig.PathRegex.startsWith('/')) {
-            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
+        else if (this.FeedItem.Status.Code === 2) {
+            return 'blue';
+        }
+        else {
+            return 'gray';
         }
-        const saveAppReq = {
-            ProjectLookup: this.ProjectLookup,
-            Application: app,
-            ApplicationLookup: this.EditingApplicationLookup || Guid.CreateRaw(),
-        };
-        this.eacSvc.SaveApplicationAsCode(saveAppReq).then((res) => {
-            this.SaveFormEvent.emit(res);
-        });
-    }
-    SetEditingApplication(appLookup) {
-        this.EditingApplication = new EaCApplicationAsCode();
-        this.EditingApplicationLookup = appLookup;
-        this.setupProcessorDetailsForm();
-    }
-    SourceControlChanged(event) {
-        this.listBuildPaths();
     }
-    ProcessorTypeChanged(event) {
-        this.ProcessorType = event.value;
-        this.setupProcessorTypeSubForm();
+    get State() {
+        return this.eacSvc.State;
     }
-    LCUTypeChanged(event) {
-        this.LCUType = event.value;
-        this.setupLcuTypeSubForm();
+    //  Life Cycle
+    ngOnInit() {
+        this.handleRefresh();
     }
-    //HELPERS
-    cleanupLcuTypeSubForm() {
-        this.ProcessorDetailsFormGroup.removeControl('methods');
-        this.ProcessorDetailsFormGroup.removeControl('apiRoot');
-        this.ProcessorDetailsFormGroup.removeControl('security');
-        this.ProcessorDetailsFormGroup.removeControl('spaRoot');
-        this.ProcessorDetailsFormGroup.removeControl('applicationId');
-        this.ProcessorDetailsFormGroup.removeControl('sourceControl');
-        this.ProcessorDetailsFormGroup.removeControl('build');
-        this.ProcessorDetailsFormGroup.removeControl('clientId');
-        this.ProcessorDetailsFormGroup.removeControl('clientSecret');
-        this.ProcessorDetailsFormGroup.removeControl('package');
-        this.ProcessorDetailsFormGroup.removeControl('version');
-        this.ProcessorDetailsFormGroup.removeControl('zipFile');
+    //  API Methods
+    CalculateTimelapse(timestamp) {
+        return moment(timestamp).fromNow();
     }
-    cleanupProcessorTypeSubForm() {
-        this.ProcessorDetailsFormGroup.removeControl('defaultFile');
-        // this.ApplicationFormGroup.removeControl('dfsLcuType');
-        // this.ApplicationFormGroup.removeControl('oauthLcuType');
-        this.ProcessorDetailsFormGroup.removeControl('scopes');
-        this.ProcessorDetailsFormGroup.removeControl('tokenLookup');
-        this.ProcessorDetailsFormGroup.removeControl('inboundPath');
-        this.ProcessorDetailsFormGroup.removeControl('proxyLcuType');
-        this.ProcessorDetailsFormGroup.removeControl('includeRequest');
-        this.ProcessorDetailsFormGroup.removeControl('redirect');
-        this.ProcessorDetailsFormGroup.removeControl('permanent');
-        this.ProcessorDetailsFormGroup.removeControl('preserveMethod');
-        this.cleanupLcuTypeSubForm();
+    HandleAction(action) {
+        if (action.ActionType == 'Link') {
+            if (action.Action.startsWith('http')) {
+                window.open(action.Action, '_blank');
+            }
+            else {
+                window.location.href = action.Action;
+            }
+        }
+        else if (action.ActionType == 'Modal') {
+            if (action.Action == 'AddSourceControl') {
+                this.OpenSourceControlDialog(null);
+            }
+            else {
+                alert('other modaled ' + action.Action);
+            }
+        }
     }
-    listBuildPaths() {
-        this.State.Loading = true;
-        console.log("Source Control: ", this.SourceControls[this.SourceControlFormControl.value]);
-        this.appsFlowSvc
-            .ListBuildPaths(this.SourceControls[this.SourceControlFormControl.value]?.Organization, this.SourceControls[this.SourceControlFormControl.value]?.Repository)
-            .subscribe((response) => {
-            this.BuildPathOptions = response.Model;
-            console.log("build path options: ", this.BuildPathOptions);
-            this.State.Loading = false;
-            // if (this.BuildPathOptions?.length === 1) {
-            //   this.BuildPathFormControl.setValue(this.BuildPathOptions[0]);
-            // }
+    OpenSourceControlDialog(scLookup) {
+        const dialogRef = this.dialog.open(SourceControlDialogComponent, {
+            width: '550px',
+            data: {
+                environment: this.Environment,
+                environmentLookup: this.ActiveEnvironmentLookup,
+                scLookup: scLookup,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            // console.log('The dialog was closed');
+            // console.log("result:", result)
         });
     }
-    setupLcuTypeSubForm() {
-        this.cleanupLcuTypeSubForm();
-        if (this.LCUType) {
-            switch (this.LCUType) {
-                case 'API':
-                    this.setupLCUAPIForm();
-                    break;
-                case 'ApplicationPointer':
-                    this.setupLCUApplicationPointerForm();
-                    break;
-                case 'GitHub':
-                    this.setupLCUGitHubForm();
-                    break;
-                case 'GitHubOAuth':
-                    this.setupLCUGitHubOAuthForm();
-                    break;
-                case 'WordPress':
-                    this.setupLCUWordPressForm();
-                    break;
-                // case 'NPM':
-                //   this.setupLCUNPMForm();
-                //   break;
-                case 'SPA':
-                    this.setupLCUSPAForm();
-                    break;
-                case 'Zip':
-                    this.setupLCUZipForm();
-                    break;
-            }
+    SafeHtml(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    //  Helpers
+    handleRefresh() {
+        if (this.FeedItem?.RefreshLink) {
+            setTimeout(() => {
+                this.eacSvc.CheckUserFeedItem(this.FeedItem).subscribe(async (response) => {
+                    if (response.Status.Code === 0) {
+                        this.FeedItem = response.Model;
+                        this.handleRefresh();
+                    }
+                    else {
+                        console.log(response);
+                    }
+                }, (err) => {
+                    console.log(err);
+                });
+            }, 5000);
         }
     }
-    setupProcessorDetailsForm() {
-        this.ProcessorType = this.EditingApplication?.Processor?.Type || '';
-        // console.log('EDITING APP = ', this.EditingApplication);
-        if (this.EditingApplication != null) {
-            this.ProcessorDetailsFormGroup = this.formBldr.group({
-                procType: [this.ProcessorType, [Validators.required]],
-            });
-            // this.setupDfsForm();
-            // this.setupLcuTypeSubForm();
-            this.setupProcessorTypeSubForm();
+}
+MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }, { token: i2$2.MatDialog }, { token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+MainFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainFeedCardComponent, selector: "lcu-main-feed-card", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <div *ngIf=\"FeedItem.Subtext\">{{ FeedItem.Subtext }}</div>\n\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <div class=\"feed-card-container\">\n      <div class=\"feed-card-main-content\">\n        <mat-tab-group>\n          <ng-container *ngFor=\"let tab of FeedItem.Tabs\">\n            <mat-tab [label]=\"tab.Title\">\n              <div class=\"tab\">\n                <ng-container *ngIf=\"tab.Data?.Commit?.Message\">\n                  <div class=\"commit-message\">\n                    {{ tab.Data?.Commit?.Message }}\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"tab.Data?.Video\">\n                  <div\n                    class=\"video\"\n                    [innerHTML]=\"SafeHtml(tab.Data.Video)\"\n                  ></div>\n                </ng-container>\n              </div>\n            </mat-tab>\n          </ng-container>\n        </mat-tab-group>\n      </div>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}:host .tab{margin:2em}:host .tab .video iframe{display:block;margin:auto}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i4.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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-main-feed-card', template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <div *ngIf=\"FeedItem.Subtext\">{{ FeedItem.Subtext }}</div>\n\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <div class=\"feed-card-container\">\n      <div class=\"feed-card-main-content\">\n        <mat-tab-group>\n          <ng-container *ngFor=\"let tab of FeedItem.Tabs\">\n            <mat-tab [label]=\"tab.Title\">\n              <div class=\"tab\">\n                <ng-container *ngIf=\"tab.Data?.Commit?.Message\">\n                  <div class=\"commit-message\">\n                    {{ tab.Data?.Commit?.Message }}\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"tab.Data?.Video\">\n                  <div\n                    class=\"video\"\n                    [innerHTML]=\"SafeHtml(tab.Data.Video)\"\n                  ></div>\n                </ng-container>\n              </div>\n            </mat-tab>\n          </ng-container>\n        </mat-tab-group>\n      </div>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}:host .tab{margin:2em}:host .tab .video iframe{display:block;margin:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i2$2.MatDialog }, { type: i3$2.DomSanitizer }]; }, propDecorators: { FeedItem: [{
+                type: Input,
+                args: ['feed-item']
+            }] } });
+
+class TwoColumnHeaderComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+TwoColumnHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TwoColumnHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TwoColumnHeaderComponent, selector: "lcu-two-column-header", ngImport: i0, template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-two-column-header', template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class CardCarouselComponent {
+    constructor() {
+        this.carouselIndex = 0;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.assignCarouselClass();
+    }
+    LeftChevronClicked() {
+        this.removeCarouselClasses();
+        if (this.carouselIndex === 0) {
+            this.carouselIndex = this.Stats.length - 1;
+        }
+        else {
+            this.carouselIndex--;
         }
+        this.assignCarouselClass();
     }
-    setupLCUGitHubForm() {
-        console.log('EditingApplication: ', this.EditingApplication);
-        this.ProcessorDetailsFormGroup.addControl('sourceControl', this.formBldr.control(this.EditingApplication.LowCodeUnit?.SourceControlLookup || '', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('buildPath', this.formBldr.control(this.EditingApplication.LowCodeUnit?.Path || '', [
-            Validators.required,
-        ]));
-        this.ProcessorDetailsFormGroup.addControl('build', this.formBldr.control(this.EditingApplication.LowCodeUnit?.Build || 'latest', [Validators.required]));
-        this.listBuildPaths();
+    MoreDetailsClicked() {
+        console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
     }
-    setupLCUApplicationPointerForm() {
-        this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ApplicationID || '', [Validators.required]));
+    RightChevronClicked() {
+        this.removeCarouselClasses();
+        if (this.carouselIndex === this.Stats.length - 1) {
+            this.carouselIndex = 0;
+        }
+        else {
+            this.carouselIndex++;
+        }
+        this.assignCarouselClass();
     }
-    setupLCUSPAForm() {
-        this.ProcessorDetailsFormGroup.addControl('spaRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.SPARoot || '', [Validators.required]));
+    //HELPERS
+    removeCarouselClasses() {
+        for (let i = 0; i < this.Stats.length; i++) {
+            if (i === this.carouselIndex) {
+                document.getElementById("carousel-" + this.carouselIndex).classList.remove('active');
+            }
+            else {
+                document.getElementById("carousel-" + i).classList.remove('hidden');
+            }
+        }
     }
-    setupLCUAPIForm() {
-        this.ProcessorDetailsFormGroup.addControl('methods', this.formBldr.control(this.EditingApplication.LookupConfig?.AllowedMethods?.join(' ') || '', []));
-        this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.APIRoot || '', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('security', this.formBldr.control(this.EditingApplication.LowCodeUnit?.Security || '', [Validators.required]));
+    assignCarouselClass() {
+        for (let i = 0; i < this.Stats.length; i++) {
+            if (i === this.carouselIndex) {
+                document.getElementById("carousel-" + this.carouselIndex).classList.add('active');
+            }
+            else {
+                document.getElementById("carousel-" + i).classList.add('hidden');
+            }
+        }
     }
-    setupLCUGitHubOAuthForm() {
-        this.ProcessorDetailsFormGroup.addControl('clientId', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ClientID || '', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('clientSecret', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ClientSecret || '', [Validators.required]));
+}
+CardCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CardCarouselComponent, selector: "lcu-card-carousel", inputs: { Stats: ["stats", "Stats"] }, ngImport: i0, template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-card-carousel', template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { Stats: [{
+                type: Input,
+                args: ['stats']
+            }] } });
+
+class SecurityToggleComponent {
+    constructor(eacSvc, formBldr) {
+        this.eacSvc = eacSvc;
+        this.formBldr = formBldr;
+        this.SaveFormEvent = new EventEmitter;
+        this.SkeletonEffect = 'wave';
     }
-    setupLCUWordPressForm() {
-        this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.APIRoot || '', [Validators.required]));
+    get IsPrivateFormControl() {
+        return this.SecurityFormGroup?.controls.isPrivate;
     }
-    setupProxyForm() {
-        this.LCUType = this.EditingApplication.LowCodeUnit?.Type || '';
-        this.ProcessorDetailsFormGroup.addControl('inboundPath', this.formBldr.control(this.EditingApplication.Processor?.InboundPath || '', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [Validators.required]));
+    get IsTriggerSignInFormControl() {
+        return this.SecurityFormGroup?.controls.isTriggerSignIn;
     }
-    setupRedirectForm() {
-        this.ProcessorDetailsFormGroup.addControl('redirect', this.formBldr.control(this.EditingApplication.Processor?.Redirect || '', [
-            Validators.required,
-        ]));
-        this.ProcessorDetailsFormGroup.addControl('permanent', this.formBldr.control(this.EditingApplication.Processor?.Permanent || false, []));
-        this.ProcessorDetailsFormGroup.addControl('preserveMethod', this.formBldr.control(this.EditingApplication.Processor?.PreserveMethod || false, []));
-        this.ProcessorDetailsFormGroup.addControl('includeRequest', this.formBldr.control(this.EditingApplication.Processor?.IncludeRequest || false, []));
-        this.DetermineTooltipText();
+    get State() {
+        return this.eacSvc.State;
     }
-    setupOAuthForm() {
-        this.LCUType = this.EditingApplication.LowCodeUnit?.Type || '';
-        this.ProcessorDetailsFormGroup.addControl('scopes', this.formBldr.control(this.EditingApplication.Processor?.Scopes?.Join(' ') || '', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('tokenLookup', this.formBldr.control(this.EditingApplication.Processor?.TokenLookup || '', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [Validators.required]));
+    ngOnInit() {
+        this.setupSecurityFormGroup();
     }
-    setupLCUZipForm() {
-        this.ProcessorDetailsFormGroup.addControl('zipFile', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ZipFile || '', [Validators.required]));
+    SecuritySubmit() {
+        //save the security settings
+        console.log("submitting security values: ", this.SecurityFormGroup.value);
+        this.SaveFormEvent.emit(this.SecurityFormGroup.value);
     }
-    setupDfsForm() {
-        this.LCUType = this.EditingApplication.LowCodeUnit?.Type || '';
-        this.ProcessorDetailsFormGroup.addControl('defaultFile', this.formBldr.control(this.EditingApplication.Processor?.DefaultFile || 'index.html', [Validators.required]));
-        this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [Validators.required]));
+    setupSecurityFormGroup() {
+        this.ProcessorType = this.EditingApplication?.Processor?.Type || '';
+        this.SecurityFormGroup = this.formBldr.group({});
+        this.setupSecurityForm();
     }
-    setupProcessorTypeSubForm() {
-        this.cleanupProcessorTypeSubForm();
-        if (this.ProcessorType) {
-            switch (this.ProcessorType) {
-                case 'DFS':
-                    this.setupDfsForm();
-                    break;
-                case 'OAuth':
-                    this.setupOAuthForm();
-                    break;
-                case 'Proxy':
-                    this.setupProxyForm();
-                    break;
-                case 'Redirect':
-                    this.setupRedirectForm();
-                    break;
-            }
-        }
-        this.setupLcuTypeSubForm();
+    setupSecurityForm() {
+        this.SecurityFormGroup.addControl('isPrivate', this.formBldr.control(this.EditingApplication.LookupConfig?.IsPrivate || false, [Validators.required]));
+        this.SecurityFormGroup.addControl('isTriggerSignIn', this.formBldr.control(this.EditingApplication.LookupConfig?.IsTriggerSignIn || false, [Validators.required]));
     }
 }
-ProcessorDetailsFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProcessorDetailsFormComponent, deps: [{ token: ApplicationsFlowService }, { token: i1$2.FormBuilder }, { token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-ProcessorDetailsFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ProcessorDetailsFormComponent, selector: "lcu-processor-details-form", inputs: { EditingApplication: ["editing-application", "EditingApplication"], EditingApplicationLookup: ["editing-application-lookup", "EditingApplicationLookup"], HasSaveButton: ["has-save-button", "HasSaveButton"], SourceControlLookups: ["source-control-lookups", "SourceControlLookups"], ProjectLookup: ["project-lookup", "ProjectLookup"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SaveProcessorDetails()\">\n<!-- <mat-card class=\"spread flow-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header> -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n\n      <ng-container *ngFor=\"let fc of ValidFormControls\">\n\n        <skeleton-block  \n        [id]=\"fc\"\n        class=\"s-block\" \n        effect=\"wave\"\n        ></skeleton-block>\n        \n      </ng-container>\n\n      <lcu-loader *ngIf=\"LCUType === 'Redirect'\" [loading]=\"State?.Loading\"></lcu-loader>\n\n    </ng-container>\n    <!-- END SKELETON -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n\n    <!-- <mat-card-content> -->\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <mat-option value=\"WordPress\">WordPress</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <!-- <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls> -->\n\n              <mat-form-field class=\"mat-full-width\">\n                <mat-select\n                  placeholder=\"Source Control\"\n                  formControlName=\"sourceControl\"\n                  (selectionChange)=\"SourceControlChanged($event)\"\n                  required\n                >\n                  <mat-option \n                    *ngFor=\"let scLookup of SourceControlLookups\" \n                    [value]=\"scLookup\">\n                     {{scLookup}}\n                  </mat-option>\n                  \n    \n                  <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width with-hint\"\n                *ngIf=\"\n                SourceControlFormControl?.valid\n                \"\n              >          \n                <mat-select\n                  formControlName=\"buildPath\"\n                  placeholder=\"Build Path\"\n                  required\n                >\n                  <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                    <mat-option [value]=\"buildPath\">\n                      {{ buildPath }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-hint>\n                  The build path identifies which build action to use for your\n                  configuration.\n                </mat-hint>\n              </mat-form-field>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n\n            <div *ngSwitchCase=\"'WordPress'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            \n          </div>\n          \n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"includeRequest\">\n              Include Path and Query?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Should the redirect include the path and query?\"\n            >\n              info_outline\n            </mat-icon>\n          </div>\n        </div>\n      </div>\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ProcessorDetailsFormGroup.valid || !ProcessorDetailsFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Processor Details\n        </button> -->\n        <!-- <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader> -->\n\n    <!-- </mat-card-actions> -->\n\n  </ng-container>\n  \n<!-- </mat-card> -->\n</form>\n  \n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: NpmPackageSelectComponent, selector: "lcu-npm-package-select", inputs: ["npm-package", "npm-package-version", "form-group"] }, { type: i12$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProcessorDetailsFormComponent, decorators: [{
+SecurityToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SecurityToggleComponent, deps: [{ token: EaCService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+SecurityToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SecurityToggleComponent, selector: "lcu-security-toggle", inputs: { EditingApplication: ["editing-application", "EditingApplication"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i12$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i4.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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SecurityToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-processor-details-form', template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SaveProcessorDetails()\">\n<!-- <mat-card class=\"spread flow-card\"> -->\n    <!-- <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header> -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n\n      <ng-container *ngFor=\"let fc of ValidFormControls\">\n\n        <skeleton-block  \n        [id]=\"fc\"\n        class=\"s-block\" \n        effect=\"wave\"\n        ></skeleton-block>\n        \n      </ng-container>\n\n      <lcu-loader *ngIf=\"LCUType === 'Redirect'\" [loading]=\"State?.Loading\"></lcu-loader>\n\n    </ng-container>\n    <!-- END SKELETON -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n\n    <!-- <mat-card-content> -->\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <mat-option value=\"WordPress\">WordPress</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <!-- <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls> -->\n\n              <mat-form-field class=\"mat-full-width\">\n                <mat-select\n                  placeholder=\"Source Control\"\n                  formControlName=\"sourceControl\"\n                  (selectionChange)=\"SourceControlChanged($event)\"\n                  required\n                >\n                  <mat-option \n                    *ngFor=\"let scLookup of SourceControlLookups\" \n                    [value]=\"scLookup\">\n                     {{scLookup}}\n                  </mat-option>\n                  \n    \n                  <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width with-hint\"\n                *ngIf=\"\n                SourceControlFormControl?.valid\n                \"\n              >          \n                <mat-select\n                  formControlName=\"buildPath\"\n                  placeholder=\"Build Path\"\n                  required\n                >\n                  <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                    <mat-option [value]=\"buildPath\">\n                      {{ buildPath }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-hint>\n                  The build path identifies which build action to use for your\n                  configuration.\n                </mat-hint>\n              </mat-form-field>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n\n            <div *ngSwitchCase=\"'WordPress'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            \n          </div>\n          \n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"includeRequest\">\n              Include Path and Query?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Should the redirect include the path and query?\"\n            >\n              info_outline\n            </mat-icon>\n          </div>\n        </div>\n      </div>\n    <!-- </mat-card-content> -->\n    <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ProcessorDetailsFormGroup.valid || !ProcessorDetailsFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Processor Details\n        </button> -->\n        <!-- <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader> -->\n\n    <!-- </mat-card-actions> -->\n\n  </ng-container>\n  \n<!-- </mat-card> -->\n</form>\n  \n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: i1$2.FormBuilder }, { type: EaCService }]; }, propDecorators: { EditingApplication: [{
+            args: [{ selector: 'lcu-security-toggle', template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$2.FormBuilder }]; }, propDecorators: { EditingApplication: [{
                 type: Input,
                 args: ['editing-application']
-            }], EditingApplicationLookup: [{
-                type: Input,
-                args: ['editing-application-lookup']
-            }], HasSaveButton: [{
-                type: Input,
-                args: ['has-save-button']
-            }], SourceControlLookups: [{
-                type: Input,
-                args: ['source-control-lookups']
-            }], ProjectLookup: [{
-                type: Input,
-                args: ['project-lookup']
             }], SaveFormEvent: [{
                 type: Output,
                 args: ['save-form-event']
@@ -5163,189 +5452,89 @@ class BuildPipelineFormComponent {
             // console.log("response: ", response);
             this.HostingDetails.Loading = false;
             const hostOption = this.HostingDetails?.HostingOptions?.find((ho) => ho.Path === this.DevOpsAction.Path);
-            this.BuildPipeline = hostOption?.Lookup;
-            // console.log("Build Pipeline HERE= ", this.BuildPipeline);
-            this.setupControlsForForm();
-        }, (err) => {
-            console.log('ERR: ', err);
-            this.HostingDetails.Loading = false;
-        });
-        // console.log('HOSTING DETAILS: ', this.HostingDetails);
-    }
-}
-BuildPipelineFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, deps: [{ token: EaCService }, { token: i1$2.FormBuilder }, { token: ApplicationsFlowService }], target: i0.ɵɵFactoryTarget.Component });
-BuildPipelineFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: { DevOpsActionLookup: ["devops-action-lookup", "DevOpsActionLookup"], Disabled: ["disabled", "Disabled"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"], HostingDetails: ["hosting-details", "HostingDetails"] }, outputs: { ResponseEvent: "response-event" }, ngImport: i0, template: "<form \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <!-- <mat-card\n      class=\"spread\"  \n    > -->\n      <!-- <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\n\n          <!-- <div  *ngIf=\"!HostingDetails?.Loading\"> -->\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"buildPipeline\"\n                placeholder=\"Build Pipeline\"\n                [disabled]=\"Disabled\"\n                (selectionChange)=\"BuildPipelineChanged()\"\n                required\n              >\n                <ng-container\n                  *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n                >\n                  <mat-option [value]=\"hostOption.Lookup\">\n                    {{ hostOption.Name }}\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n          \n              <mat-hint>\n                <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                  <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                    {{ hostOption.Description }}\n                  </span>\n                </ng-container>\n              </mat-hint>\n            </mat-form-field>\n          \n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                formControlName=\"devOpsActionName\"\n                placeholder=\"Name of DevOps Action\"\n                required=\"true\"\n              />\n            </mat-form-field>\n          \n            <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  [formControlName]=\"input.Lookup\"\n                  [placeholder]=\"input.Placeholder\"\n                  [required]=\"input.Required\"\n                />\n          \n                <mat-hint>{{ input.Hint }}</mat-hint>\n              </mat-form-field>\n            </ng-container>\n          \n            <div *ngIf=\"BuildPipeline == 'npm-release'\">\n              <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n                <mat-icon matPrefix>security</mat-icon>\n          \n                <input\n                  id=\"npm-token\"\n                  matInput\n                  type=\"text\"\n                  formControlName=\"npmToken\"\n                  placeholder=\"NPM token\"\n                  [required]=\"!Disabled\"\n                  style=\"-webkit-text-security: disc;\"\n                />\n                <mat-hint>\n                  Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                  Learn how to create and view access tokens \n                  <a\n                    href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                    target=\"_blank\"\n                    class=\"primary-link\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      <!-- </mat-card-content> -->\n\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button> -->\n        <!-- <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>   -->\n        \n    <!-- </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}.primary-link{color:#4a918e;text-decoration:none}\n"], components: [{ type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.MatPrefix, selector: "[matPrefix]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-build-pipeline-form', template: "<form \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <!-- <mat-card\n      class=\"spread\"  \n    > -->\n      <!-- <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\n\n          <!-- <div  *ngIf=\"!HostingDetails?.Loading\"> -->\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"buildPipeline\"\n                placeholder=\"Build Pipeline\"\n                [disabled]=\"Disabled\"\n                (selectionChange)=\"BuildPipelineChanged()\"\n                required\n              >\n                <ng-container\n                  *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n                >\n                  <mat-option [value]=\"hostOption.Lookup\">\n                    {{ hostOption.Name }}\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n          \n              <mat-hint>\n                <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                  <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                    {{ hostOption.Description }}\n                  </span>\n                </ng-container>\n              </mat-hint>\n            </mat-form-field>\n          \n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                formControlName=\"devOpsActionName\"\n                placeholder=\"Name of DevOps Action\"\n                required=\"true\"\n              />\n            </mat-form-field>\n          \n            <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  [formControlName]=\"input.Lookup\"\n                  [placeholder]=\"input.Placeholder\"\n                  [required]=\"input.Required\"\n                />\n          \n                <mat-hint>{{ input.Hint }}</mat-hint>\n              </mat-form-field>\n            </ng-container>\n          \n            <div *ngIf=\"BuildPipeline == 'npm-release'\">\n              <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n                <mat-icon matPrefix>security</mat-icon>\n          \n                <input\n                  id=\"npm-token\"\n                  matInput\n                  type=\"text\"\n                  formControlName=\"npmToken\"\n                  placeholder=\"NPM token\"\n                  [required]=\"!Disabled\"\n                  style=\"-webkit-text-security: disc;\"\n                />\n                <mat-hint>\n                  Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                  Learn how to create and view access tokens \n                  <a\n                    href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                    target=\"_blank\"\n                    class=\"primary-link\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      <!-- </mat-card-content> -->\n\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button> -->\n        <!-- <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>   -->\n        \n    <!-- </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}.primary-link{color:#4a918e;text-decoration:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$2.FormBuilder }, { type: ApplicationsFlowService }]; }, propDecorators: { DevOpsActionLookup: [{
-                type: Input,
-                args: ['devops-action-lookup']
-            }], Disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], Environment: [{
-                type: Input,
-                args: ['environment']
-            }], EnvironmentLookup: [{
-                type: Input,
-                args: ['environment-lookup']
-            }], HostingDetails: [{
-                type: Input,
-                args: ['hosting-details']
-            }], ResponseEvent: [{
-                type: Output,
-                args: ['response-event']
-            }] } });
-
-class BuildPipelineDialogComponent {
-    constructor(dialogRef, eacSvc, data, snackBar) {
-        this.dialogRef = dialogRef;
-        this.eacSvc = eacSvc;
-        this.data = data;
-        this.snackBar = snackBar;
-    }
-    get BuildPipelineFormGroup() {
-        return this.BuildPipelineControl?.BuildPipelineFormGroup;
-    }
-    get HasConnection() {
-        return this.State.GitHub.HasConnection;
-    }
-    get State() {
-        return this.eacSvc.State;
-    }
-    ngOnInit() {
-    }
-    CloseDialog() {
-        this.dialogRef.close();
-    }
-    HandleResponseEvent(event) {
-        console.log("Response Event: ", event);
-        if (event.Code === 0) {
-            this.snackBar.open("Build Pipeline Created Succesfully", "Dismiss", {
-                duration: 5000
-            });
-            this.CloseDialog();
-        }
-        else {
-            this.ErrorMessage = event.Message;
-        }
-    }
-    SaveBuildPipeline() {
-        this.BuildPipelineControl.SaveEnvironment();
-    }
-}
-BuildPipelineDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineDialogComponent, deps: [{ token: i2$2.MatDialogRef }, { token: EaCService }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-BuildPipelineDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineDialogComponent, selector: "lcu-build-pipeline-dialog", viewQueries: [{ propertyName: "BuildPipelineControl", first: true, predicate: BuildPipelineFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Build Pipeline</h2>\n\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n<ng-container *ngIf=\"!HasConnection\">\n        \n    <lcu-git-auth></lcu-git-auth>\n\n</ng-container>\n\n<ng-container *ngIf=\"HasConnection\">\n\n<lcu-build-pipeline-form \n    [devops-action-lookup]=\"data.devopsActionLookup\"\n    [environment]=\"data.environment\" \n    [environment-lookup]=\"data.environmentLookup\"\n    (response-event)=\"HandleResponseEvent($event)\"\n    >\n\n</lcu-build-pipeline-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\n\n</ng-container>\n</mat-dialog-content>\n\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveBuildPipeline()\"\n          [disabled]=\"!BuildPipelineFormGroup?.valid || !BuildPipelineFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>", styles: [".dialog-header{width:100%}\n"], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GitAuthComponent, selector: "lcu-git-auth" }, { type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: ["devops-action-lookup", "disabled", "environment", "environment-lookup", "hosting-details"], outputs: ["response-event"] }], directives: [{ type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-build-pipeline-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Build Pipeline</h2>\n\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n<ng-container *ngIf=\"!HasConnection\">\n        \n    <lcu-git-auth></lcu-git-auth>\n\n</ng-container>\n\n<ng-container *ngIf=\"HasConnection\">\n\n<lcu-build-pipeline-form \n    [devops-action-lookup]=\"data.devopsActionLookup\"\n    [environment]=\"data.environment\" \n    [environment-lookup]=\"data.environmentLookup\"\n    (response-event)=\"HandleResponseEvent($event)\"\n    >\n\n</lcu-build-pipeline-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\n\n</ng-container>\n</mat-dialog-content>\n\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveBuildPipeline()\"\n          [disabled]=\"!BuildPipelineFormGroup?.valid || !BuildPipelineFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>", styles: [".dialog-header{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$2.MatDialogRef }, { type: EaCService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { BuildPipelineControl: [{
-                type: ViewChild,
-                args: [BuildPipelineFormComponent]
-            }] } });
-
-class EditApplicationFormComponent {
-    constructor(formBldr, eacSvc) {
-        this.formBldr = formBldr;
-        this.eacSvc = eacSvc;
-        this.SaveFormEvent = new EventEmitter;
-        this.HasSaveButton = true;
-    }
-    get DescriptionFormControl() {
-        return this.ApplicationFormGroup?.controls.description;
-    }
-    get NameFormControl() {
-        return this.ApplicationFormGroup?.controls.name;
-    }
-    get RouteFormControl() {
-        return this.ApplicationFormGroup?.controls.route;
-    }
-    get State() {
-        return this.eacSvc.State;
-    }
-    ngOnInit() {
-        this.setupApplicationForm();
-    }
-    SubmitApplicationControl() {
-        console.log("application form: ", this.ApplicationFormGroup.value);
-        this.SaveApplication();
-    }
-    SaveApplication() {
-        const app = this.EditingApplication;
-        // console.log("APP=", app);
-        app.Application = {
-            Name: this.NameFormControl.value,
-            Description: this.DescriptionFormControl.value,
-            PriorityShift: this.EditingApplication?.Application?.PriorityShift || 0,
-        };
-        app.LookupConfig.PathRegex = `${this.RouteFormControl.value}.*`;
-        switch (app.Processor.Type) {
-            case 'DFS':
-                app.Processor.BaseHref = `${this.RouteFormControl.value}/`.replace('//', '/');
-                break;
-        }
-        if (!app.LookupConfig.PathRegex.startsWith('/')) {
-            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
-        }
-        const saveAppReq = {
-            ProjectLookup: this.ProjectLookup,
-            Application: app,
-            ApplicationLookup: this.ApplicationLookup,
-        };
-        console.log("processor details being submitted: ", app.Processor);
-        this.eacSvc.SaveApplicationAsCode(saveAppReq).then(res => {
-            this.SaveFormEvent.emit(res);
-        });
-    }
-    //HELPERS
-    setupApplicationForm() {
-        if (this.EditingApplication != null) {
-            this.ApplicationFormGroup = this.formBldr.group({
-                name: [this.EditingApplication.Application?.Name, Validators.required],
-                description: [
-                    this.EditingApplication.Application?.Description,
-                    Validators.required,
-                ],
-                route: [this.CurrentRoute ? this.CurrentRoute :
-                        this.EditingApplication.LookupConfig?.PathRegex.replace('.*', '') ||
-                            '/',
-                    Validators.required,
-                ],
-                // priority: [
-                //   this.EditingApplication.Application?.Priority || 10000,
-                //   Validators.required,
-                // ],
-            });
-        }
+            this.BuildPipeline = hostOption?.Lookup;
+            // console.log("Build Pipeline HERE= ", this.BuildPipeline);
+            this.setupControlsForForm();
+        }, (err) => {
+            console.log('ERR: ', err);
+            this.HostingDetails.Loading = false;
+        });
+        // console.log('HOSTING DETAILS: ', this.HostingDetails);
     }
 }
-EditApplicationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EditApplicationFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-EditApplicationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EditApplicationFormComponent, selector: "lcu-edit-application-form", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], CurrentRoute: ["current-route", "CurrentRoute"], EditingApplication: ["editing-application", "EditingApplication"], HasSaveButton: ["has-save-button", "HasSaveButton"], ProjectLookup: ["project-lookup", "ProjectLookup"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"ApplicationFormGroup\" (ngSubmit)=\"SubmitApplicationControl()\" >\n    <!-- <mat-card class=\"spread flow-card\"> -->\n      <!-- <mat-card-header>\n        <mat-card-title>\n          <ng-container *ngIf=\"EditingApplication?.Application\">\n            Edit Application:\n            {{ EditingApplication.Application?.Name }}\n          </ng-container>\n\n          <ng-container *ngIf=\"!EditingApplication?.Application\">\n            Create an Application\n          </ng-container>\n        </mat-card-title>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n        <ng-container *ngIf=\"State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!State?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Name\"\n              formControlName=\"name\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <textarea\n              matInput\n              placeholder=\"Description\"\n              formControlName=\"description\"\n              rows=\"3\"\n              required\n            ></textarea>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Route\"\n              formControlName=\"route\"\n              required\n            />\n          </mat-form-field>\n      </ng-container>\n\n      <!-- </mat-card-content> -->\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n        *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ApplicationFormGroup.valid || !ApplicationFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save\n        </button>\n        <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader>\n        \n    </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EditApplicationFormComponent, decorators: [{
+BuildPipelineFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, deps: [{ token: EaCService }, { token: i1$2.FormBuilder }, { token: ApplicationsFlowService }], target: i0.ɵɵFactoryTarget.Component });
+BuildPipelineFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: { DevOpsActionLookup: ["devops-action-lookup", "DevOpsActionLookup"], Disabled: ["disabled", "Disabled"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"], HostingDetails: ["hosting-details", "HostingDetails"] }, outputs: { ResponseEvent: "response-event" }, ngImport: i0, template: "<form \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <!-- <mat-card\n      class=\"spread\"  \n    > -->\n      <!-- <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\n\n          <!-- <div  *ngIf=\"!HostingDetails?.Loading\"> -->\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"buildPipeline\"\n                placeholder=\"Build Pipeline\"\n                [disabled]=\"Disabled\"\n                (selectionChange)=\"BuildPipelineChanged()\"\n                required\n              >\n                <ng-container\n                  *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n                >\n                  <mat-option [value]=\"hostOption.Lookup\">\n                    {{ hostOption.Name }}\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n          \n              <mat-hint>\n                <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                  <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                    {{ hostOption.Description }}\n                  </span>\n                </ng-container>\n              </mat-hint>\n            </mat-form-field>\n          \n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                formControlName=\"devOpsActionName\"\n                placeholder=\"Name of DevOps Action\"\n                required=\"true\"\n              />\n            </mat-form-field>\n          \n            <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  [formControlName]=\"input.Lookup\"\n                  [placeholder]=\"input.Placeholder\"\n                  [required]=\"input.Required\"\n                />\n          \n                <mat-hint>{{ input.Hint }}</mat-hint>\n              </mat-form-field>\n            </ng-container>\n          \n            <div *ngIf=\"BuildPipeline == 'npm-release'\">\n              <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n                <mat-icon matPrefix>security</mat-icon>\n          \n                <input\n                  id=\"npm-token\"\n                  matInput\n                  type=\"text\"\n                  formControlName=\"npmToken\"\n                  placeholder=\"NPM token\"\n                  [required]=\"!Disabled\"\n                  style=\"-webkit-text-security: disc;\"\n                />\n                <mat-hint>\n                  Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                  Learn how to create and view access tokens \n                  <a\n                    href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                    target=\"_blank\"\n                    class=\"primary-link\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      <!-- </mat-card-content> -->\n\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button> -->\n        <!-- <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>   -->\n        \n    <!-- </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}.primary-link{color:#4a918e;text-decoration:none}\n"], components: [{ type: i4$3.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.MatPrefix, selector: "[matPrefix]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-edit-application-form', template: "<form class=\"form-card\" [formGroup]=\"ApplicationFormGroup\" (ngSubmit)=\"SubmitApplicationControl()\" >\n    <!-- <mat-card class=\"spread flow-card\"> -->\n      <!-- <mat-card-header>\n        <mat-card-title>\n          <ng-container *ngIf=\"EditingApplication?.Application\">\n            Edit Application:\n            {{ EditingApplication.Application?.Name }}\n          </ng-container>\n\n          <ng-container *ngIf=\"!EditingApplication?.Application\">\n            Create an Application\n          </ng-container>\n        </mat-card-title>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n        <ng-container *ngIf=\"State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!State?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Name\"\n              formControlName=\"name\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <textarea\n              matInput\n              placeholder=\"Description\"\n              formControlName=\"description\"\n              rows=\"3\"\n              required\n            ></textarea>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Route\"\n              formControlName=\"route\"\n              required\n            />\n          </mat-form-field>\n      </ng-container>\n\n      <!-- </mat-card-content> -->\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n        *ngIf=\"HasSaveButton && !State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ApplicationFormGroup.valid || !ApplicationFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save\n        </button>\n        <lcu-loader *ngIf=\"HasSaveButton\" [loading]=\"State?.Loading\"></lcu-loader>\n        \n    </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: EaCService }]; }, propDecorators: { ApplicationLookup: [{
+            args: [{ selector: 'lcu-build-pipeline-form', template: "<form \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <!-- <mat-card\n      class=\"spread\"  \n    > -->\n      <!-- <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header> -->\n\n      <!-- <mat-card-content> -->\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\n\n          <!-- <div  *ngIf=\"!HostingDetails?.Loading\"> -->\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"buildPipeline\"\n                placeholder=\"Build Pipeline\"\n                [disabled]=\"Disabled\"\n                (selectionChange)=\"BuildPipelineChanged()\"\n                required\n              >\n                <ng-container\n                  *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n                >\n                  <mat-option [value]=\"hostOption.Lookup\">\n                    {{ hostOption.Name }}\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n          \n              <mat-hint>\n                <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                  <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                    {{ hostOption.Description }}\n                  </span>\n                </ng-container>\n              </mat-hint>\n            </mat-form-field>\n          \n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                formControlName=\"devOpsActionName\"\n                placeholder=\"Name of DevOps Action\"\n                required=\"true\"\n              />\n            </mat-form-field>\n          \n            <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  [formControlName]=\"input.Lookup\"\n                  [placeholder]=\"input.Placeholder\"\n                  [required]=\"input.Required\"\n                />\n          \n                <mat-hint>{{ input.Hint }}</mat-hint>\n              </mat-form-field>\n            </ng-container>\n          \n            <div *ngIf=\"BuildPipeline == 'npm-release'\">\n              <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n                <mat-icon matPrefix>security</mat-icon>\n          \n                <input\n                  id=\"npm-token\"\n                  matInput\n                  type=\"text\"\n                  formControlName=\"npmToken\"\n                  placeholder=\"NPM token\"\n                  [required]=\"!Disabled\"\n                  style=\"-webkit-text-security: disc;\"\n                />\n                <mat-hint>\n                  Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                  Learn how to create and view access tokens \n                  <a\n                    href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                    target=\"_blank\"\n                    class=\"primary-link\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      <!-- </mat-card-content> -->\n\n      <!-- <mat-card-actions fxLayoutAlign=\"center center\"> -->\n\n        <!-- <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button> -->\n        <!-- <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>   -->\n        \n    <!-- </mat-card-actions> -->\n    <!-- </mat-card> -->\n</form>\n", styles: [".s-block{margin:10px 0;width:100%;height:40px}.primary-link{color:#4a918e;text-decoration:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$2.FormBuilder }, { type: ApplicationsFlowService }]; }, propDecorators: { DevOpsActionLookup: [{
                 type: Input,
-                args: ['application-lookup']
-            }], CurrentRoute: [{
+                args: ['devops-action-lookup']
+            }], Disabled: [{
                 type: Input,
-                args: ['current-route']
-            }], EditingApplication: [{
+                args: ['disabled']
+            }], Environment: [{
                 type: Input,
-                args: ['editing-application']
-            }], HasSaveButton: [{
+                args: ['environment']
+            }], EnvironmentLookup: [{
                 type: Input,
-                args: ['has-save-button']
-            }], ProjectLookup: [{
+                args: ['environment-lookup']
+            }], HostingDetails: [{
                 type: Input,
-                args: ['project-lookup']
-            }], SaveFormEvent: [{
+                args: ['hosting-details']
+            }], ResponseEvent: [{
                 type: Output,
-                args: ['save-form-event']
+                args: ['response-event']
+            }] } });
+
+class BuildPipelineDialogComponent {
+    constructor(dialogRef, eacSvc, data, snackBar) {
+        this.dialogRef = dialogRef;
+        this.eacSvc = eacSvc;
+        this.data = data;
+        this.snackBar = snackBar;
+    }
+    get BuildPipelineFormGroup() {
+        return this.BuildPipelineControl?.BuildPipelineFormGroup;
+    }
+    get HasConnection() {
+        return this.State.GitHub.HasConnection;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    ngOnInit() {
+    }
+    CloseDialog() {
+        this.dialogRef.close();
+    }
+    HandleResponseEvent(event) {
+        console.log("Response Event: ", event);
+        if (event.Code === 0) {
+            this.snackBar.open("Build Pipeline Created Succesfully", "Dismiss", {
+                duration: 5000
+            });
+            this.CloseDialog();
+        }
+        else {
+            this.ErrorMessage = event.Message;
+        }
+    }
+    SaveBuildPipeline() {
+        this.BuildPipelineControl.SaveEnvironment();
+    }
+}
+BuildPipelineDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineDialogComponent, deps: [{ token: i2$2.MatDialogRef }, { token: EaCService }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+BuildPipelineDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineDialogComponent, selector: "lcu-build-pipeline-dialog", viewQueries: [{ propertyName: "BuildPipelineControl", first: true, predicate: BuildPipelineFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Build Pipeline</h2>\n\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n<ng-container *ngIf=\"!HasConnection\">\n        \n    <lcu-git-auth></lcu-git-auth>\n\n</ng-container>\n\n<ng-container *ngIf=\"HasConnection\">\n\n<lcu-build-pipeline-form \n    [devops-action-lookup]=\"data.devopsActionLookup\"\n    [environment]=\"data.environment\" \n    [environment-lookup]=\"data.environmentLookup\"\n    (response-event)=\"HandleResponseEvent($event)\"\n    >\n\n</lcu-build-pipeline-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\n\n</ng-container>\n</mat-dialog-content>\n\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveBuildPipeline()\"\n          [disabled]=\"!BuildPipelineFormGroup?.valid || !BuildPipelineFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>", styles: [".dialog-header{width:100%}\n"], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GitAuthComponent, selector: "lcu-git-auth" }, { type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: ["devops-action-lookup", "disabled", "environment", "environment-lookup", "hosting-details"], outputs: ["response-event"] }], directives: [{ type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-build-pipeline-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Build Pipeline</h2>\n\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n<ng-container *ngIf=\"!HasConnection\">\n        \n    <lcu-git-auth></lcu-git-auth>\n\n</ng-container>\n\n<ng-container *ngIf=\"HasConnection\">\n\n<lcu-build-pipeline-form \n    [devops-action-lookup]=\"data.devopsActionLookup\"\n    [environment]=\"data.environment\" \n    [environment-lookup]=\"data.environmentLookup\"\n    (response-event)=\"HandleResponseEvent($event)\"\n    >\n\n</lcu-build-pipeline-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\n\n</ng-container>\n</mat-dialog-content>\n\n\n<mat-dialog-actions \n        class=\"actions-container\" \n        div fxLayout=\"row\" \n        fxLayoutAlign=\"end center\"\n>\n        <button \n                class=\"action-button\"\n                mat-raised-button\n                fxFlex=\"25%\"\n                (click)=\"CloseDialog()\">\n                Cancel\n\n        </button>\n\n\n\n        <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveBuildPipeline()\"\n          [disabled]=\"!BuildPipelineFormGroup?.valid || !BuildPipelineFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>", styles: [".dialog-header{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$2.MatDialogRef }, { type: EaCService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { BuildPipelineControl: [{
+                type: ViewChild,
+                args: [BuildPipelineFormComponent]
             }] } });
 
 class BreadcrumbComponent {
@@ -5447,7 +5636,7 @@ class BreadcrumbComponent {
     async handleStateChange() { }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbComponent, selector: "lcu-breadcrumb", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], ProjectLookup: ["project-lookup", "ProjectLookup"], SelectedRoute: ["selected-route", "SelectedRoute"] }, ngImport: i0, template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"State.Loading || Loading\">\n      <mat-icon skeleton-text [effect]=\"SkeletonEffect\">home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State.Loading && Enterprise && !Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:20px 20px 0}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"], components: [{ type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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"] }, { type: i4$4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i8$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbComponent, selector: "lcu-breadcrumb", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], ProjectLookup: ["project-lookup", "ProjectLookup"], SelectedRoute: ["selected-route", "SelectedRoute"] }, ngImport: i0, template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"State.Loading || Loading\">\n      <mat-icon skeleton-text [effect]=\"SkeletonEffect\">home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State.Loading && Enterprise && !Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:20px 20px 0}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"], components: [{ type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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"] }, { type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i8$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lcu-breadcrumb', template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"State.Loading || Loading\">\n      <mat-icon skeleton-text [effect]=\"SkeletonEffect\">home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State.Loading && Enterprise && !Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:20px 20px 0}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"] }]
@@ -5536,172 +5725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 args: [EditApplicationFormComponent]
             }] } });
 
-class NewApplicationDialogComponent {
-    constructor(eacSvc, dialogRef, data, snackBar) {
-        this.eacSvc = eacSvc;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.snackBar = snackBar;
-        this.HasSaveButton = false;
-    }
-    get Environment() {
-        return this.State?.EaC?.Environments[this.data.environmentLookup];
-    }
-    get SourceControls() {
-        return this.Environment?.Sources || {};
-    }
-    get SourceControlLookups() {
-        return Object.keys(this.Environment.Sources || {});
-    }
-    get State() {
-        return this.eacSvc.State;
-    }
-    ngOnInit() {
-        this.SetupApplication(Guid.CreateRaw());
-    }
-    CloseDialog() {
-        this.dialogRef.close();
-    }
-    SetupApplication(appLookup) {
-        this.NewApplication = new EaCApplicationAsCode;
-        this.NewApplicationLookup = appLookup;
-    }
-    SaveApplication() {
-        const app = {
-            Application: {
-                Name: this.ApplicationFormControls.NameFormControl.value,
-                Description: this.ApplicationFormControls.DescriptionFormControl.value,
-                PriorityShift: 0,
-            },
-            AccessRightLookups: [],
-            DataTokens: {},
-            LicenseConfigurationLookups: [],
-            LookupConfig: {
-                IsPrivate: false,
-                IsTriggerSignIn: false,
-                PathRegex: `${this.ApplicationFormControls.RouteFormControl.value}.*`,
-                QueryRegex: '',
-                HeaderRegex: '',
-                AllowedMethods: this.ProcessorDetailsFormControls.MethodsFormControl?.value
-                    ?.split(' ')
-                    .filter((v) => !!v),
-            },
-            Processor: {
-                Type: this.ProcessorDetailsFormControls.ProcessorType,
-            },
-        };
-        switch (app.Processor.Type) {
-            case 'DFS':
-                app.Processor.BaseHref = `${this.ApplicationFormControls.RouteFormControl.value}/`.replace('//', '/');
-                app.Processor.DefaultFile =
-                    this.ProcessorDetailsFormControls.DefaultFileFormControl.value || 'index.html';
-                app.LowCodeUnit = {
-                    Type: this.ProcessorDetailsFormControls.LCUType,
-                };
-                switch (app.LowCodeUnit.Type) {
-                    case 'GitHub':
-                        app.LowCodeUnit.Organization =
-                            this.SourceControls[this.ProcessorDetailsFormControls.SourceControlFormControl.value].Organization;
-                        app.LowCodeUnit.Repository =
-                            this.SourceControls[this.ProcessorDetailsFormControls.SourceControlFormControl.value].Repository;
-                        app.LowCodeUnit.Build = this.ProcessorDetailsFormControls.BuildFormControl.value;
-                        app.LowCodeUnit.Path =
-                            this.ProcessorDetailsFormControls.BuildPathFormControl.value;
-                        break;
-                    case 'NPM':
-                        app.LowCodeUnit.Package = this.ProcessorDetailsFormControls.PackageFormControl.value;
-                        app.LowCodeUnit.Version = this.ProcessorDetailsFormControls.VersionFormControl.value;
-                        break;
-                    case 'Zip':
-                        app.LowCodeUnit.ZipFile = this.ProcessorDetailsFormControls.ZipFileFormControl.value;
-                        break;
-                }
-                break;
-            case 'OAuth':
-                app.Processor.Scopes = this.ProcessorDetailsFormControls.ScopesFormControl.value.split(' ');
-                app.Processor.TokenLookup = this.ProcessorDetailsFormControls.TokenLookupFormControl.value;
-                app.LowCodeUnit = {
-                    Type: this.ProcessorDetailsFormControls.LCUType,
-                };
-                switch (app.LowCodeUnit.Type) {
-                    case 'GitHubOAuth':
-                        app.LowCodeUnit.ClientID = this.ProcessorDetailsFormControls.ClientIDFormControl.value;
-                        app.LowCodeUnit.ClientSecret = this.ProcessorDetailsFormControls.ClientSecretFormControl.value;
-                        break;
-                }
-                break;
-            case 'Proxy':
-                app.Processor.InboundPath = this.ProcessorDetailsFormControls.InboundPathFormControl.value;
-                app.LowCodeUnit = {
-                    Type: this.ProcessorDetailsFormControls.LCUType,
-                };
-                switch (app.LowCodeUnit.Type) {
-                    case 'API':
-                        app.LowCodeUnit.APIRoot = this.ProcessorDetailsFormControls.APIRootFormControl.value;
-                        app.LowCodeUnit.Security = this.ProcessorDetailsFormControls.SecurityFormControl.value;
-                        break;
-                    case 'SPA':
-                        app.LowCodeUnit.SPARoot = this.ProcessorDetailsFormControls.SPARootFormControl.value;
-                        break;
-                }
-                break;
-            case 'Redirect':
-                app.Processor.Permanent = !!this.ProcessorDetailsFormControls.PermanentFormControl.value;
-                app.Processor.PreserveMethod = !!this.ProcessorDetailsFormControls.PreserveMethodFormControl.value;
-                app.Processor.Redirect = this.ProcessorDetailsFormControls.RedirectFormControl.value;
-                break;
-        }
-        if (!app.LookupConfig.PathRegex.startsWith('/')) {
-            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
-        }
-        const saveAppReq = {
-            ProjectLookup: this.data.projectLookup,
-            Application: app,
-            ApplicationLookup: this.NewApplicationLookup,
-        };
-        // this.HasBuildFormControl.value &&  taken out from below if statement
-        if (this.ProcessorDetailsFormControls.ProcessorType !== 'redirect' && this.ProcessorDetailsFormControls.LCUType === 'GitHub') {
-            if (app) {
-                app.LowCodeUnit.SourceControlLookup = this.ProcessorDetailsFormControls.SourceControlFormControl.value;
-            }
-        }
-        else if (app) {
-            app.LowCodeUnit.SourceControlLookup = null;
-        }
-        // console.log("Save new App request: ", saveAppReq);
-        this.eacSvc.SaveApplicationAsCode(saveAppReq).then(res => {
-            this.handleSaveStatus(res);
-        });
-    }
-    handleSaveStatus(status) {
-        console.log("event to save: ", status);
-        if (status.Code === 0) {
-            this.snackBar.open("Application Succesfully Created", "Dismiss", {
-                duration: 5000
-            });
-            this.CloseDialog();
-        }
-        else {
-            this.ErrorMessage = status.Message;
-        }
-    }
-}
-NewApplicationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NewApplicationDialogComponent, deps: [{ token: EaCService }, { token: i2$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-NewApplicationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NewApplicationDialogComponent, selector: "lcu-new-application-dialog", viewQueries: [{ propertyName: "ApplicationFormControls", first: true, predicate: EditApplicationFormComponent, descendants: true }, { propertyName: "ProcessorDetailsFormControls", first: true, predicate: ProcessorDetailsFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Create Application</h2>\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n    <lcu-edit-application-form \n        [current-route]=\"data.currentRoute\"\n        [editing-application]=\"NewApplication\"\n        [has-save-button]=\"HasSaveButton\"\n    >\n    </lcu-edit-application-form>\n\n    <lcu-processor-details-form \n        [editing-application]=\"NewApplication\"\n        [editing-application-lookup]=\"NewApplicationLookup\"\n        [has-save-button]=\"HasSaveButton\"\n        [source-control-lookups]=\"SourceControlLookups\"\n        [project-lookup]=\"data.projectLookup\"\n    >\n    </lcu-processor-details-form>\n\n    <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n        {{ ErrorMessage }}\n    </mat-error>\n</mat-dialog-content>\n\n<mat-dialog-actions\n    class=\"actions-container\" \n    div fxLayout=\"row\" \n    fxLayoutAlign=\"end center\"\n>\n\n    <button \n        class=\"action-button\"\n        mat-raised-button\n        fxFlex=\"25%\"\n        (click)=\"CloseDialog()\"\n    >\n        Cancel\n    </button>\n\n\n    <button \n        *ngIf=\"ProcessorDetailsFormControls && ApplicationFormControls && !State?.Loading\"\n        mat-raised-button \n        color=\"primary\"\n        fxFlex=\"25%\"\n        class=\"new-app-submit\" \n        (click)=\"SaveApplication()\"\n        [disabled]=\"\n            !ProcessorDetailsFormControls?.ProcessorDetailsFormGroup?.valid \n            || \n            !ApplicationFormControls?.ApplicationFormGroup?.valid\n        \"\n    >\n        Save Application\n    </button>\n</mat-dialog-actions>\n\n\n", styles: [""], components: [{ type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditApplicationFormComponent, selector: "lcu-edit-application-form", inputs: ["application-lookup", "current-route", "editing-application", "has-save-button", "project-lookup"], outputs: ["save-form-event"] }, { type: ProcessorDetailsFormComponent, selector: "lcu-processor-details-form", inputs: ["editing-application", "editing-application-lookup", "has-save-button", "source-control-lookups", "project-lookup"], outputs: ["save-form-event"] }], directives: [{ type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NewApplicationDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-new-application-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Create Application</h2>\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n\n    <lcu-edit-application-form \n        [current-route]=\"data.currentRoute\"\n        [editing-application]=\"NewApplication\"\n        [has-save-button]=\"HasSaveButton\"\n    >\n    </lcu-edit-application-form>\n\n    <lcu-processor-details-form \n        [editing-application]=\"NewApplication\"\n        [editing-application-lookup]=\"NewApplicationLookup\"\n        [has-save-button]=\"HasSaveButton\"\n        [source-control-lookups]=\"SourceControlLookups\"\n        [project-lookup]=\"data.projectLookup\"\n    >\n    </lcu-processor-details-form>\n\n    <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n        {{ ErrorMessage }}\n    </mat-error>\n</mat-dialog-content>\n\n<mat-dialog-actions\n    class=\"actions-container\" \n    div fxLayout=\"row\" \n    fxLayoutAlign=\"end center\"\n>\n\n    <button \n        class=\"action-button\"\n        mat-raised-button\n        fxFlex=\"25%\"\n        (click)=\"CloseDialog()\"\n    >\n        Cancel\n    </button>\n\n\n    <button \n        *ngIf=\"ProcessorDetailsFormControls && ApplicationFormControls && !State?.Loading\"\n        mat-raised-button \n        color=\"primary\"\n        fxFlex=\"25%\"\n        class=\"new-app-submit\" \n        (click)=\"SaveApplication()\"\n        [disabled]=\"\n            !ProcessorDetailsFormControls?.ProcessorDetailsFormGroup?.valid \n            || \n            !ApplicationFormControls?.ApplicationFormGroup?.valid\n        \"\n    >\n        Save Application\n    </button>\n</mat-dialog-actions>\n\n\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: EaCService }, { type: i2$2.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { ApplicationFormControls: [{
-                type: ViewChild,
-                args: [EditApplicationFormComponent]
-            }], ProcessorDetailsFormControls: [{
-                type: ViewChild,
-                args: [ProcessorDetailsFormComponent]
-            }] } });
-
 class ProcessorDetailsDialogComponent {
     constructor(eacSvc, dialogRef, data, snackBar) {
         this.eacSvc = eacSvc;