@lowcodeunit/applications-flow-common 1.33.99-lets-get-social-ish → 1.33.103-lets-get-social-ish

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

@@ -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,18 +4764,18 @@
     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",
-                    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%}"]
+                    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 \n            *ngIf=\"ActionPath\" \n            class=\"slotted-card-action-btn\" \n            [href]=\"ActionPath\" \n            color=\"primary\">{{ ActionText }}\n        </a>\n\n        <a mat-button \n            *ngIf=\"!ActionPath\" \n            class=\"slotted-card-action-btn\" \n            (click)=\"MainActionClickEvent()\" \n            color=\"primary\">\n            {{ ActionText }}\n        </a>\n\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{width:100%}"]
                 },] }
     ];
     SlottedCardComponent.ctorParameters = function () { return []; };
     SlottedCardComponent.propDecorators = {
-        Title: [{ type: i0.Input, args: ['title',] }],
+        ActionText: [{ type: i0.Input, args: ['action-text',] }],
+        ActionPath: [{ type: i0.Input, args: ['action-path',] }],
         Icon: [{ type: i0.Input, args: ['icon',] }],
         MainSlotDescription: [{ type: i0.Input, args: ['main-slot-description',] }],
+        Title: [{ type: i0.Input, args: ['title',] }],
         SecondarySlotDescription: [{ type: i0.Input, args: ['secondary-slot-description',] }],
-        ActionText: [{ type: i0.Input, args: ['action-text',] }],
-        ActionPath: [{ type: i0.Input, args: ['action-path',] }],
         MainActionClicked: [{ type: i0.Output, args: ['main-action-clicked',] }]
     };
 
@@ -5053,30 +5060,13 @@
             this.setupSecurityFormGroup();
         };
         SecurityToggleComponent.prototype.SecuritySubmit = function () {
-            console.log("submitting values");
+            //save the security settings
+            console.log("submitting values: ", this.SecurityFormGroup.value);
         };
         SecurityToggleComponent.prototype.setupSecurityFormGroup = function () {
             var _a, _b;
             this.ProcessorType = ((_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.Processor) === null || _b === void 0 ? void 0 : _b.Type) || '';
-            if (this.EditingApplication != null) {
-                // this.SecurityFormGroup = this.formBldr.group({
-                //   name: [this.EditingApplication.Application?.Name, Validators.required],
-                //   description: [
-                //     this.EditingApplication.Application?.Description,
-                //     Validators.required,
-                //   ],
-                //   route: [
-                //     this.EditingApplication.LookupConfig?.PathRegex.replace('.*', '') ||
-                //       '/',
-                //     Validators.required,
-                //   ],
-                //   // priority: [
-                //   //   this.EditingApplication.Application?.Priority || 10000,
-                //   //   Validators.required,
-                //   // ],
-                //   procType: [this.ProcessorType, [Validators.required]],
-                // });
-            }
+            this.SecurityFormGroup = this.formBldr.group({});
             this.setupSecurityForm();
         };
         SecurityToggleComponent.prototype.setupSecurityForm = function () {
@@ -5089,7 +5079,7 @@
     SecurityToggleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-security-toggle',
-                    template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"spread flow-card\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n        \n        <mat-card-actions>\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",
+                    template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"spread flow-card\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        \n    </mat-card>\n</form>\n",
                     styles: ["::ng-deep .mat-tooltip{color:#000!important}"]
                 },] }
     ];
