fix: combine zebra look with frozen columns (#289)

src/app/_apm-mixins.scss

@@ -421,13 +421,14 @@
 }
 @mixin table-zebra-rows {
   :host ::ng-deep {
-    .p-datatable .p-datatable-tbody > tr:nth-child(even) > td {
+    /* this works only on non-frozen columns (table.p-datatable-striped does not work) */
+    .p-datatable .p-datatable-tbody > tr:nth-child(even) > td:not(.p-frozen-column) {
       background-color: var(--table-body-row-even-bg);
     }
   }
 }
 
-/* LISTBOX*/
+/* LISTBOX */
 @mixin listbox-layout {
   :host ::ng-deep {
     .p-listbox {

src/app/app.component.spec.ts

@@ -17,9 +17,9 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy()
   })
 
-  it(`should have as title 'onecx-permission-ui'`, () => {
+  it(`should have as title 'onecx-ui'`, () => {
     const fixture = TestBed.createComponent(AppComponent)
     const app = fixture.componentInstance
-    expect(app.title).toEqual('onecx-permission-ui')
+    expect(app.title).toEqual('onecx-ui')
   })
 })

src/app/app.component.ts

@@ -5,5 +5,5 @@ import { Component } from '@angular/core'
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  title = 'onecx-permission-ui'
+  title = 'onecx-ui'
 }

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

@@ -1,24 +1,23 @@
+import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 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 { RouterModule, Routes, Router } from '@angular/router'
+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 { 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)
@@ -34,8 +33,8 @@ const routes: Routes = [
   declarations: [AppEntrypointComponent],
   imports: [
     AngularAuthModule,
-    BrowserAnimationsModule,
     BrowserModule,
+    BrowserAnimationsModule,
     PortalCoreModule.forMicroFrontend(),
     RouterModule.forRoot(addInitializeModuleGuard(routes)),
     TranslateModule.forRoot({
@@ -48,19 +47,17 @@ 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] },
     provideHttpClient(withInterceptorsFromDi())
-  ],
-  schemas: []
+  ]
 })
 export class OneCXPermissionModule implements DoBootstrap {
   constructor(private readonly injector: Injector) {

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

@@ -28,7 +28,7 @@
       *ngIf="!exceptionKey && !loadingApp && !loadingPermissions"
       #permissionTable
       id="apm_app_detail_permission_table"
-      styleClass="pb-2 px-3 p-datatable-striped"
+      styleClass="pb-2 px-3"
       [columns]="rolesFiltered"
       [value]="permissionRows"
       [globalFilterFields]="filterBy"

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

@@ -1,15 +1,16 @@
 @import '/src/app/_apm-mixins.scss';
 
+@include danger-action;
+@include prepare-inputgroup;
 @include correct-data-view-control;
 @include correct-select-button;
 @include search-criteria-select-button;
 @include search-criteria-select-button-slim;
 @include search-criteria-select-button-filter;
-@include table-inline-buttons;
 @include compact-dropdown-list-items;
-@include danger-action;
-@include prepare-inputgroup;
 @include dataview-list-zebra-rows;
+@include table-zebra-rows;
+@include table-inline-buttons;
 
 :host ::ng-deep {
   .word-break-all {

src/app/shared/shared.module.ts

@@ -1,4 +1,4 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
@@ -11,6 +11,7 @@ import { ConfirmationService } from 'primeng/api'
 import { DataViewModule } from 'primeng/dataview'
 import { DialogModule } from 'primeng/dialog'
 import { DropdownModule } from 'primeng/dropdown'
+import { FileUploadModule } from 'primeng/fileupload'
 import { InputTextModule } from 'primeng/inputtext'
 import { InputTextareaModule } from 'primeng/inputtextarea'
 import { KeyFilterModule } from 'primeng/keyfilter'
@@ -20,7 +21,6 @@ import { SelectButtonModule } from 'primeng/selectbutton'
 import { TableModule } from 'primeng/table'
 import { TabViewModule } from 'primeng/tabview'
 import { ToastModule } from 'primeng/toast'
-import { FileUploadModule } from 'primeng/fileupload'
 
 import { PortalCoreModule } from '@onecx/portal-integration-angular'
 
@@ -99,7 +99,6 @@ import { LabelResolver } from './label.resolver'
         )
       }
     })
-  ],
-  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class SharedModule {}