@lowcodeunit/applications-flow-common 1.33.181-lets-get-social-ish → 1.33.182-lets-get-social-ish

package/esm2020/lib/elements/project-info-card/project-info-card.component.mjs

@@ -31,10 +31,10 @@ export class ProjectInfoCardComponent {
     }
 }
 ProjectInfoCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProjectInfoCardComponent, deps: [{ token: i1.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:.5em;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 #d3d3d3}.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 #d3d3d3}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3}.skeleton-item{margin:5px}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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: i7.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.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
+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:.5em;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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: ["size", "color", "showIcon", "iconColor", "borderRadius", "effect"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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: i7.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.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2.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:.5em;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 #d3d3d3}.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 #d3d3d3}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3}.skeleton-item{margin:5px}\n"] }]
+            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:.5em;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: i1.EaCService }]; }, propDecorators: { Description: [{
                 type: Input,
                 args: ['description']

package/esm2020/lib/elements/slotted-card/slotted-card.component.mjs

@@ -23,10 +23,10 @@ export class SlottedCardComponent {
     }
 }
 SlottedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardComponent, deps: [{ token: i1.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=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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\">Descrption text</div>\n\n        <div  class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      \n\n        <div class=\"slot-secondary\" fxLayout=\"row\" 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\n            class=\"slot-actions-container\"\n            fxLayout=\"row\"\n            \n          >\n            \n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n                class=\"skeleton-item\"\n              >\n                edit\n              </mat-icon>\n            \n          </div>\n\n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">{{ SecondarySlotDescription }}</div>\n        </div>\n    </mat-card-content>\n\n    <mat-card-actions  fxLayoutAlign=\"center center\">\n      <div\n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n        \n        >{{ ActionText }}\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    <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:25px;margin-bottom:0!important}.header-description{background-color:#d3d3d3;padding:10px;margin-left:-2px}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}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i3.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.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.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i7.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i5.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: i2.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=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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:25px;margin-bottom:0!important}.header-description{background-color:#b9dddd;padding:10px;margin-left:-2px}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}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i3.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.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.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i7.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i5.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: i2.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=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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\">Descrption text</div>\n\n        <div  class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      \n\n        <div class=\"slot-secondary\" fxLayout=\"row\" 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\n            class=\"slot-actions-container\"\n            fxLayout=\"row\"\n            \n          >\n            \n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n                class=\"skeleton-item\"\n              >\n                edit\n              </mat-icon>\n            \n          </div>\n\n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">{{ SecondarySlotDescription }}</div>\n        </div>\n    </mat-card-content>\n\n    <mat-card-actions  fxLayoutAlign=\"center center\">\n      <div\n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n        \n        >{{ ActionText }}\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    <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:25px;margin-bottom:0!important}.header-description{background-color:#d3d3d3;padding:10px;margin-left:-2px}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}\n"] }]
+            args: [{ selector: 'lcu-slotted-card', template: "<mat-card class=\"col-info-card\">\n  <mat-card-header class=\"slotted-card-header\" fxLayoutAlign=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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:25px;margin-bottom:0!important}.header-description{background-color:#b9dddd;padding:10px;margin-left:-2px}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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EaCService }]; }, propDecorators: { ActionText: [{
                 type: Input,
                 args: ['action-text']
@@ -49,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 type: Output,
                 args: ['main-action-clicked']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xvdHRlZC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbW1vbi9zcmMvbGliL2VsZW1lbnRzL3Nsb3R0ZWQtY2FyZC9zbG90dGVkLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tbW9uL3NyYy9saWIvZWxlbWVudHMvc2xvdHRlZC1jYXJkL3Nsb3R0ZWQtY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFTL0UsTUFBTSxPQUFPLG9CQUFvQjtJQThCL0IsWUFBc0IsTUFBa0I7UUFBbEIsV0FBTSxHQUFOLE1BQU0sQ0FBWTtRQUN0QyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxZQUFZLENBQUM7UUFDMUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxNQUFNLENBQUM7SUFDL0IsQ0FBQztJQVZELElBQVcsS0FBSztRQUNkLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDM0IsQ0FBQztJQVVNLFFBQVE7SUFDZixDQUFDO0lBRU0sb0JBQW9CO1FBQ3pCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7aUhBeENVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLGlhQ1RqQyxzMEdBa0hBOzJGRHpHYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0Usa0JBQWtCO2lHQU9yQixVQUFVO3NCQURoQixLQUFLO3VCQUFDLGFBQWE7Z0JBSWIsVUFBVTtzQkFEaEIsS0FBSzt1QkFBQyxhQUFhO2dCQUliLElBQUk7c0JBRFYsS0FBSzt1QkFBQyxNQUFNO2dCQUlOLG1CQUFtQjtzQkFEekIsS0FBSzt1QkFBQyx1QkFBdUI7Z0JBSXZCLEtBQUs7c0JBRFgsS0FBSzt1QkFBQyxPQUFPO2dCQUlQLHdCQUF3QjtzQkFEOUIsS0FBSzt1QkFBQyw0QkFBNEI7Z0JBSTVCLGlCQUFpQjtzQkFEdkIsTUFBTTt1QkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFYUNTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvZWFjLnNlcnZpY2UnO1xuaW1wb3J0IHsgQXBwbGljYXRpb25zRmxvd1N0YXRlIH0gZnJvbSAnLi4vLi4vc3RhdGUvYXBwbGljYXRpb25zLWZsb3cuc3RhdGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsY3Utc2xvdHRlZC1jYXJkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Nsb3R0ZWQtY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Nsb3R0ZWQtY2FyZC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFNsb3R0ZWRDYXJkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoJ2FjdGlvbi10ZXh0JykgXG4gIHB1YmxpYyBBY3Rpb25UZXh0OiBzdHJpbmc7XG5cbiAgQElucHV0KCdhY3Rpb24tcGF0aCcpXG4gIHB1YmxpYyBBY3Rpb25QYXRoOiBzdHJpbmc7XG5cbiAgQElucHV0KCdpY29uJykgXG4gIHB1YmxpYyBJY29uOiBzdHJpbmc7XG5cbiAgQElucHV0KCdtYWluLXNsb3QtZGVzY3JpcHRpb24nKSBcbiAgcHVibGljIE1haW5TbG90RGVzY3JpcHRpb246IHN0cmluZztcblxuICBASW5wdXQoJ3RpdGxlJykgXG4gIHB1YmxpYyBUaXRsZTogc3RyaW5nO1xuXG4gIEBJbnB1dCgnc2Vjb25kYXJ5LXNsb3QtZGVzY3JpcHRpb24nKSBcbiAgcHVibGljIFNlY29uZGFyeVNsb3REZXNjcmlwdGlvbjogc3RyaW5nO1xuXG4gIEBPdXRwdXQoJ21haW4tYWN0aW9uLWNsaWNrZWQnKSBcbiAgcHVibGljIE1haW5BY3Rpb25DbGlja2VkOiBFdmVudEVtaXR0ZXI8e30+O1xuXG4gIHB1YmxpYyBnZXQgU3RhdGUoKTogQXBwbGljYXRpb25zRmxvd1N0YXRle1xuICAgIHJldHVybiB0aGlzLmVhY1N2Yy5TdGF0ZTtcbiAgfVxuXG4gIHB1YmxpYyBTa2VsZXRvbkVmZmVjdDogc3RyaW5nO1xuXG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGVhY1N2YzogRWFDU2VydmljZSkgeyBcbiAgICB0aGlzLk1haW5BY3Rpb25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjtcbiAgICB0aGlzLlNrZWxldG9uRWZmZWN0ID0gJ3dhdmUnO1xuICB9XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgcHVibGljIE1haW5BY3Rpb25DbGlja0V2ZW50KCl7XG4gICAgdGhpcy5NYWluQWN0aW9uQ2xpY2tlZC5lbWl0KHt9KTtcbiAgfVxuXG59XG4iLCI8bWF0LWNhcmQgY2xhc3M9XCJjb2wtaW5mby1jYXJkXCI+XG4gIDxtYXQtY2FyZC1oZWFkZXIgY2xhc3M9XCJzbG90dGVkLWNhcmQtaGVhZGVyXCIgZnhMYXlvdXRBbGlnbj1cInN0YXJ0IGNlbnRlclwiPlxuICAgIDwhLS0gSG93IGFyZSB0aGVzZSB0d28gZ2V0dGluZyBzd2l0Y2hlZD8/IC0tPlxuICAgIDxtYXQtaWNvbiBtYXQtY2FyZC1hdmF0YXIgY2xhc3M9XCJoZWFkZXItaWNvblwiPnt7IEljb24gfX08L21hdC1pY29uPlxuICAgIDxtYXQtY2FyZC10aXRsZSBjbGFzcz1cImNhcmQtdGl0bGVcIj57eyBUaXRsZSB9fTwvbWF0LWNhcmQtdGl0bGU+XG4gIDwvbWF0LWNhcmQtaGVhZGVyPlxuXG4gIDwhLS0gU0tFTEVUT04gQ09OVEVOVCAtLT5cblxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiU3RhdGU/LkxvYWRpbmdcIj5cbiAgICA8bWF0LWNhcmQtY29udGVudD5cbiAgICAgIDxkaXYgY2xhc3M9XCJzbG90LW1haW4tY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgc2tlbGV0b24tdGV4dCBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCIgY2xhc3M9XCJoZWFkZXItZGVzY3JpcHRpb25cIj5EZXNjcnB0aW9uIHRleHQ8L2Rpdj5cblxuICAgICAgICA8ZGl2ICBjbGFzcz1cInNsb3QtbWFpblwiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNrZWxldG9uLWJsb2NrIFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG5cbiAgICAgIFxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzbG90LXNlY29uZGFyeVwiIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cInNwYWNlLWJldHdlZW4gY2VudGVyXCI+XG5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1oZWFkZXItY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1oZWFkZXJcIj5cbiAgICAgICAgICAgICAgPGRpdiBza2VsZXRvbi10ZXh0IFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIiBjbGFzcz1cInNrZWxldG9uLWl0ZW1cIj5cbiAgICAgICAgICAgICAgICBOYW1lIG9mIHRoZSBjb250ZW50XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgc2tlbGV0b24tdGV4dCBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCIgY2xhc3M9XCJza2VsZXRvbi1pdGVtXCI+XG4gICAgICAgICAgICAgIERlc2NyaXB0aW9uXG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwic2xvdC1hY3Rpb25zLWNvbnRhaW5lclwiXG4gICAgICAgICAgICBmeExheW91dD1cInJvd1wiXG4gICAgICAgICAgICBcbiAgICAgICAgICA+XG4gICAgICAgICAgICBcbiAgICAgICAgICAgICAgPG1hdC1pY29uIFxuICAgICAgICAgICAgICAgIHNrZWxldG9uLXRleHQgXG4gICAgICAgICAgICAgICAgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiIFxuICAgICAgICAgICAgICAgIGNsYXNzPVwic2tlbGV0b24taXRlbVwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICBlZGl0XG4gICAgICAgICAgICAgIDwvbWF0LWljb24+XG4gICAgICAgICAgICBcbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2ICpuZ0lmPVwiU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uXCIgY2xhc3M9XCJzbG90LXNlY29uZGFyeS1jb250YWluZXJcIj5cbiAgICAgICAgICA8ZGl2IHNrZWxldG9uLXRleHQgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiIGNsYXNzPVwiaGVhZGVyLWRlc2NyaXB0aW9uXCI+e3sgU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uIH19PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbWF0LWNhcmQtY29udGVudD5cblxuICAgIDxtYXQtY2FyZC1hY3Rpb25zICBmeExheW91dEFsaWduPVwiY2VudGVyIGNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBza2VsZXRvbi10ZXh0IFxuICAgICAgICBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCJcbiAgICAgICAgY2xhc3M9XCJza2VsZXRvbi1pdGVtXCJcbiAgICAgICAgXG4gICAgICAgID57eyBBY3Rpb25UZXh0IH19XG4gICAgPC9kaXY+XG4gICAgICBcbiAgICA8L21hdC1jYXJkLWFjdGlvbnM+XG4gIDwvbmctY29udGFpbmVyPlxuICA8IS0tIEVORCBTS0VMRVRPTiBDT05URU5UIC0tPlxuXG4gIDwhLS0gQUNUVUFMIENPTlRFTlQgLS0+XG5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFTdGF0ZT8uTG9hZGluZ1wiPlxuICAgIDxtYXQtY2FyZC1jb250ZW50PlxuICAgICAgPGRpdiBjbGFzcz1cInNsb3QtbWFpbi1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiPnt7IE1haW5TbG90RGVzY3JpcHRpb24gfX08L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1tYWluXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2ICpuZ0lmPVwiU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uXCIgY2xhc3M9XCJzbG90LXNlY29uZGFyeS1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiPnt7IFNlY29uZGFyeVNsb3REZXNjcmlwdGlvbiB9fTwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzbG90LXNlY29uZGFyeVwiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzZWNvbmRhcnldXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbWF0LWNhcmQtY29udGVudD5cblxuICAgIDxtYXQtY2FyZC1hY3Rpb25zICpuZ0lmPVwiQWN0aW9uVGV4dFwiIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXJcIj5cbiAgICAgIDxhXG4gICAgICAgIG1hdC1idXR0b25cbiAgICAgICAgKm5nSWY9XCJBY3Rpb25QYXRoXCJcbiAgICAgICAgY2xhc3M9XCJzbG90dGVkLWNhcmQtYWN0aW9uLWJ0blwiXG4gICAgICAgIFtocmVmXT1cIkFjdGlvblBhdGhcIlxuICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICA+e3sgQWN0aW9uVGV4dCB9fVxuICAgICAgPC9hPlxuXG4gICAgICA8YVxuICAgICAgICBtYXQtYnV0dG9uXG4gICAgICAgICpuZ0lmPVwiIUFjdGlvblBhdGhcIlxuICAgICAgICBjbGFzcz1cInNsb3R0ZWQtY2FyZC1hY3Rpb24tYnRuXCJcbiAgICAgICAgKGNsaWNrKT1cIk1haW5BY3Rpb25DbGlja0V2ZW50KClcIlxuICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgPlxuICAgICAgICB7eyBBY3Rpb25UZXh0IH19XG4gICAgICA8L2E+XG4gICAgPC9tYXQtY2FyZC1hY3Rpb25zPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvbWF0LWNhcmQ+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xvdHRlZC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbW1vbi9zcmMvbGliL2VsZW1lbnRzL3Nsb3R0ZWQtY2FyZC9zbG90dGVkLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tbW9uL3NyYy9saWIvZWxlbWVudHMvc2xvdHRlZC1jYXJkL3Nsb3R0ZWQtY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFTL0UsTUFBTSxPQUFPLG9CQUFvQjtJQThCL0IsWUFBc0IsTUFBa0I7UUFBbEIsV0FBTSxHQUFOLE1BQU0sQ0FBWTtRQUN0QyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxZQUFZLENBQUM7UUFDMUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxNQUFNLENBQUM7SUFDL0IsQ0FBQztJQVZELElBQVcsS0FBSztRQUNkLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDM0IsQ0FBQztJQVVNLFFBQVE7SUFDZixDQUFDO0lBRU0sb0JBQW9CO1FBQ3pCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7aUhBeENVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLGlhQ1RqQyx3c0dBMkdBOzJGRGxHYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0Usa0JBQWtCO2lHQU9yQixVQUFVO3NCQURoQixLQUFLO3VCQUFDLGFBQWE7Z0JBSWIsVUFBVTtzQkFEaEIsS0FBSzt1QkFBQyxhQUFhO2dCQUliLElBQUk7c0JBRFYsS0FBSzt1QkFBQyxNQUFNO2dCQUlOLG1CQUFtQjtzQkFEekIsS0FBSzt1QkFBQyx1QkFBdUI7Z0JBSXZCLEtBQUs7c0JBRFgsS0FBSzt1QkFBQyxPQUFPO2dCQUlQLHdCQUF3QjtzQkFEOUIsS0FBSzt1QkFBQyw0QkFBNEI7Z0JBSTVCLGlCQUFpQjtzQkFEdkIsTUFBTTt1QkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFYUNTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvZWFjLnNlcnZpY2UnO1xuaW1wb3J0IHsgQXBwbGljYXRpb25zRmxvd1N0YXRlIH0gZnJvbSAnLi4vLi4vc3RhdGUvYXBwbGljYXRpb25zLWZsb3cuc3RhdGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsY3Utc2xvdHRlZC1jYXJkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Nsb3R0ZWQtY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Nsb3R0ZWQtY2FyZC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFNsb3R0ZWRDYXJkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoJ2FjdGlvbi10ZXh0JykgXG4gIHB1YmxpYyBBY3Rpb25UZXh0OiBzdHJpbmc7XG5cbiAgQElucHV0KCdhY3Rpb24tcGF0aCcpXG4gIHB1YmxpYyBBY3Rpb25QYXRoOiBzdHJpbmc7XG5cbiAgQElucHV0KCdpY29uJykgXG4gIHB1YmxpYyBJY29uOiBzdHJpbmc7XG5cbiAgQElucHV0KCdtYWluLXNsb3QtZGVzY3JpcHRpb24nKSBcbiAgcHVibGljIE1haW5TbG90RGVzY3JpcHRpb246IHN0cmluZztcblxuICBASW5wdXQoJ3RpdGxlJykgXG4gIHB1YmxpYyBUaXRsZTogc3RyaW5nO1xuXG4gIEBJbnB1dCgnc2Vjb25kYXJ5LXNsb3QtZGVzY3JpcHRpb24nKSBcbiAgcHVibGljIFNlY29uZGFyeVNsb3REZXNjcmlwdGlvbjogc3RyaW5nO1xuXG4gIEBPdXRwdXQoJ21haW4tYWN0aW9uLWNsaWNrZWQnKSBcbiAgcHVibGljIE1haW5BY3Rpb25DbGlja2VkOiBFdmVudEVtaXR0ZXI8e30+O1xuXG4gIHB1YmxpYyBnZXQgU3RhdGUoKTogQXBwbGljYXRpb25zRmxvd1N0YXRle1xuICAgIHJldHVybiB0aGlzLmVhY1N2Yy5TdGF0ZTtcbiAgfVxuXG4gIHB1YmxpYyBTa2VsZXRvbkVmZmVjdDogc3RyaW5nO1xuXG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGVhY1N2YzogRWFDU2VydmljZSkgeyBcbiAgICB0aGlzLk1haW5BY3Rpb25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjtcbiAgICB0aGlzLlNrZWxldG9uRWZmZWN0ID0gJ3dhdmUnO1xuICB9XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgcHVibGljIE1haW5BY3Rpb25DbGlja0V2ZW50KCl7XG4gICAgdGhpcy5NYWluQWN0aW9uQ2xpY2tlZC5lbWl0KHt9KTtcbiAgfVxuXG59XG4iLCI8bWF0LWNhcmQgY2xhc3M9XCJjb2wtaW5mby1jYXJkXCI+XG4gIDxtYXQtY2FyZC1oZWFkZXIgY2xhc3M9XCJzbG90dGVkLWNhcmQtaGVhZGVyXCIgZnhMYXlvdXRBbGlnbj1cInN0YXJ0IGNlbnRlclwiPlxuICAgIDwhLS0gSG93IGFyZSB0aGVzZSB0d28gZ2V0dGluZyBzd2l0Y2hlZD8/IC0tPlxuICAgIDxtYXQtaWNvbiBtYXQtY2FyZC1hdmF0YXIgY2xhc3M9XCJoZWFkZXItaWNvblwiPnt7IEljb24gfX08L21hdC1pY29uPlxuICAgIDxtYXQtY2FyZC10aXRsZSBjbGFzcz1cImNhcmQtdGl0bGVcIj57eyBUaXRsZSB9fTwvbWF0LWNhcmQtdGl0bGU+XG4gIDwvbWF0LWNhcmQtaGVhZGVyPlxuXG4gIDwhLS0gU0tFTEVUT04gQ09OVEVOVCAtLT5cblxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiU3RhdGU/LkxvYWRpbmdcIj5cbiAgICA8bWF0LWNhcmQtY29udGVudD5cbiAgICAgIDxkaXYgY2xhc3M9XCJzbG90LW1haW4tY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgc2tlbGV0b24tdGV4dCBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCIgY2xhc3M9XCJoZWFkZXItZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICBEZXNjcnB0aW9uIHRleHRcbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNsb3QtbWFpblwiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNrZWxldG9uLWJsb2NrIFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJzbG90LXNlY29uZGFyeVwiXG4gICAgICAgIGZ4TGF5b3V0PVwicm93XCJcbiAgICAgICAgZnhMYXlvdXRBbGlnbj1cInNwYWNlLWJldHdlZW4gY2VudGVyXCJcbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNsb3QtaGVhZGVyLWNvbnRhaW5lclwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbG90LWhlYWRlclwiPlxuICAgICAgICAgICAgPGRpdiBza2VsZXRvbi10ZXh0IFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIiBjbGFzcz1cInNrZWxldG9uLWl0ZW1cIj5cbiAgICAgICAgICAgICAgTmFtZSBvZiB0aGUgY29udGVudFxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICA8ZGl2IHNrZWxldG9uLXRleHQgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiIGNsYXNzPVwic2tlbGV0b24taXRlbVwiPlxuICAgICAgICAgICAgRGVzY3JpcHRpb25cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNsb3QtYWN0aW9ucy1jb250YWluZXJcIiBmeExheW91dD1cInJvd1wiPlxuICAgICAgICAgIDxtYXQtaWNvblxuICAgICAgICAgICAgc2tlbGV0b24tdGV4dFxuICAgICAgICAgICAgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiXG4gICAgICAgICAgICBjbGFzcz1cInNrZWxldG9uLWl0ZW1cIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIGVkaXRcbiAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2ICpuZ0lmPVwiU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uXCIgY2xhc3M9XCJzbG90LXNlY29uZGFyeS1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBza2VsZXRvbi10ZXh0IFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIiBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgIHt7IFNlY29uZGFyeVNsb3REZXNjcmlwdGlvbiB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbWF0LWNhcmQtY29udGVudD5cblxuICAgIDxtYXQtY2FyZC1hY3Rpb25zIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXIgY2VudGVyXCI+XG4gICAgICA8ZGl2IHNrZWxldG9uLXRleHQgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiIGNsYXNzPVwic2tlbGV0b24taXRlbVwiPlxuICAgICAgICB7eyBBY3Rpb25UZXh0IH19XG4gICAgICA8L2Rpdj5cbiAgICA8L21hdC1jYXJkLWFjdGlvbnM+XG4gIDwvbmctY29udGFpbmVyPlxuICA8IS0tIEVORCBTS0VMRVRPTiBDT05URU5UIC0tPlxuXG4gIDwhLS0gQUNUVUFMIENPTlRFTlQgLS0+XG5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFTdGF0ZT8uTG9hZGluZ1wiPlxuICAgIDxtYXQtY2FyZC1jb250ZW50PlxuICAgICAgPGRpdiBjbGFzcz1cInNsb3QtbWFpbi1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiPnt7IE1haW5TbG90RGVzY3JpcHRpb24gfX08L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1tYWluXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2ICpuZ0lmPVwiU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uXCIgY2xhc3M9XCJzbG90LXNlY29uZGFyeS1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiPnt7IFNlY29uZGFyeVNsb3REZXNjcmlwdGlvbiB9fTwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzbG90LXNlY29uZGFyeVwiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzZWNvbmRhcnldXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbWF0LWNhcmQtY29udGVudD5cblxuICAgIDxtYXQtY2FyZC1hY3Rpb25zICpuZ0lmPVwiQWN0aW9uVGV4dFwiIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXJcIj5cbiAgICAgIDxhXG4gICAgICAgIG1hdC1idXR0b25cbiAgICAgICAgKm5nSWY9XCJBY3Rpb25QYXRoXCJcbiAgICAgICAgY2xhc3M9XCJzbG90dGVkLWNhcmQtYWN0aW9uLWJ0blwiXG4gICAgICAgIFtocmVmXT1cIkFjdGlvblBhdGhcIlxuICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICA+e3sgQWN0aW9uVGV4dCB9fVxuICAgICAgPC9hPlxuXG4gICAgICA8YVxuICAgICAgICBtYXQtYnV0dG9uXG4gICAgICAgICpuZ0lmPVwiIUFjdGlvblBhdGhcIlxuICAgICAgICBjbGFzcz1cInNsb3R0ZWQtY2FyZC1hY3Rpb24tYnRuXCJcbiAgICAgICAgKGNsaWNrKT1cIk1haW5BY3Rpb25DbGlja0V2ZW50KClcIlxuICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgPlxuICAgICAgICB7eyBBY3Rpb25UZXh0IH19XG4gICAgICA8L2E+XG4gICAgPC9tYXQtY2FyZC1hY3Rpb25zPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvbWF0LWNhcmQ+XG4iXX0=

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

@@ -3650,10 +3650,10 @@ 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=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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\">Descrption text</div>\n\n        <div  class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      \n\n        <div class=\"slot-secondary\" fxLayout=\"row\" 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\n            class=\"slot-actions-container\"\n            fxLayout=\"row\"\n            \n          >\n            \n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n                class=\"skeleton-item\"\n              >\n                edit\n              </mat-icon>\n            \n          </div>\n\n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">{{ SecondarySlotDescription }}</div>\n        </div>\n    </mat-card-content>\n\n    <mat-card-actions  fxLayoutAlign=\"center center\">\n      <div\n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n        \n        >{{ ActionText }}\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    <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:25px;margin-bottom:0!important}.header-description{background-color:#d3d3d3;padding:10px;margin-left:-2px}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}\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: i2$2.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: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { 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: 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=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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:25px;margin-bottom:0!important}.header-description{background-color:#b9dddd;padding:10px;margin-left:-2px}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}\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: i2$2.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: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i3.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { 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: 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=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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\">Descrption text</div>\n\n        <div  class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      \n\n        <div class=\"slot-secondary\" fxLayout=\"row\" 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\n            class=\"slot-actions-container\"\n            fxLayout=\"row\"\n            \n          >\n            \n              <mat-icon \n                skeleton-text \n                [effect]=\"SkeletonEffect\" \n                class=\"skeleton-item\"\n              >\n                edit\n              </mat-icon>\n            \n          </div>\n\n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">{{ SecondarySlotDescription }}</div>\n        </div>\n    </mat-card-content>\n\n    <mat-card-actions  fxLayoutAlign=\"center center\">\n      <div\n        skeleton-text \n        [effect]=\"SkeletonEffect\"\n        class=\"skeleton-item\"\n        \n        >{{ ActionText }}\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    <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:25px;margin-bottom:0!important}.header-description{background-color:#d3d3d3;padding:10px;margin-left:-2px}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}\n"] }]
+            args: [{ selector: 'lcu-slotted-card', template: "<mat-card class=\"col-info-card\">\n  <mat-card-header class=\"slotted-card-header\" fxLayoutAlign=\"start center\">\n    <!-- How are these two getting switched?? -->\n    <mat-icon mat-card-avatar class=\"header-icon\">{{ Icon }}</mat-icon>\n    <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\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:25px;margin-bottom:0!important}.header-description{background-color:#b9dddd;padding:10px;margin-left:-2px}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}\n"] }]
         }], ctorParameters: function () { return [{ type: EaCService }]; }, propDecorators: { ActionText: [{
                 type: Input,
                 args: ['action-text']
@@ -3701,10 +3701,10 @@ class ProjectInfoCardComponent {
     }
 }
 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:.5em;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 #d3d3d3}.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 #d3d3d3}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3}.skeleton-item{margin:5px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.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: i2$2.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.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.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.ɵ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:.5em;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.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: i2$2.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.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.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:.5em;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 #d3d3d3}.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 #d3d3d3}.info-card-btn{width:100%;border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3}.skeleton-item{margin:5px}\n"] }]
+            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:.5em;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: [{
                 type: Input,
                 args: ['description']