feat: standalone mode

libs/angular-accelerator/package.json

@@ -10,15 +10,19 @@
     "@angular/platform-browser": "^18.0.5",
     "@angular/router": "^18.0.5",
     "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "@ngneat/until-destroy": "^10.0.0",
     "@onecx/integration-interface": "^5.29.0",
+    "@onecx/accelerator": "^5.29.0",
     "@onecx/angular-integration-interface": "^5.29.0",
     "@onecx/angular-remote-components": "^5.29.0",
     "@onecx/angular-testing": "^5.29.0",
+    "@onecx/angular-utils": "^5.29.0",
     "chart.js": "^4.4.3",
     "d3-scale-chromatic": "^3.1.0",
     "rxjs": "~7.8.1",
-    "primeng": "^17.18.6"
+    "primeng": "^17.18.6",
+    "@storybook/angular": "^8.3.2"
   },
   "dependencies": {},
   "exports": {

libs/angular-accelerator/project.json

@@ -63,7 +63,7 @@
         "lintFilePatterns": [
           "libs/angular-accelerator/**/*.ts",
           "libs/angular-accelerator/**/*.html",
-          "libx/angular-accelerator/package.json"
+          "libs/angular-accelerator/package.json"
         ]
       }
     },

libs/angular-accelerator/src/index.ts

@@ -1,3 +1,6 @@
+// injection tokens + related utilities
+export * from './lib/injection-tokens/has-permission-checker'
+
 // directives
 export * from './lib/directives/if-permission.directive'
 export * from './lib/directives/if-breakpoint.directive'

libs/angular-accelerator/src/lib/angular-accelerator.module.ts

@@ -1,5 +1,14 @@
 import { CommonModule } from '@angular/common'
-import { APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core'
+import {
+  APP_INITIALIZER,
+  Injector,
+  LOCALE_ID,
+  NgModule,
+  Optional,
+  Provider,
+  SkipSelf,
+  StaticProvider,
+} from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MissingTranslationHandler, MissingTranslationHandlerParams, TranslateModule } from '@ngx-translate/core'
@@ -24,7 +33,8 @@ import { DataLoadingErrorComponent } from './components/data-loading-error/data-
 import { SearchHeaderComponent } from './components/search-header/search-header.component'
 import { AdvancedDirective } from './directives/advanced.directive'
 import { IfBreakpointDirective } from './directives/if-breakpoint.directive'
-import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from './directives/if-permission.directive'
+import { IfPermissionDirective } from './directives/if-permission.directive'
+import { HAS_PERMISSION_CHECKER, HasPermissionChecker, TRANSLATION_PATH } from '@onecx/angular-utils'
 import { SrcDirective } from './directives/src.directive'
 import { TooltipOnOverflowDirective } from './directives/tooltipOnOverflow.directive'
 import { DynamicPipe } from './pipes/dynamic.pipe'
@@ -45,6 +55,31 @@ function appInitializer(userService: UserService) {
   }
 }
 
