@lowcodeunit/applications-flow-common 1.33.198-lets-get-social-ish → 1.33.201-lets-get-social-ish

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

@@ -37,13 +37,13 @@ import * as i6$1 from '@angular/material/checkbox';
 import { EaCNapkinIDEFlowImporter } from '@semanticjs/napkin-ide';
 import { DragItemsTemplates, DragDropUtils, VariablesUtils, ConstantUtils } from '@semanticjs/krakyn';
 import * as i1$3 from '@angular/cdk/layout';
-import * as i3$1 from 'skeleton-elements/angular';
+import * as i4$4 from 'skeleton-elements/angular';
 import { SkeletonElementsModule } from 'skeleton-elements/angular';
-import moment from 'moment';
-import { EaCApplicationAsCode } from '@semanticjs/common';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i4$4 from '@angular/material/menu';
+import moment from 'moment';
+import { EaCApplicationAsCode } from '@semanticjs/common';
+import * as i4$5 from '@angular/material/menu';
 import * as i8$1 from '@angular/router';
 
 /**
@@ -3564,7 +3564,7 @@ class SlottedCardComponent {
     }
 }
 SlottedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-SlottedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SlottedCardComponent, selector: "lcu-slotted-card", inputs: { ActionText: ["action-text", "ActionText"], ActionPath: ["action-path", "ActionPath"], Icon: ["icon", "Icon"], MainSlotDescription: ["main-slot-description", "MainSlotDescription"], Title: ["title", "Title"], SecondarySlotDescription: ["secondary-slot-description", "SecondarySlotDescription"] }, outputs: { MainActionClicked: "main-action-clicked" }, ngImport: i0, template: "<mat-card class=\"col-info-card\">\n  <mat-card-header class=\"slotted-card-header\" fxLayoutAlign=\"space-between center\">\n    <div mat-card-avatar fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <mat-icon  class=\"header-icon\">{{ Icon }}</mat-icon>\n      <div class=\"card-title\">{{ Title }}</div>\n    </div>\n\n    <mat-icon \n      *ngIf=\"!ActionPath && !State?.Loading\" \n      class=\"header-icon pointer\"\n      (click)=\"MainActionClickEvent()\"\n    >\n      add\n    </mat-icon>\n    <mat-icon \n      *ngIf=\"State?.Loading\" \n      skeleton-text \n      [effect]=\"SkeletonEffect\"\n      class=\"header-icon \"\n    >\n      add\n    </mat-icon>\n\n  </mat-card-header>\n\n  <!-- SKELETON CONTENT -->\n\n  <ng-container *ngIf=\"State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          Descrption text\n        </div>\n\n        <div class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      <div\n        class=\"slot-secondary\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"space-between center\"\n      >\n        <div class=\"slot-header-container\">\n          <div class=\"slot-header\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n              Name of the content\n            </div>\n          </div>\n\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n            Description\n          </div>\n        </div>\n\n        <div class=\"slot-actions-container\" fxLayout=\"row\">\n          <mat-icon\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"skeleton-item\"\n          >\n            edit\n          </mat-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          {{ SecondarySlotDescription }}\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n        {{ ActionText }}\n      </div>\n    </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n  <ng-container *ngIf=\"!State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n        <div class=\"slot-main\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n        <div class=\"slot-secondary\">\n          <ng-content select=\"[secondary]\"></ng-content>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a\n        mat-button\n        *ngIf=\"ActionPath\"\n        class=\"slotted-card-action-btn\"\n        [href]=\"ActionPath\"\n        color=\"primary\"\n        >{{ ActionText }}\n      </a>\n\n      <a\n        mat-button\n        *ngIf=\"!ActionPath\"\n        class=\"slotted-card-action-btn\"\n        (click)=\"MainActionClickEvent()\"\n        color=\"primary\"\n      >\n        {{ ActionText }}\n      </a>\n    </mat-card-actions>\n  </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0}.slotted-card-header{padding:5px}.header-icon{height:30px;width:30px;font-size:30px}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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"] }], directives: [{ type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
+SlottedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SlottedCardComponent, selector: "lcu-slotted-card", inputs: { ActionText: ["action-text", "ActionText"], ActionPath: ["action-path", "ActionPath"], Icon: ["icon", "Icon"], MainSlotDescription: ["main-slot-description", "MainSlotDescription"], Title: ["title", "Title"], SecondarySlotDescription: ["secondary-slot-description", "SecondarySlotDescription"] }, outputs: { MainActionClicked: "main-action-clicked" }, ngImport: i0, template: "<mat-card class=\"col-info-card\">\n  <mat-card-header class=\"slotted-card-header\" fxLayoutAlign=\"space-between center\">\n    <div mat-card-avatar fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <mat-icon  class=\"header-icon\">{{ Icon }}</mat-icon>\n      <div class=\"card-title\">{{ Title }}</div>\n    </div>\n\n    <mat-icon \n      *ngIf=\"!ActionPath && !State?.Loading\" \n      class=\"header-icon pointer\"\n      (click)=\"MainActionClickEvent()\"\n    >\n      add\n    </mat-icon>\n    <mat-icon \n      *ngIf=\"State?.Loading\" \n      skeleton-text \n      [effect]=\"SkeletonEffect\"\n      class=\"header-icon \"\n    >\n      add\n    </mat-icon>\n\n  </mat-card-header>\n\n  <!-- SKELETON CONTENT -->\n\n  <ng-container *ngIf=\"State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          Descrption text\n        </div>\n\n        <div class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      <div\n        class=\"slot-secondary\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"space-between center\"\n      >\n        <div class=\"slot-header-container\">\n          <div class=\"slot-header\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n              Name of the content\n            </div>\n          </div>\n\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n            Description\n          </div>\n        </div>\n\n        <div class=\"slot-actions-container\" fxLayout=\"row\">\n          <mat-icon\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"skeleton-item\"\n          >\n            edit\n          </mat-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          {{ SecondarySlotDescription }}\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n        {{ ActionText }}\n      </div>\n    </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n  <ng-container *ngIf=\"!State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n        <div class=\"slot-main\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n        <div class=\"slot-secondary\">\n          <ng-content select=\"[secondary]\"></ng-content>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a\n        mat-button\n        *ngIf=\"ActionPath\"\n        class=\"slotted-card-action-btn\"\n        [href]=\"ActionPath\"\n        color=\"primary\"\n        >{{ ActionText }}\n      </a>\n\n      <a\n        mat-button\n        *ngIf=\"!ActionPath\"\n        class=\"slotted-card-action-btn\"\n        (click)=\"MainActionClickEvent()\"\n        color=\"primary\"\n      >\n        {{ ActionText }}\n      </a>\n    </mat-card-actions>\n  </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0}.slotted-card-header{padding:5px}.header-icon{height:30px;width:30px;font-size:30px}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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"] }], directives: [{ type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lcu-slotted-card', template: "<mat-card class=\"col-info-card\">\n  <mat-card-header class=\"slotted-card-header\" fxLayoutAlign=\"space-between center\">\n    <div mat-card-avatar fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <mat-icon  class=\"header-icon\">{{ Icon }}</mat-icon>\n      <div class=\"card-title\">{{ Title }}</div>\n    </div>\n\n    <mat-icon \n      *ngIf=\"!ActionPath && !State?.Loading\" \n      class=\"header-icon pointer\"\n      (click)=\"MainActionClickEvent()\"\n    >\n      add\n    </mat-icon>\n    <mat-icon \n      *ngIf=\"State?.Loading\" \n      skeleton-text \n      [effect]=\"SkeletonEffect\"\n      class=\"header-icon \"\n    >\n      add\n    </mat-icon>\n\n  </mat-card-header>\n\n  <!-- SKELETON CONTENT -->\n\n  <ng-container *ngIf=\"State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          Descrption text\n        </div>\n\n        <div class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      <div\n        class=\"slot-secondary\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"space-between center\"\n      >\n        <div class=\"slot-header-container\">\n          <div class=\"slot-header\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n              Name of the content\n            </div>\n          </div>\n\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n            Description\n          </div>\n        </div>\n\n        <div class=\"slot-actions-container\" fxLayout=\"row\">\n          <mat-icon\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"skeleton-item\"\n          >\n            edit\n          </mat-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          {{ SecondarySlotDescription }}\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n        {{ ActionText }}\n      </div>\n    </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n  <ng-container *ngIf=\"!State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n        <div class=\"slot-main\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n        <div class=\"slot-secondary\">\n          <ng-content select=\"[secondary]\"></ng-content>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a\n        mat-button\n        *ngIf=\"ActionPath\"\n        class=\"slotted-card-action-btn\"\n        [href]=\"ActionPath\"\n        color=\"primary\"\n        >{{ ActionText }}\n      </a>\n\n      <a\n        mat-button\n        *ngIf=\"!ActionPath\"\n        class=\"slotted-card-action-btn\"\n        (click)=\"MainActionClickEvent()\"\n        color=\"primary\"\n      >\n        {{ ActionText }}\n      </a>\n    </mat-card-actions>\n  </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0}.slotted-card-header{padding:5px}.header-icon{height:30px;width:30px;font-size:30px}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"] }]
@@ -3591,9 +3591,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 args: ['main-action-clicked']
             }] } });
 
+class UpgradeDialogComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+    }
+    ngOnInit() {
+    }
+    CloseDialog() {
+        this.dialogRef.close();
+    }
+}
+UpgradeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: UpgradeDialogComponent, deps: [{ token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+UpgradeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: UpgradeDialogComponent, selector: "lcu-upgrade-dialog", ngImport: i0, template: "<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<div fxLayoutAlign=\"center center\">\n    <h2>Free During Beta!</h2>\n</div>\n", styles: [""], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.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: UpgradeDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-upgrade-dialog', template: "<div class=\"dialog-header\" fxLayoutAlign=\"end center\">\n    <button mat-icon-button (click)=\"CloseDialog()\">\n            <mat-icon>cancel</mat-icon>\n    </button>\n</div>\n\n<div fxLayoutAlign=\"center center\">\n    <h2>Free During Beta!</h2>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }]; } });
+
 class ProjectInfoCardComponent {
-    constructor(eacSvc) {
+    constructor(eacSvc, dialog) {
         this.eacSvc = eacSvc;
+        this.dialog = dialog;
         this.LeftClickEvent = new EventEmitter();
         this.RightClickEvent = new EventEmitter();
         this.SkeletonEffect = 'wave';
@@ -3613,13 +3631,23 @@ class ProjectInfoCardComponent {
         console.log("share clicked");
         this.RightClickEvent.emit({});
     }
+    UpgradeClicked() {
+        const dialogRef = this.dialog.open(UpgradeDialogComponent, {
+            width: '600px',
+            data: {},
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            // console.log('The dialog was closed');
+            // console.log("result:", result)
+        });
+    }
 }
-ProjectInfoCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProjectInfoCardComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-ProjectInfoCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ProjectInfoCardComponent, selector: "lcu-project-info-card", inputs: { Description: ["description", "Description"], Image: ["image", "Image"], IsEditable: ["is-editable", "IsEditable"], IsShareable: ["is-shareable", "IsShareable"], Name: ["name", "Name"], Subtext: ["subtext", "Subtext"] }, outputs: { LeftClickEvent: "left-click-event", RightClickEvent: "right-click-event" }, ngImport: i0, template: "<mat-card class=\"project-info-card\">\n\n  <!-- SKELETON CONTENT -->\n  <ng-container *ngIf=\"State?.Loading\">\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n      <skeleton-avatar class=\"round-project-img\" [effect]=\"SkeletonEffect\" [size]=\"75\" ></skeleton-avatar >\n  </div>\n\n  <mat-card-header class=\"project-card-header\" fxLayoutAlign=\"center center\">\n\n    <mat-card-title \n      skeleton-text  \n      [effect]=\"SkeletonEffect\"\n      class=\"project-card-name\" \n    >\n      Name of card\n    </mat-card-title>\n\n    <mat-card-subtitle \n      skeleton-text \n      [effect]=\"SkeletonEffect\" \n      class=\"project-card-description\" \n    >\n      Description Text\n    </mat-card-subtitle>\n\n    <mat-card-subtitle class=\"project-card-host\">\n        <div \n          skeleton-text \n          [effect]=\"SkeletonEffect\" \n          class=\"host-anchor\" \n        >\n          https://www.fathym.com\n        </div>\n    </mat-card-subtitle>\n\n  </mat-card-header>\n  <mat-card-content class=\"card-content-container\">\n    <div skeleton-block [effect]=\"SkeletonEffect\" class=\"stats-container\">\n    </div>\n\n    <div \n      class=\"promo-container-skeleton\" \n      fxLayout=\"column\" \n      fxLayoutAlign=\"center center\" \n    >\n        \n      <div \n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n      >\n        Access exclusive tools & insights\n      </div>\n\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">emoji_events</mat-icon>\n\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\" >\n          Upgrade to premium now\n        </div>\n      </div>\n    </div>\n\n  </mat-card-content>\n  <mat-card-actions class=\"actions-container-skeleton\" fxLayoutAlign=\"center center\">\n    <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\" action mat-button >\n      <mat-icon skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">outbox</mat-icon>\n      Unpack\n    </div>\n    \n  </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n<ng-container *ngIf=\"!State?.Loading\">\n\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n        <div class=\"round-project-img\" fxLayoutAlign=\"center center\">\n            <mat-icon *ngIf=\"!Image\" class=\"temp-icon\">flutter_dash</mat-icon>\n            <img *ngIf=\"Image\" [src]=\"Image\" [alt]=\"Name\" style=\"width:75px; height:75px\">\n        </div>\n    </div>\n\n    <div class=\"icon-btn-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" >\n      <button *ngIf=\"IsEditable\" mat-icon-button id=\"left-icon\" (click)=\"LeftIconClicked()\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button *ngIf=\"IsShareable\" 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]=\"'https://'+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 class=\"promo-container\" \n          fxLayout=\"column\" \n          fxLayoutAlign=\"center center\" \n          \n        >\n        \n        <div>Access exclusive tools & insights</div>\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <mat-icon class=\"gold-icon\">emoji_events</mat-icon>\n\n          <div class=\"upgrade-text\" (click)=\"UpgradeClicked()\">\n            Upgrade to premium now\n          </div>\n        </div>\n      </div>\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  </ng-container>\n  </mat-card>\n  \n", styles: [".project-info-card{margin:20px;padding:0}.round-project-img{background-color:#dfeff2;width:75px;height:75px;border-radius:40px;text-align:center;margin-top:20px;border:2px solid white}.temp-icon{height:50px;width:50px;font-size:50px}.icon-btn-container{margin:5px}.project-card-header{text-align:center;margin-top:50px}.host-anchor{text-decoration:none;color:#4a918e}.header-img-container{background-color:#a4bab3;height:60px;border-radius:2px 2px 0 0;margin-top:-.5px!important;margin-right:-.5px;justify-content:center}.project-card-name{font-size:17px;font-weight:600}.card-content-container{margin-bottom:0!important}.stats-container{border-top:1px solid #b9dddd}.gold-icon{color:#d4af37}.upgrade-text{font-weight:700;margin-left:10px;cursor:pointer}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.promo-container-skeleton{margin:5px}.actions-container{padding:0!important}.actions-container-skeleton{padding:0!important;border-top:1px solid #b9dddd}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #b9dddd}.skeleton-item{margin:5px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i3$1.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
+ProjectInfoCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProjectInfoCardComponent, deps: [{ token: EaCService }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ProjectInfoCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ProjectInfoCardComponent, selector: "lcu-project-info-card", inputs: { Description: ["description", "Description"], Image: ["image", "Image"], IsEditable: ["is-editable", "IsEditable"], IsShareable: ["is-shareable", "IsShareable"], Name: ["name", "Name"], Subtext: ["subtext", "Subtext"] }, outputs: { LeftClickEvent: "left-click-event", RightClickEvent: "right-click-event" }, ngImport: i0, template: "<mat-card class=\"project-info-card\">\n\n  <!-- SKELETON CONTENT -->\n  <ng-container *ngIf=\"State?.Loading\">\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n      <skeleton-avatar class=\"round-project-img\" [effect]=\"SkeletonEffect\" [size]=\"75\" ></skeleton-avatar >\n  </div>\n\n  <mat-card-header class=\"project-card-header\" fxLayoutAlign=\"center center\">\n\n    <mat-card-title \n      skeleton-text  \n      [effect]=\"SkeletonEffect\"\n      class=\"project-card-name\" \n    >\n      Name of card\n    </mat-card-title>\n\n    <mat-card-subtitle \n      skeleton-text \n      [effect]=\"SkeletonEffect\" \n      class=\"project-card-description\" \n    >\n      Description Text\n    </mat-card-subtitle>\n\n    <mat-card-subtitle class=\"project-card-host\">\n        <div \n          skeleton-text \n          [effect]=\"SkeletonEffect\" \n          class=\"host-anchor\" \n        >\n          https://www.fathym.com\n        </div>\n    </mat-card-subtitle>\n\n  </mat-card-header>\n  <mat-card-content class=\"card-content-container\">\n    <div skeleton-block [effect]=\"SkeletonEffect\" class=\"stats-container\">\n    </div>\n\n    <div \n      class=\"promo-container-skeleton\" \n      fxLayout=\"column\" \n      fxLayoutAlign=\"center center\" \n    >\n        \n      <div \n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n      >\n        Access exclusive tools & insights\n      </div>\n\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">emoji_events</mat-icon>\n\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\" >\n          Upgrade to premium now\n        </div>\n      </div>\n    </div>\n\n  </mat-card-content>\n  <mat-card-actions class=\"actions-container-skeleton\" fxLayoutAlign=\"center center\">\n    <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\" action mat-button >\n      <mat-icon skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">outbox</mat-icon>\n      Unpack\n    </div>\n    \n  </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n<ng-container *ngIf=\"!State?.Loading\">\n\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n        <div class=\"round-project-img\" fxLayoutAlign=\"center center\">\n            <mat-icon *ngIf=\"!Image\" class=\"temp-icon\">flutter_dash</mat-icon>\n            <img *ngIf=\"Image\" [src]=\"Image\" [alt]=\"Name\" style=\"width:75px; height:75px\">\n        </div>\n    </div>\n\n    <div class=\"icon-btn-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" >\n      <button *ngIf=\"IsEditable\" mat-icon-button id=\"left-icon\" (click)=\"LeftIconClicked()\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button *ngIf=\"IsShareable\" 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]=\"'https://'+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 class=\"promo-container\" \n          fxLayout=\"column\" \n          fxLayoutAlign=\"center center\" \n          \n        >\n        \n        <div>Access exclusive tools & insights</div>\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <mat-icon class=\"gold-icon\">emoji_events</mat-icon>\n\n          <div class=\"upgrade-text\" (click)=\"UpgradeClicked()\">\n            Upgrade to premium now\n          </div>\n        </div>\n      </div>\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  </ng-container>\n  </mat-card>\n  \n", styles: [".project-info-card{margin:20px;padding:0}.round-project-img{background-color:#dfeff2;width:75px;height:75px;border-radius:40px;text-align:center;margin-top:20px;border:2px solid white}.temp-icon{height:50px;width:50px;font-size:50px}.icon-btn-container{margin:5px}.project-card-header{text-align:center;margin-top:50px}.host-anchor{text-decoration:none;color:#4a918e}.header-img-container{background-color:#a4bab3;height:60px;border-radius:2px 2px 0 0;margin-top:-.5px!important;margin-right:-.5px;justify-content:center}.project-card-name{font-size:17px;font-weight:600}.card-content-container{margin-bottom:0!important}.stats-container{border-top:1px solid #b9dddd}.gold-icon{color:#d4af37}.upgrade-text{font-weight:700;margin-left:10px;cursor:pointer}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.promo-container-skeleton{margin:5px}.actions-container{padding:0!important}.actions-container-skeleton{padding:0!important;border-top:1px solid #b9dddd}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #b9dddd}.skeleton-item{margin:5px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4$4.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProjectInfoCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lcu-project-info-card', template: "<mat-card class=\"project-info-card\">\n\n  <!-- SKELETON CONTENT -->\n  <ng-container *ngIf=\"State?.Loading\">\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n      <skeleton-avatar class=\"round-project-img\" [effect]=\"SkeletonEffect\" [size]=\"75\" ></skeleton-avatar >\n  </div>\n\n  <mat-card-header class=\"project-card-header\" fxLayoutAlign=\"center center\">\n\n    <mat-card-title \n      skeleton-text  \n      [effect]=\"SkeletonEffect\"\n      class=\"project-card-name\" \n    >\n      Name of card\n    </mat-card-title>\n\n    <mat-card-subtitle \n      skeleton-text \n      [effect]=\"SkeletonEffect\" \n      class=\"project-card-description\" \n    >\n      Description Text\n    </mat-card-subtitle>\n\n    <mat-card-subtitle class=\"project-card-host\">\n        <div \n          skeleton-text \n          [effect]=\"SkeletonEffect\" \n          class=\"host-anchor\" \n        >\n          https://www.fathym.com\n        </div>\n    </mat-card-subtitle>\n\n  </mat-card-header>\n  <mat-card-content class=\"card-content-container\">\n    <div skeleton-block [effect]=\"SkeletonEffect\" class=\"stats-container\">\n    </div>\n\n    <div \n      class=\"promo-container-skeleton\" \n      fxLayout=\"column\" \n      fxLayoutAlign=\"center center\" \n    >\n        \n      <div \n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n      >\n        Access exclusive tools & insights\n      </div>\n\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">emoji_events</mat-icon>\n\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\" >\n          Upgrade to premium now\n        </div>\n      </div>\n    </div>\n\n  </mat-card-content>\n  <mat-card-actions class=\"actions-container-skeleton\" fxLayoutAlign=\"center center\">\n    <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\" action mat-button >\n      <mat-icon skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">outbox</mat-icon>\n      Unpack\n    </div>\n    \n  </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n<ng-container *ngIf=\"!State?.Loading\">\n\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n        <div class=\"round-project-img\" fxLayoutAlign=\"center center\">\n            <mat-icon *ngIf=\"!Image\" class=\"temp-icon\">flutter_dash</mat-icon>\n            <img *ngIf=\"Image\" [src]=\"Image\" [alt]=\"Name\" style=\"width:75px; height:75px\">\n        </div>\n    </div>\n\n    <div class=\"icon-btn-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" >\n      <button *ngIf=\"IsEditable\" mat-icon-button id=\"left-icon\" (click)=\"LeftIconClicked()\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button *ngIf=\"IsShareable\" 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]=\"'https://'+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 class=\"promo-container\" \n          fxLayout=\"column\" \n          fxLayoutAlign=\"center center\" \n          \n        >\n        \n        <div>Access exclusive tools & insights</div>\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <mat-icon class=\"gold-icon\">emoji_events</mat-icon>\n\n          <div class=\"upgrade-text\" (click)=\"UpgradeClicked()\">\n            Upgrade to premium now\n          </div>\n        </div>\n      </div>\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  </ng-container>\n  </mat-card>\n  \n", styles: [".project-info-card{margin:20px;padding:0}.round-project-img{background-color:#dfeff2;width:75px;height:75px;border-radius:40px;text-align:center;margin-top:20px;border:2px solid white}.temp-icon{height:50px;width:50px;font-size:50px}.icon-btn-container{margin:5px}.project-card-header{text-align:center;margin-top:50px}.host-anchor{text-decoration:none;color:#4a918e}.header-img-container{background-color:#a4bab3;height:60px;border-radius:2px 2px 0 0;margin-top:-.5px!important;margin-right:-.5px;justify-content:center}.project-card-name{font-size:17px;font-weight:600}.card-content-container{margin-bottom:0!important}.stats-container{border-top:1px solid #b9dddd}.gold-icon{color:#d4af37}.upgrade-text{font-weight:700;margin-left:10px;cursor:pointer}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.promo-container-skeleton{margin:5px}.actions-container{padding:0!important}.actions-container-skeleton{padding:0!important;border-top:1px solid #b9dddd}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #b9dddd}.skeleton-item{margin:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: EaCService }]; }, propDecorators: { Description: [{
+        }], ctorParameters: function () { return [{ type: EaCService }, { type: i1$4.MatDialog }]; }, propDecorators: { Description: [{
                 type: Input,
                 args: ['description']
             }], Image: [{
@@ -3694,10 +3722,10 @@ class FeedCardSmComponent {
     }
 }
 FeedCardSmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FeedCardSmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedCardSmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FeedCardSmComponent, selector: "lcu-feed-card-sm", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, 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=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\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{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:13px;font-weight:600}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{font-size:10px;text-decoration:none;color:#000}.action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2$1.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"] }] });
+FeedCardSmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FeedCardSmComponent, selector: "lcu-feed-card-sm", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, 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=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\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: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2$1.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: FeedCardSmComponent, decorators: [{
             type: 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=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\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{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:13px;font-weight:600}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{font-size:10px;text-decoration:none;color:#000}.action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"] }]
+            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=\"FeedItem.Title\">\n        {{ FeedItem.Title }}\n      </mat-card-title>\n\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n\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: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { FeedItem: [{
                 type: Input,
                 args: ['feed-item']
@@ -3766,10 +3794,10 @@ class GhControlComponent {
     }
 }
 GhControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GhControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GhControlComponent, selector: "lcu-gh-control", ngImport: i0, 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{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:13px;font-weight:600}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{font-size:10px;text-decoration:none;color:#000}.action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatLabel, selector: "mat-label" }, { 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
+GhControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GhControlComponent, selector: "lcu-gh-control", ngImport: i0, template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatLabel, selector: "mat-label" }, { 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GhControlComponent, decorators: [{
             type: 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{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:13px;font-weight:600}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{font-size:10px;text-decoration:none;color:#000}.action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"] }]
+            args: [{ selector: 'lcu-gh-control', template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}.gh-icon{width:60px;height:60px;font-size:60px;text-align:center}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class MainFeedCardComponent {
@@ -3844,10 +3872,10 @@ class MainFeedCardComponent {
     }
 }
 MainFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-MainFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainFeedCardComponent, selector: "lcu-main-feed-card", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host .social-card{margin:20px;padding:15px 5px}:host mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host .main-slot-container{padding:10px}:host .slot-header{align-items:center}:host .slot-content{width:100%}:host .slot-name{font-size:13px;font-weight:600}:host .slot-description{font-size:12px;margin-right:10px}:host .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MainFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainFeedCardComponent, selector: "lcu-main-feed-card", inputs: { FeedItem: ["feed-item", "FeedItem"] }, ngImport: i0, template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainFeedCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-main-feed-card', template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host .social-card{margin:20px;padding:15px 5px}:host mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host .main-slot-container{padding:10px}:host .slot-header{align-items:center}:host .slot-content{width:100%}:host .slot-name{font-size:13px;font-weight:600}:host .slot-description{font-size:12px;margin-right:10px}:host .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'lcu-main-feed-card', template: "<mat-card class=\"social-card\">\n  <mat-card-header>\n    <img\n      mat-card-avatar\n      class=\"example-header-image\"\n      [src]=\"FeedItem.Avatar\"\n      *ngIf=\"FeedItem.Avatar\"\n    />\n\n    <mat-card-title *ngIf=\"FeedItem.Title\">{{ FeedItem.Title }}</mat-card-title>\n\n    <mat-card-subtitle>\n      <div *ngIf=\"FeedItem.Subtitle\">{{ FeedItem.Subtitle }}</div>\n      <div *ngIf=\"FeedItem.Status\">\n        <mat-icon\n          *ngIf=\"Icon\"\n          [style.color]=\"IconColor\"\n          [class.spin]=\"FeedItem.Status?.Code == 2\"\n        >\n          {{ Icon }}\n        </mat-icon>\n\n        <span *ngIf=\"FeedItem.Timestamp\">\n          {{ CalculateTimelapse(FeedItem.Timestamp) }}\n        </span>\n      </div>\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <div *ngIf=\"!FeedItem.IsShortForm\">\n    <!-- <div class=\"feed-card-container\">\n        <div class=\"feed-card-main-content\">\n            The tab content (only 1 'tab' for now)...  So really we don't need to worry about tabs until a future iteration\n\n            The tabs property will contain a data structure that will vary by the FeedItem.Type...  That structure can be used to render the content\n        </div>\n    </div> -->\n  </div>\n\n  <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n    <div fxFlex></div>\n\n    <ng-container *ngFor=\"let action of FeedItem.Actions\">\n      <button mat-button [color]=\"action.Color\" (click)=\"HandleAction(action)\">\n        <mat-icon *ngIf=\"action.Icon\">{{ action.Icon }}</mat-icon>\n\n        {{ action.Text }}\n      </button>\n    </ng-container>\n  </mat-card-actions>\n</mat-card>\n", styles: [":host :host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host :host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host :host ::ng-deep .main-slot-container{padding:10px}:host :host ::ng-deep .slot-header{align-items:center}:host :host ::ng-deep .slot-content{width:100%}:host :host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host :host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host :host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host :host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}:host .example-header-image{background-size:cover}:host .mat-icon{display:inline-flex;vertical-align:middle}:host .mat-icon.spin{animation:rotate 1s ease-in-out infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: EaCService }]; }, propDecorators: { FeedItem: [{
                 type: Input,
                 args: ['feed-item']
@@ -3964,7 +3992,7 @@ class SecurityToggleComponent {
     }
 }
 SecurityToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SecurityToggleComponent, deps: [{ token: EaCService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-SecurityToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SecurityToggleComponent, selector: "lcu-security-toggle", inputs: { EditingApplication: ["editing-application", "EditingApplication"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\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 fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i4.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i3$1.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatSuffix, selector: "[matSuffix]" }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }] });
+SecurityToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SecurityToggleComponent, selector: "lcu-security-toggle", inputs: { EditingApplication: ["editing-application", "EditingApplication"] }, outputs: { SaveFormEvent: "save-form-event" }, ngImport: i0, template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\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 fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i4.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatSuffix, selector: "[matSuffix]" }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SecurityToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lcu-security-toggle', template: "<form class=\"security-form\" [formGroup]=\"SecurityFormGroup\" (ngSubmit)=\"SecuritySubmit()\">\n    <mat-card class=\"flow-card\">\n\n      <!-- SKELETON LOADING -->\n      <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-header fxLayoutAlign=\"space-between center\">\n          <mat-card-title \n            skeleton-text \n            [effect]=\"SkeletonEffect\" \n          > \n            Security Settings \n          </mat-card-title>\n          <div fxLayoutAlign=\"space-around center\">\n            <div\n              skeleton-text \n              [effect]=\"SkeletonEffect\"   \n            >\n            XXX\n            </div>\n\n              <mat-icon\n              skeleton-text \n              [effect]=\"SkeletonEffect\" \n              >\n                info_outline\n              </mat-icon>\n            </div>\n        </mat-card-header>\n\n          <mat-card-actions fxLayoutAlign=\"center center\">\n\n            <div \n              fxFlex=\"100%\" \n              skeleton-text \n              [effect]=\"SkeletonEffect\"\n              fxLayoutAlign=\"center center\" \n            >\n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n              >\n                save\n              </mat-icon>\n\n              Save Settings\n          </div>\n\n          </mat-card-actions>\n      </ng-container>\n      <!-- END SKELETON LOADING -->\n\n      <!-- BEGIN ACTUAL CONTENT -->\n\n      <ng-container *ngIf=\"!State?.Loading\">\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 fxLayoutAlign=\"center center\">\n\n            <button \n              mat-raised-button \n              type=\"submit\" \n              fxFlex=\"100%\" \n              color=\"primary\" \n              [disabled]=\"!SecurityFormGroup.valid || !SecurityFormGroup.dirty\">\n              <mat-icon>save</mat-icon>\n              Save Settings\n            </button>\n\n          </mat-card-actions>\n        </ng-container>\n    </mat-card>\n</form>\n", styles: ["::ng-deep .mat-tooltip{color:#000!important}.flow-card{margin:32px 20px}\n"] }]
@@ -5173,7 +5201,7 @@ class BreadcrumbComponent {
     ngOnInit() {
         this.handleStateChange().then((eac) => { });
         // console.log("state: ", this.State)
-        // console.log("selected enterprise: ", this.Enterprise)
+        console.log("selected enterprise: ", this.Enterprise);
         // console.log('Selected project: ', this.SelectedProject.Project);
         // console.log('SelectedRoute:', this.SelectedRoute);
     }
@@ -5183,7 +5211,7 @@ class BreadcrumbComponent {
     async handleStateChange() { }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbComponent, selector: "lcu-breadcrumb", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], ProjectLookup: ["project-lookup", "ProjectLookup"], SelectedRoute: ["selected-route", "SelectedRoute"] }, ngImport: i0, template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading && Enterprise\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"], components: [{ type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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: i4$4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i8$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbComponent, selector: "lcu-breadcrumb", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], ProjectLookup: ["project-lookup", "ProjectLookup"], SelectedRoute: ["selected-route", "SelectedRoute"] }, ngImport: i0, template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading && Enterprise\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"], components: [{ type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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: i4$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i8$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lcu-breadcrumb', template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading && Enterprise\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"] }]
@@ -5555,10 +5583,10 @@ class SkeletonFeedCardComponent {
     }
 }
 SkeletonFeedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SkeletonFeedCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkeletonFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SkeletonFeedCardComponent, selector: "lcu-skeleton-feed-card", ngImport: i0, template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", styles: [".social-card{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:13px;font-weight:600}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{font-size:10px;text-decoration:none;color:#000}.action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i3$1.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i3$1.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+SkeletonFeedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SkeletonFeedCardComponent, selector: "lcu-skeleton-feed-card", ngImport: i0, template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i4$4.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SkeletonFeedCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-skeleton-feed-card', template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", styles: [".social-card{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:13px;font-weight:600}.slot-description{font-size:12px;margin-right:10px}.slot-action-anchor{font-size:10px;text-decoration:none;color:#000}.action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"] }]
+            args: [{ selector: 'lcu-skeleton-feed-card', template: "<mat-card class=\"social-card\">\n    <mat-card-header>\n      \n      <skeleton-avatar mat-card-avatar size=\"100\" [effect]=\"SkeletonEffect\"></skeleton-avatar>\n  \n      <mat-card-title skeleton-text [effect]=\"SkeletonEffect\">FeedItem Title</mat-card-title>\n  \n      <mat-card-subtitle>\n        <div skeleton-text [effect]=\"SkeletonEffect\">FeedItem Subtitle</div>\n        <div >\n          <mat-icon  skeleton-text [effect]=\"SkeletonEffect\">check</mat-icon>\n  \n          <div skeleton-text [effect]=\"SkeletonEffect\">Timestamp</div>\n        </div>\n      </mat-card-subtitle>\n    </mat-card-header>\n  \n    <mat-card-content>\n        <div skeleton-text [effect]=\"SkeletonEffect\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet\n            ante dui. Praesent ut aliquam metus. Phasellus consectetur non eros eu\n            gravida. Vestibulum faucibus laoreet leo, ac molestie felis tincidunt\n            semper. Vivamus lorem ipsum, sagittis nec blandit sed, accumsan sed\n            dolor. Etiam tincidunt vel ligula ut malesuada. Nulla sit amet fermentum\n            libero. Quisque magna tellus, pellentesque in convallis vitae, aliquet\n            et orci. Pellentesque commodo ante id est viverra posuere ac vitae\n            ligula. Ut sed ullamcorper purus. Integer sit amet lorem eros.\n        </div>\n    </mat-card-content>\n  \n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n        <div skeleton-text [effect]=\"SkeletonEffect\">Button Text</div>\n    </mat-card-actions>\n  </mat-card>\n", styles: [":host ::ng-deep .social-card{margin:20px;padding:15px 5px}:host ::ng-deep mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}:host ::ng-deep .main-slot-container{padding:10px}:host ::ng-deep .slot-header{align-items:center}:host ::ng-deep .slot-content{width:100%}:host ::ng-deep .slot-name{font-size:13px;font-weight:600}:host ::ng-deep .slot-description{font-size:12px;margin-right:10px}:host ::ng-deep .slot-action-anchor{font-size:10px;text-decoration:none;color:#000}:host ::ng-deep .action-icon{height:25px;width:25px;font-size:25px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class ApplicationsFlowModule {
@@ -5621,7 +5649,8 @@ ApplicationsFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         EditApplicationDialogComponent,
         NewApplicationDialogComponent,
         ProcessorDetailsDialogComponent,
-        SkeletonFeedCardComponent], imports: [ClipboardModule,
+        SkeletonFeedCardComponent,
+        UpgradeDialogComponent], imports: [ClipboardModule,
         FathymSharedModule,
         FormsModule,
         ReactiveFormsModule,
@@ -5676,7 +5705,8 @@ ApplicationsFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         EditApplicationDialogComponent,
         NewApplicationDialogComponent,
         ProcessorDetailsDialogComponent,
-        SkeletonFeedCardComponent] });
+        SkeletonFeedCardComponent,
+        UpgradeDialogComponent] });
 ApplicationsFlowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ApplicationsFlowModule, imports: [[
             ClipboardModule,
             FathymSharedModule,
@@ -5738,7 +5768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         EditApplicationDialogComponent,
                         NewApplicationDialogComponent,
                         ProcessorDetailsDialogComponent,
-                        SkeletonFeedCardComponent
+                        SkeletonFeedCardComponent,
+                        UpgradeDialogComponent
                     ],
                     imports: [
                         ClipboardModule,
@@ -5798,7 +5829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         EditApplicationDialogComponent,
                         NewApplicationDialogComponent,
                         ProcessorDetailsDialogComponent,
-                        SkeletonFeedCardComponent
+                        SkeletonFeedCardComponent,
+                        UpgradeDialogComponent
                     ],
                     entryComponents: [
                         ApplicationsFlowProjectsElementComponent,
@@ -5886,5 +5918,5 @@ class FormModel {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsModel, AnalyticsCardComponent, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, AppsFlowComponent, BaseFormComponent, BaseFormConfigModel, BaseFormTestComponent, BreadcrumbComponent, BuildPipelineDialogComponent, BuildPipelineFormComponent, BuildsComponent, CardCarouselComponent, CardFormConfigModel, CreateProjectWizardComponent, CustomDomainDialogComponent, DFSModifiersComponent, DevOpsComponent, DevSettingsPresetModel, DevopsSourceControlFormComponent, DomainModel, DomainsComponent, DynamicTabsComponent, DynamicTabsModel, EaCService, EditApplicationDialogComponent, EditApplicationFormComponent, FeedCardSmComponent, FeedItem, FeedItemAction, FeedItemContributor, FeedItemTab, FlowToolComponent, FormActionsModel, FormCardComponent, FormModel, FormValuesModel, FormsService, GhControlComponent, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HeaderComponent, HostingDetailsFormGroupComponent, MainFeedCardComponent, NPMService, NewApplicationDialogComponent, NpmPackageSelectComponent, ProcessorDetailsDialogComponent, ProcessorDetailsFormComponent, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectInfoCardComponent, ProjectItemsComponent, ProjectNameComponent, ProjectService, ProjectTabsComponent, RecentActivitiesComponent, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SecurityToggleComponent, SkeletonFeedCardComponent, SlottedCardComponent, SourceControlDialogComponent, SourceControlFormComponent, SourceControlFormControlsComponent, ThreeColumnComponent, TwoColumnHeaderComponent, UnpackLowCodeUnitRequest, UserFeedResponse };
+export { ActionsModel, AnalyticsCardComponent, ApplicationsFlowModule, ApplicationsFlowProjectsContext, ApplicationsFlowProjectsElementComponent, ApplicationsFlowProjectsElementState, ApplicationsFlowService, ApplicationsFlowState, ApplicationsFlowStateContext, AppsFlowComponent, BaseFormComponent, BaseFormConfigModel, BaseFormTestComponent, BreadcrumbComponent, BuildPipelineDialogComponent, BuildPipelineFormComponent, BuildsComponent, CardCarouselComponent, CardFormConfigModel, CreateProjectWizardComponent, CustomDomainDialogComponent, DFSModifiersComponent, DevOpsComponent, DevSettingsPresetModel, DevopsSourceControlFormComponent, DomainModel, DomainsComponent, DynamicTabsComponent, DynamicTabsModel, EaCService, EditApplicationDialogComponent, EditApplicationFormComponent, FeedCardSmComponent, FeedItem, FeedItemAction, FeedItemContributor, FeedItemTab, FlowToolComponent, FormActionsModel, FormCardComponent, FormModel, FormValuesModel, FormsService, GhControlComponent, GitAuthComponent, GitHubBranch, GitHubOrganization, GitHubRepository, GitHubSetupState, GitHubWorkflowRun, HeaderComponent, HostingDetailsFormGroupComponent, MainFeedCardComponent, NPMService, NewApplicationDialogComponent, NpmPackageSelectComponent, ProcessorDetailsDialogComponent, ProcessorDetailsFormComponent, ProjectActionsModel, ProjectHostingDetails, ProjectHostingOption, ProjectHostingOptionInput, ProjectInfoCardComponent, ProjectItemsComponent, ProjectNameComponent, ProjectService, ProjectTabsComponent, RecentActivitiesComponent, RootDirectoryComponent, SELECTOR_APPLICATIONS_FLOW_PROJECTS_ELEMENT, SaveApplicationAsCodeEventRequest, SaveDFSModifierEventRequest, SaveEnvironmentAsCodeEventRequest, SaveProjectAsCodeEventRequest, SecurityToggleComponent, SkeletonFeedCardComponent, SlottedCardComponent, SourceControlDialogComponent, SourceControlFormComponent, SourceControlFormControlsComponent, ThreeColumnComponent, TwoColumnHeaderComponent, UnpackLowCodeUnitRequest, UpgradeDialogComponent, UserFeedResponse };
 //# sourceMappingURL=lowcodeunit-applications-flow-common.mjs.map