@@ -5101,9 +5091,9 @@
     };
 
     var ProcessorDetailsFormComponent = /** @class */ (function () {
-        function ProcessorDetailsFormComponent(formBldr) {
+        function ProcessorDetailsFormComponent(formBldr, eacSvc) {
             this.formBldr = formBldr;
-            // this.EditingApplicationLookup = null;
+            this.eacSvc = eacSvc;
             this.redirectTooltip = '';
         }
         Object.defineProperty(ProcessorDetailsFormComponent.prototype, "BuildFormControl", {
@@ -5130,6 +5120,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "DefaultSourceControl", {
+            get: function () {
+                var _a, _b, _c, _d;
+                return {
+                    Organization: (_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.LowCodeUnit) === null || _b === void 0 ? void 0 : _b.Organization,
+                    Repository: (_d = (_c = this.EditingApplication) === null || _c === void 0 ? void 0 : _c.LowCodeUnit) === null || _d === void 0 ? void 0 : _d.Repository,
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(ProcessorDetailsFormComponent.prototype, "InboundPathFormControl", {
             get: function () {
                 var _a;
@@ -5195,7 +5196,15 @@
             configurable: true
         });
         ProcessorDetailsFormComponent.prototype.ngOnInit = function () {
-            this.setupProcessorDetailsForm();
+            if (!this.EditingApplication) {
+                this.CreateNewApplication();
+            }
+            else {
+                this.setupProcessorDetailsForm();
+            }
+        };
+        ProcessorDetailsFormComponent.prototype.CreateNewApplication = function () {
+            this.SetEditingApplication(i2.Guid.CreateRaw());
         };
         ProcessorDetailsFormComponent.prototype.DetermineTooltipText = function () {
             var permanentValue = this.PermanentFormControl.value;
@@ -5213,7 +5222,12 @@
                 this.redirectTooltip = '308 – Permanent and Preserve';
             }
         };
+        ProcessorDetailsFormComponent.prototype.SetEditingApplication = function (appLookup) {
+            this.EditingApplicationLookup = appLookup;
+            this.setupProcessorDetailsForm();
+        };
         ProcessorDetailsFormComponent.prototype.SubmitProcessorDetails = function () {
+            console.log("submitting proc details: ", this.ProcessorDetailsFormGroup.value);
         };
         ProcessorDetailsFormComponent.prototype.ProcessorTypeChanged = function (event) {
             this.ProcessorType = event.value;
@@ -5279,26 +5293,15 @@
             }
         };
         ProcessorDetailsFormComponent.prototype.setupProcessorDetailsForm = function () {
-            var _a, _b, _c, _d, _e;
+            var _a, _b;
             this.ProcessorType = ((_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.Processor) === null || _b === void 0 ? void 0 : _b.Type) || '';
+            console.log("EDITING APP = ", this.EditingApplication);
             if (this.EditingApplication != null) {
                 this.ProcessorDetailsFormGroup = this.formBldr.group({
-                    name: [(_c = this.EditingApplication.Application) === null || _c === void 0 ? void 0 : _c.Name, forms.Validators.required],
-                    description: [
-                        (_d = this.EditingApplication.Application) === null || _d === void 0 ? void 0 : _d.Description,
-                        forms.Validators.required,
-                    ],
-                    route: [
-                        ((_e = this.EditingApplication.LookupConfig) === null || _e === void 0 ? void 0 : _e.PathRegex.replace('.*', '')) ||
-                            '/',
-                        forms.Validators.required,
-                    ],
-                    // priority: [
-                    //   this.EditingApplication.Application?.Priority || 10000,
-                    //   Validators.required,
-                    // ],
-                    procType: [this.ProcessorType, [forms.Validators.required]],
+                    procType: [this.ProcessorType, [forms.Validators.required]]
                 });
+                this.setupDfsForm();
+                this.setupLcuTypeSubForm();
             }
         };
         ProcessorDetailsFormComponent.prototype.setupLCUGitHubForm = function () {
@@ -5309,22 +5312,22 @@
             var _a;
             this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.ApplicationID) || '', [forms.Validators.required]));
         };
-        ProcessorDetailsFormComponent.prototype.setupLCUNPMForm = function () {
-            // this.ApplicationFormGroup.addControl(
-            //   'package',
-            //   this.formBldr.control(
-            //     this.EditingApplication.LowCodeUnit?.Package || '',
-            //     [Validators.required]
-            //   )
-            // );
-            // this.ApplicationFormGroup.addControl(
-            //   'version',
-            //   this.formBldr.control(
-            //     this.EditingApplication.LowCodeUnit?.Version || '',
-            //     [Validators.required]
-            //   )
-            // );
-        };
+        // protected setupLCUNPMForm(): void {
+        // this.ApplicationFormGroup.addControl(
+        //   'package',
+        //   this.formBldr.control(
+        //     this.EditingApplication.LowCodeUnit?.Package || '',
+        //     [Validators.required]
+        //   )
+        // );
+        // this.ApplicationFormGroup.addControl(
+        //   'version',
+        //   this.formBldr.control(
+        //     this.EditingApplication.LowCodeUnit?.Version || '',
+        //     [Validators.required]
+        //   )
+        // );
+        // }
         ProcessorDetailsFormComponent.prototype.setupLCUSPAForm = function () {
             var _a;
             this.ProcessorDetailsFormGroup.addControl('spaRoot', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.SPARoot) || '', [forms.Validators.required]));
@@ -5397,15 +5400,18 @@
     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</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 fxLayoutAlign=\"center center\">\n\n        <button \n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!ProcessorDetailsFormGroup.valid || !ProcessorDetailsFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Processor Details\n        </button>\n\n    </mat-card-actions>\n</mat-card>\n</form>\n  \n",
                     styles: [""]
                 },] }
     ];
     ProcessorDetailsFormComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder }
