fix: harmonize app setup files

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.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.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/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: [] }])
+  ]
 )

src/app/remotes/announcement-banner/announcement-banner.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="announcements$ | async as announcements">
   <p-carousel
     *ngIf="announcements && announcements.length > 0"
-    styleClass="mt-2 sm:mt-3 mb-0 sm:mb-1"
+    styleClass="mt-2 sm:mt-3 mb-0"
     [value]="announcements"
     [numVisible]="1"
     [numScroll]="1"
@@ -10,7 +10,7 @@
   >
     <ng-template let-announcement pTemplate="item">
       <div
-        class="p-2 border-round flex flex-row justify-content-between align-items-center"
+        class="py-2 px-1 border-round flex flex-row justify-content-between align-items-center"
         [ngClass]="
           announcement.priority === 'IMPORTANT'
             ? 'bg-red-100 text-red-800 border-red-600'
@@ -22,7 +22,7 @@
         "
       >
         <!-- content -->
-        <div class="px-1 sm:px-3 flex flex-row align-items-center column-gap-3 sm:column-gap-4">
+        <div class="px-1 sm:px-2 flex flex-row align-items-center column-gap-2 sm:column-gap-3">
           <span
             id="am_announcement_banner_icon"
             class="pi text-xl"
@@ -54,7 +54,10 @@
           id="am_announcement_banner_close"
           pButton
           icon="pi pi-times"
-          class="p-button-rounded p-button-text"
+          class="p-button-rounded p-button-text w-6rem p-3"
+          [class.text-red-800]="announcement.priority === 'IMPORTANT'"
+          [class.text-yellow-800]="announcement.priority === 'NORMAL'"
+          [class.text-blue-800]="announcement.priority === 'LOW'"
           (click)="hide(announcement.id!)"
           [attr.aria-label]="'ANNOUNCEMENT.BANNER.CLOSE' | translate"
           [pTooltip]="'ANNOUNCEMENT.BANNER.CLOSE' | translate"

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

@@ -1,20 +1,18 @@
 import { Component, Inject, Input } from '@angular/core'
-import { CommonModule, Location } from '@angular/common'
+import { Location } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
+import { TranslateLoader, TranslateService } from '@ngx-translate/core'
 import { BehaviorSubject, Observable, ReplaySubject, catchError, combineLatest, map, mergeMap, of } from 'rxjs'
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'
 import { CarouselModule } from 'primeng/carousel'
-import { TagModule } from 'primeng/tag'
-import { TooltipModule } from 'primeng/tooltip'
 
 import { AppStateService } from '@onecx/angular-integration-interface'
 import {
   AngularRemoteComponentsModule,
   BASE_URL,
-  RemoteComponentConfig,
   ocxRemoteComponent,
   ocxRemoteWebcomponent,
-  provideTranslateServiceForRoot
+  provideTranslateServiceForRoot,
+  RemoteComponentConfig
 } from '@onecx/angular-remote-components'
 import {
   AppConfigService,
@@ -33,17 +31,10 @@ import { environment } from 'src/environments/environment'
 
 @Component({
   selector: 'app-announcement-banner',
+  templateUrl: './announcement-banner.component.html',
+  styleUrls: ['./announcement-banner.component.scss'],
   standalone: true,
-  imports: [
-    AngularRemoteComponentsModule,
-    CommonModule,
-    PortalCoreModule,
-    TranslateModule,
-    SharedModule,
-    CarouselModule,
-    TagModule,
-    TooltipModule
-  ],
+  imports: [AngularRemoteComponentsModule, CarouselModule, PortalCoreModule, SharedModule],
   providers: [
     {
       provide: BASE_URL,
@@ -57,9 +48,7 @@ import { environment } from 'src/environments/environment'
         deps: [HttpClient, BASE_URL]
       }
     })
-  ],
-  templateUrl: './announcement-banner.component.html',
-  styleUrls: ['./announcement-banner.component.scss']
+  ]
 })
 export class OneCXAnnouncementBannerComponent implements ocxRemoteComponent, ocxRemoteWebcomponent {
   @Input() set ocxRemoteComponentConfig(config: RemoteComponentConfig) {
@@ -72,11 +61,11 @@ export class OneCXAnnouncementBannerComponent implements ocxRemoteComponent, ocx
 
   constructor(
     @Inject(BASE_URL) private readonly baseUrl: ReplaySubject<string>,
-    private readonly translateService: TranslateService,
-    private readonly apiV1: AnnouncementInternalAPIService,
+    private readonly appConfigService: AppConfigService,
     private readonly appStateService: AppStateService,
+    private readonly translateService: TranslateService,
     private readonly userService: UserService,
-    private readonly appConfigService: AppConfigService
+    private readonly announcementApi: AnnouncementInternalAPIService
   ) {
     this.userService.lang$.subscribe((lang) => this.translateService.use(lang))
     combineLatest([
@@ -88,7 +77,7 @@ export class OneCXAnnouncementBannerComponent implements ocxRemoteComponent, ocx
         mergeMap(([_, currentWorkspace, currentMfe]) => {
           return currentMfe.productName === 'onecx-welcome'
             ? of([]) // exclude onecx-welcome
-            : this.apiV1
+            : this.announcementApi
                 .searchAnnouncementBanners({
                   announcementBannerSearchCriteria: {
                     workspaceName: currentWorkspace.workspaceName,
@@ -123,7 +112,7 @@ export class OneCXAnnouncementBannerComponent implements ocxRemoteComponent, ocx
   }
 
   ocxInitRemoteComponent(config: RemoteComponentConfig): void {
-    this.apiV1.configuration = new Configuration({
+    this.announcementApi.configuration = new Configuration({
       basePath: Location.joinWithSlash(config.baseUrl, environment.apiPrefix)
     })
     this.baseUrl.next(config.baseUrl)

src/app/remotes/announcement-list-active/announcement-list-active.component.bootstrap.ts

@@ -1,13 +1,13 @@
 import { importProvidersFrom } from '@angular/core'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
 import { bootstrapRemoteComponent } from '@onecx/angular-webcomponents'
 import { AngularAuthModule } from '@onecx/angular-auth'
 
 import { environment } from 'src/environments/environment'
 import { OneCXAnnouncementListActiveComponent } from './announcement-list-active.component'
-import { BrowserModule } from '@angular/platform-browser'
 
 bootstrapRemoteComponent(
   OneCXAnnouncementListActiveComponent,