@rxap/plugin-angular 16.1.0-dev.12 → 16.1.0-dev.14

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [16.1.0-dev.14](https://gitlab.com/rxap/packages/compare/@rxap/plugin-angular@16.1.0-dev.13...@rxap/plugin-angular@16.1.0-dev.14) (2023-09-03)
+
+### Bug Fixes
+
+- adapt to new layout routing concept ([f068b7e](https://gitlab.com/rxap/packages/commit/f068b7ed9261c92082913e5ecd87084633b434a6))
+- add logo.png to application assets if not exists ([c0e7a73](https://gitlab.com/rxap/packages/commit/c0e7a73046bf1af007fa7d24da83d9917451bb35))
+- animation loading issue ([5e241ed](https://gitlab.com/rxap/packages/commit/5e241ed4b9e83575b881f06214255c6f1d2937ce))
+- ensure the localize init polyfill is added ([ee44428](https://gitlab.com/rxap/packages/commit/ee44428279261e6068979f8d6a669ad83cb545ff))
+- if the application is monolithic then open-api is required ([dc2227f](https://gitlab.com/rxap/packages/commit/dc2227f460df2bb27c4e58dd27f70d5ba7eccef1))
+- remove support for open-api client sdk packages ([ace153f](https://gitlab.com/rxap/packages/commit/ace153f977690e7714c3c4110600e2a8916a0d52))
+- split app and layout routes ([1e7c540](https://gitlab.com/rxap/packages/commit/1e7c54055ed8f7fc4fb4dc710097783cab761813))
+
+### Features
+
+- add the mdi asset ([4e973c2](https://gitlab.com/rxap/packages/commit/4e973c23866ca1771d428f0382085614da29a801))
+- init application styles ([5963c4d](https://gitlab.com/rxap/packages/commit/5963c4df5f41d023f234abcde444183972e2157f))
+
+# [16.1.0-dev.13](https://gitlab.com/rxap/packages/compare/@rxap/plugin-angular@16.1.0-dev.12...@rxap/plugin-angular@16.1.0-dev.13) (2023-09-02)
+
+### Features
+
+- add cleanup generator ([844d050](https://gitlab.com/rxap/packages/commit/844d0504ea65e41d22f4cd90b2b9c266ee93f489))
+- add init-feature generator ([8925c31](https://gitlab.com/rxap/packages/commit/8925c31b1a2f396b5b5e753a71786b10d45afe57))
+- add support for monolithic angular init ([270e1e2](https://gitlab.com/rxap/packages/commit/270e1e2ce27b427615ee97f5bb72fb5dad1fe095))
+
 # [16.1.0-dev.12](https://gitlab.com/rxap/packages/compare/@rxap/plugin-angular@16.1.0-dev.11...@rxap/plugin-angular@16.1.0-dev.12) (2023-08-31)
 
 ### Bug Fixes

package/README.md

@@ -19,7 +19,7 @@ yarn add @rxap/plugin-angular
 ```
 **Install peer dependencies:**
 ```bash
-yarn add @nx/devkit@^16.5.0 @rxap/generator-utilities@^1.1.0-dev.7 @rxap/plugin-localazy@^16.1.0-dev.6 @rxap/plugin-utilities@^16.1.0-dev.9 @rxap/ts-morph@^0.1.0-dev.0 @rxap/workspace-ts-morph@^0.1.0-dev.3 @rxap/workspace-utilities@^0.1.0-dev.6 nx@^16.5.0 ts-morph@^18.0.0 
+yarn add @nx/devkit@^16.5.0 @rxap/generator-utilities@^1.1.0-dev.7 @rxap/plugin-localazy@^16.1.0-dev.6 @rxap/plugin-utilities@^16.1.0-dev.9 @rxap/ts-morph@^0.1.0-dev.2 @rxap/workspace-ts-morph@^0.1.0-dev.3 @rxap/workspace-utilities@^0.1.0-dev.7 nx@^16.5.0 ts-morph@^18.0.0 
 ```
 **Execute the init generator:**
 ```bash
@@ -62,6 +62,13 @@ yarn nx g @rxap/plugin-angular:fix-schematic
 yarn nx g @rxap/plugin-angular:schematic
 ```
 
+## init-feature
+> init-feature generator
+
+```bash
+yarn nx g @rxap/plugin-angular:init-feature
+```
+
 ## init
 > init generator
 
@@ -96,6 +103,13 @@ yarn nx g @rxap/plugin-angular:fix-schematic
 ```bash
 yarn nx g @rxap/plugin-angular:schematic
 ```
+
+## init-feature
+> init-feature generator
+
+```bash
+yarn nx g @rxap/plugin-angular:init-feature
+```
 # Executors
 
 ## tailwind

package/generators.json

@@ -24,6 +24,11 @@
       "factory": "./src/generators/schematic/generator",
       "schema": "./src/generators/schematic/schema.json",
       "description": "Create a Schematic for a project."
+    },
+    "init-feature": {
+      "factory": "./src/generators/init-feature/generator",
+      "schema": "./src/generators/init-feature/schema.json",
+      "description": "init-feature generator"
     }
   },
   "schematics": {
@@ -51,6 +56,11 @@
       "factory": "./src/generators/schematic/index",
       "schema": "./src/generators/schematic/schema.json",
       "description": "Create a Schematic for a project."
+    },
+    "init-feature": {
+      "factory": "./src/generators/init-feature/index",
+      "schema": "./src/generators/init-feature/schema.json",
+      "description": "init-feature generator"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxap/plugin-angular",
-  "version": "16.1.0-dev.12",
+  "version": "16.1.0-dev.14",
   "type": "commonjs",
   "generators": "./generators.json",
   "publishConfig": {
@@ -43,9 +43,9 @@
     "@rxap/generator-utilities": "^1.1.0-dev.7",
     "@rxap/plugin-localazy": "^16.1.0-dev.6",
     "@rxap/plugin-utilities": "^16.1.0-dev.9",
-    "@rxap/ts-morph": "^0.1.0-dev.0",
+    "@rxap/ts-morph": "^0.1.0-dev.2",
     "@rxap/workspace-ts-morph": "^0.1.0-dev.3",
-    "@rxap/workspace-utilities": "^0.1.0-dev.6",
+    "@rxap/workspace-utilities": "^0.1.0-dev.7",
     "nx": "^16.5.0",
     "ts-morph": "^18.0.0",
     "@rxap/node-utilities": "1.1.0-dev.4",
@@ -67,7 +67,7 @@
       },
       {
         "package": "@rxap/ts-morph",
-        "version": "0.1.0-dev.0"
+        "version": "0.1.0-dev.2"
       },
       {
         "package": "@rxap/workspace-ts-morph",
@@ -75,7 +75,7 @@
       },
       {
         "package": "@rxap/workspace-utilities",
-        "version": "0.1.0-dev.6"
+        "version": "0.1.0-dev.7"
       },
       {
         "package": "@rxap/schematics-ts-morph",
@@ -85,7 +85,7 @@
   },
   "executors": "./executors.json",
   "schematics": "./generators.json",
-  "gitHead": "3d49d0a2548a0c403ad55c564108b54ba734a677",
+  "gitHead": "2452f57c3479421535ba4688e62ed100176ac15e",
   "main": "./src/index.js",
   "types": "./src/index.d.ts"
 }

package/src/generators/init-application/files/app/app.navigation.ts.template

@@ -0,0 +1,11 @@
+import {
+  NavigationWithInserts,
+  RXAP_NAVIGATION_CONFIG,
+} from '@rxap/layout';
+
+export const APP_NAVIGATION: () => NavigationWithInserts = () => [];
+
+export const APP_NAVIGATION_PROVIDER = {
+  provide: RXAP_NAVIGATION_CONFIG,
+  useValue: APP_NAVIGATION,
+};

package/src/generators/init-application/files/app/app.routes.ts.template

@@ -0,0 +1,14 @@
+import { Route } from '@angular/router';
+import { STATUS_CHECK_ROUTE } from '@rxap/ngx-status-check';
+
+export const appRoutes: Route[] = [
+  STATUS_CHECK_ROUTE,
+  {
+    path: '',
+    loadChildren: () => import('./layout.routes')
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];

package/src/generators/init-application/files/app/layout.routes.ts.template

@@ -0,0 +1,33 @@
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { Route } from '@angular/router';
+import {
+  LayoutComponent,
+  NavigationService,
+} from '@rxap/layout';
+import { StatusCheckGuard } from '@rxap/ngx-status-check';
+import { APP_NAVIGATION_PROVIDER } from './app.navigation';
+
+const ROUTES: Route[] = [
+  {
+    path: '',
+    component: LayoutComponent,
+    canActivateChild: [ StatusCheckGuard ],
+    children: [
+      {
+        path: '**',
+        redirectTo: '',
+      },
+    ],
+    providers: [
+      provideAnimations(),
+      APP_NAVIGATION_PROVIDER,
+      NavigationService,
+    ]
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];
+
+export default ROUTES;

package/src/generators/init-application/files/monolithic/app/app.config.ts.template

@@ -0,0 +1,34 @@
+import { HttpClientModule } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  importProvidersFrom,
+} from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+  provideRouter,
+  withEnabledBlockingInitialNavigation,
+} from '@angular/router';
+import { RXAP_ENVIRONMENT } from '@rxap/environment';
+import { SERVICE_STATUS_CHECK_METHOD } from '@rxap/ngx-status-check';
+import { StatusControllerHealthCheckRemoteMethod } from 'open-api-service-status/remote-methods/status-controller-health-check.remote-method';
+import { environment } from '../environments/environment';
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // required to be imported so that the http client is available in the application for the status check method
+    importProvidersFrom(HttpClientModule),
+    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
+    // it is required to provide the animations provider in the app config.
+    // If provided in a lazy loaded module the animations will not work
+    provideAnimations(),
+    {
+      provide: RXAP_ENVIRONMENT,
+      useValue: environment,
+    },
+    {
+      provide: SERVICE_STATUS_CHECK_METHOD,
+      useClass: StatusControllerHealthCheckRemoteMethod,
+    },
+  ],
+};

package/src/generators/init-application/files/monolithic/app/app.navigation.ts.template

@@ -0,0 +1,11 @@
+import {
+  NavigationWithInserts,
+  RXAP_NAVIGATION_CONFIG,
+} from '@rxap/layout';
+
+export const APP_NAVIGATION: () => NavigationWithInserts = () => [];
+
+export const APP_NAVIGATION_PROVIDER = {
+  provide: RXAP_NAVIGATION_CONFIG,
+  useValue: APP_NAVIGATION,
+};

package/src/generators/init-application/files/monolithic/app/app.routes.ts.template

@@ -0,0 +1,14 @@
+import { Route } from '@angular/router';
+import { STATUS_CHECK_ROUTE } from '@rxap/ngx-status-check';
+
+export const appRoutes: Route[] = [
+  STATUS_CHECK_ROUTE,
+  {
+    path: '',
+    loadChildren: () => import('./layout.routes')
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];

package/src/generators/init-application/files/monolithic/app/layout.routes.ts.template

@@ -0,0 +1,32 @@
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { Route } from '@angular/router';
+import {
+  LayoutComponent,
+  NavigationService,
+} from '@rxap/layout';
+import { StatusCheckGuard } from '@rxap/ngx-status-check';
+import { APP_NAVIGATION_PROVIDER } from './app.navigation';
+
+const ROUTES: Route[] = [
+  {
+    path: '',
+    component: LayoutComponent,
+    canActivateChild: [ StatusCheckGuard ],
+    children: [
+      {
+        path: '**',
+        redirectTo: '',
+      },
+    ],
+    providers: [
+      APP_NAVIGATION_PROVIDER,
+      NavigationService,
+    ]
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];
+
+export default ROUTES;

package/src/generators/init-application/files/monolithic/styles.scss.template

@@ -0,0 +1,3 @@
+@use "<%= relativePathToWorkspaceRoot %>/styles";
+
+/* You can add global styles to this file, and also import other style files */

package/src/generators/init-application/files/styles/_fonts.scss

@@ -0,0 +1 @@
+@use "fonts/material-icons";

package/src/generators/init-application/files/styles/_index.scss

@@ -0,0 +1,10 @@
+@use "./theme";
+
+html, body {
+  @apply h-full;
+}
+
+body {
+  @apply m-0;
+  @apply font-sans;
+}

package/src/generators/init-application/files/styles/_loading-animation.scss

@@ -0,0 +1,200 @@
+@mixin centre($axis: "both") {
+  position: absolute;
+  @if $axis == "y" {
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+  @if $axis == "x" {
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+  @if $axis == "both" {
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-51%, -50%);
+    -moz-transform: translate(-51%, -50%);
+    -ms-transform: translate(-51%, -50%);
+    -o-transform: translate(-51%, -50%);
+    transform: translate(-51%, -50%);
+  }
+}
+
+@mixin font-size($sizeValue: 1.6, $lineHeight: 2.4) {
+  font-size: ($sizeValue * 10) + px;
+  font-size: $sizeValue + rem;
+  line-height: ($lineHeight * 10) + px;
+}
+
+@mixin animation($animate...) {
+  $max: length($animate);
+  $animations: '';
+
+  @for $i from 1 through $max {
+    $animations: #{$animations + nth($animate, $i)};
+
+    @if $i < $max {
+      $animations: #{$animations + ", "};
+    }
+  }
+  -webkit-animation: $animations;
+  -moz-animation: $animations;
+  -o-animation: $animations;
+  animation: $animations;
+}
+
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@mixin loadingAnimation($background) {
+
+  $f-title: 'Roboto', sans-serif;
+  $f-body: 'Open Sans', sans-serif;
+
+  @include keyframes(outerRotate1) {
+    0% {
+      transform: translate(-50%, -50%) rotate(0)
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg)
+    }
+  }
+  @include keyframes(outerRotate2) {
+    0% {
+      transform: translate(-50%, -50%) rotate(0)
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(-360deg)
+    }
+  }
+
+  @include keyframes(textColour) {
+    0% {
+      color: #fff;
+    }
+    100% {
+      color: #3BB2D0;
+    }
+  }
+
+  .e-loadholder {
+    @include centre();
+    width: 240px;
+    height: 240px;
+    border: 5px solid #1B5F70;
+    border-radius: 120px;
+    box-sizing: border-box;
+
+
+    &:after {
+      @include centre;
+      content: " ";
+      display: block;
+      background: $background;
+      transform-origin: center;
+      z-index: 0;
+    }
+
+    &:after {
+      width: 100px;
+      height: 200%;
+      @include animation('outerRotate2 30s infinite linear');
+    }
+
+    .m-loader {
+      @include centre();
+      width: 200px;
+      height: 200px;
+      color: #888;
+      text-align: center;
+      border: 5px solid lighten(#1B5F70, 15%);
+      border-radius: 100px;
+      box-sizing: border-box;
+      z-index: 20;
+      text-transform: uppercase;
+
+      &:after {
+        @include centre;
+        content: " ";
+        display: block;
+        background: $background;
+        transform-origin: center;
+        z-index: -1;
+      }
+
+      &:after {
+        width: 100px;
+        height: 106%;
+        @include animation('outerRotate1 15s infinite linear');
+      }
+
+      .e-text {
+        @include font-size(1.4, 13);
+        @include centre();
+        @include animation('textColour 1s alternate linear infinite');
+        display: block;
+        width: 140px;
+        height: 140px;
+        text-align: center;
+        border: 5px solid lighten(#1B5F70, 25%);
+        border-radius: 70px;
+        box-sizing: border-box;
+        z-index: 20;
+
+        &:before, &:after {
+          @include centre;
+          content: " ";
+          display: block;
+          background: $background;
+          transform-origin: center;
+          z-index: -1;
+        }
+
+        &:before {
+          width: 110%;
+          height: 40px;
+          @include animation('outerRotate2 3.5s infinite linear');
+        }
+
+        &:after {
+          width: 40px;
+          height: 110%;
+          @include animation('outerRotate1 8s infinite linear');
+        }
+      }
+    }
+  }
+
+  #particleCanvas-White {
+    @include centre();
+    width: 100%;
+    height: 50%;
+    opacity: 0.1;
+  }
+
+  #particleCanvas-Blue {
+    @include centre();
+    width: 300px;
+    height: 300px;
+  }
+
+}

package/src/generators/init-application/files/styles/_palette.scss

@@ -0,0 +1,98 @@
+$primary-pat: (
+  50: var(--primary-50),
+  100: var(--primary-100),
+  200: var(--primary-200),
+  300: var(--primary-300),
+  400: var(--primary-400),
+  500: var(--primary-500),
+  600: var(--primary-600),
+  700: var(--primary-700),
+  800: var(--primary-800),
+  900: var(--primary-900),
+  A100: var(--primary-a100),
+  A200: var(--primary-a200),
+  A400: var(--primary-a400),
+  A700: var(--primary-a700),
+  contrast: (
+    50: var(--contrast-50),
+    100: var(--contrast-100),
+    200: var(--contrast-200),
+    300: var(--contrast-300),
+    400: var(--contrast-400),
+    500: var(--contrast-500),
+    600: var(--contrast-600),
+    700: var(--contrast-700),
+    800: var(--contrast-800),
+    900: var(--contrast-900),
+    A100: var(--contrast-a100),
+    A200: var(--contrast-a200),
+    A400: var(--contrast-a400),
+    A700: var(--contrast-a700),
+  ),
+);
+
+$accent-pat: (
+  50: var(--accent-50),
+  100: var(--accent-100),
+  200: var(--accent-200),
+  300: var(--accent-300),
+  400: var(--accent-400),
+  500: var(--accent-500),
+  600: var(--accent-600),
+  700: var(--accent-700),
+  800: var(--accent-800),
+  900: var(--accent-900),
+  A100: var(--accent-a100),
+  A200: var(--accent-a200),
+  A400: var(--accent-a400),
+  A700: var(--accent-a700),
+  contrast: (
+    50: var(--contrast-50),
+    100: var(--contrast-100),
+    200: var(--contrast-200),
+    300: var(--contrast-300),
+    400: var(--contrast-400),
+    500: var(--contrast-500),
+    600: var(--contrast-600),
+    700: var(--contrast-700),
+    800: var(--contrast-800),
+    900: var(--contrast-900),
+    A100: var(--contrast-a100),
+    A200: var(--contrast-a200),
+    A400: var(--contrast-a400),
+    A700: var(--contrast-a700),
+  ),
+);
+
+$warn-pat: (
+  50: var(--warn-50),
+  100: var(--warn-100),
+  200: var(--warn-200),
+  300: var(--warn-300),
+  400: var(--warn-400),
+  500: var(--warn-500),
+  600: var(--warn-600),
+  700: var(--warn-700),
+  800: var(--warn-800),
+  900: var(--warn-900),
+  A100: var(--warn-a100),
+  A200: var(--warn-a200),
+  A400: var(--warn-a400),
+  A700: var(--warn-a700),
+  contrast: (
+    50: var(--contrast-50),
+    100: var(--contrast-100),
+    200: var(--contrast-200),
+    300: var(--contrast-300),
+    400: var(--contrast-400),
+    500: var(--contrast-500),
+    600: var(--contrast-600),
+    700: var(--contrast-700),
+    800: var(--contrast-800),
+    900: var(--contrast-900),
+    A100: var(--contrast-a100),
+    A200: var(--contrast-a200),
+    A400: var(--contrast-a400),
+    A700: var(--contrast-a700),
+  ),
+);

package/src/generators/init-application/files/styles/_table.scss

@@ -0,0 +1,45 @@
+@use '@angular/material' as mat;
+
+@mixin table-theme($theme) {
+  $background: map-get($theme, background);
+  $accent: map-get($theme, accent);
+  $isDark: map-get($theme, is-dark);
+
+  .table-scroll-container {
+    // region scrollbar
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: mat.get-color-from-palette($accent, 100);
+
+      &:hover {
+        background: mat.get-color-from-palette($accent, 300);
+      }
+    }
+
+    // endregion
+  }
+
+  .dark {
+
+    .table-scroll-container {
+      &::-webkit-scrollbar-thumb {
+        background: mat.get-color-from-palette($accent, 900) !important;
+
+        &:hover {
+          background: mat.get-color-from-palette($accent, 700) !important;
+        }
+      }
+    }
+
+  }
+
+}