+function hasPermissionCheckerFactory(parentInjector: Injector, hasPermissionChecker: HasPermissionChecker) {
+  if (!hasPermissionChecker) {
+    const hasUserService = !!parentInjector.get(UserService, null)
+    const injectorConfig: {
+      providers: Array<Provider | StaticProvider>
+      parent?: Injector
+      name?: string
+    } = {
+      providers: [
+        {
+          provide: HAS_PERMISSION_CHECKER,
+          useExisting: UserService,
+        },
+      ],
+      parent: parentInjector,
+    }
+    if (!hasUserService) {
+      injectorConfig.providers.push(UserService)
+    }
+    const injector = Injector.create(injectorConfig)
+    hasPermissionChecker = injector.get(HAS_PERMISSION_CHECKER)
+  }
+  return hasPermissionChecker
+}
+
 @NgModule({
   imports: [
     CommonModule,
@@ -86,14 +121,25 @@ function appInitializer(userService: UserService) {
     },
     {
       provide: HAS_PERMISSION_CHECKER,
-      useExisting: UserService,
+      useFactory: hasPermissionCheckerFactory,
+      deps: [Injector, [new Optional(), new SkipSelf(), HAS_PERMISSION_CHECKER]],
     },
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializer,
       deps: [UserService],
       multi: true,
     },
+    {
+      provide: TRANSLATION_PATH,
+      useValue: './onecx-angular-accelerator/assets/i18n/',
+      multi: true
+    },
+    {
+      provide: TRANSLATION_PATH,
+      useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
+      multi: true
+    },
     AppConfigService,
   ],
   exports: [

libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts

@@ -11,9 +11,10 @@ import { UserService } from '@onecx/angular-integration-interface'
 import { MockUserService } from '@onecx/angular-integration-interface/mocks'
 import { StorybookTranslateModule } from './../../storybook-translate.module'
 import { DataListGridComponent } from './data-list-grid.component'
-import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from '../../directives/if-permission.directive'
+import { IfPermissionDirective } from '../../directives/if-permission.directive'
 import { TooltipOnOverflowDirective } from '../../directives/tooltipOnOverflow.directive'
 import { MockAuthModule } from '../../mock-auth/mock-auth.module'
+import { HAS_PERMISSION_CHECKER } from '@onecx/angular-utils'
 
 const DataListGridComponentSBConfig: Meta<DataListGridComponent> = {
   title: 'Components/DataListGridComponent',

libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts

@@ -10,12 +10,13 @@ import { MockUserService } from '@onecx/angular-integration-interface/mocks'
 import { DataTableComponent } from './data-table.component'
 import { StorybookTranslateModule } from './../../storybook-translate.module'
 import { MockAuthModule } from '../../mock-auth/mock-auth.module'
-import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from '../../directives/if-permission.directive'
+import { IfPermissionDirective } from '../../directives/if-permission.directive'
 import { ColumnType } from '../../model/column-type.model'
 import { MenuModule } from 'primeng/menu'
 import { DynamicLocaleId } from '../../utils/dynamic-locale-id'
 import { CheckboxModule } from 'primeng/checkbox'
 import { FormsModule } from '@angular/forms'
+import { HAS_PERMISSION_CHECKER } from '@onecx/angular-utils'
 
 type DataTableInputTypes = Pick<DataTableComponent, 'rows' | 'columns' | 'emptyResultsMessage' | 'selectedRows'>
 

libs/angular-accelerator/src/lib/directives/if-permission.directive.ts

@@ -2,7 +2,6 @@ import {
   Directive,
   ElementRef,
   Inject,
-  InjectionToken,
   Input,
   OnInit,
   Optional,
@@ -11,21 +10,7 @@ import {
   ViewContainerRef,
 } from '@angular/core'
 import { UserService } from '@onecx/angular-integration-interface'
-
-export interface HasPermissionChecker {
-  hasPermission(permissionKey: string): boolean
-}
-
-/**
- * This checker always returns true, basically disabling the permission system on the UI side
- */
-export class AlwaysGrantPermissionChecker implements HasPermissionChecker {
-  hasPermission(_permissionKey: string): boolean {
-    return true
-  }
-}
-
-export const HAS_PERMISSION_CHECKER = new InjectionToken<HasPermissionChecker>('hasPermission')
+import { HAS_PERMISSION_CHECKER, HasPermissionChecker } from '@onecx/angular-utils'
 
 @Directive({ selector: '[ocxIfPermission], [ocxIfNotPermission]' })
 export class IfPermissionDirective implements OnInit {

libs/angular-accelerator/src/lib/injection-tokens/has-permission-checker.ts

@@ -0,0 +1,15 @@
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
+export { HasPermissionChecker } from '@onecx/angular-utils'
+
+/**
+ * This checker always returns true, basically disabling the permission system on the UI side
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
+export { AlwaysGrantPermissionChecker } from '@onecx/angular-utils'
+
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
+export { HAS_PERMISSION_CHECKER } from '@onecx/angular-utils'

libs/angular-accelerator/src/lib/services/translation-cache.service.ts

@@ -17,6 +17,9 @@ declare global {
   }
 }
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 @Injectable({ providedIn: 'root' })
 export class TranslationCacheService implements OnDestroy {
   private translationTopic$ = new TranslationCacheTopic()

libs/angular-accelerator/src/lib/utils/async-translate-loader.utils.ts

@@ -1,6 +1,9 @@
 import { TranslateLoader } from '@ngx-translate/core'
 import { defaultIfEmpty, first, mergeMap, Observable, of, tap } from 'rxjs'
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export class AsyncTranslateLoader implements TranslateLoader {
   static lastTimerId = 0
   timerId = AsyncTranslateLoader.lastTimerId++

libs/angular-accelerator/src/lib/utils/caching-translate-loader.utils.ts

@@ -4,6 +4,9 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'
 import { Observable } from 'rxjs'
 import { TranslationCacheService } from '../services/translation-cache.service'
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export class CachingTranslateLoader implements TranslateLoader {
   private translateLoader: TranslateHttpLoader
 

libs/angular-accelerator/src/lib/utils/create-translate-loader.utils.ts

@@ -11,6 +11,9 @@ import { TranslateCombinedLoader } from './translate.combined.loader'
 
 let lastTranslateLoaderTimerId = 0
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export function createTranslateLoader(
   http: HttpClient,
   appStateService: AppStateService,

libs/angular-accelerator/src/lib/utils/translate.combined.loader.ts

@@ -1,5 +1,9 @@
 import { TranslateLoader } from '@ngx-translate/core'
 import { Observable, catchError, forkJoin, map, of } from 'rxjs'
+
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export class TranslateCombinedLoader implements TranslateLoader {
   private _loaders: TranslateLoader[]
   constructor(...loaders: TranslateLoader[]) {

libs/angular-integration-interface/src/lib/services/configuration.service.ts

@@ -42,11 +42,9 @@ export class ConfigurationService implements OnDestroy {
 
       loadConfigPromise
         .then(async (config) => {
-          if (config) {
-            await this.config$.publish({ ...this.defaultConfig, ...config }).then(() => {
-              resolve(true)
-            })
-          }
+          await this.config$.publish({ ...this.defaultConfig, ...(config ?? {}) }).then(() => {
+            resolve(true)
+          })
         })
         .catch((e) => {
           console.log(`Failed to load env configuration`)

libs/angular-testing/project.json

@@ -48,7 +48,8 @@
       "options": {
         "lintFilePatterns": [
           "libs/angular-testing/**/*.ts",
-          "libs/angular-testing/**/*.html"
+          "libs/angular-testing/**/*.html",
+          "libs/angular-testing/package.json"
         ]
       }
     },

libs/angular-utils/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ocx",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}