@lowcodeunit/applications-flow-common 1.33.97-lets-get-social-ish → 1.33.101-lets-get-social-ish

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

@@ -1,4 +1,4 @@
-import { ɵɵdefineInjectable, Injectable, ɵɵinject, INJECTOR, Injector, Component, Input, EventEmitter, Output, ViewChild, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, INJECTOR, Injector, Component, Input, EventEmitter, Output, ViewChild, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, Inject, NgModule } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { __awaiter } from 'tslib';
 import { HttpClient, HttpBackend } from '@angular/common/http';
@@ -11,6 +11,7 @@ import { map, debounceTime, switchMap } from 'rxjs/operators';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Model for form values
@@ -247,6 +248,11 @@ class ApplicationsFlowService {
             headers: this.loadHeaders(),
         });
     }
+    NewLoadProjectHostingDetails() {
+        return this.http.get(`${this.apiRoot}/api/lowcodeunit/manage/projects/hosting/details`, {
+            headers: this.loadHeaders(),
+        });
+    }
     SaveEnterpriseAsCode(eac) {
         return this.http.post(`${this.apiRoot}/api/lowcodeunit/manage/eac`, eac, {
             headers: this.loadHeaders(),
@@ -1037,6 +1043,7 @@ class HostingDetailsFormGroupComponent {
     ngOnChanges() { }
     ngOnInit() {
         var _a, _b, _c;
+        console.log("made it to hosting details");
         this.BuildPipeline =
             this.BuildPipeline || ((_a = this.Details) === null || _a === void 0 ? void 0 : _a.HostingOptions)
                 ? (_c = (_b = this.Details) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
@@ -3553,7 +3560,9 @@ ColumnInfoCardComponent.propDecorators = {
 };
 
 class SlottedCardComponent {
-    constructor() { }
+    constructor() {
+        this.MainActionClicked = new EventEmitter;
+    }
     ngOnInit() {
     }
     MainActionClickEvent() {
@@ -3563,7 +3572,7 @@ class SlottedCardComponent {
 SlottedCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-slotted-card',
-                template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
+                template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button *ngIf=\"ActionPath\" class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n      <a mat-button *ngIf=\"!ActionPath\" class=\"slotted-card-action-btn\" (click)=\"MainActionClickEvent()\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
                 styles: [".col-info-card{border:2px solid #d3d3d3;margin:20px;padding:0}.header-icon{margin-right:10px}.card-title{font-size:30px;margin-bottom:0}.header-description{background-color:#d3d3d3;margin-left:-2px;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
             },] }
 ];
@@ -4143,7 +4152,7 @@ class ProcessorDetailsFormComponent {
 ProcessorDetailsFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-processor-details-form',
-                template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SubmitProcessorDetails()\">\n<mat-card class=\"spread flow-card\">\n    <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header>\n\n    <mat-card-content>\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControls?.RepositoryFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && !IsPreserve\"\n\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"302 \u2013 Not Permanent and Not Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"307 \u2013 Not Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"308 \u2013 Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            \n\n            <!-- <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Values used to control the redirect type.  Permanent and Not Preserve = 301; Not Permanent and Not Preserve = 302; Permanent and Preserve = 308; Not Permanent and Not Preserve = 307;\"\n            >\n              info_outline\n            </mat-icon> -->\n          </div>\n        </div>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save Security Settings</button>\n    </mat-card-actions>\n</mat-card>\n</form>\n  \n",
+                template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SubmitProcessorDetails()\">\n<mat-card class=\"spread flow-card\">\n    <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header>\n\n    <mat-card-content>\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControls?.RepositoryFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && !IsPreserve\"\n\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"302 \u2013 Not Permanent and Not Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"307 \u2013 Not Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"308 \u2013 Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            \n\n            <!-- <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Values used to control the redirect type.  Permanent and Not Preserve = 301; Not Permanent and Not Preserve = 302; Permanent and Preserve = 308; Not Permanent and Not Preserve = 307;\"\n            >\n              info_outline\n            </mat-icon> -->\n          </div>\n        </div>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save</button>\n    </mat-card-actions>\n</mat-card>\n</form>\n  \n",
                 styles: [""]
             },] }
 ];
@@ -4211,32 +4220,610 @@ SourceControlFormComponent.propDecorators = {
 };
 
 class BuildPipelineFormComponent {
-    constructor() { }
+    constructor(formBuilder, appsFlowSvc) {
+        this.formBuilder = formBuilder;
+        this.appsFlowSvc = appsFlowSvc;
+        this.HostingDetails = new ProjectHostingDetails();
+    }
+    // @Input('main-branch')
+    // public MainBranch: string;
+    // @Input('organization')
+    // public Organization: string;
+    // @Input('repository')
+    // public Repository: string;
+    get Artifact() {
+        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() {
+        var _a, _b;
+        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] || {}
+            : {};
+    }
+    get DevOpsActions() {
+        return this.Environment.DevOpsActions || {};
+    }
+    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;
+        if (sc == null && this.EditingSourceControlLookup) {
+            sc = {};
+        }
+        return sc;
+    }
+    // (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 SourceControlLookups() {
+        return Object.keys(this.SourceControls || {});
+    }
+    get SourceControls() {
+        return this.Environment.Sources || {};
+    }
     ngOnInit() {
+        var _a, _b, _c;
+        this.BuildPipelineFormGroup = this.formBuilder.group({});
+        this.loadProjectHostingDetails();
+        console.log("ARTIFACT: ", this.Artifact);
+        // this.BuildPipeline ||
+        // github-artifacts-release is  this.HostingDetails?.HostingOptions[0]?.Lookup
+        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);
+        if (this.BuildPipelineFormGroup != null) {
+            this.BuildPipelineFormGroup.removeControl('hostingDetails');
+        }
+        this.BuildPipelineFormGroup.addControl('hostingDetails', this.formBuilder.group({
+            buildPipeline: [this.BuildPipeline, [Validators.required]],
+        }));
+        this.setupControlsForForm();
+    }
+    //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();
+    }
+    //  Helpers
+    setupControlsForForm() {
+        //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);
+        // }
+        //}
+        var _a, _b, _c, _d, _e, _f;
+        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();
+            // }
+        });
+        debugger;
+        if (((_e = this.BuildPipelineFormControl) === null || _e === void 0 ? void 0 : _e.value) === 'npm-release') {
+            debugger;
+            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) => {
+            this.HostingDetails = response.Model;
+            console.log("response: ", response);
+            this.HostingDetails.Loading = false;
+        }, (err) => {
+            this.HostingDetails.Loading = false;
+            console.log("hosting details LOADING EERR: ", this.HostingDetails);
+            console.log("ERR: ", err);
+        });
+        console.log("HOSTING DETAILS: ", this.HostingDetails);
     }
 }
 BuildPipelineFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-build-pipeline-form',
