@lowcodeunit/applications-flow-common 1.33.283-lets-get-social-ish → 1.33.286-lets-get-social-ish

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

@@ -4272,10 +4272,10 @@ class DevopsSourceControlFormComponent {
     }
 }
 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 \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\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\n      <ng-container *ngIf=\"State?.Loading\">\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\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 *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *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 \n            class=\"mat-full-width with-hint margin-bottom\" \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\" color=\"accent\"> 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\" class=\"primary-link\" 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()\" color=\"accent\"> 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\"class=\"primary-link\">\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      </ng-container>\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}.primary-link{color:#4a918e}.s-block{margin:10px 0;width:100%;height:40px}\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$5.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$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$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$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$3.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4$2.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: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.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$3.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$3.MatLabel, selector: "mat-label" }, { type: i9$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$2.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"] }] });
+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 \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\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\n      <ng-container *ngIf=\"State?.Loading\">\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\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 *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *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 \n            class=\"mat-full-width with-hint margin-bottom\" \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\" color=\"accent\"> 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\" class=\"primary-link\" 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()\" color=\"accent\"> 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\"class=\"primary-link\">\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      </ng-container>\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}.primary-link{color:#4a918e;text-decoration:none}.s-block{margin:10px 0;width:100%;height:40px}\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$5.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$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$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$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$3.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4$2.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: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.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$3.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$3.MatLabel, selector: "mat-label" }, { type: i9$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$2.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 \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\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\n      <ng-container *ngIf=\"State?.Loading\">\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\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 *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *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 \n            class=\"mat-full-width with-hint margin-bottom\" \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\" color=\"accent\"> 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\" class=\"primary-link\" 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()\" color=\"accent\"> 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\"class=\"primary-link\">\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      </ng-container>\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}.primary-link{color:#4a918e}.s-block{margin:10px 0;width:100%;height:40px}\n"] }]
+            args: [{ selector: 'lcu-devops-source-control-form', template: "<form \n  class=\"form-card\" \n  [formGroup]=\"DevOpsSourceControlFormGroup\" \n  (ngSubmit)=\"SubmitSourceControl()\"\n>\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\n      <ng-container *ngIf=\"State?.Loading\">\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n        <skeleton-block \n          class=\"s-block\"\n          effect=\"wave\" \n        ></skeleton-block>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"!State?.Loading\">\n\n        <div class=\"card\">\n\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 *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n                <mat-option \n                  [value]=\"devOpsActionLookup\" \n                  *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 \n            class=\"mat-full-width with-hint margin-bottom\" \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\" color=\"accent\"> 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\" class=\"primary-link\" 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()\" color=\"accent\"> 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\"class=\"primary-link\">\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      </ng-container>\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}.primary-link{color:#4a918e;text-decoration:none}.s-block{margin:10px 0;width:100%;height:40px}\n"] }]
         }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$1.FormBuilder }]; }, propDecorators: { EditingSourceControlLookup: [{
                 type: Input,
                 args: ['editing-source-control-lookup']
@@ -5091,6 +5091,7 @@ class BuildPipelineFormComponent {
         this.eacSvc = eacSvc;
         this.formBuilder = formBuilder;
         this.appsFlowSvc = appsFlowSvc;
+        this.Disabled = false;
         this.HostingDetails = new ProjectHostingDetails();
         this.ResponseEvent = new EventEmitter;
     }
@@ -5157,7 +5158,7 @@ class BuildPipelineFormComponent {
         // this.BuildPipelineFormGroup.addControl(
         //   'hostingDetails',
         this.BuildPipelineFormGroup = this.formBuilder.group({
-            buildPipeline: [this.BuildPipeline, [Validators.required]],
+        // buildPipeline: [this.BuildPipeline, [Validators.required]],
         });
         // );
         this.loadProjectHostingDetails();
@@ -5223,7 +5224,7 @@ class BuildPipelineFormComponent {
     }
     //  Helpers
     setupControlsForForm() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         // this.BuildPipeline =
         //         this.BuildPipeline || this.HostingDetails?.HostingOptions
         //           ? this.HostingDetails?.HostingOptions[0]?.Lookup
@@ -5237,6 +5238,7 @@ class BuildPipelineFormComponent {
                 this.BuildPipelineFormGroup.removeControl(ctrlName);
             }
         }
+        this.BuildPipelineFormGroup.addControl('buildPipeline', this.formBuilder.control(this.BuildPipeline || '', [Validators.required]));
         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) => {
@@ -5247,15 +5249,17 @@ class BuildPipelineFormComponent {
             // }
         });
         if (((_e = this.BuildPipelineFormControl) === null || _e === void 0 ? void 0 : _e.value) === 'npm-release') {
-            if (!this.BuildPipelineFormGroup.controls.npmToken) {
+            console.log("npm release");
+            if (!((_g = (_f = this.BuildPipelineFormGroup) === null || _f === void 0 ? void 0 : _f.controls) === null || _g === void 0 ? void 0 : _g.npmToken)) {
+                console.log("npm token if");
                 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) {
+        else if (((_h = this.BuildPipelineFormControl) === null || _h === void 0 ? void 0 : _h.value) === 'github-artifacts-release') {
+            if ((_k = (_j = this.BuildPipelineFormGroup) === null || _j === void 0 ? void 0 : _j.controls) === null || _k === void 0 ? void 0 : _k.npmToken) {
                 this.BuildPipelineFormGroup.removeControl('npmToken');
             }
         }
@@ -5275,14 +5279,14 @@ class BuildPipelineFormComponent {
             console.log('ERR: ', err);
             this.HostingDetails.Loading = false;
         });
-        console.log('HOSTING DETAILS: ', this.HostingDetails);
+        // 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 \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\n\n          <!-- <div  *ngIf=\"!HostingDetails?.Loading\"> -->\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"buildPipeline\"\n                placeholder=\"Build Pipeline\"\n                [disabled]=\"Disabled\"\n                (selectionChange)=\"BuildPipelineChanged()\"\n                required\n              >\n                <ng-container\n                  *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n                >\n                  <mat-option [value]=\"hostOption.Lookup\">\n                    {{ hostOption.Name }}\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n          \n              <mat-hint>\n                <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                  <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                    {{ hostOption.Description }}\n                  </span>\n                </ng-container>\n              </mat-hint>\n            </mat-form-field>\n          \n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                formControlName=\"devOpsActionName\"\n                placeholder=\"Name of DevOps Action\"\n                required=\"true\"\n              />\n            </mat-form-field>\n          \n            <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  [formControlName]=\"input.Lookup\"\n                  [placeholder]=\"input.Placeholder\"\n                  [required]=\"input.Required\"\n                />\n          \n                <mat-hint>{{ input.Hint }}</mat-hint>\n              </mat-form-field>\n            </ng-container>\n          \n            <div *ngIf=\"BuildPipeline == 'npm-release'\">\n              <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n                <mat-icon matPrefix>security</mat-icon>\n          \n                <input\n                  id=\"npm-token\"\n                  matInput\n                  type=\"text\"\n                  formControlName=\"npmToken\"\n                  placeholder=\"NPM token\"\n                  [required]=\"!Disabled\"\n                  style=\"-webkit-text-security: disc;\"\n                />\n                <mat-hint>\n                  Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                  Learn how to create and view access tokens \n                  <a\n                    href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                    target=\"_blank\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      </mat-card-content>\n\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: [".s-block{margin:10px 0;width:100%;height:40px}\n"], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i4$5.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$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: 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: i4$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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$3.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"] }] });
+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 \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\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                    class=\"primary-link\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      </mat-card-content>\n\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: [".s-block{margin:10px 0;width:100%;height:40px}.primary-link{color:#4a918e;text-decoration:none}\n"], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i4$5.SkeletonBlockComponent, selector: "skeleton-block", inputs: ["width", "height", "effect", "borderRadius"] }, { type: i4$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$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: 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: i4$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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$3.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 \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\n\n          <!-- <div  *ngIf=\"!HostingDetails?.Loading\"> -->\n            <mat-form-field class=\"mat-full-width\">\n              <mat-select\n                formControlName=\"buildPipeline\"\n                placeholder=\"Build Pipeline\"\n                [disabled]=\"Disabled\"\n                (selectionChange)=\"BuildPipelineChanged()\"\n                required\n              >\n                <ng-container\n                  *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n                >\n                  <mat-option [value]=\"hostOption.Lookup\">\n                    {{ hostOption.Name }}\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n          \n              <mat-hint>\n                <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                  <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                    {{ hostOption.Description }}\n                  </span>\n                </ng-container>\n              </mat-hint>\n            </mat-form-field>\n          \n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                formControlName=\"devOpsActionName\"\n                placeholder=\"Name of DevOps Action\"\n                required=\"true\"\n              />\n            </mat-form-field>\n          \n            <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  [formControlName]=\"input.Lookup\"\n                  [placeholder]=\"input.Placeholder\"\n                  [required]=\"input.Required\"\n                />\n          \n                <mat-hint>{{ input.Hint }}</mat-hint>\n              </mat-form-field>\n            </ng-container>\n          \n            <div *ngIf=\"BuildPipeline == 'npm-release'\">\n              <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n                <mat-icon matPrefix>security</mat-icon>\n          \n                <input\n                  id=\"npm-token\"\n                  matInput\n                  type=\"text\"\n                  formControlName=\"npmToken\"\n                  placeholder=\"NPM token\"\n                  [required]=\"!Disabled\"\n                  style=\"-webkit-text-security: disc;\"\n                />\n                <mat-hint>\n                  Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                  Learn how to create and view access tokens \n                  <a\n                    href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                    target=\"_blank\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      </mat-card-content>\n\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: [".s-block{margin:10px 0;width:100%;height:40px}\n"] }]
+            args: [{ selector: 'lcu-build-pipeline-form', template: "<form \n  class=\"form-card\" \n  [formGroup]=\"BuildPipelineFormGroup\" \n  (ngSubmit)=\"SubmitBuildPipeline()\"\n>\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container *ngIf=\"HostingDetails?.Loading || State?.Loading\">\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <skeleton-block \n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n          <ng-container *ngIf=\"SelectedHostingOption?.Inputs\">\n            <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n\n              <skeleton-block \n                class=\"s-block\"\n                effect=\"wave\" \n               ></skeleton-block>\n\n            </ng-container>\n\n          </ng-container>\n\n          <skeleton-block \n            *ngIf=\"\"\n            class=\"s-block\"\n            effect=\"wave\" \n          ></skeleton-block>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!HostingDetails?.Loading && !State?.Loading\">\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                    class=\"primary-link\"\n                  >\n                    here.\n                  </a>\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          <!-- </div> -->\n          \n          <!-- <div *ngIf=\"HostingDetails?.Loading\">\n            <div class=\"spread\">\n              <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n          \n              <div class=\"margin-3\">\n                <h4 class=\"mat-title\">Loading hosting details</h4>\n              </div>\n            </div>\n          </div> -->\n      </ng-container>\n      </mat-card-content>\n\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: [".s-block{margin:10px 0;width:100%;height:40px}.primary-link{color:#4a918e;text-decoration:none}\n"] }]
         }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$1.FormBuilder }, { type: ApplicationsFlowService }]; }, propDecorators: { DevOpsActionLookup: [{
                 type: Input,
                 args: ['devops-action-lookup']