@lowcodeunit/applications-flow-common 1.33.87-lets-get-social-ish → 1.33.93-lets-get-social-ish

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@lcu/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@lowcodeunit/app-host-common'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('@angular/cdk/layout')) :
-    typeof define === 'function' && define.amd ? define('@lowcodeunit/applications-flow-common', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@lcu/common', '@angular/forms', '@angular/flex-layout', '@lowcodeunit/app-host-common', '@angular/cdk/keycodes', 'rxjs/operators', '@angular/cdk/layout'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lowcodeunit = global.lowcodeunit || {}, global.lowcodeunit['applications-flow-common'] = {}), global.ng.core, global.rxjs, global.ng.common.http, global.i2, global.ng.forms, global.ng.flexLayout, global.appHostCommon, global.ng.cdk.keycodes, global.rxjs.operators, global.ng.cdk.layout));
-}(this, (function (exports, i0, rxjs, i1, i2, forms, flexLayout, appHostCommon, keycodes, operators, layout) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@lcu/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@lowcodeunit/app-host-common'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('@angular/cdk/layout'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle')) :
+    typeof define === 'function' && define.amd ? define('@lowcodeunit/applications-flow-common', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@lcu/common', '@angular/forms', '@angular/flex-layout', '@lowcodeunit/app-host-common', '@angular/cdk/keycodes', 'rxjs/operators', '@angular/cdk/layout', '@angular/material/tooltip', '@angular/material/slide-toggle'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lowcodeunit = global.lowcodeunit || {}, global.lowcodeunit['applications-flow-common'] = {}), global.ng.core, global.rxjs, global.ng.common.http, global.i2, global.ng.forms, global.ng.flexLayout, global.appHostCommon, global.ng.cdk.keycodes, global.rxjs.operators, global.ng.cdk.layout, global.ng.material.tooltip, global.ng.material.slideToggle));
+}(this, (function (exports, i0, rxjs, i1, i2, forms, flexLayout, appHostCommon, keycodes, operators, layout, tooltip, slideToggle) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -4717,8 +4717,8 @@
     SlottedCardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-slotted-card',
-                    template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <button mat-button class=\"slotted-card-action-btn\" click=\"MainActionClickEvent()\">{{ ActionText }}</button>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
-                    styles: [".col-info-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:0}.header-icon{margin-right:10px}.card-title{font-size:30px;margin-bottom:0}.header-description{background-color:#d3d3d3;margin-left:-2px;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
+                    template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
+                    styles: [".col-info-card{border:2px solid #d3d3d3;margin:20px;padding:0}.header-icon{margin-right:10px}.card-title{font-size:30px;margin-bottom:0}.header-description{background-color:#d3d3d3;margin-left:-2px;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
                 },] }
     ];
     SlottedCardComponent.ctorParameters = function () { return []; };
@@ -4728,6 +4728,7 @@
         MainSlotDescription: [{ type: i0.Input, args: ['main-slot-description',] }],
         SecondarySlotDescription: [{ type: i0.Input, args: ['secondary-slot-description',] }],
         ActionText: [{ type: i0.Input, args: ['action-text',] }],
+        ActionPath: [{ type: i0.Input, args: ['action-path',] }],
         MainActionClicked: [{ type: i0.Output, args: ['main-action-clicked',] }]
     };
 
