Fix app setup files and various things

package.json

@@ -68,7 +68,7 @@
     "ngx-color": "^9.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.10",
+    "primeng": "^17.18.11",
     "rxjs": "7.8.1",
     "tslib": "^2.7.0"
   },
@@ -86,7 +86,7 @@
     "@angular/language-service": "^18.2.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@openapitools/openapi-generator-cli": "^2.13.4",
+    "@openapitools/openapi-generator-cli": "^2.15.3",
     "@schematics/angular": "^18.2.5",
     "@types/jasmine": "~5.1.4",
     "@types/node": "22.7.4",
@@ -98,7 +98,7 @@
     "eslint-plugin-import": "2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.6",
-    "jasmine-core": "~5.2.0",
+    "jasmine-core": "~5.4.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",

src/app/_th-mixins.scss

@@ -490,6 +490,16 @@
     }
   }
 }
+
+@mixin tabview-fix-color-selected-tab {
+  :host ::ng-deep {
+    // correct the background color on inital selected tab
+    .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link[aria-selected='true'] {
+      background-color: rgba(var(--primary-color-rgb), 0.12);
+    }
+  }
+}
+
 /* **********************************************
  *  TABLE
  * **********************************************/

src/app/app.module.ts

@@ -1,38 +1,39 @@
-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, 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'
-import { environment } from '../environments/environment'
 
