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

package/bundles/lowcodeunit-applications-flow-common.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@lcu/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@lowcodeunit/app-host-common'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('@angular/cdk/layout'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle')) :
-    typeof define === 'function' && define.amd ? define('@lowcodeunit/applications-flow-common', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@lcu/common', '@angular/forms', '@angular/flex-layout', '@lowcodeunit/app-host-common', '@angular/cdk/keycodes', 'rxjs/operators', '@angular/cdk/layout', '@angular/material/tooltip', '@angular/material/slide-toggle'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lowcodeunit = global.lowcodeunit || {}, global.lowcodeunit['applications-flow-common'] = {}), global.ng.core, global.rxjs, global.ng.common.http, global.i2, global.ng.forms, global.ng.flexLayout, global.appHostCommon, global.ng.cdk.keycodes, global.rxjs.operators, global.ng.cdk.layout, global.ng.material.tooltip, global.ng.material.slideToggle));
-}(this, (function (exports, i0, rxjs, i1, i2, forms, flexLayout, appHostCommon, keycodes, operators, layout, tooltip, slideToggle) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@lcu/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@lowcodeunit/app-host-common'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('@angular/cdk/layout'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle'), require('@angular/material/dialog')) :
+    typeof define === 'function' && define.amd ? define('@lowcodeunit/applications-flow-common', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@lcu/common', '@angular/forms', '@angular/flex-layout', '@lowcodeunit/app-host-common', '@angular/cdk/keycodes', 'rxjs/operators', '@angular/cdk/layout', '@angular/material/tooltip', '@angular/material/slide-toggle', '@angular/material/dialog'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lowcodeunit = global.lowcodeunit || {}, global.lowcodeunit['applications-flow-common'] = {}), global.ng.core, global.rxjs, global.ng.common.http, global.i2, global.ng.forms, global.ng.flexLayout, global.appHostCommon, global.ng.cdk.keycodes, global.rxjs.operators, global.ng.cdk.layout, global.ng.material.tooltip, global.ng.material.slideToggle, global.ng.material.dialog));
+}(this, (function (exports, i0, rxjs, i1, i2, forms, flexLayout, appHostCommon, keycodes, operators, layout, tooltip, slideToggle, dialog) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -576,6 +576,11 @@
                 headers: this.loadHeaders(),
             });
         };