@@ -4750,7 +4751,7 @@
         { type: i0.Component, args: [{
                     selector: 'lcu-project-info-card',
                     template: "<mat-card class=\"project-info-card\">\n\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n        <div class=\"round-project-img\" fxLayoutAlign=\"center center\">\n            <mat-icon class=\"temp-icon\">flutter_dash</mat-icon>\n        </div>\n    </div>\n\n    <div class=\"icon-btn-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" >\n      <button mat-icon-button id=\"left-icon\" (click)=\"LeftIconClicked()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n      <button mat-icon-button id=\"right-icon\" (click)=\"RightIconClicked()\">\n        <mat-icon>share</mat-icon>\n      </button>\n    </div>\n\n    <mat-card-header class=\"project-card-header\" fxLayoutAlign=\"center center\">\n\n      <mat-card-title class=\"project-card-name\" *ngIf=\"Name\">{{Name}}</mat-card-title>\n\n      <mat-card-subtitle class=\"project-card-description\" *ngIf=\"Description\">{{Description}}</mat-card-subtitle>\n\n      <mat-card-subtitle class=\"project-card-host\">\n          <a class=\"host-anchor\" *ngIf=\"Subtext\" [href]=\"Subtext\" target=\"_blank\">{{Subtext}}</a>\n      </mat-card-subtitle>\n\n    </mat-card-header>\n    <mat-card-content class=\"card-content-container\">\n      <div class=\"stats-container\">\n        <ng-content  select=\"[stats]\"></ng-content>\n      </div>\n\n      <div class=\"promo-container\">\n        <ng-content  select=\"[promo]\"></ng-content>\n      </div>\n\n    </mat-card-content>\n    <mat-card-actions class=\"actions-container\">\n      <ng-content select=\"[action]\"></ng-content>\n      \n    </mat-card-actions>\n  </mat-card>\n  \n",
-                    styles: [".project-info-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:0}.round-project-img{background-color:#dfeff2;border:2px solid #fff;border-radius:40px;height:75px;margin-top:20px;text-align:center;width:75px}.temp-icon{font-size:50px;height:50px;width:50px}.icon-btn-container{margin:5px}.project-card-header{margin-top:50px;text-align:center}.host-anchor{color:#4a918e;text-decoration:none}.header-img-container{background-color:#a4bab3;border-radius:2px 2px 0 0;height:60px;justify-content:center;margin-right:-.5px;margin-top:-.5px!important}.project-card-name{font-size:30px;font-weight:600}.card-content-container{margin-bottom:0!important}.stats-container{border-bottom:1px solid #d3d3d3;border-top:1px solid #d3d3d3}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.actions-container{padding:0!important}.info-card-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
+                    styles: [".project-info-card{border:2px solid #d3d3d3;margin:20px;padding:0}.round-project-img{background-color:#dfeff2;border:2px solid #fff;border-radius:40px;height:75px;margin-top:20px;text-align:center;width:75px}.temp-icon{font-size:50px;height:50px;width:50px}.icon-btn-container{margin:5px}.project-card-header{margin-top:50px;text-align:center}.host-anchor{color:#4a918e;text-decoration:none}.header-img-container{background-color:#a4bab3;border-radius:2px 2px 0 0;height:60px;justify-content:center;margin-right:-.5px;margin-top:-.5px!important}.project-card-name{font-size:30px;font-weight:600}.card-content-container{margin-bottom:0!important}.stats-container{border-bottom:1px solid #d3d3d3;border-top:1px solid #d3d3d3}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.actions-container{padding:0!important}.info-card-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
                 },] }
     ];
     ProjectInfoCardComponent.ctorParameters = function () { return []; };
@@ -4774,7 +4775,7 @@
         { type: i0.Component, args: [{
                     selector: 'lcu-analytics-card',
                     template: "<mat-card class=\"analytics-card\">\n    <mat-card-header>\n      <mat-card-title *ngIf=\"Title\">{{Title}}</mat-card-title>\n      <mat-card-subtitle *ngIf=\"Subtext\">{{Subtext}}</mat-card-subtitle>\n    </mat-card-header>\n    <mat-card-content>\n      <!-- <ng-container *ngFor=\"let atics of analytics \"> -->\n          \n        <div class=\"analytic-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n            <div fxLayout=\"column\">\n                <div class=\"analytic-number\">57</div>\n                <div class=\"analytic-name\">Unique Visitors</div>\n            </div>\n\n            <div class=\"percent-change increase\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n                <mat-icon>arrow_drop_up</mat-icon>\n                <div>{{ .16 | percent}}</div>\n            </div>\n\n            <!-- <div class=\"percent-change decrease\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n                <mat-icon>arrow_drop_down</mat-icon>\n                <div>16</div>\n            </div> -->\n        </div>\n\n      <!-- </ng-container> -->\n    </mat-card-content>\n    <!-- <mat-card-actions>\n      <button mat-button>LIKE</button>\n      <button mat-button>SHARE</button>\n    </mat-card-actions> -->\n  </mat-card>\n",
-                    styles: [".analytics-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:10px}.increase{color:green}.decrease{color:red}"]
+                    styles: [".analytics-card{border:2px solid #d3d3d3;margin:20px;padding:10px}.increase{color:green}.decrease{color:red}"]
                 },] }
     ];
     AnalyticsCardComponent.ctorParameters = function () { return []; };
@@ -4805,7 +4806,7 @@
         { type: i0.Component, args: [{
                     selector: 'lcu-feed-card-sm',
                     template: "<mat-card class=\"social-card\">\n    <div class=\"feed-card-container\" fxLayout=\"row\">\n        <mat-icon *ngIf=\"Icon\" [style.color]=\"IconColor\">{{Icon}}</mat-icon>\n        <div class=\"feed-card-main-content\">\n            <mat-card-title *ngIf=\"Title\">{{Title}}</mat-card-title>\n            <div *ngIf=\"Subtext\">{{Subtext}}</div>\n            <div *ngIf=\"Description\">{{Description}}</div>\n            <ng-content select=\"[more-details]\"></ng-content>\n        </div>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"end\">\n      <ng-content select=\"[actions]\"></ng-content>\n    </mat-card-actions>\n  </mat-card>\n",
-                    styles: [".social-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}"]
+                    styles: [".social-card{border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.main-slot-container{padding:10px}.slot-header{align-items:center}.slot-content{width:100%}.slot-name{font-size:22px;font-weight:600;padding-left:5px}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{color:#000;font-size:10px;text-decoration:none}.action-icon{font-size:25px;height:25px;width:25px}.gold-icon{color:#d4af37}.upgrade-text{cursor:pointer;font-weight:700;margin-left:10px}"]
                 },] }
     ];
     FeedCardSmComponent.ctorParameters = function () { return []; };
@@ -4883,7 +4884,7 @@
         { type: i0.Component, args: [{
                     selector: 'lcu-gh-control',
                     template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>",
-                    styles: [".social-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.gh-icon{font-size:60px;height:60px;text-align:center;width:60px}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}"]
+                    styles: [".social-card{border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.main-slot-container{padding:10px}.slot-header{align-items:center}.slot-content{width:100%}.slot-name{font-size:22px;font-weight:600;padding-left:5px}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{color:#000;font-size:10px;text-decoration:none}.action-icon{font-size:25px;height:25px;width:25px}.gold-icon{color:#d4af37}.upgrade-text{cursor:pointer;font-weight:700;margin-left:10px}.gh-icon{font-size:60px;height:60px;text-align:center;width:60px}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}"]
                 },] }
     ];
     GhControlComponent.ctorParameters = function () { return []; };
