@lowcodeunit/applications-flow-common 1.33.216-lets-get-social-ish → 1.33.219-lets-get-social-ish

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

@@ -3905,190 +3905,645 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             args: [{ selector: 'lcu-gh-control', template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"] }]
         }], ctorParameters: function () { return []; } });
 
-class MainFeedCardComponent {
-    constructor(eacSvc) {
+class DevopsSourceControlFormComponent {
+    //  Constructors
+    constructor(appsFlowSvc, eacSvc, formBuilder) {
+        this.appsFlowSvc = appsFlowSvc;
         this.eacSvc = eacSvc;
+        this.formBuilder = formBuilder;
+        this.SeparatorKeysCodes = [ENTER, COMMA];
+        this.SaveStatusEvent = new EventEmitter;
+        this.BuildPath = null;
+        this.HostingDetails = new ProjectHostingDetails();
+        this.SelectedBranches = [];
+        this.SourceControlRoot = '';
+        this.UseBranches = true;
+        this.UseBuildPath = false;
     }
-    get Icon() {
-        if (this.FeedItem.Status.Code === 0) {
-            return 'check_circle';
-        }
-        else if (this.FeedItem.Status.Code === 1) {
-            return 'cancel';
-        }
-        else if (this.FeedItem.Status.Code === 2) {
-            return 'sync';
-        }
-        else {
-            return 'help_outline';
-        }
+    //  Properties
+    get ArtifactLookups() {
+        var _a;
+        return (_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.ArtifactLookups;
     }
-    get IconColor() {
-        if (this.FeedItem.Status.Code === 0) {
-            return 'green';
-        }
-        else if (this.FeedItem.Status.Code === 1) {
-            return 'red';
+    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 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]) || {}
+            : {};
+    }
+    get BranchesFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
+    }
+    get BuildPathFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
+    }
+    get DevOpsActionLookups() {
+        // console.log(this.DevOpsActions);
+        return Object.keys(this.DevOpsActions || {});
+    }
+    get DevOpsAction() {
+        return this.Environment.DevOpsActions && this.DevOpsActionLookup
+            ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
+            : {};
+    }
+    get DevOpsActionLookup() {
+        var _a, _b, _c;
+        if (!!((_a = this.DevOpsActionLookupFormControl) === null || _a === void 0 ? void 0 : _a.value)) {
+            return this.DevOpsActionLookupFormControl.value;
         }
-        else if (this.FeedItem.Status.Code === 2) {
-            return 'blue';
+        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 'gray';
+            return null;
         }
     }
-    //  Life Cycle
-    ngOnInit() {
-        this.handleRefresh();
+    get DevOpsActionLookupFormControl() {
+        return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
     }
-    //  API Methods
-    CalculateTimelapse(timestamp) {
-        return moment(timestamp).fromNow();
+    get DevOpsActions() {
+        return this.Environment.DevOpsActions || {};
     }
-    HandleAction(action) {
-        if (action.ActionType == 'Link') {
-            if (action.Action.startsWith('http')) {
-                window.open(action.Action, '_blank');
-            }
-            else {
-                window.location.href = action.Action;
-            }
-        }
-        else if (action.ActionType == 'Modal') {
-            if (action.Action == 'AddSourceControl') {
-                //  TODO:  George launch source control modal
-                alert('AddSourceControl modaled');
-            }
-            else {
-                alert('other modaled ' + action.Action);
-            }
+    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;
     }
-    handleRefresh() {
-        var _a;
-        if ((_a = this.FeedItem) === null || _a === void 0 ? void 0 : _a.RefreshLink) {
-            setTimeout(() => {
-                this.eacSvc.CheckUserFeedItem(this.FeedItem).subscribe((response) => __awaiter(this, void 0, void 0, function* () {
-                    if (response.Status.Code === 0) {
-                        this.FeedItem = response.Model;
-                        this.handleRefresh();
-                    }
-                    else {
-                        console.log(response);
-                    }
-                }), (err) => {
-                    console.log(err);
-                });
-            }, 5000);
-        }
+    get MainBranchFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
     }
-}
-MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-MainFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainFeedCardComponent, selector: "lcu-main-feed-card", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-main-feed-card', template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: EaCService }]; }, propDecorators: { FeedItem: [{
-                type: Input,
-                args: ['feed-item']
-            }] } });
-
-class TwoColumnHeaderComponent {
-    constructor() { }
-    ngOnInit() {
+    get OrganizationFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
     }
-}
-TwoColumnHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TwoColumnHeaderComponent, selector: "lcu-two-column-header", ngImport: i0, template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-two-column-header', template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class CardCarouselComponent {
-    constructor() {
-        this.carouselIndex = 0;
+    get RepositoryFormControl() {
+        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
     }
-    ngOnInit() {
+    get State() {
+        return this.eacSvc.State;
     }
-    ngAfterViewInit() {
-        this.assignCarouselClass();
+    //  Life Cycle
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        this.destroyFormControls();
     }
-    LeftChevronClicked() {
-        this.removeCarouselClasses();
-        if (this.carouselIndex === 0) {
-            this.carouselIndex = this.Stats.length - 1;
+    ngOnInit() {
+        if (this.EditingSourceControlLookup === null) {
+            this.CreateNewSourceControl();
         }
-        else {
-            this.carouselIndex--;
+        if (this.EditingSourceControl != null) {
+            this.DevOpsSourceControlFormGroup = this.formBuilder.group({});
+            this.setupFormControls();
         }
-        this.assignCarouselClass();
+        this.RefreshOrganizations();
     }
-    MoreDetailsClicked() {
-        console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
+    //  API Methods
+    AddBranchOption(event) {
+        this.addBranchOption(event.value);
+        event.input.value = '';
     }
-    RightChevronClicked() {
-        this.removeCarouselClasses();
-        if (this.carouselIndex === this.Stats.length - 1) {
-            this.carouselIndex = 0;
-        }
-        else {
-            this.carouselIndex++;
-        }
-        this.assignCarouselClass();
+    BranchOptionSelected(event) {
+        this.addBranchOption(event.option.value);
     }
-    //HELPERS
-    removeCarouselClasses() {
-        for (let i = 0; i < this.Stats.length; i++) {
-            if (i === this.carouselIndex) {
-                document.getElementById("carousel-" + this.carouselIndex).classList.remove('active');
-            }
-            else {
-                document.getElementById("carousel-" + i).classList.remove('hidden');
-            }
-        }
+    BranchesChanged(branches) {
+        this.loadProjectHostingDetails();
     }
-    assignCarouselClass() {
-        for (let i = 0; i < this.Stats.length; i++) {
-            if (i === this.carouselIndex) {
-                document.getElementById("carousel-" + this.carouselIndex).classList.add('active');
-            }
-            else {
-                document.getElementById("carousel-" + i).classList.add('hidden');
-            }
-        }
+    BuildPathChanged(event) {
+        //do something??
     }
-}
-CardCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CardCarouselComponent, selector: "lcu-card-carousel", inputs: { Stats: ["stats", "Stats"] }, ngImport: i0, template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-card-carousel', template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { Stats: [{
-                type: Input,
-                args: ['stats']
-            }] } });
-
-class SecurityToggleComponent {
-    constructor(eacSvc, formBldr) {
-        this.eacSvc = eacSvc;
-        this.formBldr = formBldr;
-        this.SaveFormEvent = new EventEmitter;
-        this.SkeletonEffect = 'wave';
+    CreateNewSourceControl() {
+        this.SetEditingSourceControl(Guid.CreateRaw());
     }
-    get IsPrivateFormControl() {
-        var _a;
-        return (_a = this.SecurityFormGroup) === null || _a === void 0 ? void 0 : _a.controls.isPrivate;
+    CreateRepository() {
+        this.CreatingRepository = true;
+        this.RepositoryFormControl.reset();
     }
-    get IsTriggerSignInFormControl() {
-        var _a;
-        return (_a = this.SecurityFormGroup) === null || _a === void 0 ? void 0 : _a.controls.isTriggerSignIn;
+    CancelCreateRepository() {
+        this.CreatingRepository = false;
     }
-    get State() {
-        return this.eacSvc.State;
+    DevOpsActionLookupChanged(event) {
+        this.configureDevOpsAction();
     }
-    ngOnInit() {
-        this.setupSecurityFormGroup();
+    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: ", this.DevOpsSourceControlFormGroup.value);
+        this.SaveSourceControl();
+    }
+    SaveSourceControl() {
+        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 = this.Artifact;
+        if (!this.ArtifactLookup) {
+            artifactLookup = Guid.CreateRaw();
+            artifact = Object.assign(Object.assign({}, 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;
+        if (!this.DevOpsActionLookup) {
+            devOpsActionLookup = Guid.CreateRaw();
+            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { ArtifactLookups: [artifactLookup] });
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = this.DevOpsAction;
+        }
+        else {
+            devOpsActionLookup = this.DevOpsActionLookupFormControl.value;
+            const doa = Object.assign({}, this.DevOpsAction);
+            // saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = this.DevOpsAction;
+        }
+        let source = Object.assign(Object.assign({}, this.EditingSourceControl), { Branches: this.SelectedBranches, MainBranch: this.MainBranchFormControl.value });
+        source = Object.assign(Object.assign({}, 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;
+        let resp = this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
+        resp.then(res => {
+            this.SaveStatusEvent.emit(res);
+        });
+    }
+    //  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() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // this.destroyFormControls();
+        this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new FormControl(this.DevOpsActionLookup || '', []));
+        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new FormControl((_a = this.EditingSourceControl.Organization) !== null && _a !== void 0 ? _a : '', Validators.required));
+        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new FormControl((_b = this.EditingSourceControl.Repository) !== null && _b !== void 0 ? _b : '', Validators.required));
+        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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, deps: [{ token: ApplicationsFlowService }, { token: EaCService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DevopsSourceControlFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: { EditingSourceControlLookup: ["editing-source-control-lookup", "EditingSourceControlLookup"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"] }, outputs: { SaveStatusEvent: "save-status-event" }, viewQueries: [{ propertyName: "BranchesInput", first: true, predicate: ["branches"], descendants: true }], ngImport: i0, 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 margin-bottom\" *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        *ngIf=\"!State?.Loading\"\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      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}\n"], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatPrefix, selector: "[matPrefix]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$2.MatLabel, selector: "mat-label" }, { type: i9$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: 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 margin-bottom\" *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        *ngIf=\"!State?.Loading\"\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      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$1.FormBuilder }]; }, propDecorators: { EditingSourceControlLookup: [{
+                type: Input,
+                args: ['editing-source-control-lookup']
+            }], Environment: [{
+                type: Input,
+                args: ['environment']
+            }], EnvironmentLookup: [{
+                type: Input,
+                args: ['environment-lookup']
+            }], SaveStatusEvent: [{
+                type: Output,
+                args: ['save-status-event']
+            }], BranchesInput: [{
+                type: ViewChild,
+                args: ['branches']
+            }] } });
+
+class SourceControlDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+    CloseDialog() {
+        this.dialogRef.close();
+    }
+}
+SourceControlDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+SourceControlDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SourceControlDialogComponent, selector: "lcu-source-control-dialog", ngImport: i0, template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<div fxLayoutAlign=\"center center\">\n        <lcu-devops-source-control-form\n                [environment]=\"data.environment\"\n                [environment-lookup]=\"data.environmentLookup\"\n                [editing-source-control-lookup]=\"data.scLookup\">\n        </lcu-devops-source-control-form>\n</div>", styles: [".dialog-header{width:100%}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: ["editing-source-control-lookup", "environment", "environment-lookup"], outputs: ["save-status-event"] }], directives: [{ type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-source-control-dialog', template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<div fxLayoutAlign=\"center center\">\n        <lcu-devops-source-control-form\n                [environment]=\"data.environment\"\n                [environment-lookup]=\"data.environmentLookup\"\n                [editing-source-control-lookup]=\"data.scLookup\">\n        </lcu-devops-source-control-form>\n</div>", styles: [".dialog-header{width:100%}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+
+class MainFeedCardComponent {
+    constructor(eacSvc, dialog) {
+        this.eacSvc = eacSvc;
+        this.dialog = dialog;
+    }
+    get ActiveEnvironment() {
+        var _a, _b;
+        return (_b = (_a = this.State) === null || _a === void 0 ? void 0 : _a.EaC) === null || _b === void 0 ? void 0 : _b.Environments[this.ActiveEnvironmentLookup];
+    }
+    get ActiveEnvironmentLookup() {
+        var _a, _b;
+        //  TODO:  Eventually support multiple environments
+        const envLookups = Object.keys(((_b = (_a = this.State) === null || _a === void 0 ? void 0 : _a.EaC) === null || _b === void 0 ? void 0 : _b.Environments) || {});
+        return envLookups[0];
+    }
+    get Environment() {
+        var _a, _b, _c, _d, _e;
+        // console.log("Ent Environment var: ", this.State?.EaC?.Environments[this.State?.EaC?.Enterprise?.PrimaryEnvironment]);
+        return (_b = (_a = this.State) === null || _a === void 0 ? void 0 : _a.EaC) === null || _b === void 0 ? void 0 : _b.Environments[(_e = (_d = (_c = this.State) === null || _c === void 0 ? void 0 : _c.EaC) === null || _d === void 0 ? void 0 : _d.Enterprise) === null || _e === void 0 ? void 0 : _e.PrimaryEnvironment];
+    }
+    get Icon() {
+        if (this.FeedItem.Status.Code === 0) {
+            return 'check_circle';
+        }
+        else if (this.FeedItem.Status.Code === 1) {
+            return 'cancel';
+        }
+        else if (this.FeedItem.Status.Code === 2) {
+            return 'sync';
+        }
+        else {
+            return 'help_outline';
+        }
+    }
+    get IconColor() {
+        if (this.FeedItem.Status.Code === 0) {
+            return 'green';
+        }
+        else if (this.FeedItem.Status.Code === 1) {
+            return 'red';
+        }
+        else if (this.FeedItem.Status.Code === 2) {
+            return 'blue';
+        }
+        else {
+            return 'gray';
+        }
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    //  Life Cycle
+    ngOnInit() {
+        this.handleRefresh();
+    }
+    //  API Methods
+    CalculateTimelapse(timestamp) {
+        return moment(timestamp).fromNow();
+    }
+    HandleAction(action) {
+        if (action.ActionType == 'Link') {
+            if (action.Action.startsWith('http')) {
+                window.open(action.Action, '_blank');
+            }
+            else {
+                window.location.href = action.Action;
+            }
+        }
+        else if (action.ActionType == 'Modal') {
+            if (action.Action == 'AddSourceControl') {
+                this.OpenSourceControlDialog('');
+            }
+            else {
+                alert('other modaled ' + action.Action);
+            }
+        }
+    }
+    OpenSourceControlDialog(scLookup) {
+        const dialogRef = this.dialog.open(SourceControlDialogComponent, {
+            width: '550px',
+            data: {
+                environment: this.Environment,
+                environmentLookup: this.ActiveEnvironmentLookup,
+                scLookup: scLookup,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            // console.log('The dialog was closed');
+            // console.log("result:", result)
+        });
+    }
+    //  Helpers
+    handleRefresh() {
+        var _a;
+        if ((_a = this.FeedItem) === null || _a === void 0 ? void 0 : _a.RefreshLink) {
+            setTimeout(() => {
+                this.eacSvc.CheckUserFeedItem(this.FeedItem).subscribe((response) => __awaiter(this, void 0, void 0, function* () {
+                    if (response.Status.Code === 0) {
+                        this.FeedItem = response.Model;
+                        this.handleRefresh();
+                    }
+                    else {
+                        console.log(response);
+                    }
+                }), (err) => {
+                    console.log(err);
+                });
+            }, 5000);
+        }
+    }
+}
+MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MainFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainFeedCardComponent, selector: "lcu-main-feed-card", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-main-feed-card', template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$4.MatDialog }]; }, propDecorators: { FeedItem: [{
+                type: Input,
+                args: ['feed-item']
+            }] } });
+
+class TwoColumnHeaderComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+TwoColumnHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TwoColumnHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TwoColumnHeaderComponent, selector: "lcu-two-column-header", ngImport: i0, template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TwoColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-two-column-header', template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n", styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class CardCarouselComponent {
+    constructor() {
+        this.carouselIndex = 0;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.assignCarouselClass();
+    }
+    LeftChevronClicked() {
+        this.removeCarouselClasses();
+        if (this.carouselIndex === 0) {
+            this.carouselIndex = this.Stats.length - 1;
+        }
+        else {
+            this.carouselIndex--;
+        }
+        this.assignCarouselClass();
+    }
+    MoreDetailsClicked() {
+        console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
+    }
+    RightChevronClicked() {
+        this.removeCarouselClasses();
+        if (this.carouselIndex === this.Stats.length - 1) {
+            this.carouselIndex = 0;
+        }
+        else {
+            this.carouselIndex++;
+        }
+        this.assignCarouselClass();
+    }
+    //HELPERS
+    removeCarouselClasses() {
+        for (let i = 0; i < this.Stats.length; i++) {
+            if (i === this.carouselIndex) {
+                document.getElementById("carousel-" + this.carouselIndex).classList.remove('active');
+            }
+            else {
+                document.getElementById("carousel-" + i).classList.remove('hidden');
+            }
+        }
+    }
+    assignCarouselClass() {
+        for (let i = 0; i < this.Stats.length; i++) {
+            if (i === this.carouselIndex) {
+                document.getElementById("carousel-" + this.carouselIndex).classList.add('active');
+            }
+            else {
+                document.getElementById("carousel-" + i).classList.add('hidden');
+            }
+        }
+    }
+}
+CardCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CardCarouselComponent, selector: "lcu-card-carousel", inputs: { Stats: ["stats", "Stats"] }, ngImport: i0, template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CardCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-card-carousel', template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n", styles: [".carousel-container{text-align:center;height:75px;padding-top:20px}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { Stats: [{
+                type: Input,
+                args: ['stats']
+            }] } });
+
+class SecurityToggleComponent {
+    constructor(eacSvc, formBldr) {
+        this.eacSvc = eacSvc;
+        this.formBldr = formBldr;
+        this.SaveFormEvent = new EventEmitter;
+        this.SkeletonEffect = 'wave';
+    }
+    get IsPrivateFormControl() {
+        var _a;
+        return (_a = this.SecurityFormGroup) === null || _a === void 0 ? void 0 : _a.controls.isPrivate;
+    }
+    get IsTriggerSignInFormControl() {
+        var _a;
+        return (_a = this.SecurityFormGroup) === null || _a === void 0 ? void 0 : _a.controls.isTriggerSignIn;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    ngOnInit() {
+        this.setupSecurityFormGroup();
     }
     SecuritySubmit() {
         //save the security settings
@@ -4628,239 +5083,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 class BuildPipelineFormComponent {
     constructor(eacSvc, formBuilder, appsFlowSvc) {
         this.eacSvc = eacSvc;
-        this.formBuilder = formBuilder;
-        this.appsFlowSvc = appsFlowSvc;
-        this.HostingDetails = new ProjectHostingDetails();
-        this.ResponseEvent = new EventEmitter;
-    }
-    get Artifact() {
-        var _a, _b;
-        // console.log("ARTIFACT: ", this.Environment?.Artifacts[this.ArtifactLookup]);
-        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]) || {}
-            : {};
-    }
-    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.get('buildPipeline');
-    }
-    get DevOpsAction() {
-        return this.Environment.DevOpsActions && this.DevOpsActionLookup
-            ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
-            : {};
-    }
-    get DevOpsActions() {
-        return this.Environment.DevOpsActions || {};
-    }
-    get DevOpsActionNameFormControl() {
-        return this.BuildPipelineFormGroup.get('devOpsActionName');
-    }
-    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 || {});
-    }
-    get SourceControls() {
-        return this.Environment.Sources || {};
-    }
-    get State() {
-        return this.eacSvc.State;
-    }
-    ngOnInit() {
-        // console.log('BuildPipeline = ', this.BuildPipeline)
-        // this.BuildPipelineFormGroup = this.formBuilder.group({});
-        // if (this.BuildPipelineFormGroup != null) {
-        //   this.BuildPipelineFormGroup.removeControl('hostingDetails');
-        // }
-        // this.BuildPipelineFormGroup.addControl(
-        //   'hostingDetails',
-        this.BuildPipelineFormGroup = this.formBuilder.group({
-            buildPipeline: [this.BuildPipeline, [Validators.required]],
-        });
-        // );
-        this.loadProjectHostingDetails();
-        // this.setupControlsForForm();
-    }
-    //API METHODS
-    BuildPipelineChanged() {
-        var _a;
-        //for some reason this value is coming back undefined
-        // console.log("build pipeline value: ", this.BuildPipelineFormControl?.value)
-        this.BuildPipeline = (_a = this.BuildPipelineFormControl) === null || _a === void 0 ? void 0 : _a.value;
-        this.setupControlsForForm();
-    }
-    SubmitBuildPipeline() {
-        // console.log("submitting build pipeline: ", this.BuildPipelineFormGroup.value);
-        this.SaveEnvironment();
-    }
-    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;
-        }
-        this.eacSvc.SaveEnvironmentAsCode(saveEnvReq).then(res => {
-            this.ResponseEvent.emit(res);
-        });
-    }
-    //  Helpers
-    setupControlsForForm() {
-        var _a, _b, _c, _d, _e, _f;
-        // this.BuildPipeline =
-        //         this.BuildPipeline || this.HostingDetails?.HostingOptions
-        //           ? this.HostingDetails?.HostingOptions[0]?.Lookup
-        //           : '';
-        // console.log("hosting details: ", this.HostingDetails)
-        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]));
-        // console.log("selected hosting options: ", this.SelectedHostingOption.Inputs);
-        (_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.appsFlowSvc.NewLoadProjectHostingDetails().subscribe((response) => {
-            var _a, _b;
-            this.HostingDetails = response.Model;
-            // console.log("response: ", response);
-            this.HostingDetails.Loading = false;
-            const hostOption = (_b = (_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) === null || _b === void 0 ? void 0 : _b.find((ho) => ho.Path === this.DevOpsAction.Path);
-            this.BuildPipeline = hostOption.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, deps: [{ token: EaCService }, { token: i1$1.FormBuilder }, { token: ApplicationsFlowService }], target: i0.ɵɵFactoryTarget.Component });
-BuildPipelineFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: { DevOpsActionLookup: ["devops-action-lookup", "DevOpsActionLookup"], Disabled: ["disabled", "Disabled"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"], HostingDetails: ["hosting-details", "HostingDetails"] }, outputs: { ResponseEvent: "response-event" }, ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\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\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      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n          *ngIf=\"!State?.Loading\"\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        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>  \n        \n    </mat-card-actions>\n    </mat-card>\n</form>\n", styles: [""], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-build-pipeline-form', template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\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\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      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n          *ngIf=\"!State?.Loading\"\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        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>  \n        \n    </mat-card-actions>\n    </mat-card>\n</form>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$1.FormBuilder }, { type: ApplicationsFlowService }]; }, propDecorators: { DevOpsActionLookup: [{
-                type: Input,
-                args: ['devops-action-lookup']
-            }], Disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], Environment: [{
-                type: Input,
-                args: ['environment']
-            }], EnvironmentLookup: [{
-                type: Input,
-                args: ['environment-lookup']
-            }], HostingDetails: [{
-                type: Input,
-                args: ['hosting-details']
-            }], ResponseEvent: [{
-                type: Output,
-                args: ['response-event']
-            }] } });
-
-class DevopsSourceControlFormComponent {
-    //  Constructors
-    constructor(appsFlowSvc, eacSvc, formBuilder) {
-        this.appsFlowSvc = appsFlowSvc;
-        this.eacSvc = eacSvc;
-        this.formBuilder = formBuilder;
-        this.SeparatorKeysCodes = [ENTER, COMMA];
-        this.SaveStatusEvent = new EventEmitter;
-        this.BuildPath = null;
-        this.HostingDetails = new ProjectHostingDetails();
-        this.SelectedBranches = [];
-        this.SourceControlRoot = '';
-        this.UseBranches = true;
-        this.UseBuildPath = false;
+        this.formBuilder = formBuilder;
+        this.appsFlowSvc = appsFlowSvc;
+        this.HostingDetails = new ProjectHostingDetails();
+        this.ResponseEvent = new EventEmitter;
     }
-    //  Properties
-    get ArtifactLookups() {
-        var _a;
-        return (_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.ArtifactLookups;
+    get Artifact() {
+        var _a, _b;
+        // console.log("ARTIFACT: ", this.Environment?.Artifacts[this.ArtifactLookup]);
+        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]) || {}
+            : {};
     }
     get ArtifactLookup() {
         var _a, _b;
@@ -4869,401 +5102,201 @@ class DevopsSourceControlFormComponent {
             : null;
         return artLookup;
     }
-    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]) || {}
-            : {};
-    }
-    get BranchesFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
-    }
-    get BuildPathFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
-    }
-    get DevOpsActionLookups() {
-        // console.log(this.DevOpsActions);
-        return Object.keys(this.DevOpsActions || {});
+    get BuildPipelineFormControl() {
+        var _a;
+        return (_a = this.BuildPipelineFormGroup) === null || _a === void 0 ? void 0 : _a.get('buildPipeline');
     }
     get DevOpsAction() {
         return this.Environment.DevOpsActions && this.DevOpsActionLookup
             ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
             : {};
     }
-    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() {
+    get DevOpsActionNameFormControl() {
+        return this.BuildPipelineFormGroup.get('devOpsActionName');
+    }
+    get NPMTokenFormControl() {
+        return this.BuildPipelineFormGroup.get('npmToken');
+    }
+    // (ho) => ho.Lookup === this.BuildPipeline
+    get SelectedHostingOption() {
         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;
+        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 MainBranchFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
+    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 OrganizationFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
+    get SourceControlLookups() {
+        return Object.keys(this.SourceControls || {});
     }
-    get RepositoryFormControl() {
-        return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
+    get SourceControls() {
+        return this.Environment.Sources || {};
     }
     get State() {
         return this.eacSvc.State;
     }
-    //  Life Cycle
-    ngAfterViewInit() { }
-    ngOnDestroy() {
-        this.destroyFormControls();
-    }
     ngOnInit() {
-        if (this.EditingSourceControlLookup === null) {
-            this.CreateNewSourceControl();
-        }
-        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) {
-        //do something??
-    }
-    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: ", this.DevOpsSourceControlFormGroup.value);
-        this.SaveSourceControl();
-    }
-    SaveSourceControl() {
-        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 = this.Artifact;
-        if (!this.ArtifactLookup) {
-            artifactLookup = Guid.CreateRaw();
-            artifact = Object.assign(Object.assign({}, 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;
-        if (!this.DevOpsActionLookup) {
-            devOpsActionLookup = Guid.CreateRaw();
-            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { ArtifactLookups: [artifactLookup] });
-            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = this.DevOpsAction;
-        }
-        else {
-            devOpsActionLookup = this.DevOpsActionLookupFormControl.value;
-            const doa = Object.assign({}, this.DevOpsAction);
-            // saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
-            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = this.DevOpsAction;
-        }
-        let source = Object.assign(Object.assign({}, this.EditingSourceControl), { Branches: this.SelectedBranches, MainBranch: this.MainBranchFormControl.value });
-        source = Object.assign(Object.assign({}, 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;
-        let resp = this.eacSvc.SaveEnvironmentAsCode(saveEnvReq);
-        resp.then(res => {
-            this.SaveStatusEvent.emit(res);
+        // console.log('BuildPipeline = ', this.BuildPipeline)
+        // this.BuildPipelineFormGroup = this.formBuilder.group({});
+        // if (this.BuildPipelineFormGroup != null) {
+        //   this.BuildPipelineFormGroup.removeControl('hostingDetails');
+        // }
+        // this.BuildPipelineFormGroup.addControl(
+        //   'hostingDetails',
+        this.BuildPipelineFormGroup = this.formBuilder.group({
+            buildPipeline: [this.BuildPipeline, [Validators.required]],
         });
+        // );
+        this.loadProjectHostingDetails();
+        // this.setupControlsForForm();
     }
-    //  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);
+    //API METHODS
+    BuildPipelineChanged() {
+        var _a;
+        //for some reason this value is coming back undefined
+        // console.log("build pipeline value: ", this.BuildPipelineFormControl?.value)
+        this.BuildPipeline = (_a = this.BuildPipelineFormControl) === null || _a === void 0 ? void 0 : _a.value;
+        this.setupControlsForForm();
     }
-    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(''));
+    SubmitBuildPipeline() {
+        // console.log("submitting build pipeline: ", this.BuildPipelineFormGroup.value);
+        this.SaveEnvironment();
     }
-    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]);
+    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 if (((_b = this.SelectedBranches) === null || _b === void 0 ? void 0 : _b.length) <= 0) {
-            this.MainBranchFormControl.reset();
+        else {
+            artifactLookup = this.ArtifactLookup;
         }
-        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();
-            });
+        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;
         }
-    }
-    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]);
-                }
-            });
+        else {
+            devOpsActionLookup = this.DevOpsActionLookup;
+            const doa = Object.assign(Object.assign({}, this.DevOpsAction), { Name: this.DevOpsActionNameFormControl.value });
+            saveEnvReq.Environment.DevOpsActions[devOpsActionLookup] = doa;
         }
