@lowcodeunit/applications-flow-common 1.34.4-social-ui-bug-fixes → 1.34.7-lets-get-social-ish

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

@@ -42,11 +42,13 @@ import * as i4$3 from 'skeleton-elements/angular';
 import { SkeletonElementsModule } from 'skeleton-elements/angular';
 import * as i2$3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-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$1 from '@angular/material/snack-bar';
 import * as i3$2 from '@angular/platform-browser';
+import { EaCApplicationAsCode } from '@semanticjs/common';
+import * as i4$4 from '@angular/material/menu';
+import * as i10 from '@kolkov/angular-editor';
+import { AngularEditorModule } from '@kolkov/angular-editor';
 
 /**
  * Model for form values
@@ -308,6 +310,13 @@ class ApplicationsFlowService {
             headers: this.loadHeaders(),
         });
     }
+    SubmitFeedEntry(entry) {
+        return this.http.post(`${this.apiRoot}/api/lowcodeunit/userfeed/entry`, {
+            FeedEntry: entry,
+        }, {
+            headers: this.loadHeaders(),
+        });
+    }
     UnpackLowCodeUnit(req) {
         return this.http.post(`${this.apiRoot}/api/lowcodeunit/manage/projects/unpack`, req, {
             headers: this.loadHeaders(),
@@ -587,6 +596,7 @@ class ProjectService {
                 if (response.Status.Code === 0) {
                     state.Feed = response.Items;
                     state.FeedSourceControlLookups = response.SourceControlLookups;
+                    state.FeedActions = response.Actions;
                     // console.log("ITEMZ: ", response.Items)
                     resolve(response.Items);
                 }
@@ -675,6 +685,29 @@ class ProjectService {
             }
         });
     }
+    async SubmitFeedEntry(state, entry) {
+        return new Promise((resolve, reject) => {
+            state.Loading = true;
+            this.appsFlowSvc.SubmitFeedEntry(entry).subscribe(async (response) => {
+                if (response.Status.Code === 0) {
+                    var results = await Promise.all([
+                        this.LoadEnterpriseAsCode(state),
+                        this.LoadUserFeed(1, 25, state),
+                    ]);
+                    resolve(response.Status);
+                }
+                else {
+                    state.Loading = false;
+                    reject(response.Status);
+                    console.log(response);
+                }
+            }, (err) => {
+                state.Loading = false;
+                reject(err);
+                console.log(err);
+            });
+        });
+    }
     ToggleCreateProject() {
         this.SetCreatingProject(!this.CreatingProject);
     }
@@ -935,6 +968,9 @@ class EaCService {
     async SetEditProjectSettings(projectLookup) {
         await this.projectService.SetEditProjectSettings(this.State, projectLookup);
     }
+    async SubmitFeedEntry(entry) {
+        return await this.projectService.SubmitFeedEntry(this.State, entry);
+    }
     async UnpackLowCodeUnit(req) {
         if (confirm(`Are you sure you want to unpack application '${req.ApplicationName}' with version '${req.Version}'?`)) {
             await this.projectService.UnpackLowCodeUnit(this.State, req);
@@ -1206,7 +1242,7 @@ class DomainsComponent {
     config() {
         this.Config = new CardFormConfigModel({
             Icon: 'head',
-            Title: 'Domains',
+            Title: '',
             Subtitle: 'In order to use a custom domain, create a CNAME dns record pointing desired subdomain to ' + this.HostDNSInstance + '.',
             FormActions: {
                 Message: 'Changes will be applied to your next deployment',
@@ -3539,7 +3575,8 @@ class GitAuthComponent {
     ConnectGitHubProvider() {
         const reidrectUri = location.pathname + location.search;
         // window.location.href = `/.oauth/GitHubOAuth?redirectUri=${reidrectUri}`;
-        window.location.href = `/.oauth/GitHubOAuth?redirectUri=%2Fdashboard`;
+        // added below line for the new social ui redirectUri wasn't working
+        window.location.href = '/.oauth/GitHubOAuth?redirectUri=%2Fdashboard';
         this.ConnectClicked = true;
     }
 }
@@ -3828,1448 +3865,1090 @@ class FeedCardSmComponent {
     }
 }
 FeedCardSmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedCardSmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedCardSmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FeedCardSmComponent, selector: "lcu-feed-card-sm", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <div class=\"feed-card-container\" fxLayout=\"row\">\n    <mat-icon *ngIf=\"Icon\" [style.color]=\"IconColor\">{{ Icon }}</mat-icon>\n    <div class=\"feed-card-main-content\">\n      <mat-card-title *ngIf=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <ng-content select=\"[more-details]\"></ng-content>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"end\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", 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}\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"] }], 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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"] }] });
+FeedCardSmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FeedCardSmComponent, selector: "lcu-feed-card-sm", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <div class=\"feed-card-container\" fxLayout=\"row\">\n    <mat-icon *ngIf=\"Icon\" [style.color]=\"IconColor\">{{ Icon }}</mat-icon>\n    <div class=\"feed-card-main-content\">\n      <mat-card-title *ngIf=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <ng-content select=\"[more-details]\"></ng-content>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"end\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", 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:24px;width:24px;font-size:24px;cursor:pointer}\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"] }], 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedCardSmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-feed-card-sm', template: "<mat-card class=\"social-card\">\n  <div class=\"feed-card-container\" fxLayout=\"row\">\n    <mat-icon *ngIf=\"Icon\" [style.color]=\"IconColor\">{{ Icon }}</mat-icon>\n    <div class=\"feed-card-main-content\">\n      <mat-card-title *ngIf=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <ng-content select=\"[more-details]\"></ng-content>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"end\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", 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}\n"] }]
+            args: [{ selector: 'lcu-feed-card-sm', template: "<mat-card class=\"social-card\">\n  <div class=\"feed-card-container\" fxLayout=\"row\">\n    <mat-icon *ngIf=\"Icon\" [style.color]=\"IconColor\">{{ Icon }}</mat-icon>\n    <div class=\"feed-card-main-content\">\n      <mat-card-title *ngIf=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\n      <ng-content select=\"[more-details]\"></ng-content>\n    </div>\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"end\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", 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:24px;width:24px;font-size:24px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { FeedItem: [{
                 type: Input,
                 args: ['feed-item']
             }] } });
 
-class EditApplicationFormComponent {
-    constructor(formBldr, eacSvc) {
-        this.formBldr = formBldr;
+class DevopsSourceControlFormComponent {
+    //  Constructors
+    constructor(appsFlowSvc, eacSvc, formBuilder) {
+        this.appsFlowSvc = appsFlowSvc;
         this.eacSvc = eacSvc;
-        this.SaveFormEvent = new EventEmitter;
-        this.HasSaveButton = true;
+        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 DescriptionFormControl() {
-        return this.ApplicationFormGroup?.controls.description;
+    //  Properties
+    get ArtifactLookups() {
+        return this.DevOpsAction?.ArtifactLookups;
     }
-    get NameFormControl() {
-        return this.ApplicationFormGroup?.controls.name;
+    get ArtifactLookup() {
+        const artLookup = this.DevOpsAction?.ArtifactLookups
+            ? this.DevOpsAction?.ArtifactLookups[0]
+            : null;
+        return artLookup;
     }
-    get RouteFormControl() {
-        return this.ApplicationFormGroup?.controls.route;
+    get Artifact() {
+        return this.Environment?.Artifacts && this.ArtifactLookup
+            ? this.Environment?.Artifacts[this.ArtifactLookup] || {}
+            : {};
     }
-    get State() {
-        return this.eacSvc.State;
+    get BranchesFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
     }
-    ngOnInit() {
-        this.setupApplicationForm();
+    get BuildPathFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
     }
-    SubmitApplicationControl() {
-        console.log("application form: ", this.ApplicationFormGroup.value);
-        this.SaveApplication();
+    get DevOpsActionLookups() {
+        // console.log(this.DevOpsActions);
+        return Object.keys(this.DevOpsActions || {});
     }
-    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;
+    get DevOpsAction() {
+        return this.Environment.DevOpsActions && this.DevOpsActionLookup
+            ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
+            : {};
+    }
+    get DevOpsActionLookup() {
+        if (!!this.DevOpsActionLookupFormControl?.value) {
+            return this.DevOpsActionLookupFormControl.value;
         }
-        if (!app.LookupConfig.PathRegex.startsWith('/')) {
-            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
+        if (!!this.EditingSourceControl?.DevOpsActionTriggerLookups) {
+            return this.EditingSourceControl?.DevOpsActionTriggerLookups[0];
         }
-        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,
-                // ],
-            });
+        else {
+            return null;
         }
     }
-}
-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-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 ProcessorDetailsFormComponent {
-    constructor(appsFlowSvc, formBldr, eacSvc) {
-        this.appsFlowSvc = appsFlowSvc;
-        this.formBldr = formBldr;
-        this.eacSvc = eacSvc;
-        this.redirectTooltip = '';
-        this.HasSaveButton = true;
-        this.SaveFormEvent = new EventEmitter();
+    get DevOpsActionLookupFormControl() {
+        return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
     }
-    get APIRootFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.apiRoot;
+    get DevOpsActions() {
+        return this.Environment.DevOpsActions || {};
     }
-    get Environment() {
-        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
+    get EditingSourceControl() {
+        let sc = this.Environment?.Sources
+            ? this.Environment?.Sources[this.EditingSourceControlLookup]
+            : null;
+        if (sc == null && this.EditingSourceControlLookup) {
+            sc = {};
+        }
+        return sc;
     }
-    get BuildFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.build;
+    get MainBranchFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
     }
-    get BuildPathFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.buildPath;
+    get OrganizationFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
     }
-    get ClientIDFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.clientId;
+    get RepositoryFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
     }
-    get ClientSecretFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.clientSecret;
+    get State() {
+        return this.eacSvc.State;
     }
-    get DefaultFileFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.defaultFile;
+    //  Life Cycle
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        this.destroyFormControls();
     }
-    get DefaultSourceControl() {
-        return {
-            Organization: this.EditingApplication?.LowCodeUnit?.Organization,
-            Repository: this.EditingApplication?.LowCodeUnit?.Repository,
-        };
+    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 InboundPathFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.inboundPath;
+    //  API Methods
+    AddBranchOption(event) {
+        this.addBranchOption(event.value);
+        event.input.value = '';
     }
-    get IncludeRequestFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.includeRequest;
+    BranchOptionSelected(event) {
+        this.addBranchOption(event.option.value);
     }
-    get MethodsFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.methods;
+    BranchesChanged(branches) {
+        this.loadProjectHostingDetails();
     }
-    get PackageFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.package;
+    BuildPathChanged(event) {
+        //do something??
     }
-    get PermanentFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.permanent;
+    CreateNewSourceControl() {
+        this.SetEditingSourceControl(Guid.CreateRaw());
     }
-    get PreserveMethodFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.preserveMethod;
+    CreateRepository() {
+        this.CreatingRepository = true;
+        this.RepositoryFormControl.reset();
     }
-    get RedirectFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.redirect;
+    CancelCreateRepository() {
+        this.CreatingRepository = false;
     }
-    get ScopesFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.scopes;
-    }
-    get SecurityFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.security;
+    DevOpsActionLookupChanged(event) {
+        this.configureDevOpsAction();
     }
-    get State() {
-        return this.eacSvc.State;
+    MainBranchChanged(event) {
+        this.emitBranchesChanged();
     }
-    get SourceControls() {
-        return this.Environment?.Sources || {};
+    OrganizationChanged(event) {
+        const org = this.OrganizationFormControl;
+        this.RepositoryFormControl.reset();
+        if (this.UseBranches) {
+            this.BranchesFormControl.reset();
+            this.SelectedBranches = [];
+        }
+        this.listRepositories();
     }
-    get SourceControlFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.sourceControl;
+    RefreshOrganizations() {
+        // this.Loading = true;
+        this.listOrganizations();
+        this.OrganizationFormControl?.reset();
+        this.RepositoryFormControl?.reset();
+        if (this.UseBranches) {
+            this.BranchesFormControl?.reset();
+        }
     }
-    get SPARootFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.spaRoot;
+    RemoveBranchOption(option) {
+        const index = this.SelectedBranches.indexOf(option);
+        if (index >= 0) {
+            this.SelectedBranches.splice(index, 1);
+        }
+        this.emitBranchesChanged();
     }
-    get TokenLookupFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.tokenLookup;
+    RepositoryChanged(event) {
+        const repo = this.RepositoryFormControl;
+        if (this.UseBranches) {
+            this.BranchesFormControl.reset();
+            this.SelectedBranches = [];
+            this.listBranches();
+        }
+        if (!this.UseBranches) {
+            this.listBuildPaths();
+        }
     }
-    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);
+    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;
             }
-        }
-        // console.log("VFC=", vfc)
-        return vfc;
+            else {
+                //  TODO:  Need to surface an error to the user...
+                this.Loading = false;
+            }
+        });
     }
-    get VersionFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.version;
+    SetEditingSourceControl(scLookup) {
+        this.EditingSourceControlLookup = scLookup;
     }
-    get ZipFileFormControl() {
-        return this.ProcessorDetailsFormGroup?.controls.zipFile;
+    SubmitSourceControl() {
+        console.log('source control submitted: ', this.DevOpsSourceControlFormGroup.value);
+        this.SaveSourceControl();
     }
-    ngOnInit() {
-        if (!this.EditingApplication) {
-            this.CreateNewApplication();
-        }
-        else {
-            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);
+        });
+    }
+    //  Helpers
+    addBranchOption(value) {
+        value = (value || '').trim();
+        if (value && this.SelectedBranches.indexOf(value) < 0) {
+            this.SelectedBranches.push(value);
         }
+        this.BranchesInput.nativeElement.blur();
+        this.emitBranchesChanged();
     }
-    CreateNewApplication() {
-        this.SetEditingApplication(Guid.CreateRaw());
+    configureDevOpsAction() {
+        setTimeout(() => {
+            this.DevOpsActionLookupFormControl.setValue(this.DevOpsActionLookup);
+        }, 0);
     }
-    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';
+    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 (permanentValue === true && preserveValue === true) {
-            this.redirectTooltip = '308 – Permanent and Preserve';
+        else if (this.SelectedBranches?.length <= 0) {
+            this.MainBranchFormControl.reset();
         }
+        this.BranchesFormControl.setValue(this.SelectedBranches.join(','));
+        this.BranchesChanged(this.SelectedBranches || []);
     }
-    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;
+    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 '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;
+                else if (this.BranchOptions?.length === 1) {
+                    this.BranchesFormControl.setValue(this.BranchOptions[0].Name);
+                    this.SelectedBranches = [this.BranchOptions[0].Name];
                 }
-                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 (!app.LookupConfig.PathRegex.startsWith('/')) {
-            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
+                this.emitBranchesChanged();
+                this.listBuildPaths();
+            });
         }
-        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();
-    }
-    LCUTypeChanged(event) {
-        this.LCUType = event.value;
-        this.setupLcuTypeSubForm();
-    }
-    //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');
-    }
-    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() {
-        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]);
-            // }
-        });
-    }
-    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;
-            }
-        }
-    }
-    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();
-        }
-    }
-    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();
-    }
-    setupLCUApplicationPointerForm() {
-        this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ApplicationID || '', [Validators.required]));
-    }
-    setupLCUSPAForm() {
-        this.ProcessorDetailsFormGroup.addControl('spaRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.SPARoot || '', [Validators.required]));
-    }
-    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]));
-    }
-    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]));
-    }
-    setupLCUWordPressForm() {
-        this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.APIRoot || '', [Validators.required]));
-    }
-    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]));
-    }
-    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();
-    }
-}
-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: i5$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-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 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;
+        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]);
+                }
+            });
         }
-        // console.log("Save new App request: ", saveAppReq);
-        this.eacSvc.SaveApplicationAsCode(saveAppReq).then(res => {
-            this.handleSaveStatus(res);
+    }
+    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);
+            }
         });
     }
-    handleSaveStatus(status) {
-        console.log("event to save: ", status);
-        if (status.Code === 0) {
-            this.snackBar.open("Application Succesfully Created", "Dismiss", {
-                duration: 5000
+    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;
             });
-            this.CloseDialog();
         }
-        else {
-            this.ErrorMessage = status.Message;
+    }
+    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));
         }
     }
 }
-NewApplicationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NewApplicationDialogComponent, deps: [{ token: EaCService }, { token: i2$3.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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.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$3.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: [{
+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'\" \n                        [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-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$3.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { ApplicationFormControls: [{
-                type: ViewChild,
-                args: [EditApplicationFormComponent]
-            }], ProcessorDetailsFormControls: [{
+            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'\" \n                        [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: [ProcessorDetailsFormComponent]
+                args: ['branches']
             }] } });
 
-class GhControlComponent {
-    constructor(eacSvc, dialog) {
+class SourceControlDialogComponent {
+    constructor(dialogRef, eacSvc, data, snackBar) {
+        this.dialogRef = dialogRef;
         this.eacSvc = eacSvc;
-        this.dialog = dialog;
-        this.InputLabel = "Create Pull Request";
-        this.SkeletonEffect = "wave";
-        this.selectedBtn = "pr-btn";
+        this.data = data;
+        this.snackBar = snackBar;
     }
-    get ActiveEnvironmentLookup() {
-        //  TODO:  Eventually support multiple environments
-        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
-        return envLookups[0];
+    get DevOpsSourceControlFormGroup() {
+        return this.DevopsSourceControl?.DevOpsSourceControlFormGroup;
+    }
+    get HasConnection() {
+        return this.State.GitHub.HasConnection;
     }
     get State() {
         return this.eacSvc.State;
     }
     ngOnInit() {
     }
-    ngAfterViewInit() {
-        this.addSelectBtn();
-    }
-    CreateFeatureBranch() {
-        this.removeSelectedBtn();
-        this.InputLabel = "Create Feature Branch";
-        this.selectedBtn = "fb-btn";
-        this.addSelectBtn();
-        console.log("create feature branch selected");
-    }
-    OpenIssue() {
-        this.removeSelectedBtn();
-        this.InputLabel = "Open Issue";
-        this.selectedBtn = "oi-btn";
-        this.addSelectBtn();
-        console.log("open issue selected");
-    }
-    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;
+    CloseDialog() {
+        this.dialogRef.close();
     }
-    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;
+    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;
         }
     }
-    //HELPERS
-    addSelectBtn() {
-        // (<HTMLElement>document.getElementById(this.selectedBtn)).classList.add('selected');
-    }
-    removeSelectedBtn() {
-        // (<HTMLElement>document.getElementById(this.selectedBtn)).classList.remove('selected');
+    SaveSourceControl() {
+        this.DevopsSourceControl.SaveSourceControl();
     }
 }
-GhControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, deps: [{ token: EaCService }, { token: i2$3.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\" *ngIf=\"false\">\n  <ng-container *ngIf=\"!State?.Loading\">\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    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n      <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">\n        Pull Request\n      </button>\n      <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n      <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">\n        Feature Branch\n      </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 class=\"gh-menu-action\" mat-menu-item (click)=\"CreateNewApp()\">\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      </mat-menu>\n    </mat-card-actions>\n  </ng-container>\n\n  <!-- SKELETON -->\n  <ng-container *ngIf=\"State?.Loading\">\n    <div id=\"gh-card-skeleton\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\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\n          height=\"60px\"\n          [effect]=\"SkeletonEffect\"\n        ></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    </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  </ng-container>\n</mat-card>\n", 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: [{
+SourceControlDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, deps: [{ token: i2$3.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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.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$3.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-gh-control', template: "<mat-card class=\"social-card\" *ngIf=\"false\">\n  <ng-container *ngIf=\"!State?.Loading\">\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    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n      <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">\n        Pull Request\n      </button>\n      <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n      <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">\n        Feature Branch\n      </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 class=\"gh-menu-action\" mat-menu-item (click)=\"CreateNewApp()\">\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      </mat-menu>\n    </mat-card-actions>\n  </ng-container>\n\n  <!-- SKELETON -->\n  <ng-container *ngIf=\"State?.Loading\">\n    <div id=\"gh-card-skeleton\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\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\n          height=\"60px\"\n          [effect]=\"SkeletonEffect\"\n        ></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    </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  </ng-container>\n</mat-card>\n", 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$3.MatDialog }]; } });
+            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$3.MatDialogRef }, { type: EaCService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { DevopsSourceControl: [{
+                type: ViewChild,
+                args: [DevopsSourceControlFormComponent]
+            }] } });
 
-class DevopsSourceControlFormComponent {
-    //  Constructors
-    constructor(appsFlowSvc, eacSvc, formBuilder) {
-        this.appsFlowSvc = appsFlowSvc;
+class MainFeedCardComponent {
+    constructor(eacSvc, dialog, sanitizer) {
         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;
-    }
-    get ArtifactLookup() {
-        const artLookup = this.DevOpsAction?.ArtifactLookups
-            ? this.DevOpsAction?.ArtifactLookups[0]
-            : null;
-        return artLookup;
-    }
-    get Artifact() {
-        return this.Environment?.Artifacts && this.ArtifactLookup
-            ? this.Environment?.Artifacts[this.ArtifactLookup] || {}
-            : {};
-    }
-    get BranchesFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
+        this.dialog = dialog;
+        this.sanitizer = sanitizer;
     }
-    get BuildPathFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
+    get ActiveEnvironment() {
+        return this.State?.EaC?.Environments[this.ActiveEnvironmentLookup];
     }
-    get DevOpsActionLookups() {
-        // console.log(this.DevOpsActions);
-        return Object.keys(this.DevOpsActions || {});
+    get ActiveEnvironmentLookup() {
+        //  TODO:  Eventually support multiple environments
+        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
+        return envLookups[0];
     }
-    get DevOpsAction() {
-        return this.Environment.DevOpsActions && this.DevOpsActionLookup
-            ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
-            : {};
+    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 DevOpsActionLookup() {
-        if (!!this.DevOpsActionLookupFormControl?.value) {
-            return this.DevOpsActionLookupFormControl.value;
+    get Icon() {
+        if (this.FeedItem.Status.Code === 0) {
+            return 'check_circle';
         }
-        if (!!this.EditingSourceControl?.DevOpsActionTriggerLookups) {
-            return this.EditingSourceControl?.DevOpsActionTriggerLookups[0];
+        else if (this.FeedItem.Status.Code === 1) {
+            return 'cancel';
+        }
+        else if (this.FeedItem.Status.Code === 2) {
+            return 'sync';
         }
         else {
-            return null;
+            return 'help_outline';
         }
     }
-    get DevOpsActionLookupFormControl() {
-        return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
-    }
-    get DevOpsActions() {
-        return this.Environment.DevOpsActions || {};
-    }
-    get EditingSourceControl() {
-        let sc = this.Environment?.Sources
-            ? this.Environment?.Sources[this.EditingSourceControlLookup]
-            : null;
-        if (sc == null && this.EditingSourceControlLookup) {
-            sc = {};
+    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';
         }
-        return sc;
-    }
-    get MainBranchFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
-    }
-    get OrganizationFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
-    }
-    get RepositoryFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
     }
     get State() {
         return this.eacSvc.State;
     }
     //  Life Cycle
-    ngAfterViewInit() { }
-    ngOnDestroy() {
-        this.destroyFormControls();
-    }
     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();
+        this.handleRefresh();
     }
     //  API Methods
-    AddBranchOption(event) {
-        this.addBranchOption(event.value);
-        event.input.value = '';
-    }
-    BranchOptionSelected(event) {
-        this.addBranchOption(event.option.value);
-    }
-    BranchesChanged(branches) {
-        this.loadProjectHostingDetails();
-    }
-    BuildPathChanged(event) {
-        //do something??
-    }
-    CreateNewSourceControl() {
-        this.SetEditingSourceControl(Guid.CreateRaw());
-    }
-    CreateRepository() {
-        this.CreatingRepository = true;
-        this.RepositoryFormControl.reset();
-    }
-    CancelCreateRepository() {
-        this.CreatingRepository = false;
-    }
-    DevOpsActionLookupChanged(event) {
-        this.configureDevOpsAction();
-    }
-    MainBranchChanged(event) {
-        this.emitBranchesChanged();
-    }
-    OrganizationChanged(event) {
-        const org = this.OrganizationFormControl;
-        this.RepositoryFormControl.reset();
-        if (this.UseBranches) {
-            this.BranchesFormControl.reset();
-            this.SelectedBranches = [];
-        }
-        this.listRepositories();
-    }
-    RefreshOrganizations() {
-        // this.Loading = true;
-        this.listOrganizations();
-        this.OrganizationFormControl?.reset();
-        this.RepositoryFormControl?.reset();
-        if (this.UseBranches) {
-            this.BranchesFormControl?.reset();
-        }
-    }
-    RemoveBranchOption(option) {
-        const index = this.SelectedBranches.indexOf(option);
-        if (index >= 0) {
-            this.SelectedBranches.splice(index, 1);
-        }
-        this.emitBranchesChanged();
+    CalculateTimelapse(timestamp) {
+        return moment(timestamp).fromNow();
     }
-    RepositoryChanged(event) {
-        const repo = this.RepositoryFormControl;
-        if (this.UseBranches) {
-            this.BranchesFormControl.reset();
-            this.SelectedBranches = [];
-            this.listBranches();
-        }
-        if (!this.UseBranches) {
-            this.listBuildPaths();
+    HandleAction(action) {
+        if (action.ActionType == 'Link') {
+            if (action.Action.startsWith('http')) {
+                window.open(action.Action, '_blank');
+            }
+            else {
+                window.location.href = action.Action;
+            }
         }
-    }
-    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 if (action.ActionType == 'Modal') {
+            if (action.Action == 'AddSourceControl') {
+                this.OpenSourceControlDialog(null);
             }
             else {
-                //  TODO:  Need to surface an error to the user...
-                this.Loading = false;
+                alert('other modaled ' + action.Action);
             }
-        });
-    }
-    SetEditingSourceControl(scLookup) {
-        this.EditingSourceControlLookup = scLookup;
-    }
-    SubmitSourceControl() {
-        console.log('source control submitted: ', this.DevOpsSourceControlFormGroup.value);
-        this.SaveSourceControl();
+        }
     }
-    SaveSourceControl() {
-        const saveEnvReq = {
-            Environment: {
-                ...this.Environment,
-                Sources: this.Environment.Sources || {},
+    OpenSourceControlDialog(scLookup) {
+        const dialogRef = this.dialog.open(SourceControlDialogComponent, {
+            width: '550px',
+            data: {
+                environment: this.Environment,
+                environmentLookup: this.ActiveEnvironmentLookup,
+                scLookup: scLookup,
             },
-            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);
         });
+        dialogRef.afterClosed().subscribe((result) => {
+            // console.log('The dialog was closed');
+            // console.log("result:", result)
+        });
+    }
+    SafeHtml(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
     }
     //  Helpers
-    addBranchOption(value) {
-        value = (value || '').trim();
-        if (value && this.SelectedBranches.indexOf(value) < 0) {
-            this.SelectedBranches.push(value);
+    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);
         }
-        this.BranchesInput.nativeElement.blur();
-        this.emitBranchesChanged();
     }
-    configureDevOpsAction() {
-        setTimeout(() => {
-            this.DevOpsActionLookupFormControl.setValue(this.DevOpsActionLookup);
-        }, 0);
+}
+MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }, { token: i2$3.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?.Content\">\n                  <div class=\"content\">\n                    {{ tab.Data?.Content }}\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\n                <ng-container *ngIf=\"tab.Data?.Comments\">\n                  <div class=\"comments\">\n                    <ng-container *ngIf=\"tab.Data?.Comments?.length <= 0\">\n                      <h4>No comments provided</h4>\n                    </ng-container>\n\n                    <mat-card *ngFor=\"let comment of tab.Data?.Comments\">\n                      <mat-card-header>\n                        <img\n                          mat-card-avatar\n                          class=\"example-header-image\"\n                          [src]=\"comment.Avatar\"\n                          *ngIf=\"comment.Avatar\"\n                        />\n\n                        <mat-card-title>\n                          {{ comment.Author }}\n                          commented on\n                          {{ comment.UpdatedAt }}\n                        </mat-card-title>\n                      </mat-card-header>\n\n                      <mat-card-content>\n                        {{ comment.Comment }}\n                      </mat-card-content>\n                    </mat-card>\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:24px;width:24px;font-size:24px;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$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$2.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.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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?.Content\">\n                  <div class=\"content\">\n                    {{ tab.Data?.Content }}\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\n                <ng-container *ngIf=\"tab.Data?.Comments\">\n                  <div class=\"comments\">\n                    <ng-container *ngIf=\"tab.Data?.Comments?.length <= 0\">\n                      <h4>No comments provided</h4>\n                    </ng-container>\n\n                    <mat-card *ngFor=\"let comment of tab.Data?.Comments\">\n                      <mat-card-header>\n                        <img\n                          mat-card-avatar\n                          class=\"example-header-image\"\n                          [src]=\"comment.Avatar\"\n                          *ngIf=\"comment.Avatar\"\n                        />\n\n                        <mat-card-title>\n                          {{ comment.Author }}\n                          commented on\n                          {{ comment.UpdatedAt }}\n                        </mat-card-title>\n                      </mat-card-header>\n\n                      <mat-card-content>\n                        {{ comment.Comment }}\n                      </mat-card-content>\n                    </mat-card>\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:24px;width:24px;font-size:24px;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$3.MatDialog }, { type: i3$2.DomSanitizer }]; }, propDecorators: { FeedItem: [{
+                type: Input,
+                args: ['feed-item']
+            }] } });
+
+class TwoColumnHeaderComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    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(''));
+}
+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;
     }
-    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]);
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.assignCarouselClass();
+    }
+    LeftChevronClicked() {
+        this.removeCarouselClasses();
+        if (this.carouselIndex === 0) {
+            this.carouselIndex = this.Stats.length - 1;
         }
-        else if (this.SelectedBranches?.length <= 0) {
-            this.MainBranchFormControl.reset();
+        else {
+            this.carouselIndex--;
         }
-        this.BranchesFormControl.setValue(this.SelectedBranches.join(','));
-        this.BranchesChanged(this.SelectedBranches || []);
+        this.assignCarouselClass();
     }
-    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();
-            });
-        }
+    MoreDetailsClicked() {
+        console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
     }
-    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]);
-                }
-            });
+    RightChevronClicked() {
+        this.removeCarouselClasses();
+        if (this.carouselIndex === this.Stats.length - 1) {
+            this.carouselIndex = 0;
         }
+        else {
+            this.carouselIndex++;
+        }
+        this.assignCarouselClass();
     }
-    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);
+    //HELPERS
+    removeCarouselClasses() {
+        for (let i = 0; i < this.Stats.length; i++) {
+            if (i === this.carouselIndex) {
+                document.getElementById("carousel-" + this.carouselIndex).classList.remove('active');
             }
-            else if (this.RepositoryOptions?.length <= 0) {
-                this.CreatingRepository = true;
+            else {
+                document.getElementById("carousel-" + i).classList.remove('hidden');
             }
-        });
-    }
-    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));
+    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');
+            }
         }
     }
 }
-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: [{
+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-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: [{
+            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: ['environment']
-            }], EnvironmentLookup: [{
+                args: ['stats']
+            }] } });
+
+class SecurityToggleComponent {
+    constructor(eacSvc, formBldr) {
+        this.eacSvc = eacSvc;
+        this.formBldr = formBldr;
+        this.SaveFormEvent = new EventEmitter;
+        this.SkeletonEffect = 'wave';
+    }
+    get IsPrivateFormControl() {
+        return this.SecurityFormGroup?.controls.isPrivate;
+    }
+    get IsTriggerSignInFormControl() {
+        return this.SecurityFormGroup?.controls.isTriggerSignIn;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    ngOnInit() {
+        this.setupSecurityFormGroup();
+    }
+    SecuritySubmit() {
+        //save the security settings
+        console.log("submitting security values: ", this.SecurityFormGroup.value);
+        this.SaveFormEvent.emit(this.SecurityFormGroup.value);
+    }
+    setupSecurityFormGroup() {
+        this.ProcessorType = this.EditingApplication?.Processor?.Type || '';
+        this.SecurityFormGroup = this.formBldr.group({});
+        this.setupSecurityForm();
+    }
+    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]));
+    }
+}
+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\n  class=\"security-form\"\n  [formGroup]=\"SecurityFormGroup\"\n  (ngSubmit)=\"SecuritySubmit()\"\n>\n  <mat-card class=\"flow-card\">\n    <!-- SKELETON LOADING -->\n    <ng-container *ngIf=\"State?.Loading\">\n      <mat-card-header fxLayoutAlign=\"space-between center\">\n        <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">\n          Security Settings\n        </mat-card-title>\n        <div fxLayoutAlign=\"space-around center\">\n          <div skeleton-text [effect]=\"SkeletonEffect\">XXX</div>\n\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\">\n            info_outline\n          </mat-icon>\n        </div>\n      </mat-card-header>\n\n      <mat-card-actions fxLayoutAlign=\"center center\">\n        <div\n          fxFlex=\"100%\"\n          skeleton-text\n          [effect]=\"SkeletonEffect\"\n          fxLayoutAlign=\"center center\"\n        >\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\"> save </mat-icon>\n\n          Save Settings\n        </div>\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        <button\n          mat-raised-button\n          type=\"submit\"\n          fxFlex=\"100%\"\n          color=\"primary\"\n          [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\"\n        >\n          <mat-icon>save</mat-icon>\n          Save Settings\n        </button>\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: i5$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\n  class=\"security-form\"\n  [formGroup]=\"SecurityFormGroup\"\n  (ngSubmit)=\"SecuritySubmit()\"\n>\n  <mat-card class=\"flow-card\">\n    <!-- SKELETON LOADING -->\n    <ng-container *ngIf=\"State?.Loading\">\n      <mat-card-header fxLayoutAlign=\"space-between center\">\n        <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">\n          Security Settings\n        </mat-card-title>\n        <div fxLayoutAlign=\"space-around center\">\n          <div skeleton-text [effect]=\"SkeletonEffect\">XXX</div>\n\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\">\n            info_outline\n          </mat-icon>\n        </div>\n      </mat-card-header>\n\n      <mat-card-actions fxLayoutAlign=\"center center\">\n        <div\n          fxFlex=\"100%\"\n          skeleton-text\n          [effect]=\"SkeletonEffect\"\n          fxLayoutAlign=\"center center\"\n        >\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\"> save </mat-icon>\n\n          Save Settings\n        </div>\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        <button\n          mat-raised-button\n          type=\"submit\"\n          fxFlex=\"100%\"\n          color=\"primary\"\n          [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\"\n        >\n          <mat-icon>save</mat-icon>\n          Save Settings\n        </button>\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: ['environment-lookup']
-            }], SaveStatusEvent: [{
+                args: ['editing-application']
+            }], SaveFormEvent: [{
                 type: Output,
-                args: ['save-status-event']
-            }], BranchesInput: [{
-                type: ViewChild,
-                args: ['branches']
+                args: ['save-form-event']
             }] } });
 
-class SourceControlDialogComponent {
-    constructor(dialogRef, eacSvc, data, snackBar) {
-        this.dialogRef = dialogRef;
+class ProcessorDetailsFormComponent {
+    constructor(appsFlowSvc, formBldr, eacSvc) {
+        this.appsFlowSvc = appsFlowSvc;
+        this.formBldr = formBldr;
         this.eacSvc = eacSvc;
-        this.data = data;
-        this.snackBar = snackBar;
+        this.redirectTooltip = '';
+        this.HasSaveButton = true;
+        this.SaveFormEvent = new EventEmitter();
     }
-    get DevOpsSourceControlFormGroup() {
-        return this.DevopsSourceControl?.DevOpsSourceControlFormGroup;
+    get APIRootFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.apiRoot;
+    }
+    get Environment() {
+        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
+    }
+    get BuildFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.build;
+    }
+    get BuildPathFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.buildPath;
+    }
+    get ClientIDFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.clientId;
+    }
+    get ClientSecretFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.clientSecret;
+    }
+    get DefaultFileFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.defaultFile;
+    }
+    get DefaultSourceControl() {
+        return {
+            Organization: this.EditingApplication?.LowCodeUnit?.Organization,
+            Repository: this.EditingApplication?.LowCodeUnit?.Repository,
+        };
+    }
+    get InboundPathFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.inboundPath;
+    }
+    get IncludeRequestFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.includeRequest;
+    }
+    get MethodsFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.methods;
+    }
+    get PackageFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.package;
+    }
+    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 HasConnection() {
-        return this.State.GitHub.HasConnection;
+    get SecurityFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.security;
     }
     get State() {
         return this.eacSvc.State;
     }
-    ngOnInit() {
-    }
-    CloseDialog() {
-        this.dialogRef.close();
+    get SourceControls() {
+        return this.Environment?.Sources || {};
     }
-    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;
-        }
+    get SourceControlFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.sourceControl;
     }
-    SaveSourceControl() {
-        this.DevopsSourceControl.SaveSourceControl();
+    get SPARootFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.spaRoot;
     }
-}
-SourceControlDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, deps: [{ token: i2$3.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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.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$3.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$3.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 TokenLookupFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.tokenLookup;
     }
-    get ActiveEnvironment() {
-        return this.State?.EaC?.Environments[this.ActiveEnvironmentLookup];
+    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;
     }
-    get ActiveEnvironmentLookup() {
-        //  TODO:  Eventually support multiple environments
-        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
-        return envLookups[0];
+    get VersionFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.version;
     }
-    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 ZipFileFormControl() {
+        return this.ProcessorDetailsFormGroup?.controls.zipFile;
     }
-    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';
+    ngOnInit() {
+        if (!this.EditingApplication) {
+            this.CreateNewApplication();
         }
         else {
-            return 'help_outline';
+            this.setupProcessorDetailsForm();
         }
     }
-    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';
+    CreateNewApplication() {
+        this.SetEditingApplication(Guid.CreateRaw());
+    }
+    DetermineTooltipText() {
+        let permanentValue = this.PermanentFormControl.value;
+        let preserveValue = this.PreserveMethodFormControl.value;
+        if (permanentValue === true && preserveValue === false) {
+            this.redirectTooltip = '301 – Permanent and Not Preserve';
         }
-        else {
-            return 'gray';
+        else if (permanentValue === false && preserveValue === false) {
+            this.redirectTooltip = '302 – Not Permanent and Not Preserve';
         }
-    }
-    get State() {
-        return this.eacSvc.State;
-    }
-    //  Life Cycle
-    ngOnInit() {
-        this.handleRefresh();
-    }
-    //  API Methods
-    CalculateTimelapse(timestamp) {
-        return moment(timestamp).fromNow();
-    }
-    HandleAction(action) {
-        if (action.ActionType == 'Link') {
-            if (action.Action.startsWith('http')) {
-                window.open(action.Action, '_blank');
-            }
-            else {
-                window.location.href = action.Action;
-            }
+        else if (permanentValue === false && preserveValue === true) {
+            this.redirectTooltip = '307 – Not Permanent and Preserve';
         }
-        else if (action.ActionType == 'Modal') {
-            if (action.Action == 'AddSourceControl') {
-                this.OpenSourceControlDialog(null);
-            }
-            else {
-                alert('other modaled ' + action.Action);
-            }
+        else if (permanentValue === true && preserveValue === true) {
+            this.redirectTooltip = '308 – Permanent and Preserve';
         }
     }
-    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);
+    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 (!app.LookupConfig.PathRegex.startsWith('/')) {
+            app.LookupConfig.PathRegex = `/${app.LookupConfig.PathRegex}`;
+        }
+        const saveAppReq = {
+            ProjectLookup: this.ProjectLookup,
+            Application: app,
+            ApplicationLookup: this.EditingApplicationLookup || Guid.CreateRaw(),
+        };
+        this.eacSvc.SaveApplicationAsCode(saveAppReq).then((res) => {
+            this.SaveFormEvent.emit(res);
+        });
     }
-}
-MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }, { token: i2$3.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?.Content\">\n                  <div class=\"content\">\n                    {{ tab.Data?.Content }}\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\n                <ng-container *ngIf=\"tab.Data?.Comments\">\n                  <div class=\"comments\">\n                    <ng-container *ngIf=\"tab.Data?.Comments?.length <= 0\">\n                      <h4>No comments provided</h4>\n                    </ng-container>\n\n                    <mat-card *ngFor=\"let comment of tab.Data?.Comments\">\n                      <mat-card-header>\n                        <img\n                          mat-card-avatar\n                          class=\"example-header-image\"\n                          [src]=\"comment.Avatar\"\n                          *ngIf=\"comment.Avatar\"\n                        />\n\n                        <mat-card-title>\n                          {{ comment.Author }}\n                          commented on\n                          {{ comment.UpdatedAt }}\n                        </mat-card-title>\n                      </mat-card-header>\n\n                      <mat-card-content>\n                        {{ comment.Comment }}\n                      </mat-card-content>\n                    </mat-card>\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$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$2.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.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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?.Content\">\n                  <div class=\"content\">\n                    {{ tab.Data?.Content }}\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\n                <ng-container *ngIf=\"tab.Data?.Comments\">\n                  <div class=\"comments\">\n                    <ng-container *ngIf=\"tab.Data?.Comments?.length <= 0\">\n                      <h4>No comments provided</h4>\n                    </ng-container>\n\n                    <mat-card *ngFor=\"let comment of tab.Data?.Comments\">\n                      <mat-card-header>\n                        <img\n                          mat-card-avatar\n                          class=\"example-header-image\"\n                          [src]=\"comment.Avatar\"\n                          *ngIf=\"comment.Avatar\"\n                        />\n\n                        <mat-card-title>\n                          {{ comment.Author }}\n                          commented on\n                          {{ comment.UpdatedAt }}\n                        </mat-card-title>\n                      </mat-card-header>\n\n                      <mat-card-content>\n                        {{ comment.Comment }}\n                      </mat-card-content>\n                    </mat-card>\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$3.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;
+    SetEditingApplication(appLookup) {
+        this.EditingApplication = new EaCApplicationAsCode();
+        this.EditingApplicationLookup = appLookup;
+        this.setupProcessorDetailsForm();
     }
-    ngOnInit() {
+    SourceControlChanged(event) {
+        this.listBuildPaths();
     }
-    ngAfterViewInit() {
-        this.assignCarouselClass();
+    ProcessorTypeChanged(event) {
+        this.ProcessorType = event.value;
+        this.setupProcessorTypeSubForm();
     }
-    LeftChevronClicked() {
-        this.removeCarouselClasses();
-        if (this.carouselIndex === 0) {
-            this.carouselIndex = this.Stats.length - 1;
-        }
-        else {
-            this.carouselIndex--;
-        }
-        this.assignCarouselClass();
+    LCUTypeChanged(event) {
+        this.LCUType = event.value;
+        this.setupLcuTypeSubForm();
     }
-    MoreDetailsClicked() {
-        console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
+    //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');
     }
-    RightChevronClicked() {
-        this.removeCarouselClasses();
-        if (this.carouselIndex === this.Stats.length - 1) {
-            this.carouselIndex = 0;
-        }
-        else {
-            this.carouselIndex++;
-        }
-        this.assignCarouselClass();
+    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();
     }
-    //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');
+    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]);
+            // }
+        });
+    }
+    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;
             }
         }
     }
-    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');
-            }
+    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();
         }
     }
-}
-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';
+    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 IsPrivateFormControl() {
-        return this.SecurityFormGroup?.controls.isPrivate;
+    setupLCUApplicationPointerForm() {
+        this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(this.EditingApplication.LowCodeUnit?.ApplicationID || '', [Validators.required]));
     }
-    get IsTriggerSignInFormControl() {
-        return this.SecurityFormGroup?.controls.isTriggerSignIn;
+    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() {
-        this.setupSecurityFormGroup();
+    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]));
     }
-    SecuritySubmit() {
-        //save the security settings
-        console.log("submitting security values: ", this.SecurityFormGroup.value);
-        this.SaveFormEvent.emit(this.SecurityFormGroup.value);
+    setupLCUWordPressForm() {
+        this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(this.EditingApplication.LowCodeUnit?.APIRoot || '', [Validators.required]));
     }
-    setupSecurityFormGroup() {
-        this.ProcessorType = this.EditingApplication?.Processor?.Type || '';
-        this.SecurityFormGroup = this.formBldr.group({});
-        this.setupSecurityForm();
+    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]));
     }
-    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]));
+    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();
     }
 }
-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\n  class=\"security-form\"\n  [formGroup]=\"SecurityFormGroup\"\n  (ngSubmit)=\"SecuritySubmit()\"\n>\n  <mat-card class=\"flow-card\">\n    <!-- SKELETON LOADING -->\n    <ng-container *ngIf=\"State?.Loading\">\n      <mat-card-header fxLayoutAlign=\"space-between center\">\n        <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">\n          Security Settings\n        </mat-card-title>\n        <div fxLayoutAlign=\"space-around center\">\n          <div skeleton-text [effect]=\"SkeletonEffect\">XXX</div>\n\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\">\n            info_outline\n          </mat-icon>\n        </div>\n      </mat-card-header>\n\n      <mat-card-actions fxLayoutAlign=\"center center\">\n        <div\n          fxFlex=\"100%\"\n          skeleton-text\n          [effect]=\"SkeletonEffect\"\n          fxLayoutAlign=\"center center\"\n        >\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\"> save </mat-icon>\n\n          Save Settings\n        </div>\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        <button\n          mat-raised-button\n          type=\"submit\"\n          fxFlex=\"100%\"\n          color=\"primary\"\n          [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\"\n        >\n          <mat-icon>save</mat-icon>\n          Save Settings\n        </button>\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: i5$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: [{
+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: i5$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-security-toggle', template: "<form\n  class=\"security-form\"\n  [formGroup]=\"SecurityFormGroup\"\n  (ngSubmit)=\"SecuritySubmit()\"\n>\n  <mat-card class=\"flow-card\">\n    <!-- SKELETON LOADING -->\n    <ng-container *ngIf=\"State?.Loading\">\n      <mat-card-header fxLayoutAlign=\"space-between center\">\n        <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">\n          Security Settings\n        </mat-card-title>\n        <div fxLayoutAlign=\"space-around center\">\n          <div skeleton-text [effect]=\"SkeletonEffect\">XXX</div>\n\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\">\n            info_outline\n          </mat-icon>\n        </div>\n      </mat-card-header>\n\n      <mat-card-actions fxLayoutAlign=\"center center\">\n        <div\n          fxFlex=\"100%\"\n          skeleton-text\n          [effect]=\"SkeletonEffect\"\n          fxLayoutAlign=\"center center\"\n        >\n          <mat-icon skeleton-text [effect]=\"SkeletonEffect\"> save </mat-icon>\n\n          Save Settings\n        </div>\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        <button\n          mat-raised-button\n          type=\"submit\"\n          fxFlex=\"100%\"\n          color=\"primary\"\n          [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\"\n        >\n          <mat-icon>save</mat-icon>\n          Save Settings\n        </button>\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: [{
+            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']
@@ -5617,6 +5296,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 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,
+                // ],
+            });
+        }
+    }
+}
+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-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 BreadcrumbComponent {
     constructor(eacSvc) {
         this.eacSvc = eacSvc;
@@ -5716,7 +5495,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: 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: i2$1.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"] }] });
+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: i2$1.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"] }] });
 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"] }]
@@ -5749,10 +5528,10 @@ class CustomDomainDialogComponent {
     }
 }
 CustomDomainDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CustomDomainDialogComponent, deps: [{ token: i2$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-CustomDomainDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CustomDomainDialogComponent, selector: "lcu-custom-domain-dialog", ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<lcu-domains\n[data]=\"DomainData\"\n>\n\n</lcu-domains>\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: DomainsComponent, selector: "lcu-domains", inputs: ["data"] }], 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"] }] });
+CustomDomainDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CustomDomainDialogComponent, selector: "lcu-custom-domain-dialog", ngImport: i0, template: "<!-- <div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div> -->\n\n\n\n\n<!-- NEW BELOW -->\n<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Custom Domain</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\n\n    <lcu-domains\n    [data]=\"DomainData\"\n    >\n    \n    </lcu-domains>\n\n    <!-- <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n        {{ ErrorMessage }}\n    </mat-error> -->\n\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)=\"SaveCustomDomain()\"\n          [disabled]=\"!BuildPipelineFormGroup?.valid || !BuildPipelineFormGroup?.dirty\">\n          Save\n        </button>\n\n</mat-dialog-actions> -->\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: DomainsComponent, selector: "lcu-domains", inputs: ["data"] }], 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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CustomDomainDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-custom-domain-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<lcu-domains\n[data]=\"DomainData\"\n>\n\n</lcu-domains>\n", styles: [""] }]
+            args: [{ selector: 'lcu-custom-domain-dialog', template: "<!-- <div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div> -->\n\n\n\n\n<!-- NEW BELOW -->\n<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Custom Domain</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\n\n    <lcu-domains\n    [data]=\"DomainData\"\n    >\n    \n    </lcu-domains>\n\n    <!-- <mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n        {{ ErrorMessage }}\n    </mat-error> -->\n\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)=\"SaveCustomDomain()\"\n          [disabled]=\"!BuildPipelineFormGroup?.valid || !BuildPipelineFormGroup?.dirty\">\n          Save\n        </button>\n\n</mat-dialog-actions> -->\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i2$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5776,33 +5555,199 @@ class EditApplicationDialogComponent {
     CloseDialog() {
         this.dialogRef.close();
     }
-    HandleSaveApplicationEvent(event) {
-        console.log("event to save: ", event);
-        if (event.Code === 0) {
-            this.snackBar.open("Application Succesfully Updated", "Dismiss", {
+    HandleSaveApplicationEvent(event) {
+        console.log("event to save: ", event);
+        if (event.Code === 0) {
+            this.snackBar.open("Application Succesfully Updated", "Dismiss", {
+                duration: 5000
+            });
+            this.CloseDialog();
+        }
+        else {
+            this.ErrorMessage = event.Message;
+        }
+    }
+    SaveApplication() {
+        this.EditApplicationControl.SaveApplication();
+    }
+}
+EditApplicationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EditApplicationDialogComponent, deps: [{ token: EaCService }, { token: i2$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+EditApplicationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EditApplicationDialogComponent, selector: "lcu-edit-application-dialog", viewQueries: [{ propertyName: "EditApplicationControl", first: true, predicate: EditApplicationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Edit Application:\n        {{ data.application?.Application?.Name }}</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<lcu-edit-application-form \n    [application-lookup]=\"data.applicationLookup\"\n    [editing-application]=\"data.application\"\n    [project-lookup]=\"data.projectLookup\"\n    (save-form-event)=\"HandleSaveApplicationEvent($event)\">\n</lcu-edit-application-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\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        *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveApplication()\"\n          [disabled]=\"!ApplicationFormGroup?.valid || !ApplicationFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>\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"] }], 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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.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$3.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: EditApplicationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-edit-application-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Edit Application:\n        {{ data.application?.Application?.Name }}</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<lcu-edit-application-form \n    [application-lookup]=\"data.applicationLookup\"\n    [editing-application]=\"data.application\"\n    [project-lookup]=\"data.projectLookup\"\n    (save-form-event)=\"HandleSaveApplicationEvent($event)\">\n</lcu-edit-application-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\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        *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveApplication()\"\n          [disabled]=\"!ApplicationFormGroup?.valid || !ApplicationFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>\n\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i2$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { EditApplicationControl: [{
+                type: ViewChild,
+                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 = event.Message;
+            this.ErrorMessage = status.Message;
         }
     }
-    SaveApplication() {
-        this.EditApplicationControl.SaveApplication();
-    }
 }
-EditApplicationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EditApplicationDialogComponent, deps: [{ token: EaCService }, { token: i2$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-EditApplicationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EditApplicationDialogComponent, selector: "lcu-edit-application-dialog", viewQueries: [{ propertyName: "EditApplicationControl", first: true, predicate: EditApplicationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Edit Application:\n        {{ data.application?.Application?.Name }}</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<lcu-edit-application-form \n    [application-lookup]=\"data.applicationLookup\"\n    [editing-application]=\"data.application\"\n    [project-lookup]=\"data.projectLookup\"\n    (save-form-event)=\"HandleSaveApplicationEvent($event)\">\n</lcu-edit-application-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\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        *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveApplication()\"\n          [disabled]=\"!ApplicationFormGroup?.valid || !ApplicationFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>\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"] }], 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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.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$3.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: EditApplicationDialogComponent, decorators: [{
+NewApplicationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NewApplicationDialogComponent, deps: [{ token: EaCService }, { token: i2$3.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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.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$3.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-edit-application-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>Edit Application:\n        {{ data.application?.Application?.Name }}</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<lcu-edit-application-form \n    [application-lookup]=\"data.applicationLookup\"\n    [editing-application]=\"data.application\"\n    [project-lookup]=\"data.projectLookup\"\n    (save-form-event)=\"HandleSaveApplicationEvent($event)\">\n</lcu-edit-application-form>\n\n<mat-error *ngIf=\"ErrorMessage\" fxLayoutAlign=\"center center\" >\n    {{ ErrorMessage }}\n</mat-error>\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        *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"25%\" \n          color=\"primary\" \n          (click)=\"SaveApplication()\"\n          [disabled]=\"!ApplicationFormGroup?.valid || !ApplicationFormGroup?.dirty\">\n          <!-- <mat-icon>save</mat-icon> -->\n          Save\n        </button>\n\n</mat-dialog-actions>\n\n", styles: [""] }]
+            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$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { EditApplicationControl: [{
+                }] }, { type: i3$1.MatSnackBar }]; }, propDecorators: { ApplicationFormControls: [{
                 type: ViewChild,
                 args: [EditApplicationFormComponent]
+            }], ProcessorDetailsFormControls: [{
+                type: ViewChild,
+                args: [ProcessorDetailsFormComponent]
             }] } });
 
 class ProcessorDetailsDialogComponent {
@@ -5872,10 +5817,10 @@ class SkeletonFeedCardComponent {
     }
 }
 SkeletonFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SkeletonFeedCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkeletonFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SkeletonFeedCardComponent, selector: "lcu-skeleton-feed-card", ngImport: i0, template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", 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}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$1.MatCardHeader, selector: "mat-card-header" }, { type: i4$3.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i1$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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"] }] });
+SkeletonFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SkeletonFeedCardComponent, selector: "lcu-skeleton-feed-card", ngImport: i0, template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", 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:24px;width:24px;font-size:24px;cursor:pointer}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$1.MatCardHeader, selector: "mat-card-header" }, { type: i4$3.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i1$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SkeletonFeedCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-skeleton-feed-card', template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", 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}\n"] }]
+            args: [{ selector: 'lcu-skeleton-feed-card', template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", 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:24px;width:24px;font-size:24px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class EmulatedDevicesToggleComponent {
@@ -5994,6 +5939,394 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.LCUServiceSettings }]; } });
 
+class FeedHeaderDialogComponent {
+    constructor(appsFlowSvc, eacSvc, formBldr, dialogRef, data) {
+        this.appsFlowSvc = appsFlowSvc;
+        this.eacSvc = eacSvc;
+        this.formBldr = formBldr;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.EditorConfig = {
+            editable: true,
+            spellcheck: true,
+            height: '250px',
+            minHeight: '0',
+            maxHeight: 'auto',
+            width: 'auto',
+            minWidth: '0',
+            translate: 'yes',
+            enableToolbar: true,
+            showToolbar: true,
+            placeholder: 'Enter text here...',
+            defaultParagraphSeparator: '',
+            defaultFontName: '',
+            defaultFontSize: '',
+            fonts: [
+                { class: 'arial', name: 'Arial' },
+                { class: 'times-new-roman', name: 'Times New Roman' },
+                { class: 'calibri', name: 'Calibri' },
+                { class: 'comic-sans-ms', name: 'Comic Sans MS' }
+            ],
+            customClasses: [
+                {
+                    name: 'quote',
+                    class: 'quote',
+                },
+                {
+                    name: 'redText',
+                    class: 'redText'
+                },
+                {
+                    name: 'titleText',
+                    class: 'titleText',
+                    tag: 'h1',
+                },
+            ],
+            sanitize: true,
+            toolbarPosition: 'top',
+            toolbarHiddenButtons: [
+                ['subscript', 'superscript'],
+                ['fontSize']
+            ]
+        };
+        this.SlicesCount = 5;
+        this.Slices = {
+            Sources: this.SlicesCount,
+        };
+        if (this.SourceControlLookups.length === 1) {
+            this.SourceControl = this.Environment?.Sources[this.SourceControlLookups[0]];
+        }
+    }
+    get ActionIconControl() {
+        return this.FeedHeaderFormGroup?.controls.actionIcon;
+    }
+    get ActionLinkControl() {
+        return this.FeedHeaderFormGroup?.controls.actionLink;
+    }
+    get ActionTextControl() {
+        return this.FeedHeaderFormGroup?.controls.actionText;
+    }
+    get EditorControl() {
+        return this.FeedHeaderFormGroup?.controls.editor;
+    }
+    get Environment() {
+        return this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment];
+    }
+    get TargetBranchFormControl() {
+        return this.FeedHeaderFormGroup.controls.targetBranch;
+    }
+    get OrganizationFormControl() {
+        return this.FeedHeaderFormGroup.controls.organization;
+    }
+    get SourceBranchFormControl() {
+        return this.FeedHeaderFormGroup.controls.sourceBranch;
+    }
+    get RepositoryFormControl() {
+        return this.FeedHeaderFormGroup.controls.repository;
+    }
+    get SourceControlFormControl() {
+        return this.FeedHeaderFormGroup.controls.sourceControl;
+    }
+    get SourceControlLookups() {
+        return this.State.FeedSourceControlLookups
+            ? this.State.FeedSourceControlLookups
+            : Object.keys(this.SourceControls || {});
+    }
+    get SourceControls() {
+        return this.Environment?.Sources || {};
+    }
+    get SubtitleFormControl() {
+        return this.FeedHeaderFormGroup.controls.subtitle;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    get TitleFormControl() {
+        return this.FeedHeaderFormGroup?.controls.title;
+    }
+    ngOnInit() {
+        this.setupFeedHeaderForm();
+    }
+    CloseDialog() {
+        this.dialogRef.close();
+    }
+    HandleAction() {
+        if (this.ActionLinkControl.value.startsWith('http')) {
+            window.open(this.ActionLinkControl.value, '_blank');
+        }
+        else {
+            window.location.href = this.ActionLinkControl.value;
+        }
+    }
+    PullRequestSourceControlChanged(event) {
+        this.SourceControl = this.SourceControls[this.SourceControlFormControl.value];
+        this.listBranches();
+    }
+    FeatureBranchSourceControlChanged(event) {
+        this.SourceControl = this.SourceControls[this.SourceControlFormControl.value];
+        this.listOrganizations();
+    }
+    IssueSourceControlChanged(event) {
+        this.SourceControl = this.SourceControls[this.SourceControlFormControl.value];
+    }
+    Submit() {
+        let returnObject = {
+            ActionIcon: this.ActionIconControl ? this.ActionIconControl.value : null,
+            ActionLink: this.ActionLinkControl ? this.ActionLinkControl.value : null,
+            ActionText: this.ActionTextControl ? this.ActionTextControl.value : null,
+            Avatar: null,
+            Content: this.EditorControl ? this.EditorControl.value : null,
+            ExpiresAt: null,
+            Organization: this.OrganizationFormControl ? this.OrganizationFormControl.value : null,
+            Repositroy: this.RepositoryFormControl ? this.RepositoryFormControl.value : null,
+            SourceBranch: this.SourceBranchFormControl ? this.SourceBranchFormControl.value : null,
+            SourceControlLookup: this.SourceControlFormControl ? this.SourceBranchFormControl.value : null,
+            Subtitle: this.SubtitleFormControl ? this.SubtitleFormControl.value : null,
+            TargetBranch: this.TargetBranchFormControl ? this.TargetBranchFormControl.value : null,
+            Type: this.data.type,
+            Title: this.TitleFormControl ? this.TitleFormControl.value : null,
+        };
+        console.log("Control: ", returnObject);
+        let status = this.eacSvc.SubmitFeedEntry(returnObject);
+        console.log("feed entry status: ", status);
+        // console.log("Editor: ", this.EditorControl.value )
+    }
+    OrganizationChanged(event) {
+        this.RepositoryFormControl.reset();
+        this.listRepositories();
+    }
+    RepositoryChanged(event) {
+        this.listBranches();
+    }
+    //HELPERS
+    listBranches() {
+        // this.Loading = true;
+        this.appsFlowSvc
+            .ListBranches(this.SourceControl?.Organization, this.SourceControl?.Repository)
+            .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];
+            // }
+        });
+    }
+    listOrganizations() {
+        // this.Loading = true;
+        this.appsFlowSvc
+            .ListOrganizations()
+            .subscribe((response) => {
+            this.OrganizationOptions = response.Model;
+            console.log("Organization Options: ", this.OrganizationOptions);
+            // this.Loading = false;
+            if (this.SourceControl?.Organization) {
+                setTimeout(() => {
+                    this.OrganizationFormControl.setValue(this.SourceControl.Organization);
+                    this.listRepositories(this.SourceControl?.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();
+                }, 0);
+            }
+        });
+    }
+    setupFeedHeaderForm() {
+        this.FeedHeaderFormGroup = this.formBldr.group({});
+        switch (this.data.type) {
+            case "announcement":
+                this.setupAnnouncementForm();
+                break;
+            case "PullRequest":
+                this.setupPRForm();
+                break;
+            case "OpenIssue":
+                this.setupIssueForm();
+                break;
+            case "CreateBranch":
+                this.setupFeatureBranchForm();
+                break;
+            default:
+                // 
+                break;
+        }
+    }
+    setupAnnouncementForm() {
+        this.setupBasicForm();
+        this.FeedHeaderFormGroup.addControl('subtitle', this.formBldr.control(''));
+        this.FeedHeaderFormGroup.addControl('actionText', this.formBldr.control(''));
+        this.FeedHeaderFormGroup.addControl('actionLink', this.formBldr.control(''));
+        this.FeedHeaderFormGroup.addControl('actionIcon', this.formBldr.control(''));
+    }
+    setupPRForm() {
+        this.listBranches();
+        this.setupIssueForm();
+        this.setupBranchesForm();
+    }
+    setupBasicForm() {
+        this.FeedHeaderFormGroup.addControl('title', this.formBldr.control('', [Validators.required]));
+        this.FeedHeaderFormGroup.addControl('editor', this.formBldr.control(''));
+    }
+    setupIssueForm() {
+        this.setupBasicForm();
+        this.setupSourceControlForm();
+    }
+    setupFeatureBranchForm() {
+        this.setupSourceControlForm();
+        this.FeedHeaderFormGroup.addControl('organization', this.formBldr.control(''));
+        this.FeedHeaderFormGroup.addControl('repository', this.formBldr.control(''));
+        this.setupBranchesForm();
+    }
+    setupSourceControlForm() {
+        this.FeedHeaderFormGroup.addControl('sourceControl', this.formBldr.control(''));
+    }
+    setupBranchesForm() {
+        this.FeedHeaderFormGroup.addControl('targetBranch', this.formBldr.control(''));
+        this.FeedHeaderFormGroup.addControl('sourceBranch', this.formBldr.control(''));
+    }
+}
+FeedHeaderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedHeaderDialogComponent, deps: [{ token: ApplicationsFlowService }, { token: EaCService }, { token: i1$2.FormBuilder }, { token: i2$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+FeedHeaderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FeedHeaderDialogComponent, selector: "lcu-feed-header-dialog", ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>{{data.dialogTitle}}</h2>\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n    <form [formGroup]=\"FeedHeaderFormGroup\" >\n\n        <!-- ISSUE FORM -->\n        <ng-container *ngIf=\"data.type === 'OpenIssue' \">\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n                <mat-form-field appearance=\"fill\">\n                    <mat-label>Source Control</mat-label>\n                    <mat-select \n                        formControlName=\"sourceControl\"\n                        (selectionChange)=\"IssueSourceControlChanged($event)\"\n\n                    >\n                    <ng-container *ngFor=\"let scLookup of SourceControlLookups | slice: 0:Slices.Sources\">\n                    <mat-option *ngIf=\"SourceControls[scLookup]; let sc\" [value]=\"scLookup\">\n                        {{sc.Name}}\n                    </mat-option>\n                    </ng-container>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Title\"\n                formControlName=\"title\"\n                required\n                />\n            </mat-form-field>\n\n\n            <angular-editor \n                id=\"issue-editor\"\n                formControlName=\"editor\" \n                [config]=\"EditorConfig\"\n            ></angular-editor>\n        </ng-container>\n\n        <!-- ANNOUNCEMENT FORM -->\n\n        <ng-container *ngIf=\"data.type === 'announcement' \">\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Title\"\n                formControlName=\"title\"\n                required\n                />\n            </mat-form-field>\n\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Subtitle\"\n                formControlName=\"subtitle\"\n                />\n            </mat-form-field>\n\n            <angular-editor \n                id=\"announcement-editor\"\n                formControlName=\"editor\" \n                [config]=\"EditorConfig\"\n            ></angular-editor>\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field class=\"mat-full-width\">\n                    <input\n                    matInput\n                    placeholder=\"Action Text\"\n                    formControlName=\"actionText\"\n                    />\n                </mat-form-field>\n\n                <mat-form-field class=\"mat-full-width\">\n                    <input\n                    matInput\n                    placeholder=\"Action Link\"\n                    formControlName=\"actionLink\"\n                    />\n                </mat-form-field>\n\n                <mat-form-field class=\"mat-full-width\">\n                    <input\n                    matInput\n                    placeholder=\"Action Icon\"\n                    formControlName=\"actionIcon\"\n                    />\n                </mat-form-field>\n\n            </div>\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <button \n                *ngIf=\"ActionTextControl?.value || ActionIconControl?.value\"\n                    mat-button color=\"primary\" \n                    (click)=\"HandleAction(ActionLinkControl?.value)\"\n                >\n                    <mat-icon *ngIf=\"ActionIconControl?.value\">{{ ActionIconControl?.value }}</mat-icon>\n            \n                    {{ ActionTextControl?.value }}\n                  </button>\n\n                  <button \n                    *ngIf=\"!ActionTextControl?.value && !ActionIconControl?.value\"\n                    mat-button color=\"primary\" \n                >\n                    <mat-icon>cruelty_free</mat-icon>\n            \n                    Example Button\n                  </button>\n            </div>\n\n        </ng-container>\n\n        <!-- PR FORM -->\n\n        <ng-container *ngIf=\"data.type === 'PullRequest' \">\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n                <mat-form-field appearance=\"fill\">\n                    <mat-label>Source Control</mat-label>\n                    <mat-select \n                        formControlName=\"sourceControl\"\n                        (selectionChange)=\"PullRequestSourceControlChanged($event)\"\n                    >\n                    <ng-container *ngFor=\"let scLookup of SourceControlLookups | slice: 0:Slices.Sources\">\n                    <mat-option *ngIf=\"SourceControls[scLookup]; let sc\" [value]=\"scLookup\">\n                        {{sc.Name}}\n                    </mat-option>\n                    </ng-container>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n            <mat-form-field appearance=\"fill\">\n                <mat-label>Base</mat-label>\n                <mat-select formControlName=\"targetBranch\" required\n                >\n                  <mat-option *ngFor=\"let branchOpt of BranchOptions\" [value]=\"branchOpt.Name\">\n                    {{branchOpt.Name}}\n                  </mat-option>\n                </mat-select>\n            </mat-form-field>\n              \n              <mat-icon>arrow_back</mat-icon>\n\n              <mat-form-field appearance=\"fill\">\n                <mat-label>Compare</mat-label>\n                <mat-select formControlName=\"sourceBranch\" required\n                >\n                  <mat-option *ngFor=\"let branchOpt of BranchOptions\" [value]=\"branchOpt.Name\">\n                    {{branchOpt.Name}}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Title\"\n                formControlName=\"title\"\n                required\n                />\n            </mat-form-field>\n\n\n            <angular-editor \n                id=\"pr-editor\"\n                formControlName=\"editor\" \n                [config]=\"EditorConfig\"\n            ></angular-editor>\n\n        </ng-container>\n\n        <!-- Feature Branch form -->\n\n        <ng-container *ngIf=\"data.type === 'CreateBranch' \">\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n                <mat-form-field >\n                    <mat-label>Source Control</mat-label>\n                    <mat-select \n                        formControlName=\"sourceControl\"\n                        (selectionChange)=\"FeatureBranchSourceControlChanged($event)\"\n                    >\n                    <ng-container *ngFor=\"let scLookup of SourceControlLookups | slice: 0:Slices.Sources\">\n                    <mat-option *ngIf=\"SourceControls[scLookup]; let sc\" [value]=\"scLookup\">\n                        {{sc.Name}}\n                    </mat-option>\n                    </ng-container>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n\n            <mat-form-field *ngIf=\"OrganizationOptions?.length > 0\">\n\n            <mat-select \n              formControlName=\"organization\" \n              placeholder=\"Organization\"\n              (selectionChange)=\"OrganizationChanged($event)\" \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\n\n          </mat-form-field>\n\n          <mat-form-field *ngIf=\"RepositoryOptions?.length > 0\">\n\n            <mat-select formControlName=\"repository\" \n                        placeholder=\"Repository\"  \n                        (selectionChange)=\"RepositoryChanged($event)\" \n                        required\n            >\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          </mat-form-field>\n\n        </div>\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-around center\" *ngIf=\"BranchOptions?.length > 0\">\n\n            <mat-form-field >\n                <mat-label>Base Branch</mat-label>\n                <mat-select formControlName=\"sourceBranch\" required\n                >\n                <mat-option *ngFor=\"let branchOpt of BranchOptions\" [value]=\"branchOpt.Name\">\n                    {{branchOpt.Name}}\n                </mat-option>\n                </mat-select>\n            </mat-form-field>\n\n            <mat-form-field >\n                <input\n                matInput\n                placeholder=\"Create New Branch\"\n                formControlName=\"targetBranch\"\n                required\n                />\n            </mat-form-field>\n        </div>\n\n        </ng-container>\n\n\n\n\n\n    </form>\n    \n    \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        mat-raised-button \n        color=\"primary\"\n        fxFlex=\"25%\"\n        class=\"submit\" \n        (click)=\"Submit()\"\n        [disabled]=\"\n    !FeedHeaderFormGroup?.valid \n\"\n        \n    >\n        Submit\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: 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: i10.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }], 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$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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.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.MatLabel, selector: "mat-label" }, { 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: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$3.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"] }], pipes: { "slice": i9.SlicePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedHeaderDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-feed-header-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"space-between center\">\n    <h2 mat-dialog-title>{{data.dialogTitle}}</h2>\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<mat-dialog-content>\n    <form [formGroup]=\"FeedHeaderFormGroup\" >\n\n        <!-- ISSUE FORM -->\n        <ng-container *ngIf=\"data.type === 'OpenIssue' \">\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n                <mat-form-field appearance=\"fill\">\n                    <mat-label>Source Control</mat-label>\n                    <mat-select \n                        formControlName=\"sourceControl\"\n                        (selectionChange)=\"IssueSourceControlChanged($event)\"\n\n                    >\n                    <ng-container *ngFor=\"let scLookup of SourceControlLookups | slice: 0:Slices.Sources\">\n                    <mat-option *ngIf=\"SourceControls[scLookup]; let sc\" [value]=\"scLookup\">\n                        {{sc.Name}}\n                    </mat-option>\n                    </ng-container>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Title\"\n                formControlName=\"title\"\n                required\n                />\n            </mat-form-field>\n\n\n            <angular-editor \n                id=\"issue-editor\"\n                formControlName=\"editor\" \n                [config]=\"EditorConfig\"\n            ></angular-editor>\n        </ng-container>\n\n        <!-- ANNOUNCEMENT FORM -->\n\n        <ng-container *ngIf=\"data.type === 'announcement' \">\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Title\"\n                formControlName=\"title\"\n                required\n                />\n            </mat-form-field>\n\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Subtitle\"\n                formControlName=\"subtitle\"\n                />\n            </mat-form-field>\n\n            <angular-editor \n                id=\"announcement-editor\"\n                formControlName=\"editor\" \n                [config]=\"EditorConfig\"\n            ></angular-editor>\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field class=\"mat-full-width\">\n                    <input\n                    matInput\n                    placeholder=\"Action Text\"\n                    formControlName=\"actionText\"\n                    />\n                </mat-form-field>\n\n                <mat-form-field class=\"mat-full-width\">\n                    <input\n                    matInput\n                    placeholder=\"Action Link\"\n                    formControlName=\"actionLink\"\n                    />\n                </mat-form-field>\n\n                <mat-form-field class=\"mat-full-width\">\n                    <input\n                    matInput\n                    placeholder=\"Action Icon\"\n                    formControlName=\"actionIcon\"\n                    />\n                </mat-form-field>\n\n            </div>\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <button \n                *ngIf=\"ActionTextControl?.value || ActionIconControl?.value\"\n                    mat-button color=\"primary\" \n                    (click)=\"HandleAction(ActionLinkControl?.value)\"\n                >\n                    <mat-icon *ngIf=\"ActionIconControl?.value\">{{ ActionIconControl?.value }}</mat-icon>\n            \n                    {{ ActionTextControl?.value }}\n                  </button>\n\n                  <button \n                    *ngIf=\"!ActionTextControl?.value && !ActionIconControl?.value\"\n                    mat-button color=\"primary\" \n                >\n                    <mat-icon>cruelty_free</mat-icon>\n            \n                    Example Button\n                  </button>\n            </div>\n\n        </ng-container>\n\n        <!-- PR FORM -->\n\n        <ng-container *ngIf=\"data.type === 'PullRequest' \">\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n                <mat-form-field appearance=\"fill\">\n                    <mat-label>Source Control</mat-label>\n                    <mat-select \n                        formControlName=\"sourceControl\"\n                        (selectionChange)=\"PullRequestSourceControlChanged($event)\"\n                    >\n                    <ng-container *ngFor=\"let scLookup of SourceControlLookups | slice: 0:Slices.Sources\">\n                    <mat-option *ngIf=\"SourceControls[scLookup]; let sc\" [value]=\"scLookup\">\n                        {{sc.Name}}\n                    </mat-option>\n                    </ng-container>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n            <mat-form-field appearance=\"fill\">\n                <mat-label>Base</mat-label>\n                <mat-select formControlName=\"targetBranch\" required\n                >\n                  <mat-option *ngFor=\"let branchOpt of BranchOptions\" [value]=\"branchOpt.Name\">\n                    {{branchOpt.Name}}\n                  </mat-option>\n                </mat-select>\n            </mat-form-field>\n              \n              <mat-icon>arrow_back</mat-icon>\n\n              <mat-form-field appearance=\"fill\">\n                <mat-label>Compare</mat-label>\n                <mat-select formControlName=\"sourceBranch\" required\n                >\n                  <mat-option *ngFor=\"let branchOpt of BranchOptions\" [value]=\"branchOpt.Name\">\n                    {{branchOpt.Name}}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n\n            <mat-form-field class=\"mat-full-width\">\n                <input\n                matInput\n                placeholder=\"Title\"\n                formControlName=\"title\"\n                required\n                />\n            </mat-form-field>\n\n\n            <angular-editor \n                id=\"pr-editor\"\n                formControlName=\"editor\" \n                [config]=\"EditorConfig\"\n            ></angular-editor>\n\n        </ng-container>\n\n        <!-- Feature Branch form -->\n\n        <ng-container *ngIf=\"data.type === 'CreateBranch' \">\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n                <mat-form-field >\n                    <mat-label>Source Control</mat-label>\n                    <mat-select \n                        formControlName=\"sourceControl\"\n                        (selectionChange)=\"FeatureBranchSourceControlChanged($event)\"\n                    >\n                    <ng-container *ngFor=\"let scLookup of SourceControlLookups | slice: 0:Slices.Sources\">\n                    <mat-option *ngIf=\"SourceControls[scLookup]; let sc\" [value]=\"scLookup\">\n                        {{sc.Name}}\n                    </mat-option>\n                    </ng-container>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n\n            <div fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n\n            <mat-form-field *ngIf=\"OrganizationOptions?.length > 0\">\n\n            <mat-select \n              formControlName=\"organization\" \n              placeholder=\"Organization\"\n              (selectionChange)=\"OrganizationChanged($event)\" \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\n\n          </mat-form-field>\n\n          <mat-form-field *ngIf=\"RepositoryOptions?.length > 0\">\n\n            <mat-select formControlName=\"repository\" \n                        placeholder=\"Repository\"  \n                        (selectionChange)=\"RepositoryChanged($event)\" \n                        required\n            >\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          </mat-form-field>\n\n        </div>\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-around center\" *ngIf=\"BranchOptions?.length > 0\">\n\n            <mat-form-field >\n                <mat-label>Base Branch</mat-label>\n                <mat-select formControlName=\"sourceBranch\" required\n                >\n                <mat-option *ngFor=\"let branchOpt of BranchOptions\" [value]=\"branchOpt.Name\">\n                    {{branchOpt.Name}}\n                </mat-option>\n                </mat-select>\n            </mat-form-field>\n\n            <mat-form-field >\n                <input\n                matInput\n                placeholder=\"Create New Branch\"\n                formControlName=\"targetBranch\"\n                required\n                />\n            </mat-form-field>\n        </div>\n\n        </ng-container>\n\n\n\n\n\n    </form>\n    \n    \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        mat-raised-button \n        color=\"primary\"\n        fxFlex=\"25%\"\n        class=\"submit\" \n        (click)=\"Submit()\"\n        [disabled]=\"\n    !FeedHeaderFormGroup?.valid \n\"\n        \n    >\n        Submit\n    </button>\n</mat-dialog-actions>\n\n\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$2.FormBuilder }, { type: i2$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class FeedHeaderComponent {
+    constructor(eacSvc, dialog) {
+        this.eacSvc = eacSvc;
+        this.dialog = dialog;
+        this.SkeletonEffect = "wave";
+        // this.selectedBtn = "pr-btn";
+    }
+    get ActiveEnvironmentLookup() {
+        //  TODO:  Eventually support multiple environments
+        const envLookups = Object.keys(this.State?.EaC?.Environments || {});
+        return envLookups[0];
+    }
+    get FeedHeaderActions() {
+        return this.State?.FeedActions;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.addSelectBtn();
+    }
+    CreateAnnouncement() {
+        // this.ModalHeader = "Create Team Announcement";
+        this.OpenFHDialog('announcement', "Create Team Announcement");
+    }
+    // public CreateFeatureBranch(){
+    //   this.removeSelectedBtn();
+    //   this.ModalHeader = "Create Feature Branch";
+    //   this.selectedBtn = "fb-btn";
+    //   this.addSelectBtn();
+    //   console.log("create feature branch selected");
+    //   this.OpenFHDialog('branch');
+    // }
+    // public OpenIssue(){
+    //   this.removeSelectedBtn();
+    //   this.ModalHeader = "Open Issue";
+    //   this.selectedBtn = "oi-btn";
+    //   this.addSelectBtn();
+    //   console.log("open issue selected");
+    //   this.OpenFHDialog('issue');
+    // }
+    // public CreatePullRequest(){
+    //   this.removeSelectedBtn();
+    //   this.ModalHeader = "Create Pull Request";
+    //   this.selectedBtn = "pr-btn";
+    //   this.addSelectBtn();
+    //   console.log("create pull request selected");
+    //   this.OpenFHDialog('pull-request');
+    // }
+    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)
+        });
+    }
+    OpenFHDialog(modalType, modalHeader) {
+        const dialogRef = this.dialog.open(FeedHeaderDialogComponent, {
+            width: '600px',
+            data: {
+                dialogTitle: modalHeader,
+                type: modalType,
+                sourceControlLookup: this.SourceControlLookup ? this.SourceControlLookup : null
+            },
+        });
+        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;
+        }
+    }
+    //HELPERS
+    addSelectBtn() {
+        document.getElementById(this.selectedBtn)?.classList.add('selected');
+    }
+    removeSelectedBtn() {
+        document.getElementById(this.selectedBtn)?.classList.remove('selected');
+    }
+}
+FeedHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedHeaderComponent, deps: [{ token: EaCService }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FeedHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FeedHeaderComponent, selector: "lcu-feed-header", inputs: { SourceControlLookup: ["source-control-lookup", "SourceControlLookup"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <ng-container *ngIf=\"!State?.LoadingFeed\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <mat-icon fxFlex=\"15%\" class=\"gh-icon\" color=\"primary\">error_outline</mat-icon>\n      <div fxFlex=\"85%\" class=\"gh-card-main-content\">\n        <button \n          mat-button \n          class=\"main-btn\"\n          (click)=\"CreateAnnouncement()\" \n          color=\"primary\"\n        >Create Team Announcement</button>\n\n        <!-- <mat-form-field appearance=\"fill\" class=\"gh-input\">\n          <mat-label>{{ InputLabel }}</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"value\" (click)=\"OpenFHDialog('announcement')\"/>\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    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\" \n    >\n      <button \n      *ngFor=\"let action of FeedHeaderActions\"\n        mat-button \n        (click)=\"OpenFHDialog(action.Action, action.Text)\" \n        id=\"pr-btn\" \n        color=\"primary\"\n      >\n      <mat-icon>{{action.Icon}}</mat-icon>\n        {{action.Text}}\n      </button>\n\n      <!-- <button \n        mat-button \n        (click)=\"OpenIssue()\" \n        id=\"oi-btn\" \n        color=\"primary\"\n      >\n        Open Issue\n      </button>\n\n      <button \n        mat-button \n        (click)=\"CreateFeatureBranch()\" \n        id=\"fb-btn\" \n        color=\"primary\"\n      >\n        Feature Branch\n      </button> -->\n\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 class=\"gh-menu-action\" mat-menu-item (click)=\"CreateNewApp()\">\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      </mat-menu> -->\n    </mat-card-actions>\n  </ng-container>\n\n  <!-- SKELETON -->\n  <ng-container *ngIf=\"State?.LoadingFeed\">\n    <div id=\"gh-card-skeleton\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <skeleton-avatar\n        class=\"gh-icon\"\n        [showIcon]=\"false\"\n        [effect]=\"SkeletonEffect\"\n      ></skeleton-avatar>\n\n      <div fxFlex=\"85%\" class=\"gh-card-main-content\">\n        <skeleton-block\n          height=\"60px\"\n          [effect]=\"SkeletonEffect\"\n        ></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    </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  </ng-container>\n</mat-card>\n", 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:24px;width:24px;font-size:24px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.main-btn{width:90%;height:50px;border-radius:30px;border:1px solid}.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.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$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: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-feed-header', template: "<mat-card class=\"social-card\">\n  <ng-container *ngIf=\"!State?.LoadingFeed\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <mat-icon fxFlex=\"15%\" class=\"gh-icon\" color=\"primary\">error_outline</mat-icon>\n      <div fxFlex=\"85%\" class=\"gh-card-main-content\">\n        <button \n          mat-button \n          class=\"main-btn\"\n          (click)=\"CreateAnnouncement()\" \n          color=\"primary\"\n        >Create Team Announcement</button>\n\n        <!-- <mat-form-field appearance=\"fill\" class=\"gh-input\">\n          <mat-label>{{ InputLabel }}</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"value\" (click)=\"OpenFHDialog('announcement')\"/>\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    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\" \n    >\n      <button \n      *ngFor=\"let action of FeedHeaderActions\"\n        mat-button \n        (click)=\"OpenFHDialog(action.Action, action.Text)\" \n        id=\"pr-btn\" \n        color=\"primary\"\n      >\n      <mat-icon>{{action.Icon}}</mat-icon>\n        {{action.Text}}\n      </button>\n\n      <!-- <button \n        mat-button \n        (click)=\"OpenIssue()\" \n        id=\"oi-btn\" \n        color=\"primary\"\n      >\n        Open Issue\n      </button>\n\n      <button \n        mat-button \n        (click)=\"CreateFeatureBranch()\" \n        id=\"fb-btn\" \n        color=\"primary\"\n      >\n        Feature Branch\n      </button> -->\n\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 class=\"gh-menu-action\" mat-menu-item (click)=\"CreateNewApp()\">\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      </mat-menu> -->\n    </mat-card-actions>\n  </ng-container>\n\n  <!-- SKELETON -->\n  <ng-container *ngIf=\"State?.LoadingFeed\">\n    <div id=\"gh-card-skeleton\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <skeleton-avatar\n        class=\"gh-icon\"\n        [showIcon]=\"false\"\n        [effect]=\"SkeletonEffect\"\n      ></skeleton-avatar>\n\n      <div fxFlex=\"85%\" class=\"gh-card-main-content\">\n        <skeleton-block\n          height=\"60px\"\n          [effect]=\"SkeletonEffect\"\n        ></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    </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  </ng-container>\n</mat-card>\n", 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:24px;width:24px;font-size:24px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.main-btn{width:90%;height:50px;border-radius:30px;border:1px solid}.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$3.MatDialog }]; }, propDecorators: { SourceControlLookup: [{
+                type: Input,
+                args: ['source-control-lookup']
+            }] } });
+
 class ApplicationsFlowModule {
     static forRoot() {
         return {
@@ -6038,7 +6371,7 @@ ApplicationsFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         ProjectInfoCardComponent,
         AnalyticsCardComponent,
         FeedCardSmComponent,
-        GhControlComponent,
+        FeedHeaderComponent,
         MainFeedCardComponent,
         TwoColumnHeaderComponent,
         CardCarouselComponent,
@@ -6057,7 +6390,9 @@ ApplicationsFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         ProcessorDetailsDialogComponent,
         SkeletonFeedCardComponent,
         UpgradeDialogComponent,
-        EmulatedDevicesToggleComponent], imports: [ClipboardModule,
+        EmulatedDevicesToggleComponent,
+        FeedHeaderDialogComponent], imports: [AngularEditorModule,
+        ClipboardModule,
         FathymSharedModule,
         FormsModule,
         ReactiveFormsModule,
@@ -6095,7 +6430,8 @@ ApplicationsFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         ProjectInfoCardComponent,
         AnalyticsCardComponent,
         FeedCardSmComponent,
-        GhControlComponent,
+        FeedHeaderComponent,
+        FeedHeaderDialogComponent,
         MainFeedCardComponent,
         TwoColumnHeaderComponent,
         CardCarouselComponent,
@@ -6114,8 +6450,10 @@ ApplicationsFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         ProcessorDetailsDialogComponent,
         SkeletonFeedCardComponent,
         UpgradeDialogComponent,
-        EmulatedDevicesToggleComponent] });
+        EmulatedDevicesToggleComponent,
+        FeedHeaderDialogComponent] });
 ApplicationsFlowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ApplicationsFlowModule, imports: [[
+            AngularEditorModule,
             ClipboardModule,
             FathymSharedModule,
             FormsModule,
@@ -6159,7 +6497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         ProjectInfoCardComponent,
                         AnalyticsCardComponent,
                         FeedCardSmComponent,
-                        GhControlComponent,
+                        FeedHeaderComponent,
                         MainFeedCardComponent,
                         TwoColumnHeaderComponent,
                         CardCarouselComponent,
@@ -6178,9 +6516,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         ProcessorDetailsDialogComponent,
                         SkeletonFeedCardComponent,
                         UpgradeDialogComponent,
-                        EmulatedDevicesToggleComponent
+                        EmulatedDevicesToggleComponent,
+                        FeedHeaderDialogComponent
                     ],
                     imports: [
+                        AngularEditorModule,
                         ClipboardModule,
                         FathymSharedModule,
                         FormsModule,
@@ -6221,7 +6561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         ProjectInfoCardComponent,
                         AnalyticsCardComponent,
                         FeedCardSmComponent,
-                        GhControlComponent,
+                        FeedHeaderComponent,
+                        FeedHeaderDialogComponent,
                         MainFeedCardComponent,
                         TwoColumnHeaderComponent,
                         CardCarouselComponent,
@@ -6240,7 +6581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         ProcessorDetailsDialogComponent,
                         SkeletonFeedCardComponent,
                         UpgradeDialogComponent,
-                        EmulatedDevicesToggleComponent
+                        EmulatedDevicesToggleComponent,
+                        FeedHeaderDialogComponent
                     ],
                     entryComponents: [
                         ApplicationsFlowProjectsElementComponent,
@@ -6267,7 +6609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         ProjectInfoCardComponent,
                         AnalyticsCardComponent,
                         FeedCardSmComponent,
-                        GhControlComponent,
+                        FeedHeaderComponent,
                         MainFeedCardComponent,
                         TwoColumnHeaderComponent,
                         CardCarouselComponent,
@@ -6306,6 +6648,8 @@ class FeedItemAction {
 }
 class FeedItemTab {
 }
+class FeedEntry {
+}
 
 class ActionsModel {
 }
@@ -6329,5 +6673,5 @@ class FormModel {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsModel, AnalyticsCardComponent, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, AppsFlowComponent, BaseFormComponent, BaseFormConfigModel, BaseFormTestComponent, BreadcrumbComponent, BuildPipelineDialogComponent, BuildPipelineFormComponent, BuildsComponent, CardCarouselComponent, CardFormConfigModel, CreateProjectWizardComponent, CustomDomainDialogComponent, DFSModifiersComponent, DevOpsComponent, DevSettingsPresetModel, DevopsSourceControlFormComponent, DomainModel, DomainsComponent, DynamicTabsComponent, DynamicTabsModel, EaCService, EditApplicationDialogComponent, EditApplicationFormComponent, EmulatedDevicesToggleComponent, FeedCardSmComponent, FeedItem, FeedItemAction, FeedItemContributor, FeedItemTab, FlowToolComponent, FormActionsModel, FormCardComponent, FormModel, FormValuesModel, FormsService, GhControlComponent, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HeaderComponent, HostingDetailsFormGroupComponent, IoTEnsembleService, MainFeedCardComponent, NPMService, NewApplicationDialogComponent, NpmPackageSelectComponent, ProcessorDetailsDialogComponent, ProcessorDetailsFormComponent, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectInfoCardComponent, ProjectItemsComponent, ProjectNameComponent, ProjectService, ProjectTabsComponent, RecentActivitiesComponent, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SecurityToggleComponent, SkeletonFeedCardComponent, SlottedCardComponent, SourceControlDialogComponent, SourceControlFormComponent, SourceControlFormControlsComponent, ThreeColumnComponent, TwoColumnHeaderComponent, UnpackLowCodeUnitRequest, UpgradeDialogComponent, UserFeedResponse };
+export { ActionsModel, AnalyticsCardComponent, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, AppsFlowComponent, BaseFormComponent, BaseFormConfigModel, BaseFormTestComponent, BreadcrumbComponent, BuildPipelineDialogComponent, BuildPipelineFormComponent, BuildsComponent, CardCarouselComponent, CardFormConfigModel, CreateProjectWizardComponent, CustomDomainDialogComponent, DFSModifiersComponent, DevOpsComponent, DevSettingsPresetModel, DevopsSourceControlFormComponent, DomainModel, DomainsComponent, DynamicTabsComponent, DynamicTabsModel, EaCService, EditApplicationDialogComponent, EditApplicationFormComponent, EmulatedDevicesToggleComponent, FeedCardSmComponent, FeedEntry, FeedHeaderComponent, FeedHeaderDialogComponent, FeedItem, FeedItemAction, FeedItemContributor, FeedItemTab, FlowToolComponent, FormActionsModel, FormCardComponent, FormModel, FormValuesModel, FormsService, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HeaderComponent, HostingDetailsFormGroupComponent, IoTEnsembleService, MainFeedCardComponent, NPMService, NewApplicationDialogComponent, NpmPackageSelectComponent, ProcessorDetailsDialogComponent, ProcessorDetailsFormComponent, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectInfoCardComponent, ProjectItemsComponent, ProjectNameComponent, ProjectService, ProjectTabsComponent, RecentActivitiesComponent, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SecurityToggleComponent, SkeletonFeedCardComponent, SlottedCardComponent, SourceControlDialogComponent, SourceControlFormComponent, SourceControlFormControlsComponent, ThreeColumnComponent, TwoColumnHeaderComponent, UnpackLowCodeUnitRequest, UpgradeDialogComponent, UserFeedResponse };
 //# sourceMappingURL=lowcodeunit-applications-flow-common.mjs.map