+        { type: forms.FormBuilder },
+        { type: EaCService }
     ]; };
     ProcessorDetailsFormComponent.propDecorators = {
-        EditingApplication: [{ type: i0.Input, args: ['editing-application',] }]
+        EditingApplication: [{ type: i0.Input, args: ['editing-application',] }],
+        EditingApplicationLookup: [{ type: i0.Input, args: ['editing-application-lookup',] }],
+        SourceControlFormControls: [{ type: i0.ViewChild, args: [SourceControlFormControlsComponent,] }]
     };
 
     var SourceControlFormComponent = /** @class */ (function () {
@@ -5437,7 +5443,6 @@
         });
         Object.defineProperty(SourceControlFormComponent.prototype, "SourceControls", {
             get: function () {
-                console.log("Environment: ", this.Environment);
                 return this.Environment.Sources || {};
             },
             enumerable: false,
@@ -5451,11 +5456,13 @@
             console.log("sourceControlLookupChanged: ", event);
         };
         SourceControlFormComponent.prototype.SubmitSourceControl = function () {
+            console.log("submitting source control: ", this.SourceControlFormGroup.value);
         };
         //HELPER
         SourceControlFormComponent.prototype.setupSourceControlForm = function () {
             var _a, _b;
             this.ProcessorType = ((_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.Processor) === null || _b === void 0 ? void 0 : _b.Type) || '';
+            this.SourceControlFormGroup = this.formBldr.group({});
             this.setupBuildForm();
         };
         SourceControlFormComponent.prototype.setupBuildForm = function () {
@@ -5468,7 +5475,7 @@
     SourceControlFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-source-control-form',
-                    template: "<form class=\"source-control-form\" [formGroup]=\"SourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n<mat-card class=\"spread flow-card\" *ngIf=\"ProcessorType != 'Redirect'\">\n    <mat-card-header>\n      <mat-card-title *ngIf=\"!HasBuildFormControl.value\">\n        Build & Source\n      </mat-card-title>\n\n      <mat-card-title *ngIf=\"HasBuildFormControl.value\">\n        Source Control\n      </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-slide-toggle\n        formControlName=\"hasBuild\"\n        matTooltip=\"Has Build?\"\n      >\n      </mat-slide-toggle>\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      <mat-form-field\n        class=\"mat-full-width\"\n        *ngIf=\"\n          HasBuildFormControl.value && SourceControlLookups?.length > 0\n        \"\n      >\n        <mat-select\n          formControlName=\"sourceControlLookup\"\n          placeholder=\"Source Control\"\n          (selectionChange)=\"SourceControlLookupChanged($event)\"\n          [disabled]=\"\n            SourceControlFormControls?.Loading || HostingDetails?.Loading\n          \"\n        >\n          <ng-container\n            *ngFor=\"let srcCtrlLookup of SourceControlLookups\"\n          >\n            <mat-option\n              [value]=\"srcCtrlLookup\"\n              *ngIf=\"SourceControls[srcCtrlLookup]; let srcCtrl\"\n            >\n              {{ srcCtrl.Name }}\n            </mat-option>\n          </ng-container>\n        </mat-select>\n\n        <div *ngIf=\"HasBuildFormControl?.value\">\n          <h3>\n            @{{\n              SourceControlFormControls?.OrganizationFormControl?.value ||\n                SourceControl?.Organization\n            }}/{{\n              SourceControlFormControls?.RepositoryFormControl?.value ||\n                SourceControl?.Repository\n            }}\n          </h3>\n\n          <p>Organization and Repository pulled from build settings</p>\n\n          <mat-hint>\n            CurrentBuild:\n            {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n          </mat-hint>\n        </div>\n      </mat-form-field>\n\n      <div *ngIf=\"SourceControlLookups?.length < 0\">\n        <h3>\n          Create source control locations under the DevOps tab above.\n        </h3>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SourceControlFormGroup.valid || !SourceControlFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save</button>\n    </mat-card-actions>\n  </mat-card>\n</form>\n",
+                    template: "<form class=\"source-control-form\" [formGroup]=\"SourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n<mat-card class=\"spread flow-card\" *ngIf=\"ProcessorType != 'Redirect'\">\n    <mat-card-header>\n      <mat-card-title *ngIf=\"!HasBuildFormControl.value\">\n        Build & Source\n      </mat-card-title>\n\n      <mat-card-title *ngIf=\"HasBuildFormControl.value\">\n        Source Control\n      </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-slide-toggle\n        formControlName=\"hasBuild\"\n        matTooltip=\"Has Build?\"\n      >\n      </mat-slide-toggle>\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      <mat-form-field\n        class=\"mat-full-width\"\n        *ngIf=\"\n          HasBuildFormControl.value && SourceControlLookups?.length > 0\n        \"\n      >\n        <mat-select\n          formControlName=\"sourceControlLookup\"\n          placeholder=\"Source Control\"\n          (selectionChange)=\"SourceControlLookupChanged($event)\"\n          [disabled]=\"\n            SourceControlFormControls?.Loading || HostingDetails?.Loading\n          \"\n        >\n          <ng-container\n            *ngFor=\"let srcCtrlLookup of SourceControlLookups\"\n          >\n            <mat-option\n              [value]=\"srcCtrlLookup\"\n              *ngIf=\"SourceControls[srcCtrlLookup]; let srcCtrl\"\n            >\n              {{ srcCtrl.Name }}\n            </mat-option>\n          </ng-container>\n        </mat-select>\n\n        <div *ngIf=\"HasBuildFormControl?.value\">\n          <h3>\n            @{{\n              SourceControlFormControls?.OrganizationFormControl?.value ||\n                SourceControl?.Organization\n            }}/{{\n              SourceControlFormControls?.RepositoryFormControl?.value ||\n                SourceControl?.Repository\n            }}\n          </h3>\n\n          <p>Organization and Repository pulled from build settings</p>\n\n          <mat-hint>\n            CurrentBuild:\n            {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n          </mat-hint>\n        </div>\n      </mat-form-field>\n\n      <div *ngIf=\"SourceControlLookups?.length < 0\">\n        <h3>\n          Create source control locations under the DevOps tab above.\n        </h3>\n      </div>\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n\n      <button \n        mat-raised-button \n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!SourceControlFormGroup.valid || !SourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save\n      </button>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>\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,13 +5564,37 @@
             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", {
-            // @Input('main-branch')
-            // public MainBranch: string;
-            // @Input('organization')
-            // public Organization: string;
-            // @Input('repository')
-            // public Repository: string;
             get: function () {
                 return Object.keys(this.SourceControls || {});
             },
@@ -5556,34 +5609,176 @@
             configurable: true
         });
         BuildPipelineFormComponent.prototype.ngOnInit = function () {
+            this.BuildPipelineFormGroup = this.formBuilder.group({});
+            if (this.BuildPipelineFormGroup != null) {
+                this.BuildPipelineFormGroup.removeControl('hostingDetails');
+            }
+            this.BuildPipelineFormGroup.addControl('hostingDetails', this.formBuilder.group({
+                buildPipeline: [this.BuildPipeline, [forms.Validators.required]],
+            }));
+            this.loadProjectHostingDetails();
+        };
+        //API METHODS
+        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 () {
+            console.log("submitting build pipeline: ", this.BuildPipelineFormGroup.value);
+        };
+        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
+                .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("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          <!-- [details]=\"HostingDetails\" \n          [organization]=\"Organization\"\n        [formGroup]=\"DevOpsFormGroup\"-->\n\n          <lcu-hosting-details-form-group\n            [artifact]=\"Artifact\"\n            [devops-action]=\"DevOpsActions[DevOpsActionLookup]\"\n            \n            \n            [disabled]=\"false\"\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\n        <button \n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button>\n        \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',] }],
-        Environment: [{ type: i0.Input, args: ['environment',] }]
+        Disabled: [{ type: i0.Input, args: ['disabled',] }],
+        Environment: [{ type: i0.Input, args: ['environment',] }],
+        EnvironmentLookup: [{ type: i0.Input, args: ['environment-lookup',] }]
     };
 
     var DevopsSourceControlFormComponent = /** @class */ (function () {
         //  Constructors
-        function DevopsSourceControlFormComponent(formBuilder, appsFlowSvc, eacSvc) {
-            this.formBuilder = formBuilder;
+        function DevopsSourceControlFormComponent(appsFlowSvc, eacSvc, formBuilder) {
             this.appsFlowSvc = appsFlowSvc;
             this.eacSvc = eacSvc;
+            this.formBuilder = formBuilder;
             this.SeparatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
             this.BuildPath = null;
-            // this.EditingSourceControlLookup = null;
             this.HostingDetails = new ProjectHostingDetails();
             this.SelectedBranches = [];
             this.SourceControlRoot = '';
@@ -5591,7 +5786,6 @@
             this.UseBuildPath = false;
         }
         Object.defineProperty(DevopsSourceControlFormComponent.prototype, "BranchesFormControl", {
-            //  Fields
             //  Properties
             get: function () {
                 return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
@@ -5682,12 +5876,9 @@
             this.destroyFormControls();
         };
         DevopsSourceControlFormComponent.prototype.ngOnInit = function () {
-            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();
@@ -5706,6 +5897,7 @@
             this.loadProjectHostingDetails();
         };
         DevopsSourceControlFormComponent.prototype.BuildPathChanged = function (event) {
+            //do something??
         };
         DevopsSourceControlFormComponent.prototype.CreateNewSourceControl = function () {
             this.SetEditingSourceControl(i2.Guid.CreateRaw());
@@ -5782,7 +5974,7 @@
             this.EditingSourceControlLookup = scLookup;
         };
         DevopsSourceControlFormComponent.prototype.SubmitSourceControl = function () {
-            console.log("source control submitted");
+            console.log("source control submitted: ", this.DevOpsSourceControlFormGroup.value);
         };
         // public SaveSourceControl(): void {
         //   const saveEnvReq: SaveEnvironmentAsCodeEventRequest = {
@@ -5797,23 +5989,23 @@
         //     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;
-        //   }
+        //   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) {
@@ -6020,19 +6212,19 @@
     DevopsSourceControlFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-devops-source-control-form',
-                    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>",
+                    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\n      <button \n        mat-raised-button \n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      \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: EaCService }
+        { type: EaCService },
+        { type: forms.FormBuilder }
     ]; };
     DevopsSourceControlFormComponent.propDecorators = {
-        BranchesInput: [{ type: i0.ViewChild, args: ['branches',] }],
         EditingSourceControlLookup: [{ type: i0.Input, args: ['editing-source-control-lookup',] }],
-        Environment: [{ type: i0.Input, args: ['environment',] }]
+        Environment: [{ type: i0.Input, args: ['environment',] }],
+        BranchesInput: [{ type: i0.ViewChild, args: ['branches',] }]
     };
 
     var SourceControlDialogComponent = /** @class */ (function () {
@@ -6047,7 +6239,7 @@
     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>",
+                    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: [""]
                 },] }
     ];
@@ -6068,7 +6260,7 @@
     BuildPipelineDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-build-pipeline-dialog',
-                    template: "<lcu-build-pipeline-form\n[devops-action-lookup]=\"data.devopsActionLookup\"\n[environment]=\"data.environment\"\n>\n\n</lcu-build-pipeline-form>\n",
+                    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</lcu-build-pipeline-form>",
                     styles: [""]
                 },] }
     ];