+        this.eacSvc.SaveEnvironmentAsCode(saveEnvReq).then(res => {
+            this.ResponseEvent.emit(res);
+        });
     }
-    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);
+    //  Helpers
+    setupControlsForForm() {
+        var _a, _b, _c, _d, _e, _f;
+        // this.BuildPipeline =
+        //         this.BuildPipeline || this.HostingDetails?.HostingOptions
+        //           ? this.HostingDetails?.HostingOptions[0]?.Lookup
+        //           : '';
+        // console.log("hosting details: ", this.HostingDetails)
+        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]));
+        // console.log("selected hosting options: ", this.SelectedHostingOption.Inputs);
+        (_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();
+            // }
         });
-    }
-    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);
+        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 (((_a = this.RepositoryOptions) === null || _a === void 0 ? void 0 : _a.length) <= 0) {
-                this.CreatingRepository = true;
+        }
+        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() {
-        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() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        // this.destroyFormControls();
-        this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new FormControl(this.DevOpsActionLookup || '', []));
-        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new FormControl((_a = this.EditingSourceControl.Organization) !== null && _a !== void 0 ? _a : '', Validators.required));
-        this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new FormControl((_b = this.EditingSourceControl.Repository) !== null && _b !== void 0 ? _b : '', Validators.required));
-        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));
-        }
+    loadProjectHostingDetails() {
+        this.HostingDetails.Loading = true;
+        this.appsFlowSvc.NewLoadProjectHostingDetails().subscribe((response) => {
+            var _a, _b;
+            this.HostingDetails = response.Model;
+            // console.log("response: ", response);
+            this.HostingDetails.Loading = false;
+            const hostOption = (_b = (_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) === null || _b === void 0 ? void 0 : _b.find((ho) => ho.Path === this.DevOpsAction.Path);
+            this.BuildPipeline = hostOption.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);
     }
 }
-DevopsSourceControlFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, deps: [{ token: ApplicationsFlowService }, { token: EaCService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DevopsSourceControlFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: { EditingSourceControlLookup: ["editing-source-control-lookup", "EditingSourceControlLookup"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"] }, outputs: { SaveStatusEvent: "save-status-event" }, viewQueries: [{ propertyName: "BranchesInput", first: true, predicate: ["branches"], descendants: true }], ngImport: i0, 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 margin-bottom\" *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        *ngIf=\"!State?.Loading\"\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      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}\n"], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatPrefix, selector: "[matPrefix]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$2.MatLabel, selector: "mat-label" }, { type: i9$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, decorators: [{
+BuildPipelineFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, deps: [{ token: EaCService }, { token: i1$1.FormBuilder }, { token: ApplicationsFlowService }], target: i0.ɵɵFactoryTarget.Component });
+BuildPipelineFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: { DevOpsActionLookup: ["devops-action-lookup", "DevOpsActionLookup"], Disabled: ["disabled", "Disabled"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"], HostingDetails: ["hosting-details", "HostingDetails"] }, outputs: { ResponseEvent: "response-event" }, ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\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\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      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n          *ngIf=\"!State?.Loading\"\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        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>  \n        \n    </mat-card-actions>\n    </mat-card>\n</form>\n", styles: [""], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, 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 margin-bottom\" *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        *ngIf=\"!State?.Loading\"\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      <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$1.FormBuilder }]; }, propDecorators: { EditingSourceControlLookup: [{
+            args: [{ selector: 'lcu-build-pipeline-form', template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\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\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      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n          *ngIf=\"!State?.Loading\"\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        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>  \n        \n    </mat-card-actions>\n    </mat-card>\n</form>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$1.FormBuilder }, { type: ApplicationsFlowService }]; }, propDecorators: { DevOpsActionLookup: [{
                 type: Input,
-                args: ['editing-source-control-lookup']
+                args: ['devops-action-lookup']
+            }], Disabled: [{
+                type: Input,
+                args: ['disabled']
             }], Environment: [{
                 type: Input,
                 args: ['environment']
             }], EnvironmentLookup: [{
                 type: Input,
                 args: ['environment-lookup']
-            }], SaveStatusEvent: [{
+            }], HostingDetails: [{
+                type: Input,
+                args: ['hosting-details']
+            }], ResponseEvent: [{
                 type: Output,
-                args: ['save-status-event']
-            }], BranchesInput: [{
-                type: ViewChild,
-                args: ['branches']
+                args: ['response-event']
             }] } });
 
-class SourceControlDialogComponent {
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-    }
-    ngOnInit() {
-    }
-    CloseDialog() {
-        this.dialogRef.close();
-    }
-}
-SourceControlDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-SourceControlDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SourceControlDialogComponent, selector: "lcu-source-control-dialog", ngImport: i0, template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<div fxLayoutAlign=\"center center\">\n        <lcu-devops-source-control-form\n                [environment]=\"data.environment\"\n                [environment-lookup]=\"data.environmentLookup\"\n                [editing-source-control-lookup]=\"data.scLookup\">\n        </lcu-devops-source-control-form>\n</div>", styles: [".dialog-header{width:100%}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: ["editing-source-control-lookup", "environment", "environment-lookup"], outputs: ["save-status-event"] }], directives: [{ type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SourceControlDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lcu-source-control-dialog', template: "\n<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n        <button mat-icon-button (click)=\"CloseDialog()\">\n                <mat-icon>cancel</mat-icon>\n        </button>\n</div>\n\n<div fxLayoutAlign=\"center center\">\n        <lcu-devops-source-control-form\n                [environment]=\"data.environment\"\n                [environment-lookup]=\"data.environmentLookup\"\n                [editing-source-control-lookup]=\"data.scLookup\">\n        </lcu-devops-source-control-form>\n</div>", styles: [".dialog-header{width:100%}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }];
-    } });
-
 class BuildPipelineDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;