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

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

@@ -5482,36 +5482,464 @@
     };
 
     var BuildPipelineFormComponent = /** @class */ (function () {
-        function BuildPipelineFormComponent() {
+        function BuildPipelineFormComponent(formBldr, appsFlowSvc) {
+            this.formBldr = formBldr;
+            this.appsFlowSvc = appsFlowSvc;
+            this.HostingDetails = new ProjectHostingDetails();
         }
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "Artifact", {
+            //PROPERTIES
+            get: function () {
+                var _a, _b;
+                return ((_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts) && this.ArtifactLookup
+                    ? ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts[this.ArtifactLookup]) || {}
+                    : {};
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "ArtifactLookup", {
+            get: function () {
+                var _a, _b;
+                var 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;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "DevOpsAction", {
+            get: function () {
+                return this.Environment.DevOpsActions && this.DevOpsActionLookup
+                    ? this.Environment.DevOpsActions[this.DevOpsActionLookup] || {}
+                    : {};
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "DevOpsActions", {
+            get: function () {
+                return this.Environment.DevOpsActions || {};
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "EditingSourceControl", {
+            get: function () {
+                var _a, _b;
+                var 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;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "SourceControlLookups", {
+            get: function () {
+                return Object.keys(this.SourceControls || {});
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "SourceControls", {
+            get: function () {
+                return this.Environment.Sources || {};
+            },
+            enumerable: false,
+            configurable: true
+        });
         BuildPipelineFormComponent.prototype.ngOnInit = function () {
         };
+        //API METHODS
+        //HELPERS
+        BuildPipelineFormComponent.prototype.loadProjectHostingDetails = function () {
+            var _this = this;
+            this.HostingDetails.Loading = true;
+            this.appsFlowSvc
+                .LoadProjectHostingDetails(this.Organization, this.Repository, this.MainBranch)
+                .subscribe(function (response) {
+                _this.HostingDetails = response.Model;
+                _this.HostingDetails.Loading = false;
+            }, function (err) {
+                _this.HostingDetails.Loading = false;
+            });
+        };
         return BuildPipelineFormComponent;
     }());
     BuildPipelineFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-build-pipeline-form',
-                    template: "<p>build-pipeline-form works!</p>\n",
+                    template: "<div class=\"form-card\" fxFlex=\"35%\" fxFlex.lt-md=\"100%\">\n    <mat-card\n      class=\"spread\"\n      *ngIf=\"EditingSourceControl?.Branches?.length > 0\"\n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container>\n          <lcu-hosting-details-form-group\n            [artifact]=\"Artifact\"\n            [devops-action]=\"DevOpsActions[DevOpsActionLookup]\"\n            [details]=\"HostingDetails\"\n            [formGroup]=\"DevOpsFormGroup\"\n            [organization]=\"Organization\"\n            [disabled]=\"HostingDetails?.Loading\"\n          ></lcu-hosting-details-form-group>\n        </ng-container>\n      </mat-card-content>\n    </mat-card>\n  </div>\n",
                     styles: [""]
                 },] }
     ];
-    BuildPipelineFormComponent.ctorParameters = function () { return []; };
+    BuildPipelineFormComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: ApplicationsFlowService }
+    ]; };
+    BuildPipelineFormComponent.propDecorators = {
+        DevOpsActionLookup: [{ type: i0.Input, args: ['devops-action-lookup',] }],
+        Environment: [{ type: i0.Input, args: ['environment',] }],
+        MainBranch: [{ type: i0.Input, args: ['main-branch',] }],
+        Organization: [{ type: i0.Input, args: ['organization',] }],
+        Repository: [{ type: i0.Input, args: ['repository',] }]
+    };
 
     var DevopsSourceControlFormComponent = /** @class */ (function () {
-        function DevopsSourceControlFormComponent() {
+        //  Constructors
+        function DevopsSourceControlFormComponent(formBuilder, appsFlowSvc) {
+            this.formBuilder = formBuilder;
+            this.appsFlowSvc = appsFlowSvc;
+            this.SeparatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
+            this.BuildPath = null;
+            this.HostingDetails = new ProjectHostingDetails();
+            this.SelectedBranches = [];
+            this.SourceControlRoot = '';
+            this.UseBranches = true;
+            this.UseBuildPath = false;
         }
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "BranchesFormControl", {
+            //  Fields
+            //  Properties
+            get: function () {
+                return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'branches');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "BuildPathFormControl", {
+            get: function () {
+                return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'buildPath');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "DevOpsActionLookups", {
+            get: function () {
+                return Object.keys(this.DevOpsActions || {});
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "DevOpsActionLookup", {
+            get: function () {
+                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;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "DevOpsActionLookupFormControl", {
+            get: function () {
+                return this.DevOpsSourceControlFormGroup.get('devOpsActionLookup');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "DevOpsActions", {
+            get: function () {
+                return this.Environment.DevOpsActions || {};
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "EditingSourceControl", {
+            get: function () {
+                var _a, _b;
+                var 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;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "MainBranchFormControl", {
+            get: function () {
+                return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'mainBranch');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "OrganizationFormControl", {
+            get: function () {
+                return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'organization');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DevopsSourceControlFormComponent.prototype, "RepositoryFormControl", {
+            get: function () {
+                return this.DevOpsSourceControlFormGroup.get(this.SourceControlRoot + 'repository');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        //  Life Cycle
+        DevopsSourceControlFormComponent.prototype.ngAfterViewInit = function () { };
+        DevopsSourceControlFormComponent.prototype.ngOnDestroy = function () {
+            this.destroyFormControls();
+        };
         DevopsSourceControlFormComponent.prototype.ngOnInit = function () {
+            this.setupFormControls();
+            this.RefreshOrganizations();
+        };
+        //  API Methods
+        DevopsSourceControlFormComponent.prototype.AddBranchOption = function (event) {
+            this.addBranchOption(event.value);
+            event.input.value = '';
+        };
+        DevopsSourceControlFormComponent.prototype.BranchOptionSelected = function (event) {
+            this.addBranchOption(event.option.value);
+        };
+        DevopsSourceControlFormComponent.prototype.BranchesChanged = function (branches) {
+            this.loadProjectHostingDetails();
+        };
+        DevopsSourceControlFormComponent.prototype.BuildPathChanged = function (event) {
+        };
+        DevopsSourceControlFormComponent.prototype.CreateRepository = function () {
+            this.CreatingRepository = true;
+            this.RepositoryFormControl.reset();
+        };
+        DevopsSourceControlFormComponent.prototype.CancelCreateRepository = function () {
+            this.CreatingRepository = false;
+        };
+        DevopsSourceControlFormComponent.prototype.DevOpsActionLookupChanged = function (event) {
+            this.configureDevOpsAction();
+        };
+        DevopsSourceControlFormComponent.prototype.MainBranchChanged = function (event) {
+            this.emitBranchesChanged();
+        };
+        DevopsSourceControlFormComponent.prototype.OrganizationChanged = function (event) {
+            var org = this.OrganizationFormControl;
+            this.RepositoryFormControl.reset();
+            if (this.UseBranches) {
+                this.BranchesFormControl.reset();
+                this.SelectedBranches = [];
+            }
+            this.listRepositories();
+        };
+        DevopsSourceControlFormComponent.prototype.RefreshOrganizations = function () {
+            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();
+            }
+        };
+        DevopsSourceControlFormComponent.prototype.RemoveBranchOption = function (option) {
+            var index = this.SelectedBranches.indexOf(option);
+            if (index >= 0) {
+                this.SelectedBranches.splice(index, 1);
+            }
+            this.emitBranchesChanged();
+        };
+        DevopsSourceControlFormComponent.prototype.RepositoryChanged = function (event) {
+            var repo = this.RepositoryFormControl;
+            if (this.UseBranches) {
+                this.BranchesFormControl.reset();
+                this.SelectedBranches = [];
+                this.listBranches();
+            }
+            if (!this.UseBranches) {
+                this.listBuildPaths();
+            }
+        };
+        DevopsSourceControlFormComponent.prototype.SaveRepository = function () {
+            var _this = this;
+            this.Loading = true;
+            var org = this.OrganizationFormControl.value;
+            var repoName = this.RepositoryFormControl.value;
+            this.appsFlowSvc
+                .CreateRepository(org, repoName)
+                .subscribe(function (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;
+                }
+            });
+        };
+        //  Helpers
+        DevopsSourceControlFormComponent.prototype.addBranchOption = function (value) {
+            value = (value || '').trim();
+            if (value && this.SelectedBranches.indexOf(value) < 0) {
+                this.SelectedBranches.push(value);
+            }
+            this.BranchesInput.nativeElement.blur();
+            this.emitBranchesChanged();
+        };
+        DevopsSourceControlFormComponent.prototype.configureDevOpsAction = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.DevOpsActionLookupFormControl.setValue(_this.DevOpsActionLookup);
+            }, 0);
+        };
+        DevopsSourceControlFormComponent.prototype.destroyFormControls = function () {
+            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(''));
+        };
+        DevopsSourceControlFormComponent.prototype.emitBranchesChanged = function () {
+            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(function (branch) { return 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 || []);
+        };
+        DevopsSourceControlFormComponent.prototype.listBranches = function () {
+            var _this = this;
+            if (this.UseBranches) {
+                this.Loading = true;
+                this.appsFlowSvc
+                    .ListBranches(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
+                    .subscribe(function (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();
+                });
+            }
+        };
+        DevopsSourceControlFormComponent.prototype.listBuildPaths = function () {
+            var _this = this;
+            if (this.UseBuildPath) {
+                this.Loading = true;
+                this.appsFlowSvc
+                    .ListBuildPaths(this.OrganizationFormControl.value, this.RepositoryFormControl.value)
+                    .subscribe(function (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]);
+                    }
+                });
+            }
+        };
+        DevopsSourceControlFormComponent.prototype.listOrganizations = function () {
+            var _this = this;
+            this.Loading = true;
+            this.appsFlowSvc
+                .ListOrganizations()
+                .subscribe(function (response) {
+                var _a;
+                _this.OrganizationOptions = response.Model;
+                _this.Loading = false;
+                if ((_a = _this.EditingSourceControl) === null || _a === void 0 ? void 0 : _a.Organization) {
+                    setTimeout(function () {
+                        var _a;
+                        _this.OrganizationFormControl.setValue(_this.EditingSourceControl.Organization);
+                        _this.listRepositories((_a = _this.EditingSourceControl) === null || _a === void 0 ? void 0 : _a.Repository);
+                    }, 0);
+                }
+            });
+        };
+        DevopsSourceControlFormComponent.prototype.listRepositories = function (activeRepo) {
+            var _this = this;
+            if (activeRepo === void 0) { activeRepo = null; }
+            this.Loading = true;
+            this.appsFlowSvc
+                .ListRepositories(this.OrganizationFormControl.value)
+                .subscribe(function (response) {
+                var _a;
+                _this.RepositoryOptions = response.Model;
+                _this.Loading = false;
+                if (activeRepo) {
+                    setTimeout(function () {
+                        _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;
+                }
+            });
+        };
+        DevopsSourceControlFormComponent.prototype.loadProjectHostingDetails = function () {
+            var _this = this;
+            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(function (response) {
+                    _this.HostingDetails = response.Model;
+                    _this.HostingDetails.Loading = false;
+                    _this.configureDevOpsAction();
+                }, function (err) {
+                    _this.HostingDetails.Loading = false;
+                });
+            }
+        };
+        DevopsSourceControlFormComponent.prototype.setupFormControls = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            this.destroyFormControls();
+            this.DevOpsSourceControlFormGroup.addControl('devOpsActionLookup', new forms.FormControl(this.DevOpsActionLookup || '', []));
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'organization'].join(''), new forms.FormControl((_a = this.EditingSourceControl.Organization) !== null && _a !== void 0 ? _a : '', forms.Validators.required));
+            this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'repository'].join(''), new forms.FormControl((_b = this.EditingSourceControl.Repository) !== null && _b !== void 0 ? _b : '', forms.Validators.required));
+            if (this.UseBranches) {
+                this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'branches'].join(''), new forms.FormControl((_d = (_c = this.EditingSourceControl) === null || _c === void 0 ? void 0 : _c.Branches) !== null && _d !== void 0 ? _d : '', forms.Validators.required));
+                this.SelectedBranches = (_e = this.EditingSourceControl) === null || _e === void 0 ? void 0 : _e.Branches;
+                this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'mainBranch'].join(''), new forms.FormControl((_f = this.EditingSourceControl.MainBranch) !== null && _f !== void 0 ? _f : '', forms.Validators.required));
+            }
+            if (this.UseBuildPath) {
+                this.DevOpsSourceControlFormGroup.addControl([this.SourceControlRoot, 'buildPath'].join(''), new forms.FormControl((_g = this.BuildPath) !== null && _g !== void 0 ? _g : '', forms.Validators.required));
+            }
         };
         return DevopsSourceControlFormComponent;
     }());
     DevopsSourceControlFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-devops-source-control-form',
-                    template: "<p>devops-source-control-form works!</p>\n",
+                    template: "<div class=\"form-card\" fxFlex=\"35%\" fxFlex.lt-md=\"100%\">\n    <mat-card class=\"spread\">\n      <mat-card-header>\n        <mat-card-title> Source Control </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-icon\n          matSuffix\n          matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\"\n        >\n          info_outline\n        </mat-icon>\n      </mat-card-header>\n\n      <mat-card-content>\n        <div [formGroup]=\"DevOpsSourceControlFormGroup\">\n            <div class=\"card\">\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"devOpsActionLookup\"\n                placeholder=\"DevOps Action\"\n                [disabled]=\"HostingDetails?.Loading\"\n                (selectionChange)=\"DevOpsActionLookupChanged($event)\"\n              >\n                <ng-container\n                  *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\"\n                >\n                  <mat-option\n                    [value]=\"devOpsActionLookup\"\n                    *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\"\n                  >\n                    {{ devOpsAction.Name }}\n                  </mat-option>\n                </ng-container>\n          \n                <mat-option value=\"\">-- Create New --</mat-option>\n              </mat-select>\n            </mat-form-field>\n            </div>\n            <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n              <mat-form-field\n                class=\"mat-full-width with-hint\"\n                *ngIf=\"OrganizationOptions?.length > 0\"\n              >\n                <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n          \n                <mat-select\n                  [formControlName]=\"SourceControlRoot + 'organization'\"\n                  placeholder=\"Organization\"\n                  (selectionChange)=\"OrganizationChanged($event)\"\n                  [disabled]=\"Loading || HostingDetails?.Loading\"\n                  required\n                >\n                  <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n                    <mat-option [value]=\"orgOpt.Name\">\n                      {{ orgOpt.Name }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\"> refresh </mat-icon>\n          \n                <a\n                  matSuffix\n                  href=\"/.oauth/github?oauth-force-edit=true\"\n                  target=\"_blank\"\n                  color=\"accent\"\n                >\n                  <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n                </a>\n          \n                <mat-hint>\n                  If you don't have an organization or would like to create a new one,\n                  <a\n                    href=\"https://github.com/account/organizations/new\"\n                    target=\"_blank\"\n                  >\n                    start here\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          \n            <div\n              class=\"card\"\n              *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \"\n            >\n              <mat-form-field class=\"mat-full-width\">\n                <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n          \n                <mat-select\n                  [formControlName]=\"SourceControlRoot + 'repository'\"\n                  [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \"\n                  [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \"\n                  (selectionChange)=\"RepositoryChanged($event)\"\n                  *ngIf=\"!CreatingRepository\"\n                  required\n                >\n                  <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n                    <mat-option [value]=\"repoOpt.Name\">\n                      {{ repoOpt.Name }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <input\n                  matInput\n                  placeholder=\"Repository (creates new if does not exist)\"\n                  [formControlName]=\"SourceControlRoot + 'repository'\"\n                  *ngIf=\"CreatingRepository\"\n                  [fxHide]=\"Loading || HostingDetails?.Loading\"\n                  required\n                />\n          \n                <mat-icon\n                  matSuffix\n                  (click)=\"CreateRepository()\"\n                  [fxHide]=\"Loading || HostingDetails?.Loading\"\n                  *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\"\n                >\n                  add_circle\n                </mat-icon>\n          \n                <button mat-button type=\"button\" \n                  (click)=\"SaveRepository()\" \n                  *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n          \n                  <mat-icon\n                    matSuffix\n                    color=\"primary\"\n                  >\n                    save\n                  </mat-icon>\n                </button>\n          \n                <button mat-button type=\"button\" \n                  (click)=\"CancelCreateRepository()\"\n                  *ngIf=\"CreatingRepository\">\n          \n                  <mat-icon\n                    matSuffix\n                    \n                  >\n                    cancel\n                  </mat-icon>\n                </button>\n              </mat-form-field>\n            </div>\n          \n            <div\n              class=\"card\"\n              *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \"\n            >\n              <mat-form-field class=\"mat-full-width\">\n                <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n          \n                <mat-label>Selected Branches</mat-label>\n          \n                <mat-autocomplete\n                  (optionSelected)=\"BranchOptionSelected($event)\"\n                  #branchOptions=\"matAutocomplete\"\n                >\n                  <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n                    <mat-option [value]=\"branchOpt.Name\">\n                      {{ branchOpt.Name }}\n                    </mat-option>\n                  </ng-container>\n                </mat-autocomplete>\n          \n                <mat-chip-list #selectedBranches>\n                  <mat-chip\n                    [removable]=\"true\"\n                    (removed)=\"RemoveBranchOption(selBranch)\"\n                    *ngFor=\"let selBranch of SelectedBranches\"\n                  >\n                    {{ selBranch }}\n                    <mat-icon matChipRemove>cancel</mat-icon>\n                  </mat-chip>\n          \n                  <input\n                    matInput\n                    placeholder=\"New Branch...\"\n                    [formControlName]=\"SourceControlRoot + 'branches'\"\n                    #branches\n                    [matAutocomplete]=\"branchOptions\"\n                    [matChipInputFor]=\"selectedBranches\"\n                    [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\"\n                    [matChipInputAddOnBlur]=\"true\"\n                    (matChipInputTokenEnd)=\"AddBranchOption($event)\"\n                    [disabled]=\"Loading || HostingDetails?.Loading\"\n                    required\n                  />\n                </mat-chip-list>\n              </mat-form-field>\n          \n              <mat-form-field\n                class=\"mat-full-width with-hint\"\n                [fxShow]=\"SelectedBranches?.length > 1\"\n              >\n                <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n          \n                <mat-select\n                  [formControlName]=\"SourceControlRoot + 'mainBranch'\"\n                  placeholder=\"Main Branch\"\n                  [disabled]=\"Loading || HostingDetails?.Loading\"\n                  (selectionChange)=\"MainBranchChanged($event)\"\n                  required\n                >\n                  <ng-container *ngFor=\"let branch of SelectedBranches\">\n                    <mat-option [value]=\"branch\">\n                      {{ branch }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-icon matSuffix (click)=\"RefreshOrganizations()\"> refresh </mat-icon>\n          \n                <a\n                  matSuffix\n                  mat-icon-button\n                  href=\"/.oauth/github?oauth-force-edit=true\"\n                  \n                  target=\"_blank\"\n                  color=\"accent\"\n                >\n                  <mat-icon\n                  matTooltip=\"Re-authorize Organizations\"\n                  color=\"accent\"> launch </mat-icon>\n                </a>\n          \n                <mat-hint>\n                  If you don't have an organization or would like to create a new one,\n                  <a\n                    href=\"https://github.com/account/organizations/new\"\n                    target=\"_blank\"\n                  >\n                    start here\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          \n            <div\n              class=\"card\"\n              *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \"\n            >\n              <mat-form-field class=\"mat-full-width with-hint\">\n                <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n          \n                <mat-select\n                  [formControlName]=\"SourceControlRoot + 'buildPath'\"\n                  placeholder=\"Build Path\"\n                  [disabled]=\"Loading || BuildPathDisabled\"\n                  (selectionChange)=\"BuildPathChanged($event)\"\n                  required\n                >\n                  <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n                    <mat-option [value]=\"buildPath\">\n                      {{ buildPath }}\n                    </mat-option>\n                  </ng-container>\n                </mat-select>\n          \n                <mat-hint>\n                  The build path identifies which build action to use for your\n                  configuration.\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          \n            <div *ngIf=\"Loading\">\n              <div class=\"spread\">\n                <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n                <div class=\"margin-3\">\n                  <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n                    Loading organizations\n                  </h4>\n          \n                  <h4\n                    class=\"mat-title\"\n                    *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \"\n                  >\n                    Loading repositories\n                  </h4>\n          \n                  <h4\n                    class=\"mat-title\"\n                    *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\"\n                  >\n                    Loading branches\n                  </h4>\n          \n                  <h4\n                    class=\"mat-title\"\n                    *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \"\n                  >\n                    Loading build paths\n                  </h4>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n      </mat-card-content>\n    </mat-card>\n  </div>\n",
                     styles: [""]
                 },] }
     ];
-    DevopsSourceControlFormComponent.ctorParameters = function () { return []; };
+    DevopsSourceControlFormComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: ApplicationsFlowService }
+    ]; };
+    DevopsSourceControlFormComponent.propDecorators = {
+        BranchesInput: [{ type: i0.ViewChild, args: ['branches',] }],
+        Environment: [{ type: i0.Input, args: ['environment',] }]
+    };
 
     var ApplicationsFlowModule = /** @class */ (function () {
         function ApplicationsFlowModule() {