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

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

@@ -248,6 +248,11 @@ class ApplicationsFlowService {
             headers: this.loadHeaders(),
         });
     }
+    NewLoadProjectHostingDetails() {
+        return this.http.get(`${this.apiRoot}/api/lowcodeunit/manage/projects/hosting/details`, {
+            headers: this.loadHeaders(),
+        });
+    }
     SaveEnterpriseAsCode(eac) {
         return this.http.post(`${this.apiRoot}/api/lowcodeunit/manage/eac`, eac, {
             headers: this.loadHeaders(),
@@ -1038,6 +1043,7 @@ class HostingDetailsFormGroupComponent {
     ngOnChanges() { }
     ngOnInit() {
         var _a, _b, _c;
+        console.log("made it to hosting details");
         this.BuildPipeline =
             this.BuildPipeline || ((_a = this.Details) === null || _a === void 0 ? void 0 : _a.HostingOptions)
                 ? (_c = (_b = this.Details) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
@@ -3554,7 +3560,9 @@ ColumnInfoCardComponent.propDecorators = {
 };
 
 class SlottedCardComponent {
-    constructor() { }
+    constructor() {
+        this.MainActionClicked = new EventEmitter;
+    }
     ngOnInit() {
     }
     MainActionClickEvent() {
@@ -3564,18 +3572,18 @@ class SlottedCardComponent {
 SlottedCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-slotted-card',
-                template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
-                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 = () => [];
 SlottedCardComponent.propDecorators = {
-    Title: [{ type: Input, args: ['title',] }],
+    ActionText: [{ type: Input, args: ['action-text',] }],
+    ActionPath: [{ type: Input, args: ['action-path',] }],
     Icon: [{ type: Input, args: ['icon',] }],
     MainSlotDescription: [{ type: Input, args: ['main-slot-description',] }],
+    Title: [{ type: Input, args: ['title',] }],
     SecondarySlotDescription: [{ type: Input, args: ['secondary-slot-description',] }],
-    ActionText: [{ type: Input, args: ['action-text',] }],
-    ActionPath: [{ type: Input, args: ['action-path',] }],
     MainActionClicked: [{ type: Output, args: ['main-action-clicked',] }]
 };
 
@@ -3846,30 +3854,13 @@ class SecurityToggleComponent {
         this.setupSecurityFormGroup();
     }
     SecuritySubmit() {
-        console.log("submitting values");
+        //save the security settings
+        console.log("submitting values: ", this.SecurityFormGroup.value);
     }
     setupSecurityFormGroup() {
         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();
     }
     setupSecurityForm() {
@@ -3881,7 +3872,7 @@ class SecurityToggleComponent {
 SecurityToggleComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -3893,9 +3884,9 @@ SecurityToggleComponent.propDecorators = {
 };
 
 class ProcessorDetailsFormComponent {
-    constructor(formBldr) {
+    constructor(formBldr, eacSvc) {
         this.formBldr = formBldr;
-        // this.EditingApplicationLookup = null;
+        this.eacSvc = eacSvc;
         this.redirectTooltip = '';
     }
     get BuildFormControl() {
@@ -3910,6 +3901,13 @@ class ProcessorDetailsFormComponent {
         var _a;
         return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.defaultFile;
     }
+    get DefaultSourceControl() {
+        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,
+        };
+    }
     get InboundPathFormControl() {
         var _a;
         return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.inboundPath;
@@ -3943,7 +3941,15 @@ class ProcessorDetailsFormComponent {
         return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.preserveMethod;
     }
     ngOnInit() {
-        this.setupProcessorDetailsForm();
+        if (!this.EditingApplication) {
+            this.CreateNewApplication();
+        }
+        else {
+            this.setupProcessorDetailsForm();
+        }
+    }
+    CreateNewApplication() {
+        this.SetEditingApplication(Guid.CreateRaw());
     }
     DetermineTooltipText() {
         let permanentValue = this.PermanentFormControl.value;
@@ -3961,7 +3967,12 @@ class ProcessorDetailsFormComponent {
             this.redirectTooltip = '308 – Permanent and Preserve';
         }
     }
+    SetEditingApplication(appLookup) {
+        this.EditingApplicationLookup = appLookup;
+        this.setupProcessorDetailsForm();
+    }
     SubmitProcessorDetails() {
+        console.log("submitting proc details: ", this.ProcessorDetailsFormGroup.value);
     }
     ProcessorTypeChanged(event) {
         this.ProcessorType = event.value;
@@ -4027,26 +4038,15 @@ class ProcessorDetailsFormComponent {
         }
     }
     setupProcessorDetailsForm() {
-        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, Validators.required],
-                description: [
-                    (_d = this.EditingApplication.Application) === null || _d === void 0 ? void 0 : _d.Description,
-                    Validators.required,
-                ],
-                route: [
-                    ((_e = this.EditingApplication.LookupConfig) === null || _e === void 0 ? void 0 : _e.PathRegex.replace('.*', '')) ||
-                        '/',
-                    Validators.required,
-                ],
-                // priority: [
-                //   this.EditingApplication.Application?.Priority || 10000,
-                //   Validators.required,
-                // ],
-                procType: [this.ProcessorType, [Validators.required]],
+                procType: [this.ProcessorType, [Validators.required]]
             });
+            this.setupDfsForm();
+            this.setupLcuTypeSubForm();
         }
     }
     setupLCUGitHubForm() {
@@ -4057,22 +4057,22 @@ class ProcessorDetailsFormComponent {
         var _a;
         this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.ApplicationID) || '', [Validators.required]));
     }
-    setupLCUNPMForm() {
-        // 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]
+    //   )
+    // );
+    // }
     setupLCUSPAForm() {
         var _a;
         this.ProcessorDetailsFormGroup.addControl('spaRoot', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.SPARoot) || '', [Validators.required]));
@@ -4144,15 +4144,18 @@ class ProcessorDetailsFormComponent {
 ProcessorDetailsFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-processor-details-form',
-                template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SubmitProcessorDetails()\">\n<mat-card class=\"spread flow-card\">\n    <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header>\n\n    <mat-card-content>\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControls?.RepositoryFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && !IsPreserve\"\n\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"302 \u2013 Not Permanent and Not Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"307 \u2013 Not Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"308 \u2013 Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            \n\n            <!-- <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Values used to control the redirect type.  Permanent and Not Preserve = 301; Not Permanent and Not Preserve = 302; Permanent and Preserve = 308; Not Permanent and Not Preserve = 307;\"\n            >\n              info_outline\n            </mat-icon> -->\n          </div>\n        </div>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save</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 = () => [
-    { type: FormBuilder }
+    { type: FormBuilder },
+    { type: EaCService }
 ];
 ProcessorDetailsFormComponent.propDecorators = {
-    EditingApplication: [{ type: Input, args: ['editing-application',] }]
+    EditingApplication: [{ type: Input, args: ['editing-application',] }],
+    EditingApplicationLookup: [{ type: Input, args: ['editing-application-lookup',] }],
+    SourceControlFormControls: [{ type: ViewChild, args: [SourceControlFormControlsComponent,] }]
 };
 
 class SourceControlFormComponent {
@@ -4171,7 +4174,6 @@ class SourceControlFormComponent {
         return Object.keys(this.SourceControls || {});
     }
     get SourceControls() {
-        console.log("Environment: ", this.Environment);
         return this.Environment.Sources || {};
     }
     ngOnInit() {
@@ -4182,11 +4184,13 @@ class SourceControlFormComponent {
         console.log("sourceControlLookupChanged: ", event);
     }
     SubmitSourceControl() {
+        console.log("submitting source control: ", this.SourceControlFormGroup.value);
     }
     //HELPER
     setupSourceControlForm() {
         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();
     }
     setupBuildForm() {
@@ -4198,7 +4202,7 @@ class SourceControlFormComponent {
 SourceControlFormComponent.decorators = [
     { type: 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: [""]
             },] }
 ];
@@ -4212,16 +4216,23 @@ SourceControlFormComponent.propDecorators = {
 };
 
 class BuildPipelineFormComponent {
-    constructor(formBldr, appsFlowSvc) {
-        this.formBldr = formBldr;
+    constructor(eacSvc, formBuilder, appsFlowSvc) {
+        this.eacSvc = eacSvc;
+        this.formBuilder = formBuilder;
         this.appsFlowSvc = appsFlowSvc;
         this.HostingDetails = new ProjectHostingDetails();
     }
-    //PROPERTIES
+    // @Input('main-branch')
+    // public MainBranch: string;
+    // @Input('organization')
+    // public Organization: string;
+    // @Input('repository')
+    // public Repository: string;
     get Artifact() {
-        var _a, _b;
-        return ((_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts) && this.ArtifactLookup
-            ? ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts[this.ArtifactLookup]) || {}
+        var _a, _b, _c;
+        console.log("ARTIFACT: ", (_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts[this.ArtifactLookup]);
+        return ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts) && this.ArtifactLookup
+            ? ((_c = this.Environment) === null || _c === void 0 ? void 0 : _c.Artifacts[this.ArtifactLookup]) || {}
             : {};
     }
     get ArtifactLookup() {
@@ -4229,6 +4240,10 @@ class BuildPipelineFormComponent {
         const artLookup = ((_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.ArtifactLookups) ? (_b = this.DevOpsAction) === null || _b === void 0 ? void 0 : _b.ArtifactLookups[0] : null;
         return artLookup;
     }
+    get BuildPipelineFormControl() {
+        var _a;
+        return (_a = this.BuildPipelineFormGroup) === null || _a === void 0 ? void 0 : _a.controls.buildPipeline;
+    }
     get DevOpsAction() {
         return this.Environment.DevOpsActions && this.DevOpsActionLookup
             ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
@@ -4237,6 +4252,9 @@ class BuildPipelineFormComponent {
     get DevOpsActions() {
         return this.Environment.DevOpsActions || {};
     }
+    get DevOpsActionNameFormControl() {
+        return this.BuildPipelineFormGroup.get('devOpsActionName');
+    }
     get EditingSourceControl() {
         var _a, _b;
         let sc = ((_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Sources) ? (_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Sources[this.EditingSourceControlLookup] : null;
@@ -4245,12 +4263,22 @@ class BuildPipelineFormComponent {
         }
         return sc;
     }
-    // @Input('main-branch')
-    // public MainBranch: string;
-    // @Input('organization')
-    // public Organization: string;
-    // @Input('repository')
-    // public Repository: string;
+    get NPMTokenFormControl() {
+        return this.BuildPipelineFormGroup.get('npmToken');
+    }
+    // (ho) => ho.Lookup === this.BuildPipeline
+    get SelectedHostingOption() {
+        var _a, _b;
+        return (_b = (_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) === null || _b === void 0 ? void 0 : _b.find((ho) => ho.Lookup === this.BuildPipeline);
+    }
+    get SelectedHostingOptionInputControlValues() {
+        var _a, _b;
+        return (_b = (_a = this.SelectedHostingOption) === null || _a === void 0 ? void 0 : _a.Inputs) === null || _b === void 0 ? void 0 : _b.reduce((prev, cur) => {
+            const res = Object.assign({}, prev);
+            res[cur.Lookup] = this.BuildPipelineFormGroup.controls[cur.Lookup].value;
+            return res;
+        }, {});
+    }
     get SourceControlLookups() {
         return Object.keys(this.SourceControls || {});
     }
@@ -4258,40 +4286,179 @@ class BuildPipelineFormComponent {
         return this.Environment.Sources || {};
     }
     ngOnInit() {
+        this.BuildPipelineFormGroup = this.formBuilder.group({});
+        if (this.BuildPipelineFormGroup != null) {
+            this.BuildPipelineFormGroup.removeControl('hostingDetails');
+        }
+        this.BuildPipelineFormGroup.addControl('hostingDetails', this.formBuilder.group({
+            buildPipeline: [this.BuildPipeline, [Validators.required]],
+        }));
+        this.loadProjectHostingDetails();
+    }
+    //API METHODS
+    BuildPipelineChanged() {
+        var _a, _b;
+        console.log("build pipeline value: ", (_a = this.BuildPipelineFormControl) === null || _a === void 0 ? void 0 : _a.value);
+        this.BuildPipeline = (_b = this.BuildPipelineFormControl) === null || _b === void 0 ? void 0 : _b.value;
+        this.setupControlsForForm();
+    }
+    SubmitBuildPipeline() {
+        console.log("submitting build pipeline: ", this.BuildPipelineFormGroup.value);
+    }
+    SaveEnvironment() {
+        var _a;
+        const saveEnvReq = {
+            Environment: Object.assign(Object.assign({}, this.Environment), { Artifacts: this.Environment.Artifacts || {}, DevOpsActions: this.Environment.DevOpsActions || {}, Secrets: this.Environment.Secrets || {}, Sources: this.Environment.Sources || {} }),
+            EnvironmentLookup: this.EnvironmentLookup,
+            EnterpriseDataTokens: {},
+        };
+        let artifactLookup;
+        let artifact = Object.assign(Object.assign({}, this.Artifact), this.SelectedHostingOptionInputControlValues);
+        if (!this.ArtifactLookup) {
+            artifactLookup = Guid.CreateRaw();
+            artifact = Object.assign(Object.assign({}, artifact), { Type: this.SelectedHostingOption
+                    .ArtifactType, Name: this.SelectedHostingOption.Name, NPMRegistry: 'https://registry.npmjs.org/' });
+        }
+        else {
+            artifactLookup = this.ArtifactLookup;
+        }
+        saveEnvReq.Environment.Artifacts[artifactLookup] = artifact;
+        let devOpsActionLookup;
+        if (!this.DevOpsActionLookup) {
+            devOpsActionLookup = Guid.CreateRaw();
+            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { ArtifactLookups: [artifactLookup], Name: this.DevOpsActionNameFormControl.value, Path: this.SelectedHostingOption.Path, Templates: this.SelectedHostingOption.Templates });
+            if ((_a = this.NPMTokenFormControl) === null || _a === void 0 ? void 0 : _a.value) {
+                const secretLookup = 'npm-access-token';
+                doa.SecretLookups = [secretLookup];
+                saveEnvReq.Environment.Secrets[secretLookup] = {
+                    Name: 'NPM Access Token',
+                    DataTokenLookup: secretLookup,
+                    KnownAs: 'NPM_TOKEN',
+                };
+                saveEnvReq.EnterpriseDataTokens[secretLookup] = {
+                    Name: saveEnvReq.Environment.Secrets[secretLookup].Name,
+                    Description: saveEnvReq.Environment.Secrets[secretLookup].Name,
+                    Value: this.NPMTokenFormControl.value,
+                };
+            }
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+        }
+        else {
+            devOpsActionLookup = this.DevOpsActionLookup;
+            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { Name: this.DevOpsActionNameFormControl.value });
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+        }
+        // let source: EaCSourceControl = {
+        //   ...this.EditingSourceControl,
+        //   Branches: this.SourceControlFormControls.SelectedBranches,
+        //   MainBranch: this.SourceControlFormControls.MainBranchFormControl.value,
+        // };
+        // source = {
+        //   ...source,
+        //   Type: 'GitHub',
+        //   Name: this.EditingSourceControlLookup,
+        //   DevOpsActionTriggerLookups: [devOpsActionLookup],
+        //   Organization:
+        //     this.SourceControlFormControls.OrganizationFormControl.value,
+        //   Repository: this.SourceControlFormControls.RepositoryFormControl.value,
+        // };
+        // const scLookup = `github://${source.Organization}/${source.Repository}`;
+        // saveEnvReq.Environment.Sources[scLookup] = source;
+        this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
+    }
+    //  Helpers
+    setupControlsForForm() {
+        var _a, _b, _c, _d, _e, _f;
+        for (const ctrlName in this.BuildPipelineFormGroup.controls) {
+            //devOpsAction doesn't exist
+            //removes hosting details
+            if (ctrlName !== 'buildPipeline' && ctrlName !== 'devOpsAction') {
+                console.log("removing control: ", ctrlName);
+                this.BuildPipelineFormGroup.removeControl(ctrlName);
+            }
+        }
+        this.BuildPipelineFormGroup.addControl('devOpsActionName', this.formBuilder.control(((_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.Name) || ((_b = this.SelectedHostingOption) === null || _b === void 0 ? void 0 : _b.Name) || '', [Validators.required]));
+        (_d = (_c = this.SelectedHostingOption) === null || _c === void 0 ? void 0 : _c.Inputs) === null || _d === void 0 ? void 0 : _d.forEach((input) => {
+            const validators = input.Required ? [Validators.required] : [];
+            this.BuildPipelineFormGroup.addControl(input.Lookup, this.formBuilder.control(this.Artifact[input.Lookup] || input.DefaultValue || '', validators));
+            // if (this.Disabled) {
+            //   this.FormGroup.controls[input.Lookup].disable();
+            // }
+        });
+        if (((_e = this.BuildPipelineFormControl) === null || _e === void 0 ? void 0 : _e.value) === 'npm-release') {
+            if (!this.BuildPipelineFormGroup.controls.npmToken) {
+                this.BuildPipelineFormGroup.addControl('npmToken', this.formBuilder.control('', this.Disabled ? [] : [Validators.required]));
+                if (this.Disabled) {
+                    this.BuildPipelineFormGroup.controls.npmToken.disable();
+                }
+            }
+        }
+        else if (((_f = this.BuildPipelineFormControl) === null || _f === void 0 ? void 0 : _f.value) === 'github-artifacts-release') {
+            if (this.BuildPipelineFormGroup.controls.npmToken) {
+                this.BuildPipelineFormGroup.removeControl('npmToken');
+            }
+        }
+    }
+    loadProjectHostingDetails() {
+        this.HostingDetails.Loading = true;
+        // this.Organization,
+        // this.Repository,
+        // this.MainBranch
+        // "powhound4",
+        // "RedwoodCrystals",
+        // "master"
+        this.appsFlowSvc
+            .NewLoadProjectHostingDetails()
+            .subscribe((response) => {
+            var _a, _b, _c;
+            this.HostingDetails = response.Model;
+            console.log("response: ", response);
+            this.HostingDetails.Loading = false;
+            this.BuildPipeline =
+                ((_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) ? (_c = (_b = this.HostingDetails) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
+            console.log("Build Pipeline HERE= ", this.BuildPipeline);
+            this.setupControlsForForm();
+        }, (err) => {
+            console.log("ERR: ", err);
+            this.HostingDetails.Loading = false;
+        });
+        console.log("HOSTING DETAILS: ", this.HostingDetails);
     }
 }
 BuildPipelineFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-build-pipeline-form',
-                template: "<div class=\"form-card\" fxFlex=\"35%\" fxFlex.lt-md=\"100%\">\n    <mat-card\n      class=\"spread\"\n      *ngIf=\"EditingSourceControl?.Branches?.length > 0\"\n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container>\n          <!-- [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 = () => [
+    { type: EaCService },
     { type: FormBuilder },
     { type: ApplicationsFlowService }
 ];
 BuildPipelineFormComponent.propDecorators = {
+    BuildPipeline: [{ type: Input, args: ['build-pipeline',] }],
     DevOpsActionLookup: [{ type: Input, args: ['devops-action-lookup',] }],
-    Environment: [{ type: Input, args: ['environment',] }]
+    Disabled: [{ type: Input, args: ['disabled',] }],
+    Environment: [{ type: Input, args: ['environment',] }],
+    EnvironmentLookup: [{ type: Input, args: ['environment-lookup',] }]
 };
 
 class DevopsSourceControlFormComponent {
     //  Constructors
-    constructor(formBuilder, appsFlowSvc, eacSvc) {
-        this.formBuilder = formBuilder;
+    constructor(appsFlowSvc, eacSvc, formBuilder) {
         this.appsFlowSvc = appsFlowSvc;
         this.eacSvc = eacSvc;
+        this.formBuilder = formBuilder;
         this.SeparatorKeysCodes = [ENTER, COMMA];
         this.BuildPath = null;
-        // this.EditingSourceControlLookup = null;
         this.HostingDetails = new ProjectHostingDetails();
         this.SelectedBranches = [];
         this.SourceControlRoot = '';
         this.UseBranches = true;
         this.UseBuildPath = false;
     }
-    //  Fields
     //  Properties
     get BranchesFormControl() {
         return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
@@ -4343,12 +4510,9 @@ class DevopsSourceControlFormComponent {
         this.destroyFormControls();
     }
     ngOnInit() {
-        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();
@@ -4367,6 +4531,7 @@ class DevopsSourceControlFormComponent {
         this.loadProjectHostingDetails();
     }
     BuildPathChanged(event) {
+        //do something??
     }
     CreateNewSourceControl() {
         this.SetEditingSourceControl(Guid.CreateRaw());
@@ -4442,7 +4607,7 @@ class DevopsSourceControlFormComponent {
         this.EditingSourceControlLookup = scLookup;
     }
     SubmitSourceControl() {
-        console.log("source control submitted");
+        console.log("source control submitted: ", this.DevOpsSourceControlFormGroup.value);
     }
     // public SaveSourceControl(): void {
     //   const saveEnvReq: SaveEnvironmentAsCodeEventRequest = {
@@ -4457,23 +4622,23 @@ class DevopsSourceControlFormComponent {
     //     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) {
@@ -4672,19 +4837,19 @@ class DevopsSourceControlFormComponent {
 DevopsSourceControlFormComponent.decorators = [
     { type: 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 = () => [
-    { type: FormBuilder },
     { type: ApplicationsFlowService },
-    { type: EaCService }
+    { type: EaCService },
+    { type: FormBuilder }
 ];
 DevopsSourceControlFormComponent.propDecorators = {
-    BranchesInput: [{ type: ViewChild, args: ['branches',] }],
     EditingSourceControlLookup: [{ type: Input, args: ['editing-source-control-lookup',] }],
-    Environment: [{ type: Input, args: ['environment',] }]
+    Environment: [{ type: Input, args: ['environment',] }],
+    BranchesInput: [{ type: ViewChild, args: ['branches',] }]
 };
 
 class SourceControlDialogComponent {
@@ -4698,7 +4863,7 @@ class SourceControlDialogComponent {
 SourceControlDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-source-control-dialog',
-                template: "\n<div fxLayoutAlign=\"center center\">\n<lcu-devops-source-control-form\n        [environment]=\"data.environment\"\n        [editing-source-control-lookup]=\"data.scLookup\">\n</lcu-devops-source-control-form>\n</div>",
+                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: [""]
             },] }
 ];
@@ -4718,7 +4883,7 @@ class BuildPipelineDialogComponent {
 BuildPipelineDialogComponent.decorators = [
     { type: 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: [""]
             },] }
 ];