npm - @rxap/plugin-angular - Versions diffs - 16.1.0-dev.8 → 16.1.0 - Mend

@rxap/plugin-angular 16.1.0-dev.8 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/src/generators/init-application/files/monolithic/index.html.template ADDED Viewed

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= classify(name) %></title>
+    <base href="/"/>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
+    <meta content="true" name="HandheldFriendly"/>
+    <link href="favicon.ico" rel="icon" type="image/x-icon"/>
+    <% if (serviceWorker) { %><link href="manifest.webmanifest" rel="manifest"/><% } %>
+    <meta content="#1976d2" name="theme-color"/>
+    <link href="assets/icons/icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
+    <link href="assets/icons/icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
+    <link href="assets/icons/icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
+    <link href="assets/icons/icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
+    <link href="assets/icons/icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
+    <link href="assets/icons/icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
+    <link href="assets/icons/icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
+    <link href="assets/icons/icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
+    <link href="assets/icons/icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
+    <link href="assets/icons/icon-192x192.png" rel="icon" sizes="192x192" type="image/png">
+    <link href="assets/icons/icon-32x32.png" rel="icon" sizes="32x32" type="image/png">
+    <link href="assets/icons/icon-96x96.png" rel="icon" sizes="96x96" type="image/png">
+    <link href="assets/icons/icon-16x16.png" rel="icon" sizes="16x16" type="image/png">
+    <meta content="<%= classify(name) %>" name="application-name"/>
+    <meta content="#1976d2" name="msapplication-TileColor"/>
+    <meta content="assets/icons/icon-144x144.png" name="msapplication-TileImage"/>
+    <meta content="#ffffff" name="theme-color">
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
+    <meta content="#ffffff" name="msapplication-navbutton-color">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
+    <link href="https://fonts.gstatic.com" rel="preconnect">
+    <style>
+      html {
+        -webkit-font-smoothing: antialiased;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      *:before, *:after {
+        box-sizing: border-box;
+      }
+      .loading-container {
+        max-height: 100vh;
+        min-height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                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)',
+              },
+              accent: {
+                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)',
+              },
+              warn: {
+                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)',
+              },
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body class="mat-typography">
+  <<%= prefix %>-root>
+    <div class="loading-container">
+      <div class="e-loadholder">
+        <div class="m-loader">
+          <span class="e-text">Loading</span>
+        </div>
+      </div>
+      <div id="particleCanvas-Blue"></div>
+      <div id="particleCanvas-White"></div>
+    </div>
+  </<%= prefix %>-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
+  <script>
+    if (
+      localStorage.getItem('rxap-dark-mode') === 'true' ||
+      (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      document.body.classList.add('dark-theme', 'dark', 'dark-mode');
+    }
+  </script>
+  </body>
+</html>

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

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

package/src/generators/init-application/files/oauth/silent-refresh.html ADDED Viewed

@@ -0,0 +1,42 @@
+<html>
+<body>
+<script>
+  var checks = [ /[\?|&|#]code=/, /[\?|&|#]error=/, /[\?|&|#]token=/, /[\?|&|#]id_token=/ ];
+  function isResponse(str) {
+    if (!str) {
+      return false;
+    }
+    for (var i = 0; i < checks.length; i++) {
+      if (str.match(checks[i])) {
+        return true;
+      }
+    }
+    return false;
+  }
+  var message = isResponse(location.hash) ? location.hash : '#' + location.search;
+  if (window.parent && window.parent !== window) {
+    // if loaded as an iframe during silent refresh
+    window.parent.postMessage(
+      message,
+      location.origin,
+    );
+  } else if (window.opener && window.opener !== window) {
+    // if loaded as a popup during initial login
+    window.opener.postMessage(
+      message,
+      location.origin,
+    );
+  } else {
+    // last resort for a popup which has been through redirects and can't use window.opener
+    localStorage.setItem(
+      'auth_hash',
+      message,
+    );
+    localStorage.removeItem('auth_hash');
+  }
+</script>
+</body>
+</html>

package/src/generators/init-application/files/service-worker/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,52 @@
+{
+  "name": "<%= classify(name) %>",
+  "short_name": "<%= classify(name) %>",
+  "theme_color": "#ffc107",
+  "background_color": "#303030",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "id": "<%= dasherize(name) %>",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/src/generators/init-application/files/shared/Dockerfile ADDED Viewed

@@ -0,0 +1,29 @@
+FROM registry.gitlab.com/rxap/docker/i18n-nginx:alpine
+ARG PROJECT_NAME
+ARG SUB_DOMAIN
+RUN if [ -z "$PROJECT_NAME" ]; then exit 1; fi
+ENV TRAEFIK_SERVICE_NAME=$PROJECT_NAME
+ENV TRAEFIK_ROUTER_NAME=$PROJECT_NAME
+ENV TRAEFIK_ROUTER_PRIORITY=10
+ENV TRAEFIK_ROUTER_SUB_DOMAIN=$SUB_DOMAIN
+ENV TREAFIK_HEALTH_CHECK_INTERVAL=60s
+ENV TREAFIK_HEALTH_CHECK_TIMEOUT=10s
+ENV TREAFIK_HEALTH_CHECK_PATH=/index.html
+LABEL traefik.enable=true
+LABEL traefik.http.services.$TRAEFIK_SERVICE_NAME.loadbalancer.healthCheck.path=$TREAFIK_HEALTH_CHECK_PATH
+LABEL traefik.http.services.$TRAEFIK_SERVICE_NAME.loadbalancer.healthCheck.interval=$TREAFIK_HEALTH_CHECK_INTERVAL
+LABEL traefik.http.services.$TRAEFIK_SERVICE_NAME.loadbalancer.healthCheck.timeout=$TREAFIK_HEALTH_CHECK_TIMEOUT
+LABEL traefik.http.services.$TRAEFIK_SERVICE_NAME.loadbalancer.server.port=80
+LABEL traefik.http.routers.$TRAEFIK_ROUTER_NAME.rule=HostRegexp(`${TRAEFIK_ROUTER_SUB_DOMAIN}{domain:.+}`)
+LABEL traefik.http.routers.$TRAEFIK_ROUTER_NAME.priority=$TRAEFIK_ROUTER_PRIORITY
+LABEL traefik.http.routers.$TRAEFIK_ROUTER_NAME.service=$TRAEFIK_SERVICE_NAME
+COPY . /usr/share/nginx/html

package/src/generators/init-application/files/shared/assets/build.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {}

package/src/generators/init-application/files/shared/ngsw-config.json CHANGED Viewed

@@ -18,25 +18,13 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/assets/**",
-          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+          "assets/**",
+          "*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
         ]
       }
     }
   ],
   "dataGroups": [
-    {
-      "name": "config",
-      "urls": [
-        "/*.json"
-      ],
-      "cacheConfig": {
-        "strategy": "freshness",
-        "maxSize": 10,
-        "maxAge": "1d",
-        "timeout": "30s"
-      }
-    },
     {
       "name": "api",
       "urls": [

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

@@ -0,0 +1,9 @@
+@import "fonts/material-icons";
+@import "fonts/croissant-one";
+@import "fonts/inclusive-sans";
+@import "fonts/pixelify-sans";
+@import "fonts/roboto-mono";
+@import "fonts/young-serif";
+@import "fonts/roboto";
+@import "fonts/mooli";
+@import "fonts/fuggles";

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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;
+        }
+      }
+    }
+  }
+}