@rxap/plugin-angular 16.1.0-dev.3 → 16.1.0-dev.30

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

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

@@ -0,0 +1,102 @@
+@use "variables";
+@use "fonts";
+@use '@angular/material' as mat;
+@use 'palette' as palette;
+
+@import "table";
+@import 'loading-animation';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@include mat.core();
+
+$theme-primary: mat.define-palette(palette.$primary-pat);
+$theme-accent: mat.define-palette(palette.$accent-pat, A200, A100, A400);
+$theme-warn: mat.define-palette(palette.$warn-pat);
+$theme-typography: mat.define-typography-config(
+  $font-family: theme("fontFamily.mono")
+);
+
+
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn
+  ),
+  // Only include `typography` and `density` in the default theme.
+  typography: $theme-typography,
+  // https://m2.material.io/design/layout/applying-density.html#usage
+  // between -3 and 0
+  // density < -1 -> form field label not visible
+  density: 0,
+));
+
+$dark-theme: mat.define-dark-theme((
+  color: (
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn
+  ),
+));
+
+// Emit theme-dependent styles for common features used across multiple components.
+@include mat.core-theme($light-theme);
+
+// Emit styles for MatButton based on `$light-theme`. Because the configuration
+// passed to `define-light-theme` omits typography, `button-theme` will not
+// emit any typography styles.
+@include mat.all-component-themes($light-theme);
+@include table-theme($light-theme);
+
+@mixin define-utility-variables($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $isDark: map-get($theme, is-dark);
+
+  --background-color: #{map-get($background, background)};
+  --primary-color: #{mat.get-color-from-palette($primary)};
+  --accent-color: #{mat.get-color-from-palette($accent)};
+  --warn-color: #{mat.get-color-from-palette($warn)};
+
+  --hint-text-color: #{mat.get-color-from-palette($foreground, hint-text)};
+  --foreground-color: #{mat.get-color-from-palette($foreground, base)};
+
+  --accept-color: rgb(115, 190, 105);
+  --decline-color: rgb(204, 73, 51);
+
+}
+
+@mixin body-theme($theme) {
+
+  $background: mat.get-color-from-palette(map-get($theme, background), background);
+  background-color: $background;
+  color: mat.get-color-from-palette(map-get($theme, foreground), text);
+  @include loadingAnimation($background);
+
+}
+
+:root {
+  @include define-utility-variables($light-theme);
+}
+
+body.dark {
+  @include mat.core-color($dark-theme);
+  @include mat.all-component-colors($dark-theme);
+  @include table-theme($dark-theme);
+  @include define-utility-variables($dark-theme);
+}
+
+body {
+  @include body-theme($light-theme);
+
+  &.dark, &.dark-theme {
+    @include body-theme($dark-theme);
+  }
+
+}

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

@@ -0,0 +1,63 @@
+:root {
+  --primary-50: #fff8e1;
+  --primary-100: #ffecb3;
+  --primary-200: #ffe082;
+  --primary-300: #ffd54f;
+  --primary-400: #ffca28;
+  --primary-500: #ffc107;
+  --primary-600: #ffb300;
+  --primary-700: #ffa000;
+  --primary-800: #ff8f00;
+  --primary-900: #ff6f00;
+  --primary-a100: #ffe57f;
+  --primary-a200: #ffd740;
+  --primary-a400: #ffc400;
+  --primary-a700: #ffab00;
+
+  --accent-50: #e3f2fd;
+  --accent-100: #bbdefb;
+  --accent-200: #90caf9;
+  --accent-300: #64b5f6;
+  --accent-400: #42a5f5;
+  --accent-500: #28166f;
+  --accent-600: #1e88e5;
+  --accent-700: #1976d2;
+  --accent-800: #1565c0;
+  --accent-900: #0d47a1;
+  --accent-a100: #82b1ff;
+  --accent-a200: #448aff;
+  --accent-a400: #2979ff;
+  --accent-a700: #2962ff;
+
+  --warn-50: #fce7eb;
+  --warn-100: #f8c3cd;
+  --warn-200: #f39bab;
+  --warn-300: #ee7389;
+  --warn-400: #ea5570;
+  --warn-500: #e63757;
+  --warn-600: #e3314f;
+  --warn-700: #df2a46;
+  --warn-800: #db233c;
+  --warn-900: #d5162c;
+  --warn-a100: #ffffff;
+  --warn-a200: #ffd3d7;
+  --warn-a400: #ffa0a8;
+  --warn-a700: #ff8691;
+
+  --contrast-50: rgba(black, 0.87);
+  --contrast-100: rgba(black, 0.87);
+  --contrast-200: rgba(black, 0.87);
+  --contrast-300: rgba(black, 0.87);
+  --contrast-400: white;
+  --contrast-500: white;
+  --contrast-600: white;
+  --contrast-700: white;
+  --contrast-800: white;
+  --contrast-900: white;
+  --contrast-a100: rgba(black, 0.87);
+  --contrast-a200: rgba(black, 0.87);
+  --contrast-a400: rgba(black, 0.87);
+  --contrast-a700: rgba(black, 0.87);
+
+}
+

package/src/generators/init-application/files/styles/fonts/_material-icons.scss

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./material-icons.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+}