Layout of announcement detail in list-active AND fix loading remote c…

…omponents (#224)

* feat: fix including remote component

* fix: layout of announcement detail in list-active

package.json

@@ -37,7 +37,6 @@
   "dependencies": {
     "@angular-architects/module-federation": "18.0.4",
     "@angular/animations": "^18.1.2",
-    "@angular/cdk": "^18.1.3",
     "@angular/common": "^18.1.2",
     "@angular/compiler": "^18.1.2",
     "@angular/core": "^18.1.2",
@@ -64,17 +63,19 @@
     "@onecx/portal-integration-angular": "^5.9.4",
     "@onecx/portal-layout-styles": "^5.9.4",
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "file-saver": "^2.0.5",
     "keycloak-angular": "^16.0.1",
-    "ngx-color": "^9.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.8",
-    "rxjs": "7.8.1",
-    "tslib": "^2.6.3",
-    "zone.js": "~0.14.8"
+    "primeng": "^17.18.9",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.7.0",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
+    "@angular/cdk": "^18.1.3",
+    "@angular/cli": "~18.1.2",
+    "@angular/compiler-cli": "^18.1.2",
+    "@angular/language-service": "^18.1.2",
     "@angular-devkit/build-angular": "^18.1.2",
     "@angular-devkit/core": "^18.1.2",
     "@angular-devkit/schematics": "^18.1.2",
@@ -83,9 +84,6 @@
     "@angular-eslint/eslint-plugin-template": "^18.3.0",
     "@angular-eslint/schematics": "^18.3.0",
     "@angular-eslint/template-parser": "^18.3.0",
-    "@angular/cli": "~18.1.2",
-    "@angular/compiler-cli": "^18.1.2",
-    "@angular/language-service": "^18.1.2",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@openapitools/openapi-generator-cli": "^2.13.4",

src/app/announcement/announcement-search/announcement-search.component.spec.ts

@@ -1,7 +1,7 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
-import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing'
 import { HttpClient } from '@angular/common/http'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing'
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { of, throwError } from 'rxjs'
 

src/app/app.component.spec.ts

@@ -1,6 +1,6 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { AppComponent } from './app.component'
-import { NO_ERRORS_SCHEMA } from '@angular/core'
 
 describe('AppComponent', () => {
   beforeEach(async () => {

src/app/app.module.ts

@@ -2,8 +2,6 @@ import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } f
 import { CommonModule } from '@angular/common'
 import { HttpClient, HttpClientModule } 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 {
@@ -16,8 +14,8 @@ import {
 } from '@onecx/portal-integration-angular'
 import { KeycloakAuthModule } from '@onecx/keycloak-auth'
 
-import { AppComponent } from './app.component'
 import { environment } from 'src/environments/environment'
+import { AppComponent } from './app.component'
 
 const routes: Routes = [
   {
@@ -30,10 +28,8 @@ const routes: Routes = [
   declarations: [AppComponent],
   imports: [
     CommonModule,
-    BrowserModule,
-    HttpClientModule,
     KeycloakAuthModule,
-    BrowserAnimationsModule,
+    HttpClientModule,
     RouterModule.forRoot(routes, {
       initialNavigation: 'enabledBlocking',
       enableTracing: true

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

@@ -0,0 +1,2 @@
+/* eslint-disable prettier/prettier */
+import('./announcement-banner.component.bootstrap').catch((err) => console.error(err))

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

@@ -1,13 +1,16 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { importProvidersFrom } from '@angular/core'
-import { OneCXAnnouncementListActiveComponent } from './announcement-list-active.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideAnimations } 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'
 
 bootstrapRemoteComponent(
   OneCXAnnouncementListActiveComponent,
   'ocx-announcement-list-active-component',
   environment.production,
-  [provideHttpClient(withInterceptorsFromDi()), importProvidersFrom(AngularAuthModule)]
+  [provideHttpClient(withInterceptorsFromDi()), importProvidersFrom(AngularAuthModule), provideAnimations()]
 )

src/app/remotes/announcement-list-active/announcement-list-active.component.html

@@ -5,11 +5,11 @@
       <a
         *ngFor="let announcement of announcements; let i = index"
         class="announcement-row block flex flex-row flex-nowrap justify-content-start align-items-center column-gap-3 hover:font-bold cursor-pointer border-none border-bottom-1 border-solid border-gray-400"
-        (click)="announcementContent.toggle($event)"
+        (click)="detailDialog.toggle($event)"
       >
         <div class="font-bold" aria-hidden="true">
           <div
-            id="am_list_active_data_row_' + i + '_icon"
+            [id]="'am_list_active_data_row_' + i + '_icon'"
             class="pi text-base md:text-xl"
             [ngClass]="
               announcement.type === 'EVENT'
@@ -38,24 +38,36 @@
         </div>
 
         <!-- DETAIL -->
-        <p-overlayPanel #announcementContent>
-          <a class="" (click)="announcementContent.toggle($event)">
-            <div class="flex flex-column row-gap-2 px-1">
-              <div
-                [id]="'am_list_active_data_row_' + i + '_detail_icon'"
-                class="pi text-xl"
-                [ngClass]="
-                  announcement.type === 'EVENT'
-                    ? 'pi-calendar'
-                    : announcement.type === 'INFO'
-                      ? 'pi-info-circle'
-                      : announcement.type === 'SYSTEM_MAINTENANCE'
-                        ? 'pi-wrench'
-                        : 'pi-info-circle'
-                "
-              ></div>
+        <p-overlayPanel
+          #detailDialog
+          [dismissable]="true"
+          [showCloseIcon]="false"
+          styleClass="sm:m-0 w-11 sm:max-w-28rem md:max-w-30rem"
+        >
+          <div class="flex flex-column row-gap-2 px-1">
+            <div
+              [id]="'am_list_active_data_row_' + i + '_detail_icon'"
+              class="pi text-base sm:text-lg md:text-xl"
+              [ngClass]="
+                announcement.type === 'EVENT'
+                  ? 'pi-calendar'
+                  : announcement.type === 'INFO'
+                    ? 'pi-info-circle'
+                    : announcement.type === 'SYSTEM_MAINTENANCE'
+                      ? 'pi-wrench'
+                      : 'pi-info-circle'
+              "
+            ></div>
+            <div
+              [id]="'am_list_active_data_row_' + i + '_detail_title'"
+              class="text-sm sm:text-base md:text-lg font-bold"
+            >
+              {{ announcement.title }}
             </div>
-          </a>
+            <div [id]="'am_list_active_data_row_' + i + '_detail_content'" class="text-xs sm:text-sm md:text-base">
+              {{ announcement.content }}
+            </div>
+          </div>
         </p-overlayPanel>
       </a>
     </div>

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

@@ -0,0 +1,2 @@
+/* eslint-disable prettier/prettier */
+import('./announcement-list-active.component.bootstrap').catch((err) => console.error(err))