fix: adjust app setup

src/_am_mixins.scss → src/app/_am-mixins.scss

@@ -160,8 +160,8 @@
     .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
       padding-top: 0.4rem;
       padding-bottom: 0.4rem;
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
     .p-autocomplete-clear-icon {
@@ -358,33 +358,33 @@
 @mixin dataview-list-zebra-rows {
   :host ::ng-deep {
     .p-dataview-list .p-dataview-content .p-grid > div {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
 }
 @mixin dropdown-zebra-rows {
   :host ::ng-deep {
-    .p-dropdown-panel .p-dropdown-items *:nth-child(odd) .p-dropdown-item {
-      background-color: #f8f9fa;
+    .p-dropdown-panel .p-dropdown-items *:nth-child(even) .p-dropdown-item {
+      background-color: var(--table-body-row-even-bg);
     }
   }
 }
 @mixin listbox-zebra-rows {
   :host ::ng-deep {
     .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled) {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }
 }
 @mixin picklist-zebra-rows {
   :host ::ng-deep {
     .p-picklist-list li {
-      &:nth-child(odd) {
-        background-color: #f8f9fa;
+      &:nth-child(even) {
+        background-color: var(--table-body-row-even-bg);
       }
     }
   }

src/app/announcement/announcement-detail/announcement-detail.component.html

@@ -49,6 +49,7 @@
             rows="3"
             [autoResize]="true"
             appendTo="body"
+            [ariaLabel]="'ANNOUNCEMENT.TOOLTIPS.CONTENT' | translate"
             [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.CONTENT' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
@@ -67,7 +68,7 @@
             [autoDisplayFirst]="true"
             [appendTo]="'body'"
             formControlName="workspaceName"
-            [aria-label]="'ANNOUNCEMENT.WORKSPACE' | translate"
+            [ariaLabel]="'ANNOUNCEMENT.WORKSPACE' | translate"
             [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.WORKSPACE' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
@@ -87,7 +88,7 @@
             [autoDisplayFirst]="true"
             [appendTo]="'body'"
             formControlName="productName"
-            [aria-label]="'ANNOUNCEMENT.APPLICATION' | translate"
+            [ariaLabel]="'ANNOUNCEMENT.APPLICATION' | translate"
             [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.APPLICATION' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"

src/app/announcement/announcement-detail/announcement-detail.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_am_mixins.scss';
+@import '/src/app/_am-mixins.scss';
 
 @include correct-select-button;
 @include dialog-footer-buttons;

src/app/announcement/announcement-search/announcement-criteria/announcement-criteria.component.scss

@@ -1,3 +1,3 @@
-@import '/src/_am_mixins.scss';
+@import '/src/app/_am-mixins.scss';
 
 @include correct-search-criteria;

src/app/announcement/announcement-search/announcement-search.component.html

@@ -81,7 +81,7 @@
                 class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 [id]="'am_announcement_search_table_row_' + row + '_view_action'"
                 (click)="onDetail($event, rowData, 'VIEW')"
-                [aria-label]="'ACTIONS.VIEW' | translate"
+                [ariaLabel]="'ACTIONS.VIEW' | translate"
                 [pTooltip]="'ACTIONS.VIEW' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
@@ -95,7 +95,7 @@
               class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
               [id]="'am_announcement_search_table_row_' + row + '_edit_action'"
               (click)="onDetail($event, rowData, 'EDIT')"
-              [aria-label]="'ACTIONS.EDIT.LABEL' | translate"
+              [ariaLabel]="'ACTIONS.EDIT.LABEL' | translate"
               [pTooltip]="'ACTIONS.EDIT.ANNOUNCEMENT.TOOLTIP' | translate"
               tooltipPosition="top"
               tooltipEvent="hover"
@@ -109,7 +109,7 @@
               class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
               [id]="'am_announcement_search_table_row_' + row + '_copy_action'"
               (click)="onCopy($event, rowData)"
-              [aria-label]="'ACTIONS.COPY.LABEL' | translate"
+              [ariaLabel]="'ACTIONS.COPY.LABEL' | translate"
               [pTooltip]="'ACTIONS.COPY.ANNOUNCEMENT.TOOLTIP' | translate"
               tooltipPosition="top"
               tooltipEvent="hover"
@@ -123,7 +123,7 @@
               class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
               [id]="'am_announcement_search_table_row_' + row + '_delete_action'"
               (click)="onDelete($event, rowData)"
-              [aria-label]="'ACTIONS.DELETE.LABEL' | translate"
+              [ariaLabel]="'ACTIONS.DELETE.LABEL' | translate"
               [pTooltip]="'ACTIONS.DELETE.ANNOUNCEMENT.TOOLTIP' | translate"
               tooltipPosition="top"
               tooltipEvent="hover"
@@ -147,7 +147,7 @@
                 [class.text-red-600]="rowData['priority'] === 'IMPORTANT'"
                 [class.text-yellow-600]="rowData['priority'] === 'NORMAL'"
                 [class.text-blue-600]="rowData['priority'] === 'LOW'"
-                [aria-label]="'ENUMS.ANNOUNCEMENT_STATUS.' + rowData[col.field] | translate"
+                [attr.aria-label]="'ENUMS.ANNOUNCEMENT_STATUS.' + rowData[col.field] | translate"
                 [pTooltip]="
                   ('ENUMS.ANNOUNCEMENT_STATUS.' + rowData[col.field] | translate) +
                   ' - ' +
@@ -163,7 +163,7 @@
                 [class.pi-info-circle]="rowData[col.field] === 'INFO'"
                 [class.pi-calendar]="rowData[col.field] === 'EVENT'"
                 [class.pi-wrench]="rowData[col.field] === 'SYSTEM_MAINTENANCE'"
-                [aria-label]="'ENUMS.ANNOUNCEMENT_TYPE.' + rowData[col.field] | translate"
+                [attr.aria-label]="'ENUMS.ANNOUNCEMENT_TYPE.' + rowData[col.field] | translate"
                 [pTooltip]="'ENUMS.ANNOUNCEMENT_TYPE.' + rowData[col.field] | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"

src/app/announcement/announcement-search/announcement-search.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_am_mixins.scss';
+@import '/src/app/_am-mixins.scss';
 
 @include danger-action;
 @include table-inline-buttons;

src/app/announcement/announcement.module.ts

@@ -1,11 +1,12 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { RouterModule, Routes } from '@angular/router'
 
 import { PortalCoreModule } from '@onecx/portal-integration-angular'
-import { InitializeModuleGuard, addInitializeModuleGuard } from '@onecx/angular-integration-interface'
-import { SharedModule } from '../shared/shared.module'
+import { addInitializeModuleGuard, InitializeModuleGuard } from '@onecx/angular-integration-interface'
+import { SharedModule } from 'src/app/shared/shared.module'
+
 import { AnnouncementSearchComponent } from './announcement-search/announcement-search.component'
 import { AnnouncementCriteriaComponent } from './announcement-search/announcement-criteria/announcement-criteria.component'
 import { AnnouncementDetailComponent } from './announcement-detail/announcement-detail.component'
@@ -19,10 +20,10 @@ const routes: Routes = [
   },
   {
     path: 'list-active',
-    component: OneCXAnnouncementListActiveComponent,
-    pathMatch: 'full'
+    component: OneCXAnnouncementListActiveComponent
   }
 ]
+
 @NgModule({
   declarations: [AnnouncementSearchComponent, AnnouncementDetailComponent, AnnouncementCriteriaComponent],
   imports: [
@@ -32,8 +33,7 @@ const routes: Routes = [
     [RouterModule.forChild(addInitializeModuleGuard(routes))],
     SharedModule
   ],
-  providers: [InitializeModuleGuard],
-  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
+  providers: [InitializeModuleGuard]
 })
 export class AnnouncementModule {
   constructor() {

src/app/app.module.ts

@@ -1,18 +1,15 @@
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'
+import { APP_INITIALIZER, NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { HttpClient, HttpClientModule } from '@angular/common/http'
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { RouterModule, Routes } from '@angular/router'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'
 
-import {
-  APP_CONFIG,
-  AppStateService,
-  createTranslateLoader,
-  translateServiceInitializer,
-  PortalCoreModule,
-  UserService
-} from '@onecx/portal-integration-angular'
 import { KeycloakAuthModule } from '@onecx/keycloak-auth'
+import { createTranslateLoader } from '@onecx/angular-accelerator'
+import { APP_CONFIG, AppStateService, UserService } from '@onecx/angular-integration-interface'
+import { translateServiceInitializer, PortalCoreModule } from '@onecx/portal-integration-angular'
 
 import { environment } from 'src/environments/environment'
 import { AppComponent } from './app.component'
@@ -28,13 +25,14 @@ const routes: Routes = [
   declarations: [AppComponent],
   imports: [
     CommonModule,
+    BrowserModule,
+    BrowserAnimationsModule,
     KeycloakAuthModule,
-    HttpClientModule,
+    PortalCoreModule.forRoot('onecx-announcement-ui'),
     RouterModule.forRoot(routes, {
       initialNavigation: 'enabledBlocking',
       enableTracing: true
     }),
-    PortalCoreModule.forRoot('onecx-announcement-ui'),
     TranslateModule.forRoot({
       isolate: true,
       loader: {
@@ -51,12 +49,12 @@ const routes: Routes = [
       useFactory: translateServiceInitializer,
       multi: true,
       deps: [UserService, TranslateService]
-    }
-  ],
-  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
+    },
+    provideHttpClient(withInterceptorsFromDi())
+  ]
 })
 export class AppModule {
   constructor() {
-    console.info('App Module constructor')
+    console.info('OneCX Announcement Module constructor')
   }
 }

src/app/onecx-announcement-remote.module.ts

@@ -1,23 +1,23 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http'
 import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'
-import { Router, RouterModule, Routes } from '@angular/router'
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { RouterModule, Routes, Router } from '@angular/router'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'
+import { TranslateLoader, TranslateModule, MissingTranslationHandler } from '@ngx-translate/core'
+
+import { AngularAuthModule } from '@onecx/angular-auth'
+import { createTranslateLoader } from '@onecx/angular-accelerator'
+import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents'
+import { addInitializeModuleGuard, AppStateService, ConfigurationService } from '@onecx/angular-integration-interface'
 import {
-  AppStateService,
-  ConfigurationService,
-  createTranslateLoader,
   PortalApiConfiguration,
   PortalCoreModule,
   PortalMissingTranslationHandler
 } from '@onecx/portal-integration-angular'
-import { addInitializeModuleGuard } from '@onecx/angular-integration-interface'
-import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents'
-import { AngularAuthModule } from '@onecx/angular-auth'
-import { AppEntrypointComponent } from './app-entrypoint.component'
+
 import { Configuration } from './shared/generated'
 import { environment } from 'src/environments/environment'
+import { AppEntrypointComponent } from './app-entrypoint.component'
 
 function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) {
   return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService)
@@ -33,11 +33,11 @@ const routes: Routes = [
 @NgModule({
   declarations: [AppEntrypointComponent],
   imports: [
+    AngularAuthModule,
     BrowserModule,
-    HttpClientModule,
     BrowserAnimationsModule,
-    RouterModule.forRoot(addInitializeModuleGuard(routes)),
     PortalCoreModule.forMicroFrontend(),
+    RouterModule.forRoot(addInitializeModuleGuard(routes)),
     TranslateModule.forRoot({
       isolate: true,
       loader: {
@@ -46,21 +46,19 @@ const routes: Routes = [
         deps: [HttpClient, AppStateService]
       },
       missingTranslationHandler: { provide: MissingTranslationHandler, useClass: PortalMissingTranslationHandler }
-    }),
-    AngularAuthModule
+    })
   ],
-  exports: [],
   providers: [
     ConfigurationService,
+    { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] },
     {
       provide: APP_INITIALIZER,
       useFactory: initializeRouter,
       multi: true,
       deps: [Router, AppStateService]
     },
-    { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] }
-  ],
-  schemas: []
+    provideHttpClient(withInterceptorsFromDi())
+  ]
 })
 export class OneCXAnnouncementModule implements DoBootstrap {
   constructor(private readonly injector: Injector) {

src/app/remotes/announcement-banner/announcement-banner.component.bootstrap.ts

@@ -1,13 +1,24 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { importProvidersFrom } from '@angular/core'
-import { OneCXAnnouncementBannerComponent } from './announcement-banner.component'
-import { bootstrapRemoteComponent } from '@onecx/angular-webcomponents'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { provideRouter } from '@angular/router'
+
 import { AngularAuthModule } from '@onecx/angular-auth'
+import { bootstrapRemoteComponent } from '@onecx/angular-webcomponents'
+
 import { environment } from 'src/environments/environment'
+import { OneCXAnnouncementBannerComponent } from './announcement-banner.component'
 
 bootstrapRemoteComponent(
   OneCXAnnouncementBannerComponent,
   'ocx-announcement-banner-component',
   environment.production,
-  [provideHttpClient(withInterceptorsFromDi()), importProvidersFrom(AngularAuthModule)]
+  [
+    provideHttpClient(withInterceptorsFromDi()),
+    importProvidersFrom(AngularAuthModule),
+    importProvidersFrom(BrowserModule),
+    importProvidersFrom(BrowserAnimationsModule),
+    provideRouter([{ path: '**', children: [] }])
+  ]
 )