Merge pull request #686 from hubmapconsortium/develop

Develop

apps/asctb-reporter/src/app/components/indented-list/indented-list.component.ts

@@ -81,7 +81,7 @@ export class IndentedListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngAfterViewInit(): void {
     if (this.indentTree) {
-      this.indentTree.treeControl.expandAll();
+      this.indentTree.treeControl?.expandAll();
     }
   }
 

apps/ccf-body-ui-wc/src/app/app.module.ts

@@ -1,26 +1,14 @@
-import { DoBootstrap, Injector, NgModule } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
+import { provideHttpClient } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { BodyUiModule } from 'ccf-shared';
 import { AppWebComponent } from './app-web-component.component';
 import { AppComponent } from './app.component';
 import { StoreModule } from './core/store/store.module';
-import { provideHttpClient } from '@angular/common/http';
 
 @NgModule({
   imports: [BrowserModule, StoreModule, BodyUiModule],
   declarations: [AppComponent, AppWebComponent],
   providers: [provideHttpClient()],
 })
-export class AppModule implements DoBootstrap {
-  constructor(private readonly injector: Injector) {}
-
-  ngDoBootstrap(): void {
-    const appElement = createCustomElement(AppWebComponent, {
-      injector: this.injector,
-    });
-
-    customElements.define('ccf-body-ui-wc', appElement);
-  }
-}
+export class AppModule {}

apps/ccf-body-ui-wc/src/main.ts

@@ -1,14 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { importProvidersFrom } from '@angular/core';
+import { createCustomElement } from '@hra-ui/webcomponents';
+import { AppWebComponent } from './app/app-web-component.component';
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  // eslint-disable-next-line no-console
-  .catch((err) => console.error(err));
+createCustomElement('ccf-body-ui-wc', AppWebComponent, {
+  providers: [importProvidersFrom(AppModule)],
+});

apps/ccf-eui/src/app/app.module.ts

@@ -1,19 +1,17 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { DoBootstrap, Injector, NgModule } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
+import { NgModule } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BodyUiModule, InfoButtonModule, OrganSelectorModule, TrackingPopupModule } from 'ccf-shared';
-import { AppRootOverlayContainer } from './core/services/app-root-overlay/app-root-overlay.service';
-
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { DEFAULT_THEME } from '../app/core/services/theming/theming.service';
 import { AppWebComponent } from './app-web-component.component';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
+import { AppRootOverlayContainer } from './core/services/app-root-overlay/app-root-overlay.service';
 import { FiltersPopoverModule } from './modules/filters/filters-popover/filters-popover.module';
 import { OntologyExplorationModule } from './modules/ontology-exploration/ontology-exploration.module';
 import { ResultsBrowserModule } from './modules/results-browser/results-browser/results-browser.module';
@@ -54,14 +52,4 @@ import { ViewerModule } from './shared/components/viewer/viewer.module';
     { provide: OverlayContainer, useExisting: AppRootOverlayContainer },
   ],
 })
-export class AppModule implements DoBootstrap {
-  constructor(private readonly injector: Injector) {}
-
-  ngDoBootstrap(): void {
-    const appElement = createCustomElement(AppWebComponent, {
-      injector: this.injector,
-    });
-
-    customElements.define('ccf-eui', appElement);
-  }
-}
+export class AppModule {}

apps/ccf-eui/src/main.ts

@@ -1,13 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { importProvidersFrom } from '@angular/core';
+import { createCustomElement } from '@hra-ui/webcomponents';
+import { AppWebComponent } from './app/app-web-component.component';
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+createCustomElement('ccf-eui', AppWebComponent, {
+  providers: [importProvidersFrom(AppModule)],
+});

apps/ccf-organ-info/src/app/app.module.ts

@@ -1,7 +1,5 @@
-import { DoBootstrap, Injector, NgModule } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppWebComponent } from './app-web-component.component';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
@@ -14,14 +12,4 @@ import { StatsListModule } from './modules/stats-list/stats-list.module';
   declarations: [AppComponent, AppWebComponent],
   providers: [],
 })
-export class AppModule implements DoBootstrap {
-  constructor(private readonly injector: Injector) {}
-
-  ngDoBootstrap(): void {
-    const appElement = createCustomElement(AppWebComponent, {
-      injector: this.injector,
-    });
-
-    customElements.define('ccf-organ-info', appElement);
-  }
-}
+export class AppModule {}

apps/ccf-organ-info/src/main.ts

@@ -1,14 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { importProvidersFrom } from '@angular/core';
+import { createCustomElement } from '@hra-ui/webcomponents';
+import { AppWebComponent } from './app/app-web-component.component';
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  // eslint-disable-next-line no-console
-  .catch((err) => console.error(err));
+createCustomElement('ccf-organ-info', AppWebComponent, {
+  providers: [importProvidersFrom(AppModule)],
+});