-                template: "<p>build-pipeline-form works!</p>\n",
+                template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\">\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>\n</form>\n",
                 styles: [""]
             },] }
 ];
-BuildPipelineFormComponent.ctorParameters = () => [];
+BuildPipelineFormComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: ApplicationsFlowService }
+];
+BuildPipelineFormComponent.propDecorators = {
+    BuildPipeline: [{ type: Input, args: ['build-pipeline',] }],
+    DevOpsActionLookup: [{ type: Input, args: ['devops-action-lookup',] }],
+    Disabled: [{ type: Input, args: ['disabled',] }],
+    Environment: [{ type: Input, args: ['environment',] }]
+};
 
 class DevopsSourceControlFormComponent {
-    constructor() { }
+    //  Constructors
+    constructor(formBuilder, appsFlowSvc, eacSvc) {
+        this.formBuilder = formBuilder;
+        this.appsFlowSvc = appsFlowSvc;
+        this.eacSvc = eacSvc;
+        this.SeparatorKeysCodes = [ENTER, COMMA];
+        this.BuildPath = null;
+        // this.EditingSourceControlLookup = null;
+        this.HostingDetails = new ProjectHostingDetails();
+        this.SelectedBranches = [];
+        this.SourceControlRoot = '';
+        this.UseBranches = true;
+        this.UseBuildPath = false;
+    }
+    //  Fields
+    //  Properties
+    get BranchesFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
+    }
+    get BuildPathFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
+    }
+    get DevOpsActionLookups() {
+        return Object.keys(this.DevOpsActions || {});
+    }
+    get DevOpsActionLookup() {
+        var _a, _b, _c;
+        if (!!((_a = this.DevOpsActionLookupFormControl) === null || _a === void 0 ? void 0 : _a.value)) {
+            return this.DevOpsActionLookupFormControl.value;
+        }
+        if (!!((_b = this.EditingSourceControl) === null || _b === void 0 ? void 0 : _b.DevOpsActionTriggerLookups)) {
+            return (_c = this.EditingSourceControl) === null || _c === void 0 ? void 0 : _c.DevOpsActionTriggerLookups[0];
+        }
+        else {
+            return null;
+        }
+    }
+    get DevOpsActionLookupFormControl() {
+        return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
+    }
+    get DevOpsActions() {
+        return this.Environment.DevOpsActions || {};
+    }
+    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;
+        if (sc == null && this.EditingSourceControlLookup) {
+            sc = {};
+        }
+        return sc;
+    }
+    get MainBranchFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
+    }
+    get OrganizationFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
+    }
+    get RepositoryFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
+    }
+    //  Life Cycle
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        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();
+        }
+        this.RefreshOrganizations();
+    }
+    //  API Methods
+    AddBranchOption(event) {
+        this.addBranchOption(event.value);
+        event.input.value = '';
+    }
+    BranchOptionSelected(event) {
+        this.addBranchOption(event.option.value);
+    }
+    BranchesChanged(branches) {
+        this.loadProjectHostingDetails();
+    }
+    BuildPathChanged(event) {
+    }
+    CreateNewSourceControl() {
+        this.SetEditingSourceControl(Guid.CreateRaw());
+    }
+    CreateRepository() {
+        this.CreatingRepository = true;
+        this.RepositoryFormControl.reset();
+    }
+    CancelCreateRepository() {
+        this.CreatingRepository = false;
+    }
+    DevOpsActionLookupChanged(event) {
+        this.configureDevOpsAction();
+    }
+    MainBranchChanged(event) {
+        this.emitBranchesChanged();
+    }
+    OrganizationChanged(event) {
+        const org = this.OrganizationFormControl;
+        this.RepositoryFormControl.reset();
+        if (this.UseBranches) {
+            this.BranchesFormControl.reset();
+            this.SelectedBranches = [];
+        }
+        this.listRepositories();
+    }
+    RefreshOrganizations() {
+        var _a, _b, _c;
+        // this.Loading = true;
+        this.listOrganizations();
+        (_a = this.OrganizationFormControl) === null || _a === void 0 ? void 0 : _a.reset();
+        (_b = this.RepositoryFormControl) === null || _b === void 0 ? void 0 : _b.reset();
+        if (this.UseBranches) {
+            (_c = this.BranchesFormControl) === null || _c === void 0 ? void 0 : _c.reset();
+        }
+    }
+    RemoveBranchOption(option) {
+        const index = this.SelectedBranches.indexOf(option);
+        if (index >= 0) {
+            this.SelectedBranches.splice(index, 1);
+        }
+        this.emitBranchesChanged();
+    }
+    RepositoryChanged(event) {
+        const repo = this.RepositoryFormControl;
+        if (this.UseBranches) {
+            this.BranchesFormControl.reset();
+            this.SelectedBranches = [];
+            this.listBranches();
+        }
+        if (!this.UseBranches) {
+            this.listBuildPaths();
+        }
+    }
+    SaveRepository() {
+        this.Loading = true;
+        const org = this.OrganizationFormControl.value;
+        const repoName = this.RepositoryFormControl.value;
+        this.appsFlowSvc
+            .CreateRepository(org, repoName)
+            .subscribe((response) => {
+            if (response.Status.Code === 0) {
+                this.listRepositories(repoName);
+                this.CreatingRepository = false;
+            }
+            else {
+                //  TODO:  Need to surface an error to the user...
+                this.Loading = false;
+            }
+        });
+    }
+    SetEditingSourceControl(scLookup) {
+        this.EditingSourceControlLookup = scLookup;
+    }
+    SubmitSourceControl() {
+        console.log("source control submitted");
+    }
+    // public SaveSourceControl(): void {
+    //   const saveEnvReq: SaveEnvironmentAsCodeEventRequest = {
+    //     Environment: {
+    //       ...this.Environment,
+    //       Artifacts: this.Environment.Artifacts || {},
+    //       DevOpsActions: this.Environment.DevOpsActions || {},
+    //       Secrets: this.Environment.Secrets || {},
+    //       Sources: this.Environment.Sources || {},
+    //     },
+    //     EnvironmentLookup: this.EnvironmentLookup,
+    //     EnterpriseDataTokens: {},
+    //   };
+    //   let artifactLookup: string;
+    //   // let artifact: EaCArtifact = {
+    //   //   ...this.Artifact,
+    //   //   ...this.HostingDetailsFormControls
+    //   //     .SelectedHostingOptionInputControlValues,
+    //   // };
+    //   if (!this.ArtifactLookup) {
+    //     artifactLookup = Guid.CreateRaw();
+    //     artifact = {
+    //       ...artifact,
+    //       Type: this.HostingDetailsFormControls.SelectedHostingOption
+    //         .ArtifactType,
+    //       Name: this.HostingDetailsFormControls.SelectedHostingOption.Name,
+    //       NPMRegistry: 'https://registry.npmjs.org/',
+    //     };
+    //   } else {
+    //     artifactLookup = this.ArtifactLookup;
+    //   }
+    //   saveEnvReq.Environment.Artifacts[artifactLookup] = artifact;
+    //   let devOpsActionLookup: string;
+    //   if (!this.DevOpsActionLookup) {
+    //     devOpsActionLookup = Guid.CreateRaw();
+    //     // const doa: EaCDevOpsAction = {
+    //     //   ...this.DevOpsAction,
+    //     //   ArtifactLookups: [artifactLookup],
+    //     //   Name: this.HostingDetailsFormControls.DevOpsActionNameFormControl.value,
+    //     //   Path: this.HostingDetailsFormControls.SelectedHostingOption.Path,
+    //     //   Templates:
+    //     //     this.HostingDetailsFormControls.SelectedHostingOption.Templates,
+    //     // };
+    //     if (this.HostingDetailsFormControls.NPMTokenFormControl?.value) {
+    //       const secretLookup = 'npm-access-token';
+    //       doa.SecretLookups = [secretLookup];
+    //       saveEnvReq.Environment.Secrets[secretLookup] = {
+    //         Name: 'NPM Access Token',
+    //         DataTokenLookup: secretLookup,
+    //         KnownAs: 'NPM_TOKEN',
+    //       };
+    //       saveEnvReq.EnterpriseDataTokens[secretLookup] = {
+    //         Name: saveEnvReq.Environment.Secrets[secretLookup].Name,
+    //         Description: saveEnvReq.Environment.Secrets[secretLookup].Name,
+    //         Value: this.NPMTokenFormControl.value,
+    //       };
+    //     }
+    //     saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+    //   } else {
+    //     devOpsActionLookup = this.DevOpsActionLookupFormControl.value;
+    //     const doa: EaCDevOpsAction = {
+    //       ...this.DevOpsAction,
+    //       Name: this.HostingDetailsFormControls.DevOpsActionNameFormControl.value,
+    //     };
+    //     saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+    //   }
+    //   let source: EaCSourceControl = {
+    //     ...this.EditingSourceControl,
+    //     Branches: this.SelectedBranches,
+    //     MainBranch: this.MainBranchFormControl.value,
+    //   };
+    //   source = {
+    //     ...source,
+    //     Type: 'GitHub',
+    //     Name: this.EditingSourceControlLookup,
+    //     DevOpsActionTriggerLookups: [devOpsActionLookup],
+    //     Organization:
+    //       this.OrganizationFormControl.value,
+    //     Repository: this.RepositoryFormControl.value,
+    //   };
+    //   const scLookup = `github://${source.Organization}/${source.Repository}`;
+    //   saveEnvReq.Environment.Sources[scLookup] = source;
+    //   this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
+    // }
+    //  Helpers
+    addBranchOption(value) {
+        value = (value || '').trim();
+        if (value && this.SelectedBranches.indexOf(value) < 0) {
+            this.SelectedBranches.push(value);
+        }
+        this.BranchesInput.nativeElement.blur();
+        this.emitBranchesChanged();
+    }
+    configureDevOpsAction() {
+        setTimeout(() => {
+            this.DevOpsActionLookupFormControl.setValue(this.DevOpsActionLookup);
+        }, 0);
+    }
+    destroyFormControls() {
+        var _a, _b, _c, _d;
+        this.DevOpsSourceControlFormGroup.removeControl([this.SourceControlRoot, 'mainBranch'].join(''));
+        (_a = this.DevOpsSourceControlFormGroup) === null || _a === void 0 ? void 0 : _a.removeControl([this.SourceControlRoot, 'branches'].join(''));
+        (_b = this.DevOpsSourceControlFormGroup) === null || _b === void 0 ? void 0 : _b.removeControl([this.SourceControlRoot, 'buildPath'].join(''));
+        this.SelectedBranches = [];
+        (_c = this.DevOpsSourceControlFormGroup) === null || _c === void 0 ? void 0 : _c.removeControl([this.SourceControlRoot, 'organization'].join(''));
+        (_d = this.DevOpsSourceControlFormGroup) === null || _d === void 0 ? void 0 : _d.removeControl([this.SourceControlRoot, 'repository'].join(''));
+    }
+    emitBranchesChanged() {
+        var _a, _b;
+        if (((_a = this.SelectedBranches) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (!this.MainBranchFormControl.value ||
+                this.SelectedBranches.indexOf(this.MainBranchFormControl.value) < 0)) {
+            this.MainBranchFormControl.setValue(this.SelectedBranches.find((branch) => branch === 'main' || branch === 'master') || this.SelectedBranches[0]);
+        }
+        else if (((_b = this.SelectedBranches) === null || _b === void 0 ? void 0 : _b.length) <= 0) {
+            this.MainBranchFormControl.reset();
+        }
+        this.BranchesFormControl.setValue(this.SelectedBranches.join(','));
+        this.BranchesChanged(this.SelectedBranches || []);
+    }
+    listBranches() {
+        if (this.UseBranches) {
+            this.Loading = true;
+            this.appsFlowSvc
+                .ListBranches(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
+                .subscribe((response) => {
+                var _a, _b, _c;
+                this.BranchOptions = response.Model;
+                this.Loading = false;
+                if (((_b = (_a = this.EditingSourceControl) === null || _a === void 0 ? void 0 : _a.Branches) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    this.SelectedBranches = this.EditingSourceControl.Branches;
+                }
+                else if (((_c = this.BranchOptions) === null || _c === void 0 ? void 0 : _c.length) === 1) {
+                    this.BranchesFormControl.setValue(this.BranchOptions[0].Name);
+                    this.SelectedBranches = [this.BranchOptions[0].Name];
+                }
+                this.emitBranchesChanged();
+                this.listBuildPaths();
+            });
+        }
+    }
+    listBuildPaths() {
+        if (this.UseBuildPath) {
+            this.Loading = true;
+            this.appsFlowSvc
+                .ListBuildPaths(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
+                .subscribe((response) => {
+                var _a;
+                this.BuildPathOptions = response.Model;
+                this.Loading = false;
+                if (((_a = this.BuildPathOptions) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                    this.BuildPathFormControl.setValue(this.BuildPathOptions[0]);
+                }
+            });
+        }
+    }
+    listOrganizations() {
+        this.Loading = true;
+        this.appsFlowSvc
+            .ListOrganizations()
+            .subscribe((response) => {
+            var _a;
+            this.OrganizationOptions = response.Model;
+            this.Loading = false;
+            if ((_a = this.EditingSourceControl) === null || _a === void 0 ? void 0 : _a.Organization) {
+                setTimeout(() => {
+                    var _a;
+                    this.OrganizationFormControl.setValue(this.EditingSourceControl.Organization);
+                    this.listRepositories((_a = this.EditingSourceControl) === null || _a === void 0 ? void 0 : _a.Repository);
+                }, 0);
+            }
+        });
+    }
+    listRepositories(activeRepo = null) {
+        this.Loading = true;
+        this.appsFlowSvc
+            .ListRepositories(this.OrganizationFormControl.value)
+            .subscribe((response) => {
+            var _a;
+            this.RepositoryOptions = response.Model;
+            this.Loading = false;
+            if (activeRepo) {
+                setTimeout(() => {
+                    this.RepositoryFormControl.setValue(activeRepo);
+                    this.listBranches();
+                    if (!this.UseBranches) {
+                        this.listBuildPaths();
+                    }
+                }, 0);
+            }
+            else if (((_a = this.RepositoryOptions) === null || _a === void 0 ? void 0 : _a.length) <= 0) {
+                this.CreatingRepository = true;
+            }
+        });
+    }
+    loadProjectHostingDetails() {
+        var _a, _b, _c, _d;
+        if (((_a = this.SelectedBranches) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.HostingDetails.Loading = true;
+            this.appsFlowSvc
+                .LoadProjectHostingDetails((_b = this.OrganizationFormControl) === null || _b === void 0 ? void 0 : _b.value, (_c = this.RepositoryFormControl) === null || _c === void 0 ? void 0 : _c.value, (_d = this.MainBranchFormControl) === null || _d === void 0 ? void 0 : _d.value)
+                .subscribe((response) => {
+                this.HostingDetails = response.Model;
+                this.HostingDetails.Loading = false;
+                this.configureDevOpsAction();
+            }, (err) => {
+                this.HostingDetails.Loading = false;
+            });
+        }
+    }
+    setupFormControls() {
+        // this.destroyFormControls();
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new FormControl(this.DevOpsActionLookup || '', []));
+        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new FormControl((_a = this.EditingSourceControl.Organization) !== null && _a !== void 0 ? _a : '', Validators.required));
+        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new FormControl((_b = this.EditingSourceControl.Repository) !== null && _b !== void 0 ? _b : '', Validators.required));
+        if (this.UseBranches) {
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'branches'].join(''), new FormControl((_d = (_c = this.EditingSourceControl) === null || _c === void 0 ? void 0 : _c.Branches) !== null && _d !== void 0 ? _d : '', Validators.required));
+            this.SelectedBranches = (_e = this.EditingSourceControl) === null || _e === void 0 ? void 0 : _e.Branches;
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'mainBranch'].join(''), new FormControl((_f = this.EditingSourceControl.MainBranch) !== null && _f !== void 0 ? _f : '', Validators.required));
+        }
+        if (this.UseBuildPath) {
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'buildPath'].join(''), new FormControl((_g = this.BuildPath) !== null && _g !== void 0 ? _g : '', Validators.required));
+        }
     }
 }
 DevopsSourceControlFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lcu-devops-source-control-form',