-const routes: Routes = [{ path: '', pathMatch: 'full' }]
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./theme/theme.module').then((m) => m.ThemeModule)
+  }
+]
+
 @NgModule({
   bootstrap: [AppComponent],
   declarations: [AppComponent],
   imports: [
     CommonModule,
     BrowserModule,
-    KeycloakAuthModule,
     BrowserAnimationsModule,
+    KeycloakAuthModule,
+    PortalCoreModule.forRoot('onecx-theme-ui'),
     RouterModule.forRoot(routes, {
       initialNavigation: 'enabledBlocking',
       enableTracing: true
     }),
-    PortalCoreModule.forRoot('onecx-theme-ui'),
     TranslateModule.forRoot({
       isolate: true,
       loader: {
@@ -51,11 +52,10 @@ const routes: Routes = [{ path: '', pathMatch: 'full' }]
       deps: [UserService, TranslateService]
     },
     provideHttpClient(withInterceptorsFromDi())
-  ],
-  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class AppModule {
   constructor() {
-    console.info('App Module constructor')
+    console.info('OneCX Theme Module constructor')
   }
 }

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

@@ -1,26 +1,25 @@
+import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { RouterModule, Routes, Router } from '@angular/router'
 import { BrowserModule } from '@angular/platform-browser'
-import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'
-import { Router, RouterModule, Routes } from '@angular/router'
-import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+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 { AppEntrypointComponent } from './app-entrypoint.component'
-import { AngularAuthModule } from '@onecx/angular-auth'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { environment } from 'src/environments/environment'
-import { Configuration } from './shared/generated'
 import { SLOT_SERVICE, SlotService } from '@onecx/angular-remote-components'
 
+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)
 }
@@ -35,8 +34,8 @@ const routes: Routes = [
   declarations: [AppEntrypointComponent],
   imports: [
     AngularAuthModule,
-    BrowserAnimationsModule,
     BrowserModule,
+    BrowserAnimationsModule,
     PortalCoreModule.forMicroFrontend(),
     RouterModule.forRoot(addInitializeModuleGuard(routes)),
     TranslateModule.forRoot({
@@ -49,20 +48,18 @@ const routes: Routes = [
       missingTranslationHandler: { provide: MissingTranslationHandler, useClass: PortalMissingTranslationHandler }
     })
   ],
-  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] },
     { provide: SLOT_SERVICE, useExisting: SlotService },
     provideHttpClient(withInterceptorsFromDi())
-  ],
-  schemas: []
+  ]
 })
 export class OneCXThemeModule implements DoBootstrap {
   constructor(private readonly injector: Injector) {

src/app/shared/generated/.openapi-generator/FILES

@@ -32,6 +32,5 @@ model/themeSnapshot.ts
 model/themeUpdateCreate.ts
 model/updateThemeRequest.ts
 model/updateThemeResponse.ts
-model/workspace.ts
 param.ts
 variables.ts

src/app/shared/generated/model/getThemeResponse.ts

@@ -10,11 +10,9 @@
  * Do not edit the class manually.
  */
 import { Theme } from './theme';
-import { Workspace } from './workspace';
 
 
 export interface GetThemeResponse { 
     resource: Theme;
-    workspaces?: Array<Workspace>;
 }
 

src/app/shared/generated/model/models.ts

@@ -20,4 +20,3 @@ export * from './themeSnapshot';
 export * from './themeUpdateCreate';
 export * from './updateThemeRequest';
 export * from './updateThemeResponse';
-export * from './workspace';

src/app/shared/utils.spec.ts

@@ -125,6 +125,24 @@ describe('util functions', () => {
   })
 
   describe('bffImageUrl', () => {
+    it('should return a correct image path', () => {
+      const basePath = 'base'
+      const name = 'name'
+
+      const preparedUrl = bffImageUrl(basePath, name, RefType.Logo)
+
+      expect(preparedUrl).toBe('base/images/name/logo')
+    })
+
+    it('should return a path without base', () => {
+      const basePath = undefined
+      const name = 'name'
+
+      const preparedUrl = bffImageUrl(basePath, name)
+
+      expect(preparedUrl).toBe('/images/name/logo')
+    })
+
     it('should return empty string if no name is provided', () => {
       const basePath = 'base'
       const name = undefined

src/app/shared/utils.ts

@@ -44,8 +44,8 @@ export function prepareUrlPath(url?: string, path?: string): string {
   else if (url) return url
   else return ''
 }
-export function bffImageUrl(basePath: string | undefined, name: string | undefined, refType: RefType): string {
-  return !name ? '' : basePath + '/images/' + name + '/' + refType
+export function bffImageUrl(basePath: string | undefined, name: string | undefined, refType?: RefType): string {
+  return !name ? '' : (basePath ?? '') + '/images/' + name + '/' + (refType ?? RefType.Logo)
 }
 
 /**

src/app/theme/theme-designer/theme-designer.component.html

@@ -18,7 +18,7 @@
           <p-inputSwitch
             inputId="th_designer_header_is_current_theme"
             name="autoApplyToggle"
-            [disabled]="themeIsCurrentUsedTheme"
+            [disabled]="autoApply"
             [(ngModel)]="autoApply"
             [pTooltip]="'THEME.DETAIL.AUTO_APPLY' | translate"
             tooltipPosition="top"
@@ -27,7 +27,7 @@
           <label for="th_designer_header_is_current_theme">{{ 'THEME.DETAIL.AUTO_APPLY' | translate }}</label>
         </div>
         <span
-          *ngIf="themeIsCurrentUsedTheme"
+          *ngIf="autoApply"
           class="pi pi-bolt text-primary font-medium"
           [pTooltip]="'THEME.DETAIL.AUTO_APPLY_CURRENT_THEME' | translate"
           tooltipPosition="top"
@@ -38,11 +38,10 @@
           <span class="p-float-label">
             <p-dropdown
               #themeTemplate
-              inputId="th_designer_fields_selected_theme"
+              inputId="th_designer_template_"
               [options]="themeTemplates"
               styleClass="w-full"
-              [(ngModel)]="themeTemplateSelectedId"
-              (onChange)="onThemeTemplateDropdownChange()"
+              (onChange)="onThemeTemplateDropdownChange($event)"
               [showClear]="false"
               [autoDisplayFirst]="false"
               [pTooltip]="'THEME.TEMPLATE.SELECTOR.TOOLTIP' | translate"
@@ -62,7 +61,7 @@
             <span>{{ 'THEME.GROUPS.BASE' | translate }}</span>
           </ng-template>
           <div [formGroup]="basicForm" class="grid grid-nogutter formgrid p-fluid mx-1">
-            <div *ngIf="changeMode === 'NEW'" class="field col-12 mb-4">
+            <div *ngIf="changeMode === 'CREATE'" class="field col-12 mb-4">
               <span class="p-float-label" controlErrorAnchor>
                 <input
                   pInputText
@@ -141,7 +140,7 @@
                   pButton
                   id="th_designer_field_logo_upload"
                   icon="pi pi-upload"
-                  [disabled]="changeMode === 'NEW'"
+                  [disabled]="changeMode === 'CREATE'"
                   class="action-button p-button-icon-only"
                   (click)="selectedFileInputLogo.click()"
                   [pTooltip]="'IMAGE.TOOLTIPS.UPLOAD' | translate"
@@ -179,7 +178,7 @@
                   pButton
                   id="th_designer_field_favicon_upload"
                   icon="pi pi-upload"
-                  [disabled]="changeMode === 'NEW'"
+                  [disabled]="changeMode === 'CREATE'"
                   class="action-button p-button-icon-only"
                   (click)="selectedFileInputFavicon.click()"
                   [pTooltip]="'IMAGE.TOOLTIPS.UPLOAD' | translate"