@@ -4902,7 +4903,7 @@
         { type: i0.Component, args: [{
                     selector: 'lcu-main-feed-card',
                     template: "<mat-card class=\"social-card\">\n    <mat-card-header fxLayout=\"row\">\n        <div *ngIf=\"Avatar\" mat-card-avatar class=\"example-header-image\" [style.backgroundImage]=\"Avatar\" fxFlex=\"10%\"></div>\n        <div class=\"header-main-content-container\" fxFlex=\"80%\">\n            <mat-card-title *ngIf=\"Title\">{{Title}}</mat-card-title>\n            <div *ngIf=\"Subtext\">{{Subtext}}</div>\n            <div *ngIf=\"TimeAgo\">{{TimeAgo}}</div>\n        </div>\n        <div fxFlex=\"10%\">\n            <button mat-icon-button (click)=\"MoreClicked()\" >\n                <mat-icon>more_horiz</mat-icon>\n            </button>\n        </div>\n\n      </mat-card-header>\n    \n    <div class=\"feed-card-container\" fxLayout=\"row\">\n        <div class=\"feed-card-main-content\">\n            <ng-content select=\"[tabs]\"></ng-content>\n        </div>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n      <ng-content select=\"[actions]\"></ng-content>\n        \n\n    </mat-card-actions>\n  </mat-card>\n",
-                    styles: [".social-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.example-header-image{background-size:cover}"]
+                    styles: [".social-card{border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.main-slot-container{padding:10px}.slot-header{align-items:center}.slot-content{width:100%}.slot-name{font-size:22px;font-weight:600;padding-left:5px}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{color:#000;font-size:10px;text-decoration:none}.action-icon{font-size:25px;height:25px;width:25px}.gold-icon{color:#d4af37}.upgrade-text{cursor:pointer;font-weight:700;margin-left:10px}.example-header-image{background-size:cover}"]
                 },] }
     ];
     MainFeedCardComponent.ctorParameters = function () { return []; };
@@ -4996,6 +4997,450 @@
         Stats: [{ type: i0.Input, args: ['stats',] }]
     };
 