-                template: "<p>devops-source-control-form works!</p>\n",
+                template: "<form class=\"form-card\" [formGroup]=\"DevOpsSourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n  <mat-card class=\"spread\" class=\"sc-card\">\n    <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header>\n\n    <mat-card-content>\n      <div class=\"card\">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-select formControlName=\"devOpsActionLookup\" placeholder=\"DevOps Action\"\n            [disabled]=\"HostingDetails?.Loading\" (selectionChange)=\"DevOpsActionLookupChanged($event)\">\n            <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n              <mat-option [value]=\"devOpsActionLookup\" *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                {{ devOpsAction.Name }}\n              </mat-option>\n            </ng-container>\n\n            <mat-option value=\"\">-- Create New --</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n        <mat-form-field class=\"mat-full-width with-hint\" *ngIf=\"OrganizationOptions?.length > 0\">\n          <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'organization'\" placeholder=\"Organization\"\n            (selectionChange)=\"OrganizationChanged($event)\" [disabled]=\"Loading || HostingDetails?.Loading\" required>\n            <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n              <mat-option [value]=\"orgOpt.Name\">\n                {{ orgOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\"> refresh </mat-icon>\n\n          <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \" [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n            <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n              <mat-option [value]=\"repoOpt.Name\">\n                {{ repoOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <input matInput placeholder=\"Repository (creates new if does not exist)\"\n            [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n            [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n          <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n            *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n            add_circle\n          </mat-icon>\n\n          <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n            *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n            <mat-icon matSuffix color=\"primary\">\n              save\n            </mat-icon>\n          </button>\n\n          <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n            <mat-icon matSuffix>\n              cancel\n            </mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-label>Selected Branches</mat-label>\n\n          <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n            <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n              <mat-option [value]=\"branchOpt.Name\">\n                {{ branchOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-autocomplete>\n\n          <mat-chip-list #selectedBranches>\n            <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n              *ngFor=\"let selBranch of SelectedBranches\">\n              {{ selBranch }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\n            <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n              [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n              [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n              (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n              required />\n          </mat-chip-list>\n        </mat-form-field>\n\n        <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n            [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n            <ng-container *ngFor=\"let branch of SelectedBranches\">\n              <mat-option [value]=\"branch\">\n                {{ branch }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\"> refresh </mat-icon>\n\n          <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \">\n        <mat-form-field class=\"mat-full-width with-hint\">\n          <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n            [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n            <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n              <mat-option [value]=\"buildPath\">\n                {{ buildPath }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-hint>\n            The build path identifies which build action to use for your\n            configuration.\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"Loading\">\n        <div class=\"spread\">\n          <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n          <div class=\"margin-3\">\n            <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n              Loading organizations\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \">\n              Loading repositories\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n              Loading branches\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \">\n              Loading build paths\n            </h4>\n          </div>\n        </div>\n      </div>\n      <!-- </div> -->\n\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n      <button mat-raised-button type=\"submit\">Save</button>\n    </mat-card-actions>\n  </mat-card>\n</form>",
+                styles: [".form-card,.sc-card{width:100%}"]
+            },] }
+];
+DevopsSourceControlFormComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: ApplicationsFlowService },
+    { type: EaCService }
+];
+DevopsSourceControlFormComponent.propDecorators = {
+    BranchesInput: [{ type: ViewChild, args: ['branches',] }],
+    EditingSourceControlLookup: [{ type: Input, args: ['editing-source-control-lookup',] }],
+    Environment: [{ type: Input, args: ['environment',] }]
+};
+
+class SourceControlDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+}
+SourceControlDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lcu-source-control-dialog',
+                template: "\n<div fxLayoutAlign=\"center center\">\n<lcu-devops-source-control-form\n        [environment]=\"data.environment\"\n        [editing-source-control-lookup]=\"data.scLookup\">\n</lcu-devops-source-control-form>\n</div>",
                 styles: [""]
             },] }
 ];