+        ApplicationsFlowService.prototype.NewLoadProjectHostingDetails = function () {
+            return this.http.get(this.apiRoot + "/api/lowcodeunit/manage/projects/hosting/details", {
+                headers: this.loadHeaders(),
+            });
+        };
         ApplicationsFlowService.prototype.SaveEnterpriseAsCode = function (eac) {
             return this.http.post(this.apiRoot + "/api/lowcodeunit/manage/eac", eac, {
                 headers: this.loadHeaders(),
@@ -1775,6 +1780,7 @@
         HostingDetailsFormGroupComponent.prototype.ngOnChanges = function () { };
         HostingDetailsFormGroupComponent.prototype.ngOnInit = function () {
             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 : '';
@@ -4746,6 +4752,7 @@
 
     var SlottedCardComponent = /** @class */ (function () {
         function SlottedCardComponent() {
+            this.MainActionClicked = new i0.EventEmitter;
         }
         SlottedCardComponent.prototype.ngOnInit = function () {
         };
@@ -4757,7 +4764,7 @@
     SlottedCardComponent.decorators = [
         { type: i0.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%}"]
                 },] }
     ];
@@ -5397,7 +5404,7 @@
     ProcessorDetailsFormComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -5482,17 +5489,24 @@
     };
 
     var BuildPipelineFormComponent = /** @class */ (function () {
-        function BuildPipelineFormComponent(formBldr, appsFlowSvc) {
-            this.formBldr = formBldr;
+        function BuildPipelineFormComponent(eacSvc, formBuilder, appsFlowSvc) {
+            this.eacSvc = eacSvc;
+            this.formBuilder = formBuilder;
             this.appsFlowSvc = appsFlowSvc;
             this.HostingDetails = new ProjectHostingDetails();
         }
         Object.defineProperty(BuildPipelineFormComponent.prototype, "Artifact", {
-            //PROPERTIES
+            // @Input('main-branch')
+            // public MainBranch: string;
+            // @Input('organization')
+            // public Organization: string;
+            // @Input('repository')
+            // public Repository: string;
             get: function () {
-                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]) || {}
                     : {};
             },
             enumerable: false,
@@ -5507,6 +5521,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "BuildPipelineFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.BuildPipelineFormGroup) === null || _a === void 0 ? void 0 : _a.controls.buildPipeline;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BuildPipelineFormComponent.prototype, "DevOpsAction", {
             get: function () {
                 return this.Environment.DevOpsActions && this.DevOpsActionLookup
@@ -5523,6 +5545,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "DevOpsActionNameFormControl", {
+            get: function () {
+                return this.BuildPipelineFormGroup.get('devOpsActionName');
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BuildPipelineFormComponent.prototype, "EditingSourceControl", {
             get: function () {
                 var _a, _b;
@@ -5535,6 +5564,36 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "NPMTokenFormControl", {
+            get: function () {
+                return this.BuildPipelineFormGroup.get('npmToken');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "SelectedHostingOption", {
+            // (ho) => ho.Lookup === this.BuildPipeline
+            get: function () {
+                var _this = this;
+                var _a, _b;
+                return (_b = (_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) === null || _b === void 0 ? void 0 : _b.find(function (ho) { return ho.Lookup === _this.BuildPipeline; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "SelectedHostingOptionInputControlValues", {
+            get: function () {
+                var _this = this;
+                var _a, _b;
+                return (_b = (_a = this.SelectedHostingOption) === null || _a === void 0 ? void 0 : _a.Inputs) === null || _b === void 0 ? void 0 : _b.reduce(function (prev, cur) {
+                    var res = Object.assign({}, prev);
+                    res[cur.Lookup] = _this.BuildPipelineFormGroup.controls[cur.Lookup].value;
+                    return res;
+                }, {});
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BuildPipelineFormComponent.prototype, "SourceControlLookups", {
             get: function () {
                 return Object.keys(this.SourceControls || {});
@@ -5550,49 +5609,181 @@
             configurable: true
         });
         BuildPipelineFormComponent.prototype.ngOnInit = function () {
+            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, [forms.Validators.required]],
+            }));
+            this.loadProjectHostingDetails();
+            // this.setupControlsForForm();
         };
         //API METHODS
-        //HELPERS
+        BuildPipelineFormComponent.prototype.BuildPipelineChanged = function () {
+            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();
+        };
+        BuildPipelineFormComponent.prototype.SubmitBuildPipeline = function () {
+        };
+        BuildPipelineFormComponent.prototype.SaveEnvironment = function () {
+            var _a;
+            var 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: {},
+            };
+            var artifactLookup;
+            var artifact = Object.assign(Object.assign({}, this.Artifact), this.SelectedHostingOptionInputControlValues);
+            if (!this.ArtifactLookup) {
+                artifactLookup = i2.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;
+            var devOpsActionLookup;
+            if (!this.DevOpsActionLookup) {
+                devOpsActionLookup = i2.Guid.CreateRaw();
+                var 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) {
+                    var 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;
+                var 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
+        BuildPipelineFormComponent.prototype.setupControlsForForm = function () {
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f;
+            for (var 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) || '', [forms.Validators.required]));
+            (_d = (_c = this.SelectedHostingOption) === null || _c === void 0 ? void 0 : _c.Inputs) === null || _d === void 0 ? void 0 : _d.forEach(function (input) {
+                var validators = input.Required ? [forms.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 ? [] : [forms.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');
+                }
+            }
+        };
         BuildPipelineFormComponent.prototype.loadProjectHostingDetails = function () {
             var _this = this;
             this.HostingDetails.Loading = true;
+            // this.Organization,
+            // this.Repository,
+            // this.MainBranch
+            // "powhound4",
+            // "RedwoodCrystals",
+            // "master"
             this.appsFlowSvc
-                .LoadProjectHostingDetails(this.Organization, this.Repository, this.MainBranch)
+                .NewLoadProjectHostingDetails()
                 .subscribe(function (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();
             }, function (err) {
+                console.log("hosting details LOADING EERR: ", _this.HostingDetails);
+                console.log("ERR: ", err);
                 _this.HostingDetails.Loading = false;
             });
+            console.log("HOSTING DETAILS: ", this.HostingDetails);
         };
         return BuildPipelineFormComponent;
     }());
     BuildPipelineFormComponent.decorators = [
         { type: i0.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 = function () { return [
+        { type: EaCService },
         { type: forms.FormBuilder },
         { type: ApplicationsFlowService }
     ]; };
     BuildPipelineFormComponent.propDecorators = {
+        BuildPipeline: [{ type: i0.Input, args: ['build-pipeline',] }],
         DevOpsActionLookup: [{ type: i0.Input, args: ['devops-action-lookup',] }],
+        Disabled: [{ type: i0.Input, args: ['disabled',] }],
         Environment: [{ type: i0.Input, args: ['environment',] }],
-        MainBranch: [{ type: i0.Input, args: ['main-branch',] }],
-        Organization: [{ type: i0.Input, args: ['organization',] }],
-        Repository: [{ type: i0.Input, args: ['repository',] }]
+        EnvironmentLookup: [{ type: i0.Input, args: ['environment-lookup',] }]
     };
 
     var DevopsSourceControlFormComponent = /** @class */ (function () {
         //  Constructors
-        function DevopsSourceControlFormComponent(formBuilder, appsFlowSvc) {
+        function DevopsSourceControlFormComponent(formBuilder, appsFlowSvc, eacSvc) {
             this.formBuilder = formBuilder;
             this.appsFlowSvc = appsFlowSvc;
+            this.eacSvc = eacSvc;
             this.SeparatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
             this.BuildPath = null;
+            // this.EditingSourceControlLookup = null;
             this.HostingDetails = new ProjectHostingDetails();
             this.SelectedBranches = [];
             this.SourceControlRoot = '';
@@ -5691,7 +5882,16 @@
             this.destroyFormControls();
         };
         DevopsSourceControlFormComponent.prototype.ngOnInit = function () {
-            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
@@ -5707,6 +5907,9 @@
         };
         DevopsSourceControlFormComponent.prototype.BuildPathChanged = function (event) {
         };
+        DevopsSourceControlFormComponent.prototype.CreateNewSourceControl = function () {
+            this.SetEditingSourceControl(i2.Guid.CreateRaw());
+        };
         DevopsSourceControlFormComponent.prototype.CreateRepository = function () {
             this.CreatingRepository = true;
             this.RepositoryFormControl.reset();
@@ -5775,6 +5978,95 @@
                 }
             });
         };
+        DevopsSourceControlFormComponent.prototype.SetEditingSourceControl = function (scLookup) {
+            this.EditingSourceControlLookup = scLookup;
+        };
+        DevopsSourceControlFormComponent.prototype.SubmitSourceControl = function () {
+            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
         DevopsSourceControlFormComponent.prototype.addBranchOption = function (value) {
             value = (value || '').trim();
@@ -5909,8 +6201,8 @@
             }
         };
         DevopsSourceControlFormComponent.prototype.setupFormControls = function () {
+            // this.destroyFormControls();
             var _a, _b, _c, _d, _e, _f, _g;
-            this.destroyFormControls();
             this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new forms.FormControl(this.DevOpsActionLookup || '', []));
             this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new forms.FormControl((_a = this.EditingSourceControl.Organization) !== null && _a !== void 0 ? _a : '', forms.Validators.required));
             this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new forms.FormControl((_b = this.EditingSourceControl.Repository) !== null && _b !== void 0 ? _b : '', forms.Validators.required));
@@ -5928,19 +6220,63 @@
     DevopsSourceControlFormComponent.decorators = [
         { type: i0.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 = function () { return [
         { type: forms.FormBuilder },
-        { type: ApplicationsFlowService }
+        { type: ApplicationsFlowService },
+        { type: EaCService }
     ]; };
     DevopsSourceControlFormComponent.propDecorators = {
         BranchesInput: [{ type: i0.ViewChild, args: ['branches',] }],
+        EditingSourceControlLookup: [{ type: i0.Input, args: ['editing-source-control-lookup',] }],
         Environment: [{ type: i0.Input, args: ['environment',] }]
     };
 
+    var SourceControlDialogComponent = /** @class */ (function () {
+        function SourceControlDialogComponent(dialogRef, data) {
+            this.dialogRef = dialogRef;
+            this.data = data;
+        }
+        SourceControlDialogComponent.prototype.ngOnInit = function () {
+        };
+        return SourceControlDialogComponent;
+    }());
+    SourceControlDialogComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: dialog.MatDialogRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+    ]; };
+
+    var BuildPipelineDialogComponent = /** @class */ (function () {
+        function BuildPipelineDialogComponent(dialogRef, data) {
+            this.dialogRef = dialogRef;
+            this.data = data;
+        }
+        BuildPipelineDialogComponent.prototype.ngOnInit = function () {
+        };
+        return BuildPipelineDialogComponent;
+    }());
+    BuildPipelineDialogComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: dialog.MatDialogRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+    ]; };
+
     var ApplicationsFlowModule = /** @class */ (function () {
         function ApplicationsFlowModule() {
         }
@@ -5998,7 +6334,9 @@
                         ProcessorDetailsFormComponent,
                         SourceControlFormComponent,
                         BuildPipelineFormComponent,
-                        DevopsSourceControlFormComponent
+                        DevopsSourceControlFormComponent,
+                        SourceControlDialogComponent,
+                        BuildPipelineDialogComponent
                     ],
                     imports: [
                         i2.FathymSharedModule,
@@ -6048,7 +6386,9 @@
                         ProcessorDetailsFormComponent,
                         SourceControlFormComponent,
                         BuildPipelineFormComponent,
-                        DevopsSourceControlFormComponent
+                        DevopsSourceControlFormComponent,
+                        SourceControlDialogComponent,
+                        BuildPipelineDialogComponent
                     ],
                     entryComponents: [
                         ApplicationsFlowProjectsElementComponent,
@@ -6085,7 +6425,9 @@
                         ProcessorDetailsFormComponent,
                         SourceControlFormComponent,
                         BuildPipelineFormComponent,
-                        DevopsSourceControlFormComponent
+                        DevopsSourceControlFormComponent,
+                        SourceControlDialogComponent,
+                        BuildPipelineDialogComponent
                     ],
                 },] }
     ];
@@ -6179,6 +6521,8 @@
     exports.ɵba = SourceControlFormComponent;
     exports.ɵbb = BuildPipelineFormComponent;
     exports.ɵbc = DevopsSourceControlFormComponent;
+    exports.ɵbd = SourceControlDialogComponent;
+    exports.ɵbe = BuildPipelineDialogComponent;
     exports.ɵc = ProjectTabsComponent;
     exports.ɵd = GeneralComponent;
     exports.ɵe = DomainsComponent;