+    var SecurityToggleComponent = /** @class */ (function () {
+        function SecurityToggleComponent(formBldr) {
+            this.formBldr = formBldr;
+        }
+        Object.defineProperty(SecurityToggleComponent.prototype, "IsPrivateFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.SecurityFormGroup) === null || _a === void 0 ? void 0 : _a.controls.isPrivate;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SecurityToggleComponent.prototype.ngOnInit = function () {
+            this.setupSecurityFormGroup();
+        };
+        SecurityToggleComponent.prototype.SecuritySubmit = function () {
+            console.log("submitting values");
+        };
+        SecurityToggleComponent.prototype.setupSecurityFormGroup = function () {
+            var _a, _b;
+            this.ProcessorType = ((_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.Processor) === null || _b === void 0 ? void 0 : _b.Type) || '';
+            if (this.EditingApplication != null) {
+                // this.SecurityFormGroup = this.formBldr.group({
+                //   name: [this.EditingApplication.Application?.Name, Validators.required],
+                //   description: [
+                //     this.EditingApplication.Application?.Description,
+                //     Validators.required,
+                //   ],
+                //   route: [
+                //     this.EditingApplication.LookupConfig?.PathRegex.replace('.*', '') ||
+                //       '/',
+                //     Validators.required,
+                //   ],
+                //   // priority: [
+                //   //   this.EditingApplication.Application?.Priority || 10000,
+                //   //   Validators.required,
+                //   // ],
+                //   procType: [this.ProcessorType, [Validators.required]],
+                // });
+            }
+            this.setupSecurityForm();
+        };
+        SecurityToggleComponent.prototype.setupSecurityForm = function () {
+            var _a, _b;
+            this.SecurityFormGroup.addControl('isPrivate', this.formBldr.control(((_a = this.EditingApplication.LookupConfig) === null || _a === void 0 ? void 0 : _a.IsPrivate) || false, [forms.Validators.required]));
+            this.SecurityFormGroup.addControl('isTriggerSignIn', this.formBldr.control(((_b = this.EditingApplication.LookupConfig) === null || _b === void 0 ? void 0 : _b.IsTriggerSignIn) || false, [forms.Validators.required]));
+        };
+        return SecurityToggleComponent;
+    }());
+    SecurityToggleComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lcu-security-toggle',
+                    template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"spread flow-card\">\n        <mat-card-header>\n          <mat-card-title> Security Settings </mat-card-title>\n\n        <div fxFlex></div>\n\n        <mat-slide-toggle\n              formControlName=\"isPrivate\"\n              matTooltip=\"Is Secure Application?\"\n            >\n        </mat-slide-toggle>\n\n            <mat-icon\n              matSuffix\n              matTooltip=\"A Secured Application is one that requires the user to be authenticated to use the application. The application is hosted behind an identity wall.\"\n            >\n              info_outline\n            </mat-icon>\n          </mat-card-header>\n\n          <mat-card-content>\n            <div>\n              <div *ngIf=\"IsPrivateFormControl.value\">\n                <div>\n                  <mat-slide-toggle formControlName=\"isTriggerSignIn\">\n                    Is Trigger Sign In Application?\n                  </mat-slide-toggle>\n\n                  <mat-icon\n                    matSuffix\n                    matTooltip=\"A Trigger Sign In Application will direct the user to sign in if they are not already.\"\n                  >\n                    info_outline\n                  </mat-icon>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n        \n        <mat-card-actions>\n            <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n            <button mat-raised-button type=\"submit\" >Save Security Settings</button>\n        </mat-card-actions>\n    </mat-card>\n</form>\n",
+                    styles: ["::ng-deep .mat-tooltip{color:#000!important}"]
+                },] }
+    ];
+    SecurityToggleComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder }
+    ]; };
+    SecurityToggleComponent.propDecorators = {
+        EditingApplication: [{ type: i0.Input, args: ['editing-application',] }]
+    };
+
+    var ProcessorDetailsFormComponent = /** @class */ (function () {
+        function ProcessorDetailsFormComponent(formBldr) {
+            this.formBldr = formBldr;
+            // this.EditingApplicationLookup = null;
+            this.redirectTooltip = '';
+        }
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "BuildFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.build;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "ClientIDFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.clientId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "DefaultFileFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.defaultFile;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "InboundPathFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.inboundPath;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "TokenLookupFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.tokenLookup;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "RedirectFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.redirect;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "ScopesFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.scopes;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "SecurityFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.security;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "SPARootFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.spaRoot;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "PermanentFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.permanent;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProcessorDetailsFormComponent.prototype, "PreserveMethodFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.ProcessorDetailsFormGroup) === null || _a === void 0 ? void 0 : _a.controls.preserveMethod;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ProcessorDetailsFormComponent.prototype.ngOnInit = function () {
+            this.setupProcessorDetailsForm();
+        };
+        ProcessorDetailsFormComponent.prototype.DetermineTooltipText = function () {
+            var permanentValue = this.PermanentFormControl.value;
+            var preserveValue = this.PreserveMethodFormControl.value;
+            if (permanentValue === true && preserveValue === false) {
+                this.redirectTooltip = '301 – Permanent and Not Preserve';
+            }
+            else if (permanentValue === false && preserveValue === false) {
+                this.redirectTooltip = '302 – Not Permanent and Not Preserve';
+            }
+            else if (permanentValue === false && preserveValue === true) {
+                this.redirectTooltip = '307 – Not Permanent and Preserve';
+            }
+            else if (permanentValue === true && preserveValue === true) {
+                this.redirectTooltip = '308 – Permanent and Preserve';
+            }
+        };
+        ProcessorDetailsFormComponent.prototype.SubmitProcessorDetails = function () {
+        };
+        ProcessorDetailsFormComponent.prototype.ProcessorTypeChanged = function (event) {
+            this.ProcessorType = event.value;
+            this.setupProcessorTypeSubForm();
+        };
+        ProcessorDetailsFormComponent.prototype.LCUTypeChanged = function (event) {
+            this.LCUType = event.value;
+            this.setupLcuTypeSubForm();
+        };
+        //HELPERS
+        ProcessorDetailsFormComponent.prototype.cleanupLcuTypeSubForm = function () {
+            this.ProcessorDetailsFormGroup.removeControl('methods');
+            this.ProcessorDetailsFormGroup.removeControl('apiRoot');
+            this.ProcessorDetailsFormGroup.removeControl('security');
+            this.ProcessorDetailsFormGroup.removeControl('spaRoot');
+            this.ProcessorDetailsFormGroup.removeControl('applicationId');
+            this.ProcessorDetailsFormGroup.removeControl('build');
+            this.ProcessorDetailsFormGroup.removeControl('clientId');
+            this.ProcessorDetailsFormGroup.removeControl('clientSecret');
+            this.ProcessorDetailsFormGroup.removeControl('zipFile');
+        };
+        ProcessorDetailsFormComponent.prototype.cleanupProcessorTypeSubForm = function () {
+            this.ProcessorDetailsFormGroup.removeControl('defaultFile');
+            // this.ApplicationFormGroup.removeControl('dfsLcuType');
+            // this.ApplicationFormGroup.removeControl('oauthLcuType');
+            this.ProcessorDetailsFormGroup.removeControl('scopes');
+            this.ProcessorDetailsFormGroup.removeControl('tokenLookup');
+            this.ProcessorDetailsFormGroup.removeControl('inboundPath');
+            this.ProcessorDetailsFormGroup.removeControl('proxyLcuType');
+            this.ProcessorDetailsFormGroup.removeControl('redirect');
+            this.ProcessorDetailsFormGroup.removeControl('permanent');
+            this.ProcessorDetailsFormGroup.removeControl('preserveMethod');
+            this.cleanupLcuTypeSubForm();
+        };
+        ProcessorDetailsFormComponent.prototype.setupLcuTypeSubForm = function () {
+            this.cleanupLcuTypeSubForm();
+            // this.ApplicationFormGroup.removeControl('package');
+            // this.ApplicationFormGroup.removeControl('version');
+            if (this.LCUType) {
+                switch (this.LCUType) {
+                    case 'API':
+                        this.setupLCUAPIForm();
+                        break;
+                    case 'ApplicationPointer':
+                        this.setupLCUApplicationPointerForm();
+                        break;
+                    case 'GitHub':
+                        this.setupLCUGitHubForm();
+                        break;
+                    case 'GitHubOAuth':
+                        this.setupLCUGitHubOAuthForm();
+                        break;
+                    // case 'NPM':
+                    //   this.setupLCUNPMForm();
+                    //   break;
+                    case 'SPA':
+                        this.setupLCUSPAForm();
+                        break;
+                    case 'Zip':
+                        this.setupLCUZipForm();
+                        break;
+                }
+            }
+        };
+        ProcessorDetailsFormComponent.prototype.setupProcessorDetailsForm = function () {
+            var _a, _b, _c, _d, _e;
+            this.ProcessorType = ((_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.Processor) === null || _b === void 0 ? void 0 : _b.Type) || '';
+            if (this.EditingApplication != null) {
+                this.ProcessorDetailsFormGroup = this.formBldr.group({
+                    name: [(_c = this.EditingApplication.Application) === null || _c === void 0 ? void 0 : _c.Name, forms.Validators.required],
+                    description: [
+                        (_d = this.EditingApplication.Application) === null || _d === void 0 ? void 0 : _d.Description,
+                        forms.Validators.required,
+                    ],
+                    route: [
+                        ((_e = this.EditingApplication.LookupConfig) === null || _e === void 0 ? void 0 : _e.PathRegex.replace('.*', '')) ||
+                            '/',
+                        forms.Validators.required,
+                    ],
+                    // priority: [
+                    //   this.EditingApplication.Application?.Priority || 10000,
+                    //   Validators.required,
+                    // ],
+                    procType: [this.ProcessorType, [forms.Validators.required]],
+                });
+            }
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUGitHubForm = function () {
+            var _a;
+            this.ProcessorDetailsFormGroup.addControl('build', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.Build) || 'latest', [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUApplicationPointerForm = function () {
+            var _a;
+            this.ProcessorDetailsFormGroup.addControl('applicationId', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.ApplicationID) || '', [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUNPMForm = function () {
+            // this.ApplicationFormGroup.addControl(
+            //   'package',
+            //   this.formBldr.control(
+            //     this.EditingApplication.LowCodeUnit?.Package || '',
+            //     [Validators.required]
+            //   )
+            // );
+            // this.ApplicationFormGroup.addControl(
+            //   'version',
+            //   this.formBldr.control(
+            //     this.EditingApplication.LowCodeUnit?.Version || '',
+            //     [Validators.required]
+            //   )
+            // );
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUSPAForm = function () {
+            var _a;
+            this.ProcessorDetailsFormGroup.addControl('spaRoot', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.SPARoot) || '', [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUAPIForm = function () {
+            var _a, _b, _c, _d;
+            this.ProcessorDetailsFormGroup.addControl('methods', this.formBldr.control(((_b = (_a = this.EditingApplication.LookupConfig) === null || _a === void 0 ? void 0 : _a.AllowedMethods) === null || _b === void 0 ? void 0 : _b.join(' ')) || '', []));
+            this.ProcessorDetailsFormGroup.addControl('apiRoot', this.formBldr.control(((_c = this.EditingApplication.LowCodeUnit) === null || _c === void 0 ? void 0 : _c.APIRoot) || '', [forms.Validators.required]));
+            this.ProcessorDetailsFormGroup.addControl('security', this.formBldr.control(((_d = this.EditingApplication.LowCodeUnit) === null || _d === void 0 ? void 0 : _d.Security) || '', [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUGitHubOAuthForm = function () {
+            var _a, _b;
+            this.ProcessorDetailsFormGroup.addControl('clientId', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.ClientID) || '', [forms.Validators.required]));
+            this.ProcessorDetailsFormGroup.addControl('clientSecret', this.formBldr.control(((_b = this.EditingApplication.LowCodeUnit) === null || _b === void 0 ? void 0 : _b.ClientSecret) || '', [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupProxyForm = function () {
+            var _a, _b;
+            this.LCUType = ((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.Type) || '';
+            this.ProcessorDetailsFormGroup.addControl('inboundPath', this.formBldr.control(((_b = this.EditingApplication.Processor) === null || _b === void 0 ? void 0 : _b.InboundPath) || '', [forms.Validators.required]));
+            this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupRedirectForm = function () {
+            var _a, _b, _c;
+            this.ProcessorDetailsFormGroup.addControl('redirect', this.formBldr.control(((_a = this.EditingApplication.Processor) === null || _a === void 0 ? void 0 : _a.Redirect) || '', [
+                forms.Validators.required,
+            ]));
+            this.ProcessorDetailsFormGroup.addControl('permanent', this.formBldr.control(((_b = this.EditingApplication.Processor) === null || _b === void 0 ? void 0 : _b.Permanent) || false, []));
+            this.ProcessorDetailsFormGroup.addControl('preserveMethod', this.formBldr.control(((_c = this.EditingApplication.Processor) === null || _c === void 0 ? void 0 : _c.PreserveMethod) || false, []));
+            this.DetermineTooltipText();
+        };
+        ProcessorDetailsFormComponent.prototype.setupOAuthForm = function () {
+            var _a, _b, _c, _d;
+            this.LCUType = ((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.Type) || '';
+            this.ProcessorDetailsFormGroup.addControl('scopes', this.formBldr.control(((_c = (_b = this.EditingApplication.Processor) === null || _b === void 0 ? void 0 : _b.Scopes) === null || _c === void 0 ? void 0 : _c.Join(' ')) || '', [forms.Validators.required]));
+            this.ProcessorDetailsFormGroup.addControl('tokenLookup', this.formBldr.control(((_d = this.EditingApplication.Processor) === null || _d === void 0 ? void 0 : _d.TokenLookup) || '', [forms.Validators.required]));
+            this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupLCUZipForm = function () {
+            var _a;
+            this.ProcessorDetailsFormGroup.addControl('zipFile', this.formBldr.control(((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.ZipFile) || '', [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupDfsForm = function () {
+            var _a, _b;
+            this.LCUType = ((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.Type) || '';
+            this.ProcessorDetailsFormGroup.addControl('defaultFile', this.formBldr.control(((_b = this.EditingApplication.Processor) === null || _b === void 0 ? void 0 : _b.DefaultFile) || 'index.html', [forms.Validators.required]));
+            this.ProcessorDetailsFormGroup.addControl('lcuType', this.formBldr.control(this.LCUType, [forms.Validators.required]));
+        };
+        ProcessorDetailsFormComponent.prototype.setupProcessorTypeSubForm = function () {
+            this.cleanupProcessorTypeSubForm();
+            if (this.ProcessorType) {
+                switch (this.ProcessorType) {
+                    case 'DFS':
+                        this.setupDfsForm();
+                        break;
+                    case 'OAuth':
+                        this.setupOAuthForm();
+                        break;
+                    case 'Proxy':
+                        this.setupProxyForm();
+                        break;
+                    case 'Redirect':
+                        this.setupRedirectForm();
+                        break;
+                }
+            }
+            this.setupLcuTypeSubForm();
+        };
+        return ProcessorDetailsFormComponent;
+    }());
+    ProcessorDetailsFormComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lcu-processor-details-form',
+                    template: "<form class=\"processor-details-form\" [formGroup]=\"ProcessorDetailsFormGroup\" (ngSubmit)=\"SubmitProcessorDetails()\">\n<mat-card class=\"spread flow-card\">\n    <mat-card-header>\n      <mat-card-title> Processor Details </mat-card-title>\n    </mat-card-header>\n\n    <mat-card-content>\n      <mat-form-field class=\"mat-full-width\">\n        <mat-select\n          placeholder=\"Type\"\n          formControlName=\"procType\"\n          (selectionChange)=\"ProcessorTypeChanged($event)\"\n          required\n        >\n          <mat-option value=\"DFS\">View Package</mat-option>\n\n          <mat-option value=\"Redirect\">Redirect</mat-option>\n\n          <mat-option value=\"Proxy\">Proxy</mat-option>\n\n          <mat-option value=\"OAuth\">OAuth</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <div [ngSwitch]=\"ProcessorType\">\n        <div *ngSwitchCase=\"'DFS'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Default File\"\n              formControlName=\"defaultFile\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"NPM\">NPM</mat-option>\n\n              <mat-option value=\"GitHub\">GitHub</mat-option>\n\n              <!-- <mat-option value=\"Zip\">Zip</mat-option> -->\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHub'\">\n              <lcu-source-control-form-controls\n                [build-path]=\"EditingApplication?.LowCodeUnit?.Path\"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n                [source-control]=\"DefaultSourceControl\"\n                [use-branches]=\"false\"\n                [use-build-path]=\"true\"\n              ></lcu-source-control-form-controls>\n\n              <mat-form-field\n                class=\"mat-full-width\"\n                *ngIf=\"\n                  SourceControlFormControls?.RepositoryFormControl?.valid\n                \"\n              >\n                <input\n                  matInput\n                  placeholder=\"Build\"\n                  formControlName=\"build\"\n                  required\n                />\n\n                <mat-hint>\n                  Current Build:\n                  {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'NPM'\">\n              <lcu-npm-package-select\n                [npm-package]=\"EditingApplication?.LowCodeUnit?.Package\"\n                [npm-package-version]=\"\n                  EditingApplication?.LowCodeUnit?.Version\n                \"\n                [form-group]=\"ProcessorDetailsFormGroup\"\n              ></lcu-npm-package-select>\n\n              <mat-hint>\n                Current Version:\n                {{ EditingApplication?.LowCodeUnit?.CurrentVersion }}\n              </mat-hint>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'OAuth'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Scopes (space separated)\"\n              formControlName=\"scopes\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Token Lookup\"\n              formControlName=\"tokenLookup\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"GitHubOAuth\">GitHub</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'GitHubOAuth'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client ID\"\n                  formControlName=\"clientId\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Client Secret\"\n                  formControlName=\"clientSecret\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Proxy'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Inbound Path\"\n              formControlName=\"inboundPath\"\n              required\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              placeholder=\"Type\"\n              formControlName=\"lcuType\"\n              (selectionChange)=\"LCUTypeChanged($event)\"\n              required\n            >\n              <mat-option value=\"API\">API</mat-option>\n\n              <mat-option value=\"SPA\">Single Page Application</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <div [ngSwitch]=\"LCUType\">\n            <div *ngSwitchCase=\"'API'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"API Root\"\n                  formControlName=\"apiRoot\"\n                  required\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Allowed Methods (separate with spaces)\"\n                  formControlName=\"methods\"\n                />\n              </mat-form-field>\n\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"Security ({header}~{value})\"\n                  formControlName=\"security\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n\n            <div *ngSwitchCase=\"'SPA'\">\n              <mat-form-field class=\"mat-full-width\">\n                <input\n                  matInput\n                  placeholder=\"SPA Root\"\n                  formControlName=\"spaRoot\"\n                  required\n                />\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'Redirect'\">\n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              placeholder=\"Redirect URL\"\n              formControlName=\"redirect\"\n              required\n            />\n          </mat-form-field>\n\n          <div>\n            <mat-slide-toggle \n              class=\"spread\" \n              formControlName=\"permanent\">\n              Is Permanent?\n            </mat-slide-toggle>\n\n            <mat-slide-toggle\n              class=\"spread\"\n              formControlName=\"preserveMethod\"\n            >\n              Preserve Method?\n            </mat-slide-toggle>\n\n            <mat-icon\n              class=\"spread\"\n              matSuffix\n              (mouseenter)=\"DetermineTooltipText()\"\n              matTooltip={{redirectTooltip}}\n            >\n              info_outline\n            </mat-icon>\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && !IsPreserve\"\n\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"302 \u2013 Not Permanent and Not Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"!IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"307 \u2013 Not Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            <!-- <mat-icon\n            *ngIf=\"IsPermanent && IsPreserve\"\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"308 \u2013 Permanent and Preserve\"\n            >\n              info_outline\n            </mat-icon> -->\n\n            \n\n            <!-- <mat-icon\n              class=\"spread\"\n              matSuffix\n              matTooltip=\"Values used to control the redirect type.  Permanent and Not Preserve = 301; Not Permanent and Not Preserve = 302; Permanent and Preserve = 308; Not Permanent and Not Preserve = 307;\"\n            >\n              info_outline\n            </mat-icon> -->\n          </div>\n        </div>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save Security Settings</button>\n    </mat-card-actions>\n</mat-card>\n</form>\n  \n",
+                    styles: [""]
+                },] }
+    ];
+    ProcessorDetailsFormComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder }
+    ]; };
+    ProcessorDetailsFormComponent.propDecorators = {
+        EditingApplication: [{ type: i0.Input, args: ['editing-application',] }]
+    };
+
+    var SourceControlFormComponent = /** @class */ (function () {
+        function SourceControlFormComponent(formBldr) {
+            this.formBldr = formBldr;
+        }
+        Object.defineProperty(SourceControlFormComponent.prototype, "HasBuildFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.SourceControlFormGroup) === null || _a === void 0 ? void 0 : _a.controls.hasBuild;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SourceControlFormComponent.prototype, "SourceControlLookupFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.SourceControlFormGroup) === null || _a === void 0 ? void 0 : _a.controls.sourceControlLookup;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SourceControlFormComponent.prototype, "SourceControlLookups", {
+            get: function () {
+                return Object.keys(this.SourceControls || {});
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SourceControlFormComponent.prototype, "SourceControls", {
+            get: function () {
+                console.log("Environment: ", this.Environment);
+                return this.Environment.Sources || {};
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SourceControlFormComponent.prototype.ngOnInit = function () {
+            this.setupSourceControlForm();
+        };
+        SourceControlFormComponent.prototype.SourceControlLookupChanged = function (event) {
+            //  TODO:  Anything to do here on change?
+            console.log("sourceControlLookupChanged: ", event);
+        };
+        SourceControlFormComponent.prototype.SubmitSourceControl = function () {
+        };
+        //HELPER
+        SourceControlFormComponent.prototype.setupSourceControlForm = function () {
+            var _a, _b;
+            this.ProcessorType = ((_b = (_a = this.EditingApplication) === null || _a === void 0 ? void 0 : _a.Processor) === null || _b === void 0 ? void 0 : _b.Type) || '';
+            this.setupBuildForm();
+        };
+        SourceControlFormComponent.prototype.setupBuildForm = function () {
+            var _a, _b;
+            this.SourceControlFormGroup.addControl('hasBuild', this.formBldr.control(!!((_a = this.EditingApplication.LowCodeUnit) === null || _a === void 0 ? void 0 : _a.SourceControlLookup) || false, [forms.Validators.required]));
+            this.SourceControlFormGroup.addControl('sourceControlLookup', this.formBldr.control(((_b = this.EditingApplication.LowCodeUnit) === null || _b === void 0 ? void 0 : _b.SourceControlLookup) || '', []));
+        };
+        return SourceControlFormComponent;
+    }());
+    SourceControlFormComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lcu-source-control-form',
+                    template: "<form class=\"source-control-form\" [formGroup]=\"SourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n<mat-card class=\"spread flow-card\" *ngIf=\"ProcessorType != 'Redirect'\">\n    <mat-card-header>\n      <mat-card-title *ngIf=\"!HasBuildFormControl.value\">\n        Build & Source\n      </mat-card-title>\n\n      <mat-card-title *ngIf=\"HasBuildFormControl.value\">\n        Source Control\n      </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-slide-toggle\n        formControlName=\"hasBuild\"\n        matTooltip=\"Has Build?\"\n      >\n      </mat-slide-toggle>\n\n      <mat-icon\n        matSuffix\n        matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\"\n      >\n        info_outline\n      </mat-icon>\n    </mat-card-header>\n\n    <mat-card-content>\n      <mat-form-field\n        class=\"mat-full-width\"\n        *ngIf=\"\n          HasBuildFormControl.value && SourceControlLookups?.length > 0\n        \"\n      >\n        <mat-select\n          formControlName=\"sourceControlLookup\"\n          placeholder=\"Source Control\"\n          (selectionChange)=\"SourceControlLookupChanged($event)\"\n          [disabled]=\"\n            SourceControlFormControls?.Loading || HostingDetails?.Loading\n          \"\n        >\n          <ng-container\n            *ngFor=\"let srcCtrlLookup of SourceControlLookups\"\n          >\n            <mat-option\n              [value]=\"srcCtrlLookup\"\n              *ngIf=\"SourceControls[srcCtrlLookup]; let srcCtrl\"\n            >\n              {{ srcCtrl.Name }}\n            </mat-option>\n          </ng-container>\n        </mat-select>\n\n        <div *ngIf=\"HasBuildFormControl?.value\">\n          <h3>\n            @{{\n              SourceControlFormControls?.OrganizationFormControl?.value ||\n                SourceControl?.Organization\n            }}/{{\n              SourceControlFormControls?.RepositoryFormControl?.value ||\n                SourceControl?.Repository\n            }}\n          </h3>\n\n          <p>Organization and Repository pulled from build settings</p>\n\n          <mat-hint>\n            CurrentBuild:\n            {{ EditingApplication?.LowCodeUnit?.CurrentBuild }}\n          </mat-hint>\n        </div>\n      </mat-form-field>\n\n      <div *ngIf=\"SourceControlLookups?.length < 0\">\n        <h3>\n          Create source control locations under the DevOps tab above.\n        </h3>\n      </div>\n    </mat-card-content>\n    <mat-card-actions>\n        <!-- [disabled]=\"!SourceControlFormGroup.valid || !SourceControlFormGroup.dirty\" -->\n        <button mat-raised-button type=\"submit\" >Save</button>\n    </mat-card-actions>\n  </mat-card>\n</form>\n",
+                    styles: [""]
+                },] }
+    ];
+    SourceControlFormComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder }
+    ]; };
+    SourceControlFormComponent.propDecorators = {
+        EditingApplication: [{ type: i0.Input, args: ['editing-application',] }],
+        Environment: [{ type: i0.Input, args: ['environment',] }],
+        SourceControlFormControls: [{ type: i0.ViewChild, args: [SourceControlFormControlsComponent,] }]
+    };
+
     var ApplicationsFlowModule = /** @class */ (function () {
         function ApplicationsFlowModule() {
         }
@@ -5048,7 +5493,10 @@
                         GhControlComponent,
                         MainFeedCardComponent,
                         TwoColumnHeaderComponent,
-                        CardCarouselComponent
+                        CardCarouselComponent,
+                        SecurityToggleComponent,
+                        ProcessorDetailsFormComponent,
+                        SourceControlFormComponent
                     ],
                     imports: [
                         i2.FathymSharedModule,
@@ -5057,6 +5505,9 @@
                         flexLayout.FlexLayoutModule,
                         i2.MaterialModule,
                         appHostCommon.AppHostModule,
+                        tooltip.MatTooltipModule,
+                        slideToggle.MatSlideToggleModule
+                        // LazyElementModule,
                     ],
                     exports: [
                         ApplicationsFlowProjectsElementComponent,
@@ -5090,7 +5541,10 @@
                         GhControlComponent,
                         MainFeedCardComponent,
                         TwoColumnHeaderComponent,
-                        CardCarouselComponent
+                        CardCarouselComponent,
+                        SecurityToggleComponent,
+                        ProcessorDetailsFormComponent,
+                        SourceControlFormComponent
                     ],
                     entryComponents: [
                         ApplicationsFlowProjectsElementComponent,
@@ -5122,7 +5576,10 @@
                         GhControlComponent,
                         MainFeedCardComponent,
                         TwoColumnHeaderComponent,
-                        CardCarouselComponent
+                        CardCarouselComponent,
+                        SecurityToggleComponent,
+                        ProcessorDetailsFormComponent,
+                        SourceControlFormComponent
                     ],
                 },] }
     ];
@@ -5208,6 +5665,8 @@
     exports.UnpackLowCodeUnitRequest = UnpackLowCodeUnitRequest;
     exports.ɵa = ApplicationsFlowEventsService;
     exports.ɵb = DynamicTabsComponent;
+    exports.ɵba = ProcessorDetailsFormComponent;
+    exports.ɵbb = SourceControlFormComponent;
     exports.ɵc = HeaderComponent;
     exports.ɵd = ProjectTabsComponent;
     exports.ɵe = GeneralComponent;
@@ -5231,6 +5690,7 @@
     exports.ɵw = MainFeedCardComponent;
     exports.ɵx = TwoColumnHeaderComponent;
     exports.ɵy = CardCarouselComponent;
+    exports.ɵz = SecurityToggleComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });