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

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

@@ -3554,10 +3554,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=\"space-between center\">\n    <div mat-card-avatar fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <mat-icon  class=\"header-icon\">{{ Icon }}</mat-icon>\n      <div class=\"card-title\">{{ Title }}</div>\n    </div>\n\n    <mat-icon \n      *ngIf=\"!ActionPath\" \n      class=\"header-icon\" \n      (click)=\"MainActionClickEvent()\"\n    >\n      add\n    </mat-icon>\n\n  </mat-card-header>\n\n  <!-- SKELETON CONTENT -->\n\n  <ng-container *ngIf=\"State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          Descrption text\n        </div>\n\n        <div class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      <div\n        class=\"slot-secondary\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"space-between center\"\n      >\n        <div class=\"slot-header-container\">\n          <div class=\"slot-header\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n              Name of the content\n            </div>\n          </div>\n\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n            Description\n          </div>\n        </div>\n\n        <div class=\"slot-actions-container\" fxLayout=\"row\">\n          <mat-icon\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"skeleton-item\"\n          >\n            edit\n          </mat-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          {{ SecondarySlotDescription }}\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n        {{ ActionText }}\n      </div>\n    </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n  <ng-container *ngIf=\"!State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n        <div class=\"slot-main\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n        <div class=\"slot-secondary\">\n          <ng-content select=\"[secondary]\"></ng-content>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a\n        mat-button\n        *ngIf=\"ActionPath\"\n        class=\"slotted-card-action-btn\"\n        [href]=\"ActionPath\"\n        color=\"primary\"\n        >{{ ActionText }}\n      </a>\n\n      <a\n        mat-button\n        *ngIf=\"!ActionPath\"\n        class=\"slotted-card-action-btn\"\n        (click)=\"MainActionClickEvent()\"\n        color=\"primary\"\n      >\n        {{ ActionText }}\n      </a>\n    </mat-card-actions>\n  </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0}.slotted-card-header{padding:5px}.header-icon{height:30px;width:30px;font-size:30px}.card-title{font-size:22px;margin-bottom:0!important}.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}.mat-card-avatar{width:75%!important}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: 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: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4.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: 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=\"space-between center\">\n    <div mat-card-avatar fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <mat-icon  class=\"header-icon\">{{ Icon }}</mat-icon>\n      <div class=\"card-title\">{{ Title }}</div>\n    </div>\n\n    <mat-icon \n      *ngIf=\"!ActionPath\" \n      class=\"header-icon\" \n      (click)=\"MainActionClickEvent()\"\n    >\n      add\n    </mat-icon>\n\n  </mat-card-header>\n\n  <!-- SKELETON CONTENT -->\n\n  <ng-container *ngIf=\"State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          Descrption text\n        </div>\n\n        <div class=\"slot-main\">\n          <ng-content skeleton-block [effect]=\"SkeletonEffect\"></ng-content>\n        </div>\n      </div>\n\n      <div\n        class=\"slot-secondary\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"space-between center\"\n      >\n        <div class=\"slot-header-container\">\n          <div class=\"slot-header\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n              Name of the content\n            </div>\n          </div>\n\n          <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n            Description\n          </div>\n        </div>\n\n        <div class=\"slot-actions-container\" fxLayout=\"row\">\n          <mat-icon\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"skeleton-item\"\n          >\n            edit\n          </mat-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div skeleton-text [effect]=\"SkeletonEffect\" class=\"header-description\">\n          {{ SecondarySlotDescription }}\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions fxLayoutAlign=\"center center\">\n      <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n        {{ ActionText }}\n      </div>\n    </mat-card-actions>\n  </ng-container>\n  <!-- END SKELETON CONTENT -->\n\n  <!-- ACTUAL CONTENT -->\n\n  <ng-container *ngIf=\"!State?.Loading\">\n    <mat-card-content>\n      <div class=\"slot-main-container\">\n        <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n        <div class=\"slot-main\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n\n      <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n        <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n        <div class=\"slot-secondary\">\n          <ng-content select=\"[secondary]\"></ng-content>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a\n        mat-button\n        *ngIf=\"ActionPath\"\n        class=\"slotted-card-action-btn\"\n        [href]=\"ActionPath\"\n        color=\"primary\"\n        >{{ ActionText }}\n      </a>\n\n      <a\n        mat-button\n        *ngIf=\"!ActionPath\"\n        class=\"slotted-card-action-btn\"\n        (click)=\"MainActionClickEvent()\"\n        color=\"primary\"\n      >\n        {{ ActionText }}\n      </a>\n    </mat-card-actions>\n  </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0}.slotted-card-header{padding:5px}.header-icon{height:30px;width:30px;font-size:30px}.card-title{font-size:22px;margin-bottom:0!important}.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}.mat-card-avatar{width:75%!important}\n"] }]
         }], ctorParameters: function () { return [{ type: EaCService }]; }, propDecorators: { ActionText: [{
                 type: Input,
                 args: ['action-text']
@@ -3605,10 +3605,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']
@@ -4894,10 +4894,10 @@ class DevopsSourceControlFormComponent {
     }
 }
 DevopsSourceControlFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, deps: [{ token: ApplicationsFlowService }, { token: EaCService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DevopsSourceControlFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: { EditingSourceControlLookup: ["editing-source-control-lookup", "EditingSourceControlLookup"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"] }, viewQueries: [{ propertyName: "BranchesInput", first: true, predicate: ["branches"], descendants: true }], ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"DevOpsSourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n  <mat-card class=\"spread\" class=\"sc-card\">\n    <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header>\n\n    <mat-card-content>\n      <div class=\"card\">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-select formControlName=\"devOpsActionLookup\" placeholder=\"DevOps Action\"\n            [disabled]=\"HostingDetails?.Loading\" (selectionChange)=\"DevOpsActionLookupChanged($event)\">\n            <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n              <mat-option [value]=\"devOpsActionLookup\" *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                {{ devOpsAction.Name }}\n              </mat-option>\n            </ng-container>\n\n            <mat-option value=\"\">-- Create New --</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n        <mat-form-field class=\"mat-full-width with-hint\" *ngIf=\"OrganizationOptions?.length > 0\">\n          <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'organization'\" placeholder=\"Organization\"\n            (selectionChange)=\"OrganizationChanged($event)\" [disabled]=\"Loading || HostingDetails?.Loading\" required>\n            <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n              <mat-option [value]=\"orgOpt.Name\">\n                {{ orgOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\"> refresh </mat-icon>\n\n          <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \" [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n            <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n              <mat-option [value]=\"repoOpt.Name\">\n                {{ repoOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <input matInput placeholder=\"Repository (creates new if does not exist)\"\n            [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n            [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n          <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n            *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n            add_circle\n          </mat-icon>\n\n          <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n            *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n            <mat-icon matSuffix color=\"primary\">\n              save\n            </mat-icon>\n          </button>\n\n          <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n            <mat-icon matSuffix>\n              cancel\n            </mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-label>Selected Branches</mat-label>\n\n          <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n            <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n              <mat-option [value]=\"branchOpt.Name\">\n                {{ branchOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-autocomplete>\n\n          <mat-chip-list #selectedBranches>\n            <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n              *ngFor=\"let selBranch of SelectedBranches\">\n              {{ selBranch }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\n            <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n              [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n              [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n              (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n              required />\n          </mat-chip-list>\n        </mat-form-field>\n\n        <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n            [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n            <ng-container *ngFor=\"let branch of SelectedBranches\">\n              <mat-option [value]=\"branch\">\n                {{ branch }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\"> refresh </mat-icon>\n\n          <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \">\n        <mat-form-field class=\"mat-full-width with-hint\">\n          <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n            [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n            <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n              <mat-option [value]=\"buildPath\">\n                {{ buildPath }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-hint>\n            The build path identifies which build action to use for your\n            configuration.\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"Loading\">\n        <div class=\"spread\">\n          <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n          <div class=\"margin-3\">\n            <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n              Loading organizations\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \">\n              Loading repositories\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n              Loading branches\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \">\n              Loading build paths\n            </h4>\n          </div>\n        </div>\n      </div>\n      <!-- </div> -->\n\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n\n      <button \n        mat-raised-button \n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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"] }, { type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { 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"] }, { type: i4$2.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatPrefix, selector: "[matPrefix]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.MatLabel, selector: "mat-label" }, { type: i9$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+DevopsSourceControlFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DevopsSourceControlFormComponent, selector: "lcu-devops-source-control-form", inputs: { EditingSourceControlLookup: ["editing-source-control-lookup", "EditingSourceControlLookup"], Environment: ["environment", "Environment"], EnvironmentLookup: ["environment-lookup", "EnvironmentLookup"] }, viewQueries: [{ propertyName: "BranchesInput", first: true, predicate: ["branches"], descendants: true }], ngImport: i0, template: "<form class=\"form-card\" [formGroup]=\"DevOpsSourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n  <mat-card class=\"spread\" class=\"sc-card\">\n    <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header>\n\n    <mat-card-content>\n      <div class=\"card\">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-select formControlName=\"devOpsActionLookup\" placeholder=\"DevOps Action\"\n            [disabled]=\"HostingDetails?.Loading\" (selectionChange)=\"DevOpsActionLookupChanged($event)\">\n            <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n              <mat-option [value]=\"devOpsActionLookup\" *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                {{ devOpsAction.Name }}\n              </mat-option>\n            </ng-container>\n\n            <mat-option value=\"\">-- Create New --</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n        <mat-form-field class=\"mat-full-width with-hint margin-bottom\" *ngIf=\"OrganizationOptions?.length > 0\">\n          <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'organization'\" placeholder=\"Organization\"\n            (selectionChange)=\"OrganizationChanged($event)\" [disabled]=\"Loading || HostingDetails?.Loading\" required>\n            <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n              <mat-option [value]=\"orgOpt.Name\">\n                {{ orgOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\"> refresh </mat-icon>\n\n          <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \" [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n            <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n              <mat-option [value]=\"repoOpt.Name\">\n                {{ repoOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <input matInput placeholder=\"Repository (creates new if does not exist)\"\n            [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n            [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n          <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n            *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n            add_circle\n          </mat-icon>\n\n          <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n            *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n            <mat-icon matSuffix color=\"primary\">\n              save\n            </mat-icon>\n          </button>\n\n          <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n            <mat-icon matSuffix>\n              cancel\n            </mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-label>Selected Branches</mat-label>\n\n          <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n            <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n              <mat-option [value]=\"branchOpt.Name\">\n                {{ branchOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-autocomplete>\n\n          <mat-chip-list #selectedBranches>\n            <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n              *ngFor=\"let selBranch of SelectedBranches\">\n              {{ selBranch }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\n            <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n              [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n              [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n              (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n              required />\n          </mat-chip-list>\n        </mat-form-field>\n\n        <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n            [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n            <ng-container *ngFor=\"let branch of SelectedBranches\">\n              <mat-option [value]=\"branch\">\n                {{ branch }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\"> refresh </mat-icon>\n\n          <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \">\n        <mat-form-field class=\"mat-full-width with-hint\">\n          <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n            [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n            <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n              <mat-option [value]=\"buildPath\">\n                {{ buildPath }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-hint>\n            The build path identifies which build action to use for your\n            configuration.\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"Loading\">\n        <div class=\"spread\">\n          <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n          <div class=\"margin-3\">\n            <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n              Loading organizations\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \">\n              Loading repositories\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n              Loading branches\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \">\n              Loading build paths\n            </h4>\n          </div>\n        </div>\n      </div>\n      <!-- </div> -->\n\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n\n      <button \n        mat-raised-button \n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatCardHeader, selector: "mat-card-header" }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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"] }, { type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { 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"] }, { type: i4$2.LoaderComponent, selector: "lcu-loader", inputs: ["diameter", "hide-inner", "loading"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.MatSuffix, selector: "[matSuffix]" }, { type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatPrefix, selector: "[matPrefix]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.MatLabel, selector: "mat-label" }, { type: i9$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DevopsSourceControlFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-devops-source-control-form', template: "<form class=\"form-card\" [formGroup]=\"DevOpsSourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n  <mat-card class=\"spread\" class=\"sc-card\">\n    <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header>\n\n    <mat-card-content>\n      <div class=\"card\">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-select formControlName=\"devOpsActionLookup\" placeholder=\"DevOps Action\"\n            [disabled]=\"HostingDetails?.Loading\" (selectionChange)=\"DevOpsActionLookupChanged($event)\">\n            <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n              <mat-option [value]=\"devOpsActionLookup\" *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                {{ devOpsAction.Name }}\n              </mat-option>\n            </ng-container>\n\n            <mat-option value=\"\">-- Create New --</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n        <mat-form-field class=\"mat-full-width with-hint\" *ngIf=\"OrganizationOptions?.length > 0\">\n          <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'organization'\" placeholder=\"Organization\"\n            (selectionChange)=\"OrganizationChanged($event)\" [disabled]=\"Loading || HostingDetails?.Loading\" required>\n            <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n              <mat-option [value]=\"orgOpt.Name\">\n                {{ orgOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\"> refresh </mat-icon>\n\n          <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \" [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n            <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n              <mat-option [value]=\"repoOpt.Name\">\n                {{ repoOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <input matInput placeholder=\"Repository (creates new if does not exist)\"\n            [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n            [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n          <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n            *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n            add_circle\n          </mat-icon>\n\n          <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n            *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n            <mat-icon matSuffix color=\"primary\">\n              save\n            </mat-icon>\n          </button>\n\n          <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n            <mat-icon matSuffix>\n              cancel\n            </mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-label>Selected Branches</mat-label>\n\n          <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n            <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n              <mat-option [value]=\"branchOpt.Name\">\n                {{ branchOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-autocomplete>\n\n          <mat-chip-list #selectedBranches>\n            <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n              *ngFor=\"let selBranch of SelectedBranches\">\n              {{ selBranch }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\n            <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n              [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n              [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n              (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n              required />\n          </mat-chip-list>\n        </mat-form-field>\n\n        <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n            [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n            <ng-container *ngFor=\"let branch of SelectedBranches\">\n              <mat-option [value]=\"branch\">\n                {{ branch }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\"> refresh </mat-icon>\n\n          <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \">\n        <mat-form-field class=\"mat-full-width with-hint\">\n          <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n            [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n            <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n              <mat-option [value]=\"buildPath\">\n                {{ buildPath }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-hint>\n            The build path identifies which build action to use for your\n            configuration.\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"Loading\">\n        <div class=\"spread\">\n          <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n          <div class=\"margin-3\">\n            <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n              Loading organizations\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \">\n              Loading repositories\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n              Loading branches\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \">\n              Loading build paths\n            </h4>\n          </div>\n        </div>\n      </div>\n      <!-- </div> -->\n\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n\n      <button \n        mat-raised-button \n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}\n"] }]
+            args: [{ selector: 'lcu-devops-source-control-form', template: "<form class=\"form-card\" [formGroup]=\"DevOpsSourceControlFormGroup\" (ngSubmit)=\"SubmitSourceControl()\">\n\n  <mat-card class=\"spread\" class=\"sc-card\">\n    <mat-card-header>\n      <mat-card-title> Source Control </mat-card-title>\n\n      <div fxFlex></div>\n\n      <mat-icon matSuffix matTooltip=\"Configure source control, DevOps CI/CD, and artifacts.\">\n        info_outline\n      </mat-icon>\n    </mat-card-header>\n\n    <mat-card-content>\n      <div class=\"card\">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-select formControlName=\"devOpsActionLookup\" placeholder=\"DevOps Action\"\n            [disabled]=\"HostingDetails?.Loading\" (selectionChange)=\"DevOpsActionLookupChanged($event)\">\n            <ng-container *ngFor=\"let devOpsActionLookup of DevOpsActionLookups\">\n              <mat-option [value]=\"devOpsActionLookup\" *ngIf=\"DevOpsActions[devOpsActionLookup]; let devOpsAction\">\n                {{ devOpsAction.Name }}\n              </mat-option>\n            </ng-container>\n\n            <mat-option value=\"\">-- Create New --</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"card\" *ngIf=\"OrganizationFormControl?.valid || !Loading\">\n        <mat-form-field class=\"mat-full-width with-hint margin-bottom\" *ngIf=\"OrganizationOptions?.length > 0\">\n          <mat-icon class=\"org-icon\" matPrefix>corporate_fare</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'organization'\" placeholder=\"Organization\"\n            (selectionChange)=\"OrganizationChanged($event)\" [disabled]=\"Loading || HostingDetails?.Loading\" required>\n            <ng-container *ngFor=\"let orgOpt of OrganizationOptions\">\n              <mat-option [value]=\"orgOpt.Name\">\n                {{ orgOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\" matTooltip=\"Refresh Organization\"> refresh </mat-icon>\n\n          <a matSuffix href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon color=\"accent\" matTooltip=\"Re-authorize Organizations\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                RepositoryFormControl?.valid ||\n                (OrganizationFormControl?.valid && !Loading)\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>description</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'repository'\" [placeholder]=\"\n                    OrganizationFormControl?.valid\n                      ? 'Repository'\n                      : 'Repository (select organization first)'\n                  \" [disabled]=\"\n                    !OrganizationFormControl?.valid || Loading || HostingDetails?.Loading\n                  \" (selectionChange)=\"RepositoryChanged($event)\" *ngIf=\"!CreatingRepository\" required>\n            <ng-container *ngFor=\"let repoOpt of RepositoryOptions\">\n              <mat-option [value]=\"repoOpt.Name\">\n                {{ repoOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <input matInput placeholder=\"Repository (creates new if does not exist)\"\n            [formControlName]=\"SourceControlRoot + 'repository'\" *ngIf=\"CreatingRepository\"\n            [fxHide]=\"Loading || HostingDetails?.Loading\" required />\n\n          <mat-icon matSuffix (click)=\"CreateRepository()\" [fxHide]=\"Loading || HostingDetails?.Loading\"\n            *ngIf=\"!CreatingRepository && OrganizationFormControl?.valid\">\n            add_circle\n          </mat-icon>\n\n          <button mat-button type=\"button\" (click)=\"SaveRepository()\"\n            *ngIf=\"CreatingRepository && RepositoryFormControl?.valid\">\n\n            <mat-icon matSuffix color=\"primary\">\n              save\n            </mat-icon>\n          </button>\n\n          <button mat-button type=\"button\" (click)=\"CancelCreateRepository()\" *ngIf=\"CreatingRepository\">\n\n            <mat-icon matSuffix>\n              cancel\n            </mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BranchesFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBranches\n              \">\n        <mat-form-field class=\"mat-full-width\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-label>Selected Branches</mat-label>\n\n          <mat-autocomplete (optionSelected)=\"BranchOptionSelected($event)\" #branchOptions=\"matAutocomplete\">\n            <ng-container *ngFor=\"let branchOpt of BranchOptions\">\n              <mat-option [value]=\"branchOpt.Name\">\n                {{ branchOpt.Name }}\n              </mat-option>\n            </ng-container>\n          </mat-autocomplete>\n\n          <mat-chip-list #selectedBranches>\n            <mat-chip [removable]=\"true\" (removed)=\"RemoveBranchOption(selBranch)\"\n              *ngFor=\"let selBranch of SelectedBranches\">\n              {{ selBranch }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\n            <input matInput placeholder=\"New Branch...\" [formControlName]=\"SourceControlRoot + 'branches'\" #branches\n              [matAutocomplete]=\"branchOptions\" [matChipInputFor]=\"selectedBranches\"\n              [matChipInputSeparatorKeyCodes]=\"SeparatorKeysCodes\" [matChipInputAddOnBlur]=\"true\"\n              (matChipInputTokenEnd)=\"AddBranchOption($event)\" [disabled]=\"Loading || HostingDetails?.Loading\"\n              required />\n          </mat-chip-list>\n        </mat-form-field>\n\n        <mat-form-field class=\"mat-full-width with-hint\" [fxShow]=\"SelectedBranches?.length > 1\">\n          <mat-icon class=\"org-icon\" matPrefix>account_tree</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'mainBranch'\" placeholder=\"Main Branch\"\n            [disabled]=\"Loading || HostingDetails?.Loading\" (selectionChange)=\"MainBranchChanged($event)\" required>\n            <ng-container *ngFor=\"let branch of SelectedBranches\">\n              <mat-option [value]=\"branch\">\n                {{ branch }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-icon matSuffix (click)=\"RefreshOrganizations()\"> refresh </mat-icon>\n\n          <a matSuffix mat-icon-button href=\"/.oauth/github?oauth-force-edit=true\" target=\"_blank\" color=\"accent\">\n            <mat-icon matTooltip=\"Re-authorize Organizations\" color=\"accent\"> launch </mat-icon>\n          </a>\n\n          <mat-hint>\n            If you don't have an organization or would like to create a new one,\n            <a href=\"https://github.com/account/organizations/new\" target=\"_blank\">\n              start here\n            </a>\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div class=\"card\" *ngIf=\"\n                (BuildPathFormControl?.valid ||\n                  (OrganizationFormControl?.valid &&\n                    RepositoryFormControl?.valid &&\n                    !Loading)) &&\n                !CreatingRepository &&\n                UseBuildPath\n              \">\n        <mat-form-field class=\"mat-full-width with-hint\">\n          <mat-icon class=\"org-icon\" matPrefix>build</mat-icon>\n\n          <mat-select [formControlName]=\"SourceControlRoot + 'buildPath'\" placeholder=\"Build Path\"\n            [disabled]=\"Loading || BuildPathDisabled\" (selectionChange)=\"BuildPathChanged($event)\" required>\n            <ng-container *ngFor=\"let buildPath of BuildPathOptions\">\n              <mat-option [value]=\"buildPath\">\n                {{ buildPath }}\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n          <mat-hint>\n            The build path identifies which build action to use for your\n            configuration.\n          </mat-hint>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"Loading\">\n        <div class=\"spread\">\n          <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n\n          <div class=\"margin-3\">\n            <h4 class=\"mat-title\" *ngIf=\"!OrganizationFormControl?.valid\">\n              Loading organizations\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      OrganizationFormControl?.valid && !RepositoryFormControl?.valid\n                    \">\n              Loading repositories\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"RepositoryFormControl?.valid && !BranchesFormControl?.valid\">\n              Loading branches\n            </h4>\n\n            <h4 class=\"mat-title\" *ngIf=\"\n                      (RepositoryFormControl?.valid || BranchesFormControl?.valid) &&\n                      !BuildPathFormControl?.valid\n                    \">\n              Loading build paths\n            </h4>\n          </div>\n        </div>\n      </div>\n      <!-- </div> -->\n\n    </mat-card-content>\n    <mat-card-actions fxLayoutAlign=\"center center\">\n\n      <button \n        mat-raised-button \n        type=\"submit\" \n        fxFlex=\"100%\" \n        color=\"primary\" \n        [disabled]=\"!DevOpsSourceControlFormGroup.valid || !DevOpsSourceControlFormGroup.dirty\">\n        <mat-icon>save</mat-icon>\n        Save Source Control\n      </button>\n      \n  </mat-card-actions>\n  </mat-card>\n</form>", styles: [".form-card,.sc-card{width:100%}.margin-bottom{margin-bottom:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: ApplicationsFlowService }, { type: EaCService }, { type: i1$1.FormBuilder }]; }, propDecorators: { EditingSourceControlLookup: [{
                 type: Input,
                 args: ['editing-source-control-lookup']