-DevopsSourceControlFormComponent.ctorParameters = () => [];
+SourceControlDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+class BuildPipelineDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+}
+BuildPipelineDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lcu-build-pipeline-dialog',
+                template: "<lcu-build-pipeline-form\n[build-pipeline]=\"data.buildPipeline\"\n[devops-action-lookup]=\"data.devopsActionLookup\"\n[environment]=\"data.environment\"\n>\n\n</lcu-build-pipeline-form>\n",
+                styles: [""]
+            },] }
+];
+BuildPipelineDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
 
 class ApplicationsFlowModule {
     static forRoot() {
@@ -4292,7 +4879,9 @@ ApplicationsFlowModule.decorators = [
                     ProcessorDetailsFormComponent,
                     SourceControlFormComponent,
                     BuildPipelineFormComponent,
-                    DevopsSourceControlFormComponent
+                    DevopsSourceControlFormComponent,
+                    SourceControlDialogComponent,
+                    BuildPipelineDialogComponent
                 ],
                 imports: [
                     FathymSharedModule,
@@ -4342,7 +4931,9 @@ ApplicationsFlowModule.decorators = [
                     ProcessorDetailsFormComponent,
                     SourceControlFormComponent,
                     BuildPipelineFormComponent,
-                    DevopsSourceControlFormComponent
+                    DevopsSourceControlFormComponent,
+                    SourceControlDialogComponent,
+                    BuildPipelineDialogComponent
                 ],
                 entryComponents: [
                     ApplicationsFlowProjectsElementComponent,
@@ -4379,7 +4970,9 @@ ApplicationsFlowModule.decorators = [
                     ProcessorDetailsFormComponent,
                     SourceControlFormComponent,
                     BuildPipelineFormComponent,
-                    DevopsSourceControlFormComponent
+                    DevopsSourceControlFormComponent,
+                    SourceControlDialogComponent,
+                    BuildPipelineDialogComponent
                 ],
             },] }
 ];
