@lowcodeunit/applications-flow-common 1.33.225-lets-get-social-ish → 1.33.226-lets-get-social-ish

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

@@ -5401,10 +5401,10 @@ class BreadcrumbComponent {
     async handleStateChange() { }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: EaCService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbComponent, selector: "lcu-breadcrumb", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], ProjectLookup: ["project-lookup", "ProjectLookup"], SelectedRoute: ["selected-route", "SelectedRoute"] }, ngImport: i0, template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading && Enterprise\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"], components: [{ type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i8$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbComponent, selector: "lcu-breadcrumb", inputs: { ApplicationLookup: ["application-lookup", "ApplicationLookup"], ProjectLookup: ["project-lookup", "ProjectLookup"], SelectedRoute: ["selected-route", "SelectedRoute"] }, ngImport: i0, template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"], components: [{ type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i8$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-breadcrumb', template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading && Enterprise\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"] }]
+            args: [{ selector: 'lcu-breadcrumb', template: "<div class=\"breadcrumb-container\" fxLayout=\"row wrap\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <ng-container *ngIf=\"Loading\">\n      <mat-icon>home</mat-icon>\n\n      <div skeleton-text [effect]=\"SkeletonEffect\">Enterprise Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/enterprises']\">\n        <mat-icon>home</mat-icon>\n\n        {{ Enterprise?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"enterpriseMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #enterpriseMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          [routerLink]=\"['/enterprises']\"\n          (click)=\"SetActiveEnterprise(ent.Lookup)\"\n          *ngFor=\"let ent of State.Enterprises\"\n        >\n          <span>{{ ent.Name }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"ProjectLookup && SelectedProject\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Project Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div class=\"crumb-name\" [routerLink]=\"['/projects', ProjectLookup]\">\n        {{ SelectedProject?.Project?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"projectMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #projectMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let projectLookup of ProjectLookups\"\n          [routerLink]=\"['/projects', projectLookup]\"\n        >\n          <span *ngIf=\"Projects[projectLookup]; let pro\">{{\n            pro.Project?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"SelectedRoute\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Route Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"['/routes', SelectedRoute, ProjectLookup]\"\n      >\n        {{ SelectedRoute }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"routeMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #routeMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appRoute of Routes\"\n          [routerLink]=\"['/routes', appRoute, ProjectLookup]\"\n        >\n          <span *ngIf=\"appRoute\">{{ appRoute }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n\n  <div\n    *ngIf=\"SelectedApplication && ApplicationLookup\"\n    fxLayout=\"row\"\n    fxLayoutAlign=\"center center\"\n  >\n    <span class=\"seperator\">/</span>\n\n    <ng-container *ngIf=\"State?.Loading\">\n      <div skeleton-text [effect]=\"SkeletonEffect\">Application Name</div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!State?.Loading\">\n      <div\n        class=\"crumb-name\"\n        [routerLink]=\"[\n          '/applications',\n          ApplicationLookup,\n          SelectedRoute,\n          ProjectLookup\n        ]\"\n      >\n        {{ SelectedApplication?.Application?.Name }}\n      </div>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"applicationMenu\">\n        <mat-icon>expand_more</mat-icon>\n      </button>\n\n      <mat-menu #applicationMenu=\"matMenu\" xPosition=\"before\">\n        <button\n          mat-menu-item\n          *ngFor=\"let appLookup of CurrentRouteApplicationLookups\"\n          [routerLink]=\"[\n            '/applications',\n            appLookup,\n            SelectedRoute,\n            ProjectLookup\n          ]\"\n        >\n          <span *ngIf=\"RoutedApplications[SelectedRoute][appLookup]; let app\">{{\n            app.Application?.Name\n          }}</span>\n        </button>\n      </mat-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .breadcrumb-container{background-color:#ebecf0;margin:1em}:host ::ng-deep .seperator{font-size:25px;padding:10px}:host ::ng-deep .crumb-name{cursor:pointer}:host ::ng-deep .mat-icon{display:inline-flex;vertical-align:middle}\n"] }]
         }], ctorParameters: function () { return [{ type: EaCService }]; }, propDecorators: { ApplicationLookup: [{
                 type: Input,
                 args: ['application-lookup']