@lowcodeunit/applications-flow-common 1.33.98-lets-get-social-ish → 1.33.102-lets-get-social-ish

package/fesm2015/lowcodeunit-applications-flow-common.js

@@ -1,4 +1,4 @@
-import { ɵɵdefineInjectable, Injectable, ɵɵinject, INJECTOR, Injector, Component, Input, EventEmitter, Output, ViewChild, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, INJECTOR, Injector, Component, Input, EventEmitter, Output, ViewChild, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, Inject, NgModule } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { __awaiter } from 'tslib';
 import { HttpClient, HttpBackend } from '@angular/common/http';
@@ -11,6 +11,7 @@ import { map, debounceTime, switchMap } from 'rxjs/operators';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Model for form values
@@ -247,6 +248,11 @@ class ApplicationsFlowService {
             headers: this.loadHeaders(),
         });
     }
+    NewLoadProjectHostingDetails() {
+        return this.http.get(`${this.apiRoot}/api/lowcodeunit/manage/projects/hosting/details`, {
+            headers: this.loadHeaders(),
+        });
+    }
     SaveEnterpriseAsCode(eac) {
         return this.http.post(`${this.apiRoot}/api/lowcodeunit/manage/eac`, eac, {
             headers: this.loadHeaders(),
@@ -1037,6 +1043,7 @@ class HostingDetailsFormGroupComponent {
     ngOnChanges() { }
     ngOnInit() {
         var _a, _b, _c;
+        console.log("made it to hosting details");
         this.BuildPipeline =
             this.BuildPipeline || ((_a = this.Details) === null || _a === void 0 ? void 0 : _a.HostingOptions)
                 ? (_c = (_b = this.Details) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
@@ -3553,7 +3560,9 @@ ColumnInfoCardComponent.propDecorators = {
 };
 
 class SlottedCardComponent {
-    constructor() { }
+    constructor() {
+        this.MainActionClicked = new EventEmitter;
+    }
     ngOnInit() {
     }
     MainActionClickEvent() {
@@ -3563,7 +3572,7 @@ class SlottedCardComponent {
 SlottedCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-slotted-card',
-                template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
+                template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button *ngIf=\"ActionPath\" class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n      <a mat-button *ngIf=\"!ActionPath\" class=\"slotted-card-action-btn\" (click)=\"MainActionClickEvent()\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
                 styles: [".col-info-card{border:2px solid #d3d3d3;margin:20px;padding:0}.header-icon{margin-right:10px}.card-title{font-size:30px;margin-bottom:0}.header-description{background-color:#d3d3d3;margin-left:-2px;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
             },] }
 ];
@@ -4143,7 +4152,7 @@ class ProcessorDetailsFormComponent {
 ProcessorDetailsFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-processor-details-form',
-                template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SubmitProcessorDetails()\">\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    <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=\"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\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControls?.RepositoryFormControl?.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          </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            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && !IsPreserve\"\n\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"302 \u2013 Not Permanent and Not Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"307 \u2013 Not Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"308 \u2013 Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            \n\n            <!-- <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Values used to control the redirect type.  Permanent and Not Preserve = 301; Not Permanent and Not Preserve = 302; Permanent and Preserve = 308; Not Permanent and Not Preserve = 307;\"\n            >\n              info_outline\n            </mat-icon> -->\n          </div>\n        </div>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save Security Settings</button>\n    </mat-card-actions>\n</mat-card>\n</form>\n  \n",
+                template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SubmitProcessorDetails()\">\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    <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=\"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\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControls?.RepositoryFormControl?.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          </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            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && !IsPreserve\"\n\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"302 \u2013 Not Permanent and Not Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"307 \u2013 Not Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"308 \u2013 Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            \n\n            <!-- <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Values used to control the redirect type.  Permanent and Not Preserve = 301; Not Permanent and Not Preserve = 302; Permanent and Preserve = 308; Not Permanent and Not Preserve = 307;\"\n            >\n              info_outline\n            </mat-icon> -->\n          </div>\n        </div>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save</button>\n    </mat-card-actions>\n</mat-card>\n</form>\n  \n",
                 styles: [""]
             },] }
 ];
@@ -4211,16 +4220,23 @@ SourceControlFormComponent.propDecorators = {
 };
 
 class BuildPipelineFormComponent {
-    constructor(formBldr, appsFlowSvc) {
-        this.formBldr = formBldr;
+    constructor(eacSvc, formBuilder, appsFlowSvc) {
+        this.eacSvc = eacSvc;
+        this.formBuilder = formBuilder;
         this.appsFlowSvc = appsFlowSvc;
         this.HostingDetails = new ProjectHostingDetails();
     }
-    //PROPERTIES
+    // @Input('main-branch')
+    // public MainBranch: string;
+    // @Input('organization')
+    // public Organization: string;
+    // @Input('repository')
+    // public Repository: string;
     get Artifact() {
-        var _a, _b;
-        return ((_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts) && this.ArtifactLookup
-            ? ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts[this.ArtifactLookup]) || {}
+        var _a, _b, _c;
+        console.log("ARTIFACT: ", (_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts[this.ArtifactLookup]);
+        return ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts) && this.ArtifactLookup
+            ? ((_c = this.Environment) === null || _c === void 0 ? void 0 : _c.Artifacts[this.ArtifactLookup]) || {}
             : {};
     }
     get ArtifactLookup() {
@@ -4228,6 +4244,10 @@ class BuildPipelineFormComponent {
         const artLookup = ((_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.ArtifactLookups) ? (_b = this.DevOpsAction) === null || _b === void 0 ? void 0 : _b.ArtifactLookups[0] : null;
         return artLookup;
     }
+    get BuildPipelineFormControl() {
+        var _a;
+        return (_a = this.BuildPipelineFormGroup) === null || _a === void 0 ? void 0 : _a.controls.buildPipeline;
+    }
     get DevOpsAction() {
         return this.Environment.DevOpsActions && this.DevOpsActionLookup
             ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
@@ -4236,6 +4256,9 @@ class BuildPipelineFormComponent {
     get DevOpsActions() {
         return this.Environment.DevOpsActions || {};
     }
+    get DevOpsActionNameFormControl() {
+        return this.BuildPipelineFormGroup.get('devOpsActionName');
+    }
     get EditingSourceControl() {
         var _a, _b;
         let sc = ((_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Sources) ? (_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Sources[this.EditingSourceControlLookup] : null;
@@ -4244,6 +4267,22 @@ class BuildPipelineFormComponent {
         }
         return sc;
     }
+    get NPMTokenFormControl() {
+        return this.BuildPipelineFormGroup.get('npmToken');
+    }
+    // (ho) => ho.Lookup === this.BuildPipeline
+    get SelectedHostingOption() {
+        var _a, _b;
+        return (_b = (_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) === null || _b === void 0 ? void 0 : _b.find((ho) => ho.Lookup === this.BuildPipeline);
+    }
+    get SelectedHostingOptionInputControlValues() {
+        var _a, _b;
+        return (_b = (_a = this.SelectedHostingOption) === null || _a === void 0 ? void 0 : _a.Inputs) === null || _b === void 0 ? void 0 : _b.reduce((prev, cur) => {
+            const res = Object.assign({}, prev);
+            res[cur.Lookup] = this.BuildPipelineFormGroup.controls[cur.Lookup].value;
+            return res;
+        }, {});
+    }
     get SourceControlLookups() {
         return Object.keys(this.SourceControls || {});
     }
@@ -4251,47 +4290,178 @@ class BuildPipelineFormComponent {
         return this.Environment.Sources || {};
     }
     ngOnInit() {
+        this.BuildPipelineFormGroup = this.formBuilder.group({});
+        console.log("ARTIFACT: ", this.Artifact);
+        // this.BuildPipeline ||
+        // github-artifacts-release is  this.HostingDetails?.HostingOptions[0]?.Lookup
+        if (this.BuildPipelineFormGroup != null) {
+            this.BuildPipelineFormGroup.removeControl('hostingDetails');
+        }
+        this.BuildPipelineFormGroup.addControl('hostingDetails', this.formBuilder.group({
+            buildPipeline: [this.BuildPipeline, [Validators.required]],
+        }));
+        this.loadProjectHostingDetails();
+        // this.setupControlsForForm();
     }
     //API METHODS
-    //HELPERS
+    BuildPipelineChanged() {
+        var _a, _b;
+        console.log("build pipeline value: ", (_a = this.BuildPipelineFormControl) === null || _a === void 0 ? void 0 : _a.value);
+        this.BuildPipeline = (_b = this.BuildPipelineFormControl) === null || _b === void 0 ? void 0 : _b.value;
+        this.setupControlsForForm();
+    }
+    SubmitBuildPipeline() {
+    }
+    SaveEnvironment() {
+        var _a;
+        const saveEnvReq = {
+            Environment: Object.assign(Object.assign({}, this.Environment), { Artifacts: this.Environment.Artifacts || {}, DevOpsActions: this.Environment.DevOpsActions || {}, Secrets: this.Environment.Secrets || {}, Sources: this.Environment.Sources || {} }),
+            EnvironmentLookup: this.EnvironmentLookup,
+            EnterpriseDataTokens: {},
+        };
+        let artifactLookup;
+        let artifact = Object.assign(Object.assign({}, this.Artifact), this.SelectedHostingOptionInputControlValues);
+        if (!this.ArtifactLookup) {
+            artifactLookup = Guid.CreateRaw();
+            artifact = Object.assign(Object.assign({}, artifact), { Type: this.SelectedHostingOption
+                    .ArtifactType, Name: this.SelectedHostingOption.Name, NPMRegistry: 'https://registry.npmjs.org/' });
+        }
+        else {
+            artifactLookup = this.ArtifactLookup;
+        }
+        saveEnvReq.Environment.Artifacts[artifactLookup] = artifact;
+        let devOpsActionLookup;
+        if (!this.DevOpsActionLookup) {
+            devOpsActionLookup = Guid.CreateRaw();
+            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { ArtifactLookups: [artifactLookup], Name: this.DevOpsActionNameFormControl.value, Path: this.SelectedHostingOption.Path, Templates: this.SelectedHostingOption.Templates });
+            if ((_a = this.NPMTokenFormControl) === null || _a === void 0 ? void 0 : _a.value) {
+                const secretLookup = 'npm-access-token';
+                doa.SecretLookups = [secretLookup];
+                saveEnvReq.Environment.Secrets[secretLookup] = {
+                    Name: 'NPM Access Token',
+                    DataTokenLookup: secretLookup,
+                    KnownAs: 'NPM_TOKEN',
+                };
+                saveEnvReq.EnterpriseDataTokens[secretLookup] = {
+                    Name: saveEnvReq.Environment.Secrets[secretLookup].Name,
+                    Description: saveEnvReq.Environment.Secrets[secretLookup].Name,
+                    Value: this.NPMTokenFormControl.value,
+                };
+            }
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+        }
+        else {
+            devOpsActionLookup = this.DevOpsActionLookup;
+            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { Name: this.DevOpsActionNameFormControl.value });
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+        }
+        // let source: EaCSourceControl = {
+        //   ...this.EditingSourceControl,
+        //   Branches: this.SourceControlFormControls.SelectedBranches,
+        //   MainBranch: this.SourceControlFormControls.MainBranchFormControl.value,
+        // };
+        // source = {
+        //   ...source,
+        //   Type: 'GitHub',
+        //   Name: this.EditingSourceControlLookup,
+        //   DevOpsActionTriggerLookups: [devOpsActionLookup],
+        //   Organization:
+        //     this.SourceControlFormControls.OrganizationFormControl.value,
+        //   Repository: this.SourceControlFormControls.RepositoryFormControl.value,
+        // };
+        // const scLookup = `github://${source.Organization}/${source.Repository}`;
+        // saveEnvReq.Environment.Sources[scLookup] = source;
+        this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
+    }
+    //  Helpers
+    setupControlsForForm() {
+        var _a, _b, _c, _d, _e, _f;
+        for (const ctrlName in this.BuildPipelineFormGroup.controls) {
+            //devOpsAction doesn't exist
+            //removes hosting details
+            if (ctrlName !== 'buildPipeline' && ctrlName !== 'devOpsAction') {
+                console.log("removing control: ", ctrlName);
+                this.BuildPipelineFormGroup.removeControl(ctrlName);
+            }
+        }
+        this.BuildPipelineFormGroup.addControl('devOpsActionName', this.formBuilder.control(((_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.Name) || ((_b = this.SelectedHostingOption) === null || _b === void 0 ? void 0 : _b.Name) || '', [Validators.required]));
+        (_d = (_c = this.SelectedHostingOption) === null || _c === void 0 ? void 0 : _c.Inputs) === null || _d === void 0 ? void 0 : _d.forEach((input) => {
+            const validators = input.Required ? [Validators.required] : [];
+            this.BuildPipelineFormGroup.addControl(input.Lookup, this.formBuilder.control(this.Artifact[input.Lookup] || input.DefaultValue || '', validators));
+            // if (this.Disabled) {
+            //   this.FormGroup.controls[input.Lookup].disable();
+            // }
+        });
+        if (((_e = this.BuildPipelineFormControl) === null || _e === void 0 ? void 0 : _e.value) === 'npm-release') {
+            if (!this.BuildPipelineFormGroup.controls.npmToken) {
+                this.BuildPipelineFormGroup.addControl('npmToken', this.formBuilder.control('', this.Disabled ? [] : [Validators.required]));
+                if (this.Disabled) {
+                    this.BuildPipelineFormGroup.controls.npmToken.disable();
+                }
+            }
+        }
+        else if (((_f = this.BuildPipelineFormControl) === null || _f === void 0 ? void 0 : _f.value) === 'github-artifacts-release') {
+            if (this.BuildPipelineFormGroup.controls.npmToken) {
+                this.BuildPipelineFormGroup.removeControl('npmToken');
+            }
+        }
+    }
     loadProjectHostingDetails() {
         this.HostingDetails.Loading = true;
+        // this.Organization,
+        // this.Repository,
+        // this.MainBranch
+        // "powhound4",
+        // "RedwoodCrystals",
+        // "master"
         this.appsFlowSvc
-            .LoadProjectHostingDetails(this.Organization, this.Repository, this.MainBranch)
+            .NewLoadProjectHostingDetails()
             .subscribe((response) => {
+            var _a, _b, _c;
             this.HostingDetails = response.Model;
+            console.log("response: ", response);
             this.HostingDetails.Loading = false;
+            this.BuildPipeline =
+                ((_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) ? (_c = (_b = this.HostingDetails) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
+            console.log("Build Pipeline HERE= ", this.BuildPipeline);
+            this.setupControlsForForm();
         }, (err) => {
+            console.log("hosting details LOADING EERR: ", this.HostingDetails);
+            console.log("ERR: ", err);
             this.HostingDetails.Loading = false;
         });
+        console.log("HOSTING DETAILS: ", this.HostingDetails);
     }
 }
 BuildPipelineFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-build-pipeline-form',
-                template: "<div class=\"form-card\" fxFlex=\"35%\" fxFlex.lt-md=\"100%\">\n    <mat-card\n      class=\"spread\"\n      *ngIf=\"EditingSourceControl?.Branches?.length > 0\"\n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container>\n          <lcu-hosting-details-form-group\n            [artifact]=\"Artifact\"\n            [devops-action]=\"DevOpsActions[DevOpsActionLookup]\"\n            [details]=\"HostingDetails\"\n            [formGroup]=\"DevOpsFormGroup\"\n            [organization]=\"Organization\"\n            [disabled]=\"HostingDetails?.Loading\"\n          ></lcu-hosting-details-form-group>\n        </ng-container>\n      </mat-card-content>\n    </mat-card>\n  </div>\n",
+                template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\n    <!-- *ngIf=\"EditingSourceControl?.Branches?.length > 0\" -->\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container>\n\n        <div  *ngIf=\"!HostingDetails?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              formControlName=\"buildPipeline\"\n              placeholder=\"Build Pipeline\"\n              [disabled]=\"Disabled\"\n              (selectionChange)=\"BuildPipelineChanged()\"\n              required\n            >\n              <ng-container\n                *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n              >\n                <mat-option [value]=\"hostOption?.Lookup\">\n                  {{ hostOption.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n        \n            <mat-hint>\n              <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                  {{ hostOption.Description }}\n                </span>\n              </ng-container>\n            </mat-hint>\n          </mat-form-field>\n        \n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              formControlName=\"devOpsActionName\"\n              placeholder=\"Name of DevOps Action\"\n              required=\"true\"\n            />\n          </mat-form-field>\n        \n          <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                [formControlName]=\"input.Lookup\"\n                [placeholder]=\"input.Placeholder\"\n                [required]=\"input.Required\"\n              />\n        \n              <mat-hint>{{ input.Hint }}</mat-hint>\n            </mat-form-field>\n          </ng-container>\n        \n          <div *ngIf=\"BuildPipeline == 'npm-release'\">\n            <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n              <mat-icon matPrefix>security</mat-icon>\n        \n              <input\n                id=\"npm-token\"\n                matInput\n                type=\"text\"\n                formControlName=\"npmToken\"\n                placeholder=\"NPM token\"\n                [required]=\"!Disabled\"\n                style=\"-webkit-text-security: disc;\"\n              />\n              <mat-hint>\n                Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                Learn how to create and view access tokens \n                <a\n                  href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                  target=\"_blank\"\n                >\n                  here.\n                </a>\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </div>\n        \n        <div *ngIf=\"HostingDetails?.Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n        \n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\">Loading hosting details</h4>\n            </div>\n          </div>\n        </div>\n        </ng-container>\n      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\">Save</button>\n      </mat-card-actions>\n    </mat-card>\n</form>\n",
                 styles: [""]
             },] }
 ];
 BuildPipelineFormComponent.ctorParameters = () => [
+    { type: EaCService },
     { type: FormBuilder },
     { type: ApplicationsFlowService }
 ];
 BuildPipelineFormComponent.propDecorators = {
+    BuildPipeline: [{ type: Input, args: ['build-pipeline',] }],
     DevOpsActionLookup: [{ type: Input, args: ['devops-action-lookup',] }],
+    Disabled: [{ type: Input, args: ['disabled',] }],
     Environment: [{ type: Input, args: ['environment',] }],
-    MainBranch: [{ type: Input, args: ['main-branch',] }],
-    Organization: [{ type: Input, args: ['organization',] }],
-    Repository: [{ type: Input, args: ['repository',] }]
+    EnvironmentLookup: [{ type: Input, args: ['environment-lookup',] }]
 };
 
 class DevopsSourceControlFormComponent {
     //  Constructors
-    constructor(formBuilder, appsFlowSvc) {
+    constructor(formBuilder, appsFlowSvc, eacSvc) {
         this.formBuilder = formBuilder;
         this.appsFlowSvc = appsFlowSvc;
+        this.eacSvc = eacSvc;
         this.SeparatorKeysCodes = [ENTER, COMMA];
         this.BuildPath = null;
+        // this.EditingSourceControlLookup = null;
         this.HostingDetails = new ProjectHostingDetails();
         this.SelectedBranches = [];
         this.SourceControlRoot = '';
@@ -4350,7 +4520,16 @@ class DevopsSourceControlFormComponent {
         this.destroyFormControls();
     }
     ngOnInit() {
-        this.setupFormControls();
+        console.log("org: ", this.EditingSourceControl);
+        console.log("lookup: ", this.EditingSourceControlLookup);
+        if (this.EditingSourceControlLookup === null) {
+            this.CreateNewSourceControl();
+        }
+        console.log("org: ", this.EditingSourceControl);
+        if (this.EditingSourceControl != null) {
+            this.DevOpsSourceControlFormGroup = this.formBuilder.group({});
+            this.setupFormControls();
+        }
         this.RefreshOrganizations();
     }
     //  API Methods
@@ -4366,6 +4545,9 @@ class DevopsSourceControlFormComponent {
     }
     BuildPathChanged(event) {
     }
+    CreateNewSourceControl() {
+        this.SetEditingSourceControl(Guid.CreateRaw());
+    }
     CreateRepository() {
         this.CreatingRepository = true;
         this.RepositoryFormControl.reset();
@@ -4433,6 +4615,95 @@ class DevopsSourceControlFormComponent {
             }
         });
     }
+    SetEditingSourceControl(scLookup) {
+        this.EditingSourceControlLookup = scLookup;
+    }
+    SubmitSourceControl() {
+        console.log("source control submitted");
+    }
+    // public SaveSourceControl(): void {
+    //   const saveEnvReq: SaveEnvironmentAsCodeEventRequest = {
+    //     Environment: {
+    //       ...this.Environment,
+    //       Artifacts: this.Environment.Artifacts || {},
+    //       DevOpsActions: this.Environment.DevOpsActions || {},
+    //       Secrets: this.Environment.Secrets || {},
+    //       Sources: this.Environment.Sources || {},
+    //     },
+    //     EnvironmentLookup: this.EnvironmentLookup,
+    //     EnterpriseDataTokens: {},
+    //   };
+    //   let artifactLookup: string;
+    //   let artifact: EaCArtifact = {
+    //     ...this.Artifact,
+    //     ...this.HostingDetailsFormControls
+    //       .SelectedHostingOptionInputControlValues,
+    //   };
+    //   // if (!this.ArtifactLookup) {
+    //   //   artifactLookup = Guid.CreateRaw();
+    //   //   artifact = {
+    //   //     ...artifact,
+    //   //     Type: this.HostingDetailsFormControls.SelectedHostingOption
+    //   //       .ArtifactType,
+    //   //     Name: this.HostingDetailsFormControls.SelectedHostingOption.Name,
+    //   //     NPMRegistry: 'https://registry.npmjs.org/',
+    //   //   };
+    //   // } else {
+    //   //   artifactLookup = this.ArtifactLookup;
+    //   // }
+    //   saveEnvReq.Environment.Artifacts[artifactLookup] = artifact;
+    //   let devOpsActionLookup: string;
+    //   if (!this.DevOpsActionLookup) {
+    //     devOpsActionLookup = Guid.CreateRaw();
+    //     // const doa: EaCDevOpsAction = {
+    //     //   ...this.DevOpsAction,
+    //     //   ArtifactLookups: [artifactLookup],
+    //     //   Name: this.HostingDetailsFormControls.DevOpsActionNameFormControl.value,
+    //     //   Path: this.HostingDetailsFormControls.SelectedHostingOption.Path,
+    //     //   Templates:
+    //     //     this.HostingDetailsFormControls.SelectedHostingOption.Templates,
+    //     // };
+    //     if (this.HostingDetailsFormControls.NPMTokenFormControl?.value) {
+    //       const secretLookup = 'npm-access-token';
+    //       doa.SecretLookups = [secretLookup];
+    //       saveEnvReq.Environment.Secrets[secretLookup] = {
+    //         Name: 'NPM Access Token',
+    //         DataTokenLookup: secretLookup,
+    //         KnownAs: 'NPM_TOKEN',
+    //       };
+    //       saveEnvReq.EnterpriseDataTokens[secretLookup] = {
+    //         Name: saveEnvReq.Environment.Secrets[secretLookup].Name,
+    //         Description: saveEnvReq.Environment.Secrets[secretLookup].Name,
+    //         Value: this.NPMTokenFormControl.value,
+    //       };
+    //     }
+    //     saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+    //   } else {
+    //     devOpsActionLookup = this.DevOpsActionLookupFormControl.value;
+    //     const doa: EaCDevOpsAction = {
+    //       ...this.DevOpsAction,
+    //       Name: this.HostingDetailsFormControls.DevOpsActionNameFormControl.value,
+    //     };
+    //     saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+    //   }
+    //   let source: EaCSourceControl = {
+    //     ...this.EditingSourceControl,
+    //     Branches: this.SelectedBranches,
+    //     MainBranch: this.MainBranchFormControl.value,
+    //   };
+    //   source = {
+    //     ...source,
+    //     Type: 'GitHub',
+    //     Name: this.EditingSourceControlLookup,
+    //     DevOpsActionTriggerLookups: [devOpsActionLookup],
+    //     Organization:
+    //       this.OrganizationFormControl.value,
+    //     Repository: this.RepositoryFormControl.value,
+    //   };
+    //   const scLookup = `github://${source.Organization}/${source.Repository}`;
+    //   saveEnvReq.Environment.Sources[scLookup] = source;
+    //   this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
+    // }
     //  Helpers
     addBranchOption(value) {
         value = (value || '').trim();
@@ -4560,8 +4831,8 @@ class DevopsSourceControlFormComponent {
         }
     }
     setupFormControls() {
+        // this.destroyFormControls();
         var _a, _b, _c, _d, _e, _f, _g;
-        this.destroyFormControls();
         this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new FormControl(this.DevOpsActionLookup || '', []));
         this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new FormControl((_a = this.EditingSourceControl.Organization) !== null && _a !== void 0 ? _a : '', Validators.required));
         this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new FormControl((_b = this.EditingSourceControl.Repository) !== null && _b !== void 0 ? _b : '', Validators.required));
@@ -4578,19 +4849,61 @@ class DevopsSourceControlFormComponent {
 DevopsSourceControlFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-devops-source-control-form',
-                template: "<div class=\"form-card\" fxFlex=\"35%\" fxFlex.lt-md=\"100%\">\n    <mat-card class=\"spread\">\n      <mat-card-header>\n        <mat-card-title> Source Control </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-icon\n          matSuffix\n          matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\"\n        >\n          info_outline\n        </mat-icon>\n      </mat-card-header>\n\n      <mat-card-content>\n        <div [formGroup]=\"DevOpsSourceControlFormGroup\">\n            <div class=\"card\">\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\n                  *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\"\n                >\n                  <mat-option\n                    [value]=\"devOpsActionLookup\"\n                    *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\"\n                  >\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\"\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\"> refresh </mat-icon>\n          \n                <a\n                  matSuffix\n                  href=\"/.oauth/github?oauth-force-edit=true\"\n                  target=\"_blank\"\n                  color=\"accent\"\n                >\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\n                    href=\"https://github.com/account/organizations/new\"\n                    target=\"_blank\"\n                  >\n                    start here\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          \n            <div\n              class=\"card\"\n              *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \"\n            >\n              <mat-form-field class=\"mat-full-width\">\n                <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n          \n                <mat-select\n                  [formControlName]=\"SourceControlRoot + 'repository'\"\n                  [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \"\n                  [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \"\n                  (selectionChange)=\"RepositoryChanged($event)\"\n                  *ngIf=\"!CreatingRepository\"\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          \n                <input\n                  matInput\n                  placeholder=\"Repository (creates new if does not exist)\"\n                  [formControlName]=\"SourceControlRoot + 'repository'\"\n                  *ngIf=\"CreatingRepository\"\n                  [fxHide]=\"Loading || HostingDetails?.Loading\"\n                  required\n                />\n          \n                <mat-icon\n                  matSuffix\n                  (click)=\"CreateRepository()\"\n                  [fxHide]=\"Loading || HostingDetails?.Loading\"\n                  *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\"\n                >\n                  add_circle\n                </mat-icon>\n          \n                <button mat-button type=\"button\" \n                  (click)=\"SaveRepository()\" \n                  *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n          \n                  <mat-icon\n                    matSuffix\n                    color=\"primary\"\n                  >\n                    save\n                  </mat-icon>\n                </button>\n          \n                <button mat-button type=\"button\" \n                  (click)=\"CancelCreateRepository()\"\n                  *ngIf=\"CreatingRepository\">\n          \n                  <mat-icon\n                    matSuffix\n                    \n                  >\n                    cancel\n                  </mat-icon>\n                </button>\n              </mat-form-field>\n            </div>\n          \n            <div\n              class=\"card\"\n              *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \"\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\n                  (optionSelected)=\"BranchOptionSelected($event)\"\n                  #branchOptions=\"matAutocomplete\"\n                >\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\n                    [removable]=\"true\"\n                    (removed)=\"RemoveBranchOption(selBranch)\"\n                    *ngFor=\"let selBranch of SelectedBranches\"\n                  >\n                    {{ selBranch }}\n                    <mat-icon matChipRemove>cancel</mat-icon>\n                  </mat-chip>\n          \n                  <input\n                    matInput\n                    placeholder=\"New Branch...\"\n                    [formControlName]=\"SourceControlRoot + 'branches'\"\n                    #branches\n                    [matAutocomplete]=\"branchOptions\"\n                    [matChipInputFor]=\"selectedBranches\"\n                    [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\"\n                    [matChipInputAddOnBlur]=\"true\"\n                    (matChipInputTokenEnd)=\"AddBranchOption($event)\"\n                    [disabled]=\"Loading || HostingDetails?.Loading\"\n                    required\n                  />\n                </mat-chip-list>\n              </mat-form-field>\n          \n              <mat-form-field\n                class=\"mat-full-width with-hint\"\n                [fxShow]=\"SelectedBranches?.length > 1\"\n              >\n                <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n          \n                <mat-select\n                  [formControlName]=\"SourceControlRoot + 'mainBranch'\"\n                  placeholder=\"Main Branch\"\n                  [disabled]=\"Loading || HostingDetails?.Loading\"\n                  (selectionChange)=\"MainBranchChanged($event)\"\n                  required\n                >\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()\"> refresh </mat-icon>\n          \n                <a\n                  matSuffix\n                  mat-icon-button\n                  href=\"/.oauth/github?oauth-force-edit=true\"\n                  \n                  target=\"_blank\"\n                  color=\"accent\"\n                >\n                  <mat-icon\n                  matTooltip=\"Re-authorize Organizations\"\n                  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\n                    href=\"https://github.com/account/organizations/new\"\n                    target=\"_blank\"\n                  >\n                    start here\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          \n            <div\n              class=\"card\"\n              *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \"\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\n                  [formControlName]=\"SourceControlRoot + 'buildPath'\"\n                  placeholder=\"Build Path\"\n                  [disabled]=\"Loading || BuildPathDisabled\"\n                  (selectionChange)=\"BuildPathChanged($event)\"\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            </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\n                    class=\"mat-title\"\n                    *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \"\n                  >\n                    Loading repositories\n                  </h4>\n          \n                  <h4\n                    class=\"mat-title\"\n                    *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\"\n                  >\n                    Loading branches\n                  </h4>\n          \n                  <h4\n                    class=\"mat-title\"\n                    *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \"\n                  >\n                    Loading build paths\n                  </h4>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n      </mat-card-content>\n    </mat-card>\n  </div>\n",
-                styles: [""]
+                template: "<form class=\"form-card\" [formGroup]=\"DevOpsSourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\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      <div class=\"card\">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-select formControlName=\"devOpsActionLookup\" placeholder=\"DevOps Action\"\n            [disabled]=\"HostingDetails?.Loading\" (selectionChange)=\"DevOpsActionLookupChanged($event)\">\n            <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n              <mat-option [value]=\"devOpsActionLookup\" *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 class=\"mat-full-width with-hint\" *ngIf=\"OrganizationOptions?.length > 0\">\n          <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'organization'\" placeholder=\"Organization\"\n            (selectionChange)=\"OrganizationChanged($event)\" [disabled]=\"Loading || HostingDetails?.Loading\" required>\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\"> 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\" 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()\"> 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\">\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      <!-- </div> -->\n\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n      <button mat-raised-button type=\"submit\">Save</button>\n    </mat-card-actions>\n  </mat-card>\n</form>",
+                styles: [".form-card,.sc-card{width:100%}"]
             },] }
 ];
 DevopsSourceControlFormComponent.ctorParameters = () => [
     { type: FormBuilder },
-    { type: ApplicationsFlowService }
+    { type: ApplicationsFlowService },
+    { type: EaCService }
 ];
 DevopsSourceControlFormComponent.propDecorators = {
     BranchesInput: [{ type: ViewChild, args: ['branches',] }],
+    EditingSourceControlLookup: [{ type: Input, args: ['editing-source-control-lookup',] }],
     Environment: [{ type: Input, args: ['environment',] }]
 };
 
+class SourceControlDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+}
+SourceControlDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lcu-source-control-dialog',
+                template: "\n<div fxLayoutAlign=\"center center\">\n<lcu-devops-source-control-form\n        [environment]=\"data.environment\"\n        [editing-source-control-lookup]=\"data.scLookup\">\n</lcu-devops-source-control-form>\n</div>",
+                styles: [""]
+            },] }
+];
+SourceControlDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+class BuildPipelineDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+}
+BuildPipelineDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lcu-build-pipeline-dialog',
+                template: "<lcu-build-pipeline-form\n[build-pipeline]=\"data.buildPipeline\"\n[devops-action-lookup]=\"data.devopsActionLookup\"\n[environment]=\"data.environment\"\n[environment-lookup]=\"data.environmentLookup\"\n>\n\n</lcu-build-pipeline-form>\n",
+                styles: [""]
+            },] }
+];
+BuildPipelineDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
 class ApplicationsFlowModule {
     static forRoot() {
         return {
@@ -4645,7 +4958,9 @@ ApplicationsFlowModule.decorators = [
                     ProcessorDetailsFormComponent,
                     SourceControlFormComponent,
                     BuildPipelineFormComponent,
-                    DevopsSourceControlFormComponent
+                    DevopsSourceControlFormComponent,
+                    SourceControlDialogComponent,
+                    BuildPipelineDialogComponent
                 ],
                 imports: [
                     FathymSharedModule,
@@ -4695,7 +5010,9 @@ ApplicationsFlowModule.decorators = [
                     ProcessorDetailsFormComponent,
                     SourceControlFormComponent,
                     BuildPipelineFormComponent,
-                    DevopsSourceControlFormComponent
+                    DevopsSourceControlFormComponent,
+                    SourceControlDialogComponent,
+                    BuildPipelineDialogComponent
                 ],
                 entryComponents: [
                     ApplicationsFlowProjectsElementComponent,
@@ -4732,7 +5049,9 @@ ApplicationsFlowModule.decorators = [
                     ProcessorDetailsFormComponent,
                     SourceControlFormComponent,
                     BuildPipelineFormComponent,
-                    DevopsSourceControlFormComponent
+                    DevopsSourceControlFormComponent,
+                    SourceControlDialogComponent,
+                    BuildPipelineDialogComponent
                 ],
             },] }
 ];
@@ -4765,5 +5084,5 @@ class FormModel {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsModel, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, BaseFormConfigModel, CardFormConfigModel, CreateProjectWizardComponent, DevSettingsPresetModel, DomainModel, DynamicTabsModel, EaCService, FormActionsModel, FormModel, FormValuesModel, FormsService, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HostingDetailsFormGroupComponent, NPMService, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectNameComponent, ProjectService, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SourceControlFormControlsComponent, ThreeColumnComponent, UnpackLowCodeUnitRequest, DynamicTabsComponent as ɵa, HeaderComponent as ɵb, SourceControlFormComponent as ɵba, BuildPipelineFormComponent as ɵbb, DevopsSourceControlFormComponent as ɵbc, ProjectTabsComponent as ɵc, GeneralComponent as ɵd, DomainsComponent as ɵe, ProjectItemsComponent as ɵf, BuildsComponent as ɵg, RecentActivitiesComponent as ɵh, FormCardComponent as ɵi, BaseFormComponent as ɵj, BaseFormTestComponent as ɵk, AppsFlowComponent as ɵl, DevOpsComponent as ɵm, DFSModifiersComponent as ɵn, NpmPackageSelectComponent as ɵo, ColumnInfoCardComponent as ɵp, SlottedCardComponent as ɵq, ProjectInfoCardComponent as ɵr, AnalyticsCardComponent as ɵs, FeedCardSmComponent as ɵt, GhControlComponent as ɵu, MainFeedCardComponent as ɵv, TwoColumnHeaderComponent as ɵw, CardCarouselComponent as ɵx, SecurityToggleComponent as ɵy, ProcessorDetailsFormComponent as ɵz };
+export { ActionsModel, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, BaseFormConfigModel, CardFormConfigModel, CreateProjectWizardComponent, DevSettingsPresetModel, DomainModel, DynamicTabsModel, EaCService, FormActionsModel, FormModel, FormValuesModel, FormsService, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HostingDetailsFormGroupComponent, NPMService, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectNameComponent, ProjectService, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SourceControlFormControlsComponent, ThreeColumnComponent, UnpackLowCodeUnitRequest, DynamicTabsComponent as ɵa, HeaderComponent as ɵb, SourceControlFormComponent as ɵba, BuildPipelineFormComponent as ɵbb, DevopsSourceControlFormComponent as ɵbc, SourceControlDialogComponent as ɵbd, BuildPipelineDialogComponent as ɵbe, ProjectTabsComponent as ɵc, GeneralComponent as ɵd, DomainsComponent as ɵe, ProjectItemsComponent as ɵf, BuildsComponent as ɵg, RecentActivitiesComponent as ɵh, FormCardComponent as ɵi, BaseFormComponent as ɵj, BaseFormTestComponent as ɵk, AppsFlowComponent as ɵl, DevOpsComponent as ɵm, DFSModifiersComponent as ɵn, NpmPackageSelectComponent as ɵo, ColumnInfoCardComponent as ɵp, SlottedCardComponent as ɵq, ProjectInfoCardComponent as ɵr, AnalyticsCardComponent as ɵs, FeedCardSmComponent as ɵt, GhControlComponent as ɵu, MainFeedCardComponent as ɵv, TwoColumnHeaderComponent as ɵw, CardCarouselComponent as ɵx, SecurityToggleComponent as ɵy, ProcessorDetailsFormComponent as ɵz };
 //# sourceMappingURL=lowcodeunit-applications-flow-common.js.map