@@ -4412,5 +5005,5 @@ class FormModel {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsModel, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, BaseFormConfigModel, CardFormConfigModel, CreateProjectWizardComponent, DevSettingsPresetModel, DomainModel, DynamicTabsModel, EaCService, FormActionsModel, FormModel, FormValuesModel, FormsService, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HostingDetailsFormGroupComponent, NPMService, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectNameComponent, ProjectService, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SourceControlFormControlsComponent, ThreeColumnComponent, UnpackLowCodeUnitRequest, DynamicTabsComponent as ɵa, HeaderComponent as ɵb, SourceControlFormComponent as ɵba, BuildPipelineFormComponent as ɵbb, DevopsSourceControlFormComponent as ɵbc, ProjectTabsComponent as ɵc, GeneralComponent as ɵd, DomainsComponent as ɵe, ProjectItemsComponent as ɵf, BuildsComponent as ɵg, RecentActivitiesComponent as ɵh, FormCardComponent as ɵi, BaseFormComponent as ɵj, BaseFormTestComponent as ɵk, AppsFlowComponent as ɵl, DevOpsComponent as ɵm, DFSModifiersComponent as ɵn, NpmPackageSelectComponent as ɵo, ColumnInfoCardComponent as ɵp, SlottedCardComponent as ɵq, ProjectInfoCardComponent as ɵr, AnalyticsCardComponent as ɵs, FeedCardSmComponent as ɵt, GhControlComponent as ɵu, MainFeedCardComponent as ɵv, TwoColumnHeaderComponent as ɵw, CardCarouselComponent as ɵx, SecurityToggleComponent as ɵy, ProcessorDetailsFormComponent as ɵz };
+export { ActionsModel, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, BaseFormConfigModel, CardFormConfigModel, CreateProjectWizardComponent, DevSettingsPresetModel, DomainModel, DynamicTabsModel, EaCService, FormActionsModel, FormModel, FormValuesModel, FormsService, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HostingDetailsFormGroupComponent, NPMService, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectNameComponent, ProjectService, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SourceControlFormControlsComponent, ThreeColumnComponent, UnpackLowCodeUnitRequest, DynamicTabsComponent as ɵa, HeaderComponent as ɵb, SourceControlFormComponent as ɵba, BuildPipelineFormComponent as ɵbb, DevopsSourceControlFormComponent as ɵbc, SourceControlDialogComponent as ɵbd, BuildPipelineDialogComponent as ɵbe, ProjectTabsComponent as ɵc, GeneralComponent as ɵd, DomainsComponent as ɵe, ProjectItemsComponent as ɵf, BuildsComponent as ɵg, RecentActivitiesComponent as ɵh, FormCardComponent as ɵi, BaseFormComponent as ɵj, BaseFormTestComponent as ɵk, AppsFlowComponent as ɵl, DevOpsComponent as ɵm, DFSModifiersComponent as ɵn, NpmPackageSelectComponent as ɵo, ColumnInfoCardComponent as ɵp, SlottedCardComponent as ɵq, ProjectInfoCardComponent as ɵr, AnalyticsCardComponent as ɵs, FeedCardSmComponent as ɵt, GhControlComponent as ɵu, MainFeedCardComponent as ɵv, TwoColumnHeaderComponent as ɵw, CardCarouselComponent as ɵx, SecurityToggleComponent as ɵy, ProcessorDetailsFormComponent as ɵz };
 //# sourceMappingURL=lowcodeunit-applications-flow-common.js.map