@lowcodeunit/applications-flow-common 1.33.273-lets-get-social-ish → 1.33.274-lets-get-social-ish

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

@@ -5135,10 +5135,10 @@ class BuildPipelineFormComponent {
     }
 }
 BuildPipelineFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, deps: [{ token: EaCService }, { token: i1$1.FormBuilder }, { token: ApplicationsFlowService }], target: i0.ɵɵFactoryTarget.Component });
-BuildPipelineFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BuildPipelineFormComponent, selector: "lcu-build-pipeline-form", inputs: { DevOpsActionLookup: ["devops-action-lookup", "DevOpsActionLookup"], Disabled: ["disabled", "Disabled"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"], HostingDetails: ["hosting-details", "HostingDetails"] }, outputs: { ResponseEvent: "response-event" }, ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n\n        <div  *ngIf=\"!HostingDetails?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              formControlName=\"buildPipeline\"\n              placeholder=\"Build Pipeline\"\n              [disabled]=\"Disabled\"\n              (selectionChange)=\"BuildPipelineChanged()\"\n              required\n            >\n              <ng-container\n                *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n              >\n                <mat-option [value]=\"hostOption.Lookup\">\n                  {{ hostOption.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n        \n            <mat-hint>\n              <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                  {{ hostOption.Description }}\n                </span>\n              </ng-container>\n            </mat-hint>\n          </mat-form-field>\n        \n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              formControlName=\"devOpsActionName\"\n              placeholder=\"Name of DevOps Action\"\n              required=\"true\"\n            />\n          </mat-form-field>\n        \n          <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                [formControlName]=\"input.Lookup\"\n                [placeholder]=\"input.Placeholder\"\n                [required]=\"input.Required\"\n              />\n        \n              <mat-hint>{{ input.Hint }}</mat-hint>\n            </mat-form-field>\n          </ng-container>\n        \n          <div *ngIf=\"BuildPipeline == 'npm-release'\">\n            <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n              <mat-icon matPrefix>security</mat-icon>\n        \n              <input\n                id=\"npm-token\"\n                matInput\n                type=\"text\"\n                formControlName=\"npmToken\"\n                placeholder=\"NPM token\"\n                [required]=\"!Disabled\"\n                style=\"-webkit-text-security: disc;\"\n              />\n              <mat-hint>\n                Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                Learn how to create and view access tokens \n                <a\n                  href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                  target=\"_blank\"\n                >\n                  here.\n                </a>\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </div>\n        \n        <div *ngIf=\"HostingDetails?.Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n        \n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\">Loading hosting details</h4>\n            </div>\n          </div>\n        </div>\n      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button>\n        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>  \n        \n    </mat-card-actions>\n    </mat-card>\n</form>\n", styles: [""], components: [{ type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatCardHeader, selector: "mat-card-header" }, { type: i4$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: i3.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }, { 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"] }], 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$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                  >\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BuildPipelineFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-build-pipeline-form', template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\" (ngSubmit)=\"SubmitBuildPipeline()\">\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n\n        <div  *ngIf=\"!HostingDetails?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              formControlName=\"buildPipeline\"\n              placeholder=\"Build Pipeline\"\n              [disabled]=\"Disabled\"\n              (selectionChange)=\"BuildPipelineChanged()\"\n              required\n            >\n              <ng-container\n                *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n              >\n                <mat-option [value]=\"hostOption.Lookup\">\n                  {{ hostOption.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n        \n            <mat-hint>\n              <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                  {{ hostOption.Description }}\n                </span>\n              </ng-container>\n            </mat-hint>\n          </mat-form-field>\n        \n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              formControlName=\"devOpsActionName\"\n              placeholder=\"Name of DevOps Action\"\n              required=\"true\"\n            />\n          </mat-form-field>\n        \n          <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                [formControlName]=\"input.Lookup\"\n                [placeholder]=\"input.Placeholder\"\n                [required]=\"input.Required\"\n              />\n        \n              <mat-hint>{{ input.Hint }}</mat-hint>\n            </mat-form-field>\n          </ng-container>\n        \n          <div *ngIf=\"BuildPipeline == 'npm-release'\">\n            <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n              <mat-icon matPrefix>security</mat-icon>\n        \n              <input\n                id=\"npm-token\"\n                matInput\n                type=\"text\"\n                formControlName=\"npmToken\"\n                placeholder=\"NPM token\"\n                [required]=\"!Disabled\"\n                style=\"-webkit-text-security: disc;\"\n              />\n              <mat-hint>\n                Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                Learn how to create and view access tokens \n                <a\n                  href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                  target=\"_blank\"\n                >\n                  here.\n                </a>\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </div>\n        \n        <div *ngIf=\"HostingDetails?.Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n        \n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\">Loading hosting details</h4>\n            </div>\n          </div>\n        </div>\n      </mat-card-content>\n      <mat-card-actions fxLayoutAlign=\"center center\">\n\n        <button \n          *ngIf=\"!State?.Loading\"\n          mat-raised-button \n          type=\"submit\" \n          fxFlex=\"100%\" \n          color=\"primary\" \n          [disabled]=\"!BuildPipelineFormGroup.valid || !BuildPipelineFormGroup.dirty\">\n          <mat-icon>save</mat-icon>\n          Save Build Pipeline\n        </button>\n        <lcu-loader [loading]=\"State?.Loading\"></lcu-loader>  \n        \n    </mat-card-actions>\n    </mat-card>\n</form>\n", styles: [""] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$1.FormBuilder }, { type: ApplicationsFlowService }]; }, propDecorators: { DevOpsActionLookup: [{
                 type: Input,
                 args: ['devops-action-lookup']