apps/ccf-rui/src/app/app.module.ts

@@ -1,12 +1,10 @@
-import { DoBootstrap, Injector, NgModule } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
+import { NgModule } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TrackingPopupModule } from 'ccf-shared';
-
 import { AppWebComponent } from './app-web-component.component';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
@@ -47,14 +45,4 @@ import { DrawerModule } from './shared/components/drawer/drawer.module';
     },
   ],
 })
-export class AppModule implements DoBootstrap {
-  constructor(private readonly injector: Injector) {}
-
-  ngDoBootstrap(): void {
-    const appElement = createCustomElement(AppWebComponent, {
-      injector: this.injector,
-    });
-
-    customElements.define('ccf-rui', appElement);
-  }
-}
+export class AppModule {}

apps/ccf-rui/src/main.ts

@@ -1,14 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { importProvidersFrom } from '@angular/core';
+import { createCustomElement } from '@hra-ui/webcomponents';
+import { AppWebComponent } from './app/app-web-component.component';
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  // eslint-disable-next-line no-console
-  .catch((err) => console.error(err));
+createCustomElement('ccf-rui', AppWebComponent, {
+  providers: [importProvidersFrom(AppModule)],
+});

apps/cde-ui/src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, inject } from '@angular/core';
+import { Router, RouterOutlet } from '@angular/router';
 
 import { HeaderComponent } from './components/header/header.component';
 import { ScreenSizeNoticeComponent } from './components/screen-size-notice/screen-size-notice.component';
@@ -27,4 +27,9 @@ export class AppComponent {
     width: SCREEN_SIZE_NOTICE_MAX_WIDTH,
     height: SCREEN_SIZE_NOTICE_MAX_HEIGHT,
   });
+
+  /** Initialize app */
+  constructor() {
+    inject(Router).initialNavigation();
+  }
 }

apps/cde-ui/src/app/app.config.ts

@@ -3,13 +3,15 @@ import { ApplicationConfig } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withComponentInputBinding, withInMemoryScrolling, withViewTransitions } from '@angular/router';
 import { provideIcons } from '@hra-ui/cdk/icons';
+import { provideNothrowPlatformLocation } from '@hra-ui/cdk/platform-location';
 import { ROUTES } from './app.routes';
 
 /**
  * Set of config options available during the application bootstrap operation.
  */
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideNothrowPlatformLocation(),
     provideRouter(
       ROUTES,
       withComponentInputBinding(),

apps/cde-ui/src/index.html

@@ -7,6 +7,6 @@
     <link rel="icon" type="image/png" href="favicon.png" />
   </head>
   <body class="mat-typography">
-    <cde-root></cde-root>
+    <cde-ui></cde-ui>
   </body>
 </html>

apps/cde-ui/src/main.ts

@@ -1,5 +1,5 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
+import { createCustomElement } from '@hra-ui/webcomponents';
 import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+createCustomElement('cde-ui', AppComponent, appConfig);

apps/dashboard-ui/src/app/app.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { HeaderComponent } from './components/header/header.component';
+import { Component, inject } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
 import { FooterComponent } from '@hra-ui/design-system/footer';
+import { HeaderComponent } from './components/header/header.component';
 
 /**
  * App Component
@@ -13,4 +13,9 @@ import { FooterComponent } from '@hra-ui/design-system/footer';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {}
+export class AppComponent {
+  /** Initialize app */
+  constructor() {
+    inject(Router).initialNavigation();
+  }
+}

apps/dashboard-ui/src/app/app.config.ts

@@ -3,6 +3,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router';
 import { provideIcons } from '@hra-ui/cdk/icons';
+import { provideNothrowPlatformLocation } from '@hra-ui/cdk/platform-location';
 import {
   DashboardIndexComponent,
   DashboardLayoutComponent,
@@ -18,6 +19,7 @@ import { appRoutes } from './app.routes';
 /** Application config */
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideNothrowPlatformLocation(),
     provideRouter(
       appRoutes,
       withComponentInputBinding(),

apps/dashboard-ui/src/index.html

@@ -9,6 +9,6 @@
   </head>
 
   <body class="mat-typography">
-    <hra-root></hra-root>
+    <hra-dashboard></hra-dashboard>
   </body>
 </html>

apps/dashboard-ui/src/main.ts

@@ -1,5 +1,5 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
+import { createCustomElement } from '@hra-ui/webcomponents';
 import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+createCustomElement('hra-dashboard', AppComponent, appConfig);

apps/ftu-ui-small-wc/src/assets/TEMP/2d-ftu-illustrations.jsonld

@@ -30618,4 +30618,4 @@
       ]
     }
   ]
-}
+}